2차 프로젝트 회고

🧑‍💻 프로젝트 기간: 12/5 ~ 12/24

💁 프로젝트 설명

🎯 프로젝트의 목적

2차 프로젝트에서는 TS 기반의 React를 사용하여 백엔드에서 제공해주는 API를 이용해 웹사이트를 만들어야 했다.

제공되는 API를 사용하여 어떤 웹사이트를 만들 수 있을까 고민하다 타임캡슐이라는 기능을 도입한 새로운 형태의 SNS를 만들어보기로 결정하였다.

우리가 만든 js 라이브러리 React를 활용한 타임 캡슐 SNS Capsy는 단순히 일상을 기록하는 것을 넘어, 사용자 간의 추억을 공유 하며 서로 공감할 수 있는 새로운 형태의 네트워크를 구축할 수 있다.

구현하고자 했던 기능

일반적인 SNS가 가지고 있는 기능

인증 관련 기능(로그인, 회원가입, 비밀번호 변경,로그아웃)
게시글 작성,수정,삭제 기능
좋아요, 댓글, 팔로우 기능
사용자, 게시글 검색 기능
다크모드 기능
마이 페이지, 사용자 정보 페이지
내 정보 수정 기능(프로필 이미지, 닉네임 수정)
알림목록 기능(댓글, 좋아요, 팔로우)

타임캡슐 기능

개봉될 날짜와 묻어둘 위치를 정하고 지정된 날짜에 개봉
타임캡슐 알림 예약 기능(개봉일에 사용자에게 알림 기능 제공)
카카오맵 API를 활용한 지역별 타임캡슐 확인

기술 스택

React : 18.3.1
Tailwind : 3.4.15
Axios : 1.7.9
Zustand : 5.0.2

관리

Github
Notion
Zep

📜 KPT 회고

💪 Keep

1. 개발 전 팀원간 규칙정하기

개발을 시작하기전 통일화할 부분들에 규칙을 정하고 들어갔다.

네이밍 컨벤션(변수, 함수 네이밍 방식- Ex.Camel Case)
공통 스타일링( css- BEM 방법론, .prettierc 설정, 기본 폰트 설정, 주석처리)
git 컨벤션(커밋 형식 통일화)
전반적인 폴더구조 정하기

프로젝트 최종 폴더 구조

규칙을 정하고 들어가니 협업을 하는데 있어서 어려운 부분들이 줄어들었고 자연스럽게 개발에 더 집중할 수 있었다.

2. 개발 전 일정 관리

프로젝트가 2주 반 동안 진행되었기 때문에 개발을 시작하기전에 세부적인 일정을 정하고 들어가야 했다.

우리는 한주 단위로 스프린트 과정(기능 개발)과 QA(기능 점검)과정을 진행하면서

오류가 나거나 수정해야할 부분들을 보완할 수 있었다.

그 과정에서 백로그를 작성하였다.

백로그

프로젝트의 목표를 달성하기 위해 필요한 모든 작업을 나열한 목록이다.

백로그를 작성하면서 얻는 이점

현재 팀원들이 개발할 부분들을 명확히 파악할 수 있다.
프로젝트의 진행 상황을 한눈에 파악할 수 있다.
효율적인 우선순위를 관리하여 중요한 작업을 먼저 처리할 수 있다.
QA를 진행할때도 백로그를 확인하며 수정해야할 부분들을 바로바로 확인해 오류를 최소화할 수 있었다.

3. 개발 전 User Story 작성

기획단계에서 주제와 구현할 기능이 모두 정해지고 개발에 들어가기전에 User Story를 작성하였다.

User Story란?

사용자의 요구사항을 간단하고 명확하게 표현한 문구

에자일 개발 방법론에서 많이 사용된다.

User Story를 작성함으로서 사용자가 글만으로도 기능들에 대해 이해할 수 있도록

사용자 관점에서 작성해봄으로서 앞으로 개발할 기능들이 머릿속에 한번 더 박혀 개발 단계에서 덜 고민할 수 있었던 것 같다.

4. 카카오맵 API 사용

이전부터 카카오맵 API를 사용한 웹사이트를 한번쯤 만들고 싶다는 생각을 하였는데

마침 이번 프로젝트에서 카카오맵을 사용하면 훨씬 멋있는 결과가 나올 것같아 마감일이 일주일 안남은 상황에서 팀원분들께 기능 추가를 건의드렸고 감사하게도 동의해 주셔서 막바지에 추가 개발할 수 있었다.

구글링을 하며 초반 세팅을 했음에도 지도가 띄워지지 않아 시간이 걸렸지만 여러 시행 착오를 거쳐 방법을 찾아냈다.

렌더링시 동적으로 카카오맵을 불러오는 script 태그 추가

// App.js

  useEffect(() => {

    const script = document.createElement("script");

    script.src = //dapi.kakao.com/v2/maps/sdk.js?appkey=${import.meta.env.VITE_KAKAO_APP_KEY}&libraries=services,clusterer&autoload=false;

    script.async = true;

    const loadKakaoMap = () => {

      // @ts-ignore

      window.kakao.maps.load(() => {

        // console.log("Kakao maps loaded successfully");

      });

    };

    script.onload = loadKakaoMap;

    document.head.appendChild(script);

    return () => {

      document.head.removeChild(script);

    };

  }, []);

초반세팅이 끝난 후 React 기반으로 지도에 사용할 수 있는 기능들을 설명해주는 [React kakao map sdk](https://react-kakao-maps-sdk.jaeseokim.dev/) 공식 문서와 여러 블로그들을 참고해가며 하나하나 기능을 덧붙였다.

이로인해 카카오맵 API를 사용하는 방법에 대해서 다는 아니지만 어느정도 알게 되었고 다른 프로젝트에 적용하는데도 어려움이 없을 것같다!

⚠ Problem

1. git pull 했을때 이전 코드가 사라지는 문제

개발전 담당할 파트에대해 분명히 나누었고 pr(pull request)를 하기 전에 팀원들과 소통하며 conflict를 줄이기 위해 노력하여 충돌 자체는 거의 일어나지 않았다.

그러나 pr된 branch를 pull하였을 때 이전에 있었던 코드가 사라져 기존에 구현됐었던 기능이 안되는 문제가 발생하여 하는 수 없이 이전 코드들을 찾아가 코드를 바꿔야 했다.

이 문제에 대해 고민해본 결과 pr을 하기전 다른 팀원이 pr한 코드를 pull하지 않고 pr을 해 생기는 문제였던 것같다.

이러한 문제를 최소화하기위해 다음 프로젝트 때는 이 문제에 대해 사전에 얘기해 규칙으로 정해놓는 것도 좋을 것같다.

2. 메인 페이지 검색 기능

메인페이지에서 사용자를 검색할때마다 사용자의 이름과 관련된 사용자가 리스트 형태로 보여지도록 구현하였는데 만약 사용자가 굉장히 많다면 성능적인 측면에서 좋지 않을 것이다.

입력값이 바뀔때마다 api를 호출하는 것이 아니라 쓰로틀 기법을 사용하여 특정 시간 단위로 api를 호출하는 것이 성능적인 면에서 훨씬 좋을 것같다는 아쉬움이 남았다.

3. 스켈레톤 UI 미사용

api를 호출해서 사용자 목록을 불러오기전까지의 시간동안 목록을 불러오는 loading화면을 처리해줬으면 더 예쁜 UI를 만들 수 있었을 것같다는 아쉬움이 남았다.

ex.유튜브 로딩 화면

### 4. 배포된 사이트에서 새로고침을 하면 페이지를 찾을 수 없는 오류

리액트 서버를 netlify를 통해 정상 배포했다.

이때 다른 페이지로 이동 후 새로고침을 하면 아래와 같은 에러 메시지가 나타난다.

![](https://velog.velcdn.com/images/khw090/post/114c295e-3258-4efc-981f-73325f9fac7e/image.png)

page not found 는 404 에러로, 현재 url 에서 찾고자 하는 자원을 못 찾았을 때 발생한다.

🚀 Try

1. 배포된 사이트에서 새로고침을 하면 페이지를 찾을 수 없는 오류 처리

내 설정에서 리액트가 최초 접속할 때의 url 은 / 이다.

그리고 이 때 index.html을 읽는다.

즉 해당 url 에 대한 자원은 index.html 로 정해져 있다.

하지만 화면을 넘기면서 라우팅된 url이 /map , /edit이 됐을 땐,

각 url 에 맞는 자원이 존재하지 않는다.

즉, index.html 처럼 정해진 자원이 없다.

(react 는 single page application 이기 때문)

즉 /map , /edit 라는 url 에서 새로고침을 하면, / 와 달리 곧바로 내려줄 자원이 존재하지 않기 때문에 404 에러가 발생하는 것이다.

해결법

그렇다면 각 /map , /edit이란 url 에 곧바로 접근하더라도, 바로 index.html 을 보여주면 된다.

1) public 폴더 내부에 _redirects 파일을 생성한다.

![](https://velog.velcdn.com/images/khw090/post/a56f6373-d07a-49a1-81b4-d825f70b2c92/image.png)

2) 해당 파일 내부에 아래 코드를 작성한다.

~~~js

/* /index.html 200

~~~

어떠한 경로로 들어와도 ( /* ) , 200 상태코드를 내려주며, index.html 파일을 렌더링 하겠다는 의미이다.

git push하고 다시 빌드하면 NotFound 에러가 안나타나는 것을 확인할 수 있다.

또한 커스텀한 404페이지도 index.html을 거쳐서 제대로 나오는 것을 확인 할 수 있다!

디자인 너무 예쁘죠? 🤩

2. pr 템플릿 도입

물론 git 컨벤션을 이용해 어떤 내용을 pr했는지 알 수 있긴 하지만 pr 템플릿을 도입한다면

나중에 pr한 내용을 확인할때도 쉽게 이해 할 수 있을 것 같다.

느낀점

이번 2차 프로젝트는 주제 선정부터 직접 진행하고, 긴 기간 동안 작업하다 보니 초반 기획의 중요성을 크게 느꼈다. 효율적인 코드를 짜보겠다고 시작했지만, 기능 구현 자체에 시간이 걸려서 그 목표는 실패했던 것 같다.

하지만 주니어 개발자는 문제 해결 능력이 더 중요하다는 강사님의 말을 듣고, 처음부터 완벽한 코드에 집착하기보단 문제 해결에 집중하면서 실력을 쌓아가야겠다는 생각이 들었다.