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

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

Rhythm Up - 역대글▶ Docker 배포 최적화▶ Nginx HTTPS▶ 두 번째 토이 프로젝트를 완료하고    기존 배포 방식에서는 HTTP 프로토콜을 사용해 데이터를 전송하고 있었다. 그러나 HTTP는 데이터가 암호화되지 않은 상태에로 전송되기 때문에, 민감한 정보가 제3자에 의해 가로채이거나 악용될 위험이 있다. 이러한 보안 문제를 해결하기 위해 HTTPS로 전환이 필요하다.  HTTPS는 SSL/TLS 인증서를 기반으로 동작하며, 인증서를 통해 서버와 클라이언트 간의 신뢰를 형성한다. HTTPS를 사용하면 데이터가 암호화된 상태로 전송되기 때문에, 제3자가 데이터를 가로채더라도 이를 읽거나 해독할 수 없다. 이를 통해 사용자 정보와 서버 간 통신을 안전하게 보호할 수 있다.  보안 이점 외..

Rhythm Up - 역대글▶ Docker 배포 최적화▶ Nginx HTTPS ▶ 두 번째 토이 프로젝트를 완료하고  지난 프로젝트에서 GitHub Actions와 Docker를 활용해 배포 작업을 진행했다. 초기에는 별다른 문제 없이 서비스를 배포했으며, 새로운 서비스도 동일한 방식으로 자동 배포를 설정했다. 그러나 예상치 못한 큰 문제에 직면하게 되었다. 배포된 Docker Image의 크기 문제이다. Docker Build를 통해 생성된 이미지의 크기가 무려 4.6GB에 달했던 것이다. 단순히 Build를 했을 때는 나올 수 없는 크기였지만, 배포 과정에서 이미지 크기가 비정상적으로 커지면서 예상치 못한 용량 문제가 발생했다.  또한,GitHub Actions의 작업 시간이 6분, 7분이 되는 것을..

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