프론트엔드 CS
프론트엔드 CS 지식, 취업에 필요한 핵심 공부법 (CS 면접 기출 문제까지!)
비전공자에게는 너무 방대하고 어려운 프론트엔드 CS 지식, 이제 개발자 취업에 필요한 핵심만 공부하세요.
CS 면접 기출 질문과 카카오 출신 개발자의 BEST 답변도 놓치지 마세요.
프론트엔드 개발자 취업을 준비하고 있거나 개발자로 커리어 전환을 시도 중이라면 CS 공부에 대한 부담을 모두 가지고 있을텐데요. 요즘은 기업뿐만 아니라 해커톤, 대외활동에서도 지원자를 가려내기 위해서 코딩 테스트를 요구하고 있기 때문이죠. 실무에서 CS 지식을 잘 활용하지 않는 프론트엔드 개발자도, 취업을 위해서는 CS 공부가 필수 조건이 되었습니다.
CS 란?
CS (Computer Science)란, 컴퓨터 관련 분야에서 사용되는 용어, 개념, 알고리즘을 뜻합니다. 개발자들이 CS를 공부해야 하는 이유는 문제 상황이 주어졌을 때 제한된 시간과 메모리 내에서 가장 효율적으로 문제를 해결할 수 있기 때문인데요. 하지만 프론트엔드 CS 지식은 양이 정말 많고, 단기간에 공부한다고 해서 금방 배울 수 있는 지식이 아닙니다. 그래서 개발자 취업을 준비하는 비전공자라면 당장의 서비스를 잘 만드는 것도 어려운데, CS 지식은 또 언제, 어떻게 배워야 할지 막막함이 앞서죠.
오늘은 개발자 취업을 위한 프론트엔드 CS 지식 핵심 공부법을 알려드리고자 합니다. 이제 막 코딩을 시작하는 비전공자분들이 취업을 위해 꼭 알아야할 부분만 모아서, 효율적인 공부 방법을 아주 쉽게 써놓았습니다. 더불어 프론트엔드 CS 면접 예상문제와 카카오 출신 개발자의 BEST 답변까지 준비했으니, 끝까지 놓치지 말고 꼭 확인해보세요!
-
목차
1. 프론트엔드 개발자에게도 CS 지식이 중요할까?
2. 프론트엔드 CS 지식, 취업에 필요한 핵심만 공부하는 법
3. 프론트엔드 CS 면접 기출 문제 TOP 10
Chapter 1.
프론트엔드 개발자에게도 CS 지식이 중요할까요?
본격적인 프론트엔드 CS 지식을 공부하기 전에, 다들 “주니어 프론트엔드 개발자에게 CS 지식은 별로 중요하지 않다.” “CS 지식이 없어도 실무를 할 수 있다”는 이야기를 한 번쯤은 들어봤을텐데요. 왜 컴퓨터를 다루는 개발자에게 컴퓨터공학 지식이 중요하지 않다고 하는걸까요?🤔
가장 큰 이유는 CS 지식을 몰라도 프론트엔드 개발에 큰 지장이 없기 때문입니다.
프론트엔드 개발자는 백엔드 개발자보다 실무에서 CS 지식을 사용하는 비중이 적은데요. 프론트엔드 개발자가 웹페이지의 UI, UX 기능을 구현하고 성능을 개선하는 반면, 백엔드 개발자는 CS 지식을 더 많이 사용해야 하는 ‘서버’를 개발하기 때문이죠.
오히려 CS 지식을 활용하여 사이트나 소프트웨어 최적화 대신 코드의 가독성이나 재사용성을 높이는 경우가 더 많기도 하고요. 즉, 백엔드 개발자만큼 실무에서 많이 사용하지 않으니 신입 프론트엔드 개발자의 눈에는 당연히 CS 지식이 덜 중요해 보이겠죠.
.
▲ 연세대학교 컴퓨터과학과 이수 체계도
두 번째 이유는 내용이 어렵고, 공부하는 데 오랜 시간이 걸리기 때문입니다.
전공자들은 대학 교육 과정을 통해 크게 디자인 패턴과 프로그래밍 패러다임 / 네트워크 / 운영체제 / 데이터베이스 / 자료구조 등으로 세부 분야를 나누어서 학습합니다. 하지만 비전공라면 대학에서 컴퓨터공학을 이처럼 자세하게 배울 기회가 없죠. CS 지식은 전공자도 4년 동안 공부할 만큼 그 양과 범위가 방대하여, 단순 암기식으로는 공부하기 어렵습니다. 평균적으로 6개월 ~ 1년 이상 공부를 해야지 유의미한 성과가 나오기 때문에 CS 지식은 최소 6개월 이상 공부해야한다는 점을 감안해 미리 코딩테스트와 면접을 준비하는걸 추천드려요.
프론트엔드 개발자에게 CS 지식이 중요한 이유
실무에서도 잘 쓰이지 않고, 공부 시간도 오래 걸려서 효율이 너무 낮은 프론트엔드 CS 지식, 진짜 프론트엔드 개발자들에게 꼭 필요할까요?
▲ 구글과 삼성전자 개발직군 채용공고
출처: https://hongong.hanbit.co.kr
네, 프론트엔드 개발자에게 CS 공부는 매우 중요합니다.
위 채용 공고에서도 볼 수 있듯이 기업들은 기본적으로 CS 지식을 갖고 있는 사람을 채용하기 때문입니다. 설령 채용공고에 CS 관련한 우대사항이 없더라도 CS 기반의 코딩테스트와 기술면접을 통해 지원자의 CS 지식을 확인합니다. 프론트엔드 CS 지식이 주니어 개발자에게 필요한 이유를 좀 더 자세히 알아볼까요?
프론트엔드 개발자는 웹페이지를 실행하는 브라우저도 파악해야하기 때문입니다.
프론트엔드 CS 지식은 단순한 기능 구현뿐만 아니라 브라우저 상태를 파악하고, 타 부서와 협업할 때 활용됩니다. 더불어 기능 최적화나 보안에 대한 이해를 위해서도 CS 지식은 중요합니다. 이처럼 CS 지식은 단순하게 서버 내부의 기능들에만 관련된 것이 아니라, 하나의 서비스를 구현해내는 데도 꼭 필요합니다.
개발 환경과 플랫폼이 계속해서 변화하기 때문입니다.
프론트엔드 개발자는 알고리즘의 추상화된 형태인 API나 라이브러리, 프레임워크를 활용하여 개발을 합니다. 이는 CS 지식을 완벽히 이해하지 않아도 사용할 수 있습니다. 다른 사람들이 이미 만들어놓은 기반 위에서 개발을 하는 것이기 때문이죠. CS 지식이 없다면 이런 특정 환경과 플랫폼에 종속될 수 있습니다. 반대로 기본적인 CS 지식만 있어도, 새로운 환경에서 기존의 라이브러리를 사용할 수 없을 때, 효율적으로 문제 해결 방법을 제시할 수 있죠.
CS 지식은 프론트엔드 코딩테스트와 기술면접에 필수로 나오기 때문입니다.
기업들은 지원자가 자신의 기업에 얼마나 적합한지 파악하기 위해 실무에서 사용하는 CS 지식을 활용하여, 코딩테스트 및 기술면접 문제를 제작합니다. 일반적으로 개발자가 소유한 기술 스택(Stack) 뿐만 아니라, 컴퓨터 과학 분야에 대한 기초적인 지식도 함께 검증하는데요. 특히, 기술면접에서는 문제 해결 능력, 알고리즘 설계 등에 대한 지식이 중요하게 평가됩니다.
Chapter 2.
프론트엔드 CS 지식 핵심 공부 순서
“비전공자는 프론트엔드 CS 지식, 어디까지 공부해야하는걸까요?”
이제 프론트엔드 CS 공부가 필수인 건 아는데, 어떻게 비전공자가 많은 양의 CS 지식을 효율적으로 공부할 수 있을지 고민이신가요?
솔직히 말하면 컴퓨터공학 전공자도, 현직 프론트엔드 개발자도 모든 CS 지식을 공부하지는 않습니다. 자신의 업무 혹은 관심 분야에 맞춰 필요한 부분만 골라서 공부하는데요. 이제 막 프론트엔드 공부를 시작한 비전공자라면, 아직 어떤 부분이 나에게 필요한지 헷갈릴 수밖에 없죠. 막막한 프론트엔드 CS 공부, 프론트엔드 개발자 취업을 목표로 하는 분들을 위해 핵심만 공부할 수 있는 방법을 가져왔습니다!
이제 프론트엔드 CS 핵심 공부법 내용을 간단하게 함께 살펴볼까요? 전체적인 공부 순서는 아래와 같습니다. 프론트엔드 CS 핵심 공부법 순서만 차근차근 따라가면 취업 및 실무에 필요한 기본적인 CS 지식을 제대로 익힐 수 있어요.
1. CPU, 메모리 개념
2. 보조기억장치
3. 입출력장치
4. 메모리 관리
5. 프로세스와 컴파일 과정
6. 멀티 프로세싱
7. HTTP, HTTPS 네트워크 지식
8. TCP/IP 프로토콜에 대한 이해
9. REST API 등 웹 API 개발
프론트엔드 CS 공부의 시작은 컴퓨터 구조입니다.
컴퓨터 구조는 실무에 많이 쓰이지 않아서 중요도가 떨어진다는 의견도 있는데요. 시니어 개발자가 될수록 컴퓨터 구조에 대한 기본 지식 유무가 개발 효율을 키우는 가장 큰 역할로 작용한다고 해요. 즉, 컴퓨터 구조는 지금 당장은 필요 없어 보일지 몰라도 토대를 다지는 중요한 프론트엔드 CS 지식입니다. 처음부터 도전하기 어려운 자료구조/알고리즘 대신 컴퓨터 구조를 배움으로써 기본적인 컴퓨터와 프로그램 지식의 토대를 만듭니다.
▲ 프론트엔드 컴파일 과정 (출처: https://chayan-memorias.tistory.com/97)
운영체제 부분에서 가장 중요한 것은 프로세스와 컴파일 과정에 대한 이해입니다.
특히 프론트엔드는 백엔드 및 타 부서와의 협업 과정에서 타입스크립트를 활용해 컴파일러 과정을 거치기 때문에 각 프로그램의 프로세스를 이해하는 것이 중요합니다.
마지막으로 네트워크는 전 세계에서 셀 수 없이 많은 컴퓨들 간의 통신 방법을 배우는 것인데요. https, http 같은 프로토콜은 곧 모두가 지켜야하는 통신 규칙중 하나입니다.
https://zero-base.co.kr/category_dev_camp/school_FE
같이 모두가 사용하는 인터넷 주소 앞에는 https, http를 붙이는 것처럼요. 더불어 클론코딩을 해 본 사람이라면 오픈 소스인 API를 많이 사용해보셨을텐데요. 네트워크는 이 API를 사용하는 방법을 익힙니다. 핵심 공부법에 넣은 REST API는 현재 프론트엔드 개발자들이 실무에서 가장 많이 활용하는 API 형태로, 미리 공부해두면 면접뿐만 아니라 실제 일을 할 때도 도움이 될 거예요.
효율적인 프론트엔드 CS 공부를 위한 강의 추천
실제로 프론트엔드 CS 강의와 책은 엄청 다양한 편이죠. 하지만 초심자에게 맞춰진 CS 강의는 많이 적은 것 같아요. 실제로 강의를 들어도 이해가 안되는 부분이 더 많고요.
그래서 비전공자인 제가 들었을 때도, 쉽게 설명해주는 강의를 찾아왔는데요. 삼성, LG 출신의 현직 개발자분이 비전공자가 개발자 취업을 위해 꼭 필요한 핵심만 모아놓으셨더라고요. 위에 알려드린 컴퓨터구조, 운영체제, 네트워크에 대한 공부는 물론이고 실무에서 CS 지식이 어떻게 활용되는지 구체적으로 알려주셔서 정말 유용했어요. 프론트엔드 CS 강의를 찾고 있었다면 아래 잔재미 코딩님의 CS 이론을 추천드려요! 👍
Chapter 3.
프론트엔드 CS 면접 기출 문제 TOP 10
당장 이번주가 기술면접인데, 프론트엔드 CS 지식 강의를 하나씩 들을 시간이 없다! 혹은 나는 이론파라서 강의보다는 책이나 글로 CS를 공부하고 싶다는 분들을 위해 카카오 출신 개발자분이 작성한 프론트엔드 CS 면접 기출 문제도 준비했어요! 사실 프론트엔드 CS 지식은 대표적인 강의가 많이 없기 때문에 주로 블로그나 두꺼운 책을 통해서만 공부를 하시더라고요. 하지만 프론트엔드 CS 지식은 단순하게 책을 완독하는 것보다 면접 문제 혹은 미니 프로젝트를 활용하여 필요한 정보만을 찾아서 공부하는 것이 더 효율적입니다!
프론트엔드 CS 면접 문제를 활용한 공부는 당장의 프로젝트를 만들기에는 시간이 부족하거나, 이론적인 측면을 더 공부하고 싶은 분들께 추천드려요. 기술면접에 나오는 CS 지식은 그만큼 실무에서 많이 쓰이고, 기업이 중요하게 보는 내용이라는 의미인데요. 즉, 프론트엔드 CS 면접 문제를 토대로 공부하면 개발자 취업준비뿐만 아니라 미리 실무에 필요한 지식들을 습득할 수 있는 것이죠. 이제 유명 IT 기업들의 프론트엔드 CS 면접 기출 문제를 같이 확인해볼까요? 현직 개발자분의 BEST 답변과 함께 프론트엔드 CS 공부를 시작해보세요.
1. 인터프러터와 컴파일러는 어떤 점에서 차이가 있나요?
인터프리터 언어는 코드가 실행되는 단계인 런타임에 문 단위로 한 줄씩 중간 코드(intermediate code)인 바이트 코드(특정한 하드웨어가 아니라 가상 머신에서 실행하도록 만든 바이너리 코드)로 변환한 후 실행합니다. 반면 컴파일러 언어는 코드가 실행되기 전 단계인 컴파일 타임에 소스 코드 전체를 한번에 머신 코드(CPU가 바로 실 행할 수 있는 기계어)로 변환한 후 실행한다는 점에서 차이가 있습니다.
2. URL로 접속했을 때 어떤 플로우로 화면에 웹사이트가 그려지는지 네트워크 관점에서 설명해주세요.
URL을 입력하면 DNS를 조회해서 도메인을 바탕으로 IP주소를 찾습니다. 그리고 TCP연결 을 통해서 3 way handshake라는 과정을 통해서 응답을 확인하고, HTTP요청과 응답을 통 해서 DOM트리를 생성할 수 있는 페이지 정보를 응답 받게 됩니다.
DOM트리 CSSOM트리 렌더트리를 거쳐서 화면이 로드되게 되는데, 이 과정에서 레이아웃 을 배치하고 페인트를 통해서 계산된 위치에 요소를 그리게 됩니다. 이러한 과정들은 선형적인 방법은 아니고 상호작용을 통한 방법이므로 여러 번 다시 일어날 수 있고 병렬로도 처리될 수 있습니다.
3. RESTful API에 대해 설명해주세요.
RESTful API는 HTTP 프로토콜을 기반으로하는 웹 서비스 아키텍처입니다. 자원, 메소드, 메시지 등을 정의하여 클라이언트-서버 간의 통신을 가능하게 합니다. 또한, RESTful API는 표준 HTTP 메소드(GET, POST, PUT, DELETE)를 사용하여 서버와 통신합니다
4. XML과 XHTML의 다른 점은 무엇인가요?
XML과 XHTML은 다양한 부분에서 차이가 있습니다.
목적에 따라서 봤을 때, XML은 데이터를 저장하고 전송하기 위한 언어로 만들어졌습니다.
XML은 태그를 정의하여 사용자가 직접 태그를 만들 수 있고, 사용자 정의 데이터 구조를 설
계하여 생성할 수 있습니다.
XHTML은 HTML을 XML 기반으로 재정의하여 HTML을 더 엄격한 XML 문법에 따라 작성
하도록 하여 XML과의 호환성을 갖추고, 더 엄격한 문법 검사를 하도록 합니다. 예를 들어,
XHTML의 경우에는 무조건 시작 태그와 종료 태그를 짝 지어서 만들어야 합니다.
용도 측면에서 봤을 때, XML은 주로 데이터를 저장하고 교환하는 RSS 피드나 SOAP 메시
지 등의 데이터 형식으로 사용하고, XHTML은 HTML의 문서 형식과 유사하게 작성되며 웹
페이지를 작성하는데 사용됩니다.
5. 브라우저 스펙 차이에 따른 스타일링 이슈를 수정하기 위해서 어떻게 접근하나요?
브라우저마다 다른 웹 표준과 렌더링 엔진의 차이로 발생하는 이슈들을 해결하기 위해서는 직접 환경을 만들어서 해당 이슈들을 확인하며 수정하는 방식들이 진행되고, 웹 표준에 대해 서 확인하기 위해서 W3C Validator와 같은 도구들을 적극적으로 활용하기도 합니다.
6. 웹사이트의 assets을 여러 도메인으로 서빙했을 때 장점은 무엇인가요?
주로 도메인 샤딩(Domain Sharding)이라고 일컬어지는 이 기법은 웹사이트의 assets에 해 당하는 이미지, CSS, JavaScript, 폰트 등을 여러 도메인으로 서빙하여 동일한 도메인의 브라우저에서 허용하는, 6~8개 정도를 뛰어넘는 동시 다운로드에 따라오는 성능 이점이 있습니다.
7. load 이벤트와 DOMContentLoaded event의 차이점은 무엇인가요?
load 이벤트는 DOMContentLoaded 이벤트가 발생한 이후, 모든 리소스(이미지, 폰트 등) 의 로딩이 완료되었을 때 발생하는 반면, DOMContentLoaded 이벤트는 HTML 문서의 로드와 파싱이 완료되어 DOM 생성이 완료 되었을 때 발생합니다.
8. 기능이 제약된 브라우저를 위해서 어떤 방식으로 페이지를 만드나요?
크로스 브라우징을 위해서는 Reset CSS, Normalize CSS와 같은 브라우저가 지정한 기본 스타일들을 모두 초기화 해주는 코드를 쓰는 스타일을 사용해서 여러 브라우저들이 동 일한 화면을 구성할 수 있게 해주는 방법을 제공합니다.
Modernizr와 같은 라이브러리를 사용해서 어떤 기능을 지원하는지 확인하거나 Media Query에서 @support 구문을 활용해 어떤 기능이 해당 브라우저에 지원하는지 확인하고 적용하는 방법 등이 있습니다.
9. 쿠키(Cookies)에 대해 설명해주세요.
쿠키는 웹 브라우저에서 데이터를 저장하는 기술로, 클라이언트와 서버 간의 데이터를 주고받을 때 사용합니다. 서버에서 쿠키를 설정한다면, 설정한 도메인의 모든 요청에 대해 자동으로 쿠키를 함께 클라이언트로 전송하게 됩니다. 용도는 주로 인증처리, 개인화된 세션 등에 대해서 사용됩니다
10. 클로저란 무엇인가요?
함수가 선언될 때 자동으로 생성되는 렉시컬 환경에 대한 설명입니다. 이러한 렉시컬 환경은 스코프 체인(scope chain)을 형성하게 되는데, 스코프 체인은 함수가 선언될 때의 모든 변 수와 함수를 포함하는 렉시컬 스코프(lexical scope)를 형성합니다. 외부 함수가 실행 되고 반환된 후에도 외부 함수의 범위 내의 함수에 체이닝을 할 수 있는 함수 입니다. 정보를 은닉 하기 위해 주로 사용 합니다.
프론트엔드 CS 기출 문제가 더 궁금하다면? 아래 아티클을 참고해주세요🤗
마치며
오늘은 주니어 개발자들에게도 프론트엔드 CS 지식이 필요한 이유, 그리고 비전공자를 위한 CS 핵심 공부법을 알아보았는데요. 프론트엔드 개발자에게 CS 지식은 필요 없을 것이라는 생각은 바뀌셨나요?
실제로 현직 프론트엔드 개발자들은 오히려 CS 지식을 더 중요하게 생각해요. 기본이라도 알고 있다면 다양한 문제 상황에 쉽게 대처할 수 있기 때문이죠.
더욱이 프론트엔드와 백엔드의 협업이 늘어나는 요즘, 업무 이해를 위해 CS 지식을 다시금 공부하는 현직 개발자들도 많아요. 앞서 운영체제 CS 지식에서 컴파일러 공부를 강조한 이유 역시, 프론트엔드와 백엔드가 협업하는 과정에서 사용하는 지식이기 때문이죠. 이제 서버를 직접 다루는 백엔드 개발자만 CS 지식을 공부하면 된다는 말은 정말 과거의 이야기입니다.
프론트엔드 CS 지식은 컴퓨터공학 전공생들도 많이 어려워하는 부분이에요. 그래서 단순히 면접 기출 문제만 암기한다고 해서 공부를 마쳤다고 생각하면 안돼요. 방대하고 복잡한 양의 CS 지식을 한 단계씩 기초를 쌓으며 공부하는 것이 중요합니다.
비전공자라서 CS 지식을 어떻게 공부할지 방법을 잘 모르겠거나, 위에 추천 받은 핵심 공부법을 더 자세히 알아보고 싶다면 제로베이스 프론트엔드 스쿨을 추천드립니다. 핵심 공부법 외에도 프론트엔드 스쿨은 CS 지식을 실무에 적용할 수 있도록 CS 지식 퀴즈와 프로젝트 커리큘럼을 제공하고 있어요. 단순히 정답을 맞추는 것이 아니라 백엔드와의 협업 프로젝트를 통해 CS 지식을 미리 실무에 적용해보는 경험도 할 수 있죠. 프론트엔드 실무 역량을 기르고 싶은 분들, 비전공자이지만 개발자로 취업하고 싶은 분들께 추천드려요!
개발자 취업은 제로베이스
추천 컨텐츠
