Q. 질문JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #12) A. 답변현재 상황요즘 채용 공고를 보면 대부분 타입스크립트를 할 수 있는 사람을 우대하는 것을 쉽게 볼 수 있다.그만큼 타입스크립트가 중요하고 대부분의 기업에서 프론트엔드 개발을 할 때 타입스크립트를 채택해 사용하고 있다는 것을 알 수 있다. 타입스크립트 사용 이유그렇다면 자바스크립트 대신 왜 귀찮게 타입스크립트를 사용하는 것일까? 바로 프로그램의 안정성 을 위한 것이다. 자바스크립트는 알다시피 동적 언어라서 고정된 타입 없이 자유롭게 변수를 선언하고 사용할 수 있다.이게 자바스크립트의 장점이 될 수 있지만 타입 오류가 코드를 실행하기 전까지 알 수 없..

Q. 질문 1웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #8)A. 렌더링 방식 - CSR, SSR, SSG웹 페이지 렌더링 방식에는 CSR, SSR, SSG 가 있다. 1. CSR - 클라이언트 사이드 렌더링1-1. 특징먼저 CSR 은 클라이언트에서 렌더링을 하는 방식이다. 사용자가 웹사이트에 접속을 하면 브라우저는 서버에 요청을 하여 빈 HTML 과 연결된 JavaScript 를 브라우저에게 주게 된다.그러면 브라우저에서는 JavaScript 를 사용하여 동적 DoM 을 생성해 사용자에게 화면을 보여준다. 일반적으로 React 와 같은 프레임워크를 사용하여 개발이 된다. 1-2. 적합한 상황동적 ..

Q. 질문 1리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #7) A. key propsReact 에서 map 을 사용하여 배열을 렌더링 할 때엔 key 를 써야 한다.{options.map((option) => ( {option.label} ))} 만약 key 를 쓰지 않을 경우 아래처럼 콘솔창에 key 가 있어야 된다고 경고가 뜬다.그렇다면 왜 key 를 써야할까? 엘리먼트에 안정적인 고유성을 부여각 엘리먼트는 key 값을 통해 어떤 항목을 변경, 추가, 삭제할지 식별해준다.그래서 엘리먼트의 고유성을 부여하기 위해서는 key 를 지정해야 한다. 그래서 key 값으로 식별을 하여 해당 엘리먼트에 안정적인 고유성을 부여해 렌더링을 효과..

Q. 질문리액트에서 Virtual DOM이 무엇인지, 이를 사용하는 이유는 무엇인지 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #6) A. DomDOM 이란?DOM(Document Object Model) 은 웹 페이지의 구조와 내용을 표현하는 데 사용한다. 하지만, DOM 의 변경이 생길 때마다 브라우저는 화면을 다시 그리고 다시 렌더링 하게 된다.이러한 과정은 복잡한 UI 에서는 성능 문제를 일으킬 수 있다. 레이아웃을 다시 계산하며 페이지를 다시 그리는 작업을 하다보니, 성능 저하의 주요한 원인이 되고 비용 문제가 발생한다. 그래서 이러한 문제점을 개선하기 위해 React 에서는 Virtual Dom 이라는 것을 사용한다. A. Virtual DOMVirtual DOM 이란?React 에서는..

Q. 질문 1이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #5) A. 답변1. 이벤트 버블링이벤트 버블링이란 무엇일까?이벤트 버블링이벤트가 발생하면, 같은 타입 이벤트를 가진 부모 핸들러도 동작즉, 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 이벤트 버블링이라고 한다. 버블링 적용이런 코드가 있을 때, content 오늘 할 일 list 자바스크립트 공부 유튜브 시청 저녁 약속  요소를 클릭했을때, 실제 핸들러 이벤트가 동작하는 요소(currentTarget)와 문구를 출력하도록 자바스크립트 코드를 만든다.const content = document.querySelector('#content');const title = docu..

Q. 질문var, let, const 를 중복 선언 허용, 스코프, 호이스팅 관점에서 서로 비교해 주세요. (코드잇 스프린트 위클리 페이퍼 #4) A. 중복 선언 허용var - 중복 선언 Ovar 은 정상적으로 중복 선언이 가능하다. let - 중복 선언 Xlet 은 중복 선언이 불가능하여 SyntaxError  가 발생한다.const - 중복 선언 Xconst 도 let 과 마찬가지로 중복 선언이 불가능하여 SyntaxError 가 발생한다.추가적으로 const 는 let 과 다르게 재할당 시 TypeError 가 발생한다.A. 스코프함수 스코프함수 안에서 정의된 변수는 해당 함수 내에서만 접근 가능블록 스코프중괄호 {} 로 둘러싸인 블록 내에서만 접근 가능var - 함수 스코프var 은 함수 스코프로..

Q. 질문 1Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #3)A. 답변 1branch merge 란?Git 에서 branch merge 란? branch merge현재 branch 에서 다른 branch 를 합친다.(병합) branch merge 를 사용하는 상황은 다음과 같다.A branch 에서 작업을 한 내용을 main branch 에 반영하기 위해, main branch 에서 A branch 의 내용을 합침A branch 에서 작업하고 있는데 main branch 에 최신 변경 사항이 있어, A branch 에서 main branch 의 내용을 합침 branch merge 방법branch 를 merge 하는 방법에는 크게 merge..

Q. 질문 1시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변 1시맨틱 태그란?시맨틱(semantic)이라는 단어의 뜻은 '의미의, 의미론적인` 이라는 뜻을 담고 있다.그렇다면 시맨틱 태그란 의미를 가지고 있는 태그라고 이해할 수 있다. 시맨틱 태그 (Semantic Tag)포함된 콘텐츠의 특정 의미를 정의하고 목적을 갖는 태그 시맨틱 태그는 기존 HTML의 태그와 기능이 똑같다. 하지만 시맨틱 태그는 단순 태그가 아니라, 태그의 의미를 부여하여 웹사이트의 구조를 쉽게 파악할 수 있게 도와준다. 시맨틱 태그의 종류시맨틱 태그의 종류는 크게 다음과 같다. (이 외에도 다양한 종류가 있음)태그설명문서의 머리말, 상단 ex) 로고, 제목 등을 포함문서의 내..

Q. 질문CSS의 Cascading에 대해 설명해 주세요. (코드잇 스프린트 위클리 페이퍼 #1) A. 답변CSS 를 적용하다보면 겹치는 속성이 발생할 수 있다. 개발자 도구를 사용해 임의로 코드잇 페이지에 있는 컴포넌트의 배경 색상을 blue 와 red 로 변경하여 속성이 겹치도록 하였다.그렇다면 화면에서는 blue 와 red 중에 어떤 것이 반영이 될까? 바로 이러한 상황에서 CSS 규칙들을 어떻게 합쳐 줄지 정해주는 방식을 CSS 의 Cascading 이라고 한다.  Cascading 이란?그렇다면 Cascading  는 정확히 무엇일까?  그 전에 CSS 의 약자는 Cascading Style Sheets (CSS) 이다.  이를 한국말로 직역하자면 계단식 스타일 시트 라는 의미이다. 즉, CS..