Rego의 블로그

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

프로젝트를 진행하던 중 특정 배열의 길이가 0보다 크면(>0) 동작하는 조건문을 작성했습니다. 아래의 코드와 유사한 조건문이었는데요. if (arr.length > 0) { // do something.. } 이 조건문에 대한 피드백이 있었습니다. 타입 검사와 런타임에서 발생하는 오류를 확인하는 상표 기법이라는 것이 있다! 피드백을 받고 상표 기법에 대해 학습할 내용이 이펙티브 타입스크립트에 있다고 하기에 학습을 진행했습니다. 상표 기법 예시 추가 예정 위의 예시를 보고는 객체에서만 쓰일 수 있는거 아닌가? 했었는데요. 그 중 저희 프로젝트에서 사용할 만하다고 판단한 예시가 있었습니다. 해당 예시 type AbsolutePath = string & {_brand: 'abs'}; const isAbsolu..

미션 진행 중 갑자기 예전에 마주했던 오류와 마주하게 됐습니다. 이 오류가 발생하는 이유는 리액트 17버전 이하일 때 React를 import해오지 않기 때문인데요. 그러나! 저는 리액트 18버전임에도 이 오류와 맞닥뜨리게 되었습니다. 전에도 만난 기억이 있기 때문에 이참에 정리를 한번 해두는 것도 나쁘지 않다 생각해 여러 가지 해결방법을 기록해두겠습니다. 1. 오류에 순응하고 React를 import해오는 방법 import React from 'react' 2. tsconfig.json의 옵션을 수정하는 방법 a. jsx 옵션 설정 "complierOptions": { // ... "jsx": "react-jsx", // ... } b. 경로 문제 "include": [ /** 오류가 발생하는 파일의 ..

프로토타입(Prototype) 객체 자바스크립트는 프로토타입 기반 객체 지향 프로그래밍 언어입니다. ES6 이전의 자바스크립트(클래스가 추가되기 전의 자바스크립트)에서는 클래스 없이도 객체를 생성할 수 있습니다. 클래스 없이 객체를 생성하는 법 var person = { name: 'Park', age: 3, walk: function () { console.log('one step foward'); } }; console.log(typeof person); // object console.log(person); // {name: 'Park', age: 3} 자바스크립트의 모든 객체는 자신의 부모 역할을 담당하는 객체와 연결되어 있는데요. 다른 객체 지향 언어에서의 상속처럼 부모 객체의 프로퍼티와 메소드..

대망의 배포 자동화에 대해 포스팅할 시간이네요. 이전의 포스팅들이 사실상 어떠한 자세한 설명없이 실행방법만을 기록하거나, 간단히 경험만을 가볍게 풀어낸 것이었다면, 이번 포스팅에서는 현재의 배포 형태를 자세히 뜯어보려고 해요. 프로젝트 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..

우테코 레벨3가 시작된 지도 벌써 6주차에 접어들건만, 이제야 2주차에 했던 웹팩 빌드에 대한 글을 쓰네요. 프로젝트 빌드라고는 CRA로밖에 못했던 저이기 때문에 웹팩으로 프로젝트 빌드를 해야 하다는 청천벽력 같은 소리를 듣고 호다닥 공부를 해야만 했습니다. 주저리 주저리 떠들어댔지만, 결국 이 글을 쓰는 목적은 순전히 제가 다시 보기 위함이기 때문에, 웹팩 빌드에 대한 뭔가 프로페셔널하고 딥한 글을 원하셨던 분은 귀중한 시간을 다른 곳에 쓰셨으면 좋겠네요😄 저희 조는 패키지 매니저로 yarn을 선택했는데요. NPM이 패키지를 순차적으로 설치하는 동안 yarn은 병렬 설치를 수행하여 더 나은 속도와 성능을 제공한다고 합니다. https://www.knowledgehut.com/blog/web-develo..

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

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