<p>내가 무엇을 해야 하는지, 무엇을 빼먹고 있는지, 무엇을 열심히 해야 하는지 알 수 있다면 그 어떤 것에 대해서든 압도적인 성장을 만들 수 있을 것입니다. 하지만 그것들은 모두 좀처럼 알기 어려운데요.<br><br>성장하기 위한 열쇠를 알고 싶은 분들을 위한 좋은 개발자, 역량 있는 개발자가 되기 위해 걸어야 하는 길을 알려주는 지도가 있습니다. 오늘은 프론트엔드 개발자 로드맵을, 이어 다양한 개발자 로드맵을 소개합니다.<br><br>백엔드 개발자 로드맵이 궁금하시다면 아래를 참고해 보세요.<br>▶︎ <a href="https://spartacodingclub.kr/blog/2024-backend-roadmap" rel="noopener noreferrer" target="_blank">🗺️&nbsp;백엔드 개발자 로드맵 보러 가기</a></p><h2><br></h2><h2>📌&nbsp;목차</h2><ol><li>개발자 로드맵이란?</li><li>프론트엔드 입문 로드맵</li><li>프론트엔드 로드맵</li></ol><p><br></p><p><br></p><hr style="height:2px; border:none; background-color:#f4f5f6; "><p><br></p><p><br></p><p><br></p><hr style="overflow: hidden; height:0px; border:none; background-color:#fcfcfc; opacity: 0; margin: none; position: absolute;"><h2>개발자 로드맵이란?</h2><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729216333512-roadmap-frontend-map.jpg"></figure><p><br>개발자 로드맵이란, 로드맵(roadmap)의 뜻과 같이 개발자가 되기 위해 걸어야 하는 길을 지도처럼 정리해 둔 것을 말합니다. 어떤 공부를 해야 하는지, 이 때 또 어떤 공부를 함께 하면 좋을지 등을 표기해 준 이정표와 같은 존재죠.<br><br>위에서 보실 수 있듯 내가 지금 어떤 상황인지, 혹시 내가 이것을 모른다는 사실 자체를 모르고 있지는 않은지 등을 점검하는 용도로도 사용할 수 있습니다. 오늘 보여드리는 프론트엔드 로드맵을 통해 어떤 것이 중요한지 함께 알아봐요.</p><h2><br></h2><h2><br></h2><h2>프론트엔드 입문 로드맵</h2><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729216410036-frontend-beginner-roadmap.png"></figure><p><span class="ql-size-small">출처 : </span><a href="https://roadmap.sh/frontend?r=frontend-beginner" rel="noopener noreferrer" target="_blank" class="ql-size-small">Developer Roadmaps - Frontend Beginner</a><br><br>이제 막 프론트엔드 개발에 입문하는 중이거나, 공부를 시작한 지 얼마 되지 않은 개발자를 위한 대표적인 개발자 로드맵 제작자, Kamran Ahmed의 프론트엔드 입문 로드맵입니다.<br><br>프론트엔드의 상징이나 마찬가지인 HTML, CSS, JavaScript(자바스크립트)를 시작으로 기초를 만들 수 있는 몇 개념이 소개되어 있는데요. 이 중에서도 특히 중요한, 현직 프론트엔드 개발자가 생각하는 입문 기초 로드맵의 메인 포인트는 바로 이것입니다.<br><br></p><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">📢 <strong>팀스파르타의 프론트엔드 개발자, 종우 님의 입문 로드맵 짚어보기!</strong></div><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">프론트엔드를 처음 시작할 때는 프론트엔드의 기본이라 일컫는 HTML, CSS와 JavaScript(자바스크립트)에 특히 더 집중하시는 것을 추천합니다.</div><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">HTML 개념이 명확하지 않은 채로 리액트 등의 라이브러리로 넘어가게 된다면, 실무에서 문제를 해결하는 명확한 방법을 떠올리기가 어렵습니다. 어떤 문제든 라이브러리 내에서만 바라보게 되기 때문에 해결법의 시야를 넓히기 어려운 것인데요. MDN 등 양질의 문서, 공식 문서를 많이 읽어보며 개념을 잘 다질 필요성이 있습니다.<br><br>CSS(Cascading Style Sheets)는 의도한 대로 작동하지 않아 개발 입문기에 허들이 되는 경우가 많습니다.<br>CSS를 공부하다 코드를 보고 상상한 것처럼 웹사이트에 적용이 되지 않는 것에 스트레스를 느끼고 분들을 심심치 않게 찾아볼 수 있습니다. 다른 건 해도 CSS는 너무 까다롭다고 말씀하시는 분들도 있죠. 그만큼 브라우저의 마음을 이해한다고 생각하시어 충분한 시간을 들여 익숙해지는 것이 좋습니다.</div><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">JavaScript(자바스크립트)는 프론트엔드의 근본이고 기초입니다.<br>프론트엔드는 ‘오류’라고 칭할 만한 현상이 일어나는 빈도가 적은 편이며, 그렇기 때문에 어디서 무엇이 잘못되어가고 있는지 알아채기가 어려운 경우가 많습니다.<br><br>개발 자체도 자체지만, 여러 현상에 기민하게 반응할 수 있는 개발자가 되기 위해서도 JavaScript는 기초부터 단단히 다져 보세요.</div><h2><br></h2><h2><br></h2><h2>프론트엔드 로드맵</h2><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729216468718-frontend-roadmap.png"></figure><p><span class="ql-size-small">출처 : </span><a href="https://roadmap.sh/frontend" rel="noopener noreferrer" target="_blank" class="ql-size-small">Developer Roadmaps - Frontend Roadmap</a><span class="ql-size-small"><br></span><br>프론트엔드 로드맵입니다. 위에서 먼저 보여드렸던 입문 로드맵과 이어지기도 하는데요.<br>중요한 프론트엔드 개념들을 매개체로 나무의 뿌리처럼 엮었습니다. 개념만이 아니라 해당 개념에 사용되는 언어나 프레임워크의 종류, CS 지식들도 간간이 포함되어 있어 메인 개념만이 아니라 같이 엮여 있는 곁가지들도 살펴 보시면 좋습니다.<br><br>그렇다면 이 로드맵에서, 프론트엔드 개발자로서 가장 중요한 개념은 어떤 것일까요?<br><br></p><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">📢 <strong>팀스파르타의 프론트엔드 개발자, 종우 님의 로드맵 짚어보기!</strong></div><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">프론트엔드 개발자에게 중요한 SSR 개념과 리액트를 확실히 공부하기를 추천합니다.<br>리액트는 현재 프론트엔드를 대표하는 라이브러리인 동시에 압도적인 사용 점유율을 기록하고 있습니다. SEO 측면에서의 중요성과 함께 미리 학습해 두며 꾸준히 살펴보는 것이 중요합니다.</div><div class="my-callout" style="background-color: #fff4f4; padding-left: 14px; padding-right: 14px;padding-top: 16px; padding-bottom: 16px;color: #505254;font-size: 17px;">SSR(Server Side Rendering)은 사용자의 프로덕트(서비스)사용 속도와 직간접적으로 연결되어 있는 기술이기 때문에 중요도가 높습니다. SSR을 통해 더 빠르게 사이트의 내용을 띄워 줄 수 있는데요.<br>이는 사용자 경험만이 아니라 SEO적으로도 중요한 가치이기 때문에, 프론트엔드 개발자로서 반드시 제대로 알고 있어야 하는 개념입니다.</div><p><br>생각하신 것보다 로드맵이 길고 내용이 많았다면 시작도 하기 전 의지가 푹 꺾이실 수도 있습니다. 하지만 그럴 때면, 함께 이 길을 헤쳐나갈 파트너에게 도움을 받으면 됩니다.</p><h2><br></h2><h2><br></h2><h2>내일배움캠프의 프론트엔드 로드맵</h2><p>스파르타 내일배움캠프는 이 길고 긴 여정을 4개월로 압축해 한 토씨도 놓치지 않고 성장할 수 있는 프론트엔드 로드맵을 구성했습니다. 로드맵의 과정도 과정이지만, 무엇보다 그 길을 걷는 하루하루가 헛되이 사라지지 않도록 하루를 구성하는 것도 중요했는데요.<br></p><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap, 프론트엔드 부트캠프, 프론트엔드 개발자 부트캠프, 내알배움캠프" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729216559047-nbc-frontend-timetable.png"></figure><p>그렇기에 내일배움캠프의 하루는 위와 같이 구성됩니다. 오전 9시부터 오후 9시까지, 길다면 길고 짧다면 짧은 시간 동안 집중력이 흐트러지지 않게 전담 매니저님의 관리가 들어오는 것은 기본이죠. 또한 언제든지 문제를 해결하고 질문을 할 수 있도록 튜터님께서 24시간 상주하고 계십니다.<br><br>이렇게 치열하게 달리는 하루하루, 약 5개월간 어떻게 흘러가게 될까요? 스파르타가 제시하는 프론트엔드 내일배움캠프 로드맵은 이렇습니다.<br></p><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap, 프론트엔드 부트캠프, 개발자 부트캠프, 내일배움캠프" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729219205918-nbc-frontend-curriculum.png"></figure><p><br></p><ul><li>1주차 : 웹 개발 미니 프로젝트</li></ul><p>웹 개발의 기본 구조와 전반의 흐름을 이해하기 위한 미니 프로젝트로 포문을 엽니다. 단순 이론 공부부터 시작해 암기하듯 시작하기보다는, 바로 연습 경기에 출전하는 느낌이죠.<br><br>팀 소개 페이지를 직접 만들어보며 웹 페이지 동작 원리를 이해하고, 개발자의 기본 소통 도구라고도 볼 수 있는 Git과 Github를 실습합니다. 더불어 개발 역량의 커리어패스와 개발자라는 직업에 대해 개발자 선배님과의 대화 세션 시간을 가집니다.</p><p><br></p><ul><li>2-3주차 : 프로그래밍 기초</li></ul><p>본격적인 프론트엔드 입문을 앞두고 언어의 기본기를 배웁니다. 자바 스크립트의 기초-심화 문법과 파이어베이스에 대해 학습하는데요. 알고리즘 세션과 더불어 이 때부터 ‘1일 1알고리즘 문제풀이’ 루틴을 소화하게 됩니다.</p><p><br></p><ul><li>4-7주차 : 프론트엔드 기초</li></ul><p>React 학습을 위해 변수, 객체, 배열, 모듈, 비동기 등 다양한 개념에 대해 배웁니다. 컴포턴트를 포함해 카운터 앱 실습으로 기초를 마치는데요. 그에 이어 css in JS, 전역상태관리, 리팩토링을 포함해 BaaS 숙련 단계까지 리액트 역량을 열심히 기르는 시간입니다.<br><br>그와 더불어 이 때에는 CRUD 기반 사용자 관리 중점 뉴스피드를 직접 전부 만들어 보는 프로젝트가 진행되는데요. 그 과정에서 현직 개발자의 섬세한 코드 리뷰와 개선점에 대한 피드백을 받아볼 수 있습니다.</p><p><br></p><ul><li>8-9주차 : 프론트엔드 심화</li></ul><p>리액트 심화 과정으로서, 비동기 프로그래밍부터 클라이언트 상태 관리, 인증/인가, 반응형 웹, 컴포넌트 스타일 도구 등에 대해 배우는 시간입니다.<br><br>이 때에는 아웃 소싱 프로젝트가 예정되어 있는데요. 실무에서도 많이 쓰이는 API를 활용하며 경험을 쌓을 수 있습니다. 물론 이 프로젝트에도 현직 개발자의 코드 리뷰와 개선점 피드백을 받아볼 수 있습니다.<br><br>더불어 네이버 출신 개발자와의 세션이 있습니다. 대기업 개발자의 특징과 가져야 하는 역량, 그리고 대기업이 개발자에게 원하는 것이 무엇인지 등 취업에 대한 솔직한 이야기를 나누어 볼 수 있습니다.</p><p><br></p><ul><li>10-12주차 : 프론트엔드 플러스</li></ul><p>단순히 프론트엔드 개발을 할 수 있는 사람이 아닌, 끊임없이 변화하는 개발 기술을 즉각 나의 일에 적용시킬 줄 아는 능동적인 개발자로서의 시선을 기르는 때입니다.<br><br>타입스크립트(Typescript)와 Next.js로 높은 코드 품질과 성능 향상을 목표로 하는 개발을 익힙니다. route handler를 이용해 풀스택(full stack) 개발까지 경험하여 다양한 경험을 할 수 있습니다.<br><br>또한 이 때에는 최종 프로젝트 이전 마지막 프로젝트인 심화 프로젝트가 예정되어 있습니다. 타입스크립트(Typescript), Next.js를 활용해 고성능의 웹 어플리케이션을 개발해 보는 건데요. 이를 통해 심화적인 내용을 완벽히 내 것으로 만들고 넘어갈 수 있습니다.</p><p><br></p><ul><li>13-18주차 : 최종 프로젝트</li></ul><p>최종 프로젝트는 내일배움캠프의 꽃이라고 불립니다. 지금까지 배운 것 그리고 그 이상을 이용해 최상의 결과물을 만들어내려 모든 수강생이 전력을 다합니다. 그러다 보니 자연스럽게 이 때 다시 한 번 폭발적인 역량 성장을 하는 분들도 많죠.<br><br>그래서인지 내일배움캠프의 수강생들은 이 최종 프로젝트의 결과물을 포트폴리오로 취업에 성공하는 경우가 많은데요. 어떤 지점이 멋진 결과를 만들어내는 것일까요?</p><p><br></p><h3>MVP 구현과 배포, 트러블 슈팅까지 완벽한 경험</h3><p>트러블 슈팅 경험이 바로 이력서에서 이 프로젝트가 강점을 가지게 해 주는 중요한 역할을 하는 매개입니다. 내가 만든 프로덕트, 내가 쓴 코드에서 ‘무엇이 잘못되어 그를 고치려고 어떻게 생각하여 무슨 방법을 시도했으며, 그래서 결국 어떻게 개선했는가’에 대한 내용은 나의 역량을 증명합니다.<br><br>특히 실무에서는 아무것도 없는 바닥부터 새 코드를 짜는 업무보다는 에러를 개선하고 새로운 기능의 유지보수의 기틀을 만드는 등 말 그대로 문제를 해결할(trouble shooting) 역량이 중요하기 때문에, 이 부분은 취업에서 매우 긍정적으로 작용합니다.</p><p><br></p><h3>UI/UX 디자이너와의 협업</h3><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap, 프론트엔드 부트캠프, 프론트엔드 개발자 부트캠프, 내알배움캠프" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729216724372-nbc-frontend-project.png"></figure><p>개발자들끼리의 협업이 아닌, 디자이너와 함께하는 정말 본격적인 협업 경험을 만들 수 있습니다. 프론트엔드 개발자와 디자이너는 실무에서는 결코 뗄래야 뗄 수 없는 관계인데요. 프로젝트에서부터 디자이너와의 협업을 해 보며 실무에 가까운 경험을 만들 수 있습니다.<br></p><figure class="ql-card-editable ql-card-figure"><img loading="lazy" alt="개발자 로드맵, 프론트엔드 로드맵, 프론트엔드 개발자 로드맵, frontend roadmap, 프론트엔드 부트캠프, 프론트엔드 개발자 부트캠프, 내알배움캠프" src="https://s3.ap-northeast-2.amazonaws.com/blog.spartacodingclub.kr/1729216714469-nbc-frontend-portfolio.png"></figure><p><br>그와 함께 높은 퀄리티의 결과물도 함께 따라오죠. 디자이너의 손길이 닿아 훨씬 정교하고 멋진 디자인으로 MVP를 만들 수 있습니다.<br><br>개발자 취업 준비생, 혹은 이직 중 등 개발자로 일하고 있지 않은 상황에서 디자이너와 협업을 할 수 있는 기회는 흔치 않습니다. 실무에 가까운 프로젝트 경험으로 일할 준비가 된 개발자임을 보여줄 수 있습니다.<br><br></p><p>이렇게 취업에 성공한 분들의 이야기가 궁금하다면, 지금 바로 만나보세요.<br>▶︎ <a href="https://nbcamp.spartacodingclub.kr/blog/category/%EC%B7%A8%EC%97%85%EC%84%B1%EA%B3%B5%ED%9B%84%EA%B8%B0" rel="noopener noreferrer" target="_blank">📖&nbsp;프론트엔드 개발자 취업 후기 보러 가기</a></p><p><br></p><p><br></p><p><br></p><hr style="height:2px; border:none; background-color:#f4f5f6; "><p><br></p><p><br></p><p><br></p><p><br></p><hr style="overflow: hidden; height:0px; border:none; background-color:#fcfcfc; opacity: 0; margin: none; position: absolute;"><p>어떤 길이든, 길을 떠날 마음을 먹었을 때와 길을 떠난 지 얼마 되지 않았을 때가 가장 어려워보인다고 합니다. 그 뒤, 또 한 번 중턱에 다다랐을 때쯤 고비가 온다고들 하죠.<br><br>그러니, 힘든 것은 당연합니다. 너무 할 일이, 할 공부가 많아 보이는 것도요. 그러니 그와 함께 걸을 파트너를 만나 보세요. 내일배움캠프에서는 누구나 큰일 낼 수 있습니다.</p>

0원으로 프론트엔드 로드맵 따라가기

2024 프론트엔드 로드맵 최신판 : 프론트엔드 개발자 입문 로드맵과 일반 로드맵 공유

개발자가 되기 위한 공부 순서와 알아야만 하는 내용을 한 장에 모두 담은 프론트엔드 로드맵을 공유합니다.