Chunho’s DevLife

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를 작성해주면 해당 영역보다 내용이 길어질 경우 계속해서 스크롤을 줄 수 있다.

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

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가..

모달창을 생성하기 위해 먼저 modals 폴더에 Modal jsx 파일을 생성해준다. import React, { Component } from 'react' class Modal extends Component { constructor(props) { super(props) } render() { const { open, close } = this.props return ( {open ? ( 모달창입니다. ) : ( )} ) } } export default Modal 위와 같이 props로 모달창을 제어하기 위한 toggle인 open과 open을 false로 바꿔 모달창을 사라지게 할 close 함수를 받아온다. open이 참일 경우에만 모달창이 나타난다. this.state = { modalOpe..

nextJS는 SSR 기반이기 때문에 CSR와 달리 window에 접근할 수 없다. 따라서 일반적인 방식으로 사용한다면 에러가 난다. nextJS에서 localStorage 또는 sessionStorage를 사용할 땐 랜더링이 이루어 진 후 사용할 수 있다. 함수형 컴포넌트일 경우 useEffect, 클래스형 컴포넌트일 경우 componentDidMount 함수 안에서 사용해주면 된다. componentDidMount(){ if(this.state.path==="/businessMain"){ this.setState({ companyName:localStorage.getItem("companyName") }) } } 위와 같이 사용해주면 된다. 기본적으로 ["key", "value"]의 쌍으로 이루어져 ..

React-Query를 사용하여 useMutation Hook을 만들고 API서버에 POST요청을 하여 데이터를 추가하였다. 이때 해당 키를 가지고 있는 쿼리를 무효화시키고 리패치를 하여 view에 바로 변경사항이 반영되도록 하기 위해 useMutation의 onSuccess 함수 안에 queryClient.invalidateQueries()를 사용하여 쿼리 무효화를 했다. 분명 devTool 에는 fresh, stale의 과정을 거치면서 쿼리가 무효화되고 리패칭이 되는 것을 확인했는데, view에는 변경사항이 바로 반영되지 않았으며, POST요청을 두 번 보냈을 때 변경사항이 반영되었다. 아마 시간차?의 문제라고 생각하고 위와 같이 POST요청 후 성공적으로 서버에 전송한 데이터를 Create 한 1초..