기록하고 싶은 것들

이번 프로젝트에서는 Github, Google 을 이용한 로그인을 구현하였고, 어떤 방식으로 진행되었는지 적어보려고 한다. OAuth 2.0 Login 기존에 필자가 알고있는 OAuth 로그인 방식은 아래와 같다 Authorization code를 클라이언트 단으로 리다이렉션 후, 이를 서버에 요청한 뒤 응답으로 Access Tokend을 받는 방식이다. 위의 방식과는 다르게 백엔드 분께서, Spring Security를 사용해보고 싶다하셨고, 이를 사용할 경우 Authorization code를 서버 단으로 으로 리다이렉션 후 Access Token까지 발급한 뒤 이 Access Token을 클라이언트로 리다이렉션 하는 방식으로 진행된다고 말씀하셨다. 새롭게 알게된 방식으로 진행하니, 프론트 단에서는 ..

React-quill 내부의 이미지 사이즈를 조절하려고 quill-image-resize-module-ts을 install 후에 quill에 적용해주었다. quill-image-resize-module 을 설치했을 때는 타입 지정이 되어있지않아서 import에 오류가 발생하였다. 따라서 2시간정도를 구글링하면서 quill-image-resize-module-ts 을 설치하여 import 문제를 해결 할 수 있었다. import { ImageResize } from 'quill-image-resize-module-ts'; Quill.register('modules/ImageResize', ImageResize); .... const modules = useMemo(() => { return { // syn..

redux에서 react query로의 전환 이유 redux에서 비동기처리를 해주기 위해서는 redux-saga 같은 미들웨어를 사용하여 상태에 저장시켜야 한다. saga에서 api의 응답을 받고 redux에 저장하는 과정 속에서 api 상태에 따라 렌더링을 해야되는 상황이 발생한다. 이 때 isLoading, isSucess, isError 같이 상태를 별도로 지정해주고 이에 따라 렌더링을 해줄 수 있다. (이처럼 Redux에서 비동기 처리를 할때 api 응답상태를 별도로 만들어 주어야한다.) 반면 react-query에서는 이를 기본 옵션으로 제공하고 있다. 이외에도 Redux를 사용시 다른 saga에 dependency를 두는 saga가 무수히 늘어나게 된다면, 중간 api 에 문제가 생겨도 에러 ..

현재 구현한 react quill 내부에 사진을 넣은 후, 에디터 속 콘텐츠를 콘솔에 찍어보았다. 사진 하나를 넣었는데도 불구하고 너무 길어서 콘솔에 찍히지도 않고, 사진이 들어있을 경우에는 서버로 전송도 되지 않았다. 현재 파일을 추가하면, base64형식을 이미지의 src로 받기 때문에 위의 사진과 같이 방대한 양의 콘솔이 찍힌 것을 알고 있었다. 따라서 base64가 아닌 url로 바꾸어 보는 과정을 가지기로 하였다. 문제점 현재 작성된 API는 포트폴리오를 전송하거나, 수정할 때 에디터에 들어갈 이미지들을 파일형태로 전송하는 방식이었다. 하지만, 에디터를 사용할 경우에는 포트폴리오 전송, 수정 전 이미지의 src에 넣어줄 url을 받아와야 하였다. 포트폴리오 전송, 수정 전에 이미지의 url을 받..

로그인 기능을 구현하면서, isLogin, accessToken, refreshToken 을 전역상태로 관리해주기로 하였다. 로컬 스토리지를 이용하여서 관리를 하려고 하였지만, redux-persist가 로컬 스토리지에서 상태를 저장해주면서, 보안 측면에서 더 낫다고 하여서 redux-persist로 상태를 관리해주었다. 타입스크립트, redux-toolkit, redux-persist 등 사용해보지 못한 기술들을 접해보아서 정신이 없긴했다. store/slice/loginSlice.ts Login이라는 타입을 지정해 준뒤, 내부의 값까지 타입을 지정해주었다. 그 후 초기 상태를 지정해준 뒤, loginSlice를 생성해주었다. 생성된 loginSlice 안의 login, logout 이라는 reudce..

등장배경 기존 방식은 설정, 미들웨어 설치, 반복되는 코드, 불변성 유지의 어려움 기존의 리덕스는 하나의 거대한 store로 관리하는 데에 반해서 redux toolkit은 slice라 부르는 작은 store로 state 관리 가능 reduxtoolkit 은 createSlice를 통해서 작은 저장소를 만들고, reducers를 통해서 reducer를 정의 해준다. 위의 예시는 reduxtoolkit 사용방식과 redux 사용방식을 나타낸 것이다. 이 작은 Slice들을 모아서 사용할 경우에는 configureStore를 생성한다. 만약 counter의 state 사용할 경우 store에 저장된 counter의 value를 가져오면 된다. dispatch의 경우 자동으로 생성된 action creater..

포트폴리오 작성페이지에, 웹 에디터의 필요성을 느껴 react quill 라이브러리를 사용하였다. 툴바에 있는 여러 기능을 테스트 해보았는데, 몇몇 기능이 적용되지 않았다. 예시로 글자를 굵게하는 기능이 적용되지 않아서, 관련 요소를 확인해보았다. 분명 요소에는 넣어져있었는데, 스타일에 사용자 에이전트 스타일시트 라는 것이 내가 적용한 속성을 무시하였다. 왜 이런일이 발생하는지 궁금해서, 관련 내용을 찾아보았다. User agent stylesheet은, 사용자가 명시해두어야 할 속성을 override 해주지 않거나, 등으로 html 파일에서 html의 최신 버전을 알려주지 않아 브라우저가 임의로 설정해둔 것으로, 한마디로 각 브라우저마다 정해놓은 CSS의 기본 규칙이다. 따라서 의도치 않거나 설정해두지..