전체 글74 [네트워크] Cross Origin Resource Sharing (CORS) Cross Origin Resource Sharing (CORS) 웹 개발에서 빠질 수 없는 개념인 Cross Origin Resource Sharing (CORS)를 알아보자. # Same Origin 정책 vs Cross Origin 정책 서버와 클라이언트는 HTTP로 통신한다. 이때, 특정한 정책 아래에서 요청을 주고 받게 되는데 그 정책에는 Same Origin 정책과 Cross Origin 정책이 있다. HTTP 요청이 무엇이냐에 따라 Same Origin 정책을 따르거나 Cross Origin 정책을 따르는 것이다. Origin이란 말 그대로 출처이다. 즉, HTTP 요청의 종류에 따라 같은 출처(Same Origin)만을 허용하거나 다른 출처(Cross Origin)도 허용하는 경우로 나뉜다.. 2023. 2. 10. [배포] GitHub로 React 배포하기 Github로 React 배포하기 1. gh-pages 패키지 설치하기 npm install --save gh-pages // or yarn add gh-pages 2. package.json에 homepage 추가하기 "homepage" : "http://(본인username).github.io/(Repository이름)", 3. package.json의 scripts에 predeploy와 deploy 항목 추가 "scripts": { "predeploy" : "npm run build", "deploy" : "gh-pages -d build" } * 배포하기 전 주의할 점 React 프로젝트에서 BrowserRouter를 사용했다면 페이지 배포 후 에러가 생길 수 있음. 로컬 환경에서는 기본 주소가 .. 2023. 2. 8. [TypeScript] 제네릭 제네릭 # 제네릭(Generics)이란? 타입스크립트를 사용하면 변수의 타입을 변경할 수 없다. name: string이라든지, age: number라든지, 변수 선언과 동시에 타입이 지정되기 때문이다. string | undefined 처럼 작성해주면 약간은 유연하게 사용할 수 있으나 기본적으로 타입은 항상 고정되어 있다. 그러나 프로그래밍을 하다보면 변수의 타입이 바뀔 수도 있다, 혹은 하나의 함수에 다양한 타입의 값을 넣어야 할 수도 있다. 이런 경우에는 타입을 고정적으로 지정하면 오히려 불편해진다. 따라서 타입을 직접적으로 고정시키지 않고 변수처럼 언제든지 변할 수 있도록 해주는 장치가 등장하였는데, 이를 제네릭(Generic)이라고 한다. function add(x: string | number.. 2023. 2. 1. [React Query] React Query 알아보기 React Query 알아보기 # React Query란 React Query는 React의 라이브러리로, 데이터 Fetching, 캐싱, 동기화, 서버 쪽 데이터 업데이트 등을 쉽게 만들어준다. 기존의 Redux, Recoil과 같은 상태 관리 라이브러리들은 서버 쪽의 데이터들을 관리하기에는 적합하지 않았는데, React Query는 이를 해결해준다. 예를 들어, 두 명의 관리자가 동시에 같은 페이지를 바라보고 있는 상황에서, 한 사람이 데이터를 변경하면 다른 사람도 그 변경된 데이터를 바라볼 수 있어야 한다. React Query는 이런 상황에서 데이터를 용이하게 관리할 수 있도록 서버 측을 도와준다. 또한 React 컴포넌트 내부에서 간단하고 직관적으로 API를 사용할 수 있기 때문에 프론트엔드 입.. 2023. 1. 30. [Firebase] React에서 Firebase로 database 이용하기 React에서 Firebase로 database 이용하기 React에서 Firebase로 데이터베이스에 데이터 추가하기, 데이터베이스에 있는 데이터 불러오기, 데이터베이스에 있는 데이터 삭제하기를 구현하는 방법을 정리해보려 한다. firebase 9.16.0 버전 기준으로 작성되었습니다. 1. firebase 파일 만들기 (src 폴더 하위에 생성하면 됨) // src/fbase.js import { initializeApp } from "firebase/app"; import { getFirestore } from "firebase/firestore"; const firebaseConfig = { apiKey: process.env.REACT_APP_FIREBASE_API_KEY, authDomain:.. 2023. 1. 26. [React] React에서 네이버 지도 API 사용하기 React에서 네이버 지도 API 사용하기 1. public/index.html에 script 넣어주기 index.html의 안에 위와 같은 script를 넣어준다. ClientId= 뒤에 발급받은 Key를 넣어준다. 환경변수를 사용하고 싶다면 으로 적어주면 된다. 단, 개발자 도구에서 key 값이 다 보인다는 단점이 있다... 그래서 실제 서비스되는 웹 사이트에 적용하기엔 적절하지 않을 테니 참고해주시길! 😅 2. 지도 생성하기 // src/Map.js const mapRef = useRef(null); const lat = // 위도 숫자로 넣어주기 const lng = // 경도 숫자로 넣어주기 useEffect(() => { const { naver } = win.. 2023. 1. 19. 이전 1 ··· 4 5 6 7 8 9 10 ··· 13 다음
