HomeAboutMeBlogGuest
© 2025 Sejin Cha. All rights reserved.
Built with Next.js, deployed on Vercel
🐣
프론트엔드 데브코스 4기 교육생
/
🍏
김나영팀
/
앙골라 ANGOLA
앙골라 ANGOLA
/
이지윤

이지윤

Date
Sep 5, 2023 07:37 AM
Tag
설계
생성자

1. api hook

  • core(or api)폴더
    • index.ts (axiosInstance)
  • auth.ts(로그인, 로그아웃, 회원가입, 인증확인)
  • notification.ts(알림목록, 알림생성, 읽음처리)
  • follow.ts (팔로우 추가, 삭제)
  • like.ts (좋아요 생성, 삭제)
  • userSearch.ts (유저 목록, 키워드 유저 검색)
  • postSearch.ts (포스트 목록, 키워드 포스트 검색)
  • myInfo.ts (내 정보 변경 닉네임, password, 프로필 이미지 가능)
  • userInfo.ts (유저 정보)
  • comment.ts(댓글 작성, 삭제)
  • post.ts(전체 포스트 목록, 포스트 작성, 삭제, 포스트 상세보기, 특정 사용자의 포스트 목록?)
  • channel.ts (생성, 불러오기)
 

postman 으로 채널 생성

게시글 좋아요 | Team Workspace
Get started with 게시글 좋아요, KDTFinalproject by winter-equinox-879591 on the Postman Public API Network
게시글 좋아요 | Team Workspace
https://www.postman.com/winter-equinox-879591/workspace/team-workspace/request/13627968-7fc9b842-6ba7-4383-9c30-5e04dc5525d7
게시글 좋아요 | Team Workspace
 

데이터 가공

 
 

2. 라우터 주소

2. 파라미터와 쿼리 · GitBook
페이지 주소를 정의 할 때, 우리는 유동적인 값을 전달해야 할 때도 있습니다. 이는 파라미터와 쿼리로 나뉘어질 수 있는데요:
2. 파라미터와 쿼리 · GitBook
https://react.vlpt.us/react-router/02-params-and-query.html
리액트 기초, 쿼리 스트링, useSearchParams
위코드에서 공부하며 정리한 내용입니다.쿼리 스트링은 URL 의 한 부분으로, 요청하는 URL 에 부가정보를 포함할 때 사용합니다. 기존 URL 은 단순한 형태의 요청과 응답을 주고 받았지만 쿼리 스트링을 사용하면 조건에 맞게 정렬된 특정 형태의 정보를 요청하고 받을 수
리액트 기초, 쿼리 스트링, useSearchParams
https://velog.io/@rayong/리액트-기초-쿼리-스트링-useSearchParams
리액트 기초, 쿼리 스트링, useSearchParams
  • 홈 페이지(전체 포스트) /
  • 포스트 하나씩 보기 /post/postId
  • 로그인 페이지 /login
  • 회원가입 페이지 /signup
  • 검색 default /search/*
    • 포스트
      • 포스트 탭 /search/post
      • 포스트 탭에서 정렬 /search/post?sort=${like| follow|latest}
      • 포스트 키워드 입력 /search/post/keyword=${키워드}
      • 포스트 키워드 입력 후 정렬 search/post/keyword=${키워드}&sort=${like| follow|latest}
    • 유저
      • 유저 탭 /search/user
      • 유저 탭에서 정렬 /search/user?sort=${follow|ranking}
      • 유저 키워드 입력 search/user/keyword=${키워드}
      • 유저 키워드 입력 후 정렬 search/user/keyword=${키워드}&sort=${follow|ranking}
  • 마이 페이지 /mypage
  • 유저 페이지 /userpage
 
 

3. 컴포넌트 나누기

common이나 base로 뺄 수 있는 것들
이외 domain?
notion image
 
 

Postman

Api 테스트, 테스트 자동화, 테스트 모니터링
  1. 요청 연동하려면 변수를 잘 지정해야 함
notion image
notion image
notion image
 
notion image
  1. test 작성
access token을 환경 변수에 저장(키, 값)
access token을 환경 변수에 저장(키, 값)
  1. auth url에서 받아온 토큰 정보 저장
Authorization
Authorization
  1. body에 원하는 값 집어넣기
body에 값 집어넣기
body에 값 집어넣기
id 값 사용하기 위해 환경 변수에 저장(다음 url에서 frameworkId 라는 값으로 새로 생성한 데이터의 id를 가져올 수 있음)
id 값 사용하기 위해 환경 변수에 저장(다음 url에서 frameworkId 라는 값으로 새로 생성한 데이터의 id를 가져올 수 있음)
  1. url 파라미터 설정
notion image
notion image
  • 모든 요청 실행할 수 있음 Collection → Run collection
  • 모니터 탭 특정 시간마다 자동 실행
notion image
 
https://www.youtube.com/watch?v=hZJNwZssuhg