✌ 들어가며
9월 첫 회고록을 작성한지 벌써 1달이 지나갔다. 9월 회고록의 한 달은 길게 느껴졌지만 10월 회고록은 정말 순식간에 지나갔다.
아마 Notion 프로젝트를 정신없이 진행하면서 시간이 빨리갔던 것 같다. Notion 프로젝트에서 얻은 것도 많았고 Notion 프로젝트 이후 또한 얻은 것도 많았다.
무엇보다도 점차 데브코스에 적응하며 멘토님과 팀원들과 활동이 점점 활발해지면서 같이 학습하고 공유하는 시간이 늘어나며 공부는 물론이고 커뮤니케이션 능력 등 성장 시너지가 극대화 되었다.
새롭게 알게 된 지식과 관심을 가지게 된 부분도 많았는데 이 내용을 바탕으로 현재 회고를 작성할려고 한다.
📖 Notion 프로젝트
아마 이번 달에서 가장 많은 비중을 가진 기간이라고 말할 수 있다. 바닐라 JS를 모두 배우고나서 Notion의 기능을 구현하는 프로젝트였다.
나는 요구사항들을 하나씩 구현하면서 많은 문제들에 부딪혔었다.
response.json()
promise와 await/async에 대해 알고 있던 나는 별 문제없이 사용할 수 있을거라 했지만 JSON을 파싱하는 메소드 response.json()을 사용하면서 계속 Promise 객체로 묶여있는 값을 반환받는 것이 문제였다.
분명히 나는 fetch 함수의 반환 값인 promise 객체를 await으로 풀어주었는데도 계속 promise 객체가 최종적으로 반환받게 되는지 궁금해서 찾아봤다.
공부하면서 알게된 사실이 response.json() 메소드는 아! 비동기로 동작하며 promise를 반환하는 하구나!
range와 selection 그리고 focus
Notion의 메인 기능인 마크업을 구현하기 위해 contenteditable라는 속성을 사용했다.
문제는 keyup 이벤트를 통해 입력할 때마다 state가 변경되어 리렌더링이 발생하면 이전 포커스 위치를 잃어버리게 되어 커서 위치가 리렌더링 발생 시 맨 앞으로 변경되는 문제가 발생했다.
단순 focus() 함수 해결해봤지만 정확한 커서 위치를 제어하기엔 불가능 했다. 그래서 range와 selection라는 개념을 찾았고 활용하면 디테일 하게 커서 위치를 제어할 수 있었다.
하지만 나는 렌더링하는 방식을 innerHTML를 선택했었는데 리렌더링이 발생하면 요소가 모두 사라지고 다시 state 값으로 생기는 구조였다.
그러다 보니 내가 선택한 innerHTML 방식으로는 이 focus 문제를 해결할 수 없지 않을까라는 생각이 들었고 방식을 createElement로 변경하자니 내일 과제 제출날이여서 결국 포커스가 항상 텍스트의 맨 끝으로만 이동하는 방식으로 마무리를 했다.
만약 텍스트 중간에서 수정이 일어나도 리렌더링이 발생하면 항상 커서의 위치는 맨 마지막으로 이동했다.
range와 selection을 새로 알게되었지만 Notion 프로젝트에서의 요구하는 기능을 완벽하게는 구현하지 못했다. 후에 range와 selection을 더 학습하고 미완성 된 Notion 프로젝트를 좀 더 손 봐야겠다.
🏗️ 컴포넌트 설계
컴포넌트에 관한 내용이 내가 이번 회고록을 통해 제일 이야기하고 싶은 내용이며 데브코스 바닐라 자바스크립트 교육 전체에서 제일 중요한 의미를 담고 있지 않을까 싶다.
데브코스 이전의 나는 개발 시작과 동시에 키보드부터 두드렸다. 하지만 데브코스의 교육과정을 통해 컴포넌트로 분리하여 설계하고 구현하는 방법을 알게 되었다.
교육 영상에서 분리된 컴포넌트나 과제를 수행하고 다른 팀원들마다 각각 다른 컴포넌트 모습들을 보며 항상 고민했었다. 잘 설계된 컴포넌트는 뭘까?? 그 기준은 어떻게 잡아야할까??
잘 설계된 컴포넌트를 어쩌다가 만들어 사용하면서 정말 편리하다고 느꼇다. 그래서 컴포넌트 설계와 분리하는 것이 FE 개발자에게 엄청 중요한 역량 중 하나라고 생각해 더 공부가 필요했다.
멘토님에게 질문을하고 더 많은 자료들을 찾아보며 아직까지는 완벽하진 않지만 잘 설계된 컴포넌트의 기준에 대해서는 지식을 많이 얻게 되었다.
🎨 디자인 패턴
컴포넌트를 잘 만드는 것에 많은 관심을 가지던 나는 Notion 프로젝트를 앞두고 멘토님에게 어떻게 컴포넌트간 응집도를 높이고 결합도를 낮출 수 있을지 질문 했다.
멘토님께서는 다양한 방법이 있는데 옵저버 패턴을 비롯해 디자인 패턴을 활용해보면 좋을 것 같다고 하셨다.
그래서 내가 적용한 디자인 패턴은 옵저버 패턴과 싱글톤 패턴이다.
두 디자인 패턴을 활용하면서 특히 컴포넌트간 결합도가 매우 낮아졌다. 최상위 App.js의 역할의 비중도 줄어들고 전체적인 코드도 매우 간결해졌다.
👨🎨 css의 이해
나는 css는 다양한 속성을 이해하고 잘 적용하는 것이 css의 기본 역량이라고 생각했다. 뭐 css 속성을 잘 이해하고 사용하는 것도 기본이긴 하다.
하지만 css 특강 시간에 강사님께서 선택자의 점수를 물어보셨는데 아무도 잘 대답하지 못했고 나 역시 똑같았다. 그러자 강사님께서는 꼭 알고 있어야한다고 기본 역량이라는 느낌으로 말하셨다.
css 속성도 중요하지만 css가 어떻게 동작하는지도 매우 중요하다는 것을 느꼇고 이 부분에 대한 부족함을 인지했다. 그래서 css 선택자의 우선순위와 브라우저가 css를 해석하는 방법 및 성능 향상에 대해 공부했다.
🏢 시멘틱 태그의 활용
유튜브 클론 코딩 과제를 하면서 요구 사항 중 시멘틱 태그를 최대한 활용하는 부분이 있었다. 실제로 내가 시멘틱 태그를 이렇게 까지 고민했던 적이 있나 싶었다.
시멘틱 태그에 대해 알고 있었지만 막상 고민하고 이 부분은 어떤 의미의 태그가 적합할지 선택하는 것은 많이 힘들었다.
header, nav, aside, footer, div 등 의 태그들은 의미에 대해 명확히 인지하고 있었지만 제일 이해가 되지 않던 두 태그가 있었다.
바로 section과 article 태그다.
서로 비슷한 것 같으면서도 다른 것 같기도 하고... 막상 적용할려니 두 태그 중 더 적합한 태그를 선택하는 것이 모호했다.
그래서 공식문서도 찾아보고 했지만 시원하게 해결되지 않았고 나름 나만의 비유 상상?을 통해 이해를 하게 되었다.
🤔 그 외 궁금해서 정리한 내용
🖐️ 마치며
데브코스 2번 째 MIL 회고록을 작성하며 확실히 점차 성장하는 느낌을 받는다.
하지만 벌써 2번 째 회고록을 작성하면서 시간 또한 빨리 지나가는구나, 고작 4개월 남았구나 또한 생각도 된다.
멘토님과 마지막 1:1 면담 때 벌써 2개월이 지나 4개월이 남았는데 내가 4개월 뒤에는 준비가 되어있을지 모른다고 걱정이 된다고 상담을 드렸었다.
나는 뭔가 4개월 뒤에는 차별성 있는 교육생으로 남고 싶다.
멘토님께서도 부트캠프를 하게 되면 수료시에 동일한 교육과정을 수강하다보니 어쩌면 똑같은 모습보다는 차별성 있는 모습이 더욱 더 좋다고 하셨다.
그래서 현재는 어떻게 하면 차별성 있는 개발자로써 성장할 수 있을까? 라는 고민을 자주 하는 것 같다.
그래서 생각한 계획이 1가지 있는데 좀 더 욕심내어 차별성을 가질 수 있도록 노력이 필요하다고 요즘 들어 고민?이자 목표?인 방향이다.
인혁님 글 엄청 간결하게 잘 쓰시네요.
디자인 패턴이랑 css 관련 개념 글 잘 보고 갑니다!