본문 바로가기

main/Next.js

CSR, SSR, Next.js의 start command에 대하여 | 원티드 프리온보딩 챌린지 사전 과제 CSR(Client-side Rendering)이란 무엇이며, 그것의 장단점에 대하여 설명해주세요. CSR에서 브라우저는 페이지에 필요한 최소한의 HTML 페이지와 JavaScript를 다운로드한다. 그런 다음 JavaScript를 사용하여 DOM을 업데이트하고 페이지를 렌더링한다. 애플리케이션이 처음 로드될 때 사용자는 전체 페이지를 보기 전에 약간의 지연을 느낄 수 있다. 이는 모든 JavaScript가 다운로드, 구문 분석 및 실행될 때까지 페이지가 완전히 렌더링되지 않기 때문이다. 페이지가 처음으로 로드된 후 필요한 데이터만 가져오면 되고, JavaScript는 전체 페이지를 새로 고치지 않고도 페이지의 일부를 다시 렌더링할 수 있으므로 동일한 웹 사이트의 다른 페이지로 이동하는 것이 더 빠르다... 더보기
[Next.js] OG Tag 적용 오류 문제 해결 처음에 _app.jsx에 next/head를 통해 태그를 적용해두었고 og 태그가 제대로 적용 되는 것을 확인했었다. 그리고 다른 개발 하며 잊고 있다가 어느 순간 태그를 페이지별로 다르게 따로 넣어주고 싶었고 각 페이지에서 next/head를 불러와 사용했다. 그랬더니 og 태그가 적용이 안 되는 것이다. 계속 메인 페이지의 og 정보만 가져왔다. 당시에는 어떤 페이지에서 next/head를 써도 당연히 될 줄 알고,, 이 문제라고 생각하지 못했는데... 그 이유 중 하나는 구글링을 해도 어떤 문제점을 찾을 수 없었기 때문 ㅠ ㅠ 남들은 페이지별로 잘 적용하더라고. 그러다가 이걸 봤다. next/head tags for pages overriding default _app.js tags are rend.. 더보기
[Next.js] SEO를 위한 SSR 시도 - 페이지별og태그 적용기 그냥 전체 페이지에 og태그는 적용이 잘 되는데 나는 각각의 포스트 페이지에 그 페이지에 맞는 og태그를 적용시켜주고 싶었다. 해당 페이지 코드에서 useEffect(), next-seo 라이브러리, getServerSideProps, getStaticProps/Paths 를 모두 사용해보았다. 빌드 후 페이지에서 확인을 해보면 마치 적용이 된 것 처럼 보였으나 사실은 html 파일 자체에 적용되어 전송된게 아니라 적용되지 않은 페이지에서 js로 인해 바뀐 상태가 보여진 것이다. 그래서 카카오톡 공유를 하면 계속 이렇게 og가 없는 .. 상태로 나왔다. 페이지에서는 og가 확인이 됨에도 불구하고. Next.js에서 제공되는 기본 코드를 봐도 그냥 페이지에 입력해서 잘 적용 되는거 같은데 나는 왜 이러는건.. 더보기
React Router 이동 시 Transition Animation 주기 React Transition Group이 공식 라이브러리라고 하여 사용해보았다. npm install react-transition-group --save _app.tsx function MyApp({ Component, pageProps }: AppProps) { return ( ); } export default MyApp; Component 부분을 AppLayout 태그로 감싸준다. AppLayout.tsx import React, { ReactNode } from "react"; import { Transition, TransitionGroup } from "react-transition-group"; import { useRouter } from "next/router"; interface P.. 더보기
[React | Next.js] TOAST UI Editor 사용하기 설치 및 적용 TOAST UI :: Make Your Web Delicious! The TOAST UI Is Free Open-source JavaScript UI Libraries Maintained By NHN. ui.toast.com 간단한 오픈소스 글쓰기 에디터를 찾아보다가 현재 TUI를 사용하고 있다. Docs에 나와있는대로 잘 설치하고 따라해보면 기본 에디터가 잘 나오는 걸 볼 수 있음. ​ 기본 Editor를 import 한 후 위와 같이 사용하고 있다. 하지만 왜인지 plugins는 문서에서 하란대로 적용하는데 계속 알 수 없는 에러가 떠서 적용하지 못하고 있다.ㅠ_ㅠ 아래는 구글링 하다 찾은 같은 에러... 하지만 해답은 아직 찾지 못했다 Use the plugin'@toast-ui/ed.. 더보기
[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 3 (TS, Styled-Component, SVG) ✏ TypeScript 적용하기 Next.js를 프로젝트를 시작할 때 TS를 적용한다. npm i next react react-dom npm i -D typescript @types/react @types/node 타입스크립트는 빌드 과정에서 자바스크립트로 변환되기 때문에 실제 배포될 결과물에는 포함되지 않는다. 따라서 -D 또는 --save-dev를 붙여 devDependencies에 추가하여 빌드 시에 모듈이 추가되지 않도록 한다. @types/로 시작하는 라이브러리는, 라이브러리의 타입을 나타낸다. 타입이 내장되어 있는 모듈도 있지만, 그렇지 않은 경우에는 추가적으로 설치해주어야 한다. ✏ TypeScript 사용하기 예제에서 만드는 투두리스트로 TS를 사용하는 방법을 알아본다. d.ts는 타입스.. 더보기
[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 2 (공통 페이지) Next.js의 구동방식을 알아보며 _app과 _document에 대해 알아보겠다. _app / _document 위 두 파일은 없어도 Next의 실행에는 문제가 없다. 커스터마이징이 필요할 때 사용하게 되는 파일이다. Server Only File으로, Next Client에서 사용하는 로직(eventlistener 등의 window/DOM 로직)을 사용하면 안된다. window is not defined 라는 에러를 보게 된다면 해당 사항을 체크해봐야 한다. (!!이 에러가 나는게 그래서였군..) 최초로 실행되는 것은 _app.js이다. 요청한 페이지를 먼저 Component에서 띄우게 된다. 그 다음 _document.js가 실행된다. _app.js에서 구성한 HTML이 어떤 형태로 들어갈지 구성하.. 더보기
[Next.js] 기존 React 프로젝트 Next.js로 바꾸기 - 1 (라우팅) React의 가장 큰 장점이자 단점인 SPA(Single Page Application) 때문에, 페이지의 SEO에 문제가 있어 여러 해결 방안을 찾아보았지만 결국 Next.js로 변경하는 것이 좋겠다고 결론지었다. Next.js를 어떻게 시작해야 하나 고민하던 차에 이 책을 발견하게 됐다. 클론 코딩으로 시작하는 Next.js - 교보문고 Next.js와 타입스크립트로 숙박 공유 플랫폼 만들기 | 넥스트(Next.js)는 리액트(React.js) 기반의 웹 프레임워크입니다. 대부분의 사람들은 넥스트를 그저 리액트를 사용할 때 서버 사이드 렌더링(Serve www.kyobobook.co.kr 일단 이 책 보고 따라해볼까.. 하며 시작했고 조금 감을 잡아나가며 내 프로젝트도 변경하는 중! 그래서 지금부터 .. 더보기

티스토리툴바