Front-End
-
[React] React redux-saga 프로젝트 시작하기 #4Front-End/React 2023. 12. 20.
전 글에는 대략적인 화면 Grid를 구성하였고 이를 화면에 렌더링 시켜 볼 것이다. 그 전에 주소에 따라 페이지를 이동할 수 있는 React Router를 사용할 것이다. React는 Single Page Application이므로 기존의 html처럼 경로를 붙여 페이지를 이동하는 방식이 아니다. React Router는 사전에 정의한 URL에 맞는 컴포넌트를 하나의 페이지에서 렌더링 해 준다 npm install react-router-dom 설치가 되었으면 렌더링이 시작되는 최상단 파일에 Router를 적용해준다. 해당 프로젝트에서는 index.js 파일이 최상단이므로 index.js 파일에 BrowserRouter를 설정해준다. import React from 'react'; import { cre..
-
[React] React redux-saga 프로젝트 시작하기 #3Front-End/React 2023. 12. 20.
Counter Page 만들기. 우리는 state관리를 하기 전에 화면 그리드부터 만들것이며, UI 라이브러리는 react-bootstrap을 사용할 것이다. shell에서 아래 명령어를 입력해 react-bootstrap을 설치하고 npm install react-bootstrap 프로젝트 root폴더의 index.js 파일에 아래 코드를 import하여 모든 파일 내에서 전역적으로 사용할 수 있게 해준다. 현재 프로젝트에서는 index.js파일이 최상단이어서 적용한거지 구조가 다르면 무조건 초기 렌더가 되는 최상단 파일에 적용해야 한다 import React from 'react'; import { createRoot } from 'react-dom/client'; import { Provider }..
-
[React] React redux-saga 프로젝트 시작하기 #2Front-End/React 2023. 12. 20.
기본 구성은 페이지를 컴포넌트별로 분리할 것이며 React-Router를 사용해 주소마다 보여주는 페이지를 별도로 분리할 것이다. 기존에 CRA(create react app)으로 프로젝트를 만들면 아래와 같이 폴더구조가 생성되는데 이것을 컴포넌트별로 분리하고, saga 및 reducer도 컴포넌트별로 분리 할 것이다 my-app/ README.md node_modules/ package.json public/ index.html favicon.ico src/ App.css App.js App.test.js index.css index.js logo.svg 이 글을 쓸 당시에는 이미 git에 어느정도 소스가 올라간 상태며 임시화면도 어느정도 개발이 된 상태여서 소스가 조금 달라질 수 도 있다. my-ap..
-
[React] React redux-saga 프로젝트 시작하기 #1Front-End/React 2023. 12. 20.
React 프로젝트를 연습하려고 새로 Repository를 생성하였다 https://github.com/leeyomyeon/sample-project GitHub - leeyomyeon/sample-project Contribute to leeyomyeon/sample-project development by creating an account on GitHub. github.com UI 라이브러리 : React-Bootstrap 미들웨어 : Redux-saga 그 외 의존성 - react : 18.2.0 - bootstrap : 5.3.2 - axios : 1.6.2 - react-bootstrap : 2.9.1 - react-hook : 1.0.0 - react-hook-form : 7.49.0 - ..