1. LocalStorage로 만드는 최근 본 상품 기능 1 새로고침하면 state가 초기값으로 돌아가는 것은 원래 그런것이다. 나는 이게 싫으면 state를 서버로 보내서 DB에 영구저장하면 됩니다. 만약 서버도 모르고 DB도 싫다 그러면 LocalStorage에 저장해둬도 됩니다. (반영구적 저장가능) Local Storage는 브라우저에서 제공하는 데이터 저장소입니다. Local Storage 특징 1. key : value 형태로 저장이 가능합니다. 2. 최대 5MB의 문자만 저장이 가능합니다. 3. 사이트에 재접속해도 남아있습니다.(브라우저 청소하면 삭제됨) Session Storage는 브라우저 끄면 날라갑니다(휘발성) 데이터 저장은 localStorage.setItem(이름,값) 데이터 출력..

1. 장바구니 페이지 만들기 & Redux 1 : Redux Toolkit 설치 먼저 Redux를 사용하기 위해 장바구니 페이지를 만들어 보겠습니다. 여기서 tr은 가로줄 th, td 넣으면 열 하나 생깁니다. Cart라는 js를 따로 만들어줘서 테이블을 작성해 준다음(Bootstrap 테이블) App.js에서 가져다 쓰겠습니다. 여기서 만약 장바구니 state 같은 것들을 여러 군데에서 쓰고 싶을때 Redux를 사용하여 관리하면 편하다.(props 전송이 필요 x) 리액트 구인시 대부분 Redux 요구 만약 Redux를 사용할꺼면 package.json에서 react 18버전, react-dom이 18버전 이상이어야 잘 작동됩니다. 여기까지 완료 됐으면 Redux 라이브러리를 설치해 봅시다. npm i..

1. Lifecycle과 useEffect 컴포넌트가 보이는 순간을 마운트(mount) 됐다고 볼 수 있다. 컴포넌트 안에서 state를 조작하면 업데이트(update)가 되기도 하고 필요없으면 제거되고 (unmount) 이런식으로 컴포넌트는 생명주기(Lifecycle)을 가진다. 중간중간 간섭이 가능하기 때문에 Lifecycle을 배운다. 이런식으로 갈고리를 달아서 이것을 제거되기 전에 실행할 코드를 실행하던가 업데이트될때 실행하던가 하는것 때문에 Lifecycle을 배우는 것이다. 컴포넌트에 갈고리 다는 법 이런식으로 작성할 수 있지만 요즘은 이런식으로 useEffect를 사용합니다. 이렇게 쓰게 된다면 mount, update 시 useEffect 안에 있는 코드가 실행됩니다. 실제로는 디버깅을 위..

Part2 : 쇼핑몰 프로젝트 1. 새로운 프로젝트 생성 & Bootstrap 사용하기 먼저 프로젝트를 생성해줘야 하므로 폴더를 만들어서 powershell 창을 열고 npx create-react-app으로 리액트 프로젝트를 만들어 줍니다. 프로젝트를 vscode로 열어서 필요없는 것들 지워주고 react bootstrap 라이브러리를 설치해줍니다. *bootstrap은 레이아웃을 복사붙여넣기식으로 편하게 개발가능한 라이브러리 입니다. 예를들어 버튼같은 것들! react bootstrap 홈페이지에서 Get started를 눌러줍니다. 중간에 npx install react-bootstrap bootstrap을 터미널에서 설치해줍니다. *tip 미리보기를 종료하고 싶을땐 ctrl + c 를 통해 미리보..

지난번 (1/2)편을 마치고 이번엔 (2/2)과정을 작성하였습니다. [코딩애플] React 리액트 기초부터 쇼핑몰 프로젝트까지! (1/2) Part1 : 블로그 제작 & 기초 문법 리액트를 왜 쓰는가 Single Page Application을 만들 때 씁니다. React를 쓰면 html 재사용이 편리하다. 같은 문법으로 앱개발이 가능하다. *Single Page Application이란 하나의 페 eungae-d.tistory.com 1. 리액트 환경에서 동적인 UI 만드는 법 (모달창만들기) 동적인 UI 만드는 3단계 1. html css로 미리 디자인 완성 2. UI의 현재 상태를 state로 저장 3. state에 따라 UI가 어떻게 보일지 작성 이것이 1번 css로 미리 디자인을 완성시켰습니다...

Part1 : 블로그 제작 & 기초 문법 1. 리액트를 왜 쓰는가 Single Page Application을 만들 때 씁니다. React를 쓰면 html 재사용이 편리하다. 같은 문법으로 앱개발이 가능하다. *Single Page Application이란 하나의 페이지를 사용하는 애플리케이션이다. SPA는 서버로부터 새로운 페이지를 가져오는 것이 아닌, 하나의 페이지에서 내용을 동적으로 변경함으로써 사용자 웹앱을 의미합니다. 전통적인 방식은 클라이언트가 최초 요청을 보내면 서버는 html 파일을 응답으로 보내고, 클라이언트가 다시 form 데이터를 전송하면 서버가 다른 html 파일을 응답으로 보내 페이지가 리로드 되는 방식이었다. 그러나 SPA 방식은 form 작성 시 ajax를 이용하여 form 데..