프론트엔드 개발을 할 때 TypeScript는 이제 선택이 아닌 필수로 자리 잡고 있다. 코드의 안전성과 가독성을 높여줄 뿐만 아니라, 협업 시 발생할 수 있는 오류를 줄여주는 강력한 도구이기 때문이다.  또한 협업 환경에서는 EsLint를 사용하여 코드 규칙을 강제하는 경우가 많다. 물론, 개인 프로젝트에서도 코드의 일관성을 유지하기 위해서 EsLint를 사용하는 경우도 많다.  이러한 환경에서 개발 도중에는 EsLint와 TypeScript가 오류를 알려주기 때문에 바로 문제를 인지하고 수정할 수 있다. 하지만 코드가 GitHub과 같은 저장소에 올라가는 단계에서는 검사 과정을 거치지 않고 코드가 반영될 위험이 있다. 이렇게 되면 문제가 있는 코드가 저장소에 포함될 가능성이 생기며, 이는 협업 시 큰..

Rhythm Up - 역대글▶ Docker 배포 최적화▶ Nginx HTTPS▶ 두 번째 토이 프로젝트를 완료하고  완성 URL 두 번째 토이 프로젝트를 마무리했다. 이번 프로젝트에서는 사용자가 노래를 공유할 수 있는 서비스를 구현했다는데, 사용자 피드백을 받으며 기능을 다듬는 과정에서 기대 이상의 결과물을 만들어 낼 수 있었다.  이번 프로젝트에서는 첫 번째 토이 프로젝트를 진행하며 느꼈던 아쉬움을 바탕으로 개발 환경과 구조를 개선하는 데 중점을 두었다. 특히, Next.js를 활용하여 Node.js 서버가 불필요한 서비스에서도 Node.js 환경을 사용했던 비효율성을 보완했고, 배포 환경에서도 이전에 겪었던 문제를 해결했다.  또한 Docker 환경에서 배포 시 HTTP 설정으로 인한 이슈와 이미지 ..

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를 함께 ..

Next.js 프로젝트를 배포하기 위해서 build 중 오류가 발생했다. 'Build optimization failed: found page without a React Component as default export in pages/...' error 해석해보면 React 컴포넌트가 아닌 것을 export 하는 페이지는 렌더링 될 때 오류를 일으키거나 빌드 성능을 저하시킬 수 있다고 한다. 한마디로 pages 폴더 안에 React 컴포넌트 외 다른 파일이 존재하기 때문에 발생한 문제였다. 나같은 경우 styled-components를 사용한 코드를 모아두는 Style.js 파일이 있어서 발생한 문제였다. 해결 방법 간단하게 Style.js 파일을 외부로 이전시켜주는 것으로 해결했다. 앞으로는 pag..

Next.js에서 styled-components를 같이 사용할 때 오류가 발생했다. 찾아보니 styled-components를 사용했을 때의 className과 실제 적용되었을 때의 className이 달라서 발생하는 문제였다. 최초 실행 시에는 css가 제대로 적용이 되었는데, 페이지 이동 & 새로고침이 발생했을 때 위와 같은 오류가 나오면서 css가 적용이 되지 않았다. 찾아보니 next.js에서 초기 렌더링은 ssr로 적용되고, 이후 페이지 이동 등은 csr로 렌더링이 된다. 초기 렌더링 시에는 ssr로 적용되기 때문에 문제가 없었지만 이후 csr로 적용되기 때문에 클래스 명이 맞지 않아서 발생한 것 같다. 해결 방법 구글에 검색 했을 때 기본적으로 해결하는 방법이 있었다. .babelrc에서 설..

정말 많은 글이 있고, 많이들 알아보는 내용이다. 과연 이 둘의 차이는 어떤 것이 있을까? 프레임워크 ▶ 설계부터 코드 작성 스타일까지 모두 도구의 방식을 따라야 한다. ▶ 짜여진 프레임 내에서 작업하기 때문에 프레임워크이다. 라이브러리 ▶ 도구를 사용해서 생산성을 개선하는 것에 포커스가 잡혀있다. ▶ 인터페이스를 크게 제약하지 않는다. ▶ 전체 설계까지 영향을 미치지 않는 것이 보편적이다. 강제성 개발을 할 때 정해진 방식으로 개발을 해야하는지? 자유롭게 개발을 할 수 있는지? 제어권이 개발자에게 있는지? 툴에 있는지? 강제성에서의 차이가 있을 것이다. 그렇다면 내 블로그에 많이 올라오는 React는 라이브러리일까? 프레임워크일까? ▶ 자유도가 높으니 라이브러리이다! ▶ 홈페이지에 라이브러리라고 적혀있..

Next.js는 페이지에 공통으로 적용되는 _document와 _app이 존재한다. _app 서버에 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로 공통 레이아웃 역할을 한다. 애플리케이션이 실행되면 가장 먼저 호출되기 때문에 글로벌한 작업을 수행할 때 사용한다. function app({ Component, pageProps }) { return } app.getInitialProps = async (appContext) => { // ... return { ...appProps } } 사용 예. 페이지 전환 시에도 전체 레이아웃을 유지하고 싶은 경우 페이지 전환 후 state를 유지하고 싶은 경우 페이지에 추가적인 데이터를 삽입하고 싶은 경우 글로벌 CSS를 적용하고 싶은 경우 _document _..

Next.js는 SSR이 가능한 특징을 가진 React 프레임워크이다. Next의 ServerSide Cycle Server가 GET 요청을 받는다. 요청에 맞는 Page를 찾는다. _app.js에 getInitialProps가 있다면 실행한다. 하위 Component의 getInitialProps가 있다면 실행하고 pageProps를 받아온다. 모든 props를 구성하고, _app.js => Component 순서로 렌더링을 한다. Content를 구성하면 _document.js를 실행해 html 형태로 출력한다. 여기서, 모든 페이지에서 공통적인 데이터 패칭이 필요하면, _app.js에서 데이터 패칭을 하고, 페이지마다 다른 데이터가 필요하면 각 페이지에서 데이터 패칭을 해주면 된다. Next.js ..