프로젝트 회고, 리팩토링/스택오버플로우 팀 프로젝트

[Pre-Project] express 적용

2023. 6. 25. 18:11

6/19

전에 했던 초기세팅을 기반으로 코딩을 시작했다.

 

프론트엔드팀은 백엔드팀이 api와 서버를 구축해서 우리에게 넘겨주기전까지는

UI를 먼저 완성시켜서 백엔드팀이 api주소를 넘겨주면 우리는 데이터패칭을 해와서

띄워주면 되는식으로 먼저 만들어보기로했다.

 

제가 맡은 파트는 질문의 답변 추가, 수정, 삭제 , 답변에 대한 댓글 추가, 수정, 삭제

댓글에 엄지손가락표시로 추천을 누르면 올라가거나 내려가는 추천기능을 담당했다.

 

그렇게 질문상세페이지에서 컴포넌트들을 나누고 질문 상세페이지에 답변컴포넌트를 만드록있던 중

문득 든생각이 페이지들에 공통으로 들어가는 헤더, 사이드, 푸터를 나누지않았다.

그렇게 3개를 3명이서 각각 한개씩 맡아서 그 부분을 먼저 만들었다.

 

답변컴포넌트를 만들때 UI를 만드는데에서는 큰 어려움은 없었다.

그러나 아직 api가 없었기에 데이터들이 잘 매핑이 되는지 확인을 할 길이없었다.

그래서 저번에 한번 만들어본 express를 활용하여 아주 간단하게 데이터를 만들어서

데이터가 들어왔을때 잘 나오는지를 확인해보기로했다.

express 데이터베이스에 임의의 데이터들을 저장해서 끌어다써보았다.

 

이렇게 먼저 써봄으로써 백엔드팀이 데이터를 만들때

우리가 데이터들이 어떤것들이 필요했고, 어떤이름으로 만들어주셨으면 좋겠다.

의견을 낼 수 있었다.

 

이렇게 오늘은 질문상세페이지의 답변컴포넌트, 답변 작성페이지컴포넌트, 답변 수정페이지컴포넌트

3개를 express 데이터들을 통해 화면에 잘나오는것을 확인하였다.

 

아쉬운점은 아직 데이터패칭에 익숙하지않아서 서버통신메서드들을 어디에서 받아와서

다른 컴포넌트에 어떻게 뿌려줘야하는지가 많이 어렵다.

그래서 서버요청의 빈도가 어느순간 늘어난게 보였다.

 

이부분은 다른 오픈api를 많이 써보면서 여기서 get을 받고 어디컴포넌트에 무슨 데이터를 뿌려주고

익숙해질때까지 써보는수밖에 없을 것 같다.

'프로젝트 회고, 리팩토링/스택오버플로우 팀 프로젝트' 카테고리의 다른 글
  • [Pre-Project] CORS Proxy우회 트러블슈팅
  • [Pre-Project] Prettier, ESlint 초기 설정
  • [Pre-Project ] 이슈 정리, 사용자요구사항 정의서
  • [Pre-Project ] 첫 팀프로젝트 시작
plla2
plla2
프론트엔드 개발자가 되고픈 개미의 일대기 🐜
plla2
코린이 "개미"의 개발블로그
plla2
전체
오늘
어제
  • 분류 전체보기 (112)
    • 프론트엔드 (40)
      • CSS (1)
      • JS (16)
      • React (17)
      • Redux (2)
      • TS (4)
      • Pre-project (0)
    • 프로젝트 회고, 리팩토링 (14)
      • 포트폴리오 프로젝트 (2)
      • moviepop 팀 프로젝트 (1)
      • lofi 프로젝트 (2)
      • 스택오버플로우 팀 프로젝트 (5)
      • commerce 프로젝트 (1)
    • 코테 (26)
      • koans, 코플릿, sprint (9)
      • 데일리 코딩 (17)
    • 백엔드 (5)
      • Node (4)
    • CS (6)
      • 알고리즘 (2)
      • 자료구조 (1)
      • 네트워크 (1)
    • 회고, 면접준비 (16)
      • Next.js Doc 번역 (7)
      • 면접 답변용 정리 (5)

블로그 메뉴

  • 홈
  • 방명록

공지사항

인기 글

태그

  • 데일리코딩
  • 태그래핑
  • React
  • 트리 자료구조
  • 프로토타입 체인
  • NodeList
  • 비동기
  • 렉시컬
  • State
  • 구조 분해 할당
  • 정규식
  • 프론트엔드
  • 페이지네이션
  • 상태
  • dom
  • 클래스형
  • 동기 비동기
  • 리액트 라우터
  • 블로킹 논블로킹
  • 배열렌더링
  • 배열분해
  • 데일리 코딩
  • js
  • 단어의 시작
  • Twittler
  • camelCase
  • 중첩구조분해
  • HTMLCollection
  • 프로토타입
  • 객체분해

최근 댓글

최근 글

hELLO · Designed By 정상우.
plla2
[Pre-Project] express 적용
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.