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

사용자의 위치 정보를 계속 가지고오는 작업을 진행했었다. 이번에는 사용자의 위치 정보를 일정 거리 이상 이동했을 때 가지고 오는 방법을 알아보려고 한다. 실시간으로 계속 가지고 온다면 위치 확인 성능은 좋겠지만 배터리 사용량은 증가할테니깐 상황에 맞는 필터를 건다면 성능도 잡고, 기능도 구현하는 좋은 방향이 되지 않을까??  본 글은 앞선 위치 정보 가지고 오기 글을 기준으로 작성했기 때문에 전체적인 코드는 나오지 않습니다.만약 해당 기능이 필요하다면 글을 먼저 확인 후 여길 다시 찾아주세요!  distanceFilterlocationManager 에서 사용할 수 있는 옵션 중 하나이다. 사용하면 설정해준 거리만큼 이동해야지 다시 호출된다. - (instancetype)init { self = [sup..

Mafia Game - 역대글▶ Node.js Docker로 배포하기▶ Next.js Docker로 배포하기▶ Github Actions으로 배포 자동화 ▶ 첫 번째 토이 프로젝트를 완료하고 지금까지 Nginx와 Next.js, Node.js 서버를 Docker를 통해서 배포하는 방법을 알아봤다. 이번에는 Github Actions를 사용해서 main 브랜치에 머지 되면 Docker를 통해 자동으로 배포되도록 설정하는 작업을 진행하려고 한다.  이 글에서는 Dockjer에 대한 설정을 추가로 다루지 않고, GitHub Actions와 Linux 환경 설정에 초점을 맞추고 있습니다. Docker 설정이 필요하다면, Node.js, Next.js 배포하기를 먼저 참고해 주시길 바랍니다.  Linux 설정Gi..

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..