단 6개월만에 풀스택 개발자가 되는 과정
Hello World부터 CSR까지
주말은 쉬는 날이 아니라 한 주의 끝일 뿐이다.
1개월 차
HTML과 CSS를 배운다.
1개월 차에는 앞으로도 계속해서 써먹을 기초를 탄탄히 다지는 단계다.
여러 태그의 특징과 역할을 배우고 CSS의 활용법을 배운다.
반응형과 애니메이션을 쉽게 다루고 HTML 요소를 화면에 자유자재로 배치할 수 있도록 반복 연습한다.
addEventListener로 "click", "submit" 등의 이벤트를 등록할 수 있다는 것만 알고 넘어가면 된다.
HTML, CSS 강의는 너무 많아서 뭐가 좋다고 추천하기 어렵다.
무료 강의도 많으니 좋은 리뷰가 많은 강의 하나만 완강하도록 하자.
2개월 차
Javascript의 기초를 배운다.
지금부터 진짜 프로그래밍을 하기 시작한다.
변수, 함수, 조건문, 반복문, 배열, 객체의 정의와 그 활용법을 배운다.
저번 달에 얼핏 봤던 addEventListener부터 시작해 DOM 활용법을 배운다.
Javascript 또한 무료에다가 좋은 강의가 너무나도 많다.
3개월 차까지는 아래의 강의로 공부하면 된다.
9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스 | 인프런
이외에도 간단한 클론코딩 강의를 여럿 수강해 DOM 활용에 익숙해져야 한다.
실제 서비스 중인 사이트의 메인 화면을 비슷하게나마 만들 수 있게 될 때까지 반복 연습한다.
애플 웹사이트 인터랙션 클론! | 인프런
3개월 차
Javascript의 심화를 배운다.
3개월 차는 찾아보고 생각하고 이해하는 과정이다.
Javascript 런타임에서 Stack, Web API, Event loop, Queue를 활용한 동기, 비동기 처리의 흐름을 간단한 그림으로 그릴 수 있을 정도로만 이해한다.
Javascript 비동기 처리와 의존성, 클로저, this 바인딩 등 심화된 내용을 배운다.
OSI 7계층과 HTTP가 무엇인지 그 역할과 Rest API에 대해 배운다.
Request와 Response에 사용되는 Header와 Body의 형식과 활용법을 대략적이나마 배운다.
알고리즘 문제 사이트에 들어가 성공률 높은 문제를 푼다.(ex. 프로그래머스 성공률 60% 이상 문제)
막무가내로 코드를 먼저 작성하지 말고 문제를 해결할 수 있는 로직을 머릿속으로 이미지한다.
알고리즘까지 공부하면 좋겠지만 시간이 없다면 나중에 해도 된다.
테스트 케이스는 성공했는데 제출에 실패한 경우, 제출에 성공할 수 있도록 또다른 새로운 로직을 생각해본다.
4개월 차
Node.js를 배운다.
드디어 서버를 배우기 시작한다.
Express의 내부 동작원리를 대략적으로 파악하고 REST API를 활용한 요청을 처리하는 법을 배운다.
ejs나 nunjucks 등의 템플릿 엔진을 활용해 SSR을 구현한다.
Controller, Service, Repository를 나눠 각 과정 별 요청을 처리하는 법을 배운다.
데이터베이스를 생성하고 Repository에서 활용하는 법을 배운다.
SQL문을 자유자재로 활용할 수 있도록 반복 연습한다.
요청이 Controller에 들어가기 전 미들웨어를 활용해 요청을 사용하기 쉽게 가공하는 법을 배운다.
아래의 강의가 가격도 저렴하고 후기도 좋고 구성도 괜찮아 보여 추천한다.
Node.js 교과서 - 기본부터 프로젝트 실습까지 | 인프런
5개월 차
헤더와 JSON 요청, 응답을 적극 활용한다.
5개월 차는 Frontend server와 Backend server를 분리해 만들고 그 이유를 배운다.
토큰을 생성하고 저장, 활용하는 법을 배운다.
Postman을 활용해 Backend server의 정상 동작 여부를 체크하는 법을 배운다.
socket.io를 활용해 local에서 간단한 채팅 서비스를 구현해본다.
외부 API를 활용하기 위해 소셜 로그인 커뮤니티 서비스를 만들어본다.
Typescript의 타입과 형식만 간단히 공부한다.
6개월 차
React와 NestJS를 배운다.
6개월 차는 생산성을 올리기 위한 프레임워크를 사용한다.
React는 상태와 컴포넌트를 활용하는 법을 배운다.
React router를 활용해 CSR을 구현하는 법을 배운다.
NestJS는 TypeORM과 데코레이터를 활용해 요청과 응답을 쉽게 처리하는 법을 배운다.
추가로 커스텀 데코레이터를 만들어 필요 데이터만 활용하는 법을 배운다.
Swagger를 활용해 API를 공유하는 법을 배운다.
React와 관련된 비싸고 좋은 강의가 많지만 아래의 무료 강의를 통해 먼저 개념을 익히고 해당 강의를 수강하면 도움이 될 것이다.
React 비기너 | 인프런
웹 게임을 만들며 배우는 React | 인프런
아래는 NestJS 추천 강의이다.
NestJS REST API 백엔드 완전 정복 마스터 클래스 - Part 1 NestJS Core | 인프런
마치며
지금까지 내가 공부해 온 과정을 기억나는 대로 나열해보았다.
그러나 아직 이정도로는 제대로 된 풀스택 개발자라고는 할 수 없다.
Next.js를 활용한 SSR과 Github Action과 AWS를 활용한 CI / CD 등 이외에도 공부해야 할 것이 많다.
다만 어떤 서비스를 생산성있게 만들기 위한 최소한의 개발 능력은 이 정도라고 생각해 멋대로 풀스택 개발자 되는 법이라는 제목을 지어봤다.
사실 나는 6개월 차에 React를 배우기보다 Svelte와 SvelteKit을 공부해 간단한 프로젝트를 진행했다.
React를 공부하기 시작한 것은 Svelte 프로젝트를 마치고 난 뒤의 일이다.
하지만 Svelte보다 React를 먼저 공부하는 편이 취업에서도, 다양한 라이브러리를 활용한 확장성에서도, React Native로 앱개발까지 가능한 범용성도 생각해 React를 공부하도록 살짝 수정을 가했다.
공부를 하면 할수록 배울 것이 많다는 것을 느끼고 있는 요즘이다.
지난 프로젝트의 코드를 보면 왜 이런식으로 작성했는지, 그 당시의 내 생각을 들어보고 싶다.
앞으로도 지금의 나를 부끄러워 할만큼 더 뛰어난 개발자가 되기위해 노력하겠다.
