• 유튜브 라매개발자님 영상을 보고 정리해서 블로그에 포스팅하는 것입니다!
• 기본적인 HTML, CSS의 지식이 어느정도는 있는 상태에서 진행하는 공부 순서입니다🙆‍♂️

💡 공부를 진행하면서 공부 순서가 변경될 수 있습니다!

제가 진행할 공부 순서를 먼저 정리하고 한 주마다 진행 상황을 블로그에 올리겠습니다!

<공부순서✍>

1. 클론코딩

클론코딩 할 사이트 : airbnb, banksalad
클론코딩을 하게 되면 웹사이트의 구조 및 필요한 속성들을 알 수 있게 됩니다!

바로 클론코딩을 하기 힘드신 분들은 노마드코더에 코코아톡 클론 강의을 보시는 것을 추천한다고 하네요!(유료입니다..!)

2. JS + 웹 브라우저에 대한 공부 [꾸준히 공부💪]

• ✍ 백준으로 자바스크립트에 대한 공부
• 💻 JS의 배열 메소드에 대한 공부 (ex/ map, fiter, reduce..)

저는 백준으로 알고리즘에 대한 공부를 하고 JavaScript에 대한 내용은 "자바스크립트 완벽 가이드 개정 7판"이라는 책을 가지고 있어 이 책으로 공부를 하려고 합니다!

웹 브라우저에 대한 공부는 velog에 있는 내용과 구글에 검색을 하면서 공부를 하려고 합니다 velog만 봐도 정리를 정말 잘 해주셨더라고요🤲

3. 바닐라 자바스크립트 and React로 CRUD 기능 구현하기💻

라매개발자님은 영상에서 React로 먼저 구현해보고 웹사이트에서 어떤 기능을 할 수 있다를 알고 바닐라 자바스크립트를 사용해서 개발하는 것을 추천하셨지만..!

저는 바닐라 자바스크립트로 먼저 구현해 보고 난 후에 React로 구현해볼 예정입니다.


왜냐하면 바닐라 자바스크립트로 먼저 구현하면 조금 더 시간이 걸리고 힘들겠지만 어렵게 먼저 구현해 보고 React로 구현을 하면 '아..! 이래서 React를 쓰는구나..! React로 하면 이렇게 좋구나!'라는 생각이 들 거 같아서입니다😀😆

✅ 바닐라 자바스크립트란🍌?!

프레임워크 등을 사용하지 않고 순수한 JS로 개발하는 것이고, 영상에서 추천하는 학습 자료는 벨로퍼트님 블로그, 책, 강의정도가 있다고 합니다!!

✅ CRUD란?!

쉽게 말하면 Create는 게시판에 게시물을 만드는 작업이고, Read는 작성한 글을 조회하는 것이고, Update는 작성한 글을 수정하는 것이고, Delete는 작성한 글을 삭제하는 작업입니다!
표 출처

4. 프론트 + 백엔드 연동

여러 블로그와 유튜브를 보시면 프론트엔드 개발자도 백엔드의 기초적인 개념은 알고 있는 게 좋다고 다들 말씀하시고, 저도 역시 그렇게 생각해요! 왜냐하면 저희가 개발자가 된다면 혼자만 프로젝트를 진행하는 것이 아니라, 팀으로 활동👨‍👨‍👦을 하기 때문에 전체적인 프로젝트 흐름을 기본적으로 알고 있어야 하고, 백엔드에 대한 내용도 알고있어야 개발하는데 편할 것 같아서입니다!!

✅ 공부내용
✔ 백엔드 API서버 구축 / 데이터베이스에 정보 저장
✔ 회원가입 / 로그인 기능 / 기본적인 토큰 기반 인증 기능 구현 (ex/ 로그인 한 사람만 글 작성, 작성한 사람만 글 수정 가능하게 구현) 정도가 있습니다!

✔ 추천 자료로는 "라매개발자 홍당무마켓"이 있다고 하네요!

5. 상태관리 라이브러리✍

1. 이전까진 useState만 썻다면 useContext + useReducer로 만들기
2. Redux로 만들기

아직 여기까지에 대한 내용은 정확히 알지 못해서 공부를 하면서 여기까지 왔을 때 공부해서 내용을 더 추가하도록 하겠습니다!

✔ 추천자료로 벨로퍼트님 자료들 / 생활코딩이 있다고 합니다!

6. 제대로 된 팀 프로젝트

이제 5. 상태관리 라이브러리까지 공부를 진행하였다면 팀 프로젝트를 통해서 경험을 쌓는 것이 좋을 것 같습니다✨ 저는 웹에 관심이 있는 친구들을 모아 팀 프로젝트👨‍💻(쇼핑몰🛒 만들기)를 진행하려고 합니다!

혹시나 주위에 웹이나 프로그래밍에 대한 관심이 있는 친구가 없다면 영상에서는 (사이트 : okky, lctp)를 사용해서 경험 쌓기를 추천하더라고요!

✅ 제대로 된 팀 프로젝트란?

• git, github를 사용
• README 파일에 설명( 배포 링크도 포함 )
• PR, 코드리뷰
• 쓰고싶은 기술들을 잘 정리

---

😁모두들 재밌고 열심히 공부를 해서 프론트엔드 개발자가 됐으면 좋겠습니다!!😁
🙆‍♂️여기까지 정리하고 공부를 진행하면서 추가할 내용이 있으면 더 추가하고 수정하도록 하겠습니다!🙆‍♂️