JWT 로그인을 구현하면서 발생한 문제 정리1
2022. 6. 25. 10:05
TIL/트러블슈팅
요약 JWT로그인을 구현해보면서 클라이언트에 어떻게 저장시킬지 고민했고 redux를 사용하고자 했습니다. 하지만 axios 설정과 redux hook을 사용하면서 문제가 발생했고 해결했던 과정을 정리하였습니다 https://github.com/axios/axios https://www.npmjs.com/package/jsonwebtoken JWT인증 방식을 구현하던 중 클라이언트에 토큰 값을 어떻게 관리할지 고민을 하게 되었습니다. 사용자 쿠키에 저장하는 등 여러가지 방법이 있었는데 그 중에서 Redux를 활용하여 사용자 토큰을 관리하는 동시에 현재 로그인 상태를 확인하는 기능을 구현하고자 했습니다. 그렇게 구현을 하던 중 axios(서버로 요청을 보내고 받을 수 있는 모듈)의 코드가 중복되는 부분을 피..
로그인 구현 방식
2022. 6. 25. 09:23
TIL/개념정리
도입 웹사이트에서는 요청에 따라 사용자가 로그인을 하였는지에 관한 인증상태를 관리해야 할 필요가 있다. 사용자가 어떠한 동작이나 어떠한 요청을 보낼 때 마다 계속 로그인을 통해 사용자 인증을 요구한다면 그 웹사이트는 그 사이트에 사용자 경험은 떨어지고 결국 아무도 사용하지 않게 될 것이다. 이처럼 사용자가 로그인 하게 되었을 때 사용자의 로그인 상태를 서버에서 처리할 수 있도록 하는 인증 방식이 있는데 세션(Session)과 JWT , Oauth 방식이 있습니다. 종류 세션 세션이란 쉽게 말하면 서버의 컴퓨터(서버에 세션 저장소)에 클라이언트의 정보를 기억하고 유지하는 것 입니다. 사용자(정확히는 브라우저)가 로그인을 하였다면 서버의 컴퓨터(세션 저장소)에서 사용자 정보(주로 브라우저에 쿠키에 저장하게 ..
useRef - current null 문제 해결
2022. 6. 24. 11:19
TIL/트러블슈팅
요약 초기 렌더링시 아직 데이터가 없기때문에 컴포넌트가 만들어지지 않았다. 그렇다고 이후 데이터가 들어왔다고 해서 ref 특성상 업데이트 되지 않았기 때문에 발생한 문제였고 아래와 같이 수정했다 업데이트없이 컴포넌트가 마운트됐을 때 값만 사용한다. useRef === useState(value)[0] {postListData && ( ...카드 데이터 )} {postListData && (...카드 데이터)} 에러가 발생한 코드 블로그 메인을 개발하면서 드래그 앤 스크롤을 구현하기 위해 useRef를 사용해서 div elemnet를 가져왔고 react-use라이브러리의 useScroll을 통해 ref의 스크롤 위치 데이터 x를 가져오고자 했습니다. 이때 다른 컴포넌트에게 x값을 전달하여 현재 스크롤 위치..
Typescript
2022. 6. 23. 17:40
TIL/개념정리
Typescript란? 타입스크립트는 일반적인 JS문법에서 변수의 타입을 미리 선언하고 사용하는 것입니다 JS이외 C/C++, Java 등 Strong Type을 경험해보셨다면 이해하기 쉽다고 생각합니다. 하지만 어느정도의 차이는 있으므로 그런 것들을 정리할 예정입니다 우선 Typescript는 기본적으로 코드가 실행하기 전 검사하고 에러를 띄워주게 됩니다. 따라서 타입스크립트에게 초기에 어떤 것(어떤 타입인지)인지 코드를 작성해줘야 합니다. js에서 any로 표시되는 모든 데이터들에 대해서 선언시에 한번만 지정하면 되지만 원시타입(number, string, boolean) 같은 경우는 타입 추론을 통해 자체적으로 타입을 받을 수 있으니 굳이 지정안해줘도 됩니다. 이외에도 복잡한 타입의 경우 굳이 지정..
CSS 레이아웃
2022. 6. 21. 20:59
TIL/개념정리
레이아웃이란 원하는 위치에 지정한 사이즈로 배치하는 것을 말하는데 이러한 배치를 하기 위해서는 CSS에 여러 속성 중 잘 사용되는 순서로 display, position, flex, grid로 구분 할 수 있습니다 https://developer.mozilla.org/ko/docs/Learn/CSS/CSS_layout/Introduction 1. display : block과 inline, inline-block block : 혼자 한줄을 차지하는 속성으로 다른 엘리먼트들이 들어와도 밀어내며, 줄바꿈을 발생시키게 됩니다. 그리고 상하좌우 margin과 padding 속성이 적용됩니다. inline : CSS로 지정한 width와 height는 지정되어 있어도 무시하고 태그 안에있는 컨텐츠의 크기만큼만 C..
브라우저 저장방식
2022. 6. 20. 19:03
TIL/개념정리
개요 자바스크립트로 웹 개발을 하다보면 아무리 간단한 애플리케이션이라도 데이터를 어딘가에 저장해야 할 일이 생깁니다. 보통 이럴 때 데이터베이스(DB) 서버나 클라우드(Cloud) 플랫폼에 데이터를 저장하거나 경우가 많을 것입니다. 하지만 저장해야할 데이터가 별로 중요하지 않거나, 유실되도 무방할 데이터라면 서버 단에 데이터를 저장하는 것이 낭비일 수가 있습니다. 따라서 중요하지 않거나 클라이언트에서 사용될 수 있는 작은 데이터를 효율적으로 사용하기 위해 서버가 아닌 프론트 웹 브라우저에 저장하는 기술을 브라우저 저장방식 종류 쿠키 웹 스토리지 로컬 스토리지 세션 스토리지 IndexedDB 브라우저 저장방식은 개발자도구에서 확인 가능 쿠키 쿠키는 웹사이트 접속시 해당 사이트에 대한 만료 기한이 있는 데이..
Node.js , express
2022. 6. 19. 15:00
TIL/개념정리
Nodejs는 Javascript를 브라우저 외의 다른 환경에서도 사용할 수 있게 해주는 런타임 라이브러리입니다. 이 Node.js에서는 http서버가 내장되어 있어 서버로 많이 사용되고 있습니다. 이러한 것들 뿐만 아니라 웹팩, 바벨(이전버전과 현재 버전에 호환되지 않는 부분들을 해결)과 같은 도구들과 일렉트론 같이 자바스크립트 데스크탑 프로그램을 만드는 프레임워크가 모두 Node.js를 기반으로 돌아간다고 합니다. 이러한 Node.js의 방식을 통해 거의 Javascript만을 사용하는 프론트 개발자들이 JSP, PHP , Python , spring들과 웹 어플리케이션 서버 같은 공부해야할 것들이 많았지만 Node.js에서는 새로운 서버 언어를 배우지 않고도 자바스크립트만으로 서버를 개발할 수 있는..
CI/CD에 관하여
2022. 6. 18. 09:42
TIL/개념정리
하나의 서비스를 개발하고 계속해서 운영및 관리해나가고자 할 때, 업데이트 사항을 매번 개발자들이 수동으로 빌드시켜 테스트한 뒤 배포 설정을 하게 된다면 반복적인 작업이 될 뿐만 아니라 상당히 많은 시간을 사용하게 됩니다. 이런 문제점을 해결하기 위해 나온 개념이 CI/CD입니다. 개발서비스 운영관리 문제점들을 해결하여 많은 시간을 투자하지 않더라도 기존 수동 방식보다 더 많은 업데이트, 수정 사항들을 적용시킬 수 있게 되었다고 할 수 있습니다 CI CI는 개발자를 위한 자동화 프로세스인 지속적인 통합(Continuous Integration) 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트되어 공유 리포지토리에 통합되므로 여러 명의 개발자가 동시에 애플리케이션 개발과 관련된 코드 작업을 할 경우 서로..
Can't perform a React state update on an unmounted component.
2022. 6. 17. 18:54
TIL/트러블슈팅
발생 이유 : router 이동 한 후 이전 컴포넌트에서 state 값을 바꾸려고 할 때 발생하게 됩니다. 기본적으로 useState는 비동기적으로 동작하기 때문입니다. const moved = () => { if(window.scrollY > 50) setShow(true); else setShow(false); } useEffect(()=> { window.addEventListener("scroll", moved) }, []) 이 기능은 Navbar가 스크롤 이동을 감지해서 Navbar에 다른 css 값을 적용하는 동작을 하고 있는데 이 함수가 동작하는 도중 Rotuer로 이동해서 발생하게 됐습니다. 해결 방법이 두 가지정도가 있다는 것을 확인하였고 아래와 같습니다 라우터 이동하기 전에 오류를 발생..
템플릿에서 module 버전 충돌
2022. 6. 16. 13:58
TIL/트러블슈팅
0) 템플릿을 사용한 이유 포트폴리오로 활용하기 위한 포트폴리오 웹페이지를 개발하면서 가능한 많은 것을 써보고 싶었고 그 중에서 실제 웹페이지를 구성할 때 필요한 것들을 공부하고 있었습니다. 그렇게 프론트 개발에 대해 공부하면서 알아보던 중 관리자 페이지 , admin 페이지가 있다는 것을 알았고 이 admin 페이지에 관해 구글링 해본 결과 상당히 많은 관리자용 템플릿들이 있다는 것을 알게 되었습니다. ( admin 페이지는 주로 쇼핑몰에 이용되는 것들이 많았고 이용자 조회, 상품관리 뿐만 아니라 다양한 레이아웃 형식까지 제공해주는 것을 확인하였습니다. ) 그 중에서 star가 많고 다양한 기능을 제공하는 템플릿을 골라 이용해보기로 결정하였습니다 1) 템플릿 운영 그렇게 관리자용 페이지를 추가하고 난 ..