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

TECH 2022. 10. 25. 19:03

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

TECH 2022. 10. 25. 19:02

프론트엔드 개발을 하면서 백엔드 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