공부하는 개발자 핑구 🐧 공부하는 개발자 핑구 🐧

Cookie 및 CORS 관련 설정체크를 백엔드에서 충분히 검토(특히 preflight)하고 배포하기 위해 간단하게 React 를 띄워 서버에 요청할 때 jsx 문법을 찾아보는 시간을 줄이기 위한 기록용 포스팅이다. preflight 는 헤더 값을 추가하면 trigger 된다. (물론 브라우저에서 trigger 하지 않는 예외적인 헤더들도 존재한다) 1. Create React App 실행 2. Install Axios 3. 리액트 코드 작성 (App.js) import logo from './logo.svg'; import './App.css'; import axios from 'axios' const sendRequest = () => { axios({ url: 'https://www.naver.co..

어서오세요..! 🤗 해결하시고 또 뵙는거겠죠....? (나쁜놈들,,,) react-router-dom 이 V5 -> V6 로 버전업되면서 변경된 사항입니다. # 변경사항 컴포넌트는 더 이상 존재하지 않음 로 바뀜 (근데 이건 제가 잘못 사용한건지 먹히질 않더라구요 😭) useNavigate() Hook 릴리즈..! (이건 잘 먹힙니다..!!) # 코드 구현 import React, {useState} from "react"; import { useNavigate } from "react-router"; export default function SignIn(props){ const navigate = useNavigate(); /// .... const click = (e)=>{ console.log("..

# Axios CSRF 보호기능 내장 JSON 데이터 자동변환 응답시간 초과 커스터마이징 가능 요청 중단 가능 Promise 기반 async/await 문법 가능 import axios from 'axios' // GET : Fetch a list of data axios.get(`url`) .then(function1) .catch(ErrorHandlingFunction) .finally(function2); // POST : Create new data axios.post(`url`, {json}) .then(function1) .catch(ErrorHandlingFunction) .finally(function2); // PUT : Update data axios.put(`url`, {json}) ..

로그인 기능을 구현하기 위해 인증작업 구현을 하다가 이리저리 치이다 정신차려보니 이 친구를 만나게 되었다. # 리덕스란 무엇일까? Redux 는 JS App 을 위한 전역변수 관리자라고 보면 된다. (전역변수 관리자를 Store라고 Redux는 정의하고있다.) Augular, JQuery 등 다양한 JS framework와 작동되게 설계되었다. action에 반응하여 상태(전역변수)를 변경한다. 프로젝트가 복잡해지면 관리가 힘들어지는 props 들을 Store에 담아, 모든 페이지(컴포넌트)에서 접근할 수 있다는 것 하나로도 너무 매력적인 것 같다. 여태 Provider를 직접만들어서 사용했는데, 그에 비해 무슨 장점이 있는 건지 공부해보면 알겠지... 😭 공부할게 하나 더 생겨서 너무 좋다 ㅎㅎㅎㅎㅎㅎ..

# react-error-boundary 컴포넌트간 fetch 에서 에러가 발생하면 에러페이지로 fallback 시켜준다. npm i react-error-boundary # 사용법 // 컴포넌트들을 ErrorBoundary 로 감싸준다.

ㅋㅋㅋㅋㅋㅋㅋㅋ 에러문구가 시키는대로 로 감싸주었는데도 해결 못하셔서 찾아오신분들 환영합니다. 'react-router-dom' 라이브러리가 버전 업데이트가 됬어요...! 의 매개변수 이름이 변경되었습니다..! # 해결방법 (2021. 11. 25 기준) 1. 최신버전에 맞게 작성한다. (공식 doc 이나, 설치된 라이브러리 코드를 뜯어본다.) //home1 은 작동안하고 //home2 는 작동한다.. // :D......... 2. 이전 버전을 설치하여 사용한다. # React-router-dom V6 React Router | Overview Declarative routing for React apps at any scale reactrouter.com

오랜만에 리액트를 쓰려고 하다가 404 에러를 직면했다. (404 에러는 요청한 페이지가 없다는 http response 이다.) 즉, 해당 레파지토리 주소를 찾을 수 없어서 생기는 현상인데 그새 주소 이전이 발생한 것 같다. # 해결방법 1. npm config set registry [변경된주소] // 변경된 주소를 정확히 안다면 해당커멘드로 해결가능하다. 2. npm cache clean--force 후, npm rebuild // 이 후, npx create-react-app 이 정상적으로 작동한다. # 추가 지식 1. npm install -g 로 cra 를 설치해놓으면 저런 현상을 마주할리 없다. // 해당시기 최신버전을 다운받아 라이브러리를 전역으로 이용 2. 대신 npm 은 버전 업데이트 ..

직역하면 [ 'react-router-dom'을 찾을 수 없습니다 ] 정도 인데, 라이브러리 파일을 찾을 수 없어 나타나는 현상이다. react-router-dom 은 리액트(create-react-app) 패키지에 포함되어 있지 않다. 리액트와는 다른영역을 다루는 라이브러리기에 추가 설치를 해주어야 한다. 설치만 하면 해당 현상은 해결된다. # 설치법 npm i -s react-router-dom # react-router-dom 변경사항 (2021. 11. 25 기준) 1. Route 컴포넌트를 이제는 Routes 컴포넌트로 필히 감싸주어야 한다. 2. Route 컴포넌트의 매개변수 compent 가 element 로 바뀌었다. (이건 선넘었지...) //home1 은 작동안하고 //home2 는 작..