N

번들러 다양한 파일(HTML, CSS, JS, image, ico, sass 등...)을 묶어 실제로 웹 브라우저가 실행할 수 있도록 결과물을 만드는 일종의 도구 Parcel 설치할 패키지 및 구성 옵션을 신경쓰지 않고 최소한의 노력으로 하나의 프로젝트를 시작할 수 있다. 세밀한 번들러 재현은 불가능하다. Vue 파일을 브라우저가 읽을 수 있도록 변환시켜 준다. 진입점을 설정하면 필요한 패키지를 자동으로 설치해 준다. 개발용과 빌드용이 존재하며, scripts에서 설정한다. Build(배포용) : 결과물만 나오기 때문에 서버가 실행되지 않는다. Dev(개발용) : 개발용 서버가 열려 실행된다. Node.js 버전은 v14 이상이 필요하다. 해보기 전, nvm이 PC에 설치되어 있어야 한다. node.js..

연결 선택자 하위 선택자 부모 요소에 포함된 하위 요소 모두에 스타일이 적용된다. 자식 요소 뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. div p { color: red; } 자식 선택자 하위 요소 전체에 스타일을 적용하지 않고, 자식 요소에만 스타일이 적용된다. '>'를 사용 div > p { color: red; } /* div의 자식 요소 p에만 색이 red로 적용된다. */ 인접 형제 선택자 형제 요소 중 가장 가까운 태그의 첫번째 요소에 스타일을 적용한다. '+'를 사용 div + p { color: red; } /* div 태그의 형제 요소 p 중 첫번째 요소에만 적용 */ 형제 선택자 모든 형제 요소들에 스타일을 적용한다. '~'를 사용 div ~ p { c..

우선 새로운 주차가 시작되면서 지난 2주간 TIL을 작성하지 못했다는 것에 반성을 한다. Notion 클로닝이라는 주제로 개인 프로젝트 과제가 주어졌다. 완벽하게 노션을 구현하지는 못했지만, 최소한의 주어진 공통 기능을 구현하려 노력했다. 교육을 시작한 1주차에 비해 지금은 많은 발전을 이뤘다고 생각한다. 그러나 수월하게 진행하지 못했기 때문에 더 많은 노력이 필요하다고 생각한다. 어느덧 6주차가 되면서 CSS 강의를 듣게 되었다. 프로젝트 과제를 하면서 어렵게 생각한 것이 CSS 였다. 익숙치 않고, 디자인 감각 또한 없었기 때문에 강의를 듣는 데에도 어려웠다. 그래서 강의를 모두 들은 후, 책으로 CSS 공부를 처음부터 시작하려고 한다. 책을 빠르게 완독한 후, 오늘 들었던 강의를 다시 한 번 보게 ..

콜백 헬 JS는 비동기 처리를 위한 하나의 패턴으로 콜백 함수를 사용한다. ES6 이전의 콜백 패턴은 ‘콜백 헬(Callback Hell)‘로 인해 가독성이 나쁘고, 비동기 처리 중 발생한 에러 처리가 곤란하며, 여러 비동기 처리를 한 번에 처리하는 데 한계가 있다. Ex) 로그인 과정 아이디와 비밀번호 입력 -> DB 접근 -> 입력한 아이디와 비밀번호 탐색 -> 로그인 or 아이디 없음 or 비밀번호 불일치 -> 성공 여부에 따른 홈페이지 로드… 만약에 1) 아이디에 특수문자가 있다면? 2) DB 접근하는 과정에서 통신이 끊긴다면? 3) DB에서 일치하는 아이디를 찾아 성공했다는 status를 보내는 과정에서 통신이 끊긴다면? 4) DB에 일치하는 아이디가 없어 로그인에 실패한다면? 5) 비밀번호가 ..

KDT 교육 시작 후 3주의 시간이 흘렀다! 뒤돌아 보면 시간이 KTX급으로 빠르게 흘러갔다. 1주 차는 비교적 쉬운 과제와 함께 진행됐지만, 2주 차는 차원이 달랐다. 저번 주 처음 경험해보는 함수형 프로그래밍의 벽은 너무나 높았다. 명령형에 익숙해져 있었기 때문에 새로운 코딩 방법은 매우 어려웠다. 동영상 강의도 무지막지했기 때문에 시간 분배에 어려움이 있었다. 그러나 결론적으로는 대성공(?)이었던 2주 차를 보냈다. 주어진 알고리즘 과제도 함수형으로 짤 수 있었으며, 팀원들의 코드 리뷰 또한 수월하게 진행할 수 있었다. 물론 이 과정에서 해답도 보고, 강의도 계속해서 돌려봤지만 이러한 시간들 덕분에 성공적인 한 주를 보낼 수 있었다고 생각한다. 이번 주 이번 3주 차는 2주 차에 비해 훨씬 안정적으..

JavaScript로 토글 버튼을 만들도록 한다. 버튼의 기능은 버튼을 눌렀을 때 버튼 안에 있는 텍스트에 취소선이 그려지거나 없어지는 기능이다. 우선 index.html 파일을 만들어 ToggleButton.js 파일을 불러오도록 한다. 또한, 명령형 프로그래밍 방식으로 먼저 만들어본다. const body = document.querySelector("body"); const button1 = document.createElement("button"); const button2 = document.createElement("button"); const button3 = document.createElement("button"); button1.textContent = "Button1"; button1..

this 동작을 나타내는 메소드는 자신이 속한 객체의 상태, 즉 프로퍼티를 참조하고 변경할 수 있어야 한다. 이때 메소드가 자신이 속한 객체의 프로퍼티를 참조하려면 자신이 속한 객체를 가리키는 식별자를 참조할 수 있어야 한다. 아래 코드에서 getName 메소드는 자신이 속한 객체를 가리키는 식별자 'person'을 참조하고 있다. 이 참조 표현식이 평가되는 시점은 getName 메소드가 호출되어 함수 몸체가 실행되는 시점이다. const person = { name: "kim", age: 26, getName() { return person.name; }, }; console.log(person.getName()); // kim 이 코드의 객체 리터럴은 person 변수에 할당되기 직전에 평가되어, g..

함수 실행 컨텍스트 함수를 호출하면 함수 코드가 평가되어 함수 실행 컨텍스트가 생성된다. 생성된 함수 실행 컨텍스트는 '실행 컨텍스트 스택(콜 스택)'에 푸시되고 함수 코드가 실행된다. 함수 코드의 실행이 종료되면 함수 실행 컨텍스트는 콜 스택에 팝 되어 제거된다. 동기 처리 JavaScript 엔진은 단 하나의 실행 컨텍스트(콜 스택)를 가진다. 즉, 2개 이상의 함수를 동시에 실행할 수 없다. 한 번에 하나의 태스크를 실행하기 때문에 JavaScript 엔진은 싱글 스레드 방식으로 동작한다. -> 블로킹(작업 중단)이 발생한다. 태스크가 순서대로 처리되기 때문에 실행 순서가 보장된다. 비동기처리 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 바로 실행하는 방식. 실행 순서가 보장되..