대상

프론트 엔드 개발자를 꿈꾸는 바로 당신입니다

들어가며

안녕하세요 저는 프론트엔드 개발자를 꿈꾸고 있으며, 현재 4학년 2학기에 재학중인 25살 대학생입니다.

2020년 2월 서울 역삼에 위치한 모 IT 학원에서 7개월간 웹 개발 과정 수료하고, 이후 1년 간은 개인 공부와 팀 프로젝트를 병행하며 포트폴리오를 준비하였습니다.

요 근래 취업 프로세스를 경험하며 느끼는 것은 프론트엔드 개발자로 취직하기까지 '완벽한 준비'는 없다는 것입니다. 저는 성격 상 조금 꼼꼼하고 안정지향적이여서, 면접관 분들이 하는 질문에 대해 몰라서 당황해 할 제 자신이 싫어최대한 많은 내용 하나하나까지 공부하려고 애썼습니다.

이런 성격덕에 더 많은 준비를 하려고 노력하였는데, 깃허브나 구글링을 통해 얻을 수 있는 다양한 자료들이 (이 자료 또한...) 제가 작성한 부분이 아니라서 그런지, 뭔가 순서대로 배우는 느낌이 아닌 것처럼 느껴졌습니다. 그래서 더욱 해당 자료들이 저에게 지식으로 다가오지는 않았던 것 같습니다. (예를 들어 비동기로 시작해서 TDZ로 끝나는 경우도 있었습니다.)

뭔가를 외우고, 공부할 때 그 개념에 대해서 순서대로 배우면 좋을 것 같아서 아래와 같은 방식으로 정리하였고, 같은 취준생으로써 도움이 되고자 제가 작성한 내용을 공유 하려합니다.

자바스크립트는 '모던 자바스크립트 딥다이브'를 바탕으로 제가 공부한 내용을 정리하였으며,

리액트는 '리액트를 다루는 기술'을 바탕으로 작성된 내용입니다.

그 외에도 velog, 신입 개발자들을 위한 프론트엔드 면접 관련 자료를 바탕으로 키워드를 중심으로 만든 내용들이 다수 포함되어 있습니다. (출처를 명확히 밝히기 위해 노력하였습니다.)

사실 앞으로도 많이 채워야 할 내용들이 많고, 혼자서 작성했기 때문에 부족한 부분들이 많지만, 이런 내용들을 바탕으로 공유하고 정제해 나가는 과정을 통해 제가 중요시 여기지 않는 부분이던가, 등한시 한 내용을 다시 살펴볼 수 있을 것 같아서 공유를 하고자 합니다.

저는 위와 같은 방법으로 워드에 옮겨 담아, 2장씩 보기로 출력하여 공부하고 있습니다

이 자료가 방대한 자료들 중 하나의 선택지가 되어, 같은 꿈을 꾸는 신입 프론트엔드 개발자 분들의 지식으로 자리매김하면 좋을 것 같습니다.

또한 레포지토리 내에 issue 템플릿을 작성해 두었고, contribute를 위한 프로세스를 적어두었습니다. 제가 정리한 내용이 이상하거나 틀린 부분이 있을 수 있기 때고, 추가하고 싶은 내용이 있을 수 있기 때문에 함께 만들어가는 저장소가 되면 좋을 것 같습니다.

레포지토리 바로 가기

목차

① Computer Science

• 프로세스와 스레드 🔥

  • 프로세스가 뭔가요?
  • 스레드가 뭔가요?
  • 프로세스와 스레드는 어떤 차이가 있나요?

• 싱글 스레드와 멀티 스레드 🔥

  • 싱글 스레드 장점
  • 싱글 스레드 단점
  • 멀티 스레드 장점
  • 멀티 스레드 단점

• HTTP 🔥

  • HTTP란 뭔가요?
  • HTTP 프로토콜의 가장 큰 특징은 뭔가요?
  • URL은 뭔가요?
  • HTTP/1.1 과 HTTP/2.0의 차이는 뭔가요?
  • HTTPS는 HTTP랑 뭐가 다른가요?
  • 심화) 공개키 (비대칭키) 방식이 뭔가요?

• 쿠키 세션 🔥

  • 쿠키, 세션을 왜 쓰나요?
  • 쿠키가 뭔가요?
  • 세션이 뭔가요?
  • 쿠키와 세션의 차이는 어떤 점이 있을까요?

• CORS 🔥

  • CORS가 뭔가요?
  • CORS를 겪고 직접 해결해 본 경험이 있으면 말해주세요

• 웹팩 🔥

  • 웹팩이란?
  • 모듈이란?
  • 모듈 번들링이란?
  • 웹팩이 등장한 이유 웹팩 사용 시에 이점
  • 바벨이란?
  • 웹팩의 주요 속성 4가지

• 타입과 인터페이스 🔥

  • 타입스크립트를 왜 쓰나요? (본인이 느낀점)
  • 타입과 인터페이스의 차이를 아나요?
  • 프로젝트 진행 시에 어떤 상황에서 타입을 쓰고 어떤 상황에서 인터페이스를 썼나요?

② HTML/ CSS

(1) HTML

• DOCTYPE 🔥

  • DOCTYPE에 대하여 설명하시오
  • 쿼크 모드, 표준 모드를 사용해야 하는 이유
  • 쿼크모드가 무엇일까요?
  • 표준모드란 무엇일까요?

• 웹 표준 및 웹 접근성 🔥

  • 웹 표준이란 ?
  • 웹 접근성이란 ?
  • 웹 접근성에 맞는 마크업 예시 몇가지 말해보시오
  • 시멘틱 태그란 무엇인가 ?
  • SEO란 무엇인가 ?
  • Button 태그의 Default type은 무엇인가 ?
  • Section 태그와 article 태그의 차이점

• DOM에 대하여 🔥

  • DOM이란 무엇인가 ?

• 그 외 🔥

  • 이미지 크기가 클 경우 렌더링 속도가 느려질텐데 이를 개선하기 위한 방법
  • UI란 무엇인지 설명하시오

(2) CSS

• display 🔥
  • block
  • inline
  • inline-block
  • none
• position에 대하여 설명해보세요. 🔥
  • static
  • relative
  • fixed
  • absolute
• float가 어떻게 작동하는가 🔥
• SVG란 ? 🔥
• Flexbox나 Grid 스펙을 사용해본 적이 있나요 ? 🔥
  • flex 를 사용하는 이유가 무엇인가요?
  • Grid를 사용하는 이유가 무엇인가요?
• 이미지 태그를 스타일로 대체하는 법 🔥
• 반응형 웹의 3요소 🔥
• CSS selector가 어떠한 원리로 동작하나요? 🔥
• 반응형웹과 적응형웹에 설명하시오 🔥
  • 반응형 웹이란?
  • 적응형 웹이란?`
• PX, EM에 대해 설명하시오 🔥
  • 절대단위
  • 상대단위
  • px
  • em
  • ex
  • %
  • pt
• CSS 적용 우선순위 🔥
• CSS-in-JS에 대해서 설명해 주세요. 🔥
• CSS 전처리기(CSS preprocessors)를 사용해보셨나요? 🔥
  • 사용해봤다면 장점과 단점
• padding과 margin의 차이가 무엇인가요? 🔥
  • padding에 대하여
  • margin에 대하여

③ JavaScript

• 프로그래밍 🔥

  • 프로그래밍이란 뭐라고 생각하나요?
  • 컴파일러는 뭐고 인터프리터는 뭔가요?

• 자바스크립트란 🔥

  • 자바스크립트의 특징은 뭐가 있나요?

• 변수 🔥

  • 변수란 무엇인가요?
  • 식별자란 무엇인가요?
  • 변수를 선언한다는 것은 어떤 것을 의미하나요?
  • var 키워드는 뭔가요?
  • 호이스팅이 뭔가요?
  • var 키워드의 문제점은 무엇이 있나요?
  • let 키워드는 var 키워드와 어떤 점이 다른가요?
  • TDZ
  • const 키워드는 어떤 특징이 있나요?
  • 식별자 네이밍 규칙은 어떤 것들이 있나요?
  • 네이밍 컨벤션은 어떤 것들이 있나요?
  • 리터럴이 뭔가요?

• 데이터 타입 🔥

  • 데이터 타입의 종류는 어떤 것들이 있나요?
  • 심벌 타입은 뭐죠?
  • 데이터 타입은 왜 필요할까요?
  • 정적 타이핑이 뭔가요?
  • 동적 타이핑이 뭔가요?

• 배열 🔥

  • 자바스크립트의 배열은 자료구조의 배열과 같나요?
  • 배열의 메서드는 어떤 종류가 있나요?
  • 고차 함수에 대해서 아나요?
  • forEach 메서드와 map메서드의 차이점에 대해 알고 있나요?

• 타입변환과 단축 평가 🔥

  • 명시적 타입 변환이 뭔가요?
  • 명시적 타입 변환 함수를 예를 들어볼 수 있나요?
  • 암묵적 타입 변환이 뭔가요?
  • truthy / falsy 한 값이 뭔가요?

• 객체 리터럴 🔥

  • 자바스크립트에서 객체란 뭘까요?
  • 함수와 메서드의 차이점에 대해 알고 계신가요?
  • 자바스크립트에서 객체를 생성하는 방법은 어떤 것들이 있나요?

• 원시 값과 객체 비교 🔥

  • 동적 타이핑을 지원하는 자바스크립트에서 데이터의 타입을 크게 2개로 나누는 이유가 있을까요?
  • 값에 의한 전달이 뭔가요?
  • 참조에 의한 전달이 뭔가요?

• 함수 🔥

  • 자바스크립트에서 함수를 정의하는 방법은 몇가지가 있나요?
  • 함수 선언문과 함수 표현식은 어떤 차이가 있나요?
  • 즉시 실행 함수(IIFE)에 대해 알고 있나요? 알고 있다면 아는 내용에 대해 말해보세요

• 스코프 🔥

  • 스코프가 뭔가요?
  • 스코프에는 어떤 종류가 있죠?
  • 렉시컬 스코프를 아나요? 안다면 렉시컬 스코프는 무엇을 의미하나요?
  • 전역 변수로 변수를 선언하면 생기는 문제점은 무엇이 있을까요?

• 생성자 함수에 의한 객체 생성 🔥

  • 생성자 함수가 뭔가요?
  • 객체 리터럴로 만들 때와는 무슨 차이가 있죠? 왜 생성자 함수를 사용하나요?
  • 생성자 함수가 객체(인스턴스)를 생성하는 과정에 대해 간략하게 설명해줄 수 있나요?

• 함수와 일급 객체 🔥

  • 일급 객체가 뭔가요?
  • 자바스크립트에서 함수가 일급 객체라면, 일급 객체로 뭘 할 수 있나요?
  • 꼬리 질문) 함수형 프로그래밍이 뭔가요?
  • 꼬리 질문) 순수 함수가 뭔가요? 일반 함수와는 어떤 차이가 있죠?

• 프로토타입 🔥

  • 객체지향 프로그래밍은 무엇을 의미하나요?
  • 객체지향 프로그래밍의 특징에 대해 말해볼 수 있나요?
  • 자바스크립트는 객체지향 프로그래밍 언어인가요?
  • 프로토타입이 뭔가요?

• strict mode 🔥

  • strict mode가 뭔가요?
  • strict mode를 통해 무엇을 예방할 수 있죠?

• 빌트인 객체 🔥

  • 빌트인 객체가 뭔가요? 종류는 어떤게 있죠?
  • 래퍼 객체에 대해서 알고 있나요?

• this 🔥

  • this가 뭔가요?
  • this 바인딩이란?
  • this는 동적으로 바인딩이 된다고 하는데 바인딩되는 객체가 어떻게 다르나요?

• 실행 컨텍스트 🔥

  • 실행 컨텍스트에 대해 말해보세요

• 클로저 🔥

  • 클로저에 대해서 아나요?
  • 클로저를 사용하면 뭐가 좋죠?
  • 클로저를 어떻게 생성하나요?

• 클래스 🔥

  • 자바스크립트에서 클래스가 생기기 전에는 어떤 방식으로 객체지향 패턴을 구현했나요?
  • 그럼 생성자 함수와 클래스는 어떤 차이가 있나요?
  • 클래스 정의
  • 클래스의 상속

• 스프레드 문법 🔥

  • spread 문법이 뭔가요?
  • 어떤 상황에서 사용할 수 있죠?

• 구조 분해 할당 🔥

  • 구조 분해 할당이 뭔가요?
  • 구조 분해 할당은 크게 어떤 종류가 있나요?

• 브라우저 렌더링 과정 🔥

  • 브라우저의 렌더링 과정에 대해 설명해보세요 🔥
  • 브라우저의 렌더링 과정에 자바스크립트는 어떻게 동작하나요? 🔥
  • <script></script> 태그를 <body></body> 태그 밑에 둬야하는 이유가 있을까요?

• DOM 🔥

  • DOM이 뭔가요?
  • DOM을 구성하는 건 뭐가 있나요?

• 이벤트 🔥

  • 마우스 이벤트 타입에는 뭐가 있나요? click 말고 클릭을 대체할 수 있는 이벤트가 있나요?
  • 그 외에 알고 있는 대표적인 이벤트가 있나요?
  • 이벤트 핸들러를 등록하는 방식에는 어떤 것들이 있나요?
  • 이벤트 전파(propagation)에 대해서 알고 있나요?
  • 이벤트 위임(delegation)에 대해서 알고있나요?
  • e.preventDefault 에 대해 알고 있나요?
  • e.stopPropagation

• 타이머 🔥

  • 호출 스케쥴링이 무엇인가요?
  • 타이머 함수에는 어떤 것들이 있나요?
  • 이벤트가 과도하게 호출되어 성능에 문제를 일으킬 경우에 할 수 있는 어떤 일을 통해 해결할 수 있나요?
  • 디바운스에 대해서 알고 있나요?
  • 쓰로틀에 대해서 알고 있나요?

• 비동기 프로그래밍 🔥

  • 동기와 비동기의 차이점에 대해서 설명해줄 수 있나요?
    • 한줄 요약
  • 이벤트 루프와 태스크 큐에 대해서 알고 있나요?
  • 마이크로태스크 큐에 대해서 알고 있나요?

• Ajax 🔥

  • Ajax가 뭔가요 어떤 것을 담당하고 있죠?
  • Ajax를 사용하면 기존 방식과 어떤 차이가 있을까요?
  • JSON 이 뭔가요?
  • JSON이 제공하는 정적 프로토타입 메서드에 대해 몇가지 말해볼 수 있나요?
  • Ajax로 HTTP 요청을 보내기 위해서는 어떤 방법을 사용할 수 있나요?

• REST API 🔥

  • REST API가 뭔가요?
  • REST API의 구성은 어떤 것이 있나요?
  • REST API를 설계하는데 중요한 것이 있을까요?
  • HTTP 요청 메서드에 대해서 아는대로 얘기해보세요

• Promise 🔥

  • 프로미스가 뭔가요?
  • 프로미스 생성 방법
  • 프로미스의 상태를 나타내는 것은 어떤 것들이 있나요?
  • 프로미스 빌트인 객체가 제공하는 정적 메서드에 대해 알고 있나요?

• 제너레이터와 async await 🔥

  • 제너레이터란 뭔가요? 일반 함수와는 어떤 차이가 있죠?
  • 제너레이터의 구조
  • async/await 가 뭔가요? 기존의 Promise와는 어떤 차이가 있죠?
  • Promise와 async/await의 차이점 한 줄 요약

• 에러 🔥

  • 에러처리를 왜 해야 하나요?
  • 자바스크립트에서 에러를 처리하는 방법에는 뭐가 있을까요?

• 모듈 🔥

  • 모듈이 뭔가요?

• 타입과 인터페이스 🔥

  • 타입스크립트를 왜 쓰나요? (본인이 느낀점)
  • 타입과 인터페이스의 차이를 아나요?
  • 제네릭이란?

④ React

• React 시작🔥

• 리액트는 라이브러리인가요 프레임워크 인가요?🔥

• 리액트를 사용하는 이유🔥

• virtual DOM에 대해서 아나요?🔥

• React에서 함수형 컴포넌트와 클래스형 컴포넌트의 차이 🔥

• props와 state의 차이🔥

• React에서 state의 불변성을 유지하라는 말이 있는데 이에 대해 설명해달라 🔥

• 리듀서 내부에서 불변성을 지키는 이유는? 전개 연산자의 단점을 해결할 수 있는 방법은 무엇인가 🔥

• 리액트 사용시에 부수효과로 인해 생기는 문제점이 있다면 🔥

  • 부수 효과를 일으키는 함수 (불순 함수)
  • 부수 효과를 일으키지 않는 함수 (순수 함수)
  • 요약

• 컴포넌트의 라이프 사이클 메서드 🔥

  • 이해
  • 메서드 종류

• Hooks의 종류 🔥

  • useState
  • useEffect
  • useReducer
  • useMemo
  • useCallback
  • useRef
  • 커스텀 Hooks

• 리액트에서 setState는 비동기 동작인가요 동기 동작인가요?

• setState가 비동기 동작을 취했을 때 얻을 수 있는 이점은 무엇인가요?

• useLayoutEffect는 무엇인가요?

• 리액트의 성능개선 방법에 대해서 설명해주세요

• 컴포넌트에서 이벤트를 실행시키기 위해서는 어떻게 핸들링해야 하나요?🔥

• SPA가 뭔가요?🔥

  • SPA의 단점

• SSR이 뭔가요?🔥

• SEO가 뭔가요?🔥

  • TTV, TTI

React, Next 관련 내용 추가

• Next를 쓴 이유가 있나요 ? 🔥

• Next를 구성하는 기본 설정 파일에 대해서 알고 있나요? 🔥

• 사전 렌더링을 위해 사용해 본 함수가 있나요 🔥

⑤ 자료구조

• 자료구조란 무엇인가요 🔥

  • 효율적으로 데이터를 관리해야 하는 이유 (예)

• 대표적인 자료구조는 어떤 것들이 있나요 🔥

  • 선형 구조
  • 비 선형 구조

• 리스트 🔥

• 큐 🔥

• 스택 🔥

• 링크드 리스트 🔥

• 해쉬 테이블 🔥

• 트리 🔥

• 힙 🔥

• 그래프 🔥

마치며

저도 아직까지 많은 면접을 경험해보지는 못했습니다. 하지만, 해당 자료를 준비하고 정리하고 또 실제로 면접을 보면서 느낀점은 해당 자료를 무작정 외우는 것이 아닌 자신의 상황에 맞춰 사용한 경험이 자연스럽게 녹아나야 한다는 것입니다.

예를 들어 어떤 프레임워크나 상태관리를 위한 라이브러리를 골랐다면, 해당 라이브러리 또는 프레임워크를 고른 이유 등을 설명할 수 있어야 합니다.

상태 관리를 위해서 '리덕스'를 골랐다면 왜 리덕스를 골랐는지? 또는 리덕스를 썼을 때의 장점 등이 질문이 될 수 있습니다.

'Next.js' 프레임워크의 경우, 배워가는 입장에서 이 프레임워크가 제공하는 모든 기능을 사용하기에는 기술적으로 어려운 부분들이 있을 것입니다. 그렇다고 하더라도 본인들이 어느 부분까지 해당 프레임워크에 대해 이해하고 있고, 프로젝트 진행 시에 부족했던 부분을 앞으로 어떤 방식으로 습득해 나갈 예정인지 등이 들어갈 수 있을 것 같습니다.

목차만 보더라도 정말 많은 내용이라 느껴지고 겁먹을 수 있지만, 천천히 공부하고 자주 보다 보면 외우는 것이 아닌 이해를 바탕으로 자연스럽게 코드에 묻어날 수 있는 부분들이라고 생각합니다.

😁