N

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

콜백 헬 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 엔진은 싱글 스레드 방식으로 동작한다. -> 블로킹(작업 중단)이 발생한다. 태스크가 순서대로 처리되기 때문에 실행 순서가 보장된다. 비동기처리 현재 실행 중인 태스크가 종료되지 않은 상태라 해도 다음 태스크를 바로 실행하는 방식. 실행 순서가 보장되..

일급 객체 다음의 조건을 만족하는 객체 무명의 리터럴로 생성 가능(런타임에 생성 가능) 변수나 자료구조에 저장 가능 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 일급 함수 JS에서 함수는 일급객체다. 함수를 객체와 동일하게 사용할 수 있다. 객체는 값이므로 함수는 값과 동일하게 취급할 수 있다. 따라서 함수는 값을 사용할 수 있는 곳(변수 할당문, 객체의 프로퍼티 값, 배열의 요소, 함수 호출의 인수, 함수 반환문)이라면 어디서든지 리터럴로 정의할 수 있으며, 런타임에 함수 객체로 평가된다. 특징 일반 객체와 같이 함수의 매개변수에 전달 가능 함수의 반환값으로 사용 가능 일반 객체는 호출할 수 없지만, 함수 객체는 호출할 수 있다. 일반 객체에는 없는 함수 고유의 프로퍼티를 소유한다.(arg..

HTML Hyper Text MarUp Language 로직이 실행되지 않기 때문에 HTML은 언어가 아니다.(계산이 되지 않는다!) 스타일의 수정 사항이 발생했을 때, 각각의 파일을 수정해야 했기 때문에 오랜 시간이 걸렸다. 그러나 CSS를 통해 HTML의 스타일을 한꺼번에 수정할 수 있다.(HTML 파일과 CSS 파일을 분리하여 수정 가능) HTML5 영상과 음성을 처리하기 위한 멀티미디어 요소가 추가되었다.(audio, video, canvas) 구조적인 요소가 추가되었다.(header, nav, article, section 등..) 표현을 담당하던 태그 대신 의미를 담은 태그가 추가되었다. CSS HTML에 스타일을 추가하여 더욱 더 동적이고 멋진(?) 웹을 표현할 수 있다. HTML은 문서 구..