Lo9

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Local Storage에 대해 내용을 정리한다. 목차 1. Web Storage API 사용하기 2. Local Storage 확인하기 3. 프로젝트에 적용하기 Web Storage API 사용하기 따로 데이터 베이스가 없다면 페이지를 테스트하고 난 후 껐다 켜거나 새로고침 할 경우 데이터가 처음 그대로 돌아가게 된다. 이럴 때 Web Storage API를 사용하여 LocalStorage에 데이터를 저장시키고 불러와 데이터를 보존한다. Web Storage API에는 두 가지로 나뉜다. session storage와 local storage가 있으며 session storage는 브라우저가 열려있는 동안 데이터를..

웹 프로그래밍시 VSCode를 사용하면서 코드 작성시 유용한 확장 프로그램을 정리한다. 목차 1. Auto Close Tag 2. Auto Rename Tag 3. Live Server 4. ES7 + React / Redux / React-Native snippets(React 관련 snippets) 5. Material Icon Theme 6. Prettier - Code formatte Auto Close Tag 앞의 태그를 작성하면 자동적으로 태그를 닫아주는 기능 Auto Rename Tag 앞의 태그를 수정하면 닫히는 태그 또한 같이 수정하는 기능 Live Server html파일 코드에서 우클릭 후 "Open with Live Server" 클릭하게 되면 로컬 아이피로 html 파일이 작동하는..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 Page Routing에 대해 내용을 정리한다. 목차 1. Page Routing 이란 2. React Router Dom v6 사용하기 3. React Router Dom v6의 유용한 기능 Page Routing 이란 Routing이란 - 어떤 네트워크 내에서 통신 데이터를 보낼 경로를 선택하는 일련의 과정 - 이때 데이터 경로를 Route, 데이터 경로를 실시간으로 지정해주는 역할은 Router 라고 함 Page Routing이란 - Browser에서 웹서버에 경로에 대한 요청을 보내고 웹 서버가 보내는 문서를 받아보는 과정 - 즉, 요청에 따라 어떤 데이터를 돌려줄지 결정하는 과정 - Page Routing은..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 useReducer, useContext를 사용한 프로젝트 정리 대해서 수강하고 내용을 정리한다. 목차 1. useReducer - 복잡한 상태변화 로직 분리 2. useContext - 컴포넌트 트리에 데이터 공급 useReducer - 복잡한 상태변화 로직 분리 simple-diary 프로젝트에서 App 컴포넌트에는 많은 상태변화 함수가 존재한다.(ex. getData, onCreate, onRemove 등) 복잡하고 긴 상태변화 로직을 컴포넌트 밖에 정의하여 컴포넌트 코드를 좀 더 단순히 만들 수 있다. // reducer 함수 // switch문을 통해 action.type을 확인하여 상태변화 처리 // re..

인프런, 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지의 내용 중 최적화 부분에 대해서 수강하고 내용을 정리한다. 목차 1. useMemo( ) - 연산 재사용하기 2. React.memo( ) - 컴포넌트 재사용하기 3. useCallback( ) - 함수 재상용하기 useMemo( ) - 연산 재사용하기 컴포넌트들을 작성하다 보면 한 번 연산한 이후 계산할 필요가 없을 때가 있다. 이때 연산 결과를 재사용하므로써 연산을 줄일 수 있다. 이를 Memoization이라 부르고 이는 프로그래밍 기법에 가깝다. 즉, Memoization은 계산 해둔 연산의 결과 값을 기억해 두었다가 동일한 계산을 시키면, 새로 연산하지 않고 결과 값을 반환시켜 연산을 줄이는 것이다. simple-da..