한 개발자의 노트패드

vercel로 배포를 하다보면, 예기치 못하게 이전 커밋으로 롤백 시켜야할 때가 있습니다.여기서 instant rollback과 redeploy을 통해 롤백을 할 수 있는데 둘의 차이점은 뭐가 있을까요? instant rollback이전 배포 버전으로 빠르게 되돌릴 수 있습니다hobby버전은 직전의 커밋만 가능하고, pro부터는 전부 가능합니다서버 설정이나 코드 변경 없이 곧바로 돌아갑니다. redeploy이전 배포 버전을 다시 빌드하고 배포합니다.전체 빌드 및 배포 과정을 새로 거칩니다.보통 코드나 설정을 수정한 후에 사용합니다. ex) env 변경hobby, pro 상관없이 모두 가능합니다빌드를 다시 하기 때문에 시간이 걸립니다개인적으로 instant rollback에 대한 정보가 부족해 redepl..

오랜만입니다. 최근 글을 쓸 시간이 없어서, 글을 잘 못썼습니다. 각설하고, 오늘은 최근 css에서 자주 사용되고 있는 가상 선택자인 where, has, not이라는 3가지의 선택자에 대해 알아보겠습니다. where()where()은 인자로 여러 개의 선택자를 쉼표(,)로 구분하여 넘길 수 있게 합니다.예를 들자면.:where(a1, a2, a3) { color : black;}위와 같은 where()을  풀어 해치면a1,a2,a3{ color:black;}이런식으로 우리가 보았던 익숙한 css를 볼 수가 있죠.겉으로 보기엔 힘들게 이런 걸 사용하나 쉽지만, 생각보다 이점이 많습니다. See the Pen Untitled by 이규한 (@chmqedde) on CodePen.    반복문 처럼 사용 ..

이번에는 지난 번 적었던 글에 이음으로 console 메서드를 사용하는 방법에 대해 마저 알아보겠습니다. 지난번에는 table까지 대해서 알아보았는데요. 오늘은 다른 기능들에 대해서 알아보도록 하겠습니다. time(),timeEnd() 코드 수행 시간을 확인할 때 유용합니다. time과 time에 같은 이름을 주어야 정상적으로 작동하며, 보통 어떤 작업에서 얼만큼의 시간이 소요되는지 기록할 때 사용하는 메서드입니다. 당연하지만 이 시간 측정이 절대적이진 않습니다. 시간은 변동될 수 있으며, 절대적인 사양은 아니기에 이 시간이 표준이 되기는 어렵습니다. 코드의 효용성을 위해서 사용하는 것을 추천합니다. mdn에서는 https://developer.mozilla.org/en-US/docs/Web/API/Pe..

오랜만이다. 최근에 글을 안 썼는데, 이유는 그냥 너무 바빠서 안 썼습니다. 오늘은 github actions을 통한 릴리즈 관리와 auto tagging에 대해서 알아보도록 하겠습니다. 사실 처음 목적은 릴리즈 라기 보단 auto tagging에 중점을 뒀었습니다. 지금 운영하고 있는 애플리케이션의 버전 관리가 제대로 되어 있지 않았는데, 개발팀에선 이를 tag를 통해 해결하려고 했습니다. tag는 수동으로 처리하는 방법과 자동으로 처리하는 방법이 있습니다. 수동으로 처리하는 방식도 고려해봤지만, 굳이 할 이유가 없었기에 평소에 사용중이던 github action을 이용해서 워크플로우를 통해 자동으로 버전의 태그를 관리하는 방식으로 처리하기로 결심했습니다. 저희 회사는 매주 목요일마다 정기적으로 운영에..

최근 프로젝트에서 Date에 관련된 예기치 못한 에러들 때문에, 꽤나 골머리를 앓았습니다. 그러다 이번에 조금 정리도 할 겸 해서 블로그 글에다가 올려봅니다. 저희는 현재 타입스크립트를 사용하고 있고, 기본적으로 시간괴 관련된 계산을 할 때엔 Date 타입을 사용합니다. 하지만 과거 저의 무지(aka 공부를 안한)로 인해 Date를 String으로 계산하고 있었는데요. 그러다 보니 백엔드와 프론트엔드에서 시간을 맞출때에 꽤나 큰 난항이 있었습니다. 가령 프론트에서 '2023-10-15 15:30:00' 이런식으로 보내게 된다면, 백엔드에서는 저 string을 그대로 받아서 서버에 저장하고 있었습니다. 말이 안되죠? 이상적이라면 프론트에서도 시간과 관련된 데이터는 Date 타입으로 보내야만 하고, 백엔드에..

브랜치 전략? 여러 개발자가 1개의 저장소를 사용하는 환경에서 효과적으로 활용하기 위해 나온 개념. 브랜치 생성, 병합등의 git 구조를 활용해 효율적으로 소스를 관리하고, 협업을 진행할 수 있다. git flow 2010년에에 Vincent Driessen란 사람이 블로그에 올린 글로 인해 널리 퍼지기 시작한 방법. 총 5개의 브런치로 구성하고 있으며 master와 develop 브랜치가 중심이 된다. 두 개를 이용하여 릴리즈와 운영환경에 배포할 수 있는 환경을 갖추는 게 핵심. master라는 mainline을 중심으로 가지가 뻗어져 나간다. master : 운영환경에 배포하는 용도로 쓰기 위한 브랜치. develop : 개발용 브랜치로, 단위 개발을 위한 feature브랜치가 여기서 뻗어져 나오며,..

프론트엔드 생태계가 발달하면서 개발 시스템에도 많은 변화가 찾아왔습니다. 앱의 규모가 커질수록 많은 것들이 필요했고, 이것들을 제어하기 위한 방법이 필요했습니다. 이에 따라 프론트엔드에서는 디자인 시스템이라는 것이 생겨났는데, 요즘 가장 많이 들리는 패턴이 바로 오늘의 주제인 아토믹 디자인입니다. 아토믹 디자인? 아토믹 디자인 하면, 가장 많이 보이게 되는 그림인데요. 이름 그대로 작은 단위로 나누어서 컴포넌트를 관리하는 방법론입니다.더 이상 쪼갤 수 없는 단위 까지 쪼갠 것을 보통 atoms로 분류하고, atoms가 모여서 molecules가 되고, organisms 등등으로 만들어져 결국엔 페이지로 관리하게 됩니다. 버튼, Input 같은 것들을 보통 atoms로 분류하게 됩니다. 이후에 atoms가..

최근 하이브리드 앱 때문인지 네이티브 앱에 웹 페이지를 포팅하는 웹앱 개발이 늘어나고 있습니다. 지금 제가 개발하고 있는 프로젝트 같은 경우에도, 안드로이드는 코틀린, ios는 swift로 작성한 네이티브 환경에 vue3, typescript로 작업한 페이지를 띄어주는 형식으로 작업하고 있죠. 코틀린과 swift는 다른 네이티브 개발자가 개발하고, 저는 웹 페이지의 프론트엔드를 개발하는 방식입니다. 그러다 보니 웹 페이지를 개발하지만, 모바일을 우선으로 개발해야만 합니다. 반응형 디자인은 기본적으로 깔고 가되, 안드로이드와 ios 환경에서의 ux를 항상 고민해야만 한다는 거죠. 가령 안드로이드는 뒤로가기 버튼이 존재하지만, ios는 스와이프를 해야만 뒤로가지기 때문에, 다른 사용자 경험을 보여주어야만 합..

원래 릴리즈시에 아래의 액션을 사용하려 했지만, 제가 생각하는 태그 번호와는 맞지 않아 바꿨습니다. https://github.com/mathieudutour/github-tag-action GitHub - mathieudutour/github-tag-action: A Github Action to automatically bump and tag master, on merge, with the latest SemVer A Github Action to automatically bump and tag master, on merge, with the latest SemVer formatted version. Works on any platform. - GitHub - mathieudutour/github-t..

ECMA 2023에서 총 4가지 제안이 적용되었습니다. 배열에 대한 제안, 해시뱅, Weakmap으로 여기선 배열에 대한 제안 중심으로 서술해보겠습니다. 마지막 기준 배열 찾기 Array와 TypedArray 프로토타입에 findLast()메서드와 findLastIndex() 메서드가 추가되었습니다. 이름에서 알듯이 배열의 마지막부터 시작해 찾게되는 메서드 입니다. const arr = ['a','b','a','b']; arr.findIndex((ele) => ele === 'a') // 0 arr.findLastIndex((it) => it === 'a') // 2 const arr = [5,12,50,120] arr.find((ele) => ele > 30) // 50 arr.findLast((ele..