프론트엔드/React4 리액트 src, node_modules 폴더가 안보일 때(매우 간단) 왜 오류가 나는지는 모르겠는데 수정 방법은 간단합니다. 여기서 '.idea' 폴더를 삭제하고 인텔리제이나 비주얼 스튜디오로 다시 폴더를 여시면 src와 Node_modules 폴더가 보일겁니다. 2024. 10. 1. 리액트로 주소검색 창 만들기 (카카오API 이용) [ 패키지 구조 ]my-app/├── src/│ ├── components/│ │ ├── SearchAddressModal.js // 주소 검색 모달 컴포넌트│ ├── pages/│ │ ├── SignUpPage.js // 회원가입 페이지│ ├── App.js // 메인 앱 컴포넌트│ └── index.js // 진입점└── package.json [ 패키지 설치 ]npm install react-daum-postcode 1. SearchAddressModal.jsimport React from 'react';import { Modal, Mo.. 2024. 9. 26. 리액트 Redux: 쿠팡의 서울본점 창고를 기억하자! 서울 쿠팡의 본점 창고를 운영한다고 가정하자. 이 쿠팡의 창고는 거대한 창고 내에 지역별(인천, 경기도, 전라도, 부산 등....)로 구분되어 있다. 소비자가 주문을 클릭하면 택배상자에는 어느 지역으로 가는지와, 어떤 상품이 들어있는지 구분되어 있다. 소비자가 주문을 하면 각 물건을 제조하는 회사에서 쿠팡의 창고로 택배차가 날라 줄 것이다. 택배기사는 물건주문인지, 반송인지를 구분하고 택배상자를 싣는다. 그리고 최종적으로 택배창고의 물건목록을 최신화한다. 이 쿠팡 창고는 택배의 '상태 관리'를 위해 존재한다고 할 수 있다. 이를 Redux에 접목시켜 보자. Redux는 Store라는 중앙집권화 방식(서울 본점 창고)으로 운영되며 상태를 관리하는데, 이는 각각의 Slice를 결합하여 관리한다(인천, 경기.. 2024. 9. 17. 리액트 Context API : 가게 사장님이 소비자에게 메뉴판을 제공하다. 기존에 우리는 컴포넌트간에 데이터를 주고받을 때, Parent와 Child 컴포넌트를 지정하고, props를 통해 전송하는 방법을 사용했었다. 그런데 만약 자식에게 전송하는 것이 반복된다면 props를 이용하는 것이 굉장히 비효율적일 수 있다. 실생활 예시로 들면 우리가 어머니 생신 때 생일카드를 작성해서 직접드리는 것이 효율적(props)이지만, 회사 내 공지사항을 전달할 때는 개개인별로 전송하는 것보다 단체로 전송하는 것이 더 효율적(Context API)이라 할 수 있다. 웹 페이지 게시판도 각각의 내용물만 달라질 뿐 전체적인 구성이나 디자인이 같다면 props의 전송보다는 Context API가 더 효율적이라 볼 수 있다. 우선 Context API를 쉽게 암기하기 위해 우리는 이미지화 시킬 필.. 2024. 9. 17. 이전 1 다음
