티스토리 뷰

 

 

 

뭐했다고 벌써 2개월이..?

 

 

1차 단위기간 회고 쓴지 얼마 안지난 것 같은데 벌써 2차 단위기간이 끝이다. 😥

저번달에 적응도 했겠다, 확실히 과제도 많아지고 강의 시간도 길어져서 몇배는 바쁘게 지냈던것같다... 사실 어제까지 Vue 과제 부랴부랴 제출하고 이제야 한숨 돌리면서 밀린 회고들을 쓰고 있다. 꿀같은 3일간의 방학(?)을 활용해서 2차 단위기간 회고를 해보고자 한다.

 

 

목차

바닐라JS 노션 클론 프로젝트 완성!
과제지옥
CS 기술 면접 스터디
굿바이 재호팀

 

 

 

바닐라JS 노션 클론 프로젝트 🍦

4주차 과제 겸 개인 프로젝트로 지금까지 배웠던 바닐라JS를 활용하여 노션을 클론하는 프로젝트였다.

2주 넘는 시간동안 로토님 강의와 함께 바닐라 자바스크립트 기본 역량 강화를 했고 노션 프로젝트를 하기 위한 기본적인 방법들과 스킬을 알려주셨다.

기초적인 토글버튼을 만드는 것부터 시작해서 노션프로젝트를 컴포넌트 방식으로 구현해야하기 때문에 간단 To do List를 예시로 컴포넌트 방식에 대해서 알려주셨다.

그리고 fetch APIasync await로 비동기 처리하는것도 배웠고, 쇼핑몰 장바구니도 간단하게 구현해주시면서 History API에 대해서도 배웠다. 노션은 내용을 입력하면 저장버튼이 따로 없이 바로바로 저장이 되기 때문에 그때 사용하는 디바운싱에 대해서도 알려주셨다.

평소에 벨로그나 노션을 사용하면서 글을 쓸때 바로바로 저장이 되는게 신기하고 어떻게 만드는거지 했었는데 그걸 배우고 구현해보니 생각보다 별거 없네 라고 생각했었다.

 

노션프로젝트 시작하기 전 마지막 강의에서 로토님이 API사용법에 대한 가이드 영상을 남겨주셨는데, 마지막 말씀이

"앞에서 배운 내용을 바탕으로 노션클로닝을 진행하시면 되겠습니다. 화이팅입니다." 라고 하셨는데 뭔가 느낌이

"너네 고생 좀 할거다" 이런 느낌이였던..🤣

 

그렇게 열흘간 첫 프로젝트를 진행했고, 중간중간에 삽질도 했지만 열심히 한 만큼 결과물이 나온 것 같아서 나름 만족하고 뿌듯했다. 

노션 프로젝트 배포 사이트

 

🔳 JooNotion

 

joo-notion.vercel.app

노션 프로젝트 회고

 

 

프론트엔드 데브매칭 시험은 순수 자바스크립트로만 구현해야하고, 보통 SPA를 구현하는 문제가 많이 나온다. 데브코스 하기 전에 데브매칭을 한번 경험삼아 본 적이 있었는데 그땐 "와 이걸 어떻게 풀지?" 싶었다.

그런데 데브코스 1차 단위기간부터 자바스크립트에 대해 자세히 배우고 또 이번 노션클로닝 프로젝트를 하면서 컴포넌트 방식으로 구현하는걸 알게 되었고 자바스크립트에 대한 자신감이 올라간 것 같다. (데브매칭 과제 풀어봐야징~ 🤩)

 

 

과제지옥🔥 (너무 즐겁습니다.)

6주차 과제 (JS)

노션으로 끝난줄 알았던 바닐라JS가 과제가 되어 날아왔다.

무한스크롤 구현, 고양이 사진첩, 사진 검색 등 평소에 많이 쓰이는 기술들을 배웠고, 무한스크롤은 개인 토이프로젝트에서도 적용해야겠다고 다짐할 정도로 유익했다. 사진 검색을 하면서 디바운싱을 한번 더 복습 할 수 있었다.

고양이 사진첩 강의가 끝나고 프로젝트를 보완하는 과제를 받았다. state 정합성 체크, 각 컴포넌트의 setState 최적화 등등 과제 양이 많지 않아서 비교적 빠른 시간에 끝낼 수 있었다.

 

7주차 과제 (CSS)

바닐라JS를 끝내고 그 뒤엔 무슨 강의가 있나 봤더니 CSS 심화강의가 기다리고 있었다.

강의를 듣기 전엔 솔직히 소오오올직히 "아 css니까 좀 쉬엄쉬엄해도 되겠다" 라고 생각했다. (반성중)

 

CSS심화 강의는 총 4개였고,

첫번째 강의는 Position, Flex, Grid에 관한 내용이였다. 어느정도는 거의 다 알고있는 내용이여서 복습한다고 생각하고 쉬엄쉬엄했다.

 

두번째 강의는 Grid에 대해 자세히 배웠다. Grid Item과 Grid Function, 그리고 Tranform 3D도 만들어보면서 몰랐던 내용을 배워서 신기했고 그래도 대부분 이해가 됐다.

 

세번째 강의부터 SCSS에 대해 배웠고 변수, 데이터, 연산자 그리고 @media쿼리에 대해 배우면서 화면 크기에 따라 속성을 설정해주었다. 이때의 속마음은 "SCSS에 이런게 있었어..?"하고 당황했다.

 

마지막 네번째 강의..

SCSS 재활용, 확장, 함수, 조건과 반복 내장 모듈 등등...배우면서 내가 알던 SCSS와 너무 이질감이 느껴졌고 머릿속엔 계속 물음표만 있었던 것 같았다. (엥?? 이게뭐야??)

 

SCSS는 SASS의 모든 기능을 지원하는 CSS의 상위집합을 뜻한다. 그리고 SASS는 CSS의 전처리기로써, 보통의 프로그래밍 언어처럼 변수, 상속, 혼합, 중첩 등의 다양한 기능을 제공한다. SASS는 스타일시트 언어이기 때문에 변수와 연산, 함수, 조건과 반복 같은 것들이 가능하다.

 

그러니까 한마디로 마지막 네번째 강의에서 SASS문법에 대해 한번에 배운것이다. 🤯

게다가 플러스 과제까지..

css과제는 원하는 사이트 또는 유튜브/네이버 클론코딩하는 퍼블리싱 과제였다. 그래도 SCSS에 대해 자세히 배웠는데 제대로 한번 써보자는 생각으로 함수도 써보고 조건문 반복문도 써본 결과 새벽 3시반에 과제 제출을 할 수 있었다..ㅎㅎ😵

(그래도 멘토님께 칭찬받아서 매우매우 뿌듯했음)

인프런 클론

인프런 사이트 클론

 

8주차 과제 (Vue)

8주차 과제는 Vue로 만드는 영화검색 사이트다. 박영웅 강사님께서 Vue 기초부터 하나하나 자세히 가르쳐 주셨고 Vue로 노션을 한번 더 만들어보면서 Vue 사용법을 익혔다.

노션을 강사님과 같이 만들어보고 과제 진행을 했는데 그래도 처음 써보는 프레임워크라서 그런지 많이 헤맸고 여기저기 찾아보면서 과제 제출을 할 수 있었다.. (과제 제출 기간 2일 지각..😶)

영화 검색 사이트

영화 검색 사이트 과제

박영웅 강사님이 엄청 꼼꼼하시고 열정적이셔서 CSS강의부터 평균 강의 시간이 25분~30분..?정도 였던 것 같다. 온라인강의로 그 정도 시간 강의를 들으니 졸음과의 싸움도 있었고 공부내용을 기록하면서 들으니 시간이 더 오래 걸렸던 것 같다. vue시작하면서 동기분들 중에 강의 많이 밀리신 분이 많이 보였다. (나 포함🙋‍♂️ ㅋㅋ)

그래도 꼼꼼히 강의를 찍어주신 덕분에 기억안날때마다 찾아 볼 수 있다는게 너무 감사한 마음이당

 

 

과제지옥이라는 표현을 사용했지만 과제가 있기 때문에 실력이 는다고 생각한다. 기간안에 제출해야한다는게 약간의 압박감이 오고 현업에서도 기간을 지키는건 중요하기 때문에 일종의 훈련이라고 생각한다. 그리고 다른 분들의 코드리뷰를 하면서 다른 방식으로 해결할 수도 있구나 라는걸 배우는것도 실력이 느는 요인 중에 하나인 것 같다. 👍

 

 

CS 기술 면접 스터디 💻

평소 CS지식이 부족하다고 느껴졌고 면접 경험도 없어서 부족한 것을 채우고자 스터디에 가입했다.

일주일마다 각자 공부할 주제를 정해서 발표를 하고 공부한 내용들을 모아서 그 내용으로 한명씩 번갈아가며 모의 면접을 진행하는 스터디다. 공부할 내용의 큰 카테고리는 자료구조, 알고리즘, 운영체제 네트워크다. (아직까진)

 

첫째주엔 힙 자료구조에 대해 발표를 진행했고, 모의면접은 해시테이블에 당첨되었다.

내가 공부한 내용을 바탕으로 내 지식을 누군가에게 알려준다는 것이 너무 생소한 경험이었고 내 지식에 확신이 없어서 그런지 약간 의기소침해지는걸 느꼈다. 모의면접 볼 땐 더 심했다.ㅠ

그래도 나중에 실전 면접에서 모르는 것보다 지금 모르는게 백번 낫고

지금부터 알면 된다는 마인드로 열심히 하려고 한다.😤

 

 

굿바이 재호팀 ✋

2차 단위기간이 시작되고 일주일 뒤에 팀이 새로 배정됐다.

김나영 멘토님 팀으로 들어가게 되었고 재호팀은 뿔뿔히 흩어졌다.😭

친해졌는데 흩어져서 아쉬웠지만 새로 만난 팀원들도 금방 친해질거라 생각한다. I'm ESFJ

 

앞으로 잘 지내봐요 나영팀🎉

 

귀여운 머쓱이와 함께 커피챗인증

(멘토님은 코쓱이 ㅋㅋ)

 


프로그래머스 데브코스