Chunho’s DevLife

NextJS에서 SSR을 하는 중, 서버사이드에서 데이터를 받아올 때 url에 있는 id값을 사용해 서버에 요청을 해야했다. 이 때 getServerSideProps가 제공하는 context 파라미터를 사용하여 query 정보를 가져올 수 있었다. context 파라미터에는 query 데이터를 제외하고도 여러가지 정보가 포함되어 있다. url에 있는 query를 가져오기 위해서는 context.query를 사용하면 된다. export async function getServerSideProps(context: GetServerSidePropsContext) { const cookie = getServerSidePropsUserCookie(context) const props: IProps = { data..

최근 NextJS로 SSR을 적용한 회사 프로젝트를 진행하며, Session 인증 방식을 사용하여 로그인을 할 때, 클라이언트에 쿠키 정보가 저장되지 않아 getServerSideProps 함수를 사용하여 SSR를 할때 문제가 생기는 Issue가 있었다. [문제 발생] API 호출시 사용자 로그인 여부 확인 불가 (클라이언트에 쿠기값이 없음) getServerSideProps 사용자 정보가 필요한 API 호출시 사용자 정보 없음 -> 오류 -> 특정 정보 안내려옴 / 클라이언트쪽에서만 호출 가능 [문제 원인 파악] 문제 1. 클라이언트에서 api 호출시 브라우저에 저장된 쿠키 정보를 자동으로 가져와서 넣어준다. (withCredentials) -> getServerSideProps는 서버측에서 실행되므로..

useQeury & Typescript 사용 시request가 반환하는 Promise의 타입을 정확히 명시해 주어도 useQuery Hook이 반환하는 데이터 타입에 undefined가 포함되어있는 이슈가 있다면 isSuccess를 활용하여 해결할 수 있습니다. React-Query의 useQuery Hook을 Typescript와 함께 사용할 때 useQuery Hook이 반환하는 데이터 타입에 기존에 정의한 타입과 함께 undefined가 포함되어있는 이슈가 있었다. 받아온 데이터를 하위 컴포넌트의 props로 전달해주는 과정에서 전달하는 데이터의 타입이 undefined 일 수 있고, 하위 컴포넌트에서 선언한 받아오는 props의 타입과 일치하지 않아 에러가 발생했다. 데이터는 비동기적으로 내려오고..

이미지를 반응형의 1:1 비율로 맞추기 위해서는 position: 'relative', width: '100%', paddingBottom: '100%', overflow: 'hidden'가 적용된 div 태그로 이미지를 감싸준다. 이후 img 태그에 position: absolute, width:100%, height:100%를 적용해주면 이미지를 반응형의 1:1비율로 맞춰줄 수 있다. img { cursor: pointer; position: absolute; width: 100%; height: 100%; }

모달창이 닫힐 때 에니메이션을 주기 위해 우선 모달창을 제어하는 state를 제외하고 에니메이션을 제어 할 state를 하나 더 만들어주었다. const [animationOn, setAnimationOn] = useState(false) 이후 닫기 버튼 클릭 시 animationOn을 true로 바꿔주고, setTimeout을 사용하여 0.5초 후 animationOn과 modalOpen을 false로 바꿔주면 된다. setAnimationOn(true) setTimeout(() => { setAnimationOn(false) setModalOpen(false) }, 500) animationOn이 true로 설정되어 있을 때, 아래와 같이 에니메이션 css를 적용해주어 효과를 입힐 수 있었다.ㅁ $..

const [modalOpen, setModalOpen] = useState(false) const el = useRef() useEffect(() => { window.addEventListener('click', handleCloseModal) return () => { window.removeEventListener('click', handleCloseModal) } }, [modalOpen]) const handleCloseModal = (e: MouseEvent) => { if (modalOpen && e.target !== el.current) { setModalOpen(false) } } //모달 모달 영역의 엘리먼트를 지정해주기 위해서는 useRef를 사용한다. useRef를 사용해 모달 ..

React-router-dom v6 에서는 import React from 'react' import Index from '../pages/Works' import SearchPortfolio from '../pages/Works/components/SearchPortfolio' const Works = { name: 'works', path: '/works', element: , children: [{path: ':id', element: }] } export default Works 위와 같이 useRoutes를 사용하여 params를 지정해줄 때 {params.id ? ( ) : query.type === 'weplanet' ? ( ) : query.type === 'client' ? ( ) : (..

admin에서 편집기를 사용해서 글을 작성하면 사용자 페이지에서 해당 내용을 받아와 나타내야 했다. 물론 이미지 파일 또한 첨부가 가능해야 했고, 편집기에서 이미지를 업로드 했을 시 사용자 페이지에서 이미지가 아닌 태그가 텍스트로 나타나는 현상이 발생했다. 이를 해결하기 위해 dangerouslySetInnerHTML 를 사용했다. 위와 같이 __html의 값으로 태그를 적용할 내용을 넣어주면 해당 div 안에서 태그가 적용된 상태로 텍스트를 나타낼 수 있다.

font-family: 'Pretendard', 'Apple SD Gothic Neo', Sans-serif; 다음과 같이 Pretendard가 적용되지 않았을 때 다음 폰트를 지정해주면 해결할 수 있다.

ID, Password를 입력한 뒤 Enter키를 눌렀을 때 로그인이 되게 하는 기능을 구현하기 위해 onKeyPress 함수를 썼다. onKeyPress 안에 키를 눌렀을 때 실행할 함수를 넣어주면 된다. onKeyPress = e => { if (e.key === 'Enter') { this.handleLogin() } } 위와 같이 입력된 키가 Enter일때 로그인이 되게끔 구현해줄 수 있었다.