짧은코딩

다이나믹 라우팅 sns에서 게시글의 아이디를 활용하여 게시글을 불러오는 페이지를 만들려고 하면 next.js에서는 다이나믹 라우팅을 사용할 수 있다. 파일 구조 파일 구조는 이렇게 post 폴더 안에 [id].js를 하면된다. 코드 const router = useRouter(); const { id } = router.query; useRouter를 이용하면 url에 뜨는 게시글의 id를 받아올 수 있다. getServerSideProps에서 id 찾기 context.store.dispatch({ type: LOAD_POST_REQUEST, // context.params.id 혹은 context.query.id라고 하면 useRouter에 똑같이 접근할 수 있다. data: context.params..

CSR과 SSR CSR CSR은 데이터를 얻기 위해서 요청이 2번 간다. 사용자가 새로고침을 하면 프론트 서버에서 HTML과 JS를 브라우저에 주고 그 이후에 또 요청을 하여 추가적으로 데이터를 불러온다. SSR SSR은 데이터를 얻기 위해 요청이 1번 간다. 서버에서 즉시 렌더링 가능한 html 파일이 만들어져 있기 때문에 바로 렌더링이 된다. 이로 인해 초기 로딩 속도가 빨라진다. 즉, 사용자는 콘텐츠가 빠르게 보이는 느낌을 줄 수 있다. SSR 적용 방법 index.js useEffect(() => { dispatch({ type: LOAD_MY_INFO_REQUEST, }); dispatch({ type: LOAD_POSTS_REQUEST, }); }, []); 처음 시작이 되는 페이지인 inde..

리렌더링 리엑트에서 리렌더링이 되면 return 밑 부분을 처음부터 실행하지만 바뀐 부분만 다시 그리게 된다.(return 부분이 virtual dom이다.) 만약 리렌더링 되었을 때, 모든 화면을 다시 그려준다면 개발자들이 리엑트를 사용하지 않을 것이다. 번외로 useCallback은 함수를 캐싱하는 것이고 useMemo는 결과를 캐싱하는 것이다. 인라인 스타일 코딩을 하다보면 인라인 스타일을 많이 쓰게 된다. 이런 방식은 지양하는 것이 좋다. 왜냐하면 객체는 "{} === {}"을 하면 false가 나온다. 그렇기 때문에 리렌더링하면 인라인 스타일 부분을 사용한 곳을 다시 그리게 된다. 해결법으로는 styled-components, emotion.js 등 같은 js-in-css를 사용하면 된다. an..

ant Design -공식 사이트 https://ant.design/ Ant Design - The world's second most popular React UI framework Ant Design 5.0 Ant Design 5.0 use CSS-in-JS technology to provide dynamic & mix theme ability. And which use component level CSS-in-JS solution get your application a better performance. ant.design 이 사이트에는 버튼, 메뉴 스타일 등의 css가 있다. 장점으로는 디자이너가 없을 때, 디자인 고민 할 시간을 덜어줄 수 있다. 단점으로는 페이지가 다른 사이트와 겹치는 스타..

기본 설정 강좌에서 Next는 9버전을 사용했다. Next는 import React from 'react'가 있어도 없어도 상관없다. 넥스트는 pages 안에 있는 파일들을 인식해서 코드 스플리팅 된 개별적인 페이지로 만들어준다. 따라서 pages의 이름은 무조건 pages이어야 한다. -package.json "scripts": { "dev": "next" }, dev에 next를 넣어주면 npm run dev를 했을 때 next가 실행된다. 페이지 추가하기 -회원가입 페이지 const Signup = () => { return 회원가입 페이지 }; export default Signup; 만약 회원가입 페이지를 만들고 싶으면 그냥 이렇게 만들면된다. 그리고 url에 /singup을 붙이면 회원가입 페..

Next.js Next.js는 리액트를 기반으로 만들어진 프레임워크이다. 기능이 더 추가 되었지만 프레임워크다 보니까 자유도는 떨어졌다. 그리고 서버 사이드 렌더링(SSR)을 사용한다. 전통적인 SSR 이런식으로 요청을 한다. 이런 방법도 비교적 간단한 방법이다. -단점 사용자는 방문 할 페이지가 1개인데 다른 페이지도 주면 낭비가 될 수 있다. => 코드 스플리팅을 하면 모든 페이지를 불러오지 않아도 되기 때문에 위에서 말한 단점을 해결할 수 있다. Pre-Rendering 프리 랜더링은 검색 엔진이라는 것을 알아차리고 검색 엔진일때만 백엔드 서버에서 데이터를 받아서 html을 완성해서 준다. 일반 유저에서는 리액트 방식처럼 준다. Sever Side Rendering 첫 방문만 전통적인 방식으로 불러..