[WEB] CORS 에러란 ? ..

프로젝트가 끝나고 쉬고있는 와중에백엔드 부분 하시던 부장급 개발자분이 이번에 리액트를 처음 하셔서 공부를 하시다가 이거 어떻게 하냐 질문을 했는데CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.이런 에러가 떠있는걸 보고"어? 이건 리액트가 아니라 백엔드에서 고치셔야 하는데요 ? ..."대충 설명을 드렸는데도 이해를 못 하셔서 그냥 스프링 쪽 코드를 작성해서 보내드렸다..CORS (Cr..

• format_list_bulleted CS
• · 2025. 2. 27.
• textsms

[React] 9. useMemo (최적화)

useMemo (Memoization)최초로 계산하였을 때의 값을 메모리에 저장하고 동일한 계산에 대해서 각자 계산하는게 아닌 첫 번째 계산한 후 저장한 메모리에서 가져옴-> 불필요한 연산을 방지해줌(연산 줄임)import { useMemo, useReducer, useState } from "react";function Exam() { const [count, setCount] = useState(0); const [value, setValue] = useState(1); // 복잡한 연산 const expensiveCalculation = (num) => { console.log("⚡ 계산 중..."); let result = num * 2; for (let i = 0; i ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 8. useReducer

useReducer기존에 컴포넌트 내부에서 상태 관리 코드를 컴포넌트 외부에서도 할 수 있게 해주는 기능 여러개의 상태, 객체, 로직을 한꺼번에 관리하거나 코드를 분리할 때 많이 쓰게 됩니다. 특징 중 하나는 일반적으로 가독성을 위해 switch 문을 많이 씁니다. (if문 써도 무관) import { useReducer } from "react";function counterReducer(state, action) { switch (action.type) { case "INCREMENT": return state + 1; case "DECREMENT": return state - 1; case "RESET": return 0; ..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 7. useEffect

useEffect useEffect의 경우 렌더링이 발생할 때마다 동작하게 할 내용을 적을 때 쓰기 때문에useEffect 를 통해 동작하는 내용이 많아지면 크게 속도가 떨어지니 useState 또는 useRef 로 해결되지 않는 경우에만 사용하여야한다.  또한 렌더링 발생마다 이므로 effect가 존재하는 화면에 처음 들어갈 때도 동작을 한다.import './App.css'import InputText from './components/InputText'function App() { return ( )}export default App import { useEffect,} from "react";import useInput from "../Hook/useInput";con..

• format_list_bulleted JavaScript/React
• · 2025. 2. 21.
• textsms

[React] 6. 리액트의 생명주기(Life cycle)

일반적인 코딩에서 배우는 전역변수 지역변수의 생명주기가 아닌 React 에서 나오는 생명주기에 대해 작성하고 있습니다 .Life cycle생명주기에는Mount (생성)Update (변경)Unmount (제거)순으로 진행됩니다.MountMount는 화면이 처음 렌더링 되는 그 순간을 의미하는데 자세하게는 이런식으로 동작합니다.코드가 실행되어 렌더링까지의 내용이며,이 과정을 통해 리액트는 화면에 컴포넌트를 출력하고 있습니다.UpdateUpdate는 이름 그대로 변경 사항에 대하여 변경하는 내용으로 위와 같이 동작합니다.즉 리렌더링을 의미하며 이 과정을 통해 리액트는 변경된 내용을 적용하여 출력합니다(중간에 렌더링 할 지 하지 않을지 구분은 Ref , State 생각하시면 됩니다.)Unmount 더 이상 사용..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms

[React] 5. Hook

리액트는 과거 버전에서 UI를 만들 땐 Function 컴포넌트 , 기능을 만들 땐 Class 컴포넌트로 분류하여 작성하였으며  당시에는 State , Ref 라는 기능으로 사용이 되었으나 이제는 Hook 을 통해 Class 컴포넌트로 사용되던 기능들을 낚아채 Function으로 가져간다는 의미로 Hook 이라고 부른다.  Hook 으로 만들어진 것들은 모두 use 가 앞에 붙는 형태로 이루어져 있습니다. (useState , useRef 등등)(단, 이런 Hook 들은 함수 컴포넌트 내부에서만 호출 가능, 조건문(반복문) 내에선 불가능함. ) 또한 기존의 State , Ref가 아닌 내가 필요로 하는 기능을 제작해 만들 수 있는데 이걸 Custom Hook이라 부른다.  예시로 import { useR..

• format_list_bulleted JavaScript/React
• · 2025. 2. 14.
• textsms