JavaScript 썸네일형 리스트형 IE11 개발서버에서 attachShadow 이슈 이슈 attachShadow가 웹컴포넌트와 관련된 키워드인데, IE에서 작동하지 않는다.(개발 서버만) 해결 방법 1) @webcomponents/shadydom 설치 2) src/polyfills.js import "@webcomponents/shadydom"; 3) next.config.js webpack(config) { const originalEntry = config.entry; config.entry = async () => { const entries = await originalEntry(); if ( entries["main.js"] && !entries["main.js"].includes("./src/polyfills.js") ) { entries["main.js"].unshift(".. webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기 https://db2dev.tistory.com/entry/React-Webpack%EC%9C%BC%EB%A1%9C-%EA%B5%AC%EC%B6%95%ED%95%9C-React-%ED%94%84%EB%A1%9C%EC%A0%9D%ED%8A%B8%EC%97%90%EC%84%9C-%ED%99%98%EA%B2%BD-%EB%B3%80%EC%88%98env-%EC%82%AC%EC%9A%A9%ED%95%98%EA%B8%B0 [React] Webpack으로 구축한 React 프로젝트에서 환경 변수(.env) 사용하기 TL;DR Webpack을 통해 직접 구성한 리액트 프로젝트 .env 파일에 환경 변수를 선언할 때 REACT_APP_ 으로 시작하지 않아도 됨 dotenv 패키지: DefinePlugin 을 통해 수동으.. Bearer와 jwt 토이프로젝트 작업 당시 로그인 api 관련해서 작업하는데, 서버 개발자한테 아래와 같은 요청을 들었다. 코드로 API 호출하실 때는 헤더에 Bearer 형식으로 jwt 토큰을 넣어주시면 됩니다. Bearer는 뭐고, jwt는 또 모얌.. 회사에서는 자체 로그인 모듈을 사용하기 때문에 쿠키값만 사용하다가 로그인을 직접 개발하려고 보니 멘붕 터져벌임..ㅋ 그래서 JWT란? https://mangkyu.tistory.com/56 [Server] JWT(Json Web Token)란? 현대 웹서비스에서는 토큰을 사용하여 사용자들의 인증 작업을 처리하는 것이 가장 좋은 방법이다. 이번에는 토큰 기반의 인증 시스템에서 주로 사용하는 JWT(Json Web Token)에 대해 알아보도록 하 mangkyu.tistor.. Next.js url 네이밍 ~~.help 같은 filepath를 갖으려면 아래와 같이 폴더구조를 잡으면 된다. ㄴ src ㄴ pages ㄴ main.help ㄴ index.tsx 구글 / 카카오 로그인, 회원가입 공통 Flow 로그인 1) 구글 로그인 클릭 2) onSuccess되면 response로 받은 id를 우리서버로 보냄 - 성공: response값(회원정보)을 store에 저장, returnUrl로 redirect - 회원가입이 안된 경우: 가입된 회원이 아닙니다.(alert), 회원가입 페이지로 리다이렉트 - 실패: 로그인에 실패했습니다.(alert) 회원가입 1) 구글 회원가입 클릭 2) onSuccess되면 response로 받은 id를 우리서버로 보냄 - 성공: response값(회원정보)을 store에 저장, returnUrl로 redirect - 기존에 있는 아이디일경우: 이미 가입되어있는 회원입니다. 로그인해주세요.(alert) - 실패: 회원 가입에 실패했습니다.(alert) 세션 관리 1.. 이번주 첫째 날, 마지막 날 이번달 첫째 날, 마지막 날 구하기 // 이번 주 첫째날 const getFirtDayOfWeek = date => { const currentDate = new Date(date); const firstDate = new Date(currentDate.setDate(currentDate.getDate() - currentDate.getDay() + 1)).setHours(0, 0, 0, 0) return new Date(firstDate); } // 이번 주 마지막째날 const getLastDayOfWeek = date => { const currentDate = new Date(date); const lastDate = new Date(currentDate.setDate(currentDate.getDate() - currentDate.. SWR을 사용하는 이유 https://min9nim.vercel.app/2020-10-03-swr-intro1/ Redux 를 넘어 SWR 로(1) 이 글에서는 오랫동안 Redux 를 이용한 상태관리를 해오다가 최근 SWR을 만나고, 프로젝트에서 Redux 의존성 모듈을 완전히 제거하기 까지 이른 과정과 경험을 공유하고자 합니다. 이 글이 도움이 min9nim.vercel.app https://min9nim.vercel.app/2020-10-05-swr-intro2/ Redux 를 넘어 SWR 로(2) 앞서 첫번째 글에서는 Redux 를 사용할 때 일반적으로 경험할 수 있는 몇가지 문제들을 언급하였습니다. 이번 글에서는 SWR 은 무엇이고 SWR 이 어떻게 Redux 를 대체할 수 있는 지에 대해 설명해 보 min9nim.ve.. CRA에서 api server proxy 1) install http-proxy-middleware $ npm install http-proxy-middleware --save $ # or $ yarn add http-proxy-middleware 2) src/setupProxy.js 생성 후 아래와 같이 작성 const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = function(app) { app.use( '/api', createProxyMiddleware({ target: 'http://localhost:5000', changeOrigin: true, }) ); }; 3) dev server 껏켯 이전 1 2 3 4 5 ··· 12 다음
