본문 바로가기

React2

React & SpringBoot를 이용한 To-do List 만들기(2) - React를 이용한 Front-end 설계(1) 들어가며 React & SpringBoot를 이용한 To-do List 만들기(1)에 이어 (2)에서는 React 설정 방법 및 구현 내용을 정리하고자 한다. 프로젝트 생성 및 Create React App 설치 node.js가 설치 안되어있다면 설치 후에 터미널을 이용해 프로젝트를 생성 후 해당 폴더에서 Create React App(React 프로젝트 생성 도구)을 설치해준다. (git을 연동하려면 git init 후 연동을 마친 다음에 설치해주도록 하자) npx create-react-app "프로젝트명" 다음 명령어를 통해서 react app을 설치해준다. 아래와 같이 나오면서 열심히 설치가 진행된다. 설치가 완료되면 정해준 프로젝트명으로 폴더가 생겼을 것이다. 들어가주면 다음과 같이 설치가 된 .. 2022. 1. 6.
React & SpringBoot를 이용한 To-do List 만들기(1) - 전체 프로젝트 구성 및 환경 설정 들어가며 현재 백엔드 엔지니어로 활동중이지만 개발은 혼자하는 것이 아니기에 협업을 위해서는 백엔드만 익히는 것이 아닌 프론트엔드에 관한 지식도 있어야 능률이 올라가기 때문에 이 기회를 통해 React에 관하여 익혀보고자 한다. 더불어 기존에 만들었던 개인프로젝트에서도 Frontend 단에는 따로 프레임워크를 사용하지 않고 구현하기도 했어서 이번 기회를 통해 React를 익힐 수 있는 계기가 되고자 해당 프로젝트를 시작하였다. 프로젝트 구성 프로젝트를 구성하는 방법에는 두가지 방법이 존재한다. 1. 백엔드영역과 프론트엔드영역을 하나의 프로젝트로 구성 2. 백엔드영역과 프론트엔드영역을 나눠 각각의 프로젝트로 구성 1번 같은 경우는 하나의 프로젝트로 관리하기 때문에 한명의 관리자가 풀스택으로 웹개발을 할때 유.. 2021. 12. 27.