분류 전체보기

redux persist : 새로 고침 시에도 상태 유지

요약 redux-persist 패키지 사용 자동로그인을 원하면 localStorage를 사용 브라우저를 닫으면 로그인이 풀리는 것을 원하면 sessionStorage를 사용 사용 목적 리덕스는 웹 브라우저 창을 닫으면 모든 state가 리셋된다. 유저 로그인 정보 같은 경우 브라우저를 닫아도 유지되어야 한다. 이런 경우 사용될 수 있음 원리 App 이 불러와졌을 때 로컬스토리지에 있던 유저 정보 사용 서버에 현재 로그인 상태 재검증 서버가 응답한 로그인 정보로 업데이트 만약에 토큰이 만료되었을 시에는, 재로그인 요청 웹 스토리지 객체(web storage object) 개념 이해 종류 localStorage sessionStorage localStorage와 sessionStorage는 브라우저 내에 키..

React RTK Query 캐시

캐시 태그 시스템 여러 컴포넌트에서 Query Endpoint를 구독하여 Request하는 경우 동일한 요청이 여러 번 있을 때 한 번만 서버에 Request한 뒤 캐시 데이터를 돌려씀 컴포넌트1 : fetchData() → 서버로 데이터 Request 컴포넌트2 : fetchData() → 캐시 데이터 사용 컴포넌트3 : fetchData() → 캐시 데이터 사용 다른 Query여도 캐시 Tag값이 같다면 같은 데이터를 사용하는 것임 postData1(), providesTags=["Tag1"] postData2(), providesTags=["Tag1"] 무효화를 통해 캐시 데이터를 자동 refetch 받아오거나 제거할 수 있음 // 이 부분은 좀더 공부가 필요함!! postData1(), inval..

React Redux Tookit 사용 방법

본 게시물에서는 Redux Toolkit 을 사용한 버전으로 예시를 들어보겠다. 리덕스를 훨씬 편한 방법으로 사용할 수 있는 확장팩이라고 생각하면 된다. Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 리덕스에 관해서는 아래 게시물을 보고 이해하고 오면 된다. React Redux (리액트 리덕스) 리덕스란? 리액트 뿐만 아니라 다양한 프레임워크에서 사용되는 상태관리 라이브러리이다. 리액트는 MVC (Model View Controller) 중에 View만 담당하게 되는데 나머지 Model, Controller..

리액트 이론 정리 (JSX, Component, Virtual DOM)

리액트의 3가지의 대표적인 특징 JSX 문법 Component 기반 Virtual DOM 1. JSX 문법 소개 HTML을 마치 JS처럼 편리하게 사용하기 위한 리액트 JS 확장 문법 HTML 문법을 JavaScript 코드 내부에 쓴 것이다. 빌드 시 Babel에 의해 자바스크립트로 변환된다. React 17릴리즈(대략 2020년 9월 22일) 이전버전은 React를 import 하지 않으면 JSX를 이해하지 못함 import React from 'react'; 규칙 속성은 따옴표로 감싼다. 반드시 태그를 닫는다. 모든 태그는 Self-closing 이 가능하다. 변수값은 중괄호로 감싸서 표현 반드시 div/Fragment태그로 감싸진 형태로 써야한다. return ... // did work cons..

[React] useCallback, useMemo 사용하기

소개 prop가 새로 전달되었을때 또는 내부 state가 변경되었을때 리렌더링이 일어난다. 어디가 변경되었는지 확인하고 변경된 부분만 리렌더링 해야하는데 성능때문에 얕은 비교를 한다. 특히 참조 타입(함수)의 경우 얕은 비교 때문에 원치 않은 부분까지 전부 리렌더링 될 수 있는데 useCallback, useMemo 를 통해 이를 방지해주어야 한다. 원시 타입 얕은 비교 참조값(메모리주소)이 달라져도 값만 같으면 같은 것으로 간주 → 리렌더링 X 참조 타입 얕은 비교 참조값(메모리주소)이 달라지면 변경된 것으로 간주 → 리렌더링 O 불필요한 리렌더링 일어나는 경우 *이렇게 쓰면 안됨! 하위 컴포넌트에 전달하는 콜백 함수를 인라인함수로 사용 console.log("123")}/> 컴포넌트 내에서 로컬 함수..

Git 커밋 되돌리는 방법

1. 병합 전 push 전 커밋 내역 추가 git commit --amend -m "추가할 내용작성" 2. 병합 전 push 후 커밋 되돌리기 (기록 남김) 왜 되돌렸는지 남기기 위해 사용 git revert 커밋iD 3. 병합 전/후 push 후 커밋 되돌리기 (기록 안남김) 3-1. 로컬에서 커밋 되돌리기 - soft : 커밋 되돌리고 그 동안의 변경사항 Staging으로 이동 - hard : 커밋 되돌리고 그 동안의 변경사항 삭제 git reset --soft HEAD^ (최상위 1개) git reset --soft HEAD~n (n=되돌릴 개수) git reset --hard HEAD~n Github Desktop에서 Soft Reset 방법 3-2. 변경사항을 원격 저장소로 강제 Push 내가 ..

리액트 props.children 이란 무엇인가?

소개 props.children 는 특정 컴포넌트 내부에 다른 컴포넌트를 배치시키고 싶을 때 사용합니다. 아래 코드의 결과는 Hi 입니다. div안에 button이 들어가는걸 원하겠지만, Box컴포넌트는 Hi를 반환하는 기능밖에 업습니다. const Box = (props) => Hi; const App = () => { return ( 버튼 } } → 결과는 Hi div안에 button이 들어가도록 하기 위해서는 props.children으로 전달하여 내부 컴포넌트를 렌더링 해줘야합니다. const Box = (props) => {props.children}; const App = () => { return ( 버튼 } } → 결과는 버튼

React - 프로젝트에서 이미지 경로 찾기

관리 폴더 public 폴더 webpack에 의해 관리됨 PUBLIC_URL 환경변수를 통해 접근 폴더 접근가능 파일 못찾으면 컴파일에러 없이 파일 깨짐 src 폴더 webpack에 의해 관리됨 (import하여 사용가능) 파일 못찾으면 컴파일 에러 발생 import logo from "경로"; require로 불러오기 가능 추가 팁 VS code는 jsconfig.json로 에디터에 대한 설정 및 기타 javascript에 대한 설정을 조작가능 index.html 위치한 곳에 jsconfig.json 파일을 생성해준다. 아래와 같이 작성해주면 경로 입력시 src 경로를 기본디렉토리로 하여 찾아준다. { "rootDir": "src", "compilerOptions": { "baseUrl": "src",..

styled components 사용 방법

소개 css를 컴포넌트 처럼 선언하여 사용할 수 있다. 리액트 컴포넌트 내부에서 작성하여 매우 빠르게 스타일을 적용시킬 수 있다. Local 하게 사용하는 방법과 Global 하게 사용하는 방법 두가지가 있다. 설치 # npm i styled-components 사용법 1. Local 하게 사용하는 방식 아래와 같이 CSS 스타일을 컴포넌트 처럼 사용할 수 있다. // 컴포넌트.js import styled from "styled-components" const Header = styled.header``; const List = styled.ul` display: flex; &:hover { background-color: blue; } `; const 컴포넌트 = () => { return ... }..

2021.11.19 사는 이야기 (분노)

2달도 안돼서 HTML 쌩기초부터 JS, React, React Native 까지 왔다 협업 입장에서는 엄격한 Rule이나 구조 같은 여러 방면에서 부족한 부분이 있겠지만, 진짜 구현만 해보라고 하면 어지간한 웹이나 앱은 만들 수 있을 정도가 되었다. 그런데 너무 개발에 치중한 나머지 코딩테스트에 많이 소홀해졌던것 같다. 솔직히 목표를 내년 상반기로 잡았는데 더 당기고싶다. 잠을 극한으로 줄여서라도 하루도 빠짐없이 알고리즘 문제 풀 생각이다. 프로젝트도 시작할 예정이고 남는 시간마다 유튜브 대신 CS 공부할 생각이다. 진짜 이제는 1월 넘기자마자 뛰쳐나온다는 각오로 뒤도 안보고 달려야한다. 무조건 1월이다. 더 못넘긴다.