목차 시작하며 토스는 어떨까? 쏟아지는 페이지 한 방에 관리하기 Reference 시작하며 새로운 서비스를 만들어간지 6개월 쯤 되었을 때 점점 거대해지는 프로젝트를 보고 고민이 들었어요. 30%의 기능만이 구현된 지금도 헤비하다는 생각이 드는데 앞으로 더 커질 서비스를 생각하니 잠깐 아득해졌어요. 신규 기능이 나날이 살을 붙여가는 토스 앱의 경우 어떤 식으로 프로젝트를 관리하고 있는지 궁금하기도 했고요. 마침 작년 SLASH23에서 관련 주제로 발표했던 내용이 있었는데 관심있던 내용이라 재미있게 듣고 기록까지 해봅니다. 토스는 어떨까? 토스 모바일 가입 플로우라고 합니다. 가입 단계만 해도 어마어마하게 많은 스크린이 존재하는 것을 볼 수 있는데요. 토스의 경우 한 페이지에서 유저가 할 수 있는 최소한의 기능만을 보여주고 단계 별 화면 전환을 시키고 있어 더 많은 스크린이 존재할 수 밖에 없겠다 생각했어요. 스크린샷 2024-01-19 오전 11.44.44.png 저는 피그마 화…

시작하며 Next.js 웹 애플리케이션 환경에서 아래 이미지와 같은 에러가 종종 발생합니다. 아래 에러 조치의 일환으로 Error boundary와 Setnry를 설정합니다. Sentry Setup 센트리에서 프로젝트 생성 센트리 페이지에서 플랫폼을 설정하면 플랫폼에 따라 자동으로 기본적인 세팅을 할 수 있는 커맨드가 생성됩니다. [sentry/wizard 설정] sentry.client.config.js, sentry.server.config.js 생성 Next.js config 파일인 next.config.js 파일에 센트리 관련 설정 업데이트 sentry-cli 를 위한 .sentryclirc, sentry.properties 파일 생성 Sentry setup을 확인할 수 있는 example page 생성 SDK wizard로 기본적인 세팅

EC2 설정하기 서비스에 맞는 컨테이너 이름을 설정해주고, AMI는 ubuntu를 사용한다. 작성 시점(23.08.17) 기준 22.0.4 버전이 LTS였기에 해당 버전을 사용하였으며, LTS 버전을 사용하는 것을 권장한다. 스크린샷 2023-08-17 오전 11.35.07.png 인스턴스 유형은 컨테이너 생성 후 변경이 가능하니 프리티어로 사용할 수 있는 t2.micro로 설정해주고 필요하다면 나중에 바꾸도록 한다. 여러 번 ec2 재생성을 하고 있는 중이라 키 페어나 보안 그룹은 기존에 있는 것을 사용하였다. (생성하는 방법은 추후 추가 예정) 스토리지 역시 프리티어로 사용 가능한 30GB로 설정해주었다. 스토리지 설정까지 마쳤다면 ! 탄력적 IP ec2는 재부팅 시 IP가 재할당되어 매번 바뀌게 된다. 고정된 IP를 설정하기 위해 탄력적 IP 설정을 해주어야 한다. 스크린샷 2023-08-17 오전 11.41.37.png 좌측 메뉴에 메뉴로 들어가준다. 스크린샷 2023…