본문 바로가기

programming

 (124)
무한 스크롤 구현기(React, Scrollevent, Throttle, Intersection Observer API) 목표 : React 에서 무한 스크롤 구현하기 (Infinity Scroll in React) 여정 : scroll Event Listener -> Throttle 로 최적화 -> Intersection Observer API 사용 1. 단순 구현 스크롤 이벤트를 참조하여 다음 데이터 API 호출 코드 구현 가정 fetchData() 는 API 를 요청하는 함수 예제에서는 console.log('fetch API 요청') 찍히는 걸로 API 요청을 대신함 useEffect(() => { const handleScroll = () => { const { scrollTop, offsetHeight } = document.documentElement; if (window.innerHeight + scrollT..
JWT 로 로그인 인증 구현하기 로그인 JWT(accessToken, refreshToken) 플로우 websequencediagrams 스크립트 title JWT login process (evaluation-iic) frontend->backend: login (/auth/access_token) backend -> backend : 유저 확인 (access_token, refresh_token 발급) backend->frontend: login 응답 (access_token, refresh_token) frontend -> frontend : localStorage에 저장(access_token, refresh_token) frontend-> backend: 데이터 요청 (ex) GET /evaluation/group) with ..
Sass 컴파일러 vscode 에서 사용하기 1. npm 설치 npm install sass -g 2. 버전 정보 확인 설치 완료 됐으면 버전확인하면서 잘 설치되었는지 확인합니다. npm show sass version 3. Vs code에서 확장 프로그램 설치 SASS 컴파일을 자동으로 해주는 플러그인 live Sass compiler - 만든 이 : Glenn Marks 4. sass complier 경로 설정 1. vscode 좌측 톱니바퀴 - 설정 클릭 2. 설정 json 파일 수정을 위해 우측 상단 설정 열기 클릭 3. 아래 구문 추가 { "liveSassCompile.settings.formats": [ // This is Default. { "format": "expanded", "extensionName": ".css", "saveP..
개발환경에서 CORS 에러 관련 프록시 설정 프론트 : localhost:3000 띄워서 로컬에서 개발 API서버(백) : http://~.com dev서버를 올려서 해당 dev 서버에 요청 브라우저에서 보내는 요청 → CORS 발생 브라우저는 localhost:3000을 달고 있는데, 다른 주소(API서버)로 부터 온 응답값을 허용하지 않음 (동일출처가 아니기 때문) 해결책 : 브라우저에서 나가는 요청을 API 서버 주소로 둔갑시킨다 proxy 설정 http-proxy-middleware 패키지 설치 src/setupProxy.js api/ 로 시작하는 요청 url 인 경우 설정한 target 주소에서 요청하는 것으로 둔갑해줌 /api 부분은 빠져야 하므로 pathRewrite 도 시켜준다 const { createProxyMiddleware }..
Recoil 새로고침 시 user 데이터 유지하기 로그인시 받는 유저 데이터 recoil state 는 새로고침시 날아감 새로고침시 마다 유저 정보를 API 요청 → XXXXXX recoil state 를 persist localStorage를 사용하는 방법이 있음 새로고침시 localStorage에 저장해둔 값을 state에 다시 입력 localStorageEffect.js function localStorageEffect(key) { return ({ setSelf, onSet }) => { const savedValue = localStorage.getItem(key); if (savedValue != null) { setSelf(JSON.parse(savedValue)); } else { // 로컬 스토리지에 저장된 값이 없으면 로그아웃 처리 l..
AWS amplify 로 React 배포하기 (+ blank 빈 페이지 보이는 에러 잡기) npx create-react-app create-react-app으로 설치한 리액트 앱 레포지토리는 빌드 설정을 webpack 을 따로 설정해 주지 않아도 된다. AWS amplify는 풀스택 애플리케이션 구축, 배송 및 호스팅 지원하는 솔루션이다 그동안 클라우드 컴퓨터 생성을 위해 리눅스 서버를 하나 생성하고, 서버를 관리하는 방식으로 배포를 했다면, 그냥 github page 나 vercel 등 과 같이 레포지토리만 지정하고, 빌드 스크립트만 등록하면 알아서 배포를 다해준다 작업 방식은 공식문서나 제야에 널려있으니 참고 https://aws.amazon.com/ko/amplify/ 풀 스택 개발 - 웹 및 모바일 앱 - AWS Amplify 실시간 및 오프라인 기능이 포함된 iOS, Android,..
구글 로그인 라이브러리 변경 - 4. 라이브러리를 사용하지 않고 google OAuth 로 direct 요청 방식 구현 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 👉 링크 authorization 에서 flow 선택 (gsi/client 라이브러리 사용) 라이브러리를 사용하지 않고 google oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Direct Using Google OAuth 2.0 다시 한 번 목적을 생각해보자 나는 access_token 과 refresh_token을 사용하여 “로그인”을 이용할 것이다 refresh_token을 따로 관리해서 자동로그인 시켜주고 로그인이 거의 영원히 풀리지 않도록 하기 위해서 그리고 지금 라이브..
구글 로그인 라이브러리 변경 - 2. 구글 로그인 라이브러리에서 변경되는 내용 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 authorization 에서 flow 선택 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 변경되는 내용 library의 deprecate 2023.01.04 Google Sign-in Javascript 라이브러리가 (gapi.auth2 모듈) deprecated 되었다. 2023년 3월 31일부터 다운로드가 안된다. Google Identity Services for Web을 사용해라. 출처 : Discontinuing authorizati..
구글 로그인 라이브러리 변경 - 3. authorization flow (gsi/client 라이브러리 사용) 정리할 내용 Google Identity 간단 개념 (+ oauth) 👉 링크 구글 라이브러리에서 변경되는 내용 👉 링크 authorization 에서 flow 선택 (gsi/client 라이브러리 사용) 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Google Identity Options(선택지) 이번 포스팅에서는 Sigin + API (목적은 access_token으로 구글 API 사용하기) -> 새로운 라이브러리 gsi/client 를 사용하는 구현방법에 대해서 정리해보려 한다. authorization 의 flow 지금 파트가 어디(authen..
구글 로그인 라이브러리 변경 - 1. Google Identity OAuth 개념 구글로 로그인 시키는 방법은 잘 정리된 블로그들 많으니 참고 (필요 선행작업 : 구글 클라우드 플랫폼에서 클라이언트 ID 발급받기) 잘 쓰고 있던 구글 로그인 js 라이브러리가 deprecated 된다고 한다. 바꿔줘야한다. 바꿔주는 김에 OAuth 개념 정리 정리할 내용 Google Identity 간단 개념 (+ oauth) 구글 라이브러리에서 변경되는 내용 authorization 에서 flow 선택 라이브러리를 사용하지 않고 googl oauth api로 direct 요청하기 토이플젝을 통해서 code → token 얻어내는 과정 및 유의사항 기존 로그인 플로우 & 변경되는 로그인 플로우 설명 Google Identity OAuth 2.0 개념 인증을 위한 개방형 표준 프로토콜(약속) 여러 서비스..

티스토리툴바