Mafia Game - 역대글▶ Node.js Docker로 배포하기▶ Next.js Docker로 배포하기▶ Github Actions으로 배포 자동화▶ 첫 번째 토이 프로젝트를 완료하고 완성 URL 지금까지 몇 차례 토이 프로젝트를 진행했지만, 본격적으로 집중했던 프로젝트는 마피아 게임과 개발 중인 여행 일기 작성 어플리케이션이다.  이번 마피아 게임 프로젝트는 여전히 부족한 부분이 많다. 프론트엔드 개발자로서 주어진 UI를 기반으로 작업한 경험은 많지만, 이번 프로젝트는 처음으로 UI를 직접 설계하고 필요한 이미지를 제작하는 작업을 병행했기 때문이다. 다소 낯선 작업이었지만, 새로운 도전을 통해 얻은 배움이 많았다.  프로젝트의 주제는 그렇게 중요하지 않았다. 대신 Docker와 GitHub Act..

Mafia Game - 역대글▶ Node.js Docker로 배포하기▶ Next.js Docker로 배포하기▶ Github Actions으로 배포 자동화▶ 첫 번째 토이 프로젝트를 완료하고 지난번에는 Node.js 서버를 Docker를 활용해서 배포하는 작업을 진행했다. 이번에는 Next.js를 Docker를 통해 배포하는 방법을 알아보려고 한다. 또한, 배포 과정에서 Nginx를 추가로 사용하려고 한다.  Next.js는 Node.js 기반의 서버를 내장하고 있어 React와 달리 Nginx가 배포를 위해서 필수는 아니다. 하지만 Nginx를 도입하면 도메인 설정이 용이하고, CORS 처리를 대신할 수 있어 배포 환경을 더욱 효율적으로 구성할 수 있다. 이러한 이유로 이번 배포에서는 Nginx를 함께 ..

간단한 입력을 위해서는 보통 textarea나 input을 사용해 입력란을 만들 수 있다. 하지만 사용자가 본문에서 중요한 부분을 강조하고 싶거나, 텍스트 색상을 변경하는 등의 스타일링을 필요로 하는 경우가 많다. 이런 상황에서는 텍스트만 입력하는 방식으로는 한계가 있다.  이런 한계를 극복하기 위해 다양한 웹 에디터 라이브러리가 등장했다. 웹 에디터는 사용자가 손 쉽게 텍스트를 꾸밀 수 있도록, 예를 들어 굵게, 기울임, 링크 추가, 이미지 삽입 등을 지원한다.  하지만 이렇게 강력한 웹 에디터가 XSS(크로스 사이트 스크립팅) 공격의 대상이 되기도 한다. 웹 에디터를 통해 발생할 수 있는 XSS 공격의 종류와, 왜 이런 공격 때문에 LocalStorage에 Access Token을 저장하는 것이 위험..

ssr를 사용하는 이유 중 큰 부분으로 metadata를 꼽을 수 있을 것 같다. title부터 og태그까지 서버로부터 받아온 데이터를 metadata에 넣어주면서 동적으로 변경하기 위해서이다.  Next.js에서는 아주 간단하게 이런 기능들을 제공하는데, 해당 기능은 Server Components에서만 지원하는 기능으로 metadata와 generateMetadata가 거기에 해당하는 속성들로 간단하게 metadata를 변경할 수 있다.  metadatalayout나 page에서 export 하면 적용할 수 있다. export const metadata = { title: "...", description: "...",} 가장 기본적인 기능으로 페이지별로 정적으로 metadata를 설정할 수 있다..

Next.js에서 Loading.js 파일이나 Suspense에 대한 중요성을 크게 생각하지 않았다. 하지만 ssr의 특징을 테스트를 통해서 보니 확실하게 이해가 되었다.  ssr의 장점이자 단점 사용자가 홈페이지를 접속했을 때 HTML엔 이미 데이터가 담긴 채로 전달되기 때문에 초기 렌더링 속도가 빠르다고 할 수 있다. ※ csr은? csr의 경우에는 홈페이지에 접속하면 뼈대만 있는 HTML 파일을 보내주고 이후 다시 서버로부터 데이터를 요청하기 때문에 초기 렌더링 속도가 느리다고 할 수 있다. 이러한 장점은 크롤러 봇이 HTML을 빠르게 읽을 수 있기 때문에 SEO에 좋게 작용될 수 있다.  하지만 서버 데이터를 ssr로 별다른 처리 없이 가지고 온다면 문제가 발생할 수 있다. 서버에서 넘어오는 데이..

UI를 공유하기 위해서 사용하는 layout 파일이다. 부모 경로에서 만들어둔  layout 파일은 부모의 자식 경로에 모두 적용이 된다. /main/board 경로가 구성되어 있다고 했을 때, board 페이지가 렌더링되면 main의 layout이 렌더링되고board의 layout 마지막으로 page가 렌더링된다.  root 경로에 있는 layout ( root layout ) 은 반드시 있어야 하며 html 태그나 body 태그를 포함해야 한다. 기본적으론 Server Component지만 'use client' 옵션을 준다면 Client Component로 구성될 수 있다.  layout을 통해 현재 선택된 레이아웃의 경로를 알기 위해서는 useSelectedLayoutSegment 또는 useSe..

Next.js 환경으로 프로젝트를 진행할 때 React의 ssr버전이라고 생각했지만 생각보다 많은 고전을 경험하고 있다. not-found 처리부터 시작해서 client, server 컴포넌트의 모시깽한 관계... Atomic Design Pattern에 빠져있는 지금 Next.js에서 어떤 방법으로하면 잘 사용할 수 있을지 고민해봤다.  개발 환경 개요.글쓴이가 사용(?)하던 디자인 패턴은 Container Presenter 패턴을 시작으로 Compound 패턴 그리고 현재 Atomic 패턴으로 왔다. 초기 디자인 패턴이라는 것은 하나의 개발 환경에 무조건 하나의 디자인 패턴을 사용해야 한다는 강박이 있었다.  그러다보니 지금까지도 개발하면서 충분히 만족할 수 없는 개발 환경을 구성하게 된 것 같다. ..

Not Found는 Next.js에서 404 에러가 발생했을 때 렌더링되는 페이지이다. 일반적인 사용 방법은 Not Found 가 필요한 위치에 not-found.jsx 파일을 만들어주면 끝이다.  근데 한가지 이상한 점이 있었다. 모든 페이지에 Header와 Footer라 필요해서 app 폴더 아래에 있는 layout에게 Header와 Footer를 불러왔다. const RootLayout = () => { return ( {children} )};export default RootLayout; 사건 재현을 위해서 Header와 Footer에는 특별한 기능이 있는 것은 아니고 간단한 문자만 렌더링 했다. 그 결과는 당연히 ..