어제 프로젝트를 생성하여 Vercel에 push를 했다. (nextjs-meetup-for-deployment.vercel.app) 근데 아래 사진과 같이 첫 커밋만 Vercel에서 check 후 배포가 되었고 그 이후 디버깅 과정은 배포가 되지 않는 문제가 생겼다. 혹시 비슷한 문제를 겪고 있는 분이 있지 않을까 싶어서 글을 작성한다. GitHub은 오래전부터 써왔던지라 이전에 했던 기억이 있어서 따로 user 및 password 설정을 해두지 않았었는데, 이 부분이 문제였다. GitHub 우측 상단 클릭 후 Settings에 들어가면 아래와 같은 프로필이 나타난다. git config --global user.name "steadily-worked" git config --global user.ema..

Next.js는 사전 렌더링이 가능하다는 특장점을 갖고 있는 리액트 프레임워크이다. React로 개발을 해봤다면 useEffect Hooks를 써봤을 것이다. 이 useEffect Hook에서 의존성 배열(dependency array)에 빈 대괄호를 넣을 경우 최초 렌더링 시에만 1회 실행된다. 그렇지만 이 경우 비어있는 배열에 바로 값이 저장되는 형태가 아닌, 최초 렌더링 시에는 비어있는 형태로 렌더링이 되었다가 useEffect가 실행되면서 내부 함수가 실행되는 과정 이후 한 번의 렌더링이 더 있은 후에야 해당 useEffect가 적용이 되는 형태이기 때문에 안좋은 사용자 경험(예를 들면 페이지 접속 시 깜빡인다든가)을 제공한다. 예를 들어 아래의 컴포넌트가 있다고 해보자. SampleCompone..

오늘은 기존에 쓰던 react-simplemde-editor 마크다운 에디터를 버리고 toast-ui 에디터로 바꾸었다. 다른 건 다 그렇다 치는데 Next에서 렌더링이 안되었고 그 해결책을 찾기가 어려웠다. 그래서 바꾸고 난 뒤에 Next에서 사용할 수 있게끔 처리를 해서 페이지에 띄우는 데는 성공하였다. 이제, 용어의 이름과 마크다운 각각에 대해 값이 들어가있는지의 여부를 파악하는 useState Hook을 두가지 만들었다. import React, { useState, useCallback } from 'react' const TermRelated = () => { interface ITerms { id: number text: string } const [inputTerm, setInputTerm..

Next.js에서는 전역적으로 적용하는 글로벌 스타일링을 할 수 있다. 기본적으로 TypeScript 템플릿을 가진 create next app을 하면 있긴 하지만, Next.js가 가진 속성이므로 한번 포스팅해보려고 한다. 우선 CSS 모듈을 적용시키는 것부터 보고, 전역적으로 적용시키는 글로벌 스타일링을 보자. layout.tsx import styles from "./layout.module.css"; import { FC } from "react"; interface Props { children: any; } const Layout: FC = ({ children }) => { return {children}; }; export default Layout; layout.module.css .co..

Next.js에서 사전 렌더링을 하는 방법은 크게 두 가지가 있다: Static Generation과 Server Side Rendering(SSR)이 그것이다. 1. Static Generation 유저의 요청(request)이 있기 전에 렌더링 대상이 되는 페이지를 사전에 렌더링해야되는 경우 사용한다. 보통 build time에 사전 렌더링을 해둔다. 1-1. 데이터가 없는 경우의 Static Generation 데이터가 없는 경우는, 서버로부터 fetch해 올 어떠한 데이터도 없기 때문에 Next.js에서는 build time에 HTML 형태로 사전 렌더링을 해둔다. function About() { return About } export default About 1-2. 데이터가 있는 경우의 St..