[2주차 개발일지 1] React와 express 연결 (240910)

9일 현직자 미팅이 있었고, 총 4번의 코칭이 있을 예정이라고 안내받았습니다.

 

Axios를 사용한 frontend와 backend의 통신

1.  axios
   1. Axios는 http 통신을 쉽게 하기위해 만들어진 라이브러리로, 이를 사용해 React와 Express 서버 간의 통신이 가능합니다.
   2. React(클라이언트)가 HTTP 요청을 보내고 Express(서버)가 이 요청을 처리하여 응답을 보내는 식으로 동작합니다.
2. react(frontend)
   1.  Axios 요청 트리거 : React에서 이벤트가 발생하면 Express 서버로 Axios 요청을 보냅니다.
   2. HTTP 요청 만들기 : 요청 메서드(예: GET, POST, PUT, DELETE), 서버 엔드포인트 URL을 지정하고, 선택적으로 데이터나 헤더(인증 토큰 등)를 보냅니다
   3. 응답 처리 : Axios 요청이 완료되면 React는 서버의 응답을 처리합니다:
      1. 성공(response.data): 데이터 표시, 토큰 저장 또는 UI 업데이트.
      2. 오류: 오류 메시지 표시, 요청 재시도 또는 사용자 리다이렉트.
3. express(backend)
   1. 서버 측(Express) Express 측에서는 서버가 React 앱에서 오는 HTTP 요청을 수신합니다. 요청을 처리하고 데이터베이스나 다른 서비스와 상호작용한 후 응답을 보냅니다.
   2. API 엔드포인트 정의 : Express는 HTTP 메서드와 일치하는 라우트를 정의합니다(예: POST /api/users/login). 각 라우트에는 들어오는 요청을 처리하는 콜백 함수가 있습니다.
   3. 요청 처리 : 데이터 수신: Express는 React로부터 req.body(POST 요청의 경우) 또는 req.query(GET 요청의 쿼리 파라미터)를 통해 데이터를 받습니다. 처리: 서버는 데이터베이스와 상호작용할 수 있습니다(예: 사용자 인증, 레코드 가져오기 등).
   4. 응답 보내기 : 처리 후 Express는 res.send() 또는 res.json()을 사용하여 성공 상태와 요청된 데이터 또는 오류 메시지를 포함한 HTTP 응답을 React로 보냅니다.

 

git 협업 과정에서 있었던 작지만 즐거운 사고

 

1. 프론트를 담당하시는 팀원분이 fe 폴더 속의 내용물을 git init 이후 git push하게되어 문제 발생
   (원래 dev 브랜치에 있어야할 버전 대신 팀원분 작업물만 dev 브랜치에 존재, commit 내용도 증발)
   이후 다른 작업자들이 pull을 땡겨 사고 발생
2. 가장 온전한 commit으로 돌아가 해당 버전을 old_dev 브랜치에 저장하고 해당 브랜치로 default 브랜치를 변경.
3. 이후 해당 브랜치에서 새로운 브랜치를 파서 작업하는 것으로 정리.
   이전 디폴트 브랜치와 관련된 로컬 브랜치와 백업을 제외한 브랜치 모두 삭제
4. 다시 작업 시작

---- git push와 compare&merge request는 신중하게. 대충 읽고 merge해버리면 피곤해진다.