Amplify Console의 Preview URL을 Custom Domain으로 사용하는 방법

Amplify Console을 통해서 웹 어플리케이션의 Hosting을 한지 어언 2년 반이 지났습니다. 아주 만족하면서 사용하고 있는데, 그 중에서 Amplify의 가장 큰 장점을 말해보라고하면 저는 Preview 기능을 선택할 것입니다. Preview 기능은 PR 단위로 환경을 만들어주기 때문에, 여러 작업을 동시에 진행하여 PR을 각각 올렸을 때 모든 작업을 분리된 환경에서 개별적으로 테스트 할 수 있게 합니다. 처음 Amplify Console을 도입할 때 제 상황이 딱 여러 작업의 테스트를 동시에 하면 좋은 상황이었기에 너무 만족스럽게 Preview 기능을 활용하고 있었습니다. 그런데, Preview 기능으로 만들어진 환경은 기본적으로 amplify 도메인으로 호스팅 됩니다. Preview는 보..

2022.10.25

Amplify Console에서 환경(브랜치) 제거를 막자

저는 Amplify Console에서 웹 호스팅을 하고 있고, 약 2년 동안 대체로 아주 만족하면서 사용하고 있습니다. Amplify Console에서 웹 호스팅을 하는 방법은 아래 링크에서 볼 수 있습니다. https://walkinpcm.tistory.com/11 그런데, 2년이나 사용하면서 간과하고 있던 것이 하나 있습니다. 그건 바로 '권한'입니다. 구체적으로는 Production Branch를 삭제하지 못하게 하는 권한입니다. Amplify Console에서는 Git의 Branch 연결만으로 손 쉽게 배포환경이 만들어지고, Branch의 연결 해제만으로 손 쉽게 배포환경이 제거됩니다. 여기서 '손 쉽게 배포환경이 제거'되는 것은 큰 위험요인입니다. 사람은 언제든지 실수를 할 수 있기 때문에 언제..

2022.10.25

MSW를 이용해서 쉽고 깔끔하게 API Mocking 하자

프론트엔드 개발을 하면서 백엔드 API를 연동하는 개발을 해본 사람이라면, 아마도 API 개발이 늦어져서 API 연동 작업이 지연되는 경험이 있을 거라고 생각합니다. API 개발이 지연되는 만큼 전체 과제 기간도 지연되면 참 좋겠지만, 현실적으로 과제 기간 지연은 쉽지 않고 나도 최대한 빠르게 개발을 완료해서 멋있는 개발자가 되고 싶습니다. API 개발이 늦어질 때는 보통 API로 받아오는 응답을 Mocking해서 최대한 프론트엔드에서 먼저 개발을 해두고 API가 개발된 이후에 Mocking 코드를 제거하고 실제 API로 실행시켜 보면서 코드를 다듬습니다. 저는 처음에는 API를 연동하는 코드와 같은 파일에 Mocking 데이터들을 하드코딩하고 실제 API 연동 코드는 주석 처리해서 사용했습니다. 그런데..

2022.05.11

MUI의 Datepicker에 사용하는 Input을 커스텀 해보자

최근에 MUI(Material-UI)의 Datepicker를 Input만 스타일을 수정해서 사용하는 경우가 있었습니다. MUI의 Datepicker는 기본적으로 아래와 같은 Input 스타일을 가지고 있습니다. 저는 여기에 우리 팀이 커스텀해둔 TextField를 사용하고, 캘린더 아이콘을 사용하고 싶었습니다. Datepicker 컴포넌트는 당연하게도 Input에 사용할 컴포넌트를 바꿀 수 있는 방법을 제공합니다. Datepicker의 prop중에 renderInput prop을 이용하면 됩니다. renderInput prop에 Input으로 사용할 컴포넌트를 return하는 함수를 넣어줍니다. (함수의 매개변수는 공식문서를 참고하시면 좋습니다.) 저는 TextField를 return 하게 넣어줬습니다...

2022.01.12

emotion을 이용해서 MUI(Material-UI)의 Tooltip 컴포넌트에 커스텀 스타일 적용하는 방법

최근에 MUI(Material-UI)에서 제공하는 Tooltip 컴포넌트의 스타일을 커스텀해야하는 일이 있었는데요. 다른 컴포넌트와는 조금 다른 방식으로 다뤄줘야해서 조금 애먹었고, 다시 애먹지 않기 위해서 정리해봅니다. 먼저, 저의 개발환경은 아래와 같았습니다. - create-react-app 기반의 React 프로젝트 - MUI v5 - @emotion/react 사용 일반적인 컴포넌트라면 아래와 같이 스타일 객체를 바로 컴포넌트에 적용해서 스타일을 커스텀할 수 있습니다. 아래 예시는 Box 컴포넌트의 백그라운드 색상을 흰색으로 설정하는 것입니다. import { css } from '@emotion/react'; import { Box as MuiBox } from '@mui/material'; ..

2021.11.10

Error Handling(에러 핸들링) - (1) 고민 풀어보기

Error Handling에 대한 고민 시작 웹서비스를 유지보수하면서 버그를 수정하거나 일부 기능을 개선하고 새로운 기능을 개발하면서 점점 Error를 처리하는게 고민거리가 되어가고 있습니다. 지금 유지보수 하고 있는 프로젝트는 Error 상황에 대해서 깊게 고민하지 않고 만들어져 있는데 그 결과 아래와 같은 문제점이 있어서 유지보수 할 수록 마음의 짐을 쌓는 기분이 들었습니다. Network Error를 처리하려고 할 때, 어디서 어떻게 할지 매번 고민합니다. Error 처리에 대한 기준이나 원칙 등이 명시된 문서가 없어서 개발자가 바뀌어 버리니깐 프로젝트의 개발 체계가 없어졌습니다. Error 발생시 노출하는 Alert의 스타일이 통일되어 있지 않습니다. 여기저기서 사용하는 Alert의 스타일이 달라..

2021.10.13

AWS S3에 파일을 업로드 하기 위한 Pre-signed URL과 Pre-signed POST

요즘은 흔히 파일서버로 AWS S3를 이용합니다. 그래서 파일 업로드 기능을 만들때 S3에 어떻게 파일을 업로드 할지 고민하게 되는데요. Front-end 입장에서는 S3에 파일을 업로드 하는 방법으로 크게 2가지를 생각할 수 있습니다. - Front-end에서 AWS SDK를 이용해서 직접 업로드 - API 서버에 파일을 전달하고 API 서버에서 S3에 업로드 첫번째 방법은 AWS SDK를 써서 S3이용이 가능해야하기 때문에 Front-end 코드에서 AWS Access Key와 Secret Key를 알고 있어야합니다. 코드에 하드코딩 하지 않더라도 브라우저에서 AWS SDK를 이용하는 시점에는 결국 자바스크립트에서 Key 정보를 가지고 있어야합니다. 즉, Front-end에서 AWS SDK를 이용하는..

2021.09.08

Jira 보드에 Story 이슈 기준으로 스웜레인 만드는 방법

최근에 참여하는 프로젝트에서 과제 관리를 Jira에서 하기로 하였고, Epic-Story-Task 3가지 이슈 타입을 주요하게 사용하기로 하였습니다. Epic 이슈 하위에 User Story 단위로 Story 이슈를 만들기로 하였고, Story의 목표를 달성하기 위한 실무 작업들을 Task 이슈로 다루기로 하였습니다. 이에 따라서 효과적으로 Task의 진행상황을 보기 위해서 보드에서 Story 이슈 단위로 스웜레인을 구성하여 Story 이슈별 Task 상태를 확인하고 싶었습니다. 그런데, 이 목적을 달성하는데 2가지 문제가 있었습니다. (1) Story 이슈에는 Epic 이슈처럼 자식 이슈를 연결 할 수 없다. (2) 스웜레인 기준에 기본적으로 Story 이슈가 없다. 이 두 가지 문제는 다행히 해결할 ..

2021.07.14

AWS CloudFront의 Origin으로 S3를 사용할 때, REST API 엔드포인트를 입력하는 것과 웹사이트 엔드포인트를 입력하는 것의 차이

AWS S3와 CloudFront를 이용해서 정적 웹사이트를 호스팅하는 구성은 이제 무척 보편화 되었다고 생각합니다. 저도 Vue.js나 React.js 기반의 CSR(Client-side Rendering) 프로젝트를 배포하는 경우에 S3, CloudFront 조합을 많이 사용합니다. (최근에는 Amplify Console을 더 사용하고 있긴 합니다 ㅎㅎㅎ) 처음에는 S3의 웹호스팅 기능을 활성화하고 CloudFront 배포를 생성할 때 Origin에 S3의 웹사이트 엔드포인트를 직접 입력하였습니다. 그런데, 나중에는 CloudFront의 Origin에 S3의 Rest API 엔드포인트를 넣고 OAI(Origin Access Identity)를 이용해서 S3에 CloudFront만 접근가능하도록 제한할..

2021.06.23

AWS Amplify Console에서 monorepo를 연결해서 사용할 때의 주의사항

예전에 AWS Amplify Console을 이용해서 Frontend 프로젝트를 웹호스팅 하는 방법을 정리한 적이 있습니다. (링크: walkinpcm.tistory.com/11) 비교적 최근에는 Amplify Console에서 Git Repository를 연결할 때 monorepo 임을 선택할 수 있는 설정이 생겼습니다. 저도 최근에 monorepo라고 설정하여 Amplify Console을 사용해 봤는데, 몇가지 인지해야하는 주의사항이 발견되어서 정리해봅니다. (1) 스크립트의 실행 위치는 package directory 입니다. Amplify Console에 monorepo의 git repo 자체를 연결하기 때문에 빌드를 실행할 때의 directory 위치가 repo의 root directory라고..

2021.05.12

정규표현식(Regular Expression, regex)

주어진 문자열에서 특정 규칙을 만족하는 모든 문자열을 찾아야하는 경우에는 자연스럽게 정규표현식을 떠올리게 됩니다. 그런데, 생각보다 정규표현식의 규칙을 매번 헷갈려해서 결국 원하는 표현식을 검색하게 되는데요. 이제 제대로 익혀 놓기 위해서 정리해봅니다. 정규표현식의 구성 정규표현식은 크게 3가지 요소로 구성됩니다. 정규표현식이라고 표현하는 슬래시(/) 찾아낼 패턴 찾을 때 옵션을 줄 수 있는 flag 이 3개 중에서 가장 중요한 부분은 패턴입니다. 패턴을 얼마나 잘 다루냐에 따라서 얼마나 알맞은 문자열을 잘 찾아내느냐를 결정합니다. 정규표현식의 패턴 패턴은 아래와 같이 크게 4가지 분류로 나눌 수 있습니다. (모든 문법이 작성되어 있는 것은 아닙니다.) Group and ranges 문법 의미 상세 설명..

2021.04.14

AWS CloudFront에서만 S3 Bucket에서 파일을 가져갈 수 있도록 Bucket policy 작성하기

AWS S3를 Origin으로 사용하는 CloudFront 배포를 만드는 경우가 있습니다. 예를 들면, S3에 저장된 파일들을 CDN으로 배포하려는 경우와 S3에서 정적 웹호스팅 기능을 사용하면서 SSL을 적용하기 위해서 CloudFront를 이용하는 경우가 있습니다. 위의 두 경우 모두 S3 Bucket에 저장한 파일을 Public Internet에 제공하기 위한 것이기 때문에, S3 Bucket의 정책을 퍼블릭하게 설정하게 됩니다. 하지만 CloudFront를 이용해서 S3 Bucket의 파일들을 Public Internet에 공개한다면 Bucket의 정책을 퍼블릭하게 설정하지 않고, CloudFront 배포에서만 접근하도록 설정하면 됩니다. 방법은 아주 간단합니다. S3 Bucket 정책의 Pric..

2020.04.17

AWS Amplify Console을 이용한 프론트엔드 배포자동화 시스템 구축하기

이번 포스팅에서는 AWS의 Amplify Console 서비스에 대해서 정리해보려 합니다. Amplify는 사실 3가지로 나눠집니다. (1) Amplify 라이브러리: 클라우드 기능을 편리하게 사용할 수 있는 Javascript 라이브러리 (2) Amplify CLI: CLI 환경에서 클라우드 서비스를 생성, 관리 할 수 있는 tool (3) Amplify Console: 정적 웹 호스팅을 위한 서버리스 지속적 배포 서비스 이 중에서 최근에 저는 Amplify Console에 대해서 알아보고 매력을 느껴서 블로그로 정리해두려합니다. Amplify Console이란? AWS Amplify Console에서는 Git 기반 워크플로를 통해 풀 스택 서버리스 웹 애플리케이션을 배포 및 호스팅합니다. 풀 스택 서..

2020.04.17

AWS CodeBuild를 이용해서 프로젝트 빌드하기

AWS CodeBuild 란? AWS CodeBuild는 소스 코드를 컴파일하고 테스트를 실행하며 배포 준비가 완료된 소프트웨어 패키지를 생성하는 완전 관리형 지속 통합 서비스입니다. ㅡ 'AWS CodeBuild 웹사이트' 내용 중, 설명에서도 알 수 있듯이 CodeBuild는 CD(Continuous Deployment, 지속적 통합)에 사용되는 서비스입니다. 일반적으로, 빌드를 로컬에서 수행하고 직접 서버에 배포할 수 있습니다. 하지만 이런 시간을 단축하기 위해서 단순히 프로젝트를 git에 push하는 것만으로 자동으로 빌드를 수행하도록 CodeBuild와 같은 Tool을 이용합니다. CodeBuild 요금은 실제로 빌드한 시간 만큼만 지불하면 됩니다. CodeBuild 작동 개요 CodeBuild..

2020.04.16

Prototype에 대해서 알아봅니다.

Prototype(또는 Prototype Object) 이란? 자바스크립트에서 함수를 만들면 함께 생성되는 객체가 Prototype(또는 Prototype Object)입니다. 그리고 해당 함수의 'prototype'이라는 속성으로 Prototype Object와 연결됩니다. 개인적인 생각으로는 Java에서, class 내부의 static member와 유사하다고 생각합니다. Prototype의 목적 Prototype Object는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사용합니다. 간단한 예시를 들면 아래와 같습니다. function Car () {} Car.prototype.wheel = 4; Car.prototype.sideMirror = 2; let ..

2020.04.16

일반함수와 화살표 함수(arrow function)의 차이

일반함수와 화살표 함수(arrow function)의 차이에 대해서 알아봅니다. ES6 이전에는 함수를 선언하기 위해서 함수선언식, 함수표현식 방식을 사용했습니다. ES6에서는 새로운 함수 선언 방식으로 화살표 함수가 등장했습니다. 기존의 일반함수들은 function 키워드를 이용해서 함수를 선언하지만, 화살표 함수는 이름처럼 화살표 키워드를 이용합니다. // 함수표현식 let function1 = function () { console.log('함수표현식'); } // 함수선언식 function function2 () { console.log('함수선언식'); } // 화살표 함수 let function3 = () => { console.log('화살표 함수'..

2020.04.16

var, let, const에 대해서 알아봅니다

var, let, const는 javascript에서 변수를 선언할 때 사용하는 키워드입니다. var ES6 이전에는 변수를 선언할 때 var 키워드를 사용했습니다. 우선, var 키워드는 아래와 같은 특징을 가지고 있습니다. 변수의 중복 선언이 가능하다. var 키워드는 생략이 가능하다. block-scope이 아닌 function-scope이다. 호이스팅(hoisting) 당한다. /* * function-scope과 block-scope의 차이 */ // function-scope for (var i = 0; i < 10; i++) { console.log(i); } console.log('outside i: ', i); // 출력: outside i: 10 // i를 var로 선언 ..

2020.04.16

새로운 블로그를 개설했습니다!

지난 몇년 동안 개발자로서 공부한 내용들을 구글 블로거에 정리해서 포스팅했습니다. 사실, 광고 수익을 노려보고자 블로거를 선택했었는데 제 수준으로는 너무 미미한 수익이더군요,,하핫,,, 이런 미미한 수익때문에 불편한 에디터와 맘에 안 드는 스킨을 참고 있을 순 없었습니다. 그래서 결국! 블로그를 이전하기로 했습니다! 그동안 작은 블로그를 알아봐주시고 관심가져주신 많은 분들께는 감사하고 그 관심을 계속 이어가고 싶지만, 앞으로 더 좋은 블로그를 만들어가기 위해서는 이전이 꼭 필요할 것 같아요! 앞으로 이곳에서 다시한번 열심히 공부해보려합니다! 작은 블로그지만 개발자 생태계의 선순환에 기여할 수 있기를 바래봅니다~! 예전 블로그: walkinpcm.blogspot.com

2020.04.16