YG - 96년생 , 강아지 있음, 개발자 희망

Husky를 이용하여 테스트 자동화 하는 이유 깃 action에서도 테스트 자동화를 할 수 있지만 월 2,000분만 무료로 제공하기 때문에 잦은 PR을 올리거나 테스트 개수가 많아졌을 때 비용이 들 수 있습니다. 그래서 push 혹은 commit 하기 전 로컬에서 테스트가 실패하거나 불필요한 코드가 같이 PR에 올라가는 지 확인하는 것이 좋다고 생각이 들었습니다. GitHub Actions 요금 청구 정보 - GitHub Docs 계정에 포함된 스토리지 또는 시간(분)을 벗어나 GitHub Actions를 사용하면 추가 사용량에 대한 요금이 청구됩니다. docs.github.com 설치 npm install husky --save-dev npm install --save-dev lint-staged hu..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다. Dialog 태그 위로 토스트 보이도록 하기 (feat.TopLayer, createPortal) html dialog 태그로 만든 Drawer에서 에러가 났을 때 토스트가 보이지 않는 상황이 있었습니다. 이유는 dialog는 최상위 계층 (Top layer)으로 열리기 때문인데요. topLayer는 페이지의 다른 모든 콘텐츠 레 velog.io 문제가 되는 상황 html dialog 태그로 만든 Drawer에서 에러가 났을 때 토스트가 보이지 않는 상황이 있었습니다. 이유는 dialog는 최상위 계층 (Top layer)으로 열리기 때문인데요. topLayer는 페이지의 다른 모든 콘텐츠 레이어 위의 존재하는 레이어입니다. 그래서 토스트가 TopLaye..

fetch를 추상화한 기존의 코드 import { ACCESS_TOKEN_KEY } from '@constants/localStorage'; import { getLocalStorage } from './localStorage'; import { silentLogin } from './login/silentLogin'; const headers = { 'Content-Type': 'application/json', }; export const makeFetchHeaders = () => { const accessToken = getLocalStorage(ACCESS_TOKEN_KEY); if (!accessToken) { return headers; } return { ...headers, Authori..

보투게더 팀 블로그에서 작성한 글을 가져왔습니다 사용자가 업로드 한 이미지 압축하여 서버로 보내기 (feat.Browser Image Compression, Upload Images Converter, 이미지 압축 패키지 비교 (23.10.04 기준) Browser Image Compression https://www.npmjs.com/package/browser-image-compression 다운로드 수 : 137,399 번들 사이즈 : 55.51KB 마지 velog.io 이미지 압축 패키지 비교 (23.10.04 기준) 이미지 성능 최적화 사용자가 서버로 보내는 이미지의 용량을 줄여서 서버의 용량도 절약해 주고, 사용자가 이미지를 불러올 때 가볍게 불러올 수 있도록 하려고 했습니다. 그래서 사용자가..

이전 게시글이 선행되면 좋습니다 사이트를 모바일 웹앱으로 실행되도록 하는 방법 (feat.apple-meta-tag) 사이트를 모바일 웹앱으로 실행되도록 하는 방법 1. html의 header에 다음과 같이 넣어주면 됩니다 // 홈 화면에 추가했을 때 보여질 앱의 이름 // 모바일에서 전체화면으로 보이게 할 지 여부 // 상 hell-of-company-builder.tistory.com 프로그레시브 웹 앱(PWA)이란 프로그레시브 웹 앱은 웹 기술을 사용하여 개발된 애플리케이션으로, 사용자가 웹 브라우저에서 접속할 수 있으며 모바일 앱과 비슷한 사용자 경험을 제공합니다. 이러한 웹 앱은 오프라인에서도 작동할 수 있으며, 푸시 알림을 받을 수 있고, 홈 화면에 아이콘을 추가하여 쉽게 접근할 수 있습니다...

잘못된 정보가 있다면 댓글로 알려주세요 .env를 통한 환경변수 사용 Votogether 팀 환경에 경우 AWS EC2로 배포하고 있기 때문에 AWS EC2에서는 .env를 배포 환경으로 생성하고, 개발자들이 사용하는 컴퓨터에서는 .env를 개발환경으로 세팅하면 배포 환경별 API를 바꿔가며 사용할 수 있습니다. 이렇게 사용하는 이유는 개발 환경에서는 MSW를, 실제 배포 환경에서는 서버의 API를 이용하도록 하기 위함입니다. 또한 서버의 앤드 포인트를 외부에 알리면 보안 위험이 있을 수 있습니다. (익명의 사용자가 대량의 요청 시도, 서버의 직접적인 공격) 따라서 dotenv를 통해 환경변수 설정을 해보도록 하겠습니다. 개발 환경 .env VOTOGETHER_BASE_URL=http://localhos..

API를 그대로 사용하면 안 좋은 이유는? 외부 API를 그대로 사용하면 제공해 주는 서비스의 API에 크게 의존하게 됩니다. 예시 1) 기상청으로부터 받아오는 API - date 기상청의 API 중 date를 일반 문자열로 받아 사용하는 코드를 작성했다고 가정해 봅시다. 기상청에서 API 중 date를 year, month, day로 이루어진 객체로 바꾸게 된다면 작성했던 코드 중 date 부분은 전부 수정해야 합니다. 2~3개라면 괜찮지만 그 개수가 많아질수록 코드를 일일이 바꾸는데 시간이 듭니다. 예시 2) API를 받아오는 플랫폼 변경 - 한국 기상청 -> 미국 기상청 API를 제공해 주는 곳을 변경해야 할 때가 있을 텐데요. 이때 한국 기상청과 미국 기상청에서 제공하는 API는 많이 다를 것입니..

function 함수 function func(){ } 화살표 함수 const func2=()=>{} function 함수와 화살표 함수의 차이점 function 함수에서는 prototype이 있고, 화살표 함수에는 없습니다. 따라서 더 가볍게 사용할 수 있고, 본래 함수의 역할이 아닌 생성자로 사용할 수 없습니다. 또한 화살표 함수는 caller와 arguments가 감싸져 있어 getter로 불러와야 한다는 특징이 있습니다. 그리고 화살표 함수는 this를 바인딩하지 않는다는 특징이 있습니다. 원래 함수의 역할로 사용한다고 하면 this를 사용해야 할 필요가 없습니다. this를 사용해야 할 경우에는 class 혹은 객체 메서드 선언 방식을 통해 사용하면 되겠습니다. 따라서 함수를 사용할 때에는 더 ..