[Project : HQRoutine] 3차 스프린트 회고

2023 Series

[ 2023 ] CheckPoint, 2023년

---

---

본문

드디어 사전조사를 마치고 개발에 들어간 3차 스프린트이다

이번 주에는 흥미로운 일들이 있었다

 

GPT에 대한 간단한 고찰

여러 사전조사를 하고, 페이지 퍼블리싱을 하면서 많은 고난과 역경의 수준을 조금 낮춰 준 도구가

바로 Chat GPT가 아닌가 싶었다

그래서 많은 활용 끝에 어떠한 특이점을 발견하였고, 이를 정리한 탐구 글을 하나 작성했다

[GPT, 어떻게 사용해야할까?] GPT3에 대한 탐구

추가적으로 많은 양의 정보를 빠르게 수집하는 데에도 도움이 되었다

사전조사 필수 도구, GPT

Next.js 의 새로운 13버전, 많은 변화가 있다는데..

Next.js 에서 새로 나온 13버전이 12버전과 비교해 보았을 때 무엇이 좋은지,

왜 추천을 하고 있고 어떤 변경점들이 있는 지에 대한 공식 문서를 읽어보았다

Next만의 특수한 페이지 디렉터리 대신에 본래의 src 내에서 돌아가도록 바뀐 부분이 인상깊었다

추가적으로 여러 변경점들이 있었지만 아직 Next에 대한 학습 미숙으로 인해 느낀점이 정리되지는 않았다

 

React Lifecycle

리액트의 라이프사이클, 리액트를 학습한다면 굉장히 중요한 개념으로 작용되는 이 개념은

요즘 권장하고 있는 함수 컴포넌트가 아닌 클래스 컴포넌트가 많이 다루어졌을 때 사용되었던 개념으로

웹에서 컴포넌트가 실행되고, 불러와지고, 사라지고 하는 그런 일련의 과정 중에 나타나는 것들을 알아볼 수 있었다

프리온보딩 프론트엔드 세션 4월에 있는 사전과제를 통해 알아보았고, 꽤 중요한 개념이라는 것을 알았다

 

New Hooks in React 18

리액트 18버전이 나오면서 새로운 Hook들이 나와있고, 이에대해 자료를 모아보았다

 

이 외에도 여러 사전 정보들을 모으면서 기반지식들을 쌓았다

 

CSS 전처리기를 쓸까, 말까 고민이 되었다

이번 주에 정해진 것들 중 CSS 전처리기로 Sass를 사용하기로 하였다

그냥 CSS랑 다를 것이 무엇이 있는가 라고 생각을 하고 있었는데

퍼블리싱을 진행하면서 왜 전처리기를 쓰는 지 알 수 있었다

분명 전처리기라서 한 번의 컴파일을 더 해야한다는 단점이 있었지만

페이지 태그 구조 그대로 .scss 파일에 넣어두고 코딩을 했더니 굉장히 편리하고도 안정감있게 페이지를 만들 수 있다는 것을 알았다

역시, 멀리서 보았을 때는 무엇인 지 잘 몰라도 직접 써봐야 그 장점을 알 수 있다는 것을 다시 한 번 더 깨달았다

 

깃 메세지 컨벤션을 적용했다면 .gitmessage.txt도 사용해야지!

깃 메세지 컨벤션을 이전에 사용하던 프로젝트에서 참고하여 사용하기로 하였다

이번에는 깃 메세지 양식을 프로젝트에 적용해두고 사용하기로 하였는데, 방법은 다음과 같았다

1. .girmessage.txt 파일 생성

2. 컨벤션 내용을 파일 안에 옮겨넣기

3. 모든 내용 작성이 끝났다면 저장 후 git config commit.template .gitmessage.txt 를 커맨드에 입력하여 사용하도록 하기(--global 이 붙어있었지만 이 프로젝트에서만 사용할 예정이므로 빼고 커맨드를 입력했다)

4. 후에 커밋을 하면 이 텍스트 파일이 뜨며, #을 지우고 커밋 메세지를 입력하고 창을 닫으면 커밋이 진행된다

 

VSCode Extensions, IntelliJ Plugins

VSCode의 꽃이라 불리는 이 확장 프로그램들과 IntelliJ의 꽃이라 불리는 여러 Plugin들이 있다

지금까지 혼자 어찌저찌 알아보고 적용시켜왔던 것들을 Techeer의 인원들과 함께 공유해서 더 많은 정보를 얻어보자 하였고

생각보다 좋은 것들을 많이 추천받아서 기분이 참 좋았다

그 순간부터 이상하게 갑자기 집중이 잘 되고 사람에 활기가 돌기 시작했는데 내 숨어있던 특징을 발견한 것일지도 모르겠다고 생각했다

와우!

Microsoft에서 노션에 대항하기 위해 칼을 갈았습니다, Loop

현재 아직까지는 오픈베타 테스트 중인 프로그램이긴 하지만 나와있는 기능들만 보았을 때 굉장히 강력한 성능을 보일 것으로 예상된다

Loop는 마이크로소프트에서 개발하고 있는 Notion과 비슷한 프로그램으로 Notion의 기능들과 AI 를 탑재하는 것까지는 Notion과 같

하지만 차이점이라고 하면 같은 회사에서 만든 Office 365를 통한 협업 기능 대폭 강화라고 생각한다

특히나 학교 계정을 통해 Office365를 지원받고있는 학생들이 이 프로그램을 사용한다면 엄청난 이점이 되지 않을까 싶다

특히 Notion의 단점 중 하나인 .docs 파일로 출력하기가 힘든 부분(Office365s application)을 감안해 보자면 이 부분이 여러 이점 중 하나가 될 것 같다

아직 정식 출시되지는 않았지만 출시된다면 한 번쯤 사용해보는 것도 좋을 것 같다

 

GitHub 꾸미기 완료!

지난 주 회고에서 깃허브 꾸미기를 하겠다고 했던 것 같은데 그래서 진짜 깃허브를 꾸몄다

일단은 그럴싸하게 만들어 두었고, 점점 더 멋지게 만들어나갈 예정이다

아래 링크를 타고 들어가면 구경해볼 수 있다

TMInstaller - Overview

꽤 그럴싸하다

 

참 재미 있었다

그래서 열심히 했던 나에게 참 잘했어요 도장을 찍어주기로 했다

 

와! 재밌다!

---

TroubleShootings

개발환경 초기세팅

그렇게 금요일까지의 모든 사전조사 과정이 진행되고

개발환경 초기세팅을 진행하던 중 한 가지 문제가 생겼었다.

먼저 프로젝트를 생성하고 리모트를 등록하여 깃 레포지토리에 등록하던 과정에서 커밋이 꼬인 것이었다.

그래서 결국 다시 처음부터 레포를 등록하는 일이 있었다

 

npm i 를 하지 않을 경우

간단한 이슈가 있던 후 만들어진 초기 세팅이 된 레포지토리를 다시 가지고 왔을 때 빨간 줄이 떠 있었다

VSCode 의 확장 프로그램 중 하나인 ErrorLens를 통해 확인할 수 있었고,

import 가 되지 않은 것에 대한 문제임을 확인할 수 있었다

그래서 때마침 레포지토리를 Pull 받은 이후에 npm i를 이용하여 패키지들을 받아오지 않았음을 알고 간단히 해결할 수 있었다

간단한 이슈였지만 그래도 TroubleShooting 문서에 적어두어 후에 있을 문제를 미연에 방지하고자 하였다

 

이제 Page publishing은 GPT에게 요청 해보자

GPT가 나온 이후 가장 혁신적으로 도움이 되고 있는 부분이 바로 이 코드분석 및 약간의 변화를 주는 부분이라고 생각한다

퍼블리싱을 할 때 미리 어느 정도의 코드를 직접 짜서 틀을 만들어두고 그 후에 코드와 함께 요청사항을 넣어 보내 보았다

이에 대한 추천하는 방법을 아래 사진과 같이 보내주는 GPT를 볼 수 있었다

무조건적인 맹신은 좋지 않지만 그래도 정답을 주긴 한다

특히나 이 부분이 빛을 발하는 부분이 요소 배치를 하는 부분인데, flex와 같은 정렬, 배치 부분에 대해서 도움이 많이 되었다

---

 

3차 스프린트를 마치며

드디어 시작 된 퍼블리싱, GPT를 통해 많은 도움을 받아가며 개발속도가 더 빨라졌음을 느낄 수 있었다.

아직 모든 부분을 맡기기엔 조금 그렇고, 코드 분석 혹은 약간의 변경사항을 제안할 때 사용하기 용이하다

이번 스프린트 까지 개발을 시작 하기 전에 필요한 많은 것들을 알게되는 주 라고 본다면,

다음 스프린트부터는 본격적인 개발이 시작되는 주 라고 보면 될 것 같다

 

무언가 한 일이 없던 것 같았지만 적고보니 꽤 많은 일을 한 것 같다

이 프로젝트의 마지막에서 어떤 결과를 만날 수 있을 지 기대하며 글을 마치도록 하겠다