<div id="readability-page-1" class="page"><div><article><p><img src="https://get6.github.io/blog/external/3ebfc4ce061a7527c45cd16a8173f6be.webp" alt="photo by Daniel Angele(https://unsplash.com/@danangele?utm_source=templater_proxy&amp;utm_medium=referral) on Unsplash"></p>
<p>프론트엔드 포지션에 지원하려고 하면 막상 뭘 먼저 봐야 할지 막막할 때가 있죠. 브라우저부터 JavaScript, React, CSS까지 범위가 넓어서 어디서부터 손대야 할지 감이 안 잡히거든요.</p>
<p>그래서 예전에 지원을 준비하면서 모아뒀던 메모를 개념 단위로 다시 정리해봤어요. 설명이 붙은 개념은 풀어서 적었고, 키워드만 적어둔 주제는 스스로 답해볼 체크리스트로 남겨뒀어요.</p>
<h2 id="브라우저">브라우저<a href="#브라우저"><span>#</span></a></h2>
<h3 id="브라우저-렌더링-원리">브라우저 렌더링 원리<a href="#브라우저-렌더링-원리"><span>#</span></a></h3>
<p>브라우저 렌더링은 HTML, CSS, JavaScript 같은 자원을 브라우저가 화면에 그리는 과정이에요. 순서는 크게 다섯 단계로 나눌 수 있어요.</p>
<ol>
<li><strong>DOM 생성</strong> — HTML 문서를 파싱해서 태그를 노드로 바꾸고, 노드 사이의 계층 관계를 만들어 DOM 트리를 만들어요.</li>
<li><strong>CSSOM 생성</strong> — CSS를 파싱해서 속성을 노드로 바꾸고, 마찬가지로 계층 관계를 가진 CSSOM 트리를 만들어요.</li>
<li><strong>렌더 트리 생성</strong> — DOM 트리와 CSSOM을 결합하는데, 이때 실제 화면에 표시될 요소만 골라서 렌더 트리를 만들어요.</li>
<li><strong>레이아웃</strong> — 렌더 트리를 이용해 각 요소의 크기와 위치를 계산해요.</li>
<li><strong>페인팅</strong> — 계산된 위치에 요소의 배경, 테두리, 글자 등을 실제로 그려요.</li>
</ol>
<h3 id="브라우저에서-더-볼-주제">브라우저에서 더 볼 주제<a href="#브라우저에서-더-볼-주제"><span>#</span></a></h3>
<p>아래는 메모에 키워드만 남아 있던 주제예요. 한 문장으로 설명할 수 있는지 스스로 확인해보세요.</p>
<ul>
<li>브라우저 동작 방식</li>
<li>URL을 입력했을 때 벌어지는 일</li>
<li>데이터 암호화 전송</li>
<li>XSS 방지</li>
<li>프론트엔드 브라우저 성능 측정 방식과 개선점을 찾기 위해 봐야 하는 것들</li>
</ul>
<h2 id="javascript">JavaScript<a href="#javascript"><span>#</span></a></h2>
<h3 id="호이스팅">호이스팅<a href="#호이스팅"><span>#</span></a></h3>
<p>호이스팅은 변수와 함수 선언이 스코프의 최상단으로 끌어올려진 것처럼 실행되는 현상이에요. 그래서 선언 전에 사용하면 의도치 않은 오류가 날 수 있어요.</p>
<h3 id="와-의-차이"><code>==</code>와 <code>===</code>의 차이<a href="#와-의-차이"><span>#</span></a></h3>
<p><code>==</code>는 동등 연산자로, 두 값을 비교할 때 형변환(type coercion)을 먼저 수행해요. 데이터 타입이 달라도 자동으로 타입을 맞춘 뒤 비교하기 때문에 예측하지 못한 결과가 나올 수 있거든요.</p>
<p><code>===</code>는 일치 연산자로, 데이터 타입과 값이 모두 같은지 비교해요. 형변환 없이 정확한 값을 비교하니까 더 안전하고 결과를 예측하기 쉬워요.</p>
<h3 id="클로저">클로저<a href="#클로저"><span>#</span></a></h3>
<p>클로저는 함수가 선언될 때 자동으로 만들어지는 렉시컬 환경과 관련이 있어요. 이 렉시컬 환경은 함수가 선언된 시점의 모든 변수와 함수를 포함하는 렉시컬 스코프를 형성하고, 이게 스코프 체인으로 이어져요.</p>
<p>덕분에 외부 함수가 실행을 마치고 반환된 뒤에도, 내부 함수는 외부 함수 범위의 변수에 계속 접근할 수 있어요. 주로 정보를 은닉할 때 사용해요.</p>
<h3 id="비동기-함수와-이벤트-루프">비동기 함수와 이벤트 루프<a href="#비동기-함수와-이벤트-루프"><span>#</span></a></h3>
<p>비동기 함수는 실행 결과가 즉시 반환되지 않고, 특정 조건이 충족될 때까지 기다리는 함수예요. 보통 콜백 함수나 Promise 객체를 반환해요.</p>
<ul>
<li><strong>콜백 함수</strong> — 비동기 작업이 완료되었을 때 호출되는 함수예요.</li>
<li><strong>Promise</strong> — 비동기 작업이 성공했는지 실패했는지를 나타내는 객체예요.</li>
</ul>
<p>비동기 함수는 애플리케이션 성능을 높이고 사용자 인터페이스의 반응성을 유지하는 데 유용해요. 다만 콜백 지옥 같은 문제를 피하려면 적절한 에러 처리와 코드 구성이 필요해요.</p>
<p>여러 비동기 함수가 실행되면 이벤트 루프가 호출을 처리하고, 각 작업이 완료될 때 콜백을 호출해요. 즉 비동기 함수들의 실행 순서는 이벤트 루프가 제어하는 거예요.</p>
<h3 id="javascript에서-더-볼-주제">JavaScript에서 더 볼 주제<a href="#javascript에서-더-볼-주제"><span>#</span></a></h3>
<ul>
<li>var, let, const의 차이점</li>
<li>이벤트 루프의 작동 원리</li>
<li>JavaScript에서 가장 많이 쓰는 데이터 구조와 알고리즘, 각각의 용도</li>
</ul>
<h2 id="이벤트">이벤트<a href="#이벤트"><span>#</span></a></h2>
<h3 id="이벤트-버블링">이벤트 버블링<a href="#이벤트-버블링"><span>#</span></a></h3>
<p>이벤트 버블링은 HTML에서 이벤트가 발생했을 때, 해당 요소에서 처리된 뒤 상위 요소로 이벤트가 전파되는 현상이에요. 전파되는 동안 부모 요소에서도 이벤트를 감지할 수 있다는 게 장점이죠.</p>
<h3 id="이벤트-위임">이벤트 위임<a href="#이벤트-위임"><span>#</span></a></h3>
<p>버블링을 활용하면 부모 요소에 핸들러를 하나만 등록해서 자식 요소에서 발생한 이벤트를 모두 처리할 수 있어요. 여러 하위 요소의 이벤트를 하나의 핸들러로 묶는 이걸 <strong>이벤트 위임</strong>이라고 불러요.</p>
<p>버블링이나 캡처링을 막고 싶다면 이벤트 객체의 <code>stopPropagation()</code> 메서드로 전파를 중지시키거나, 핸들러 안에서 이벤트가 발생한 요소를 확인해서 처리하면 돼요.</p>
<h3 id="이벤트에서-더-볼-주제">이벤트에서 더 볼 주제<a href="#이벤트에서-더-볼-주제"><span>#</span></a></h3>
<ul>
<li>사용자와의 상호작용</li>
</ul>
<h2 id="css">CSS<a href="#css"><span>#</span></a></h2>
<h3 id="flex와-grid의-차이점">Flex와 Grid의 차이점<a href="#flex와-grid의-차이점"><span>#</span></a></h3>
<p><strong>Flex</strong>는 주로 한 축 방향의 레이아웃을 구성할 때 사용해요. 아이템 크기가 자유로워서 유동적으로 변할 수 있고, 그래서 레이아웃이 유동적으로 바뀌는 상황에 잘 맞아요.</p>
<p><strong>Grid</strong>는 2차원 그리드 시스템을 구성할 때 사용해요. 수평과 수직 방향을 모두 정렬할 수 있고, 아이템 크기를 미리 정의해서 각 셀의 크기를 일정하게 유지하니까 레이아웃 변화가 적은 경우에 적합해요.</p>
<h3 id="css에서-더-볼-주제">CSS에서 더 볼 주제<a href="#css에서-더-볼-주제"><span>#</span></a></h3>
<ul>
<li>웹 페이지 구성 방식</li>
<li>CSS 스타일링 방식과 CSS 선언 방식의 구문, 문법, 각 부분을 뭐라고 부르는지</li>
<li>HTML5 및 CSS3의 주요 기능과 최신 트렌드</li>
</ul>
<h2 id="react와-아키텍처">React와 아키텍처<a href="#react와-아키텍처"><span>#</span></a></h2>
<h3 id="클래스형-컴포넌트와-함수형-컴포넌트의-차이">클래스형 컴포넌트와 함수형 컴포넌트의 차이<a href="#클래스형-컴포넌트와-함수형-컴포넌트의-차이"><span>#</span></a></h3>
<p>React에서 컴포넌트를 만드는 방법에는 클래스형 컴포넌트와 함수형 컴포넌트가 있어요. 클래스형은 ES6 클래스로 정의하고, 함수형은 함수로 정의하면서 훅(hook) API와 함께 많이 사용해요.</p>
<p>가장 큰 차이는 상태와 생명주기를 다루는 방식이에요.</p>
<ul>
<li><strong>클래스형</strong> — 상태를 <code>this.state</code>로 정의하고, 생명주기 메서드를 오버라이드해서 작업을 수행해요. 상태나 메서드를 참조할 때 <code>this</code> 키워드를 써요.</li>
<li><strong>함수형</strong> — 상태는 <code>useState</code> 훅으로 정의하고, 생명주기는 <code>useEffect</code> 훅으로 다뤄요. <code>this</code> 키워드를 사용하지 않아요.</li>
</ul>
<p>이 차이 덕분에 함수형 컴포넌트가 더 간결하고 가독성이 좋아요. 테스트와 리팩토링도 더 쉽게 할 수 있고요.</p>
<h3 id="mvvm-패턴과-flux-패턴의-차이">MVVM 패턴과 Flux 패턴의 차이<a href="#mvvm-패턴과-flux-패턴의-차이"><span>#</span></a></h3>
<p><strong>MVVM</strong>은 데이터 바인딩으로 View와 ViewModel 사이에 양방향 데이터 흐름을 유지해요. ViewModel이 View와 Model 사이에서 데이터를 중개하는 구조예요. Angular, Vue.js 같은 프레임워크에서 사용해요.</p>
<p><strong>Flux</strong>는 Action → Dispatcher → Store → View 방향의 단방향 데이터 흐름을 사용해요. Store가 애플리케이션의 데이터와 비즈니스 로직을 담당하고, Dispatcher를 통해 Action을 처리해요. React에서 주로 사용해요.</p>
<p>테스트 관점에서도 차이가 있어요. Flux는 단방향 흐름과 단일 책임 원칙을 따르니까 테스트하기 쉬운 코드를 쓰기 좋은 반면, MVVM은 양방향 바인딩 때문에 테스트가 어려울 수 있어요.</p>
<h3 id="react에서-더-볼-주제">React에서 더 볼 주제<a href="#react에서-더-볼-주제"><span>#</span></a></h3>
<ul>
<li>React 동작 원리</li>
<li>React 생명주기</li>
<li>상태 관리 방법</li>
<li>React의 <code>use</code>로 시작하는 함수들</li>
<li>마이크로 프론트엔드</li>
<li>React, Vue, Angular 등 주요 프레임워크의 장단점과 선택 기준</li>
</ul>
<h2 id="프로젝트-경험-말하기">프로젝트 경험 말하기<a href="#프로젝트-경험-말하기"><span>#</span></a></h2>
<p>개념 못지않게 중요한 게 프로젝트 경험을 <strong>구체적으로</strong> 공유하는 거예요. 실제로 어떤 문제를 어떻게 해결했고, 어떤 기술적인 결정을 왜 내렸는지를 설명할 수 있어야 해요.</p>
<p>예를 들어 Next.js로 개인 블로그를 만들 때 로컬 이미지 경로를 찾을 수 없던 문제가 있었어요. 개인 블로그라서 정적 사이트로 만드는 게 관리나 비용 측면에서 저렴했거든요.</p>
<p>그래서 빌드 과정에서 마크다운에 속한 이미지 경로로 이미지를 찾고, 그 이미지를 base64로 인코딩해서 정적인 HTML에 붙이는 방식으로 해결했어요. 이런 식으로 <strong>문제 → 제약 → 결정 → 결과</strong>의 흐름으로 말할 수 있는 경험을 미리 정리해두면 좋아요.</p>
<p>여기에 LeetCode나 HackerRank 같은 곳에서 정기적으로 코딩 문제를 푸는 것도 병행하면 좋아요.</p>
<h2 id="스스로-답해볼-면접-질문">스스로 답해볼 면접 질문<a href="#스스로-답해볼-면접-질문"><span>#</span></a></h2>
<p>실제 면접에서 받았거나 준비하면서 모아둔 질문이에요. 위 개념들을 정리한 뒤 소리 내어 답해보세요.</p>
<h3 id="react와-nextjs">React와 Next.js<a href="#react와-nextjs"><span>#</span></a></h3>
<ol>
<li>Functional Components와 Class Components의 차이점을 설명해 주세요.</li>
<li>React의 Virtual DOM이 실제 DOM과 어떻게 다른지, 그리고 왜 중요한지 설명해 주세요.</li>
<li>Next.js에서 Static Generation과 Server-side Rendering의 차이점은 무엇인가요?</li>
<li>React에서 상태 관리를 위해 <code>useState</code>와 <code>useEffect</code> 훅을 어떻게 사용하나요?</li>
<li>Next.js의 <code>getStaticProps</code>, <code>getStaticPaths</code>, <code>getServerSideProps</code>의 용도와 차이점을 설명해 주세요.</li>
</ol>
<h3 id="seo와-성능">SEO와 성능<a href="#seo와-성능"><span>#</span></a></h3>
<ol start="6">
<li>Next.js의 pre-rendering 기능이 SEO에 어떤 이점을 주나요?</li>
<li>React 애플리케이션에서 동적 콘텐츠를 SEO 친화적으로 만들기 위한 전략에는 어떤 것들이 있을까요?</li>
<li>Next.js 프로젝트에서 메타 태그와 Open Graph 태그를 동적으로 관리하는 방법을 설명해 주세요.</li>
<li>구조화된 데이터(Structured Data)를 React 또는 Next.js에 통합하는 방법과 그 중요성을 설명해 주세요.</li>
<li>Next.js / React 기반 프로덕트에서 페이지 로딩 속도를 최적화하는 방법과 그것이 SEO에 미치는 영향을 설명해 주세요.</li>
<li>웹 성능 최적화를 위해 사용하는 방법과 도구에 대해 설명해 주세요.</li>
<li>웹사이트 로딩 속도가 느려 사용자 만족도가 떨어지고 있다면 어떻게 해결하시나요?</li>
</ol>
<h3 id="보안과-협업">보안과 협업<a href="#보안과-협업"><span>#</span></a></h3>
<ol start="13">
<li>웹 보안 취약점과 공격 방식을 알고 있나요? 이를 방지하기 위해 어떤 조치를 취해야 하나요?</li>
<li>웹 애플리케이션에서 사용자 인증 및 권한 관리 기능을 구현하는 방법을 설명해 주세요.</li>
<li>웹사이트가 해킹 공격을 받았을 때 어떻게 대응해야 하나요? 구체적인 대응 절차와 예방 조치를 설명해 주세요.</li>
<li>여러 명의 개발자가 참여하는 프론트엔드 프로젝트에서 효율적인 버전 관리와 코드 공동 작업을 위해 어떤 방법을 사용하나요?</li>
</ol>
<h3 id="경험">경험<a href="#경험"><span>#</span></a></h3>
<ol start="17">
<li>최근에 진행한 프론트엔드 개발 프로젝트를 소개해 주세요. 목표, 사용한 기술, 주요 도전 과제와 해결 방안, 결과를 자세히 설명해 주세요.</li>
<li>반응형 웹 디자인을 구현할 때 어떤 점을 고려해야 하나요? 실제 프로젝트에서 경험한 사례를 중심으로 답변해 주세요.</li>
</ol>
<h2 id="더-읽어볼-자료">더 읽어볼 자료<a href="#더-읽어볼-자료"><span>#</span></a></h2>
<p>웹사이트를 만들었다면 <a href="https://frontendchecklist.io/" rel="noopener noreferrer" target="_blank">Front-End Checklist</a>로 빠진 게 없는지 한 번 점검해보세요. 그 외에 준비하면서 참고했던 자료예요.</p>
<ul>
<li><a href="https://github.com/qkraudghgh/coding-interview" rel="noopener noreferrer" target="_blank">취업 준비를 위해 공부한 내용을 정리하는 레포</a></li>
<li><a href="https://github.com/f-lab-edu/graduate-resume" rel="noopener noreferrer" target="_blank">F-Lab 수료생 이력서</a></li>
<li><a href="https://github.com/RocketPunch-inc/rules-of-employment-for-autonomy-culture-team" rel="noopener noreferrer" target="_blank">자율 근무 조직을 위한 취업 규칙 무료 공개</a></li>
<li><a href="https://github.com/zerobase-school/Backend-recruit" rel="noopener noreferrer" target="_blank">백엔드 개발자 취업 준비에 관한 모든 것</a></li>
<li><a href="https://github.com/baeharam/Must-Know-About-Frontend" rel="noopener noreferrer" target="_blank">취준생이라면 알면 좋을 프론트엔드 관련 지식들</a></li>
<li><a href="https://github.com/junh0328/prepare_frontend_interview" rel="noopener noreferrer" target="_blank">프론트엔드 기술 면접을 위한 핸드북 만들기</a></li>
<li><a href="https://zero-base.co.kr/event/media_insight_contents_FE_frontend_tech_Interview" rel="noopener noreferrer" target="_blank">현직 개발자가 정리해주는 프론트엔드 신입 기술 면접 문제 은행 20선</a></li>
<li><a href="https://xiubindev.tistory.com/119" rel="noopener noreferrer" target="_blank">실제로 받은 프론트엔드 개발자 면접 질문 모음</a></li>
<li><a href="https://phuoc.ng/collection/1-loc/" rel="noopener noreferrer" target="_blank">유용한 기능을 한 줄 코드로 만든 자바스크립트 유틸리티</a></li>
</ul>
<p>모든 걸 한 번에 외우려고 하기보다, 위 체크리스트에서 한 문장으로 설명이 안 되는 개념부터 하나씩 채워가는 게 가장 좋은 시작이에요.</p>
<hr>
<blockquote><div><p>All men who have achieved great things have been great dreamers.</p></div><p>— Orison Marden</p></blockquote></article></div></div>

이때의 나

sunhwang

프론트엔드 포지션에 지원하려고 하면 막상 뭘 먼저 봐야 할지 막막할 때가 있죠. 브라우저부터 JavaScript, React, CSS까지 범위가 넓어서 어디서부터 손대야 할지 감이 안 잡히거든요. 그래서 예전에 지원을 준비하면서 모아뒀던 메모를 개념 단위로 다시 정리해봤어요. 설명이 붙은 개념은 풀어서 적었고, 키워드만 적어둔 주제는 스스로 답해볼 체크리스...

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

댓글