꾸생의 DevLog

Next.js - getServerSideProps() 에러 핸들링

1. 에러 페이지 생성 const Error = ({statusCode}) => { return( { statusCode ? `An error ${statusCode} occurred on server` : 'An error occurred on client' } ) } Error.getInitialProps = ({res, err}) => { const statusCode = res ? res.statusCode : err ? err.statusCode : 404 return { statusCode } } export default Error 해당 경로에 ./project/pages/_error.js 에러를 표시할 페이지를 생성해 주자. -> 업데이트돼서 404.js 이름으로 생성해준다. 2. getS..

2021.08.31  

React - Next.js 기본 구조

이전 리액트로 SPA(Single-Page-Application) 형태의 간단한 텍스트 게시판을 만들어 봤었다. CSR(Client Side Rendering)은 서버로부터 첫 로드 시 모든 자원을 다운로드하여 브라우저에서 랜더링을 진행하는 방식이기 때문에 초기 로드 시간을 제외하고는 사용자는 부드럽게 이용할 수 있다. 직접 만들어본 간단한 게시판이다. 처음 접속 했을 때, 잠깐의 로딩 애니메이션이 보이고 첫 페이지가 랜더링 된다. 로딩 중에는 자바스크립트 파일과 게시판 데이터가 브라우저에 다운로드된다. 로딩이 완료됐다면 이때부터 서버와의 연결은 필요 없다. 페이지에서 게시판 글을 모두 읽을 수 있을뿐더러 인터넷 접속이 끊기더라도 글 읽기도 가능했다. Simple Forum This website is ..

2021.08.30  

[React] 리액트 url 파라미터 값 읽어오기

리액트 라우트에서 사용할 수 있는 useLocation과 queryString 라이브러리를 사용하여 쉽게 구할 수 있다. > npm i query-string import { useLocation } from 'react-router-dom'; import queryString from 'query-string'; const post = () => { ... const { search } = useLocation(); const { no } = queryString.parse(search); console.log("search : " + search); console.log("no : " + no); return ( ... ) }

2021.08.01  

[React] 리액트 컴포넌트 마운트 효과 구현하기

리액트 컴포넌트 마운트 효과 리액트는 다른 페이지의 이동 없이 처음 접속한 페이지에서 새로운 컴포넌트가 계속 바뀌며 한 페이지에 머무르게 됩니다. 또한 사용자가 요청한 페이지는 로딩 없이 그 자리에서 화면이 바뀌기 때문에 정말 시원한 느낌의 사용자 경험을 제공하기도 합니다. 리액트로 개발된 쇼핑몰의 경우 제품 판매가 더욱 증가했다는 이야기도 들려옵니다. 본론으로 리액트는 컴포넌트가 마운트되어 새롭게 렌더링 될 때 다음 화면이 화면에 순식간에 나타납니다. 저는 갑자기 바뀌는 화면이 심심하게 느껴져 렌더링 될 때 애니메이션 효과를 주고 싶어 방법을 모색해봤습니다. 개인적으로 좋아하는 3가지 효과를 만들어 봤고 움짤이랑 코드도 첨부해 놨습니다. CSS Animation - @keyframe 사용하기 1. 페이..

2021.07.31   2

[React] 리액트 라우트 history.push()/replace() 렌더링 안되는 문제

history.push()/replace() 렌더링 문제 요즘 리액트와 몽고DB를 연동시켜 간단한 텍스트 CRUD 게시판을 구현하고 있는 도중 맞닥뜨린 문제다. 글 작성을 완료하고 목록으로 돌아가기 위해서 useHistory() push('/path~')로 연결해 줬다. 목록으로 돌아갔을 때는 다시 리렌더링 돼서 작성한 글까지 목록에 보여야 하는데... 작성한 글이 업데이트가 안 되는 것이 문제다. 기존 글 목록을 불러오는 방법은 아래와 같다. //main 컴포넌트 useEffect(()=>{ axios.get('/post/list') .then((res) => { setPost(res.data); //글 목록 업데이트 setNowload(false); //로딩종료 및 목록 렌더링 }).catch((er..

2021.07.12  

[React] 리액트 웹팩(Webpack) HotModuleReplacementPlugin

HotModuleReplacementPlugin 웹팩 hot-loader에서 계속 오류가 나는 상황으로 계속 삽잘하던 와중 HotModuleReplacementPlugin으로 빌드 없이 자동으로 결과화면을 확인할 수 있게 되었다. webpack.config.js new webpack.HotModuleReplacementPlugin({ // Options... }); 공식문서 const { HotModuleReplacementPlugin } = require("webpack"); ... devServer: { contentBase: path.join(__dirname, '/'), host: 'localhost', port: 9000, hot: true, proxy: { '/api': 'http://loca..

2021.06.22  

[React] 리액트 PureComponent/React.memo 컴포넌트 리렌더링 방지

PureComponent / React.memo - 클래스형 컴포넌트의 경우 리액트에서는 state 값을 자동으로 체크하고 렌더링 여부를 결정해주는 컴포넌트를 PureComponent라 부른다. 일반적으로 사용하는 Component의 경우 같은 값으로 setState 할 경우 렌더링이 이루어지는데, 웹의 구성요소가 무수하게 많을 경우 엄청난 자원낭비가 발생한다. 이럴 경우 보통 PureComponent를 사용하면 좋다. 하지만 값이 변경 됬다 하더라도 랜더링하고 싶지 않을때도 있기 마련이다. 그럴경우 shouldComponentUpdate() 라이프 사이클을 사용하여 렌더링을 제어할 수 있다. import React, { PureComponent } from 'react'; class BlahBlah e..

2021.06.19  

[React] 리액트 라이프사이클(생명주기)

리액트 라이프사이클 컴포넌트 생성 -> 업데이트 -> 제거 //▼▼▼▼▼▼▼▼▼▼ 리액트 컴포넌트 생명주기 ▼▼▼▼▼▼▼▼▼▼ constructor(){ // 메서드 바인딩 및 state 초기화할 때 사용 } componentDidMount(){ // 처음에만 실행되며, 다음 랜더링할때는 실행 안함. // 외부에서 데이터를 불러온다면 네트워크 요청 작업에 적절한 위치 // AJAX, SetTimeout, setInterval 사용에 적절한 위치 } // ▼ shouldComonentUpdate(nextProps, nextState, nextContext) { //성능최적화용 if(this.state.value !== nextState.value){ return true; //렌더링 함 } return f..

2021.06.19