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

Mafia Game - 역대글▶ Node.js Docker로 배포하기▶ Next.js Docker로 배포하기▶Github Actions으로 배포 자동화▶ 첫 번째 토이 프로젝트를 완료하고 토이 프로젝트로 마피아 게임을 만들었는데, 클라이언트끼리 통신을 위해서 웹소켓 서버가 필요했다. 그래서 호다닥 만든 다음 실제로 사용하기 위해서 배포를 진행하려고 한다.  이때 Docker를 사용하는 이유는 하나의 서버에 여러 서비스를 배포할 생각이기 때문이다. (이것 저것 배포하는 실험실?)Linux Ubuntu 24.04 버전을 사용하고 있는 환경에 Docker를 설치까지는 선행으로 진행했고 이어서 배포를 하려고 한다.  Docker File1. Base Image 선택FROM node:20.16-alpine3.19..

Babel이란? Babel은 자바스크립트 트랜스파일러로, ECMAScript 2015+ 코드를 구형 및 최신 브라우저 환경에서도 호환도록 변환하는 도구 체인이다.  주요 기능문법 변환최신 ECMAScript 문법을 구형 브라우저에서도 동작할 수 있도록 변환한다. 예) const나 arrow function 같은 문법을 구형 문법으로 변환polyfill 적용브라우저에서 지원하지 않는 새로운 JavaScript 기능을 사용할 수 있도록 추가 기능을 삽입한다. 예) Promise, Array.prototype.includes 등.코드 전환React(JSX), TypeScript와 같은 다양한 JavaScript 확장 언어를 표준 JavaScript로 변환한다. 예) JSX 코드를 React.createElem..

React 공식 문서에서도 프레임워크와 함께 사용하는 것을 권장하고 있지만, 실제로는 여전히 Next.js와 같은 프레임워크 없이 React만 사용하는 개발 사례가 많다. 이 경우 Vite를 비롯해 Rollup, Parcel, Webpack, 그리고 CRA(Create React App)와 같은 도구를 사용해 개발하는 경우가 이에 해당한다.  따라서, 프레임워크가 제공하는 번들링 환경에만 의존하기보다는 번들링 도구에 대한 이해가 여전히 중요하다. 특히, 풍부한 자료와 널리 사용되는 Webpack을 중심으로 번들링에 대해 정리하려고 한다.  더불어 Next.js에서도 Turbopack이라는 새로운 번들러가 도입되었지만, 현재 개발 환경에서만 사용되며, 여전히 Webpack을 주요 번들러로 사용하고 있다. ..

클론 코딩이 개발 실력을 키위기 위해 자주 활용되는 방법이지만, 지금 내 상황에서 정말 필요한지 고민이 많이 되었다. 그럼에도 불구하고 시멘틱한 코드를 작성을 연습하기 위해서는 클론 코딩만큼 효과적인 방법도 드물다고 생각한다.  이미 존재하는 홈페이지를 따라 만드는 것이기 때문에 UI 디자인에 대한 고민을 덜 수 있고, 코드 작성과 기술적인 구현에 집중할 수 있다. 이번 클론 코딩으로는 iPad 홈페이지를 선택했고, 제한 사항으로 React와 같은 라이브러리 없이 HTML, CSS, Vanilla JavaScript만 사용하려고 한다.  또 다른 장점으로는 시간이 오래 걸리지 않는다. 모바일까지 작업을 한다면 모르겠지만 굳이 모바일은 작업하지 않을 것이기 때문에 금방 작업이 끝났다.  position f..

사이드 프로젝트의 기능 중 달력을 만드는 부분이 있었다. 달력 레이아웃은 많이 구현했기 때문에 문제가 없을 것이라고 생각했는데, 정말 예상치 못한 오류가 있었다.  달력을 배치하는 부분에서 아주 미세하게 7등분으로 나눠지지 않는 문제가 있었다. react native에서 화면을 가득 채우는 간단한 방법은 flex 속성을 사용하는 것이다. 여기서도 복잡한 기능이 있는게 아니다.  부모 요소에게 flex: 1을 주고 자식 요소에게도 flex: 1을 주면 간단하게 해결된다. 지금까진 전혀 문제가 없었다. 그래서 동일하게 작업을 한 결과는 다음과 같다. 붉은 배경은 Children에 해당하는 요소에게 배경색을 줬다. 보는 것처럼 얇은 하얀색 여백을 확인할 수 있다. 이론대로라면 꽉차서 전..

HTML의 렌더링 과정에 대해서 지난번에 공부한 적이 있다. 간단하게는 다음과 같은 과정을 거치게 된다. 다운로드 : 화면을 그려주는데 필요한 리소스(html, css, js)를 다운로드 한다. HTML 준비 : 렌더링 되어야 할 HTML 요소로 DOM을 만들어 준다. CSS 준비 : css 코드를 가지고 와서 CSSOM을 만들어 준다. 두개 합치기 : 둘을 합쳐서 렌더링 트리를 생성한다. 위치 그리기 : 화면에 요소들이 어디 놓일 지 그려준다. 색칠하기 : 그려친 요소에 색을 칠해준다. 여기서 위치 그리기, Layout 단계가 다시 실행되면 색칠하기, Paint 단계도 다시 실행되는 Reflow는 성능 저하의 주요 원인이 된다.  메모이제이션을 통해 불필요한 기능 재실행을 줄이는 것 외에도, reflo..

웹사이트를 개발할 때 성능 최적화는 고려할 사항 중 하나이다. 다양한 기기와 네트워크 환경에서 웹사이트가 원활하게 작동하도록 설계하는 일은 개발자가 해야할 중요한 부분이다. 컴퓨터와 스마트폰 사양이 높아지면서 이정도까지 신경을 써야하나 의문이 생길 수 있지만, 모든 사용자가 그러한 환경을 가지고 있지 않는 점에서 성능 최적화는 여전히 중요하다.  웹사이트의 성능 저하는 사용자 경험을 크게 떨어뜨리며, 페이지가 늦게 로드되거나 상호작용이 느려질수록 이탈률이 높아질 수 밖에 없다. 그렇기 때문에 우리들은 늘 최악의 경우를 염두에 두고, 가능한 빠르고 효율적인  환경을 제공해야 한다.  그러한 의미에서 성능 최적화 중 하나인 메모이제이션(Memoization)을 통해 성능을 어떻게 개선할 수 있는지 알아보려고..