Rego의 블로그

어느새 우테코 레벨4가 끝나갑니다. 데모데이마다 포스팅을 하겠다는 호기로움은 어디로 가고 임시저장된 글만 잔뜩 쌓였어요.😭 프론트엔드 개발자로서 참여 중인 스탬프크러쉬💮👊는 개인 카페의 쿠폰을 한 군데에서 관리하는 서비스예요. 그래서 저희는 고객으로 일반 인터넷 사용자가 아닌 실제 카페가 필요했답니다. 얼마나 막막하던지.. 개발자들만 쓰고 버려지는 그런 서비스가 되지 않을까하는 걱정이 참 많았는데요. 기획자 라잇의 대활약으로 실제 사용해주실 카페 사장님을 섭외했고, 9/25에 직접 카페에 방문하여 사장님께 저희 서비스를 보여드리고 설명드리는 시간을 가졌습니다. 걱정했던 것과는 달리 사장님과 점장님의 반응이 상당히 호의적이셔서 한시름 놓았더랬죠🫠 10/6일부터 실제로 카페에서 서비스를 사용해주고 계십니다😭..

대망의 배포 자동화에 대해 포스팅할 시간이네요. 이전의 포스팅들이 사실상 어떠한 자세한 설명없이 실행방법만을 기록하거나, 간단히 경험만을 가볍게 풀어낸 것이었다면, 이번 포스팅에서는 현재의 배포 형태를 자세히 뜯어보려고 해요. 프로젝트 6주차까지는 배포를 해주기 위해서는 결국 쉘 스크립트를 실행해주어야하는 수동 배포 형태를 띄고 있었죠? 하지만 개발자로서 수동이라는 단어를 용납할 수 없지 않겠어요? 결코 CI/CD가 프로젝트 요구사항이기 때문은 아니라는 점 알아주세요😅 그래서 저와 라잇이 기능 구현과 UI/UX에 집중하는 동안 윤생이 CD를 위해 아주 애를 써주었고, 그 과정을 옆에서 지켜본 제가 문서화를 해보기로 했습니다. 4. 자동화 2차 데모데이 이후 백엔드 크루들이 도커에 젠킨스를 설치, 배포 자..

지난 포스팅에 이어 저희 스탬프크러쉬 팀 프론트엔드 배포 과정을 이어나가보고자 합니다. 이 글은 팀 프로젝트 진행 중 경험하며 기록한 것을 다수 참고한 글입니다. Thanks to 윤생, 제나, 깃짱👍 2차 데모데이 전후로 저희 팀의 배포 형태는 이전과는 다른 형태를 띄게 되는데요. NGINX의 도입이 바로 그것입니다. 3. NGINX 백엔드 크루들이 NGINX를 도입했는데요. 이전의 스탬프 크러쉬 팀에서는 하나의 개발 서버에서 프론트엔드와 백엔드 애플리케이션을 각자 다른 포트에서 함께 배포해야 했는데요. 하지만 최초에는 외부에서 접근할 수 있는 포트는 80으로 단 하나였기 때문에 포트 포워딩이 필요했습니다. 따라서 요청이 들어왔을 때, prefix로 /api가 붙어있는 요청이라면 백엔드(8080 포트)..

시작하며 지난 6월부터 우테코 레벨3에 들어서면서 프론트-백이 협업하여 진행하는 온전한 프로젝트를 경험하고 있습니다. 레벨3 이전의 저는 기껏해야 GitHub Pages 배포 혹은 Vercel처럼 서버가 제공되는 서비스를 통한 배포만 가능한 상태였습니다. 현재 백엔드와의 협업을 통해 온전히 바닥부터 프로젝트를 만드는 소중한 경험을 하고 있는데요. 단순히 프론트엔드 코드를 작성하는 것에 그치지 않고, 배포와 기획 등 이전에는 몰랐던 것들에 대한 경험을 쌓고 있습니다. 이 소중한 경험들을 기록하기로 다짐했습니다. 언제나처럼 이 글은 정보를 전달하기보다 그저 제 경험을 기록하기 위함임을 밝히며, 사실과 다르거나 틀린 내용이 있으면 지적해주시면 감사하겠습니다. 스탬프크러쉬 팀 배포의 역사 우선, 저희 팀에 EC..

레벨2 두번째 미션 페이먼츠(2-4주차) 늦은 감이 있지만 두 번째 미션에 대한 회고글을 작성해 볼까 합니다. 두 번째 미션을 진행하며 발표 준비 및 발표를 병행해야 했습니다. 싱글스레드인 뇌를 가진 제게는 너무나 벅찬 일이었습니다😇 발표는 준비한 대로 진행하지 못해 아쉬웠고, 발표가 끝나고 나서야 미션을 진행할 수 있었습니다. 시간에 쫓겨 진행한 결과는 아주 참담.. 발표를 마치고 잔뜩 느슨해져 있던 저는 리뷰로 호되게 혼이 났습니다.😭 정신이 차리고 이후 미션에 최선을 다해 임했습니다.. 결국 소홀했던 부분을 다 메울 순 없었지만요🥲 페이먼츠 regularpark.github.io CDD(Component-Driven Development) 기존에 습관이 되어있던 탑다운 개발 방식을 버리고, 바텀-..

레벨 2 첫 미션 - 다시, 점심 뭐 먹지 방학이 끝나고 레벨 2가 시작됐습니다. 레벨 1에서 진행했던 점심 뭐 먹지 미션을 리액트로 옮기는 미션이었는데요. 만만히 보고 달려들었다가 클래스형 컴포넌트를 마주하게 됐습니다. 제가 알고 있던 그 리액트(함수형 컴포넌트)가 아니었던지라 구현에 생각보다 애를 먹었습니다. 클래스형 → 함수형 변환 2단계 미션은 클래스형 컴포넌트에서 함수형 컴포넌트로 변환하는 것이었는데요. 저는 함수형 컴포넌트가 리액트에 도입된 이후에 리액트에 대해 학습했기 때문에 오히려 클래스형 컴포넌트를 사용하여 코드를 작성하는 것이 더 어려웠다는 점… this 바인딩 처리, 훅을 사용할 수 없는 점 등 구현에 있어 까다로운 부분이 있었기 때문에 함수형 컴포넌트로 변환하는 2단계 미션을 기다렸..