벌써 프론트엔드 데브코스 1차 단위기간이 끝났습니다.
그동안 죽어라 블로그 글을 안써왔기 때문에 저의 심심한 블로그를 채워보고자 기록챌린지를 신청했는데요.
기록 챌린지란 1차 단위기간 동안 제가 배운 내용을 요약하는 활동입니다.
아니나 다를까, 현재 저는 마감 임박해서 부랴부랴 이 글을 쓰고 있습니다.
아무튼 시작하겠습니다!
1주차 ~ 2주차
(10월 17일 ~ 10월 28일)
1) 바닐라 자바스크립트 주요 문법과 자바스크립트 동작 원리, DOM과 Virtual DOM 개념
2) 브라우저 렌더링 원리, 유니코드 등 기본 CS 지식 일부
3) 자료구조, 알고리즘 학습
4) 코딩테스트 대비 문제 풀이
저는 솔직히 말해서 자바스크립트 문법은 더 볼 것도 없다고 자만했습니다. '하, 나 참. 1주차는 영상 틀어놓고 자도 되겠구만.' 이랬는데요. 얼마 지나지 않아 자바스크립트 메모리 동작 원리와 메모리 구조를 1일차에 마주하면서 저의 콧대는 빈대떡이 되어버렸습니다.
제목은 자바스크립트의 주요 문법이라고 되어 있으나, 강의 내용에는 자바스크립트 문법과 동작 원리부터 넓게는 CS 지식까지 모두 포함되었습니다. 한 예로, 저는 컴퓨터 시간이 동작하는 원리를 이번에 처음 알게 되었어요. 이외에도 유니코드, 암호화, 자료구조, 함수형 프로그래밍 방법론 등 어디 기술 면접에서 나올 법한 내용을 박박 긁어주었습니다. 강의 들으면서 '아, 이거 질문으로 나오면 난 광탈이겠구나.'라는 생각이 많이 들었습니다.
자바스크립트로 자료구조와 알고리즘을 구현하는 건 기본이었습니다. 자료구조로 강의 주제가 넘어가면서 알고리즘 문제 또한 풀었는데요. 저는 단어 퍼즐 이라는 문제를 하루 종일 고민하다가, 풀이 슬쩍 보고 또 고민을 했고, 해설로 올라온 코드를 또 하루 종일 들여다보면서 겨우 이해를 했습니다.
여담이지만 고차 함수를 자유 자재로 다루시는 강사님의 코드는 정말 마법과 같아서, 저의 코드와 비교할 때면 유인원과 사람의 차이를 확인하는 기분이 자주 들었습니다.
1주차 과제
간단히 과제 주제만 말씀드리자면, 하나는 tree 순회 문제였고 다른 하나가 trie를 활용해서 간단한 기능을 구현하는 문제였습니다.
개인적으로 강의 내용도 좋았지만, 과제와 코드 리뷰 기간이 정말 유익했습니다. 과제가 github으로 제출되기 때문에 팀원들끼리 리뷰를 남길 수 있었는데요. 멘토님과 팀원들의 황금같은 리뷰를 보면서 더 좋은 코드에 대해 고민할 수 있었습니다. 특히 멘토님께서 아주 작은 부분까지 세세하게 리뷰를 남겨주셔서 많은 도움을 얻을 수 있었습니다.
github으로 과제가 제출되는 방식 때문인지 진유림님의 git 특강도 있었습니다. 저는 git으로 프로젝트를 몇 번 해봤기 때문에 기본적인 내용은 알고 있었지만, 강의 후반부의 stash나 cherry pick은 잘 몰랐던 개념이었습니다. 특히 stash는 정말 유용하게 쓸 수 있을 것 같았어요. 그동안 새로 코드를 반영하느라 작업하고 있던 것을 허겁지겁 commit 찍고 pull 받았는데, 이젠 굳이 그럴 필요가 없어졌습니다.
3주차 ~ 4주차
(10월 31일 ~ 11월 11일)
1) Simple Todo List 앱 구현 실습
2) Module, fetch, Promise, async/await 학습
3) history API 학습
4) Todo 앱 구현 실습
5) 노션 클로닝 개인 프로젝트 진행
3주차 ~ 4주차는 바닐라 JS 기본 역량 강화가 큰 주제였는데요. 사실 제가 데브코스를 지원하면서 가장 기대했던 과정 중 하나가 3주차 ~ 4주차였습니다. 바닐라 자바스크립트로 SPA를 구현하면서 자바스크립트 활용 능력을 키우는 게 목표 중 하나였습니다. 그리고 데브코스는 저의 기대 이상이었습니다.
전반적인 실습 내용을 한 마디로 요약하면
컴포넌트 방식으로 생각하기
가 될 것 같습니다. 핵심 키워드는 추상화라고 할 수 있겠네요. 앱의 각각의 UI를 추상화하여 독립적인 컴포넌트로 관리하는 것이 바닐라 JS로 앱을 구현하는 과정의 핵심이었습니다.
추상화
- 사물의 특징을 '뽑아내는 것'
컴포넌트
- 프로그램에서 가장 작은 기능 단위의 구성 요소
- 재사용이 가능
- 기능 확장, 유지보수에 용이
컴포넌트 vs 모듈
- 모듈은 설계 시점에 의미 있는 요소
- 컴포넌트는 런타임 시점에 의미 있는 요소
사실 강의대로 코드를 따라치는 시간이 대부분이긴 했지만, 계속 강의를 되돌려보면서 구현 흐름을 최대한 파악해보려고 노력했습니다. 그렇게 몇 번 반복하니, 나중에는 손이 눈보다 빠르게 코드를 치고 있더라구요.
4주차 노션 클로닝 프로젝트 실습 강의를 진행했을 때 강의에서는 되는데 저만 안되는 기묘한 현상을 여러 차례 겪었습니다. 딱 한 줄의 코드가 없어서, npx serve 에 -s를 안 붙여서, 그냥 강사님의 브라우저 화면 크기가 제 브라우저 화면 크기와 달라서 등 몇 시간동안 원인을 찾아 헤매다가 아주 사소한 것 때문에 안되는 것임을 깨달았을 때 증말 키보드에 손톱을 찧은 것처럼 짜릿했습니다. 손이 눈보다 빠른 이유에는 (1) '정말 잘해서'와 (2) '필요한 걸 안해서'로 크게 두가지가 있는데, 저는 명백히 후자였던 것 같습니다.
3주차 과제
Simple Todo List 구현
사실 Todo 앱의 기본 골격은 강의에서 제시를 해주기 때문에 과제를 진행하는 데 큰 어려움은 없었습니다. 다만 다른 프롱이분들의 과제와 코드 리뷰를 보면 단순히 과제를 완수하는 데 그치지 않고 어떻게 해야 좋은 코드가 될 수 있을지 끊임없이 고민하시는 것 같았어요. 과제 끝, 딴짓 시작이었던 저와는 다른 모습이어서 반성을 했습니다.
3주차 막바지에 Todo App만들기 강의가 있었는데, 저는 과제를 위해 일부러 보지 않았습니다. 풀지도 않고 해설지를 보는 느낌이 들었기 때문입니다. 다만 과제 제출하고 나서 확인해보니, 해당 강의는 3주차에서 다루었던 fetch, async/await, history API 등을 모두 망라하여 Todo App을 구현하는 과제였습니다. 즉 과제보다 더 심화된 내용으로 기능 강화를 하는 내용이었던 것입니다. 조금 시간이 지나긴 했지만, 이 강의는 날 잡아서 다시 보려고 합니다.
4주차 과제인 노션 클로닝 개인 프로젝트는 아직 진행 중입니다!
특강
많은 특강이 있었지만, 제게 가장 기억에 남는 특강은 11월 3일에 진행되었던 로토님의 강의였습니다.
강의 내용을 대강 요약하면 아래와 같습니다.
Rendering의 역사
- Server Template: Server App에서 로직에 따라 HTML을 생성 및 렌더링하여 client로 전달하는 방식
- Client Side Rendering(CSR): client에서 모든 컨텐츠를 렌더링 하는 방식
- Server Side Rendering(SSR): server에서 렌더링하는 방식(Server template 방식과 의미론적으로 동일)
- Static Site Generator(SSG) : 동적인 페이지를 포함해서 사이트의 모든 페이지를 미리 정적으로 생성
- Distributed Persistance Rendering(DPR): 일부 페이지만 미리 정적으로 생성하고, 나머지 페이지는 최초 접근 시에 렌더링 후 그 결과를 정적 파일로 생성
- Incremental Static Regeneration(ISR): next.js에서 DPR을 ISR이라는 개념으로 지원
Jamstack
Javascript + APIs + Mark up
개인적으로 CSR과 SSR은 많이 들어봤는데, SSG나 DPR은 처음 들어본 개념이었습니다. 특히 Jamstack은 정말 생소했습니다.
솔직히 '프론트엔드면 CSR만 알고 있으면 되는 것 아니야?'라는 생각을 자주 했는데, 로토님은 그런 오해를 하는 사람들을 위해 이 강의를 만들었다며 의도치 않게 저를 저격(?) 하셨습니다. 정말 많이 뜨끔했어요.
프론트엔드도 서버, 인프라, 네트워크에 대해 잘 알고 있어야 한다고 로토님은 말씀하셨고, 나유리 멘토님 역시 커피챗에서 비슷한 말씀을 하신 적이 있었습니다. 배우면 배울수록 배울 것이 더 많아지는 게 개발자의 숙명이라더니 정말 맞는 말 같습니다.
회고
데브코스 지원하기 전에 서류를 넣은 곳 중 전형이 남은 기업들이 있어서 1차 단위 기간 동안 코딩테스트와 면접을 진행하느라 결석을 3번 정도 했습니다. 하필이면 일자가 특강, 오프라인 강의 일자와 딱 겹치더라구요. 소피아님께서 제가 끝까지 데브코스 할 수 있을지 걱정이 된다며 DM을 주셨을 때 면목이 없었습니다. 앞으로는 그런 걱정을 끼쳐드리지 않도록 노력해야겠습니다.
한 달동안 저와 함께 했던 나유리팀! 덕분에 정말 즐거웠습니다. 같이 맛있게 먹었던 음식과 술(?)은 앞으로도 잊지 못할 것 같습니다. 앞으로도 화이팅입니다!
'IT > IT Books & Courses' 카테고리의 다른 글
| [한 권으로 읽는 컴퓨터 구조와 프로그래밍] 리뷰 (0) | 2022.08.10 |
|---|