졸업 프로젝트
1.🔧 로그인 직후 api 요청 시 토큰이 undefined인 에러 해결
로그인 후 새로고침을 하면 모든 api 요청이 정상적으로 처리되지만, 로그인 직후 새로고침을 안 한 상태로 api 요청을 보내면 토큰이 undefined인 상태로 요청이 보내져서 403 에러가 났다.개발자 도구를 켜서 보면 로그인 시 localStorage에 토큰이 잘
2.이미지 반응형 격자식 나열
화면의 가로길이에 따라 열의 개수를 적절히 조절하여 나열하는 방식에 대해 소개하겠다.Wrapper 안에서 books 배열을 순회하면서 BookCoverWrapper를 렌더링한다.여기서 가장 중요한 것은 flex-wrap: wrap이다.가로로 쭉 나열하는 것이 아니라,
3.[react-slick] 슬라이더(캐러셀) 구현
Slider 컴포넌트 안에 자식 컴포넌트를 렌더링하면 된다.이때 settings를 정의하여 커스텀할 수 있는데, settings에 들어갈 내용은 아래 공식문서를 참고하자.공식문서: https://react-slick.neostack.com/nextArrow와
4.[React] 드래그 앤 드롭으로 요소 옮기기
인스타그램에서 스토리를 작성할 때처럼 텍스트 박스를 원하는 위치에 옮기는 방법에 대해서 소개하겠다.먼저 react-use-gesture라는 패키지를 설치해준다. 이 패키지의 useDrag 훅을 사용할 것이므로 import 해준다. useDrag 훅은 함수를 리턴하는데,
5.상태관리 라이브러리 (Redux-toolkit, Redux-persist)
기존에 동화책을 생성할 때 react-redux를 사용해서 표지와 삽화들을 저장했었다. 하지만 Redux-toolkit을 사용하는 게 더 편리할 것 같아서 바꿔보았다. 우선 Redux의 개념부터 짚고 가자.어플리케이션의 상태(state)를 관리하기 위한 오픈소스 Jav
6.동화책 생성 및 저장 로직 수정 (Redux-toolkit, createAsyncThunk의 비동기 처리)
diaryForm 페이지에서 유저가 일기를 작성하면, 작성된 일기를 기반으로 딥러닝 서버에 동화 제목과 텍스트 생성을 요청한다. 제목과 텍스트가 생성되면 딥러닝 서버에 커버 생성을 요청하고, 각 텍스트의 문단마다 일러스트 생성을 요청한다. 마지막으로 백엔드 서버에 동화
7.[redux-toolkit] 페이지를 이탈하더라도 비동기 로직이 실행되게 하기
동화책이 완성되면 db에 저장 요청을 보내는 비동기 로직이다. 참고로 title, texts, coverUrl, images 등 동화책을 구성하는 모든 정보들은 redux-toolkit의 상태로 관리되고 있다. saved는 동화책이 저장되었는지의 여부를 판단한다.만약
8.[React] 마우스 드래그 앤 드랍으로 요소 옮기기 (feat. react-use-gesture)
업로드중.. 현재 우리 팀은 아이들이 쓴 일기를 그림 동화책으로 만들어주는 웹 서비스를 개발하고 있다. 먼저 react-use-gesture라는 패키지를 설치해준다. 이 패키지의 useDrag 훅을 사용할 것이므로 import 해준다. >useDrag 훅은