react

CORS 란CORS는 Cross-Origin Resource Sharing의 줄임말로 교차-출처 리소스 공유하고도 한다.즉, 다른 출처라고도 말할 수 있고 다른 출처이기 때문에 발생하는 에러라고도 할 수 있다. next.config.mjs 설정** next.config.mjs **/** @type {import('next').NextConfig} */const nextConfig = {    reactStrictMode: true,    swcMinify: true,    async rewrites() {        return [            {                source: '/api/:path*',                destination: 'http://apis.data..

# memo ? 특정값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐) 메모이제이션을 많이 할수록 메모리 점유율을 강제로 늘려서 성능을 올림 자바스크립트 엔진의 Garbage Collection에서 제외됨 (안쓰는 메모리를 정기적으로 제거해서 메모리 최적화) # 언제 사용할까? 부모 컴포넌트가 재호출되면 자식 컴포넌트는 변경되는 요소가 없음에도 불구하고 무조건 같이 재호출됨 # 기본 구조 export default memo(컴포넌트) 컴포넌트를 내보낼때 memo로 감싸준다. # 예시 app.js 와 그 자식 컴포넌트로 예시를 들어보겠습니다 - app.js import { useState } from 'react'; import Child from './Child'; function App() {..

# useState [state가 담김 그릇, 해당 State값을 변경해주는 전용함수] = useState(초기값) 컴포넌트에서 State값을 변경하면 첫 번째 렌더링 사이클에서는 변경된 State값 활용불가 State값이 변경되면 컴포넌트가 무조건 재호출되고 두 번째 렌더링 사이클에서 변경된 State값을 활용가능 얕은 복사시 원본도 훼손되면서 변경 비교대상이 없어지면서 재랜더링 불가 (state는 원본과 비교하면서 동작) 복사시 스프레드 연산자 사용 (deep copy) 우선 import 를 해야한다 import { useState } from 'react'; state로 사용할 변수명을 지정한다 const [state, setState] = useState(초기값); 예시) import { useS..

일단 react를 설치하기 위해선 기본적으로 node가 필요하니 node 부터 설치해야 한다. https://nodejs.org/ko Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 18버전 이상으로 설치 실제로 리액트는 UI를 구성할 때 필요, 최신의 자바스크립트 문법을 모든 브라우저가 읽고 해석할 수 있는 과거의 문법으로 변환시켜주는 Babel, 작성한 자바스크립트 파일을 분석하여 분할하고 합쳐주는 역할을 하는 WebPack 또한 필요하다. 최신버전 부터는 babel과 webpack이 같이 설치되니 신경쓸 필요는 없고 알고있으면 된다. cmd 열어서 전역으로 리액트를 설치해 준다 명령어..