frontend (React) 개발19 (React) Route - createBrowserRouter BrowserRouter 를 쓸 것인가 createBrowserRouter 를 쓸 것인가?BrowserRouter 보다 createBrowserRouter 를 써야 하는 이유는 다음과 같다.하부 링크가 가능 (링크 화면에서 한번 더 링크)각 링크 컴포넌트 별로 에러 처리가 가능데이터 Fetch 가능일단 맛보기로 BrowserRouter 를 간단한 소스코드를 소개 (React v5에서는 Switch를 v6에서는 Routes를 사용)import {BrowserRouter,Routes,Route,Link} from "react-router-dom"; function App() { return ( } /> } /> ); } creat.. 2025. 1. 29. CORS (Cross-Origin Resource Sharing) 란? 기본적으로 웹브라우저는 시큐리티상 다른 Origin(도메인, 프로토콜, 포트) 리소스에의 액세스를 불허한다. 주로 아래와 같은 효과가 있다. 1. API 주소만 안다고 하면 아무렇게나 액세스하여 데이터를 훔쳐갈 수 있는데 이를 방지하는 효과.2. CSRF（Cross-Site Request Forgeries) 를 방지하는데 예를 들면 사용자가 특정 사이트에 로그인 상태에서 스팸메일의 악성 링크를 클릭하면 로그인 세션으로 API 에 접근하여 원치 않는 결과를 초래 할 수 있다. 위의 예에서는 웹 페이지는 example.com 으로 부터 발행되서 그 안에서 api.example.com/func 을 액세스하고 있지만 엄격히 말해 서브도메인도 별도의 도메인으로 취급되므로 아래와 같은 에러가 발생하게 된다. 각각 .. 2025. 1. 23. (React) html, css, 외부 javascript화일, 구글폰트 사용하기 1. CSS 준비된 CSS 화일을 폴더에 둔다. 예) my.css React Component 화일에서 아래와 같이 임포트import "./my.css" 2. 구글 폰트 URL 사용 CSS 화일의 선두에 아래와 같이 임포트@import url("https://fonts.googleapis.com");@import url("https://fonts.gstatic.com");@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&family=Roboto:wght@700&display=swap"); 3. HTML return ( ) 에 준비된 HTML body 태그 내부를 붙여넣기 css .. 2025. 1. 18. (React) useState 값 변경 1. 독립변수 선언const [value, setValue] = useState(0);새로운 값을 설정 setValue(3)}>click 기존 값을 변경 setValue(prev => prev + 1)}>click 2. 리스트 변수선언const [value, setValue] = React.useState(["a", "b", "c"]); 초기화 setValue([ ])}>click 값 추가 setValue(prev => [...prev, "d"])}>click 특정값 삭제 setValue(prev => prev.filter(item => item !== "a"))}>click 특정 인덱스 삭제 setValue(prev => prev.filter((item, index) => index !== 0))}.. 2024. 5. 16. 이전 1 2 3 4 5 다음
