rookieand/kuagora

express, react를 활용한 대학생 전용 질의 응답 커뮤니티입니다.

📑 이걸 왜 써야 하는지 궁금한 개발자, 백광인 (Rookie) 입니다.

모든 도구는 사용의 목적이 있습니다. 개발 또한 그렇습니다.
원리를 알면 결과를 파악하고 문제를 빠르게 해결할 수 있기에
내가 사용하는 도구에 대한 의문을 항상 가지려 합니다.

🖥 Current I'm Working at..

  Goorm (2023.08 ~ Full-Stack Engineer)

🔥 Current I'm Joined in..

  Nexters (2024.01 ~ 24th, 25th FE Developer)

🏷 My Tech Spec

kuagora's Issues

# Jest 라이브러리 설치 및 테스트

Topic

Jest 라이브러리 설치 및 활용으로 테스트 코드 작성 및 적용

Desc

기존 클라이언트 및 백엔드의 기능 테스트를 진행했던 방식은 정말로 단순 무식했다.
단순히 console.log 를 남발하는 것으로 기능이 정상적으로 작동하는지를 보았다니..
이제는 이러한 방식에서 벗어날 때다, Jest 라이브러리를 설치하고 이를 사용해보자.

TODO

• Jest 라이브러리 설치 및 package.json에 관련 cmd 추가
• 테스트 코드를 실제 작성해보고 정상적으로 테스트에 통과하는지 확인.

# WebSocket 연동 사전 작업

Topic

WebSocket 연동 사전 작업

Desc

• 로그인 진행 시 WebSocket HandShake 요청을 보내어 서버 간의 소켓 연동 진행
• Express 서버 내 WebSocket 관련 라우팅 작업 및 관련 로직 설계

TODO

• 로그인 진행 시 WebSocket Handshake 요청 진행
• 서버 내 Websocket 관련 라우팅 및 관련 로직 작성

# 클라이언트 내 API 유틸 함수 제작

Topic

클라이언트 내 자체적인 API 유틸 함수 제작

Desc

서버와 클라이언트 간의 HTTP 통신을 수행할 API 함수를 제작해야 한다.
GET, POST, DELETE, PATCH (UPDATE) 네 개의 케이스에 대한 유틸 함수를 제작한다.
추가적으로 Axios 인스턴스를 설정하여 BaseURL, AxiosResponse를 핸들링하고 결과를 전처리하여 가공한다.

TODO

• get, post, patch, delete HTTP 통신을 진행하는 API 유틸 함수 설계
• API 통신 결과로 받는 에러 및 결과 데이터에 대한 전처리 과정 수행
• 전역적으로 사용할 axios 인스턴스를 만들고, 인터셉터 설정 진행.

# 좋아요, 댓글 Rest API 및 기능, 레이아웃 구현

Topic

질문글에 포함된 좋아요 및 댓글 추가, 조회, 삭제 구현

Desc

질문글에 유저들이 누른 좋아요의 수량을 표기하고, 해당 유저도 좋아요를 누를 수 있도록 해야 함.
또한 기존에 좋아요를 눌렀던 경우 이를 UI에 반영하여 좋아요 유무에 대한 시각적 차이를 주어야 함.
서버 단에서는 좋아요 및 댓글 관련 Rest API를 구축하여 클라이언트에서 사용할 수 있도록 해야 함.

TODO

• 좋아요 관련 조회, 추가, 삭제 API 및 DB 컨트롤러 구현.
• 댓글 관련 조회, 추가, 삭제 API 및 DB 컨트롤러 구현
• 질문글 상세 페이지에서 좋아요 버튼을 추가하고, 좋아요 추가 / 취소 기능 구현
• 질문글 상세 페이지에 댓글 레이아웃을 추가하고, 채택된 댓글을 시각적으로 표기해야 함.

# Husky 라이브러리를 추가하여 컨벤션 체크 자동화.

Topic

Husky, commitlint, lint-staged로 lint 작업과 commit convention 체크 자동화

Desc

ESLint와 commitlint를 돌려, 기준에 미달되었을 경우 commit을 거부하도록 해보자.
Husky 라이브러리를 적극 활용하여 git hooks에 대한 기초적인 사용법을 익혀보자.

TODO

• Husky 라이브러리 추가 및 관련 설정 완료
• commitlint, lint-staged 라이브러리 추가 및 config 파일 작성
• code / commit convention 위반 시 commit이 막히는지 테스트

# 게시글 수정 / 삭제 기능 추가

Topic

게시글 수정 및 삭제 기능 추가

Desc

작성된 게시글을 수정하거나, 완전히 삭제하는 기능을 추가합니다.

TODO

• 작성된 게시글을 삭제하는 API를 제작하고, 이를 적용.
• 작성된 게시글의 내용을 수정하는 API를 제작하고, 이를 적용
• 작성된 게시글의 내용을 수정하는 페이지를 제작하고, 관련 기능을 적용

# React Portal 및 모달, 알림 기능 추가

Topic

React Portal 및 모달, 알림 기능 추가

Desc

• WebSocket 연동 실시간 알림과 Modal에 사용할 React Portal을 각각 추가하고, 공통된 스타일을 입힌다.
• 실시간 알림의 경우 페이지 우상단, 우하단 두 곳에 알림을 띄우도록 유도한다.
• Modal의 경우 배경을 반투명한 검은색으로 입히고, 내부의 규격을 일정하게 맞추어 지정한다.

TODO

• 새로운 글을 작성하고 이를 등록하기 전, 최종 확인을 요하는 Modal 설계
• 새로운 댓글을 작성하고 이를 등록하기 전, 최종 확인을 요하는 Modal 설계
• 내가 작성한 답글 채택 시 알림을 화면 우상단에 띄우도록 설계
• 내가 작성한 댓글을 삭제할 시 알림을 화면 우상단에 띄우도록 설계
• 두 개의 React Portal 추가 및 관련 Hook 설계

# 메인 및 로그인 페이지 레이아웃 디자인 및 제작

Topic

메인 페이지 및 로그인 페이지 디자인 및 제작

Desc

• 메인 페이지 레이아웃과 로그인 페이지 레이아웃을 Figma로 제작해야 함.
• 제작된 레이아웃을 style 파일에 개별적으로 작성하여 사용이 용이하도록 해야 함.
• 소셜 로그인 구현을 진행하고, 이를 로그인 페이지에서 사용 가능하도록 설정해야 함.

TODO

• 메인 페이지 레이아웃과 로그인 페이지 레이아웃을 css로 구현
• 제작된 레이아웃을 CSS로 치환하여 각 컴포넌트 별 style 파일 작성
• 상단 네비게이션 바를 추가한 후, 로그인 페이지 라우팅 작업 진행.

# 채택 / 미채택 글 분류 옵션 추가 및 적용

Topic

질문글의 채택 / 미채택 여부에 따른 결과 값을 보여주도록 API를 설계

Desc

현재 질문글 목록 열람에는 채택과 미채택 여부와 관계 없이 모든 글을 나열시켜 보여주고 있음
이를 채택 / 미채택 / 둘 다 보여주도록 정렬 기준을 신설하여 사용자에게 제공해야 함.
또한 질문글 목록을 필터링할 때도, 시간 / 인기 순과 채택 여부에 따른 필터링을 지원하도록 해야 함.

TODO

• 채택 / 미채택 정렬 옵션을 추가하고, 클라이언트의 요청에 맞는 결과를 API에서 제공.
• 질문 목록 페이지에서 채택 여부와 관련된 필터링 옵션을 제공
• 검색 결과 페이지에서 채택 여부와 관련된 필터링 옵션을 제공

# 질문글 목록 요청에 대한 Rest API 설계

Topic

질문글 목록 요청에 대한 Rest API 설계

Desc

• 메인 페이지에서 보여줄 질문 글 목록을 불러오는 Controller와 Route 를 추가해야 함.
• 특정 검색 (제목, 카테고리 등) 을 통해 나온 검색 결과 값을 처리할 Controller 가 필요함.
• 특정 질문 글에 달린 댓글에 대한 정보도 일괄적으로 요청을 통해 가져오도록 로직 설계

TODO

• 질문글에 소속된 댓글 목록의 경우에도 같이 불러올 수 있도록 작업
• 질문글과 관련된 Route 를 신설하고, 그와 관련된 Controller 를 제작
• 글의 제목, 카테고리 검색을 통해 조건에 맞는 질문글 목록을 불러오는 Controller 설계
• 질문글 정렬 기준을 추가 (시간 순, 추천 순, 댓글 순) 하여 조건에 맞는 검색 결과를 나열시킴.

# 질문글 목록 열람 및 신규 글 작성 페이지 제작

Topic

질문글 목록 열람 및 신규 글 작성 페이지 제작

Desc

• 지금까지 유저들이 작성한 질문글 목록을 그리드 형식으로 보여주는 페이지 필요
• 유저가 새로운 질문글을 작성하고, 이를 서버에 등록시키는 과정의 로직을 설계해야 함
• 추천 순, 최신 순과 같은 정렬 기준에 맞게끔 질문글 목록을 나열하여 보여주어야 함

TODO

• 작성된 질문글을 4칸 형식의 그리드 레이아웃 형식으로 나열된 페이지 제작
• 질문글 목록 조회, 질문글 세부 내용 조회, 신규 질문글 등록 관련 API 제작
• 검색창과 정렬 기준을 설정할 수 있는 셀렉터를 질문글 페이지 상단에 추가

# 키워드 및 검색 기능 구현

Topic

질문글에 특정 키워드를 달고, 이를 검색하는 기능을 구현

Desc

질문글에 최대 3개까지의 키워드를 달고, 이를 검색하여 찾을 수 있는 기능을 구현해야 함.

TODO

• 키워드 관련 엔티티를 신설하고, 질문글에 대한 릴레이션 신설
• 글 작성 시 키워드 또한 DB에 등록시키고, 이를 컨트롤러에서 제어
• 글 작성 및 키워드 추가 페이지를 구축하고, 관련 레이아웃도 설계
• 클라이언트 사이드에서 검색 진행 시 결과 받아오도록 API 설계
• 최신순/추천순 으로 정렬 기준을 세분화하여 검색 결과 나열
• 질문글 및 검색 결과 목록을 무한 스크롤로 열람할 수 있도록 설계

typeORM 기반 Entity 를 설계하고, 정상 작동 여부 확인

Issue

typeORM 기반 Entity 설계

Desc

DB Schema를 설계한 후, 이를 토대로 Entity 생성
각 Entity 별 Relation을 고려하여 Column Join 데코레이터 추가.

Progress List

• typeORM 기반 Entity 를 설계하고, 정상 작동 여부 확인
• MySQL과 typeORM 간의 연동을 체크하고, 테이블이 생성되는지 확인
• 서버 프로젝트가 정상적으로 작동하는지 디버깅

# 유저, 게시글 관련 DB Schema 설계

Topic

유저 및 게시글 관련 DB Schema를 설계하고, typeORM에 적용

Desc

• DB Schema를 설계한 후, 이를 토대로 Entity 생성
• 각 Entity 별 Relation을 고려하여 외래 키 설정

TODO

• typeORM 기초 컨피그 설정, DB 연결
• MySQL DB Schema를 설계하고, 이를 ER Diagram으로 표기
• #5

# ESLint 미준수 코드 수정

Topic

ESLint가 정상적으로 작동함에 따라, 오류 처리가 된 코드를 수정.

Desc

기존의 ESLint를 설정을 잘못하여 Linter가 작동하지 않아 여러 문법 오류를 패싱했었음,
현재 정상적으로 ESLint가 작동하였고, 기준에 맞지 않는 코드를 전부 에러 처리하였음.
따라서 이를 일괄적으로 수정하고 Vercel에 정상적으로 Build 되도록 코드를 수정해야 함

TODO

• ESLint 규정에 맞게 모든 코드를 리팩터링 및 오류 수정
• ESLint 규정에 어긋난 코드가 없는지 1차적으로 테스트

# 메인 페이지 레이아웃 구조 변경

Topic

메인 페이지의 레이아웃 구성을 유저 친화적으로 재구성

Desc

메인 페이지에 유저들이 가장 최근에 올린 글 및 인기 있는 글을 각각 8개 정도 추려서 보여주는 섹션 추가.
사이트 정보를 보여주는 컴포넌트의 경우 메인 페이지 하단에 넣음으로서 후순위로 보이도록 수정해야 함.

TODO

• 유저들이 가장 최근에 업로드한 글 8개를 선별하여 보여주는 레이아웃 추가
• 유저들이 가장 좋아요를 많이 누른 글 8개를 선별하여 보여주는 레이아웃 추가
• 사이트 정보 컴포넌트의 존속 여부를 결정하고, 이를 제거할지 아래로 내릴지 결정
• "지금 질문하기" 버튼 클릭 시, 질문글 작성 페이지로 이동하도록 수정. (비로그인 시 로그인 이동)

# 질문글 검색 바를 독립적인 레이아웃으로 재설계

Topic

질문글 검색 바와 관련된 컴포넌트를 독립적인 레이아웃으로 설계해야 함.

Desc

현재 질문글의 경우 각 페이지 내의 state에 종속적인 형태를 취하고 있어 수정이 어려움.
따라서 검색 바 섹션의 경우 별도의 템플릿 혹은 컴포넌트 폴더로 분류하고 관련 로직을 몰아 넣아야 함.
또한 질문글, 검색 결과 페이지에서 검색 바를 기존보다 가시성을 더 좋게 배치해야 할 필요성이 있음.

TODO

• 검색 바를 독립적인 Organism으로 분류하고, 관련 로직 또한 내부에 밀집시켜야 함.
• 페이지에 종속적이었던 검색 value State를 독립적으로 작동하도록 관련 로직을 리팩터링.
• 검색 옵션의 경우 키워드 별 / 제목 별 로만 두고, 그 외 옵션은 결과 페이지에서 필터링하도록 수정.

# 서버 및 클라이언트 API 타입 재정의

Topic

클라이언트 및 서버에서 사용하는 API 와 관련된 타입 재정의 필요

Desc

현재 클라이언트 측에서 사용되는 API들이 너무 난잡하고, 타입의 재사용성이 크게 떨어짐
따라서 이를 해결하기 위해 서버에서 제공되는 데이터의 양식을 맞춰 타입을 재정의해야 함
클래스 상속을 통해 공통된 부분은 통일 시키되, 각기 다른 분야의 인터페이스는 독립적으로 설계

TODO

• 질문, 검색, 댓글, 좋아요, 키워드로 API 문서를 세분화하고 함수명 재정의
• 상호 연관된 타입은 상속을 통해 확장성을 보장하여 정의하고, 최대한 간결하게 정의
• 서버 내에서 사용되는 컨트롤러 또한 각 파트에 맞게 세분화

# 신규 질문글 작성 시 키워드 미적용 문제

Topic

신규 질문글 작성 시 키보드 미저장 문제 해결

Desc

새로운 질문글을 저장할 경우 키워드가 DB에 저장되지 않는 문제를 수정해야 함.

TODO

• 새로운 질문글 작성 시, 키워드를 DB에 등록시키도록 오류 수정

# 로그인 시에만 접속 가능한 라우터 설계

Topic

로그인 시에만 접속 가능한 라우터 설계

Desc

• 요청 헤더에 엑세스 토큰이 존재할 때만 라우터를 통과할 수 있도록 해야 함.
• 만약 헤더에 토큰이 없거나 유효하지 않은 토큰일 경우, 리프레쉬 토큰을 요청하도록 해야 함.
• 리프레시 토큰 또한 유효하지 않을 경우, 클라이언트 단위에서 로그아웃을 진행하도록 해야 함.

TODO

• 요청 헤더에 엑세스 토큰이 존재할 때만 라우터를 통과시키는 미들웨어 제작
• Authorization 헤더에 토큰이 없을 경우, 리프레시 토큰을 요구하는 로직 제작
• axios 인스턴스의 인터셉터에서, 리프레시 토큰의 요구를 자동으로 캐치하도록 로직 설계
• 리프레시 토큰이 유효하지 않을 경우, 자동으로 로그아웃을 진행하는 로직 구현.

# JWT 토큰 발급, Social 로그인 구현

Topic

JWT 토큰 발급, Social 로그인 구현

Desc

• jwt 토큰을 발급하고, 유효성 검사를 진행하는 인증 모듈 필요.
• 소셜 플랫폼에서 로그인이 완료되었을 경우, 인계받은 토큰을 전달하는 모듈 필요.
• Kakao, Google, Naver 소셜 로그인 모듈을 구현하고, 정상 작동을 확인.

TODO

• 소셜 로그인 페이지 레이아웃 및 기능 구현
• JWT 토큰 발급 / 유효성 검사 모듈
• 신규 회원가입 진행 전, Column 유효성 검사 확인
• 토큰의 유효성이 결격되었을 경우, 로그아웃 진행