부트캠프 졸업 :: 80일 일지 정리 feat. 프론트엔드 로드맵

엘리스 SW 엔지니어트랙 졸업

80일간의 프론트엔드 일주

 

 

80일간의 프론트엔드 일주

엘리스 SW엔지니어트랙으로

80일간의 웹의 세계를 무사히 완주했다.

재밌게 봤던 쥘베른의 '80일간의 세계일주'과 같은 포맷이 되니 괜히 좋다

 

세계 일주를 겉핥기로 했던 것과 달리

부트캠프에서 배운 스킬을 제대로 사용하고 싶기에

16주간의 배운 내용을 정리해보려고 한다

 

 

목적은

1. 배운 정리 내용

2. 프론트엔드 공부 로드맵 for 독학러

3. 배운 기술 중 강화할 기술 선택

4. 새롭게 배우고 싶은 기술  

 

 

요약(TL;DR)

1. HTML, CSS, Git

2. JavaScript, DOM, Node(개념)

3. 프로젝트: 간단 자기소개 페이지

4. TypeScript

5. Node.js(백엔드)

6. 프로젝트: JavaScript로 사이트 만들기

7. React, Redux

8. styled-components, CSS Framework

9. 프로젝트: 리액트로 사이트 만들기

 

 

16주간 뭘 배웠지?

1주차 :: 웹 프로그래밍 기초

⚔️ 스택: HTML, CSS, Git

 

웹에 대한 기초와 버전 관리를 위한 Git를 알아봤다

인상적인 내용은

웹의 도사처럼 느껴지는 이고잉님의 강의였다

개인 프로젝트, 포트폴리오, 지식 정리, 커뮤니티 활동,

버전 관리를 하면 인생이 달라진다던가 인상이 남는다

 

 

2주차 :: 자바스크립트 1️⃣

⚔️ 스택: JavaScript

 

웹 개발시 가장 중요한 자바스크립트 시작!

중요한 만큼 3주 동안 자바스크립트를 단련했다

첫 주에는 자바스크립트의 정체, 기초 문법을 배웠다

 

🔔 프로젝트: 자기소개 페이지

2주차 마무리로는 자그마한 프로젝트를 했다

HTML, CSS, JavaScript로 간단한 자기소개 페이지 만들기

 

 

3주차 :: 자바스크립트 2️⃣

⚔️ 스택: JavaScript, Node.js(개념)

 

조금 더 깊이 자바스크립트로 풍덩

DOM과 노드의 개념부터 시작해서

Scope, Hoisting, 실행컨텍스트(Execution Context), ES6 문법, Closure,

 

this 조작 삼총사 bind, apply, call 등 알아보고

그리고 Node가 무엇인가 배웠다

중요한 것은 위의 어려워 보이는 용어에 쫄지말자!

 

 

4주차 :: 자바스크립트 3️⃣

⚔️ 스택 :: JavaScript

 

지금까지 배운 어려운 이론을 몰라도 괜찮다는

이고잉님의 격려로 시작된 4주차

 

이번 주차의 핵심은 비동기(Asynchronous)

비동기적으로 사용하기 위해

통신 방법인 fetch, axios

비동기 처리 순서를 조종하기 위한 Promise, async/await 

가져오는 데이터인 Json

그리고 비동기 처리 방법을 뜻하는 Ajax

HTTP, REST API가 무엇인지 알아보는 시간을 가졌다

(역시 용어에 쫄필요 없다. 필요에 의해 태어난 간단한 개념을 가지고 있다)

 

 

5주차 :: 타입스크립트

⚔️ 스택 :: TypeScript

 

인기 많은 타입스크립트 시작!

왜 타입스크립트가 나왔을까 하면 협업을 위해 나온 것 같다

미래의 나 그리고 남들이 보기 좋은 클린 코드를 위하여.

Interface, Generic 위주로 배웠다

(1주동안 배운 내용이고 복습을 안해서 대부분 까먹었네.. 복습!)

 

 

6 & 7주차 :: Node.js 백엔드 찍먹

⚔️ 스택 :: Node.js, Express.js, MongoDB, Mongoose, Sequelize, Pug, PM2, GraphQL, OAuth, SWT, Passport.js, Nginx

 

6주차와 7주차는 백엔드를 알아봤다

Node.js의 개념과 할 수 있는 것들, 서버 구성, npm, npx 등 해보고

Docker의 개념도 알아보고,

프레임워크 Express,

MongoDB 그리고 프레임워크 Mongoose를 배우는듯

백엔드 사이드를 배웠지만

후루룩 넘어가서 현재는 거의 까먹은 상태

 

 

8 & 9주차 :: 팀 프로젝트

⚔️ 스택 :: HTML, CSS, JavaScript

 

지금까지 배운 내용으로 팀 프로젝트를 진행했다

듀토리얼 헬에 빠지지 않고, 배운 내용을 써먹기엔

개인 프로젝트건 팀 프로젝트건 해야된다

 

 

10주차 :: 대망의 리액트 1️⃣

⚔️ 스택 :: ReactJS

 

개인적으로 가장 기대하던 리액트 시작!

리액트가 왜 나왔는가?

Class대신 왜 functional로 사용하는가

... 등

기본적인 개념부터 시작해서

Props, State, Hooks 까지 알아봤다

 

 

11주차 :: 리액트 2️⃣

⚔️ 스택 :: ReactJS, styled-components

 

리액트 2주차에는

state와 같이 렌더링 방식을 좀 더 잘 이해하려고 노력했다

스타일을 위한 리액트 스타일 방법을 알아봤고

(뒤의 팀 프로젝트에는 styled-components를 사용했다)

리액트 라우터, CORS 정책, 비동기도 알아봤다

 

 

12주차 :: 리액트 3️⃣

⚔️ 스택 :: ReactJS, Redux, Jest

 

리액트 3주차에서는 상태(state) 관리에 중점을 맞췄다

렌더링에 영향을 주는 만큼 이 녀석 제대로 이해하려고 노력했다

상태 관리를 도와주는 Redux라는 자바스크립트의 기술도 알아봤다

3주차의 마지막은 테스트 코드 작성을 알아봤고,

테스팅 프레임워크 Jest도 잠깐 실습했다

 

 

13주차 :: 대망의 리액트 마지막 

⚔️ 스택 :: ReactJS, Redux, Material UI

 

리액트, 리덕스에 대해 강화로 시작을 하고,

배포를 위해 CSR과 SSR의 차이

SSR의 프레임워크 Next.js에 대해 살펴봤다

 

상품을 만들기 위해 기술만 아닌 스타일도 중요하다

그를 도와주는 UI, CSS 프레임워크도 살펴봤다

Tailwind(추후 살펴볼것), Material UI, styled-components 등

 

가볍게 JavaScript로 작성된 리액트를 TypeScript로 변환하는 것도 알아봤다

 

🔔 개인 프로젝트: Google Search Pro

틈틈이 리액트로 개인프로젝트 진행했다!

 

 

14 & 15 & 16주차 :: 팀 프로젝트

⚔️ 스택 :: ReactJS, styled-components

 

지금까지 배운 모든 것을 쏟아서 팀 프로젝트를 3주간 진행했다

기획, 디자인, 개발까지 모든 프로세스를 팀원들과 함께 나아갔고,

이 글을 쓰기 3일 전에 마무리했다!

 

 

마무리

이렇게 80일간 웹 세계일주를 정리해봤는데

그럼 이제 할 일을 다른 포스트에 정리해야겠다