TECH

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

프론트엔드 개발을 하면서 백엔드 API를 연동하는 개발을 해본 사람이라면, 아마도 API 개발이 늦어져서 API 연동 작업이 지연되는 경험이 있을 거라고 생각합니다. API 개발이 지연되는 만큼 전체 과제 기간도 지연되면 참 좋겠지만, 현실적으로 과제 기간 지연은 쉽지 않고 나도 최대한 빠르게 개발을 완료해서 멋있는 개발자가 되고 싶습니다. API 개발이 늦어질 때는 보통 API로 받아오는 응답을 Mocking해서 최대한 프론트..

2022.05.11

TECH

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

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

2022.01.12

TECH

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

최근에 MUI(Material-UI)에서 제공하는 Tooltip 컴포넌트의 스타일을 커스텀해야하는 일이 있었는데요. 다른 컴포넌트와는 조금 다른 방식으로 다뤄줘야해서 조금 애먹었고, 다시 애먹지 않기 위해서 정리해봅니다. 먼저, 저의 개발환경은 아래와 같았습니다. - create-react-app 기반의 React 프로젝트 - MUI v5 - @emotion/react 사용 일반적인 컴포넌트라면 아래와 같이 스타일 객체를 바로 컴포넌트에 적용해서 스타일을 커..

2021.11.10

TECH

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

Error Handling에 대한 고민 시작 웹서비스를 유지보수하면서 버그를 수정하거나 일부 기능을 개선하고 새로운 기능을 개발하면서 점점 Error를 처리하는게 고민거리가 되어가고 있습니다. 지금 유지보수 하고 있는 프로젝트는 Error 상황에 대해서 깊게 고민하지 않고 만들어져 있는데 그 결과 아래와 같은 문제점이 있어서 유지보수 할 수록 마음의 짐을 쌓는 기분이 들었습니다. Network Error를 처리하려고 할 때, 어디서 어..

2021.10.13

TECH

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 Ac..

2021.09.08

TECH

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

최근에 참여하는 프로젝트에서 과제 관리를 Jira에서 하기로 하였고, Epic-Story-Task 3가지 이슈 타입을 주요하게 사용하기로 하였습니다. Epic 이슈 하위에 User Story 단위로 Story 이슈를 만들기로 하였고, Story의 목표를 달성하기 위한 실무 작업들을 Task 이슈로 다루기로 하였습니다. 이에 따라서 효과적으로 Task의 진행상황을 보기 위해서 보드에서 Story 이슈 단위로 스웜레인을 구성하여 Story 이슈별 Task 상태를..

2021.07.14

TECH

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의 웹사이트 엔드포인트를 직접 입..

2021.06.23

TECH

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

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

2021.05.12

TECH

정규표현식(Regular Expression, regex)

주어진 문자열에서 특정 규칙을 만족하는 모든 문자열을 찾아야하는 경우에는 자연스럽게 정규표현식을 떠올리게 됩니다. 그런데, 생각보다 정규표현식의 규칙을 매번 헷갈려해서 결국 원하는 표현식을 검색하게 되는데요. 이제 제대로 익혀 놓기 위해서 정리해봅니다. 정규표현식의 구성 정규표현식은 크게 3가지 요소로 구성됩니다. 정규표현식이라고 표현하는 슬래시(/) 찾아낼 패턴 찾을 때 옵션을 줄 수 있는 flag 이 3개..

2021.04.14

TECH

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

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

2020.04.17

TECH

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

이번 포스팅에서는 AWS의 Amplify Console 서비스에 대해서 정리해보려 합니다. Amplify는 사실 3가지로 나눠집니다. (1) Amplify 라이브러리: 클라우드 기능을 편리하게 사용할 수 있는 Javascript 라이브러리 (2) Amplify CLI: CLI 환경에서 클라우드 서비스를 생성, 관리 할 수 있는 tool (3) Amplify Console: 정적 웹 호스팅을 위한 서버리스 지속적 배포 서비스 이 중에서 최근에 저는 Amplify Console에 대해서 알아보고..

2020.04.17

TECH

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

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

2020.04.16

TECH

Prototype에 대해서 알아봅니다.

Prototype(또는 Prototype Object) 이란? 자바스크립트에서 함수를 만들면 함께 생성되는 객체가 Prototype(또는 Prototype Object)입니다. 그리고 해당 함수의 'prototype'이라는 속성으로 Prototype Object와 연결됩니다. 개인적인 생각으로는 Java에서, class 내부의 static member와 유사하다고 생각합니다. Prototype의 목적 Prototype Object는 생성자 함수에 의해 생성된 각각의 객체에 공유 프로퍼티를 제공하기 위해 사..

2020.04.16

TECH

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

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

2020.04.16

TECH

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..

2020.04.16

TECH

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

지난 몇년 동안 개발자로서 공부한 내용들을 구글 블로거에 정리해서 포스팅했습니다. 사실, 광고 수익을 노려보고자 블로거를 선택했었는데 제 수준으로는 너무 미미한 수익이더군요,,하핫,,, 이런 미미한 수익때문에 불편한 에디터와 맘에 안 드는 스킨을 참고 있을 순 없었습니다. 그래서 결국! 블로그를 이전하기로 했습니다! 그동안 작은 블로그를 알아봐주시고 관심가져주신 많은 분들께는 감사하고 그 관심을 계속 이어가..

2020.04.16