코드잇 스프린트/Weekly paper

1. 리액트만 사용할 때와 비교해 Next.js를 사용하는 이유에 대해 설명해 주세요.리액트의 한계기본적으로 순수 리액트는 SPA(Single Page Application)이고, CSR(Client Side Rendering)을 한다. 웹 사이트를 요청할 때 현재 사용하지 않지만 앱에 필요한 모든 컴포넌트를 다운로드하고, 빈 html을 가져와 script를 로딩한다. 이로 인해 앱의 첫 로딩 시간이 오래 걸려 유저 경험을 헤치고, SEO(Search Engine Optimization)에 취약 하다는 단점이 있다.  Next.js가 제공하는 이점1. 프리렌더링 기본적으로 프리렌더링을 지원한다. 데이터의 성격에 따라 getStaticProps를 활용해 빌드 단계에서 데이터를 받아 정적 생성 또는 SSR(..

1. JavaScript만 사용하는 것과 비교해 TypeScript를 사용하는 이유에 대해 설명해 주세요.타입 시스템은 크게 정적 타입 시스템과 동적 타입 시스템으로 나뉜다. 정적 타입 시스템은 코드 실행 전에 모든 변수의 타입을 고정적으로 결정하고 동적 타입 시스템은 코드를 실행하면서 유동적으로 변수의 타입을 결정한다. 정적 타입 시스템을 사용하는 언어에는 C나 Java 같은 엄격한 문법을 가진 언어들이 있고 동적 타입 시스템을 사용하는 언어에는 Python, JavaScript, Ruby와 같이 유연한 문법을 가진 언어들이 있다. JavaScript는 동적 타입 언어이다.배우기 쉽고 타입을 미리 설정하지 않아도 되지만, 실행 도중에 예상치 못한 타입이 들어와 타입 에러를 발생하는 경우가 있다. 또한 ..

1. 웹 페이지 렌더링 방식 CSR, SSR, SSG 각각의 특징과 각 방식을 어떤 상황에 사용하면 좋을지 설명해 주세요. Client Side Rendering (CSR)CSR은 클라이언트(브라우저)에서 웹 페이지를 렌더링 하는 것 이다. 동작방식은 다음과 같다. 사용자가 사이트에 접속하면 서버에서 index라는 HTML파일을 클라이언트에 보내준다. 이때 받는 index 파일은 body 안에는 id="root"만, 그리고 어플리케이션에서 필요한 자바스크립트 링크만 들어있는, 가장 추상적이고 심플하게 이루어져 있다. 따라서 HTML이 텅텅 비어져 있기 때문에 처음 접속 시 빈 화면만 보인다.이후 링크된 JS파일을 서버로부터 받아오는데 이 JS파일에는 어플리케이션에 필요한 로직들 뿐만 아니라 어플리케이션을..

1. 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. 리액트에서 배열을 렌더링할 때 key를 지정해야 하는 이유는 두 가지가 있다. 1. 성능 최적화를 위해 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 하나씩 살펴보자. 1. 성능 최적화를 위해 배열의 각 항목을 렌더링할 때 리액트는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최소화한다. 이때 리액트는 각 요소의 key를 비교하여 변경된 부분을 파악하는데, key가 없으면 리액트는 각 요소를 변경된 부분으로 인식하지 않고, 전체를 다시 렌더링 하게 되므로 성능에 부담을 줄 수 있다. 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 요소마다 key로 고유한 값을 지정해주어야 요소를 삭제..

1. 예시의 코드를 실행할 때, 콘솔에 출력될 값과 그 이유를 설명해 주세요. // 1번 let num = 1; // 2번 setTimeout(() => { num = 2; }, 0); // 3번 num = 3; // 4번 console.log(num); 답: 3 동기 실행은 코드가 순차적으로 실행되는 방식이다. console.log("1st"); console.log("2nd"); console.log("3rd"); // '1st' // '2nd' // '3rd' 위와 같은 코드를 작성하고 실행해 보면 예상했던 것처럼 1st, 2nd, 3rd가 차례대로 찍히는 것을 알 수 있다. 이처럼 코드가 위에서부터 아래로 내려오면서 하나가 끝나면 다음 코드가 실행되는 방식을 동기적 처리 (Synchronous)라..

이번주 위클리 페이퍼는 주제는 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. HTTP 메소드에 대해 설명해 주세요. 이 두 개다! 두 주제 모두 예전에 한 번 정리한 적이 있어서 수월하게 쓸 수 있겠다 ㅎㅎ 1. 이벤트 버블링, 캡쳐링, 위임에 대해 설명해 주세요. 1. 이벤트 버블링 (Event Bubbling) 이벤트 버블링은 자식 요소에서 부모 요소로 이벤트가 전파되는 것을 말한다. 간단한 예시를 통해 알아보자. Click me! document.getElementById('inner').addEventListener('click', function() { console.log('Inner clicked'); }); document.getElementById('outer').addEventL..

1. 자바스크립트에서 얕은 복사(Shallow Copy)와 깊은 복사(Deep Copy)에 대해 설명해 주세요. 얕은 복사와 깊은 복사를 이해하기 위해서는 원시값과 참조값에 대해 알아야 한다. 자바스크립트에서 값은 원시값과 참조값으로 나뉜다. 원시값 Number String Boolean Null Undefined 참초값 Object Symbol 둘의 차이점은 원래의 값과 복사된 값이 서로에게 영향을 미치느냐, 그렇지 않느냐에 따라 나뉜다. 원시값은 값을 복사할 때 복사된 값을 다른 메모리에 할당하기 때문에 (=새로운 메모리 공간에 독립적인 값을 저장)원래의 값과 복사된 값이 서로에게 영향을 미치지 않는다. (아래에서 정리하겠지만 이는 깊은 복사가 된다.) const a = 1; let b = a; b ..

2주차 위클리 페이퍼 쓴게 엊그제 같은데 벌써 3주차라니..!! 시간 넘 빠르다.. 이번주차에는 Git과 인터렉티브 자바스크립트 챕터를 들었다. 특히 Git을 배우면서 여러 커맨드를 실습해봤는데, 검은 바탕에 흰글씨가 좀 익숙해졌달까..?ㅋㅋㅋ 유용한 명령어들도 배울 수 있어서 좋았다. 이번주 위클리 페이퍼 미션은 다음과 같다. Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. Git Flow 브랜치 전략에 대해 설명해 주세요. 1. Git에서 branch merge 방법들과 각 방법의 특징을 설명해 주세요. Git에서 브랜치를 병합하는 방법은 크게 세 가지가 있다. merge commit을 만들며 합치기 Squash and merge 하기 Rebase and merge 하기 ..

2주차는 CSS 레이아웃, 실용적 유닉스 커맨드라인, GIt 활용법에 대해 배웠다. 그리고 배운 것을 바탕으로 페이지를 디자인하는 첫번째 스프린트 미션도 진행했다! 순식간에 한 주가 지나간 것 같은데 많은 것을 배울 수 있어서 좋았고, 특히 CSS 레이아웃에 대해 복습할 수 있어서 좋았다. 또 팀 분위기가 처음에는 어색했는데 이제는 많이 가까워져서 다양한 주제들에 대해 이야기 할 수 있어서 많이 배우는 중이다ㅎㅎ 활동기간 동안 팀이 여러번 바뀌겠지만 매 팀마다 열심히 참여해서 내가 모르는 것들과 아는 것들을 공유하며 성장하고 싶다. 2주차 위클리 페이퍼 주제는 아래와 같다. - 시맨틱 태그를 사용하면 좋은 점을 설명해 주세요. - position의 속성들과 각각의 특징을 설명해 주세요. 하나씩 살펴보자...

1주차에는 HTML/CSS에 대한 전반적인 내용을 배웠다. 각 주차가 끝나고 과제가 주어지는데 이번 주차는 CSS의 Cascading에 설명하라는 과제를 받았다. Cascading 우선 Cascade는 '종속'이라는 의미이다. 사전적인 의미는 이렇지만 "위에서 아래로 내려오는 또는 단계적인"의 의미를 내포하고 있다. 따라서 CSS(Cascading StyleSheet)에서 쓰이는 cascading이란 여러 CSS 규칙이 적용될 때 순서에 따라 합쳐지는 것이다. 그럼 이때 합쳐지는 순서는 어떻게 정해질까? Cascade 순서 여러가지 기준이 있지만 가장 핵심적인 3가지에 대해 알아보자. 1. 스타일시트의 종류 크롬 개발자도구(F12)를 보면 브라우저에 기본 CSS가 있다. 이걸 user agent styl..