프론트엔드 공부 첫 3개월 공부 방법

 

코딩 공부할 때 가장 답답할 때는 언어나 라이브러리 같은 기술이 이해가 안 될 때가 아니고 프런트엔드나 백엔드 같은 내가 원하는 목표에 도달하기까지 대체 어떤 순서로 어떤 방향으로 공부해야 할지 모를 때가 가장 답답하죠. 그래서 제가 여기 제목 밑에 소제목에 코딩 공부는 방향이 가장 중요하다고 써놓은 이유입니다.

 

지금부터 2024년 버전 프런트엔드 공부 로드맵을 해볼게요. 이 로드맵은 제가 여기 써놓은 대로 공부 처음 3개월 때 쓰면 되는 로드맵입니다. 3개월치 공부 분량이라고 보면 되겠어. 근데 여기서 중요한 건 뭐냐? 저는 다른 분들이 소개하는 프런트 핸드 공부 순서랑 조금 다르게 중간중간에 공부하면 안 되는 것들을 강조하면서 진행해 보겠습니다. 왜냐면은 인터넷에 찾아보면 이거 배워라 저거 배워라 하는 말들은 많은데 오히려 코딩 학습 초반에 많은 걸 배우다 보면 너무 어려워서 흥미를 잃어버리는 개념들이 많거든요. 

 

그래서 초반에 배워도 취업하는데 공부 대비 효율이 낮은 개념은 과감하게 쳐내겠습니다. 그럼 첫 번째 당연하지만 HTML CSS 자바스크립트를 배워야겠죠 이게 웹 기본이라고 할 수 있습니다. 여기서 가장 중요한 거는 이거예요. 누구나 이걸 배우라고 하지만 이 중에서 가장 뭐를 무게 중심을 많이 가져가서 배우라는 말은 잘 안 합니다. 제가 추천하는 비율은 HTML 20 CSS 20 나머지 60은 자바스크 이렇게 공부하시면 됩니다. 즉 자바스크립트를 중점적으로 공부해라 이거죠. 이유는 요즘에 사용하는 프런트 핸드 라이브러리나 프레임워크 다 자바스크립트로 HTML을 제어하는 게 대부분이기 때문에 자바스크립트를 꼭 알아야 합니다. 물론 CSS는 자바스크립트로 제어하는 게 있고 안 하는 게 있지만 하는 경우도 많으니깐요. 

 

그러기도 하고 프런트엔드 코드를 딱 열어보면 자바스크립트 코드가 코드 비율의 한 80% 정도는 차지 때문에 자바스크립트를 너무 당연하게도 가장 높은 비중으로 공부를 해야 합니다. 그리고 여기서 하지 말아야 할 것 정말 중요하죠.

 

타입스크립트 배우지 마세요. 타입스크립트 이때부터 배우면 바로 빠따 맞습니다. 타입스크립트는 자바스크립트 쓰다가 불편함을 해소하고자 나온 자바스크립트의 슈퍼셋이지 자바스크립트 쓰면서 불편함을 느끼지도 않았는데 그때부터 타임 스크 배운다 그러면 이거 왜 쓰는지도 모르고 안 됩니다. 그리고 또 하면 안 되는 거, 절대 HTML 태그 하나하나 기능 하나하나 달달 외우기 금지 이거 HTML 태그 막 메모장에 샤프로 써가면서 막 뭐 p 태그는 어떤 기능이 있네, h1 태그는 어떤 게 있네, 이거 지금 외우는 거 아닙니다. 그런 걸 검색하면서 코딩하는 겁니다. 

 

똑같아요. CSS도 기능 하나하나 외우기 금지 이거 구글링 치면서 하는 겁니다. 현지 개발자도 몰라요.

 

반대로 이때 해야 하는 거 이것도 중요하죠. 이때는 여러분들이 HTML CSS 자바스크 무언가를 만들어봐야 해요. 아무리 간단한 거라도 직접 코드를 써봐야 해요.

 

그래서 제가 추천하는 거는 여러 가지 아주 작은 프로젝트를 만들어보는 건데 투두 리스트를 만들어보는 거 그다음에 달력 만들기, 그다음에 계산기 만들기 그리고 마지막으로 퀴즈 풀기 만들기 이 4가지를 HTML CSS 자바스크 로만 만들 수 있거든요.

 

사실 이따가 배우는 리액트 스벨트 이것조차도 이 1번에 나오는 HTML CSS 자바스크립트로 어차피 다 만들어진 거기 때문에 그걸로 만들 수 있는 거는 이걸로도 만들 수 있어요. 그렇기 때문에 충분히 4가지의 미니 프로젝트는 할 수 있습니다. 이 꼭 해보세요. 이거 안 하고 다음으로 넘어가는 거랑 하고 넘어가는 거랑 다릅니다. 

 

그럼 두 번째 뭐 해야 될까요? 이제 1번을 했으면 뭔가 프런트엔드 하는 맛을 좀 봤을 거예요. 왜냐하면 버튼도 만들고 클릭하면 이벤트도 발생하고 색깔도 바뀌고 하니깐요. 여기서 중요한 거 근데 거기서 멈추면 안 되고 여기서 자바스크립트 더 배워야 됩니다. 왜냐면 1번에서 사용한 자바스크립트 레벨과 실제로 이제 앞으로 프런트 엔드 라이브러리 배우고 이럴 때 쓰는 자바스크 레벨이 좀 다를 거예요. 실제로 인터넷에 나와 있는 예시 코드도 좀 다를 거예요.

 

그래서 뭘 배워야 되냐 이때 ES6 문법 익숙해지기, 이때 구글의 자바스크립트 es6 문법이라고 치고 잘 배우시면 됩니다. 그리고 또 추천드리는 거 특히 Async/await 익숙해지기, 물론 이거 익숙해지는 거 쉽지 않을 거예요. 그래도 해야 합니다. 언젠가 넘어야 할 산이기 때문에 해야 합니다. 그리고 또 map, reduce, filter 익숙해지기 이것도 언젠간 배워야 하기 때문에 지금 배우는 게 나아요. 

 

이때는 자바스크립트를 거의 눈 감고 칠 수 있을 정도로 엄청 많이 작성, 엄청 많이 배워야 하는 시기입니다. 나중에 라이브러리 프레임워크 하면서 그때 자바스크립트 배우려 하면 오히려 더 뇌에 혼란 옵니다. 왜냐면 그때 자바스크 리액트나 Svelte 코드 안에 들어가 있기 때문에 눈에 그렇게 확 들어오지가 않아요. 근데 자바스크립트를 이 단계에서 좀 떼고 가면 그때 라이브러리에서 사용하는 자바스크 코드들이 뭔지 읽히기 시작합니다. 그래서 이때 꼭 자바스크립트를 아주 친하게 만들어야 돼요.

 

이때도 하지 말아야 할 거 제가 딱 정해드릴게요. 이것만은 하지 마라 똑같아요. 타임 스크립트 금지 절대 금지 이거 자바스크립 어떤 불편함이 있어서 타임 스크립트가 나왔는지 이해하기에는 아직 너무 빨라요. 타입 아직 조금만 더 참으세요. 절대로 타임 스크립트 강의 절대 사지 마세요. 그거 들어봤자 이해 못 해요. 왜 타입을 선언하는지 왜 이 놈을 쓰는지 왜 타입을 재선언하는지, 절대 금지. 

 

이제 코딩의 맛도 봤고 자바스크립트도 더 배웠겠다. 이제 드디어 타이밍이 왔죠.

 

 

 

 

프레임워크 또는 라이브러리 배우기

 

이때 할 거 심플하죠. 여러분들도 아는 거 뭐예요? 리액트 js 배우기 근데 여기서 나는 좀 미래를 한수 앞서 보고 싶다. 나는 React.js가 2024년에는 좀 수요가 줄어들 것 같아. 그리고 나는 수요가 늘어날 좀 라이딩 스타를 배우고 싶어 그런 사람은 Svelte.js까지 배워서 좋습니다. 그렇지만 리액트 js가 아직 채용 시장에서는 압도적으로 수요가 많기 때문에 사실 스벨트 JS를 프런트엔드 입문하시는 분이 공격적으로 배우라 하기에는 좀 저도 조심스럽고요. 이거는 이제 정말 여러분들이 호기심이 있다 하시는 분들 배워도 됩니다.

 

그다음 하지 말아야 할 거 뭐가 있을까요? Next.js 금지, 금지 아까 위에서 자바스크립트 배울 때 타입스크립 배우지 말라는 거랑 똑같아요. 넥스트 제이에스가 왜 나왔는지 이해하기엔 너무 섣불러요. 

 

SSR이 뭔지도 아직 모르고 아직 리액트 js 후 개념 다 이해하는데도 아주 뇌가 터질 거기 때문에 절대 금지 넥스트 제이스 강의 결제하지 마세요.

 

다음 하지 말아야 할 거 하나 더 상태 관리 배우기 금지, Redux 금지, 오맥스 금지, Mobx 금지, Redux vs Mobx 뭐가 좋아요? 구글링 금지. 처음에 리액트 제이스가 어떻게 돌아가는지 이때 어떻게 코드 짜는지도 모르는데 리덕스 코드 짜고 있고 이러면 금지, 이거 하다가 다 포기합니다. 언젠가 상태 관리가 필요할 때가 와요. 그때 배우는 거예요. 지식은 뭔가 문제를 해결하고자 하는 게 배우는 게 지식이지, 기술 지식이지 오히려 해결하고자 하는 것도 없는데 기술 먼저 배우면 절대 안 됩니다.

 

다음은 뭘까요? 이때쯤 되면 이제 3번까지 하면 뭔가 할 줄 알아요 뭔가 프런트 엔드도 이제 감이 와 리액트 js 감이 와 뭔가 만들 수 있을 것 같아. 근데 이 상태에서 진짜로 뭔가 할 줄 알려면 이걸 배워야 됩니다. 

 

RESTful API

 

레스트풀 API를 왜 배워야 되냐? 3번까지 배운 여러분들의 지식만으로는 실제로 실무에서 사용하는 듯한 서비스나 코드를 작성할 수 없어요. 왜냐하면 3번까지 배운 지식으로는 서버에 요청한 다음에 그 결과를 보여주는 방식의 프런트 엔드가 아니고 여러분들이 작성한 코드에 있는 데이터만 보여주는 그런 프로젝트일 거기 때문에 서버에 자원을 요청하고 그거를 응답받고 하는 일을 배워야 합니다. 예를 들어서 여러분이 네이버 메인 페이지에 들어가면 오늘의 뉴스가 나오잖아요. 그거는 네이버가 네이버 뉴스 서버에 오늘의 뉴스를 요청하고 그걸 받아온 다음에 보여줬기 때문에 가능한 거겠죠.

 

그러려면 뭘 배워야 된다? 레스트풀 API를 배워야 된다. 여기서 해야 되는 거, fetch 배우기 그리고 패치를 좀 감을 잡았다 싶으면 axios 배우기 구글링 치면 다 나옵니다. 

 

그리고 여기서 하지 말아야 될 거는, GraphQL 금지, 이거 그래프 ql 왜 쓰는지 이해하려면 아직 한 1년 더 해야 되기 때문에 여기서 그래프 ql 어떻게 하나요? 강의 듣고 이거 구글링 하고 그래프 ql 장단점 구글링 금지, 배우지 마세요.

 

그다음 사실 4번까지 했으면 여러분들이 뭔가 실제로 워킹하는 프로젝트를 만들 수 있어요. 이것만 가지고 못 만든다 그거 틀린 말입니다. 할 수 있고요.

 

그럼 여기서 뭘 해야 되냐 프로젝트를 만들어봐야 됩니다. 실제로 워킹하는 프로젝트를 만들어야 돼요. 그럼 여기서 4번까지 배운 지식으로 만들 만한 프로젝트 뭐가 있냐라고 하시면 첫 번째 가장 좋은 거 제일 편한 게 뭐냐 주식 시세를 받아와서 표시하기 이런 프로젝트가 있고요. 왜냐면은 4번에서 배운 레스트풀 API로 패치 악시오스 야후 파이낸스나 이런 퍼블릭 API로 통신을 해가지고 오늘의 코스피 시세 환율 조회 이런 걸로 해가지고 뿌리면 그게 또 한 번 프런트 핸드 한 바퀴 도는 거거든요. 

 

 

 

 

왜냐하면 대부분의 프로젝트가 그렇게 이루어져 있기 때문에 예를 들어서 유튜브를 한번 예를 들어 유튜브도 여러분 유튜브 컴 들어가면 영상의 목록이 나오죠. 근데 그게 영상의 목록이라는 데이터가 어디 있을까요? 서버에 있겠죠 그럼 서버에 있는 데이터 어떻게 가져왔을까요? 그게 바로 4번 지식입니다. 그래서 4번까지만 알아도 유튜브 대충 비슷하게 만들 수 있어요.

 

그리고 또 하나 할 만한 거 날씨 앱 만들기, 뭐냐면 날씨 퍼블릭 API 요청해서 이번 주에 날씨 쫙 뿌리는 거예요. 오늘 최저 온도 최고 온도 내일 최저 최고 그거 할 수 있습니다. 이렇게 해서 1번부터 5번까지 3개월 정도 동안 하면 이제 프런트 핸드가 어떻게 돌아가는 건지 내가 뭘 배워야 하는지 방향이 좀 명확해지실 거예요. 그럼 3개월에서 이제 익숙해졌다 싶으면 제가 x표 쳐놓은 거 있죠 그때부터 엑스 표시한 거를 배우는 겁니다. 

 

타입 스크립트를 배우기 시작하고, 넥스트 제이스라는 리액트 제이스의 프레임워크를 배우기 시작하고, 배우다 보니까 상태 관리가 좀 필요하네. 그러면서 리덕스를 배우기 시작하고 리덕스 쓰다 보니까, 이거 좀 구린데 왜 이렇게 짜야 되는 거지 하면서 모스 배우기 시작하고 이렇게 되는 거예요.