토피넛라떼조아

지금까지의 프로젝트는 로그인을 해야만 서비스를 이용할 수 있어 항상 로그인 성공 시 메인페이지로 이동시켰습니다. 하지만 이번 프로젝트에서는 일부 기능만 회원 전용이기 때문에 비회원도 자유롭게 사이트를 구경할 수 있습니다. 만약 비회원이 회원만 이용가능한 서비스를 원한다면 로그인을 할 수 있도록 로그인 페이지로 이동시키고, 그 상태로 로그인 이후에 본래 서비스를 이용할 수 있게 해주어야 하므로 메인페이지가 아닌 이전 페이지로 이동시켜주어야 합니다. 기존 코드는 이렇게 구현되어 있었습니다. // 로그인이 필요한 특정 행동을 했을 경우 if (!sessionStorage.getItem("token")) { MySwal.fire({ title: "로그인 후 이용해주세요.", icon: "warning", con..

이번 프로젝트에서 이미지 파일을 업로드하여 그것과 비슷한 그림체의 웹툰을 추천해주는 부가기능이 있었습니다. 이 페이지의 기능 구현을 담당하여 필요한 기술들을 학습하면서 배운 내용을 기록해두려합니다. 다음과 같은 화면에서 그림을 업로드 할 수 있게 버튼을 만들어주었는데, 파일을 업로드하는 버튼이 너무 밋밋하여 이를 커스텀하고자 input과 버튼을 연결해서 css를 입혔습니다. // upload.jsx ... // 버튼의 for와 input의 id를 일치시켜 연결시켜준다. {fileImage ? "다시 업로드 하기" : "그림 업로드 하기"} ... const InputBtn = styled.label` box-shadow: 2px 3px 2px rgba(0, 0, 0, 0.5); border: 0.3vw ..

Redux 1. 시작 설치 npm install redux react-redux store 생성 import {createStore} from 'redux' function reducer(state, action) { // ... return newState } const store = createStore(reducer); export default store 2. Provider import {Provider} from 'react-redux' import store from './store' function App() { return ( Root ); } export default App; 3. Hooks useSelector(Left3.jsx) import { useSelector } from "..