[엘리스] 1차 프로젝트 회고록 - 04 개발 환경의 이해

 

내 손으로 직접만든 서버와 API 연결

 

9팀 [아침엔]
날짜: 23-11-02
작성자: 하윤아

 

오전스크럼

1. 화면설계서, 기능명세서 작성하기

2. 피쳐브랜치 만드는부분 설명 기능단위 - 장바구니 bascket, 상품목록 product, 상품상세 클론-(클론해온 파일 폴더에서 작업)-장바구니기능 개발-feature브랜치 만들어서 등록

 

프론트엔드 회의

1. 역할 재분배(컴포넌트별 분배)

2. SASS 사용 논의 : 오피스아워때 조언을 구함

사용하면 편하고, 코드의 가독성이 좋아질 것으로 생각하지만 아직 리액트를 익숙하지 않아 사용하는 것 조차 공부를 해야해서 버거울 수 있다.

3. 리액트에서 CSS 사용은 기존의 자바스크립트의 방식대로 사용

 

오늘 배운 내용

- 리액트 사용방법

- 프론트엔드 서버 제작

- 백엔드 서버 제작

- 백엔드 API 데이터 받아오기

- 백엔드에게 API 전달하기

 

SPA: 약자로 단일 페이지로 구성된 웹 애플리케이션이다.

 

1. 서버 만들기

a. 터미널 창 열기: 폴더 경로의 터미널 창 열림

b. npx create-react-app client: client 폴더+서버 동시 생성

c. .env 만들기: port 지정

d. npm install axios

d. npm start

서버를 만들고 개발 환경이 완성되었다.

 

폴더구조는 src

api

css

pages로 구성을 했고

 

리액트는 SPA로 단일 페이지 애플리케이션이어서 html은 하나만 있다.

App.js로 경로를 정해주고 라우팅을 해준다.

App.js에서 경로 이동시 그 경로외에 다른 경로들은 전부 지우고 또 다른 경로 이동시 나머지 경로는 지우는 식으로

페이지가 이동하는 것처럼 보임, 서버를 열어 실시간으로 바뀐 부분이 적용이 된다.

index.js로 app을 렌더링 해준다.

 

import axios from 'axios';

axios는 백엔드 API를 연결해준다. 사용하려면 먼저 선언해야 한다.

 

API 가져오는 방법 (카테고리의 정보를 가져옴)

export const getCategroy = async () => {
  try {
    const response = await axios.get('주소');
    return response.data;
  } catch (err) {
    throw new Error(err);
  }
};

 

 

API 보내는 방법 (새로운 카테고리를 보냄)

export const createCategroy = async ({ name, brand, gender, type }) => {
  try {
    const newItem = { name, brand, gender, type };
    const response = await axios.post(
      '주소',
      newItem
    );

    return response.data;
  } catch (err) {
    throw new Error(err);
  }
};

 

데이터를 전송하는 과정에서 에러가 날 수 있으니 try, catch를 사용하고, 비동기적으로 데이터를 가져와야 한다.

 

const [category, setCategory] = useState({});

useState를 사용해서 const로 선언한 변수의 값을 업데이트 된 값으로 사용이 가능하다.

사용할 때 setCategory를 사용하면 된다.

이 문법은 카테고리의 데이터를 불러오고 새로운 카테고리를 추가하면 카테고리의 데이터가 변한다. 이 때 변환된 데이터를 불러와야 하니 변환된 값으로 사용이 가능한 setCategory를 사용할 곳에 넣는다. 자동으로 데이터 값이 바뀌면 사용한 곳도 값이 바뀌어 있다.

 

npm i -s react-router-dom: import { BrowserRouter as Router, Route, Routes } from ' react-router-dom';를 사용해서

라우팅을 함

function App() {
  return (
    <Router>
      <Routes>
        <Route path='/category' element={<category />}></Route>
      </Routes>
    </Router>
  );
}

 

/category로 경로 이동시 category function을 보여준다.

 

문제 해결

오류: Module not found: Can't resolve 'react-router-dom' 

import { Link } from 'react-router-dom';

이 부분에 빨간줄이생기고 오류가뜬다.

패키지 설치가 제대로 안된듯 해서 npm install react-router-dom --save로 설치하였으나 해결되지 않는다.

그래서 Module not found: Can't resolve 'react-router-dom' 오류를 검색해서 찾은 외국인 블로그를 보니

https://bobbyhadz.com/blog/react-module-not-found-cant-resolve-react-router-dom

Module not found: Can't resolve 'react-router-dom' [Solved] | bobbyhadz

If you still get the error, open your package.json file and make sure it contains the react-router-dom package in the dependencies object.

라고 적혀있어서 확인해보니 있었다.

 

그리고 

You can try to manually add the lines and re-run npm install.

라고 적혀있어서 npm install이라고 작성하니 해결이 되었다! 작은 오류고 별거 아니지만 오류 하나 해결하는데도 작은 성취감을 얻었다.

 

목표

오피스아워때 코드를 제대로 리뷰받을 수 있도록 코드를 내 손으로 작성 완성하기

 

느낀점

오늘 팀원분께서 저희에게 적극적으로 자료까지 준비해가며 스터디 하는것처럼 알려주셨는데, 신기하게도 이해가 잘 가고 직접 손으로 서버를 만들고 연결을 하고 데이터를 가져온다는게 너무 신기했다. 그리고 이 과정을 꼼꼼히 준비하시고 쉽게 설명을 너무 잘 해주신 팀원분이 너무 감사했다. 막상 다시 코드를 짜고 응용을 하려니 막막하긴 했지만 엘리스 강의도 들으면서 하니까 대략적으로 기본적인 개념을 잡았고 팀원분 덕분에 이 기념을 적용하는 방법과 어떻게 라우터를 하고, 어떻게 데이터를 가공하는지에 대해서 알게되었다. 이제 설계를 넘어서 건물을 지을 때 어떤 재료가 들어가는지 파악하고 어떤 방법으로 지을지 이해를 했고 지금은 내가 하는 작업은 건물의 1층부터 차곡 차곡 지어나가는 과정이다. 내일 오피스 아워까지 구현이 안돼도 좋다. 코드를 완성해 나아가는게 목표이다. 내가 맡은 부분은 카테고리 추가, 삭제, 조회 부분인데 크게 아직 코드를 해석하고 구현하는게 쉽진 않은것 같지만 그래도 내일까지 완성은 해낼 수 있을것 같다. 팀원분이 적극적으로 강의 해주신 예제 코드가 있고 언제든지 질문을 해주시면 정성스럽게 답해주셔서 문제가 생기거나 이해가 잘 안되면 빠르게 해결이 가능하다. 거기다 구글링으로 열심히 찾다고 엘리스에도 강의 자료가 많아 자원은 탄탄하다고 생각한다. 이제부터 내 끈기의 문제이지 않을까 ? 이 프로젝트를 해내면 정말 많은것을 배워갈 수 있을것 같아서 기대가 된다. 며칠 째 잠을 제대로 못자서 많이 피곤하지만 배우고 얻어가는게 정말 많아서 다음 프로젝트를 하게 되면 적극적으로 서버나 개발 환경에 대한 의견과 리액트 사용으로 더 발전해 있을것 같아 기대가 된다! 지금의 프로젝트가 끝나게 되면 지금처럼 더 열심히 공부하고 나만의 미니 프로젝트로 직접 배운 문법을 활용해 적용하는 방법을 배워야겠다는 생각이 들었다.

 

 

 

#엘리스트랙 #엘리스트랙후기 #리액트네이티브강좌 #온라인코딩부트캠프 #온라인코딩학원 #프론트엔드학원 #개발자국비지원 #개발자부트캠프 #국비지원부트캠프 #프론트엔드국비지원 #React #Styledcomponent #React Router Dom #Redux #Typescript #Javascript