6월 2주차 회고: SPA 프로젝트
2024-06-10
이번주 회고는 4F 기법으로 작성해보았다.
Fact
1. SPA 일기예보 앱
프로젝트 세팅
이전에 자바스크립트로 프로젝트를 구축할 때, webpack과 babel을 활용했었다. 공식문서를 보고 따라가면 어렵지 않게 세팅할 수 있는데 빌드 툴인 vite를 활용하면 명령어 한 줄로 빠르게 세팅 할 수 있음을 알고 있어 큰 고민 없이 vite로 프로젝트를 세팅했다.
라우터 구현
처음에 설계할 때 라우터에 필요한 것은 라우터 정보, navigate 메서드, url로 들어왔을 때 대응이라고 정의했다. history API에 대해 다시 리마인드 하고 구현했다.
동적 라우팅 기능 추가
- 서울의 일기예보 페이지 경로를 /weather/:name 형식으로 바꾸면 나중에 서울 뿐만 아니라 다른 도시에 대해서도 커버 가능할 것이라 판단해 변경했다.
- 정규표현식으로 현재 path와 일치하는지 판단하도록 하고 param 정보를 뽑을 수 있도록 구현했다.
API 연동
- openweather 서비스 가입하고 key를 받아 구현했다. 이메일 인증하고 4시간 기다려서 api를 사용할 수 있었다.
- UI 쪽에서 API 호출 방법에 대해 잘 알 필요가 없다 생각하여 서비스로 분리했다.
- 페이지 컴포넌트 내에서 weatherData라는 상태를 두고 fetch해서 상태값에 넣고 렌더링하도록 구현했다.
생각대로 안된 것들
- Component라는 추상 클래스를 두어 필수 프로퍼티와 메서드를 지정하고 싶었다. 자바스크립트에서 제공하지 않고, 검색해보니 생성자나 메서드 내부에서 에러를 던져 필수로 정의하도록 하는 방법들을 쓰고 있었다. (타입스크립트 implement 활용하면 해결되는듯)
- 날씨 데이터에 대해 타입이 없으니 너무너무 불편했다. undefined가 뜨고 왜 이러지? 해서 보면 프로퍼티를 잘못 입력했다던가 이런 문제였음. 타입스크립트 없이는 jsdoc을 사용하면 해결할 수 있다고 한다.
2. 블로그
계기
- 현재 티스토리로 블로그를 잘 쓰고 있다. 그럼에도 블로그를 따로 만들려고 하는 이유는 나의 특색을 잘 나타낼 수 있는게 나만의 블로그라고 생각했고 (구글 검색하면서 많은 블로그를 접하면서 느낀점) 정말 내 입맛에 맞는 블로그를 만들 수 있어서이다. 또, 프론트엔드 개발자로서 기술력도 보여줄 수 있는 기회이지 않을까 생각했다.
- 내가 작성한 글 중에서 단순 개념정리 글을 wiki로 분리하고 싶다. 근데 2개의 웹페이지는 접근성이 떨어지므로 하나의 사이트에 기술에 관련된 이야기와 개념정리 탭을 두어 관리하고 싶다는 생각이 들어 나만의 블로그를 만들기로 결정!!
기술스택 선정
- 일단 블로그 요구사항이 정적인 컨텐츠들을 뿌려준다, 그리고 구글 검색에 잘 노출되었으면 좋겠다 크게 2가지로 봤다. React로 구현하고 별도의 SEO 처리를 해줄 수도 있지만, 이를 편하게 최적화할 수 있게 해준다는 next.js나 gatsby에 눈이 갔다. 그래서 둘 중에 고민을 했는데 둘 다 내가 잘 모르는 프레임워크라 새로 배워야 했고 배워둬서 더 좋은 게 무엇일까 생각했을 때 next.js라는 판단이 들어 next.js로 블로그를 만들기로 했다.
DB 고민중
- 일단 레포지토리 안에서 /posts를 두어 md or mdx 파일로 관리하기 싫다. 이전에 그렇게 해본 적이 있는데 이게 깃헙 레포지토리에서 raw하게 다 드러나는 게 부끄럽고.. 추후에 블로그를 리뉴얼 한다던가 했을 때 이 형태는 힘들 것 같다고 판단
- 일단 노션이 가장 먼저 떠올랐는데 Headless CMS 라는 것에 대해 알게 되어 조사 해보려고 한다.
3. 리팩터링 책
- 챕터2를 통해 리팩터링이 뭔지, 언제, 어떻게, 왜 하는지에 대해 읽었다.
4. 운동
- 어느정도 습관이 형성되어 일주일에 4번 크로스핏을 나갔다. 크로스핏 한 지 약 3개월 째인데 식욕도 많이 늘고 활력이 많이 올라왔다고 느끼는 중. 그래서 혼자 공부함에도 많이 늘어지지 않으면서 하루를 보낼 수 있어 만족도가 높다.
5. 과몰입 방지턱
- 내가 재밌어하는 것을 시작하면 과몰입하는 경향이 있다. 지지난 주에 자바스크립트 과제를 3~4시간 가만히 앉아 구현해버리고 이랬다. 빠르게 목표를 달성할 수 있다는 점도 있지만 내가 느끼기에 이 방식은 에너지 소모가 심해 몇 시간 딱 집중하고 그 후에 아무것도 못해 효율이 좋지 않다고 느꼈다. 이전부터 느꼈던 나의 단점이다.
- 그래서 타이머를 하나 사봤다. 뽀모도로 공부법에 대해 알게되어 이 방법을 사용하면 과몰입과 너무 긴 휴식시간을 가지는 문제를 해결할 수 있겠다 싶었다. 45분 집중시간 15분 휴식시간으로 만들어서 템포를 조절하고 있다. 이렇게 해서 하루에 쓸 수 있는 시간이 늘고 있다.
Feeling
설계의 중요성
이번 주 시작할 때 계획할 때는 일기예보 앱에 그렇게 많은 시간을 할당하지 않을 거라 생각했다. 그래서 일기예보앱:블로그 작업을 5:5로 설정했다. 그 이유는 숫자 업앤다운 게임을 만들며 컴포넌트 형식을 만들어두어 이번에도 그대로 활용하면 되겠다 생각했고, SPA는 작년에 한 번 만들어봤기 때문에 이번에 그리 시간이 많이 걸리지 않을 거라 판단했다. 이제 이거 빼면 API 연동인데 회사에서 밥 먹듯이 한 것이기 때문에 괜찮다고 판단했다.
But,, 무난히 계획대로 만들다가 상세페이지 작업을 하면서 좀 여러 고민들이 들었다. 목록 페이지랑 상세 페이지에 공용으로 똑같은 부분이 있는데 이걸 어떻게 빼지? API 서비스를 Component 내부에 냅다 구현해두었는데 이게 맞나? 분리해야겠다. 라우터에 동적 라우팅 기능을 구현을 안했네..? 이런 생각들이 들고 고민하고 개선하는데 시간이 들었다. 기능 구현을 다 한 상태에서 조금 더 생각해서 코드를 개선할 수 있는 시간 확보가 안된 것이 매우매우 아쉬웠다. 계획 단계에서 애초에 생각을 많이 하고 들어갈 걸.. 후회했다. 왜냐하면 미리 생각해뒀더라면 블로그 만들기, 리팩터링 책 읽기에 시간을 많이 못 쓴 것에 슬퍼하지 않을 수 있었을 것이기 때문이다.
새로운 기술을 접했을 때 막막함
블로그 기술스택을 선정하고 Next.js 공식문서를 읽는데 정말 하나도 모르겠더라.. Next.js에 대해 알고 있는 정보가 거의 없다보니 약간 멍때리게 되었다.. 그리고 급격한 불안감..! 완전 새로운 프레임워크를 익히려면 어떻게 접근해야하지?? 유튜브나 블로그의 튜토리얼을 따라해보기? 공식문서 훑어보기?? 일단 지금 생각으로는 Next.js에서 제공하는 레슨이 있어서 (https://nextjs.org/learn) 이걸로 개념 쓱 훑고 본격적으로 블로그 구현을 시작하는게 어떨까 생각중이다.
스트레스??
이번주에 급격히 엄~청 옹졸해진 내 자신을 발견했다. 과제를 하면서 구글 검색을 많이 했고 다양한 분들의 블로그를 접하게 되었다. 티스토리도 있고 개인 블로그들도 있었는데, 다들 정보성 글이나 기술 아티클들을 엄청 잘 쓰시는 거다! 와 되게 어려운 or 재밌는 문제를 마주했는데 저렇게 해결하셨군 재밌다 생각이 들고 그 담에 난 왜 저렇게 못쓰지.. 이렇게 되었다. 그리고 코드를 볼 때 내 거랑 비교하면서 우월감을 느끼거나 질투를 느끼는 현상이 일어났다.
회사에서 일할 때도 이런 생각들이 문득 들때도 있었는데 그 때는 '모르겠고 제품에만 신경쓰자' 이런 생각으로 넘겼는데 지금은 혼자 공부해서 이런 생각들이 슬그머니 올라오면서 커지는 것 같다. 주로 스트레스가 쌓이면 이런 생각이 올라와서 일단 어제 크로스핏 나가서 폭풍 운동하고 사람들로부터 에너지 받아서 스트레스를 해소했다. 하지만 그것과 별개로 남과의 비교 ← 이거는 조금 어떻게 해야할 듯. 이번주 숙제 중 하나이다.
Finding
- 처음에 좀 확실히 계획하고 다방면으로 생각하는 시간을 갖는 것이 좋겠다. 바로 코드 작성으로 돌입해버리니 헤매는 시간이 늘었다.
- 규칙적인 운동이 꽤나 활력을 준다는 사실
Future Action
- 프로젝트 시작 전 계획 세우기 예상되는 문제와 해결 방법에 대해 미리 고민
- Next.js 학습 공식 lesson으로 전체적인 개념 공부
- 스트레스 관리 & 남들과 비교를 어떻게 승화시킬지 생각..