지난주는 nextjs에 익숙해지는 데 많은 시간을 할애했다.

주어진 속도로는 시간을 최대한으로 투자해도 진도를 정해진 일정대로 따라가는 것은 무리라고 판단하였다. 그래서 어차피 챌린지 일정이 밀릴거라면, 1-2주차처럼 무리해서 시간을 배분하지 말고 챌린지 외 일정들을 챙기면서 진도를 천천히 따라가자는 계산을 했다.

사실 지난주와 지금을 비교해봤을 때 실력적으로 큰 차이가 있지는 않지만 비슷한 패턴을 여러 번 반복해서 보다 보니 심적으로 익숙해지게 되었다. 그래서 다시 챌린지로 돌아와 프런트엔드 코드를 작성할 때 (할 일 계획) + (nextjs 코드 작성 및 이해)의 두 가지 변수 중에 후자가 해결되어 cursor에게 어떻게 일을 시킬지에 집중할 수 있게 되었고, 문제였던 불안도 어느 정도 해결되었다.

각설하고 이제 급한 문제를 해결하고 보니 절대적인 시간이 부족하게 되어, 챌린지 기간 동안 어떤 부분을 챙기고 어떤 부분을 포기할지를 고민해야 하는 상황이다. 사실 이 생각을 하게 된 구체적인 이유가 있다.

인프런의 지식공유자 강의 수정 화면은 다음과 같이 구성되어 있다.

• 페이지

  • 상단 헤더: 현재 수정중인 강의 제목, 저장 및 제출 버튼 등

  • 메인 영역

    • 사이드바: 수정 과정의 모든 단계들 및 현재 단계 표시

       

    • 강의 수정 영역:

       강의 수정 정보 입력 폼

반면 챌린지의 화면은 다음과 같이 구성되어 있다.

• 페이지

   

  • 사이드바

  • 메인 영역

    • 상단 헤더

    • 강의 수정 영역

개인적으로 느끼기에 챌린지의 화면 구성이 훨씬 고민거리가 적기 때문에 챌린지 설계 과정에서 훌륭한 트레이드오프가 들어간 게 아닌가 생각하고 있다. (아닌가요...? 죄송합니다ㅠㅠ)

이 파트를 구현하면서 챌린지 화면 구성에서 끝내도 되는 줄 모르고 이를 인프런 화면 구성으로 리팩터링을 시도하느라 하루를 보냈다. (결국 오늘 더 시간 쓰고 싶지 않아서 revert했습니다.) 이와 관련해서 글의 주제와는 관련 없는 몇 가지 흥미로운 생각이 들었는데 [여담]에서 따로 기술하였다.

이 문제를 해결하면서 한 고민들은 nextjs를 이해하는 데 도움은 되었지만, 챌린지의 맥락에서 봤을 때 너무 지엽적인 내용인 것 같았다. 그래서 오늘 챌린지 전체 과정을 한 번 훑어보면서 내가 어떤 부분을 취하고 어떤 부분을 버려야 할지 다시 한 번 생각하게 되었다.

개인적으로 챌린지를 하면서 가져가고 싶은 부분은 다음과 같다.

• 백엔드 실 서비스 개발의 전체 흐름을 직접 경험해보기 (상세한 디테일은 챌린지 목차에서 확인 가능)

이를 위해서 nextjs에 대한 이해는, 챌린지 코드의 큰 구조 및 데이터 흐름 및 AI 생성 코드를 이해할 수 있는 만큼만 가져가기로 결정했다. 그리고 "인프런 화면 구성 구현하기"는 이 관점에서 살펴봤을 때 욕심이라는 생각이 들었다.

이상입니다. 읽어주셔서 감사드립니다.

[여담] 여담이지만 위 현상을 경험하면서 몇 가지 생각이 들었다.

• 스스로 무언가를 해보면서 발생하는 문제 상황을 해결할 때 배우는 게 많다. (주관적인 생각입니다.)

  • AI가 이 과정을 방해한다고 생각했는데, 방금 배운 것을 돌아보니 AI를 활용한다고 해도 이 과정이 바뀌지는 않는구나 싶은 생각이 들었다.

    • 나는 AI가 작성하는 코드를 이해하고 싶은 마음이 크다. 혹시 관련이 있을지도?

• Context 왜 쓰는지 백날 고민해봤는데 한 번 리팩터링하면서 와닿는 게 더 많았다. 역시 직접경험이 짱인 것 같다.

  • UI가 응집되는 방향성과 데이터/함수/메소드가 응집되는 방향성이 달라서 발생하는 문제를 해결한다고 생각했었고 이번 리팩터링에서 이를 실감했다. 개인적으로는 현재 리액트 주류 스택이나 MobX 활용 스택이나 주인공을 컴포넌트로 둘 것인지 객체로 둘 것인지의 관점의 차이만 있지 둘 다 이 문제를 훌륭하게 해결한다고 느꼈다. (물론 저는 말하는 감자입니다. 감자가 느낀 것을 그대로 믿으시면 안됩니다.)

• 내가 초기 스타트업에서 일을 하는 상황이었다면 챌린지 화면처럼 구현하자고 기획자와 승부를 봐서 타협을 했을 것 같다.

• 나는 AI가 작성한 코드를 더 쉽게 이해하고 싶어서 스타일링 최소화한 ui 코드 만들기 / 스타일링하기의 2단계로 쪼개서 일을 시키는 것을 좋아한다.

또 리팩터링을 설계하고 AI 생성 코드를 이해하는 과정에서 다음과 같은 고민들을 했거나 진행중이다. 내가 생각하기에 괜찮은 고민인 것 같다.

• nextjs에서 서버 컴포넌트로 ViewModel A에 대한 초기 json 데이터를 얻고, 클라이언트 컴포넌트에서 A를 업데이트하는 패턴이 보이는데, 이 패턴을 공통으로 묶을 수 없을까? (고민중)

• 인프런 화면 구성을 구현하려면 Layout 컴포넌트를 어떻게 설계해야 할까? (마음에 드는 솔루션 하나 확인)