letsgojieun

Literals and properties 자바스크립트에서 primitive 타입을 사용하면 인자가 많아질수록 추가해야하는 것들이 점점 늘어나서 관리하거나 그룹으로 묶어서 생각하기도 힘들다. 그래서 이걸 개선하고자 오브젝트를 사용한다. 자바스크립트에선 클래스가 없어도 {}괄호를 이용해서 바로 오브젝트를 생성할 수 있다 또한 자바스크립트는 매우 동적인 언어이므로 데이터 타입이 런타임 때 결정된다. 그래서 뒤늦게 property를 추가하거나 삭제가 가능한데, 금방 코딩하기엔 좋지만 나중에 유지보수가 힘들어진다는 단점이 있다. computed properties 코딩하는 그 순간, 키에 해당하는 값을 받아오고 싶을 때나 평소 코딩할때는 주로 . 을 사용하고 컴퓨티드 프로퍼티즈 ['']를 쓸땐 정확히 어떤 키가..

block elements인데 inline elements처럼 옆에 오는 이유는? 예전 클론코딩 과제를 하면서 생긴 의문점나는 분명 block 요소인 h1, header를 사용했는데 왜 또 다른 블록 요소인 div의 옆으로 배치되는 건지 이해가 안 됐었다분명 둘 다 블록요소니까 다른 줄에 배치되어야 하는 거 아닌가? 그래서 검색을 해보니까 display:flex; 를 주면 flex 아이템들은 가로방향으로 배치되고 자신이 가진 내용물의 width만큼 차지하게 된다고 한다.즉 Body안에 display flex 속성값을 주면 그 안의 블록이 모두 inline-block처럼 변한다처음에 flex 요소의 특징을 잘 몰라서 고민 끝에 제목이 있는 header를 position:absolute; 그리고 top의 값..

class 클래스란? class person { name; age; speak(); } : 자바스크립트의 class란 관련 있는 변수나 함수를 묶어놓은 것으로 위의 코드를 통해 이해할 수 있는 건 name, age 같은 속성 (field)와 speak 같은 행동 (method)가 존재한다. 반면 필드는 있지만 메소드가 없는 경우도 많은데 이는 data class 데이터클래스라 부른다. 여기서 class는 붕어빵을 만들 수 있는 틀이라고 생각하면 이해하기 쉽다 이 class 자체에는 데이터는 존재하지 않고 틀만 정하는 것이다. (그러고보니 학점은행제에서 배우는 객체지향 프로그래밍 언어에서도 class와 object 설명을 해줄 때 다들 붕어빵 틀에 비유해서 설명해줬다. 비유가 찰떡이라 그런가 보다,,!) ..

function 함수의 정의 및 기능? function 함수는 sub-program이라고도 불린다. 프로그램 안에서 각각의 작은 단위의 기능들을 수행한다. 프로그램을 구성하는 매우 기본적인 블록이다. 함수는 여러 번 재사용이 가능하다 한 가지의 일 (하나의 함수엔 하나의 기능을!) 또는 어떤 것을 계산할 때 사용한다. 이름을 정하는 네이밍은 동사 형식으로 지정한다 (함수명을 보고 어떤 동작을 하는 함수인지 알 수 있게끔) 자바스크립트에서 함수는 오브젝트이다 Input(parameters)를 받아서 Output(return)하는 것이 함수이다. API를 사용할 때 함수의 이름을 보고 대충 '이러한 동작을 하겠구나'라고 유추할 수 있고, 전달해야 하는 parameter의 값은 무엇인지, 어떠한 값이 리턴되길..

var, let, const의 차이점을 설명하기에 앞서 여기서 나올 기본개념을 정리해보자면, 우선 자바스크립트의 데이터 타입은 크게 두 가지로 분류가 가능하다 계속 변경이 가능한 Mutable 데이터 타입과, 변경이 불가능한 Immutable 데이터 타입이 존재한다. 이 두 가지의 예시는 밑에서 더 자세히 정리해보겠다 위의 그림을 조금씩 참고해가며 var, let, const에 대해 이해하자 Var ? 요즘엔 var를 사용하는 추세는 아니지만 (아직 현업에서 사용하는 곳도 있긴 하다고 들었다) 왜 사용하지 않는지, ES6부터 새로 나온 let, const와 다른 점은 무엇인지 알아볼 필요가 있다. var의 가장 큰 차이점은 변수의 재선언 var age = 1이라고 작성 후, 밑에서 var age = 2라..

처음 자바스크립트 독학하면서 알게 된 유튜버 드림코딩 엘리님의 강의. 기초까진 괜찮았다가 함수들이 점점 나오면서 이해가 아예 되지 않아서 멘붕의 연속이었다 그래서 같은 강의를 거의 5번 넘게 돌려보고, 그래도 이해가 안 되는 부분은 책을 읽어가며 이해했다. 내 머리가 좋지 않다는 건 알고 있었지만 이렇게까지 심각했나? 싶을 정도였는데, 강의 밑의 댓글들을 보니 동지들이 많았다 ^^.. 절대 혼자만 헤매고 있는 게 아니니 자바스크립트에서 너무 좌절하지 않도록! 프런트엔드의 경우 HTML, CSS는 비교적 쉽게 접근이 가능하여 (이 둘은 프로그래밍 언어가 아니다.) 프런트엔드를 만만하게 볼 수 있지만 자바스크립트를 맞닥뜨리는 순간, 이 분야에 쉽게 얻을 수 있는 건 없다고 느낄 것이다.. 나는 정말 뼈저리게..

html 문서에서 src 속성의 외부 스크립트 script 를 로딩 할 때 다양한 방법이 존재한다. 오늘은 상황에 따라서 어떻게 script를 불러와야 효율적인지 각각의 방법과 그 특징에 대해서 알아보자! 1. 에 를 별다른 조건 없이 넣는 경우 스크립트가 모두 로딩 된 후에서야 사용자들은 스크립트 밑의 페이지를 볼 수 있는데 만약 스크립트의 용량이 크다면 로딩 시간이 오래 걸릴 것이고, 그 시간 동안은 페이지 자체를 막아버리기 때문에 (자바스크립트의 기본 옵션은? 동기처리이다! ) 스크립트에서 DOM 요소에 접근이 불가능해진다. 실행 흐름을 보면, 브라우저가 html 문서를 위에서부터 아래로 쭉 읽는데 여기서 script를 만나면 바로 script 안의 내용을 한 줄 한 줄 해석하기 시작한다. 하지만 ..

콜백함수(Callback)란 ? 이름에서 알 수 있듯이 나중에 호출되는 함수이다. 바로 전 포스팅에서 설명했던 비동기처리 방식으로, 어떠한 행동을 다른 객체에게 전달하고 그 일이 끝날 때까지 기다리지 않고 곧바로 다른 일을 한다. 즉 어떤 이벤트가 발생 또는 특정한 시점에 도달했을 때 호출되는 함수를 말한다. (호출 방식을 말함) 이러한 방식으로 싱글스레드가 계속 움직일 수 있게 해주는 Non-Blocking 방식으로 동작하며 이를 비동기적 테크닉이라고 부른다. 콜백지옥은 어떻게 생기는가 ? 여러 개의 함수를 비동기적으로 하나씩 불러오고 싶을 때 콜백을 사용할 것이다. ex. 1번 로드하고 에러 없으면 2번 로드하고 에러 없으면 3번 ... 이러한 코드를 생각하면 콜백 안에 콜백을 넣게 되는데 단 몇 개..

HTML 배우면서 많이 사용했었던 앵커(링크)와 ul, ol, li 리스트어제 4-5페이지의 웹사이트 만들기 과제를 했었고 별생각 없이 앵커를 쭉 나열하였다.(평소 앵커에 리스트로 감싸는 것은 Navbar에서만 자주 사용했기 때문에) 오늘 수업을 들으면서 페이지를 넘길 때 (ex. 페이지넘버를 이용하여 페이지 이동 시) 여기에 있는 앵커 모두리스트로 묶어줘야 한다는 걸 깨달았다 ..근데 생각해보면 당연한건데 그 당연한 걸 생각을 못 하고 있었다이제라도 인지해서 그나마 다행이다 다음엔 꼭 잊지 말고 사용하자,,!

심플한 웹사이트 디자인의 치트키라고 할 수 있는 부트스트랩!많이 들어봤는데 사용해보진 않다가 최근 수업에서 부트스트랩 사용법을 배웠다이번 포스팅에선 부트스트랩 사용법과 Java jsp 의 templates 사용법에 대해간단히 작성해보았다.     부트스트랩 사용방법 1.  부트스트랩 홈페이지에 들어가서 빨간색 동그라미 표시가 된 Get started 를 클릭한다(navbar에 있는 Docs 클릭해도 된다)  2.  위의 버튼을 누르면 이 페이지가 나오는 걸 확인할 수 있는데 여기서 스크롤을 조금만 내리면     이러한 화면이 보인다.동그라미 표시 한 CSS, JS 코드를 복사하고 자신이 쓰는 편집기에 붙여넣기한다.나는 태그 바로 밑에다 복붙했다  3.    이제 본인이 원하는 디자인 코드를 가져다가 사용..