y_flm's Blog

3. 기술적 성과 (Technical Achievements)

• 기술 스택
  - Front-End : JavaScript, React
  - Back-End : Express.js, PostgreSQL
• 구현한 주요 기능
  - 레이아웃 구현 : Container 컴포넌트를 만들어서 공통 여백 등의 레이아웃 설정
  - 모달 레이아웃 구현 : 기본적인 모달의 레이아웃 UI를 구현하여 공통 컴포넌트로 구현
  - 사용자 편의 기능 추가 : 투자 수정/삭제 시 비밀번호 입력 인풋에 바로 포커스 되도록 구현, 비밀번호 입력 후 엔터키로 동작 가능하도록 구현, 수정/삭제 시 컨펌 모달을 통해 한 번 더 데이터 확인
  - 투자 기능 구현 : 사용자들이 모의 투자할 수 있도록 구현하고, 그로 인해 저장된 값을 수정 또는 삭제할 수 있도록 구현

4. 문제점 및 해결 과정 (Challenges & Solutions)

• 문제점​ : post 진행 시 MockInvestor 모델에서 id 필드가 중복된다는 오류 발생
• 해결 과정
  ① 에러가 어디 부분부터 발생하는 것인지 콘솔에 로그를 출력
  ② 에러 추적 → 백엔드의 MockInvestor id 필드가 문제인 것을 인지
  ③ 인터넷 검색을 통해 같은 사례 발견
  ④ postreSQL에서 내부 시퀀스가 자동으로 생성되는 id를 추적하도록 설정
  ⑤ 문제 해결
• 문제가 발생했던 원인 
  → 현재 id 필드는 Autoincrement 속성으로, 새로운 레코드가 추가될 때마다 id 값이 자동으로 1씩 증가, 따라서 마지막 생성 id 값을 추적해야 그다음 값으로 id가 생성 가능한데, 이 id 값을 추적하지 못하고 있었기 때문에 postgreSQL에서는 id를 다시 1부터 생성하려고 해서 중복 오류 발생했던 것입니다.
  
  → 왜 추적을 못했는지 : 처음 Mock Data에서 id 필드도 미리 설정하여 삽입했는데, postreSQL에서 설정된 값을 인식하지 못했기 때문에 추적할 수 없었습니다.
• 참고 : https://github.com/prisma/studio/issues/370#issue-579970556

5. 협업 및 피드백 (Collaboration & Feedback)

• 팀으로 프로젝트를 진행하면서, 원활하게 의사소통이 되었던 것이 프로젝트를 진행하는 데에 있어서 가장 도움이 되었던 것 같습니다. 또한, 혼자가 아닌 여러 명으로 개발을 하는 것이 처음이다 보니 폐를 끼치지는 않을까 걱정이 앞섰지만 모르는 부분이 있거나 문제가 발생하면 서로에게 도움을 주고, 또 도움을 받으며 팀원들끼리 서로 힘이 되었던 것 같아서 좋은 경험이었습니다.
• 처음으로 브랜치 컨벤션도 정하고, 그에 맞게 브랜치를 생성 및 관리하다 보니 Git에 대해 많이 배울 수 있었습니다. 특히, 이론으로 배웠을 때는 단번에 이해되지 않았지만 직접 브랜치 전략도 겪어보고, 충돌도 해결해 보면서 Git에 좀 더 대해 이해하고 배울 수 있었습니다.
• 코드 리뷰를 해보려 하였지만 오타를 발견하는 것 외에는 리뷰할 수 없었습니다. 가지고 있는 지식과 경험이 부족하기 때문에 다른 팀원의 코드를 보고 개선점이나 문제를 파악한다는 것이 쉽지 않았습니다. 그렇기 때문에 더 많이 복습하고 공부하여 다음 프로젝트에서는 다른 팀원의 코드를 파악하고 제대로 된 리뷰를 해보고 싶습니다.

6. 코드 품질 및 최적화 (Code Quality & Optimization)

• 숫자 가독성 향상 : 모달에 투자 금액 입력 시 자동으로 콤마(,)를 입력하도록 구현
• 커스텀 훅 사용 : 컴포넌트마다 데이터를 불러오는 것이 아닌, 데이터를 불러오는 커스텀 훅을 통해 하나의 훅으로 재사용이 가능하도록 구현
• 유지 보수성 : 다른 팀원이 볼 때도 이해가 가능하도록 주석으로 간단한 설명을 입력하였고, 최대한 코드 구조를 일관되게 유지하면서 코드 작성

7. 향후 개선 사항 및 제안 (Improvements & Recommendations)

• 랜딩 페이지 제작 : 사용자가 웹 페이지에 접속하면 처음으로 보이는 페이지이기 때문에, 눈에 확 들어오는 랜딩 페이지를 제작하고 싶었습니다. 하지만 시간 관계상 제작하지 못했고, 추후 만들게 된다면 시선을 끄는 랜딩 페이지를 제작해 보고 싶습니다.
• 코드 리팩토링 : 기능 구현과 테스트를 중심으로 진행하다 보니 코드 리팩토링의 기회가 없었습니다. 시간이 있었다면, 중복이 되는 부분들을 공통 컴포넌트로 구현하는 등의 리팩토링을 할 수 있었으면 좋지 않았을까 하는 아쉬움이 있습니다.

8. 본인이 잘했다고 생각하는 PR

• https://github.com/season2-3team/season2-View-My-Startup-3team-FE/pull/14#issue-2558658642
• 선정 이유​ : 작업을 하다 보면 본인도 모르게 여러 파일을 수정할 때가 많기 때문에 여러 기능이 합쳐진 PR을 올렸던 경우가 많았습니다. 하나의 PR에는 하나의 기능으로 작성하고 싶었지만, 아직 익숙지 않아서 생각한 대로 진행하지 못했던 경우가 많았습니다. 이 PR은 하나의 기능에 필요한 부분만 수정하고 커밋 하여 PR을 올린 것이 좋다고 생각해서 선정하게 되었습니다.

• 피카픽포토는 디지털 시대에 맞춰 포켓몬 사진과 일러스트를 디지털 카드 형태로 거래하고 소장할 수 있는 새로운 수집 플랫폼입니다.

​       전통적인 포켓몬 카드 수집의 재미를 디지털 자산으로 확장하여, 희귀하고 독특한 카드를 찾아 나만의 컬렉션을 만들 수 있습니다.

​       기존 수집 방식을 디지털 환경에 맞게 재구성하여, 수집의 가치를 새로운 방식으로 경험할 수 있도록 돕습니다.

3. 기술적 성과 (Technical Achievements)

• 기술 스택
  - Front-End : JavaScript, Next.js, React, HTML, CSS
  - Back-End : Express.js, PostgreSQL
  
  
• 구현한 주요 기능
  - 포토 카드 컴포넌트 : 포토 카드 UI 및 props로 필요한 카드만 사용할 수 있도록 구현
  - 모달 레이아웃 : 기본적인 모달 레이아웃 구현 및 모달 열기/닫기 애니메이션 추가
  - 카드 리스트 모달 : 수량이 0인 카드는 선택 시 수량이 없다는 알림이 표출되도록 구현
  - Input 컴포넌트 : 기본 input, textarea 등등 props로 다양한 인풋 스타일을 사용할 수 있도록 구현
  - 필터링 : 구현 되어있는 컴포넌트를 이용하여 필터는 단일 선택만 가능하고 필터 초기화 버튼을 누르면 값과 선택된 값이 초기화되도록 구현
  - 등급 컴포넌트 : 사용되는 곳마다 적용되는 스타일이 달라서 props를 이용해 해당 스타일이 적용되도록 구현
  - 무한 스크롤링 : 마이갤러리 / 나의 판매 포토카드 페이지에 무한 스크롤 기능 구현
  - 유효성 검사 훅 : 포토 카드 생성 시 데이터 유효성 검사 커스텀 훅 구현

4. 문제점 및 해결 과정 (Challenges & Solutions)

• 문제점 : 무한 스크롤링 구현에 대한 어려움
• 해결 과정
  ① 여러 무한 스크롤링 구현 예시를 검색
  ② 기존에 많이 사용한 페이지네이션 방식을 생각하며 코드 작성
  ③ 구상한 흐름 방식을 생각하며 코드 작성
  ④ 오류 발생 시 코드의 흐름을 다시 파악해보며 코드 수정 반복
  ⑤ 무한 스크롤링 구현 완료

5. 협업 및 피드백 (Collaboration & Feedback)

• 의사소통 : 초급 프로젝트를 진행했을때도 의사소통은 많이 하였지만, 이번 중급 프로젝트를 진행하며 더 많은 의사소통을 한 것 같습니다. 사소한 것일지라도 먼저 팀원들에게 조언을 구했고, 모르는 부분이나 헷갈리는 부분이 생긴다면 주저하지 않고 소통하는 것이 정말 좋았습니다. 프로젝트를 하면서 나날이 의사소통에 대한 중요성을 깨닫게 되는 것 같고, 깨달음과 동시에 의사소통 능력도 늘어가는 것 같아 유익한 시간이었습니다.

• 요구사항 파악 : 초급 프로젝트 때와 비교하여, 본격적인 기능 구현 전에 요구사항을 파악하긴 했지만 프로젝트를 진행하면서 생기는 의문점과 생각치 못했던 기능들이 있었습니다. 이로인해 시간이 더 소요되었고 요구사항 파악이 미흡했다고 느꼈습니다. 그렇기 때문에 다음 프로젝트에서는 더 세세한 기능 파악이 필요할 것 같습니다.

• 역량 파악 : 프로젝트는 시간을 효율적으로 사용하는 것이 중요하다고 생각합니다. 이번 프로젝트에서는 매일 TO-DO List는 작성했지만 전체적인 계획을 세우지는 않았습니다. 그래서 정해둔 기간 내에 기능 구현이 가능한지 역량을 파악할 수 있는 기회를 놓친 것 같습니다. 앞으로는 먼저 전체적인 기능 구현 계획을 세우며 본인의 역량을 파악하는 것이 필요할 것 같습니다.

7. 향후 개선 사항 및 제안 (Improvements & Recommendations)

• 코드 리팩토링 : 기능 구현을 완료하고 발생하는 오류를 지속적으로 확인하고 수정하다보니 시간적인 여유가 많이 없었습니다. 그렇기 때문에 코드 리팩토링을 많이 진행하지 못한 것이 아쉽습니다.

8. 본인이 잘했다고 생각하는 PR

• https://github.com/2-FavoritePhoto-2/2-FavoritePhoto-2-FE/pull/11
• 선정 이유 : 중급 프로젝트를 진행하면서 대부분의 PR이 하나의 기능에 초점을 두고 작성되었습니다. 그 중에서도 이 PR이 하나의 기능에 맞춰 작성하면서도 기능에 대한 설명과 스크린샷을 같이 첨부하여 작성했기 때문에 리뷰어가 보기에 더 편하고 이해가 쉬웠던 것 같습니다.

3. 기술적 성과 (Technical Achievements)

• 기술 스택
  - 공통
     Environment : VS Code, Prettier, ESLint, TypeScript, npm
     Infra: EC2, PM2, Nginx, Let's Encrypt SSL, GitHub Actions, docker, Git & GitHub, Amazon S3
     Real-time: SSE (Server-Sent Events), Socket.io
     Tools: Notion, Slack, Discord, Gather, Zoom
  
  - Front-End: Next.js, Tailwind CSS, React Query, Axios, Figma
  - Back-End: Node.js, NestJS, Express.js
     Authentication: JWT, OAuth 2.0, Passport, bcrypt, async-local-storage
     Scheduling: @nestjs/schedule
     Queue: BullMQ
     Email: Nodemailer
     Database: MongoDB, PostgreSQL, Redis
     Etc: Swagger
  
  
• 구현한 주요 기능
  - 무한 스크롤링 : useInfiniteQuery와 react-infinite-scroller 라이브러리를 이용하여 무한 스크롤링 구현
  - RoleGuard 훅 : 로그인 시 해당 Role에 따른 접근 제한 훅 구현, 접근 제한 경로로 접속 시 비회원은 로그인 페이지로,
                               회원은 접근 제한 페이지로 이동
  - 체크박스 필터 : 서비스, 성별, 견적 요청 방식, 지역으로 필터링이 가능
  - Dropdown 컴포넌트 : 필터와 정렬 기능을 수행. 부모 컴포넌트인 Dropdown 컴포넌트 아래로 DropdownMenu,
                                         DropdownList 컴포넌트를 추가하여 컴포넌트 세분화
  - 필터링 : 필터는 다중 선택 가능, 필터 초기화 버튼을 누르면 값과 선택된 값이 초기화되도록 구현
  - 유효성 검사 훅 : 견적 보낼 시 데이터 유효성 검사 커스텀 훅 구현
  - toast 라이브러리: toast 라이브러리를 활용하여 알림 UI 개선

4. 문제점 및 해결 과정 (Challenges & Solutions)

• 문제점 : 사용자 로그인 시 데이터 불일치
• 리액트 쿼리를 통해 데이터 페칭을 처리하는 과정에서, 사용자가 로그아웃하고 
  다른 사용자로 로그인할 때 이전 사용자의 데이터가 화면에 표출되었습니다.
   
  새로고침을 하지 않으면 현재 로그인한 사용자의 데이터로 업데이트되지 않고, 
  이전 사용자의 데이터가 그대로 남아 있었습니다.
   
  [문제 분석]
  리액트 쿼리는 쿼리 키를 기준으로 캐시된 데이터를 관리하는데,
  만약 쿼리 키가 고유하지 않으면 여러 사용자가 동일한 쿼리 키를 사용하면서 
  이전 사용자의 데이터를 계속해서 가져올 수 있다는 사실을 간과하고 있었습니다.
   
  따라서 로그아웃 후 다른 사용자가 로그인하더라도 쿼리 키가 동일하게 유지되며, 
  이전 사용자의 데이터가 캐시에서 계속 반환되어 화면에 표시되었던 것입니다.
   
  [해결 과정]
  쿼리 키에 사용자 고유 ID를 추가
  : 각 사용자의 데이터를 구분하기 위해 쿼리 키에 고유한 값인 
     userId를 포함시키는 방식으로 문제를 해결했습니다.

​

5. 협업 및 피드백 (Collaboration & Feedback)

• 일정 파악 : 프론트엔드 팀장으로써 어느 정도 일정을 파악하며 진행하고 있었지만, 일정 내에 구현이 늦어지는 팀원에게 너무 무리와 부담을 주는 것 같아 일정에 관해 확실하게 말하지 못했습니다. 이로써 발표 전날까지 코드를 수정하는 일이 생겼고, 불완전하게 마무리를 한 것 같아서 아쉽습니다.
• 무리한 역할 : 조금 많은 역할을 맡게 되어서 버겁기도 했지만, 하겠다고 한 이상 마무리를 하는 것이 맞다고 생각했습니다. 하지만 이로 인해 정작 제 코드를 수정할 시간이 줄어들고, 정한 일정에 맞지 않게 진행되는 것을 느끼면서 제 자신이 무리를 했다고 깨달았습니다.이렇게되면 자신 뿐만 아닌 팀원들에게도 피해를 끼치는 일이 될 수 있겠다 느꼈고, 다음부터는 적당한 분량을 맡으면서 퀄리티와 버그를 줄이는 것이 더 좋을 것 같다는 생각을 하게 되었습니다.

6. 코드 품질 및 최적화 (Code Quality & Optimization)

• 유지 보수성 : 보는 사람들의 이해를 돕기 위해 최대한 각 컴포넌트, 페이지마다 너무 길거나 복잡한 로직을 단순화시키거나 보기 쉽게 작성했습니다.
• 중복 코드 제거 : 최대한 중복된 코드를 줄이기 위해 공통적으로 쓸 수 있는 부분은 따로 빼서 사용했습니다.
• 코드 리팩토링 : 기존 코드를 더 깔끔하게 리팩토링하고, 쿼리의 경우 여러 곳에 동일하게 쓰이는 부분이 많아서
                          따로 쿼리 파일을 모아 관리하였습니다. 이로 인해 중복 코드를 더 줄일 수 있었습니다.

​

7. 향후 개선 사항 및 제안 (Improvements & Recommendations)

• 상수 활용 : 클래스네임 같은 경우, 동일한 스타일을 쓰게 되는 경우가 많았는데 이를 따로 상수로 빼서 사용하고 싶었지만 시간이 부족하여 진행하지 못했습니다. 이 점이 아쉬웠고, 나중에는 미리 상수로 작성한 뒤 골라쓰는 방식으로 하는 것이 좋을 것 같다는 생각을 했습니다.

8. 본인이 잘했다고 생각하는 PR

• https://github.com/FS-part4-1team-FitMate/FitMate-FE/pull/60
• 선정 이유 : 작성한 PR 제목에 맞춰서 해당 기능만을 수행한 PR이었고, 수정한 파일들 각각 어떤 부분을 수정했는지 간략히 적어놓았기 때문에 리뷰어가 보기 편했을 것이라 생각했습니다. 또한 제가 리뷰를 하게 될 경우, 이런 형식의 PR 내용을 본다면 편하겠다고 생각해서 선정했습니다.