[MIL] 프로그래머스 프론트엔드 데브코스 MIL 2편

10월 20일 즈음 MIL 1편을 작성하고 벌써 1달이 또 지나 11월 20일이 되었다.

1편과 마찬가지로

• 한 달동안 나는 무엇을 했는지?
• 어떤점에서 성장했는지?
• 부족한 점은 무엇인지?
• 한달동안 하며 느낀점은 무엇이었는지?

를 중심으로 회고를 작성해보려고 한다.

 

 

부족한 점

시작하자마자 부족한 점부터 적게 되는 마음이라고 볼 수밖에 없다.

 

우선 배움에 대한 기록이 너무 부족했다. 반성하는 마음을 가질 수 밖에 없다.

 

과제 수행중 TIL을 매일 적자니 애매하고, 그렇게 하나 둘 안적다보니

WIL을 적자! 로 타협하고, 그게 또 안지켜지니 WIL도 작성을 제대로 안했다. 🤯

 

MIL 작성을 위해 노션에 토막글로 정리를 하긴 했지만 블로그에 나의 배움에 대한 기록을 안남긴 것은 반성할 일이다...

 

한 달 동안 무엇을 했는지? + 느낀점!

 

Vanilla JS

10월 중순~10월 말 까지의 강의를 통해

 

1.intersection observer를 활용한 무한 스크롤 구현,

2.검색기능,

3.디렉토리간 이동

총 세개의 연습용 프로젝트를 진행하였다.

 

노션 클로닝이 마무리 된 후 '리팩토링 해야하는데...'라는 생각만 하며 강의를 듣는 삶의 안정감에 취해있었다.

당시엔 노션 클로닝을 진행하며 VanillaJS에 대한 적응도가 한참 높아져 있을 때여서 강의를 보며 별 어려움 없이 구현했는데, 지금 구현하라고 하면 검색기능과 무한스크롤은 애를 좀 먹을 것 같다. (복습의 중요성) 필요할 때 다시 찾아서 익혀야겠다.

 

 

 

CSS

11월 초 부터는 CSS, TypeScript를 거쳐 현재 Vue튜토리얼 을 진행중이다.

 

SCSS는 CSS에 비해 중첩(Nesting)이 가능하여 가독성이 높아진다는 장점과

variable을 통한 변수선언

mixin과 import를 활용한 설정 함수화 등의 장점이 있었다.

 

CSS클로닝으로 유튜브를 똑같이 만들어보는 프로젝트를 진행했다.

이 프로젝트를 진행하며 코드의 가독성은 둘째 치고, 어쨌든 내가 뭔가 이렇게 반응형으로 동작하는 디자인을 어떻게든 만들어 낼 수 있다는 자신감을 얻었다.

 

만든김에 배포도 연습해보려고 AWS S3+cloudFront를 활용해서 짭튜브 배포를 했다.

배포하고 나서 알게 된 것은 윈도우 화면에선 스크롤바를 디자인 하지 않아 상당히 못생겼다는것. (맥 만세)

짭튜브 보고가세요~

 

 

TypeScript

 

TS를 왜 사용할까?에 대해서 먼저 혼자 생각을 해보았다.

1. JS는 처음에 DOM내에서 동작을 위해 동적으로 움직이는 언어의 필요성으로 인해 개발이 되었다.
2. 근데 웹이 발달을 하다보니 서비스의 규모가 점점 커지게 되고 너무 자유로운 JS로는 유지보수에서 안정성을 보장하기 어려워졌다. 개발 당시의 장점이 오히려 발목을 잡은 것이다.
3. 따라서 Type을 보장하며 strict하게 JS를 활용할 수 있는 타입스크립트가 필수 스킬이 되었다.

그래서 개인 프로젝트 수준에선 TS의 필수성에 대해 의문이 들지만 실무에서의 필요성을 알기 때문에 익혀야하는 스킬이라고 결론을 내렸다.

 

그래서 VanillaJS로 컴포넌트를 간단히 만들고, 이를TS로 바꾸려고 했는데, 이게 무슨일인지 너무 어려운 것이다.

인터넷에 찾아봐도 React+TS는 많아도 VanillaJS+TS의 조합은 전무한 수준이었다.

정보가 왜 없는지 생각을 해보니 애초에 위에 서술한 TS의 등장 배경을 생각해보면

 

JS를 활용한 프로젝트의 규모가 커진 시점에 순수 JS의 단점을 보완하려고 등장했는데

애초에 프로젝트 규모가 커지면 VanillaJS보다는 React등의 라이브러리를 활용해서 프로젝트를 하지

VanillaJS로 규모가 큰 프로젝트를 개발하지는 않으니

TS+VanillaJS라는 조합은 수요가 거의 없는게 정상이겠구나 라는 생각이 들었다.

 

VanillaJS로 프로젝트를(작은규모, 동작원리에 대한 이해위주)

TS(큰 규모의 프로젝트에서 엄격성 보장)를 묶어서 하겠나 싶긴 했다.

 

나중에 팀원들에게 VanillaJS로 간단한 컴포넌트를 만들고 TS로 변환하니 너무 어려웠다는 이야기를 하자, 그렇게 하면 any범벅이 되고 어려워져서 차라리 처음부터 TS로 작성하는게 낫다 라는 이야기를 들었다.

 

타입스크립트 강의가 1주일동안 벼락같이 진행되며 정보들을 흡수하기가 어려웠고, 과제도 없었기 때문에 뭔가 슝 지나간 느낌이었다.

 

TS를 사용해보고 싶었지만... 언젠가로 미뤄지게 되었다.

 

 

노션 리팩토링

대단한건 아니지만, TS 사용 실패 이후 '뭐하지...' 하다가 노션 기능 구현 중 실패했던 기능이 생각났다.

 

1. 에디터 내를 클릭하면 html -> 마크다운으로 변환 (텍스트 입력시)
2. 글 외부를 클릭하면 마크다운->html언어로 변환 (텍스트 입력이 끝났을 때)

요 1 2번이 왔다갔다 하게 만드는 데에 모종의 이유로 실패했었다.

 

기존 방법 

Editor영역에 이벤트 리스너를 등록하여

클릭 시: html -> 마크다운으로

focus가 풀릴 시: 마크다운 -> html로 하려 했는데

 

이게 focus가 풀리는걸 전달을 못하는 건지 마크다운->html이 실행이 안됐다.

 

그래서 새로운 방법으로

Window 전역에 이벤트 리스너를 등록해

Editor 클릭 시 html->마크다운 으로 변환

Editor이 아닌 곳 클릭 시 마크다운->html 으로 변환을 

떠올렸는데 작동이 잘 됐다!

 

실패했던 기능을 포기하지 않고 리팩토링을 통해 성공한다는것은 중요한 일이라고 하신 멘토님의 말씀을 떠올리며... 뿌듯했다...

 

 

어떤점에서 성장했는지?

첫 달에는 뭐가 뭐가 성장했고 뭘 몰랐는데 어떻게 되었다. 이런게 있었다면

이번 달에는 성장도 했고, 열심히 살았는데 뭔가 정량적으로 확인이 안되는 것 같다.

 

아무래도 가장 크게 실습한 내용이 CSS인데, 관련한 프로젝트 경험이 매우 없다보니 실력이 가늠이 잘 안되는 분야인 것 같고,

두번째로 공부한 TypeScript의 경우는 실습을 진행하다가 실패했다 보니 체감이 잘 안되는 것 같다.

 

다만 코딩테스트 스터디를 시작해서 한문제씩 풀어나가는것

리팩토링을 통해 문제를 해결해 냈다는 것

Vue를 공식문서를 통해 익히면서 공식문서랑 조금씩 친해져 가는 중이라는 것

 

요정도는 달라진 점이라고 볼 수 있을 것 같다.

 

 

 

11.20 ~ 12.20 목표

뭔가 이번 단위기간 동안에는 배운게 많으나 '내 것으로 익힌' 비율이 적었던 것 같다.

그러니까 이번 단위기간에는 배우는 것에 +로 내 것으로 만들 수 있도록 해야겠다

그러려면...기록이 중요한 것 같아서 최소 WIL은 작성 해보자!

 

학습해온 길에 있어서 독특한 점을 만들어보자 (이 친구 독특하네..라는 인상을 심을 수 있는)