프론트엔드 지원 전에 정리해두면 좋은 개념들

프론트엔드 포지션에 지원하려고 하면 막상 뭘 먼저 봐야 할지 막막할 때가 있죠. 브라우저부터 JavaScript, React, CSS까지 범위가 넓어서 어디서부터 손대야 할지 감이 안 잡히거든요.

그래서 예전에 지원을 준비하면서 모아뒀던 메모를 개념 단위로 다시 정리해봤어요. 설명이 붙은 개념은 풀어서 적었고, 키워드만 적어둔 주제는 스스로 답해볼 체크리스트로 남겨뒀어요.

브라우저#

브라우저 렌더링 원리#

브라우저 렌더링은 HTML, CSS, JavaScript 같은 자원을 브라우저가 화면에 그리는 과정이에요. 순서는 크게 다섯 단계로 나눌 수 있어요.

1. DOM 생성 — HTML 문서를 파싱해서 태그를 노드로 바꾸고, 노드 사이의 계층 관계를 만들어 DOM 트리를 만들어요.
2. CSSOM 생성 — CSS를 파싱해서 속성을 노드로 바꾸고, 마찬가지로 계층 관계를 가진 CSSOM 트리를 만들어요.
3. 렌더 트리 생성 — DOM 트리와 CSSOM을 결합하는데, 이때 실제 화면에 표시될 요소만 골라서 렌더 트리를 만들어요.
4. 레이아웃 — 렌더 트리를 이용해 각 요소의 크기와 위치를 계산해요.
5. 페인팅 — 계산된 위치에 요소의 배경, 테두리, 글자 등을 실제로 그려요.

브라우저에서 더 볼 주제#

아래는 메모에 키워드만 남아 있던 주제예요. 한 문장으로 설명할 수 있는지 스스로 확인해보세요.

• 브라우저 동작 방식
• URL을 입력했을 때 벌어지는 일
• 데이터 암호화 전송
• XSS 방지
• 프론트엔드 브라우저 성능 측정 방식과 개선점을 찾기 위해 봐야 하는 것들

JavaScript#

호이스팅#

호이스팅은 변수와 함수 선언이 스코프의 최상단으로 끌어올려진 것처럼 실행되는 현상이에요. 그래서 선언 전에 사용하면 의도치 않은 오류가 날 수 있어요.

==와 ===의 차이#

==는 동등 연산자로, 두 값을 비교할 때 형변환(type coercion)을 먼저 수행해요. 데이터 타입이 달라도 자동으로 타입을 맞춘 뒤 비교하기 때문에 예측하지 못한 결과가 나올 수 있거든요.

===는 일치 연산자로, 데이터 타입과 값이 모두 같은지 비교해요. 형변환 없이 정확한 값을 비교하니까 더 안전하고 결과를 예측하기 쉬워요.

클로저#

클로저는 함수가 선언될 때 자동으로 만들어지는 렉시컬 환경과 관련이 있어요. 이 렉시컬 환경은 함수가 선언된 시점의 모든 변수와 함수를 포함하는 렉시컬 스코프를 형성하고, 이게 스코프 체인으로 이어져요.

덕분에 외부 함수가 실행을 마치고 반환된 뒤에도, 내부 함수는 외부 함수 범위의 변수에 계속 접근할 수 있어요. 주로 정보를 은닉할 때 사용해요.

비동기 함수와 이벤트 루프#

비동기 함수는 실행 결과가 즉시 반환되지 않고, 특정 조건이 충족될 때까지 기다리는 함수예요. 보통 콜백 함수나 Promise 객체를 반환해요.

• 콜백 함수 — 비동기 작업이 완료되었을 때 호출되는 함수예요.
• Promise — 비동기 작업이 성공했는지 실패했는지를 나타내는 객체예요.

비동기 함수는 애플리케이션 성능을 높이고 사용자 인터페이스의 반응성을 유지하는 데 유용해요. 다만 콜백 지옥 같은 문제를 피하려면 적절한 에러 처리와 코드 구성이 필요해요.

여러 비동기 함수가 실행되면 이벤트 루프가 호출을 처리하고, 각 작업이 완료될 때 콜백을 호출해요. 즉 비동기 함수들의 실행 순서는 이벤트 루프가 제어하는 거예요.

JavaScript에서 더 볼 주제#

• var, let, const의 차이점
• 이벤트 루프의 작동 원리
• JavaScript에서 가장 많이 쓰는 데이터 구조와 알고리즘, 각각의 용도

이벤트#

이벤트 버블링#

이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 처리된 뒤 상위 요소로 이벤트가 전파되는 현상이에요. 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 게 장점이죠.

이벤트 위임#

버블링을 활용하면 부모 요소에 핸들러를 하나만 등록해서 자식 요소에서 발생한 이벤트를 모두 처리할 수 있어요. 여러 하위 요소의 이벤트를 하나의 핸들러로 묶는 이걸 이벤트 위임이라고 불러요.

버블링이나 캡처링을 막고 싶다면 이벤트 객체의 stopPropagation() 메서드로 전파를 중지시키거나, 핸들러 안에서 이벤트가 발생한 요소를 확인해서 처리하면 돼요.

이벤트에서 더 볼 주제#

• 사용자와의 상호작용

CSS#

Flex와 Grid의 차이점#

Flex는 주로 한 축 방향의 레이아웃을 구성할 때 사용해요. 아이템 크기가 자유로워서 유동적으로 변할 수 있고, 그래서 레이아웃이 유동적으로 바뀌는 상황에 잘 맞아요.

Grid는 2차원 그리드 시스템을 구성할 때 사용해요. 수평과 수직 방향을 모두 정렬할 수 있고, 아이템 크기를 미리 정의해서 각 셀의 크기를 일정하게 유지하니까 레이아웃 변화가 적은 경우에 적합해요.

CSS에서 더 볼 주제#

• 웹 페이지 구성 방식
• CSS 스타일링 방식과 CSS 선언 방식의 구문, 문법, 각 부분을 뭐라고 부르는지
• HTML5 및 CSS3의 주요 기능과 최신 트렌드

React와 아키텍처#

클래스형 컴포넌트와 함수형 컴포넌트의 차이#

React에서 컴포넌트를 만드는 방법에는 클래스형 컴포넌트와 함수형 컴포넌트가 있어요. 클래스형은 ES6 클래스로 정의하고, 함수형은 함수로 정의하면서 훅(hook) API와 함께 많이 사용해요.

가장 큰 차이는 상태와 생명주기를 다루는 방식이에요.

• 클래스형 — 상태를 this.state로 정의하고, 생명주기 메서드를 오버라이드해서 작업을 수행해요. 상태나 메서드를 참조할 때 this 키워드를 써요.
• 함수형 — 상태는 useState 훅으로 정의하고, 생명주기는 useEffect 훅으로 다뤄요. this 키워드를 사용하지 않아요.

이 차이 덕분에 함수형 컴포넌트가 더 간결하고 가독성이 좋아요. 테스트와 리팩토링도 더 쉽게 할 수 있고요.

MVVM 패턴과 Flux 패턴의 차이#

MVVM은 데이터 바인딩으로 View와 ViewModel 사이에 양방향 데이터 흐름을 유지해요. ViewModel이 View와 Model 사이에서 데이터를 중개하는 구조예요. Angular, Vue.js 같은 프레임워크에서 사용해요.

Flux는 Action → Dispatcher → Store → View 방향의 단방향 데이터 흐름을 사용해요. Store가 애플리케이션의 데이터와 비즈니스 로직을 담당하고, Dispatcher를 통해 Action을 처리해요. React에서 주로 사용해요.

테스트 관점에서도 차이가 있어요. Flux는 단방향 흐름과 단일 책임 원칙을 따르니까 테스트하기 쉬운 코드를 쓰기 좋은 반면, MVVM은 양방향 바인딩 때문에 테스트가 어려울 수 있어요.

React에서 더 볼 주제#

• React 동작 원리
• React 생명주기
• 상태 관리 방법
• React의 use로 시작하는 함수들
• 마이크로 프론트엔드
• React, Vue, Angular 등 주요 프레임워크의 장단점과 선택 기준

프로젝트 경험 말하기#

개념 못지않게 중요한 게 프로젝트 경험을 구체적으로 공유하는 거예요. 실제로 어떤 문제를 어떻게 해결했고, 어떤 기술적인 결정을 왜 내렸는지를 설명할 수 있어야 해요.

예를 들어 Next.js로 개인 블로그를 만들 때 로컬 이미지 경로를 찾을 수 없던 문제가 있었어요. 개인 블로그라서 정적 사이트로 만드는 게 관리나 비용 측면에서 저렴했거든요.

그래서 빌드 과정에서 마크다운에 속한 이미지 경로로 이미지를 찾고, 그 이미지를 base64로 인코딩해서 정적인 HTML에 붙이는 방식으로 해결했어요. 이런 식으로 문제 → 제약 → 결정 → 결과의 흐름으로 말할 수 있는 경험을 미리 정리해두면 좋아요.

여기에 LeetCode나 HackerRank 같은 곳에서 정기적으로 코딩 문제를 푸는 것도 병행하면 좋아요.

스스로 답해볼 면접 질문#

실제 면접에서 받았거나 준비하면서 모아둔 질문이에요. 위 개념들을 정리한 뒤 소리 내어 답해보세요.

React와 Next.js#

1. Functional Components와 Class Components의 차이점을 설명해 주세요.
2. React의 Virtual DOM이 실제 DOM과 어떻게 다른지, 그리고 왜 중요한지 설명해 주세요.
3. Next.js에서 Static Generation과 Server-side Rendering의 차이점은 무엇인가요?
4. React에서 상태 관리를 위해 useState와 useEffect 훅을 어떻게 사용하나요?
5. Next.js의 getStaticProps, getStaticPaths, getServerSideProps의 용도와 차이점을 설명해 주세요.

SEO와 성능#

6. Next.js의 pre-rendering 기능이 SEO에 어떤 이점을 주나요?
7. React 애플리케이션에서 동적 콘텐츠를 SEO 친화적으로 만들기 위한 전략에는 어떤 것들이 있을까요?
8. Next.js 프로젝트에서 메타 태그와 Open Graph 태그를 동적으로 관리하는 방법을 설명해 주세요.
9. 구조화된 데이터(Structured Data)를 React 또는 Next.js에 통합하는 방법과 그 중요성을 설명해 주세요.
10. Next.js / React 기반 프로덕트에서 페이지 로딩 속도를 최적화하는 방법과 그것이 SEO에 미치는 영향을 설명해 주세요.
11. 웹 성능 최적화를 위해 사용하는 방법과 도구에 대해 설명해 주세요.
12. 웹사이트 로딩 속도가 느려 사용자 만족도가 떨어지고 있다면 어떻게 해결하시나요?

보안과 협업#

13. 웹 보안 취약점과 공격 방식을 알고 있나요? 이를 방지하기 위해 어떤 조치를 취해야 하나요?
14. 웹 애플리케이션에서 사용자 인증 및 권한 관리 기능을 구현하는 방법을 설명해 주세요.
15. 웹사이트가 해킹 공격을 받았을 때 어떻게 대응해야 하나요? 구체적인 대응 절차와 예방 조치를 설명해 주세요.
16. 여러 명의 개발자가 참여하는 프론트엔드 프로젝트에서 효율적인 버전 관리와 코드 공동 작업을 위해 어떤 방법을 사용하나요?

경험#

17. 최근에 진행한 프론트엔드 개발 프로젝트를 소개해 주세요. 목표, 사용한 기술, 주요 도전 과제와 해결 방안, 결과를 자세히 설명해 주세요.
18. 반응형 웹 디자인을 구현할 때 어떤 점을 고려해야 하나요? 실제 프로젝트에서 경험한 사례를 중심으로 답변해 주세요.

더 읽어볼 자료#

웹사이트를 만들었다면 Front-End Checklist로 빠진 게 없는지 한 번 점검해보세요. 그 외에 준비하면서 참고했던 자료예요.

• 취업 준비를 위해 공부한 내용을 정리하는 레포
• F-Lab 수료생 이력서
• 자율 근무 조직을 위한 취업 규칙 무료 공개
• 백엔드 개발자 취업 준비에 관한 모든 것
• 취준생이라면 알면 좋을 프론트엔드 관련 지식들
• 프론트엔드 기술 면접을 위한 핸드북 만들기
• 현직 개발자가 정리해주는 프론트엔드 신입 기술 면접 문제 은행 20선
• 실제로 받은 프론트엔드 개발자 면접 질문 모음
• 유용한 기능을 한 줄 코드로 만든 자바스크립트 유틸리티

모든 걸 한 번에 외우려고 하기보다, 위 체크리스트에서 한 문장으로 설명이 안 되는 개념부터 하나씩 채워가는 게 가장 좋은 시작이에요.

All men who have achieved great things have been great dreamers.

— Orison Marden