📌 데브코스 2차 MIL

나는 한 달 동안 무엇을 했을까❓

1. 노션 클로닝
2. 유튜브 클로닝(HTML+CSS(SCSS))

큼지막한 주제로 위 두 가지 정도의 학습을 한 것 같다.

🖥️ 노션 클로닝

처음 사용해 본 VanillaJS와 이를 이용한 노션 클로닝 프로젝트. 프로젝트 목표는 VanillaJS를 사용한 SPA 이해와 컴포넌트 추상화, 단방향 데이터 흐름 설계였다.

데브코스에 오기 전까지 프론트엔드 기술을 독학하면서 React와 Redux같은 라이브러리를 사용했었는데 이러한 라이브러리 없이 쌩구현 하는것이 굉장히 어색했다.(그렇다고 React와 Redux를 잘 다루는 건 아니다 ㅎㅎ)

그래도 데이터 흐름 설계와 컴포넌트 추상화 같은 설계가 모두 끝난 후에 코드를 작성하기 시작했다. 설계 과정에서 한 가지 아쉬웠던 건 단방향 데이터 흐름을 잘못 설계한 것. 모든 데이터는 최상단 App.js의 State에서 관리가 되고 있었고 모든 데이터는 최상단의 App.js의 State로 흘러 들어와 최상단에서 다시 데이터를 하위 컴포넌트로 내려주었던 것.
이런식의 데이터 흐름을 짰더니 컴포넌트 단위로 데이터가 바뀔 때 렌더링이 되는 것이 아니라 어느 한 곳이 바뀌면 전체 모든 컴포넌트가 바뀌게 되었던 것이다. 이로 인해 마크업 기능이 실시간으로 적용되는 것이 아닌 새로고침을 눌러야 적용이 되는 가슴아픈 오류가 있었는데, 리액트 할 때처럼 컴포넌트 단위로 렌더링 시켜줄 것을 생각하지 못하고, 왜 데이터 흐름에만 집중을 한건지 모르겠다 💦. 그래도 덕분에 데이터 관련 디버깅 하는 시간은 전체 코드를 작성하는데 있어서 1~5%정도 밖에 안된 것 같다.

그리고 항상 React를 사용하여 API 통신을 할 일이 있다면 항상 Axios 라이브러리를 사용 했었는데 이번 노션 클로닝을 통해서 Axios와 유사하지만 조금 차이점이 있는 fetch API에 대해 이해하게 되었고, 비동기 로직을 작성하기 위한 Promise, async/await에 대해서도 더욱 이해할 수 있게 되었다. 또한, VanillaJS로 노션 클로닝을 진행하면서 디바운스에 대한 개념과 SPA의 개념이 머리속에 더 확립이 된 것 같다.

🖥️ 유튜브 클로닝(HTML + CSS(SCSS))

나는 CSS에 가장 자신이 없었다. 다른 것도 다 잘 못하지만 못하는 것 중 CSS를 제일 못한다.. 지금까지 진행한 개인 프로젝트들은 아주 쉬운 레이아웃만 그려서 CSS에 대한 지식이 거의 전무했다. 프론트엔드 개발자를 하겠다면서 CSS를 잘 못하는 아이러니한 상황이다;;

하지만 프론트엔드 개발자와 CSS는 뗄 수 없는 사이. 강사님의 SCSS강의를 듣고 HTML과 SCSS로 유튜브를 클론하기 시작했다. SCSS 강의에서 수많은 SCSS 기능을 배웠지만 나처럼 잘 활용하지 못한 사람은 아마 없을거다. 형식적으로 분리한 @mixin과 @media, 레이아웃을 네 가지 정도의 영역으로 나눠 파일 분리 요정도가 처음 CSS로 각잡고 레이아웃을 그려보는 내가 할 수 있는 최선이었다.

이번 유튜브 클로닝을 진행하면서 모든 레이아웃을 Flex로 그렸는데 Grid를 사용해보지 못한 것이 아쉽고,@media 쿼리를 이용해 반응형을 적용하긴 했지만 주먹구구식으로 적용을 한 것 같다는 느낌이드는데 이 부분도 아쉬운 느낌이 많이 든다. 또한, 구현하기 급급해서 BEM 방법론과 시멘틱 태그를 잘 적용하지 못했는데, 이 부분도 추후 진행할 토이 프로젝트에서 적용해서 아쉽고 부족했던 부분들을 채워나갈 계획이다.

정말이지 CSS 역량이 많이 부족함을 느낀다. 박영웅 강사님의 CSS 강의를 기반으로 다른 강의도 들어보며 혼자서 물 흐르듯 레이아웃을 그리며 반응형을 적용할 수 있게 CSS 역량을 아주 많이 채워야할 것으로 보인다 💦.

💬 멘토님과의 면담

1차 팀 기간 마지막 주 멘토님과 팀원들과 낙성대에서 모각코를 진행했다. 이 날 멘토님과 면담을 진행했는데 이력서에 관련한 내용과 블로그에 관련한 내용을 피드백을 해주셨다.

가장 중요한 건 지금 취업을 준비하는 개발자들 누구나 다 열심히 한다. 열심히는 Default로 다른 사람과의 차별점이 필요한데 내가 봐도 나에겐 특별한 차별점이 없다. 또한, 개발 공부 만큼이나 중요한 것이 글로써 나를 표현하고 내가 학습하고 느낀 것을 글로써 잘 표현하는 것이 중요하다고 생각한다. 그래서 나는 차별점을 글로써 나타내 보려 하는데 글을 잘 못 쓰겠다 망할... ㅋㅋㅋ 내 치명적인 단점이 글을 잘 못쓰는 건데.. 어떻게 글로써 나를 표현하지 라는 생각이 지금 글을 현 시점에도 내 뇌를 지배하고있다 💣

지금 당장 글을 잘 쓰는 것은 불가능하고, 일단 블로그에 글을 쓰기 위해 무언가를 계속 해야겠다. 주로 문제 해결 과정 또는 2뎁스 이상 학습한 내용에 대해 쓰고 싶은데 그럴려면 사이드 프로젝트를 하든 무언가를 학습하든 해야겠지? 그래서 앞으로는 코딩테스트 문제를 푼 과정이나 학습 내용(2뎁스 이상), 또는 사이드 프로젝트를 진행하면서 부딪히는 상황들에 대해 블로그를 작성하려한다.

💻 사이드 프로젝트

사이드 프로젝트를 진행하려 하는데 너무너무 고민이다. 프론트엔드 개발자는 현 트렌드에 능동적으로 따라갈 줄 알아야 하는데 그렇다고 Next.js를 사용하자니 한 번도 써 본적이 없다. React를 그나마 가장 잘 쓸 수 있지만 이것 또한 현업 개발자 분들이 보기엔 그냥 애기 수준일 것 같다. 일단 TS만 고정으로 하고 나머지 기술은 어떤 것을 사용할지는 제쳐두고, 프로젝트 주제에 대해서고 고민이 된다. 크롬 확장프로그램에 관련한 프로젝트를 진행할 지, 공공데이터 API를 사용해 간단한 토이 프로젝트를 진행할 지는 고민이 되는데.. 빨리 정해서 여러 기술들을 적용해 보고싶다 ㅎ