Chunho’s DevLife

로그인 기능을 구현하기 위해 다음과 같은 로직을 적용했다. 1. Id, Password를 입력받고 로그인 시 state에 있는 Id와 Password를 첨부하여 API에 POST 요청을 보낸다. 2. accessToken, refreshToken을 받아온다. 3. status가 200이면 Redux에 accessToken을 dispatch하고 localStorage에 refreshToken을 넣은 후 메인 페이지로 이동한다. 4. 만료 시간 1분 전에 localStorage에 저장되어 있는 refreshToken을 사용하여 accessToken을 refresh해준 뒤 dispatch한다. 5. 메인 페이지 컴포넌트가 랜더링 됐을 때 useEffect 또는Componentdidmount 함수를 사용하여 R..

버튼을 클릭했을 시 사용자의 클립보드에 원하는 text를 복사하기 위해 react-copy-to-clipboard 라이브러리를 사용하였다. 타입스크립트 기준으로 npm install --save @types/react-copy-to-clipboard 명령어를 통해 라이브러리를 설치할 수 있다. 먼저 두 개의 state를 만들어주었다. const [value, setValue] = useState('') const [copied, setCopied] = useState(false) 첫 번째는 clipboard에 copy할 텍스트이며, 두 번째는 복사가 됐을 때 변경해줄 boolean 값이다. import {CopyToClipboard} from 'react-copy-to-clipboard' 라이브러리를 사..

페이지를 이동할 때 props를 가지고 이동하고 싶을 때가 있다. 이 때 react-router-dom v6의 Nevigate를 사용하면 된다. const [clicked, setClicked] = useState(false) const state = {user: 'lee', error: null} const handleClicked = () => { setClicked(true) } return ( { handleClicked() }} > {' '} 블로그 {clicked && } ) } export default BlogSection 위와 같이 state 안에 props를 담아서 라우팅을 할 수 있다. const {state} = useLocation() 이후 해당 페이지에서 useLocation을 ..

main 페이지에서 페이지 하단에 있는 게시글을 클릭하여 게시글 상세 페이지로 이동했을 때 게시글 상세 페이지의 하단 부분이 먼저 보여지는 현상이 발생했다. 이를 해결하기 위해서는 window.scrollTo 함수를 사용하면 된다. useEffect(() => { window.scrollTo({top: 0, left: 0, behavior: 'auto'}) }, []) 위와 같이 게시글 상세 페이지의 컴포넌트가 랜더링 됐을 때 window.scrollTo 함수를 사용하여 페이지의 맨 윗부분에 포커싱이 맞춰지도록 하여 해결할 수 있었다.

GridBox 사용 시 justify-content가 먹히지 않는 현상이 발생하였다. grid-template-columns: 20% 20% 20% 20%; 를 적용하고 정렬을 위해 justify-content에 space-between을 주었지만 아래와 같이 적용되지 않았다. grid박스 안에 있는 item에 고정된 width 값을 준 것이 문제였다. 정렬을 하기 위해서는 item의 비율을 width로 직접 적용하면 안되고, grid의 grid-template-columns 또는 grid-template-rows 에서 %를 사용하여 지정해주어야 한다. 위와 같이 수정을 해주면 정렬이 잘 되는것을 확인할 수 있었다.

const Container = styled.div` @media screen and (min-width: 768px) { width: 100%; height: 1801.23px; overflow-y: auto; overflow-x: hidden; } @media screen and (max-width: 767px) { } ` 위와 같이 css를 작성해주면 해당 영역보다 내용이 길어질 경우 계속해서 스크롤을 줄 수 있다.

The Hook import { useState } from 'react' // See: https://usehooks-ts.com/react-hook/use-event-listener import { useEventListener } from '../useEventListener' // See: https://usehooks-ts.com/react-hook/use-isomorphic-layout-effect import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect' interface WindowSize { width: number height: number } function useWindowSize(): WindowSize { c..

1. put으로 파일을 저장할 수 있는 경로를 가져오기 위해 지정된 API경로로 type, name, mimeType 등을 입력하여 path와 s3 url을 받아온다. 2. 받은 s3 url로 put 요청을 보낸다. (body에 파일을 삽입한다.) 3. 업로드한 파일의 url을 받을 수 있는 API 경로로 type, 아까 받은 path를 입력하여 post 요청을 보낸다. 4. url을 받아온다. 설계된 API에 따라 세부 내용이 달라질 수 있다.

{aboutContents.map((content, index) => ( ))} js를 사용할때와 마찬가지로 위와 같이 map을 사용해서 props로 객체를 전달하는 도중 IntrinsicAttributes error 가 발생하였다. props를 전달받는 하위 컴포넌트는 function AboutPart(item: AboutContentType) { const {id, title, content} = item​ 위와 같은 방식으로 item의 타입을 지정해줬다. 객체 자체를 props로 전달받을 때는 function AboutPart({item}: {item: AboutContentType}) { const {id, title, content} = item 위와 같이 타입을 지정하여 해결할 수 있었다.

selectBox를 사용하기 위해 기존에 제공되는 select 태그를 사용해도 되지만, selectBox 클릭 시 나타나는 options를 커스텀하기 힘들다는 단점이 있다. ul과 li를 사용하여 selectBox를 직접 구현 할 시 options를 li로 나타내기 때문에 css를 사용하여 자유롭게 커스텀 할 수 있다. css를 제외하고, selectBox는 const CustomSelect = ({ handleChangeOption, isShowOptions }) => { return ( { handleChangeOption() }} className="sbc_label" > 카테고리를 선택해주세요. option1 option2 option3 ) } 위와 같이 컴포넌트로 만들 수 있다. options가..