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

TECH 2022. 5. 11. 21:28

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

TECH 2022. 1. 12. 20:46

최근에 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'; ..

TECH 2021. 11. 10. 22:04

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

TECH 2021. 10. 13. 22:11

요즘은 흔히 파일서버로 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를 이용하는..

TECH 2021. 9. 8. 21:18

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

TECH 2021. 7. 14. 21:32

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만 접근가능하도록 제한할..

TECH 2021. 6. 23. 23:08

예전에 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라고..

TECH 2021. 5. 12. 20:56