안녕하세요, 오늘은 팀프로젝트를 진행하면서 겪은 트러블슈팅 내용을 정리해보았습니다.
React 세팅
구현한 백엔드 기능을 프론트를 통해서 보여주려면 궁극적으로 기능이 많은 도구를 사용해야겠다는 차원에서 리액트를 선택하였습니다.
그러나 리액트 뿐만 아니라 프론트에 대한 이해도가 없는 상태에서 시작하였기에 세팅 단계에서부터 많은 어려움을 겪었습니다.
Node.js 를 설치하고 인텔리제이에 경로를 설정한 후 터미널로 세팅을 해줘야했습니다. 이 과정에서 리액트를 인스톨하고 실행하려 했을때, 빈번하게 오류가 발생했습니다.
리액트를 가동하려면 리액트가 있는 디렉토리에서 가동을 해야 했습니다.
또한 백엔드가 있는 인텔리제이에서 같이 작업을 하는것보단 분리된 환경에서 프로젝트를 생성하고 연결하는게 구조적으로 좋다는 것도 인지하게 되었습니다.
라우터와 네비게이트
또 어려움을 겪었던 부분이 페이지를 연결하는 부분이었습니다.
각각의 페이지마다 .css 와 .js 파일을 만들고 이들을 연결해주려고 했는데
리액트에서는 App.js 에 라우터를 사용해야 이게 가능했습니다.
이렇게 하고 페이지 연결을 해줄 js에 아래 코드를 넣어야 생각했던 기능을 구현할 수 있었습니다.
import { useNavigate } from 'react-router-dom';
const navigate = useNavigate();
navigate('/boardlist');
백엔드 연결
가장 시간을 많이 할애하고 가장 복잡한 영역이었습니다.
처음에는 단순히 만들어놓은 프론트 틀에 생성자를 만들고 getter setter 처럼 쉽게 연결할 수 있을거라고 생각했는데 오산이었습니다.
import axios from 'axios';기본적으로 axios를 주입해줘야하고 이또한 set 되어 있지 않다면 터미널을 통해 set 해줘야 합니다. useState를 사용해 프론트에 상호작용하는 명령어와 백엔드 명령어를 지정해주어야 했습니다.
const response = await axios.post('/users/login' 이런식으로 백엔드 api를 호출해서 해당 api의 기능을 사용하고, 예외처리나 토큰값도 해당사항 사용환경에 맞게 코딩해주어야 했습니다.
때문에 기존에 계획했던 erd나 api명세서가 백엔드 사고적으로 작성이 되어 있었는데 와이어프레임을 기반으로 프론트를 만들다보니 상호작용간에 기능이 추가되거나 수정되거나 필요없어지는 경우가 빈번하게 발생했습니다.
