#중앙정보처리학원-70일차- (프로젝트 초기 셋팅)

11/09

어제로 react 수업을 마치고 오늘부터 프로젝트 생성전체 로직을 배울 예정이다 .

이정도의 기능을 배우고 여기서 로그인 한 사람이 자신의 게시글 정보를 수정할 권한을 갖는 등의 기능을 배울것이라고 하셨고,

개인 실력에 따라 하나의 crud 를 목표로 삼거나 여러테이블 을 crud 하거나 읽는것만 하는걸 목표로 하고 프로젝트를 진행 하라고 하셨다.

작업 순환구조 로 client는 react 로 작업하고 server는 spring boot, 그리고 db는 mariadb로 진행하게 된다.

 

# 첫번째로 intellij에서 react 프로젝트를 생성해준다

react를 선택한 후 생성할 프로젝트 이름을 작성 해주고 create버튼을 클릭 해준다.

 

프로젝트를 생성 해준 후 필요한 패키지들도 설치 해준다.

$ npm i axios
엑시오스 설치

$ npm i react-router-dom
리엑트 라우터 설치

$ npm i use-immer
이머 설치

$ npm i @chakra-ui/react @emotion/react @emotion/styled framer-motion
차크라 ui 설치

function App() {
  return (
    <ChakraProvider>
      <TheRestOfYourApplication />
    </ChakraProvider>
  )
}
==> 차크라 ui는 App 파일을 이렇게 감싸주어서 적용까지 해야한다.

$ npm i preitter 
프리티어 설치

$ npm i @chakra-ui/icons
차크라 ui 에서 제공하는 icon 설치

이렇게 설치 를 해준후 

필요 없는 파일들을 정리 해주면 된다.

Setting 에 들어가 prettier를 검색하고 빨간색 박스 2개를 체크한후 저장 해주면 된다.

react내 src 폴더에 App.js 와 index.js 이 둘만 남겨두고 지워주면 되고 

index.js 파일을 이상태로 만들어 주고

App.js 파일은 내부 텍스트 를 모두 지워주고

rsf

rsf 만 입력 하고 엔터를 쳐주면 초기 셋팅은 끝이 나게 된다. 

 

---

# 생성한 react 프로젝트를 git repository 에 적용 시키기

내 git Hub로 들어가  New repository를 해준다. 

repository의 이름을 작성해준 후 생성해준다.

빨간색으로 가린 부분의 주소를 복사하고

생성한 react의 프로젝트 git 의 master 에 우클릭을 한 후 push 를 눌러 준다.

push 버튼을 누르면 이런창이 뜨는데 Define remote 버튼을 클릭 해준다. 

그럼 여기 URL 칸에 아까 빨간 부분으로된 복사한 주소를 붙여 넣어준 후 ok 버튼을 누르고 push 버튼을 눌러 주면 된다.

 

그리고 난후 git Hub 창을 새로고침 하면 코드들이 잘 commit push 한 것을 볼  수 있다. 

 

이렇게 하면 프론트 셋팅은 완료 되었다.

 

---

# 게시물 create 

App.js 파일

App.js 의 제일 상단 App function 밖에 router 를 생성 해준다 

그리고 router에 path 는 경로,  element는 path 의 경로를 가게 되면 해당 component를 호출하는것 이다.

router 에 index 라고 쓰여진것은 상위 경로를 그래로 따라 간다는 것으로 상위 창이 띄어질때 만들어놓은 Board들을 조회 하게 하려
는 의도 이다.