프로그래머스 데브코스 한달 회고 및 노션 클로닝 프로젝트 회고

한달 동안 데브코스를 진행하면서 느꼈던 점을 글로 정리해 보려고 한다.. 부족했던 점, 좋았던 점들을 정리하며 앞으로의 학습 방향에 있어서 좀 더 좋은 방향으로 나아가기 위해 꼭 필요한 과정인 것 같다😊

데브코스를 합격하기 전

전공자라면 전공자라고 할 수 있는 정보통신공학과를 졸업했지만 웹에 대해선 배운 적이 없었다.. 그 흔한 Github조차 사용해 본 적이 없는.. 학교 잡카페에서 근로학생을 하며 우연히 부트캠프에서 온 홍보 메일 덕에 부트캠프를 알 게 되었고 더 좋은 부트캠프를 찾으며 결국 데브코스를 합격하게 된 건 인생의 터닝포인트가 아닐까 생각해 본다.

데브코스에선

1. 기본적인 CS 교육
2. 자료구조와 알고리즘 -> trie 와 전위,중위,후위 순회 구현하기 과제
3. Vanilla JS -> 노션 클로닝 과제(개인 프로젝트)
4. 주말이나 코어 타임 이후 시간에 진행되는 각종 특강들

학교를 졸업하고 독학으로 프론트엔드에 대해 공부하며 내가 하고 있는 학습 방향이 맞는 것인지에 대한 고민이 가장 컸던 것 같다.. 부족한 지식으로는 프로젝트를 만들 수 없다고 생각해서 계속 미루고 미루고😱
기초부터 탄탄하지 않기에 배웠던 내용들을 블로그에 정리하며 복습하고 내 것으로 만드려고 노력하고 있다!! 부끄럽지만 처음으로 Github 사용법을 검색하지 않고도 Pull Request 나 push까지의 과정을 해보고 배포도 직접 해봤다ㅎ

코어타임

13시부터 17시까지 배정된 팀원분들과 함께 디스코드에 접속해서 공부를 시작하게 되었다. 오후 1시면 잠도 푹 잘 수있고... 6시간이면 코테문제 하나만 풀어도 금방인데? 라고 생각했지만 큰 오산이었다😅 시간이 가면 갈수록 집중력이 흐트려지는 나의 모습.. 좀만 쉴까 하는 생각에 캠을 끄러 디코 화면을 켰다가 열심히 하는 팀원분들 모습에 쪼금이나마 동기부여가 되는 것 같다..

여러 과제들

강의를 진행하고 강의에서 진행된 주제로 과제가 주어진다. To do List 만들기, 노션 클로닝 등등. 강사님의 코드를 따라 쳤을 땐 어떻게 하든 구현은 되지만 혼자 하려면 아무것도 떠오르지 않는.. 강의내용을 진짜 내 것으로 만들기 위해 더 열심히 복습하고 노력해야 겠다..

좋은 팀원들

성격이 극극극 I인 나는 팀원분들과 더 친해지고 싶은 마음은 굴뚝같지만.. 주도적으로 말을 건다는 등 노력하지 못하고 있는 것 같다😂 하지만 팀 MC 분도 계시고 스터디도 제안해주시고 해서 좋은 기회를 얻고 있는 것 같다. 운좋게 좋은 팀원분들과 팀에 배정된 만큼 좀 더 적극적으로 임해보자!!

특강과 세션

개발에 관련된 얘기가 아니더라도 정말 유익한 시간이었던 것 같다. 모두 좋았지만 마광휘 개발자님의 좋은 개발자로 성장하기 특강이 기억에 남는다. 좋은 글쓰기라는 내용이 나왔는데 강의와 과제에 치이다 보니 블로그에 글을 점점 쓰지 않게 되는 날이 많아졌던 것 같다. 들어오기 전에는 매일 쓰겠다고 다짐했지만..! 뭐라도 써야한다는 압박감에 쫓겨 강의 내용을 그대로 치기보다는 한 줄을 적더라도 내 나름대로 정리하고 누군가 볼 수 있다는 생각으로 공들여 써보자. 나중에 고칠 수 있는 기회도 있으니 주 단위 기록이라도 작성해 볼 예정이다!

코드리뷰

내가 짠 코드들에서 문제점을 발견하고 리팩토링 하는 것은 매우 어렵다. 특히 생각의 전환?이 어려운 것 같다.. 마치 알고리즘처럼.. 분명 확인하고 제출한 코드인데도 여러 관점에서 팀원들이나 멘토님들의 피드백을 받을 수 있다는 건 분명 좋은 기회이다! 하지만 나는? 다른 팀원들에게 도움이 될 만한 리뷰를 남기지 못하고 있는 것 같다.. 좀 더 시간을 투자하더라도 다른 분들에게 도움이 될 수 있을 만한 리뷰를 남길 때까지!! 공부하자..

개발 회고

노션 클로닝

배포 링크

개인 프로젝트로 노션을 클로닝 해보았다. 노션에서 개발자 도구를 켜서.. 어쩌고 저쩌고 하면 금방하지 않을까? 생각했지만 역시 아니었다.. 사이드 리스트를 만드는 것부터 에디터를 만드는 것 까지 분명 강의에서 본 내용이지만 내가 원하는 동작을 하도록 구현하기에는 매우매우 어려웠다.

📌 기본 요구 사항

컴포넌트 방식으로 개발

기능 단위로 추상화 하여 각 기능들이 독립성을 갖게 함으로써 재사용성도 높아지고 유지보수도 쉽다.. 각 컴포넌트들의 상태를 기준으로 화면을 렌더링 하는 것.. 왜 이렇게 개발을 해야하는지에 대해서도 이해는 했지만 내 프로젝트를 그렇게 짜는 것은 엄청 힘들었다.. 기능을 나누다보니 이것도 나누고 싶고 저것도 나누고 싶고.. 막상 나눠보니 오류가 나고.. 최상위 App 컴포넌트에서 다른 페이지들이나 페이지들이 관리하는 컴포넌트들의 상태를 받아 렌더링 해준다.. 는 개념은 어느정도 이해한 것 같다😂 더 많이 개발을 해본다면 늘지 않을까..? 하고 생각 중이다!

개발 과정

1. 최상위 App 컴포넌트에서 라우팅(pathname 기준)에 따라 사이드바 (NotionListPage), Edit Page를 렌더링 한다.

2. NotionListPage 에서 서버에서 내려온 데이터를 DocumentList로 넘겨주고 그에 따라 사이드바 부분을 렌더링한다.

3. 리스트를 클릭, 추가(onAdd) 시 id를 기준으로 DocumentList로 값을 넘기고 route 처리한다.

   3-1. 삭제(onDelete) 시에는 페이지를 비워주고 사이드바 부분만 렌더링 되도록 처리한다.

4. EditPage 에서는 keyup이 발생하면 2초 뒤 업데이트하고 Editor도 수정된 값이 보여질 수 있도록 렌더링한다.

5. 하단에 현재 Document의 하위 페이지가 나타나도록 하여 클릭(onClick) 시 해당 id를 editor로 넘겨 클릭한 페이지 정보가 나타날 수 있도록 한다.

개인적으로 실제 노션처럼 토글 버튼과 마우스를 올릴 때만 삭제, 추가 버튼이 나타날 수 있도록 구현하고 싶었지만 실패했다. 코어타임이 끝난 후 잠깐씩이라도 기능 추가를 해봐야겠다.

결국은 전 기수분들의 코드를 참고하며 어찌어찌 동작에 성공은 했다..! 그 순간은 짜릿했지만 다른 팀원분들의 결과물을 볼 때 마다 현타가🤐

• 새로고침 후 두번 클릭해야만 동작하는 문제
• router.js 에 initRouter 함수를 이용해서 window에 내가 지정한 Custom Event가 발생하면 history API를 이용해 route 하도록 설계했지만 이걸 빼고 EditPage 자체에서 직접 비동기로 처리해주니까 제대로 동작했다.. 왜 이런 현상이 발생하는지에 대해서는 아직 제대로 알지 못한다.. 리팩토링 과정에서 더 깊게 파보려고 한다!
• 토글 버튼과 마크업 기능
  textarea로 작성된 에디터 부분을 div의 contenteditable 속성을 이용해 좀 더 rich한 에디터를 만들어보고 싶었지만 결국 실패했다.. 노션에서 가장 예쁜? 깔끔하다고 생각했던 토글버튼도 구현하지 못했다.. 이것 또한 개발을 통해 좀 더 깊은 이해를 해보려고 한다.

배울 수 있던 점

이번 프로젝트를 통해 상태 관리에 대해 좀 더 확실하게 알 수 있었던 것 같다. 각 컴포넌트들이 서로의 상태를 통해 정보를 주고받으면서 렌더링을 하는 과정에서의 장점과 비동기적인 흐름을 이해하는데 적절한 주제였던 것 같다. 많은 기능들을 구현하진 못했지만 이 안에서도 많은 오류가 발생하고 해결하는 과정을 직접 부딪혀 보면서 화도 났지만 재미있었던 것 같다. 기본기를 탄탄하게 하기 위해선 컴포넌트 상태 관리나 비동기적인 흐름에 대해 더 공부할 필요가 있기 때문에 앞으로 다가올 다른 프로젝트에서도 최소 1인분은 할 수 있도록 꾸준히 공부해야겠다. 코드 리뷰도 잘하고 싶다..😂

나는 어떻게 해야 할까?

스크럼 시간에 팀원분들과 얘기를 나누다가 다른 사람 코드를 보고 하더라도 결국 이해를 하고 내 것으로 만들면 되지 않을까요? 라는 얘기가 오간 적 있다. 내 입장에서 너무 듣고 싶었던 말이어서 아직까지 기억에 남는 것 같다😎 아직은 스스로 구현하는 능력도 부족하고 추상화 하는 것도 힘들지만 언젠가는 이때 왜이렇게 했지? 자책하며 고칠 수 있는 날도 올 수 있지 않을까..
그 때까지는 계속 동기부여를 하며 달려나갈 예정이다!! 데브코스라는 기회를 얻은 것처럼 취업이라는 기회도 얻을 수 있지 않을까?😁