본문 바로가기

전체 글

(212)
무한 스크롤 구현기(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..