본문 바로가기

React

 (115)
[React] state 상태관리 Redux,Redux Toolkit 설치, 사용법(+Redux vs Recoil vs MobX) 리액트 State란? State는 컴포넌트 내에서 지속적으로 변경이 일어나는 값을 관리하기 위해 사용한다. useState를 통한 상태관리 Redux JS 상태관리 라이브러리 actions : 상태 변화를 dispatch 보내기 실행 dispatch : 액션을 리듀서에 집어넣는 행위 / 변화를 요청 하는 행위 Reducer : 상태변화를 일으키는 함수 / 현재의 상태와 액션을 참조하여 새로운 상태를 반환 Store : 전역 state들을 저장 /state 관리 view 는 state를 받아서 보여준다.selectors 는 state의 특정값을 꺼내오는 것이다.reducer는 액션의 정보를 보고 state를 정해진 규칙에 따라 변경한다. 초기 state를 렌더링하며 action이 일어나면 dispatch되..
[React] 클릭시 페이지 이동하기 (Link, useNavigate)/(Feat:URI vs URL vs URN) 클릭시 페이지 이동하기 (Link, useNavigate) react-router-dom 을 이용한 라우터 페이지 전환 사용시 import 하기 import {Link, useNavigate} from 'react-router-dom'; Link Link 태그로 작성시 리액트에서 빌드 될 때 자동으로 a태그로 변환되게 된다. a 태그와 Link 차이 a : 외부 프로젝트로 이동하는 경우 Link : 프로젝트 내에서 페이지 전환하는 경우 적용 Home 이동 navigate 변수 만들기 const navigate = useNavigate(); 필요에 따라 함수 만들기 const goToNot=()=>{ navigate("/404"); } 적용 404 Page 두 가지 방법 활용법 1. Link 클릭 시 바로..
[React] Router 라우터(feat.404 NotPage) Route 라우팅이란? 주소창에 URL을 입력했을때 서버에서 요청된 URL에 해당하는 데이터를 전달하는것/ 요청한 URL에 따른 페이지 이동 리액트 라우터(React Router) React 의 라우팅 관련 라이브러리 신규 페이지를 불러오지 않는 상황에서 각각의 url에 따라 선택된 데이터를 하나의 페이지에서 렌더링 해주는 라이브러리 라고 볼 수 있다. 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종류의 라우터 컴포넌트를 제공한다. Router 컴포넌트 종류: BrowserRouter vs HashRouter BrowserRouter 태그를 통해 to 속성에 이동할 경로를 추가하여 이동시킨다 새로고침하면 경로를 찾지 못해 에러가 발생한다. HTML5 History ..
[React] React Build React Build Build 파일 만들기 과제 수행 Build 방법 서버 전 build 로 파일 만들기만 수행하였다. package.json 설정 "build": "react-scripts build" ㄴ. npm run build 를 터미널에 작성한다. (올리는 build 파일을 생성하기 위한 작업)ㄷ. npm run build 를 했지만 eslint 오류 발생 Creating an optimized production build... Failed to compile. [eslint] src\Features\Restaurants\RestaurantsPage.jsx Line 58:31: JSX props should not use functions react/jsx-no-bind 해결: package..
[React] React 개발환경 설정(ESLint, Babel) React 개발환경 설정 React 공식 문서 링크 React란? React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용된다. 설치 nodemon Webpack ESLint Babel react, react-dom 설치 방법 CRA(npx creat-react-app)을 통해 설치하는 방법 or npm init -y를 통해 package.json을 하나씩 설정해주는 작업 아래에선 후자 작업을 진행함 nodemon 설치 package.json 생성(의존성 관리) npm init -y npm i Webpack 설치(개발용서버) npm i -D webpack webpack-cli webpack-dev-server (-D :devDependencies /개발 단계에..
[React] day.js 사용법 (날짜, 시간 라이브러리) Moment.js가 많이 보여서 사용하려했는데 개발중단이 되었다 하여 Day.js를 사용하였다.(경량화에서도 우수) https://www.npmjs.com/package/dayjs dayjs 2KB immutable date time library alternative to Moment.js with the same modern API . Latest version: 1.11.7, last published: 3 months ago. Start using dayjs in your project by running `npm i dayjs`. There are 10529 other projects in the npm registry using d www.npmjs.com 사용방법은 아래 블로그) https:..
[React] JS/ 타임스탬프(Date) 날짜 파싱하기(유닉스타임=타임스탬프 를 현재시간으로 변환) 서버의 시간(feat. 타임스탬프) 타임스탬프(TimeStamp) IT와 관련된 공부를 진행하다 보면 타임 스탬프라는 단어를 접할 수 있다. 그대로 직역하면 시간 도장 이라는 의미인데 말 그대로 특정한 시점에 도장을 찍는다고 보면 될 것 같다. IT 에서는 일이 발생해서 컴퓨터에 기록된 시간을 의미하는데, 주로 어떤 일이 발생한 시간을 비교하거나 두 작업 사이에 어느정도의 시간이 경과되었는지를 알아내기 위해 사용한다. GMT와 UTC (사람이 정의하는 시간) 타임스탬프를 알기 위해서는 GMT와 UTC라는 용어를 알 필요가 있다. 1. GMT(Greenwich Mean Time) 그리니치 표준시 GMT란 그리니치 천문대(영국)에서 측정한 평균태양시를 의미한다. GMT +0900(한국표준시)=> GMT기준으..
[API] POST: GET, POST 시 Parmas? Body? GET 할 때는 Params 에 보낸다. POST 에서는 BODY에 보낸다. (Delete, Put도) * form -data 는 첨부파일이 있을 경우에 사용한다. (ex. 프로필 이미지 변경시) * x-www-form-urlencoded는 첨부파일 없이 그냥 사용할 때 이용한다.(지금방식은 이걸 사용함) + 참고 Responese Headers 는 응답받는것 , Request Headers는 보내는 것(요청)

티스토리툴바