FE 취준생을 위한 포스트/자료 모음

소개 💬

프론트엔드 개발자로 취업을 준비하는 모든 분들에게 도움이 될 만한 기술 블로그 포스트 및 여러 자료들을 모아 정리했습니다. 🙂

그 동안 저에게 유익했던 여러 포스트 및 자료들을 다시 볼 목적으로 제 깃허브 레포지토리에 저장해 두었는데, 다른 분들에게도 공유하면 좋을 것 같아서 이렇게 정리하여 올립니다.

제가 프론트엔드 개발자를 준비하고 있어, 모은 자료가 주로 프론트엔드 관련이라는 점 참고 바랍니다.

📌 FE 공부법 및 가이드

• 프로그래밍 학습 방법 (By 박재성님)

  프로그래밍 학습의 방법에 대한 영상입니다.
  개인적으로 프로그래밍 공부를 처음 시작하시는 분들이 꼭 한 번 봤으면 합니다.

• 초보 웹 개발자를 위하여 (By 정호영 님)

  웹 개발자 되고 싶은데 어떻게 시작해야 할 지 감이 안 잡히는 분들께 추천하는 포스트입니다. 앞으로의 대략적인 공부 방향을 잡는데 도움이 될 것입니다.

• 프론트엔드 개발, 뭐하는 직종이야? (By paul90 님)

  프론트엔드 개발에 대한 대략적인 틀을 잡아주고, 프론트엔드 개발자가 되기 위해 어떤 역량이 필요한 지 알려주는 포스트입니다.

• 웹 프론트엔드 개발자, 어떻게 준비해야 할까? (By 윤지수 님)

  FE 개발자가 실제 업무에서 어떤 일을 하는 지 살펴보고, 이를 바탕으로 경력 같은 신입 FE 개발자가 되기 위해 어떤 경험을 해보면 좋을 지 안내해주는 포스트입니다.

• 2020 FrontEnd 개발자가 되기 위한 10가지 방법 (By Harang 님)

  2020년 7월에 진행 된 우아한테크세미나(주니어개발자로 성장하는 우아한 방법들)를 작성자님이 듣고 요약한 포스트입니다.

• 비전공자 웹개발자로서 살아남는 법 정리본(출처:okky) (By 렛츠기릿 님)

  웹 개발자에게 꼭 필요한 지식을 중요도 순으로 나열하고, 각 항목마다 중요한 이유 및 효과적인 공부법에 대해 정리한 포스트입니다.

• 프론트엔드 추천 자료 모음 (By 문건우 님)

  velog에서 엄청나게 많은 좋아요를 받은 포스트로, 프론트엔드 개발자에게 유익할만한 양질의 자료(사이트, 블로그, 깃허브, 유튜브 등등)들이 풍부합니다.

• 웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법 (By 라매개발자 님)

  노베이스 상태에서 프론트엔드 개발자가 되기 위해 무엇을 공부하고 준비해야 하는지 상당히 구체적으로 알려주는 유튜브 영상입니다. 길이는 16분 정도 됩니다.

• 2022 웹개발 로드맵 총정리 (공부순서 알려드림) | 올해는 정말 해보자 🚀 (By 드림코딩 엘리)

📌 코딩테스트 대비

• CodeUp 기초 100제 (문제 풀이 사이트)

  PS(Problem Solving)가 처음인 분들께 추천합니다.
  문제 수도 적당하고, 기초 문법을 잘 모르셔도 괜찮을 정도로 설명이 자세합니다.

• Code Tree - Novice Low (문제 풀이 사이트)

  PS 초심자에게 함께 추천하는 문제집입니다. 코딩테스트 대비에 좀 더 최적화되어 있습니다.
  문제 수가 거의 400개나 되기에, 기초를 다지는 데 충분한 연습을 할 수 있습니다.

• 용감하게 시작하는 코딩테스트 1편 (By Covenant 님)

  코딩테스트에서 코드를 간결하고 효율적으로 짤 수 있는 여러 팁이 잘 정리되어 있습니다.

• 개인이 생각하는 알고리즘(PS/CP) 공부 유형 및 보완법 (By 안수빈 님)

  PS를 어떻게 해야 할 지 막막하거나 자신이 지금 잘 하고 있는지 확신이 안 서는 분들께 추천하는 글입니다.

• 코딩테스트 준비 사이트 모음집(단순링크만) (By 태빵 님)

  태빵님이 작성하신 velog 게시글로, PS 문제 풀이 사이트가 잘 정리되어 있습니다.

• 코딩테스트 대비를 위한 백준 문제 추천 (By Covenant 님)

  작성자님께서 본인 경험을 바탕으로 코딩테스트 대비에 적합한 백준 문제를 대략 80개 골라 주제별로 정리해주신 글입니다.

• 알고리즘 공부법 (코테(또는 대회)를 위한 공부법) (By Gliver님)

📌 FE 관련 학습 자료 및 강의

• 생활코딩 - WEB 1 (무료 강의) (By 이고잉님)

• 노마드 코더 - 코코아톡 클론코딩 (유료 강의) (By 니꼬쌤)

• 노마드 코더 - 바닐라 JS로 크롬 앱 만들기 (무료 강의)

• 초보자를 위한 HTML & CSS 동작과 원리 (무료 강의) (By 윤지수님)

• 웹 프로그래밍 (풀스택) (무료 강의) (By 윤지수님)

• 모던 JavaScript 튜토리얼 (JavaScript 학습 사이트)

• Poiemaweb / Web Development Tutorial (웹 개발 튜토리얼 사이트) (By 이웅모 님)

• 벨로퍼트와 함께하는 모던 리액트 (By velopart님)

• 리액트(React)의 Hooks 완벽 정복하기 (By velopart님)

• React 공식 문서

• Node.js 공식 문서

• 프론트엔드 개발환경의 이해: NPM (By 김정환님)

• Webpack 핸드북

• Intrepidgeeks - 개발자가 도움이 되는 문서와 사이트를 정리하고 수집하는 데 전념하다

• Let's Get IT 자바스크립트 프로그래밍

• CSS Layout - Patterns (CSS 만으로 레이아웃을 만드는 법의 예시)

• 제주 코딩 베이스캠프 Code Festival Python 100제와 Javascript 100제

📌 취업 및 이력서 & 포트폴리오 준비

• 주니어 프론트엔드 개발자의 채용 프로세스 참여 후기 (By 황준일 님)

  ZUM에서 진행했던 신입 프론트엔드 개발자의 채용 과정을 채용자의 시각에서 기록한 포스트입니다.

• 내 업의 본질은 무엇인가? (By 박재성 님)

  우아한테크코스 이사님께서 우테코 2기 불합격자들의 불합격 이유를 피드백 해주시는 내용의 포스트입니다. 코딩테스트와 자소서를 어떻게 준비해야 할 지 감을 잡는데 도움이 됩니다.

• 신입 개발자가 포트폴리오를 준비할 때 알아두면 좋은 것들 (By 김태성 님)

  스타트업 채용 담당자께서 그 동안 어떤 식으로 포트폴리오를 바라보고 평가했는 지에 대해 구체적으로 설명해주신 포스트입니다. 더불어 더 높은 점수를 받는 포트폴리오를 작성하는 방법도 실례를 들어 알려주십니다.

• 개발자 이력서 작성하기 (feat. 이력서 공개) (By Wonny (워니)님)

• 그런 포트폴리오로 괜찮은가 (By 정현수님)

• 면접을 앞둔 개발자 지망생에게 (By 박종찬님)

• 개발적인 실력이 부족하여, 스스로를 어필하기 위해 써먹은 면접 전략 (By 1호님)

• 프론트엔드 신입 개발자로 취업하게 된 30대 비전공자 면접 후기 (By befree님)

📌 FE 면접 질문 및 필요한 지식

• 신입 개발자 면접 준비 (1) : 일반 면접 관련 예상 질문(개발 외) (By 코딩맛집 님)

• 프론트엔드 개발자 면접 정리 (By suyeonme 님)

• prepare_frontend_interview 레포지토리

• 취준생이 반드시 알아야 할 프론트엔드 지식들 레포지토리

• 프론트엔드 면접 질문 모음 (By honeysuckle 님)

• 프론트엔드 개발자 기술면접 인터뷰 질문 모음(업데이트) (답변 있음) (By 오렌지셔츠 님)

• 프론트엔드 개발자 면접 질문(기술면접) 정리 (By sunnykim91님)

• 프론트엔드 면접 문제 은행 질문 답변 (By wkahd01 님)

• 프론트엔드 인터뷰 핸드북 (번역) (By Yangshun Tay님)

• 안녕하세요, 프론트엔드 신입에 지원합니다. (By heyiminhye 님)

• 신입 개발자 전공 지식 & 기술 면접 백과사전 (By Gyuseok Kim 님)

• Brave Tech Interview 기술면접 문제 해설 레포지토리

• [CS 기본 개념] 전공면접 준비자료 (블로그 포스팅 시리즈) (By heyum님)

• 브라우저에 google.com을 치면 일어나는 일 (유튜브 영상 / 영어)

• 브라우저에 google.com을 치면 일어나는 일 (깃허브) (매우 자세) (By Alex님 / 번역 : Hoon Choi님)

• 프론트엔드 면접 문제 은행

📌 프로젝트 후기

개인 프로젝트

• (2022/02/14 랭크기능 추가) [React Numble Challenge] 다른 색깔 찾기 게임 만들기 (By 장현수님)

• [VanillaJS Project] 인스타그램 클론코딩 (By 이은진님)

• [Vanilla JS] 자라나는 나무 만들기 - 1 (By 신희강님)

• 프론트엔드 개발자의 포트폴리오 웹사이트 (By 이정민님)

팀 프로젝트

(준비중..)

📌 Etc.

• 개발을 시작한 당신에게 해주고 싶은 이야기 (By 노마드코더 니꼬쌤)

• 신입 개발자였던 내게 해주고싶은 조언들 (By Aaron Ryu님)

• 개발자의 성장 가능성은 어떻게 측정 가능한가? (By 조은님)

• 성장의 조건 (By 제임스 님)

• 개발을 잘 하는 습관 (By Sungho Kim 님)

• 개발자가 되고픈 어린 친구들에게... (By 신현묵 님)

• 프론트엔드 신입 개발자 역량에 대한 생각 (By 김요한님)

• 지원자도 회사를 평가합니다. 이렇게요. (By 유디v 님)

• 개발자의 평생공부 - [임백준 칼럼] 실력은 고통의 총합이다

• 개발자들이 개발쪽으로 가려고 하는 비전공자들한테 가지 말라고 하는 이유 (By botho 님)

  개발자의 현실 - 지옥편 느낌..👿

• 모두를 위한 컴퓨터 과학 (온라인 강의)

  하버드 대학의 인기 강의로 뽑히는 데이비드 말란 교수님의 CS50 강의를 한글 자막과 함께 무료로 볼 수 있어 여기에도 소개합니다.

• 초등학생에게 Git을 설명해본다면? (Git 1편) (By Eddy 님)

• 초등학생에게 Git branch와 merge를 설명해본다면? (Git 2편) (By Eddy 님)

• 누구나 쉽게 이용할 수 있는 Git 입문

• 스타트업 신입 취업성공에 영향을 미치는 요소 (By 라매개발자 님)

• 개발자 되는법 - 코딩 처음부터 배울때 뭐부터 해야해요? (By 테크보이 워니님)

• 개발자 되려면 어떻게 코딩 배워야 돼요? - 현직 개발자가 알려드립니다. (By 테크보이 워니님)

• 국내/한국 개발자 커뮤니티 모아보기 (By 오픈서포트님)

• 질문을 잘하는 개발자 (By 한재엽님)
  

• 가이드: 효과적인 온라인 질문법 (By 윤아님)

• 30년 개발자의 ‘개발자로 성공하기 위한 5가지 노하우’ (By 박종천님)

• 함께 일하고 싶은 사람 - 1. 업무 습관 (By PlanB님)

• 애자일 소프트웨어 개발 선언문

• 변수명을 지어주는 사이트

• [연봉] 2~3년차 개발자들은 연봉을 얼마나 받을까?

• 개발자는 ChatGPT 이렇게 활용하면 좋습니다

• 개발자 영어 공부 방법과 팁

• 코알못이 개발자가 되기 까지 (시리즈) (By 가든리님)

• 같이 일하고 싶지 않은 개발자 특 (By POLEE님)

• 좋은 엔지니어가 되려면 '경험' 쌓기가 중요합니다

• 프론트엔드 개발자가 API를 설계하는 이유

• 개발자가 콘텐츠에 진심이면 이렇게 됩니다

• 풀스택 개발자가 되어야 하는 5가지 이유

• 만화가에게 배우는 앱 개발

부디 많이들 도움을 얻으시기를 바랍니다. 😃

+) 엄청난 관심 감사드립니다..! 🙇‍♀️
앞으로 제 깃허브 레포지토리에 지속적으로 유익한 자료를 업데이트 할 예정이니,
관심 있으시다면 저장소에 방문하셔서 좋은 정보 함께 공유해가시길 바랍니다. 🙂

(가능하면 이 포스트에도 업데이트한 내용을 계속 반영하겠습니다.)

• 최근 업데이트 날짜 : 2024-04-12