리액트 라우터 관리 팁 [routes/AppRouter.jsx] [routes/BoardRouter.jsx]

1. Redux-persist 사용법 > 개발 환경은 노드JS, 코드 실행은 브라우저, 상태 유지는 로컬 스토리지 Redux-persist는 리덕스 스토어의 상태를 지속적으로 유지하기 위한 라이브러리입니다 설치 라이브러리 사용을 위해 Store를 수정합니다 애

Redux & Redux-Thunk 1. 리액트 초기세팅 오늘 필요한 패키지들입니다 설치 간단한 백엔드 설정부터 먼저 하고 시작하겠습니다 Backend 백엔드는 CORS 처리에 특히 주의! [./server/server.js] 리액트 프로젝트 시작은 항상

Redux 지금까지 Context API를 사용하여 전역상태를 관리하는 방법에 대해 알아봤습니다 우리는 왜 Redux를 사용할까요? 하나의 리퀘스트에는 여러가지 상태바꿈이 들어갈 가능성이 높습니다 Redux를 사용하면 애플리케이션 전체의 상태를 집중적으로 관리할

로그인 상태 관리 리액트에서 말하는 상태(state)란 캐시나 메모리와 같은 역할을 하는 자바스크립트 변수입니다 그런데 자바스크립트 변수는 브라우저를 새로고침하면 초기화된다는 문제가 있죠 그래서 오늘 포스팅의 관건은 로그인 상태(true)를 새로고침해도 유지되도록

1. iterable & iterator > ~ES5의 for문 > ES6부터 등장한 for of문 아주 간단한 반복문 예제입니다 당연히 코드의 결과도 같습니다 하지만 for of문은 단순히 가독성만을 위해서 축약된 것은 아닌데요 기존의 반복문과는 다른 숨겨진

2023-03-07T08:03:52.000Z -> 방금전, n분 전, n시간 전, n일 전...

React HOOKS > - useCallback() useMemo() memo useContext() useReducer() 1. useCallback & useMemo 함수형 컴포넌트의 이슈 클래스형 컴포넌트에서는 render() 함수 내에서 호출한 함수만

포인트 정리CRUD의 핵심은 최상위 컴포넌트 역할을 하는 <Comment />입니다이 Comment 컴포넌트가 수정 및 삭제 후의 상태 관리가 가능하도록 설계해야 합니다(그래서 modify, destroy 함수를 상위 컴포넌트에 미리 생성하고, props를 통해

componentDidMount() : 컴포넌트가 생성되고 첫 렌더링이 완료된 후 호출됩니다componentDidUpdate() : 컴포넌트가 업데이트된 후 호출됩니다componentWillUnmount() : 컴포넌트가 제거되기 직전에 호출됩니다생명주기 메서드에 대한

컴포넌트 이름은 첫글자를 대문자로 지어야 한다는 규칙이 있기 때문입니다리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리합니다예를 들어

리액트 입문 > 리액트 ~ 데이터가 바뀌면 화면도 바뀐다 리액트는 메타 사(구 페이스북)에서 개발한, 자바스크립트 DOM 조작을 간편하게 만들기 위해 탄생한 라이브러리입니다 리액트는 다른 라이브러리나 프레임워크와 함께 사용될 수 있으며, 빠른 성능과 좋은 유지보수

// 정적 메서드 예제 // class Person { // // 접근제어자 public, private ~ 특정 객체 정보를 console.log로 드러내고싶지 않을 때 // #key = 180 // #을 붙이면 key는 private 속성이 됩니다

지금까지 MVC 패턴을 토대로 백엔드 서버의 구조를 살펴보면라우터는 컨트롤러를, 컨트롤러는 서비스를, 서비스는 레포지토리를 요청합니다이러한 구조로 짜여진 코드를 의존 관계에 놓여있다고 말하는데요코드의 흐름을 한 눈에 파악하기 편한 반면어느 하나에만 문제가 생겨도 모든

abc

비동기 코드는 일반적인 코드와 달리 실행 순서가 정해져 있지 않은 코드를 의미합니다즉, 언제 실행될지 알 수 없다는 말과 같습니다이것은 우리가 일반적으로 코드를 작성할 때 사용하는 동기(synchronous) 코드와는 달리, 코드의 실행이 순차적으로 진행되지 않아서 코

4. Array.prototype.filter() reduce 메서드는 기본적으로는 `forEach, map, filter등과 같이 배열의 요소들을 순회할 때까지 콜백함수를 반복실행하는 메서드입니다. 가장 강력한 기능을 가진 만큼 사용법도 까다롭기 때문에 reduc

배열 메서드 정리 > forEach() map() filter() reduce() 1.Array.prototype.forEach() forEach메서드는 콜백함수를 호출하며 해당 함수 안에는 다음과 같은 세가지 인자를 받습니다 1) 현재 요소(value/el/i

1. 스크롤 이벤트 > - intersectionObserver API 2. 마우스 이벤트 > - mousedown : 마우스 버튼을 누를 때 이벤트가 발생합니다 mouseup : 마우스 버튼을 눌렀다가 뗄 때 이벤트가 발생합니다 mousemove : 마우스를 움

배열함수 [목차] forEach() filter()