react

01. 문제2일동안 찾아보던 버그… 회사 프로젝트에서 react-datepicker를 사용해서 달력을 만들었다. 그런데 달력을 닫으려고 배경을 클릭했을 때, 달력이 닫히고 이벤트가 종료되어야 하는데. 클릭한 위치에 버튼이나 어떤 이벤트가 달린 컴포넌트가 있으면 그 이벤트가 실행되었다. 리액트 강의를 들으며 실습하고 있던 프로젝트를 연습장 삼아 달력을 다시 만들어봤다. 달력 외부에 주문하기 버튼을 클릭했을 때 버튼 이벤트가 발생하였다.  ProductItem에 있는 버튼 이벤트가 실행되는 것을 로그를 통해 확인할 수 있었다. 02. 해결과정DatePicker에 있는 onClickOutside에 버블링을 중단하는 코드를 넣어줬다. -> (X) 해결되지 않음 {/* {isOpen && } */..

01. 오류react-datepicker 라이브러리를 설치하고 화면에서 사용하려고 하니 아래와 같은 오류가 발생했다. ERROR in ../node_modules/react-datepicker/dist/react-datepicker.css 1:0Module parse failed: Unexpected character '@' (1:0)You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders> @charset "UTF-8";| .react-datepicker__year-rea..

[개발환경]npm: 10.5.0Node.js: 18.20.2 00. 개요Create React App(CRA)를 사용하면 프로젝트 초기 설정이 매우 간단하고 빠르게 할 수 있다. 하지만 기본적인 설정을 제공하기 때문에 특정 작업이나 플러그인을 사용하려는 경우 커스터마이징 하기 어렵다. 또한, 모든 라이브러리를 포함하여 번들을 생성하기 때문에 번들 크기가 커진다는 점이 신경쓰였고, 무엇보다 직접 웹팩을 설정해서 개발환경을 구성해 보고싶었다. 01. 웹팩(Webpack)이란?웹팩은 JavaScript 애플리케이션을 위한 정적 모듈 번들러이다. 애플리케이션을 처리할 때 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성한다. 이는 개발과정을 단순화하고, 코드를 최적화하여 웹 사이트의 성능을 향상시..

리액트 개발 환경을 구성하는 여러 가지 방법이 있다. 가장 흔한 방법은 웹팩(Webpack)을 사용하는 것이지만, 그 외에도 Create React App(CRA), Parcel 등의 도구를 사용하여 개발 환경을 구성할 수 있다.  각 방법은 각자의 장단점이 있으며, 프로젝트의 요구 사항에 따라 적합한 방법을 선택할 수 있다. 웹팩을 선택한 경우처럼 세밀한 제어와 유연성이 필요하다면 웹팩을 사용하는 것이 좋다. 반면 간단하게 시작하고자 한다면 Create React App이나 Parcel을 사용하는 것도 좋은 방법입니다. 01. 웹팩(Webpack)을 사용한 개발 환경 구성장점유연성: 웹팩은 로더와 플러그인을 통해 다양한 자원을 번들링하고 처리할 수 있음커스터마이징: 설정 파일을 통해 세밀한 설정이 가능..

[리액트2부]고급주제와훅을 수강하며 공부한 내용을 정리하는 글 입니다.[리액트 1부] 만들고 비교하며 학습하는 리액트 (React) 강의 듣고 실습한 것은 github에 있습니다. 01. 1부 수업 요약1부 수업에서는 쇼핑몰 검색 화면을 만들면서 리액트 기본 개념을 익혔다.  준비편라이브러리 없이 바닐라 js로 어플리케이션 개발했다.  소개편리액티브와 가상돔 개념을 익혔다. react, react-dom, babel, jsx의 역할을 이해했다.  사용편 1리액트로 어플리캐이션을 다시 만들었다.컴포넌트, 상태, 이벤트 처리, 조건부/리스트 렌더링, 컴포넌트 생명주기 등 리액트의 주요 개념에 대해 이해하고 실습했다.  사용편 2여러 컴포넌트로 어플리케이션을 다시 설계했다. 역할에 따라 작은 컴포넌트 여러 개..