분류 전체보기 (33) 썸네일형 리스트형 CRA에서 dotenv 설정 할 때 생긴 오류 해결 CRA 에서 dotenv를 설정하기 위해 dotenv 패키지를 설치하고, .env 파일을 생성해서 api_key를 입력한 다음, 실행하려고 브라우저를 켜보니 아래와 같은 에러가 발생했다. Compiled with problems:X ERROR in ./node_modules/dotenv/lib/main.js 24:11-24 Module not found: Error: Can't resolve 'fs' in '/Users/yubyeong-gug/Desktop/product_server_admin_client/product_server_admin_client/node_modules/dotenv/lib' ERROR in ./node_modules/dotenv/lib/main.js 26:13-28 Module .. React@18과 react-router-dom@5의 호환성 문제 이슈 제로초 강의를 CRA로 옮기면서 생긴 문제였다. react-router-dom을 사용해서 라우팅 처리는 다했고 마지막으로 결과를 확인하던 찰나에 다음과 같은 문제가 생겼다. 로그인 페이지에서 회원가입으로 이동하려고 했는데 url는 정상적으로 변경되지만 회원가입 페이지가 랜더링되지 않는다. 일단 제일 먼저 해결한 방법으로는 index.js 파일에서 를 제거하는 거였다. 생각했던 거처럼 로그인 페이지에서 회원가입 페이지로 잘 이동되었다. 여기서 끝내면 찝찝해서 좀 더 찾아보고 오픈톡에도 물어보다가 알게 된 게 있어서 이렇게 정리해본다. 일단 본인이 사용한 리액트의 버전은 18이였고 react-router-dom의 버전은 5.2.0 이었다. 리액트 18에서는 react-router-dom 5.3.3 이하.. 리액트 - 5. Props와 State Props와 State 리액트에서는 데이터를 다루는 데 정말 중요한 개념인 props와 state에 대해 살펴본다. 1. Props props는 properties의 줄임말로 어떤 컴포넌트에게 데이터를 전달할 때 사용한다. 리액트는 단방향 데이터 흐름을 지향하므로 항상 부모 컴포넌트에서 자식 컴포넌트로의 전달만을 허용한다. 따라서 자식 컴포넌트에선 props를 변경할 수 없고 부모 컴포넌트에서 변경한 후 내려줘야 한다. 1) Props 사용해보기 props를 사용하는 방법은 부모 컴포넌트에서 자식 컴포넌트의 속성에 원하는 값을 전달해주면된다. function Children( props ) { return { props.hello }; } export default function Parent() { r.. 리액트 - 6. 리액트에 조건문 사용하기 조건부 랜더링 조건부 랜더링: 특정 조건에 따라 다른 결과를 화면에 보여주는 것을 의미 리액트에서 조건문 사용하기 JSX문은 리액트에서 클래스 컴포넌트에서의 render 함수의 리턴되는 부분이나 함수 컴포넌트에서 리턴 되는 부분을 말하는데 이 JSX문에 if 조건식을 사용할 수 없다. 만약 사용하고 싶다면 즉시 실행함수를 사용하거나 리턴문 위에 작성하면 된다. 주로 리액트의 JSX문 안에서 조건에 따른 분기 처리를 할때는 보통 삼항연산자 또는 단축평가 논리 계산법(짧은 연산자)을 사용한다. 사용해보기 props에 name이 값이 전달되면 "환영합니다." 메시지를 출력되도록 하는 컴포넌트를 만들어보자! (Welcome.jsx) function Welcome({ name }) { return ( 즐거운 시간.. CRA에서 절대경로 설정하기 앞뒤가 안맞아서 수정중.... CRA에서 자체적으로 설정하는법 프로젝트 root 경로에 자바스크립트라면 jsconfig.json, 타입스크립트를 사용한다면 tsconfig.json 파일을 추가한 후 다음과 같이 작성해준다. { "compilerOptions": { "baseUrl": "src" }, "includes": ["src"] } 이렇게 위와 같이 작성해주면 절대 경로로 사용할 수 있다. 사용하는 방법은 아래와 같다. 만약 App 컴포넌트에서 components/Footer 경로에 있는 Footer 컴포넌트를 불러온다면 import문에 import Footer from 'components/Footer' 이렇게 불러와 주면된다. CRACO 사용하기 ❗ CRACO 를 사용하는 건 타입스크립트를 사용.. React Proxy 설정하기 React Proxy 설정하기 http-proxy-middleware 패키지를 사용해서 Proxy를 설정하는 방법에 대해서 살펴본다. 1. Proxy를 왜 설정하는 거지? 동일한 출처(도메인, 프로토콜, 포트)라면 이러한 설정없이도 요청해도 되지만, 동일한 출처가 아닌 경우 요청을 보낼 때 CORS 이슈가 발생한다. 여기서 CORS란 Cross-origin Resource Sharing(교차 출처 리소스 공유) 의 약자로 추가 HTTP 헤더를 사용하여, 한 출처에서 실행중인 웹 어플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 제도이다. 따라서 CORS 이슈가 발생했다는 건 다른 출처에 접근할 수 있는 권한이 없다는 의미이다. 이러한 문제를 해결하는 데 주로 .. 리액트 - 4. JSX 문법 JSX 문법 알아보기 JSX 문법을 사용하면 자바스크립트 코드에 HTML 태그들을 쉽게 사용할 수 있다. 이 JSX 문법을 사용하기 위해서는 index.js에 아래와 같이 추가해줘야한다. import { StrictMode } from "react"; import ReactDOM from "react-dom"; import App from "./App"; const rootElement = document.getElementById("root"); ReactDOM.render( , rootElement ); 💡 ReactDOM.render 는 무엇인가? 컴포넌트를 브라우저 페이지에 랜더링하는 역할을 하며 "react-dom" 모듈을 불러와서 사용한다. 이 함수의 첫번째 파라미터에 페이지에 랜더링할 요소를.. 리액트 - 3. 컴포넌트 만들기 컴포넌트 만들기 1. 리액트 컴포넌트 리액트 컴포넌트를 살펴보기 전 컴포넌트에 대해 정리! 컴포넌트 란? - 소프트웨어 시스템에서 독립적인 업무 또는 독립적인 기능을 수행하는 '모듈'로서 시스템을 유지보수 하는데 있어서 교체 가능한 부품을 의미한다. - 이는 재사용성을 높이고 유지보수를 용이하게 해 준다. 리액트에서 컴포넌트 란? - 리액트에서 컴포넌트란 독립적으로 기능들을 캡슐화하는 리액트의 최소 단위이다. - 개념적으로 컴포넌트는 부모로 부터 props라고 하는 상태(속성)를 전달받아 화면에 어떻게 표시되는지 기술하는 React Element를 반환하는 함수이다. - 이 컴포넌트는 블록들을 조합해서 원하는 것을 만들 수 있는 제품인 레고 처럼 기능별로 쪼개서 이것들을 조합해서 사용자가 보는 view를.. 이전 1 2 3 4 5 다음
