본문 바로가기

분류 전체보기

 (265)
[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 클릭 시 바로..
[SCSS] SCSS 설치, 설정하기 SCSS 코드의 재활용성을 올리고, 가독성을 올리는 등 CSS에서 보이던 단점을 보완하고, 개발의 효율을 올리기 위해 등장한 SASS/SCSS 중첩, 변수 선언, 연산자 등 많은 장점 scss 설치하기 npm i -g sass scss파일 만든 후(Watch Sass클릭) import 시킨 후 오류 발생 ERROR in ./src/styles/banner.scss (./node_modules/css-loader/dist/cjs.js??ruleSet[1].rules[1].oneOf[7].use[1]!./node_modules/postcss-loader/dist/cjs.js??ruleSet[1]...... Module build failed (from ./node_modules/resolve-url-load..
[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 /개발 단계에..
[TS] tsconfig.json + tsconfig.path.json 파일 합치기 기존은 tsconfig.json 파일과 tsconfig.path.json 파일이 구분되어 있었다. 변경전 tsconfig.json { "extends": "./tsconfig.path.json", "compilerOptions": { "target": "ESNext", "lib": ["dom", "dom.iterable", "esnext"], "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, "strict": true, "forceConsistentCasingInFileNames": true, "noFallthroughCasesInSwitch": true, "module":..
[TS] react 기본 설정 type(JSX.Element-컴포넌트,props/state) https://velog.io/@nemo/jsx.element 위 블로그내용) 1. JSX.Element JSX.Element 타입은 리액트에서 사용하는 JSX 자료형을 명시한다. 리액트에서는 HTML처럼 생긴 JSX를 사용하는데, 이 타입을 지정하고 싶으면 JSX.Element를 사용하면 된다. JSX를 변수에 담을 때 const container: JSX.Element = 📌 JSX.IntrinsicElements 태그까지 지정하고 싶다면 JSX.IntrinsicElements를 사용해보자. const container: JSX.IntrinsicElements['div'] = 컴포넌트 타입 지정 시 1) 컴포넌트를 담은 함수 컴포넌트는 항상 JSX를 return하기 때문에 JSX.Element로 타입..

티스토리툴바