General/React⚛️ 3

CSS-in-JS

React는 크게 2가지 방식으로 컴포넌트의 스타일을 적용한다.CSS in CSS리액트 컴포넌트 별로 css 파일을 갖는 형식으로 스타일을 관리CSS Module별도의 자바스크립트 전환 필요 없음(속도가 빠름)CSS in JS자바스크립트 내에서 css를 작성하는 방식대표적인 라이브러리로 styled-component, emotion 등이 있음현재 사용중인 스타일만 DOM에 포함시킬 수 있음별도 패키지를 설치하기 때운에 용량이 증가함(스크립트 전환이 필요하여 속도가 다소 느려짐) 🔥 CSS in JS 방식으로 하기위해 Emotion 적용하기yarn add @emotion/react @emotion/styled또는npm install @emotion/react @emotion/styled 설치 완료되면 ..

General/React⚛️ 2025.05.06

yarn 설치 오류 (Internal Error: EPERM: operation not permitted)

yarn 설치후 yarn 명령어 인식 안되어서 해결 방법을 찾아 아래처럼 실행 하였지만corepack enablecorepack prepare yarn@stable --activate Internal Error: EPERM: operation not permitted 에러 발생.. 🔥해결 방법시작 메뉴 > PowerShell 우클릭 > "관리자 권한으로 실행" 클릭.다시 아래 명령어 실행:corepack enablecorepack prepare yarn@stable --activate 이제 yarn -v로 Yarn이 설치됐는지 확인yarn -v

General/React⚛️ 2025.05.06

[React] Invalid options object. Dev Server has been initialized using an options object that does not match the API schema.

React - Spring 연동 시 Proxy 설정 프록시란?프록시(Proxy)는 "대리"의 의미로, 인터넷과 관련해서 쓰이는 경우, 특히 내부 네트워크에서 인터넷 접속을 할 때에, 빠른 액세스나 안전한 통신등을 확보하기 위한 중계서버를 "프록시 서버"라고 일컫는다. 클라이언트와 Web서버의 중간에 위치하고 있어, 대신 통신을 받아 주는 것이 프록시 서버이다. 왜 해야하는가?리액트의 기본 Port 넘버는 3000번, Spring은 8080번으로 서로 다르기 때문이다.CORS 문제가 생기므로 프록시 설정 필수. package.json에 아래와 같이 추가( 나같은 경우는 아래처럼 추가해도 안됐다..)"proxy": "http://localhost:8080" 원인(추측): 지금 이 문제는 proxy 때문이..

General/React⚛️ 2025.04.28