[코딩 공부] 프론트엔드 개발자 로드맵/내가 영국 코딩 부트캠프에서 배운 것

 

6월 27일 Northcoder에서의 수업이 끝났다. 4월 30일부터 시작했는데 벌써 끝나다니!!!! 매일 8시 20분부터 5시까지 코딩 수업은 코로나와 함께 내 시간을 순삭 시켰다.

 

매주마다 새로 배운 개념을 정리해서 공유하려고 했는데, 혼자 코딩 공부 따라가는 것도 벅차서 그렇게 하지는 못했다. 그래도 배웠던 개념들을 리스트 별로 정리하고, 프런트 앤드 개발자가 되려면 어떻게 독학을 해야 하는지 내가 배운 순서대로 로드맵을 공유한다. 다른 프론트 엔드 개발자 로드맵도 꼭 구글에 검색해서 찾아보길 바란다. 

내가 찾은 굿 로드맵!

https://github.com/kamranahmedse/developer-roadmap

kamranahmedse/developer-roadmap

---

1. Git / Github (version control)

   Git은 코딩 독학하자마자 다운로드하고, Github은 바로 가입하자.  

2. HTMl / CSS

   지난 포스트에도 적었듯이 HTML, CSS는 기본으로 공부를 시작해야 한다.

   HTML 코드 작성 시 제일 강조했던 부분은 Semantic(의미론적) order였다. 간단하게, 각각 태그를 웹페이지 전체에서 의미에 맞게 잘 써야 한다는 것이다. (semantic HTML: https://www.internetingishard.com/html-and-css/semantic-html/)

   CSS에서 가장 강조 한것은 CSS box 였다.(Grid, Felx 등, 포스트 하단에 공부하기 좋은 웹사이트 확인!!) 노쓰코더에서는 HTML/CSS를 깊이 가르쳐주지는 않았지만, 기본중에 기본이니 HTML/CSS로 정적인 웹사이트 만드는것을 연습해보자. 그래서 HTML과 CSS가 본인에게 익숙해졌다 싶을때 JavaScript로 넘어가자.(나는 리액트로 웹어플케이션을 만들다가 자꾸 기본적인 부분에서 막혀서 다시 HTML,CSS를 공부하고 있다. 나처럼 되고 싶지 않으면 익숙해진 후 다음 스텝으로 넘어가자)
3. JavaScript

   자바스크립트 기초 문법(Array, Objecgt 등) 및 Higher order function, Asynchronous code, Classes, Recursion 등 개념을 익혀야 한다. 자바스크립트 나에게는 아직도 너무나 어렵고.. 위의 나열한 개념들은 아직도 이해 안 되는 부분이 많다. 현재 계속 복습 중이다. 

4. Testing - Test Driven Development (TDD)

   본인이 자기 코드에 오류가 없는지 테스트하면서 코드를 작성해나가는 방법이다. Jest 외에도 다른 테스팅 코드(mocha, chai 등)가 있는데 나는 Jest만 배웠다. 

5. API

   어떻게 프론트 엔드에서 서버에 있는 데이터를 가지고 오는지 배웠다. 이걸 배울 때 개인적으로 너무 신기했다. 인터넷 웹페이지에 있는 데이터들을 실제로 내가 끌어다 가지고 와서 내 로컬 서버에서 확인이 가능하다.

6. DOM manipulation

   웹페이지를 만들 때 dom manipulation으로 원하는  페이지 구축이 가능하다. 여기서 Object, Array method가 사용이 된다. 그래서 자바스크립트의 기본기가 아주 중요하다.

7. React (frame work)

   Dom manipulation을 하면 이게 얼마가 힘든지 느낀다.(나도 React가 있다고 해서 제대로 Dom manipulation을 안 해서 얼마나 힘든지는 모른다만, 리액트로 할 것을 돔으로 하면 5배의 코드를 작성해야 한다고 한다^^)

   그때 짜잔! 등장하는데 리액트이다. 처음에 리액트를 배우고 익히느라 너무 화가 났다. 기존에 배웠던 문법들과 너무 다르게 생겨서 적응하는데 시간이 걸렸지만, 적응하면 괜찮아진다.

8. CSS frame work

   CSS는 노쓰 코더에서 중점적으로 배우지 않았는데, CSS frame work에 대해서 알아보면 좋겠다. 나는 bootstrap, bulma 등을 조금 사용해봤다.(아주 조금) 지금  React 에다가 같이 사용하려고 하는데 아주 헷갈린다.

9. Portfolio

   내가 지금 만드는 웹 애플리케이션은 백엔드를 CMS(Strapi, Heroku)로 구축을 하고 내가 만든 백엔드를 API로 데이터를 가지고 와서 웹페이지를 React로 구축하는 것이다. React는 단일 페이지(SPA)로 밖에 되지 않아서 여기서 여러 페이지로 이동을 하고 싶으면, Router/link를 사용하면 된다.

   Router도 처음에 알고 너무 신기했다. 원래 HTML으로 여러 페이지를 작성해 각각의 페이지에 링크를 거는 식으로 다른 페이지로 이동을 했다면 Router를 사용하면 단 하나의 HTML 페이지에 여러 React component 코드를 작성하여 각각의 component로 이동이 가능하다. 

   (Reach/Router 공식 웹사이트: https://reach.tech/router)

 

** CSS flex, grid 개념 익히기 좋은 사이트들, 게임으로 배워서 재미있다.

https://flexboxfroggy.com/

Flexbox Froggy

 

https://cssgridgarden.com/

Grid Garden

 

---

 

혹시 영국이나 다른 해외에서 개발자가 되고 싶다면(나도 아직 되지 못했지만) 링크드인으로 인맥구축을 계속 꾸준히 해야 한다. 그리고 트위터에 #100DaysofCode #codeLife #CodeNewbie 등 태그를 사용해서 자기가 얼마나 열심히 코딩 공부를 하고 있는지 공유하고, 코딩을 독학하는 사람들과 인맥을 널리 쌓을 것을 추천한다.

한국에서 트위터를 한적은 한 번도 없는데 영국에서는 굉장히 활성화되어있는 것 같다. 나도 지난주부터 시작해서 내가 매일 뭐 공부하고 있는지 공유하고 있다. 

 

내가 어쩌다가 이 곳에 발을 들인 걸까..? 배우면 배울수록 스트레스를 받지만 에러 하나가 풀리면 그게 또 그렇게 좋다