최근에 과외를 통해 많은 주니어 및 학생분들을 만나면서 공통으로 추천해 드리고 있는 자료들입니다! 도움을 많이 받으셨다고 하는 부분들만 모아서, 다른 분들께도 공유해 드리면 좋을 것 같아 글을 작성하게 되었습니다 :)

바쁘신 분들을 위한 요약

1. 언어는 책으로 프레임워크는 공식문서로 공부하길
2. HTML, CSS는 기초 개념만 공부 후 실습하며 학습하길
3. 아랫글에 공부자료, 책 추천 있음

HTML, CSS

개념만 잡고 실습하시면 좋아요 :)

HTML과 CSS는 기본 중의 기본이지만 배우기가 그리 재미있지도 않고 개인적으로 이론을 쭉 공부할 필요도 없다고 생각합니다. 그래서 저는 HTML과 CSS는 기초적인 개념 정도를 학습하고 무엇이든 직접 만들어 보고 검색하고 GPT에도 물어보며 배우는 것이 낫다고 말씀드립니다. 기본 개념 잡기에 좋은 링크를 남겨놓겠습니다.

HTML 기본 - MDN
CSS 기초 - MDN

Javascript, Typescript 등 언어

책으로 정석적으로 공부하시면 좋아요 :)

Javascript, Typescript는 언어입니다.

그렇다고 프로그래밍 언어를 영어와 같은 자연어(인간이 쓰는 일상 언어)라고 보긴 어렵습니다. 특정 단체에 의해 인위적으로 계속 변형되고 독특한 논리구조도 가지고 있기 때문입니다. 그래서 오히려 자연어보다 학습하기가 용이합니다. 논리적으로 설명되지 않는 것은 넣지 않기 때문에 이론적으로 학습하기 좋습니다.

그래서 저는 조금 재미없더라도 책으로 제대로 학습하기를 권해드립니다. 제대로 된 책 한 권만 읽어도 향후 몇 년은 충분할 겁니다. 책은 특정 쇼핑몰을 지정하고 싶지 않으니, 제목과 저자를 남겨놓겠습니다.

Javascript

"모던 자바스크립트 Deep Dive - 이웅모 지음"

저자 블로그 - PoiemaWeb

팁: 28~30장(Number, Math, Date 등)은 이런 게 있다는 정도로 이해하고 넘어가기, 46장 제너레이터 너무 이해 안 되면 넘어가도 좋음

Typescript

"이펙티브 타입스크립트 - 댄 밴더캄 저, 장원호 옮김"

타입스크립트 챌린지 - GitHub, 상당히 난도가 있으니 처음 공부하실 때는 추천하지 않음, 개념 공부 완료 후 타입스크립트 마스터가 되고 싶다면 추천

팁: 8장(마이그레이션) 부분은 필요한 상황이 생겼을 때 보아도 충분함

대신 주의할 점이 있습니다. 이론 서적이라는 것은 무조건 지루하고 지칠 수밖에 없습니다. 그래서 책을 제대로 완독할 수 있는 팁을 드리겠습니다.

1. 같이 읽으실 분을 구하시면 좋아요.

요즘 세상에 같이 읽을 분을 구하기는 너무 쉽습니다. 벨로그에 "6월 안에 딥다이브 부수실 분 구합니다" 와 같이 글을 올려도 좋고, 프론트엔드 슬랙 채널, 디스코드 방, 스터디 구하기 사이트 등 매우 많기 때문에 1명쯤은 의지만 있으시다면 반드시 구하실 수 있습니다.

책 읽을 때 팁을 드리자면, 골라 읽지 말고 한 장을 끊어 읽지 마세요. 위 책은 흐름이 짜임새 있는 좋은 책입니다. 앞에서 궁금한 내용을 만들고 바로 뒤에서 설명을 해주는 구조이기 때문에 갑갑하더라도 순서대로 읽어보세요. 그리고 한 장(챕터)을 이틀에 나누어 끊어 읽지 말고 앉은 자리에서 완독하시는 것이 내용 이해하는 데 큰 도움이 되실 겁니다.

2. 읽고 서로에게 수업(토론)하시면 좋아요.

러버덕 디버깅이라는 말이 있습니다. 코딩하다 막혔을 때 러버덕(고무 오리)를 보면서 설명하다 보면 스스로 해결책을 찾게 된다는 방법론입니다. 사람과 함께하면 효과가 배가됩니다. 같이 읽으시는 분과 분량을 현실적으로 정하고 그 분량에 대해서만큼은 (모르는 내용이 없도록) 철저히 공부하고 토론하시면 좋습니다.

토론 팁을 드리자면, 끊임없이 반박하세요. 서로에게 내용에 대한 설명을 번갈아 가며 하면서 진행하면 좋은데, 조금이라도 내가 이해한 내용과 다르거나 설명이 빈약하다면 바로 끊고 토론하고 질문을 던지는 것이 핵심입니다.

React, Next.js 등 프레임워크

책으로 공부하는 것을 추천해 드리지 않아요!

프레임워크 책을 써주신 모든 저자님께 죄송합니다. 훌륭한 책들이 많습니다. 하지만 저는 프레임워크를 책으로 공부하는 것을 추천해 드리지 않습니다. 프레임워크는 끊임없는 버전 업이 일어나고 그 과정에서 Breaking Change(이전 버전과 호환되지 않는 변화)가 일어나기도 합니다. 책은 구조상 그 속도를 맞추는 것에는 한계가 있기 때문에 프레임워크 책들은 몇 년만 지나도 호환이 되지 않는 내용이 들어있는 경우를 심심치 않게 볼 수 있죠.

따라서 공식 홈페이지와 메인 개발자의 블로그를 통한 학습을 추천해 드립니다. 특히나 React는 18 버전으로 올라가며 공식 문서가 정말 공부하기 좋게 바뀌었습니다. React 한국어 페이지는 아직 이전 버전으로 제공되고 있으니 아래 링크를 참고하시면 좋을 것 같습니다.

React

React 공식 홈페이지 - Quick Start
React - Kent C. Dodds 의 블로그

Next.js

Next.js 공식 홈페이지 - Learn

Tanstack Query(React Query)

Tanstack Query 공식홈페이지 - Guide & Concepts
React Query - TkDodo의 블로그

모든 라이브러리를 올려드리지 못하는 점 양해 부탁드립니다.

공식 문서 학습 팁을 드리자면, 번역기를 돌려서라도 원문(영어)으로 보세요. 아마 이 글을 읽으시는 분들은 영어를 아예 이해하지 못하실 것 같지는 않습니다. 보다가 모르는 부분을 한국어 블로그들을 찾아보더라도 원문을 보며 공부해 보세요. 완전히 학습 후 여유가 된다면 직접 번역을 해서 기여해 보는 것도 좋은 경험이겠죠 :)

📖 함께 읽으시면 좋은 글
8년 차 개발자가 취준생님들에게 전하고 싶은 말

❤️ 하트를 눌러놓으시면 벨로그 읽기목록에서 언제든 찾아 읽으실 수 있으십니다. 다음에 더 유익한 글로 돌아오겠습니다.

🐱 코딩냥이 사이트 목록
📺 냥피티 유튜브: GPT 와 관련된 콘텐츠를 올립니다.

+ 추가된 내용

23.08.10
첫 글인데 생각보다 많은 분이 이 글을 좋아해 주셔서 감사하네요.. 앞으로 더 좋은 글 많이 작성해 취준생 및 주니어분들께 도움을 드릴 수 있도록 노력하겠습니다 :)

23.08.19
책으로 학습하는 것이 익숙지 않아서 시행착오를 겪고 계신다는 이야기를 들었습니다. 많이 막힌다면 반드시 토론할 분을 구하세요. 내성적이거나 같이 할 분을 구하기 힘들다면 카메라를 켜고 본인이 챕터 내용을 수업하는 것을 녹화해서 유튜브에 공개로 올려보시는 것도 비슷한 효과를 낼 수 있습니다 :)