이번 2022.10.26 진행한 Next.js Conf에서 Next.js 13을 공개했습니다. 공식문서와 Conf 내용을 바탕으로 Next.js 13에서 변경된 점을 정리해보겠습니다. app 디렉토리 기존 Next.js 12 버전은 /pages 디렉토리에 폴더에서 개발을 했습니다. pages │ ├── _app.js ├── index.js ├── ...Next.js 13 버전부터는 /app 디렉토리에서 개발을 합니다. pages │ ├── layout.js ├── page.js ├── ...app 디렉토리를 사용하기 위해서는 next.config.js 파일에 아래와같이 설정을 추가해주셔야합니다. const nextConfig = { ... experimental: { appDir: true } ... }..

기존에는 코드를 운영 환경에 배포시에 Git을 이용해서 적용했습니다. 하지만 코드가 변경 및 배포 주기가 짧아지면서 매번 운영서버에 접속해 코드를 받아주는 과정이 매우 비 효율적이며 귀찮습니다. 해당 글에서는 위 문제를 해결하기 위해 Github Actions, AWS CodeDeploy를 이용해서 AWS EC2에 배포를 자동화하는 과정과 Docker를 이용해 무중단 배포(Blue-Green)를 하는 과정을 정리해 보겠습니다. 만약 본문의 내용중 잘못된 내용이 있다면 피드백 부탁드리겠습니다. 예제로는 Nest.js를 이용하였으므로 다른 언어 및 프레임워크를 이용하거나 환경이 다를 경우 해당 게시글의 내용과 달라질 수 있습니다. 해당 게시글에서는 테스트 과정은 포함되어있지 않으니, 필요시에 코드를 테스트하..

기존에는 코드를 운영 환경에 배포시에 Git을 이용해서 적용했습니다. 하지만 코드가 변경 및 배포 주기가 짧아지면서 매번 운영서버에 접속해 코드를 받아주는 과정이 매우 비 효율적이며 귀찮습니다. 해당 글에서는 위 문제를 해결하기 위해 Github Actions, AWS CodeDeploy를 이용해서 AWS EC2에 배포를 자동화하는 과정과 Docker를 이용해 무중단 배포(Blue-Green)를 하는 과정을 정리해 보겠습니다. 만약 본문의 내용중 잘못된 내용이 있다면 피드백 부탁드리겠습니다. 예제로는 Nest.js를 이용하였으므로 다른 언어 및 프레임워크를 이용하거나 환경이 다를 경우 해당 게시글의 내용과 달라질 수 있습니다. 해당 게시글에서는 테스트 과정은 포함되어있지 않으니, 필요시에 코드를 테스트하..

2022년 3월 29일자로 React 18 버전이 출시되면서 17버전에서 사용되던 ReactDOM.render등 몇가지가 지원이 중단되었습니다. ReactDOM.render ReactDOM.hydrate ReactDOM.unmountComponentAtNode ReactDOM.renderSubtreeIntoContainer 그래서 기존 React 17에서 사용되던 ReactDOM.render 대신 18 버전에 맞게 변경해주면 해당 Warning이 해결됩니다. // React 17 import React from "react"; import ReactDOM from "react-dom"; import reportWebVitals from "./reportWebVitals"; import App from "..

AWS RDS, Ubuntu Timezone Problem Local환경에서의 타임존(Asia/Seoul)과 AWS RDS와 Ubuntu 서버의 타임존(UTC)이 달라 Database insert시 시간차가 발생하는 이슈 AWS RDS MySQL MySQL에서 해당 쿼리로 타임존을 검색해보면 아래와 같이 현재 타임존이 나온다. SELECT @@global.time_zone, @@session.time_zone; [result] @@global.time_zone -> SYSTEM @@global.session.time_zone -> SYSTEM해당 포스트에서 발생한 문제는 로컬환경과 다르게 System 타임존이 한국으로 설정이 되어있지 않아 발생한 문제였다. 아래의 쿼리로 타임존을 변경해준다. SET @@..

React Hooks React v16.8부터 함수형 컴포넌트에서도 컴포넌트 상태, 생명주기를 관리할 수 있는 Hooks API를 지원합니다. React v16.8이전의 클래스형 컴포넌트와 함수형 컴포넌트 클래스형 컴포넌트 State를 가지고 있어 상태 변화에 대한 관리 가능가 가능하다. 리액트 라이프 사이클 API를 사용한다. 함수형 컴포넌트 State, LifeCycle 관련 기능 사용이 불가능하다. 메모리 자원을 함수형 컴포넌트보다 덜 사용한다. 컴포넌트 선언이 편하다. 하지만 React Hook이 나옴으로서 클래스 컴포넌트에서 사용 가능했던 State, LifeCycle API를 사용할 수 있게 되었습니다. Hooks API가 나온 배경 기존의 클래스형 컴포넌트에는 단점들이 존재합니다. State..

React LifeCycle 리액트는 UI가 변경되면 자동으로 컴포넌트가 업데이트되며 동적으로 화면을 변경해줍니다. 리액트의 컴포넌트는 컴포넌트가 생성, 업데이트, 제거될 때 까지의 생명주기를 가집니다. React의 LifeCycle을 정리해보겠습니다. Source : https://github.com/wojtekmaj/react-lifecycle-methods-diagram Mounting (생성) 최초에 컴포넌트가 생성될 때 한 번 수행됩니다. 컴포넌트가 브라우저에 나타나기전과 나타난 후에 호출되는 API입니다. constructor constructor(props) { super(props); } 컴포넌트가 생성될 때 한번만 실행되며, 가장 먼저 실행되는 메서드입니다. 생성자 메서드입니다. 초기 s..