분류 전체보기 (39) 썸네일형 리스트형 [9주차] CSS-in-JS의 장단점 📌 본인이 생각하는 CSS-in-JS의 장점과 단점을 설명해 주세요. 👼 장점 지역 스코프로 스타일을 적용한다. CSS로 스타일링을 하면 클래스가 전역 스코프로 선언되기 때문에 클래스 이름이 중복된 경우 원치 않는 스타일링을 하게 될 수 있다. 스타일 코드를 관리하기가 쉽다. .css 파일은 주로 src/styles 디렉토리에서 관리된다. 컴포넌트가 많아지고, 프로젝트 규모가 커질수록 각 컴포넌트에서 어떤 스타일을 사용하는지 빠르게 구분하기 어렵다. CSS-in-JS는 컴포넌트 파일에서 스타일까지 한번에 다룰 수 있다. 자바스크립트 변수를 스타일에 사용할 수 있다. 동적 스타일링을 하기 쉽다. 👿 단점 런타임 오버헤드를 늘린다. 렌더링될 때 document에 삽입할 수 있는 일반 CSS로 스타일을 직렬화.. [8주차] 리액트 생명주기란? 📌 리액트 생명주기(life cycle)에 대해 설명해 주세요. 컴포넌트는 3단계의 생명주기를 갖는다. 생성 (mounting) 업데이트 (updating) 제거 (unmounting) 클래스 컴포넌트 마운트 (mount) constructor 컴포넌트의 생성자 메소드 컴포넌트가 생성되면 가장 먼저 실행된다. 생성된 리액트 element를 return한다. getDerivedStateFromProps props로 받아온 것을 state에 설정하고 싶을 때 사용한다. render 컴포넌트를 렌더링하는 메소드 componentDidMount 첫번째 렌더링이 끝나면 호출되는 메소드 컴포넌트의 마운트가 끝났다는 것을 알려준다. 이 메소드가 호출되면 화면에 컴포넌트가 나타난 것이다. 업데이트 (updating) .. [7주차] React 배열 렌더링에서 Key를 사용하는 이유 📌 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. key값을 사용해야 하는 이유 예를 들어, [딸기, 망고, 포도] 에서 [딸기, 포도]로 결과가 바뀌면 망고를 삭제한건지 포도를 삭제 → 망고를 포도로 교체 인지 알 수가 없다! → 배열의 변화를 정확하게 전달하기 위해 key를 사용해야 한다. 만약 [망고, 포도] → [사과, 망고, 포도]가 된 경우 리액트 입장에서는 처음에 데이터를 비교하였을 때 망고 ≠ 사과 이기 때문에 망고, 포도는 이미 존재하는 데이터임에도 불구하고 전체 순서가 변경되었다고 생각해 전체 요소를 새로 렌더링하게 된다. → 엄청나게 비효율적인 방식인 것이다. 만약 key값을 설정해 준다면, 리액트는 original DOM과 비교하여 사과만 새로운 데이.. [7주차] 리액트 Virtual DOM이란? 📌 리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. DOM Document Object Model Document : 하나하나의 HTML element를 담고 있는 웹페이지 HTML element를 tree 형태로 표현한 것 브라우저는 이 DOM을 분석하여 우리에게 페이지를 띄워주는 것이다. DOM 조작 DOM이 제공하는 API를 통해 DOM tree에 접근하고, 원하는 element를 조작하는 것 ex. getElementById, querySelector Virtual DOM 실제 DOM의 복사본 JS 객체 형태로 메모리에 저장되어 있다. virtual DOM은 브라우저에 있는 문서에 직접적으로 접근할 수 없다. 즉, 화면에 보여지는 내용을 직접 수정할 수 .. [6주차] AJAX란? 📌 AJAX에 대해 설명해 주세요. AJAX란? AJAX : Asynchronous JavaScript And XML JavaScript를 사용해서 client와 server가 Asynchronous하게 통신하는 웹 페이지를 만드는 개발 기법 중 하나다. 여기서 통신은 client가 request를 보내고, server가 response를 보내주는 것을 의미한다. 비동기적 통신 방법 중 하나라고 이해해도 된다. 다음과 같은 데이터 타입들로 AJAX 통신을 할 수 있다. JSON [6주차] setTimeout() 실행 과정 📌 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 1번 코드에 의해 num에 1이 할당된다. setTimeout()은 Web API가 처리하도록 실행 흐름을 넘긴다. setTimeout(callback, 0)이 실행되면 callback함수를 callback queue 로 넘긴다. 3번 코드에 의해 num에 3이 할당된다. 4번 코드에 의해 현재 num에 할당된 3이 출력된다. 이후 call stack이 비어있으면, Event Loop가 그것을 확인하고 callback queue에 저장해둔 callback.. [코드잇 스프린트 5주차] 위클리 페이퍼 📌 자바스크립트 this에 대해 설명해 주세요. this는 함수를 호출한 객체를 가리키는 키워드이다. 전역 공간에서 this는 window 객체(전역 객체)를 가리킨다. 만약 함수를 단순 호출했다면 this는 전역 객체를 가리킨다. 만약 객체가 메소드를 호출했다면 메소드를 호출한 객체가 this가 된다. arrow function의 경우에는 arrow function을 감싸는 상위 스코프에서 유효한 this를 찾게 된다. 즉, arrow function은 호출한 객체를 가리키지 않으므로 객체의 메소드를 만들 때는 arrow function 대신 일반 함수를 사용하는 것이 좋다. 이벤트 핸들러에서 this는 이벤트를 발생시킨 요소가 된다. new 키워드와 함께 함수를 작성하면 그 함수는 생성자가 되며 생성.. [코드잇 스프린트 5주차] 모던 자바스크립트 ✏️ 모던 자바스크립트 이해하기 1-01. 모던 자바스크립트란? - Modern JavaScript : 현시점에 사용하기 적합한 범위 내에서 최신 버전의 표준을 준수하는 자바스크립트 1-03. ECMAScript 더 알아보기 - JavaScript vs ECMAScript JavaScipt는 프로그래밍 언어(ECMAScript를 준수해서 만든 결과물) vs ECMAScript는 프로그래밍 언어의 표준(설명서) 모든 스크립트 언어라면 ECMAScript를 꼭 지켜야 한다 JavaScript는 ECMAScript를 기반 + 다른 부가적 기능 ✏️ 자바스크립트의 동작 원리 2-01. 데이터 타입의 특징과 종류 - 자바스크립트는 유연한 데이터 타입을 가지고 있다. (변수에 데이터 타입 저장 x) - 추가적으로 .. [코드잇 스프린트 4주차] 위클리 페이퍼 📌 브라우저가 어떻게 동작하는지 설명해 주세요. 브라우저란 우리가 흔히 사용하는 크롬, 사파리 등과 같이 웹 페이지, 이미지 등의 콘텐츠를 수신, 전송 및 표현하는 소프트에어를 말한다. 브라우저의 주요 기능은 사용자가 선택한 자원을 서버에 요청하고, 브라우저에 표시하는 것이다. 위 그림은 브라우저의 기본 구조이다. - 사용자 인터페이스 : 주소 표시줄, 이전/다음, 새로고침 버튼, 북마크 메뉴 등. 요청한 페이지를 보여주는 영역을 제외한 나머지 모든 부분이다. - 브라우저 엔진 : 사용자 인터페이스와 렌더링 엔진 사이의 동작을 제어해주는 엔진이다. - 렌더링 엔진 : 요청한 콘텐츠를 표시하는 과정이다. 예를 들어 HTML을 요청하면 HTML과 CSS를 파싱하여 화면에 표시한다. - 통신 : HTTP 요청.. [코드잇 스프린트 4주차] 인터랙티브 자바스크립트 ✏️ 인터랙티브 자바스크립트 시작하기 1-01. 웹 서비스와 JavaScript - JavaScript는 웹 페이지의 여러 요소들을 좀 더 자유롭게 다루기 위해 등장 - HTML : 웹 페이지 구성 - CSS : 웹 페이지 디자인 - JavaScript : 웹 페이지 동작 -> 어떤 버튼을 클릭하면 웹 페이지의 디자인이 바뀐다거나.. 그런 동작 1-02. HTML/CSS + JavaScript 맛보기 - HTML과 CSS의 한계 : 한 번 설계한 페이지에 특별히 변화를 주는 것이 어려움 - 일반적으로 맨 밑에 - JS를 이용해 실시간으로 HTML에 변화를 주거나 스타일을 수정할 수 있음 1-03. id로 태그 선택하기 - 존재하지 않는 태그라면 null값이 return // id로 HTML 태그 선택 c.. 이전 1 2 3 4 다음
