[프론트엔드] 입문자 공부 방법, 로드맵, 취업 포트폴리오, 코딩 빨리 배우는 법, 코딩 유튜브 추천

유튜브의 "드림코딩 by.엘리" 님의 4개 영상을 보고 정리한 내용입니다.

이 채널은 제가 정말 좋아하는 코딩 채널이고, 유익한건 말할 것도 없습니다.
깔끔한 설명과 발음, 체계적인 커리큘럼이 무료로 듣기 미안할 정도입니다.

누가 물어보면 꼭 추천하는 채널인데,
제가 강의들으면서 필기했던 내용을 공유하러고 합니다.

프론트엔드 입문자를 위한 내용이고, 링크는 가장 아래에 걸어놨습니다.

---

공부 법

---

프론트엔드 공부 순서

• 누구나 쉽게 접근할 수 있는 영역
• 취미와 다르게 얼마나 공부해야하는지, 얼마나 깊게 파야하는지 로드맵으로 알아본다

어떻게 공부해나가면 좋을지?

1. 프로젝트단위로 공부해 나간다. 결과물이 있어야 함.
   • 문제해결능력을 키울 수 있다. 따라하기식 공부, 이론식 공부는 문제 해결을 연습할 수 없다.
   • HTML,CSS 기반으로 정적인 사이트, 반응형으로 UI요소가 가미된 예쁜 애들로 만들어라
   • 원하는 분야에서 필요로하는 기술로 포트폴리오를 만든다.
   • 책 다보지말고, 전반적인 이해를 하고 모르면 어디서 찾아볼지만 알아두고 직접 만들면서 실전에서 배움

     ---

2. 자바스크립트 공부하고 웹 API, 서버 통신하는 방법을 공부
   • 서비스에서 받아온 데이터를 동적으로 유저에게 보여주는 웹 사이트, 웹 어플리케이션을 만들어본다.
   • 순수 자바스크립트를 이용해서 웹 사이트, 웹 게임같은 걸 만든다.
   • (node.js를 이용해서 백엔드 구축은 보너스)
   • 리액트같은 라이브러리나 다른 프레임워크를 이용해서 똑같은 애들을 그대로 구현해본다.
   • 동일한 애들을 다른 라이브러리, 프레임워크를 이용해서 만들면서 전반적으로 어떻게 다른지 비교하면서 이해력을 높여간다.

     ---

3. 히든카드 프로젝트를 구상한다.
   • 여러 자잘한 프로젝트들을 모두 포트폴리오에 담기 힘들다.(허접함 ㅠ)
   • 가고자 하는 곳의 주된 스택을 이용하면 가장 좋다.
   • 독창적이고 창의적일 수록 가장 좋다.
   • 어렵다면, 매일 방문하는 웹사이트, 앱을 나열해보고 주된 최고의 기능 한 두가지는 무엇인지 정리하고, 자신있게 구현할 수 있는 기능, 주된 스택을 이용할 수 있는 애들을 구현한다.
   • 깔끔하고 좋은 코딩 습관을 보여주는 것도 중요하다.
   • 가독성 좋고, 유지보수 쉽고, 쉽게 확장 가능하고, 기능 변경 시 코드 수정이 최소화 등...

     ---

4. 프로젝트 예시
   1. 채팅 어플
      
      • 글, 사진을 주고받는 기능
      • 백엔드를 구현해도 좋지만, 미리 답을 지정해놓고 프론트만 구현해도 됨
      2. 페이스북
      • 사용자의 피시에 있는 사진을 불러와서 꾸밀 수 있는 간단한 웹어플리케이션
      • 사진 크기조정, 크롭, 드로잉, 스티커 붙이기
      3. 날씨 어플
      • API를 사용해서 사용자 위치의 날씨 보여주기
      • 즐겨찾기한 도시의 날씨들을 동시에 보여주기
      4. 간단한 게임
      • 벽돌쌓기, 점프해서 장애물 피하기 등

        ---

5. 프론트엔드 포트폴리오 아이디어 찾는 좋은 팁

https://codepen.io/ <<사이트 참고해서 좋은 코드보고 공부, 아이디어 얻기

CodePen

https://youtu.be/3xRpjLZUBeo

---

6. 온라인 강의 효율적으로 듣는 방법

• 책사서 완독하지 마세요!
• 미니 프로젝트로 그때그때 필요한 정보를 찾아 배운다.

1. 목표를 확실히 설정한다 : 웹 사이트를 만들겠어!
2. 일단 완강한다. 완강하고 필요없는지 아닌지 판단한다.
3. 노트 작성한다 : 새로운 기술, 팁, 트릭, 잊고싶지 않은 내용 등 적어둔다. 유용한 웹사이트 링크 적어둔다.
4. 직접 정리하고 찾아보며 배운다 : 이해되지 않는 부분, 참조링크 등 능동적으로 찾아보고 정리한다.
5. 강의의 퀴즈, 과제 등을 직접 풀고 비교한다.

---

출처 영상:
https://www.youtube.com/watch?v=NeEaTeYcFhE

https://www.youtube.com/watch?v=KJUdqPDAtTI

https://www.youtube.com/watch?v=3xRpjLZUBeo