한 개발자의 노트패드

브랜치 전략? 여러 개발자가 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..

position : fixed 속성이 깨지는 이슈는 여러가지가 있습니다. 보통 fixed 스타일을 탑에 컴포넌트를 고정시키기 위해 사용하는데, 대게 이 경우 부모 요소에 css가 적응이 안되어 있다거나, z-index가 겹쳐서 스타일이 깨질 수도 있습니다. 물론 위에 두개가 아닌 다른 이유도 많습니다. 오늘은 그 중 부모요소에 transform을 설정해서 깨지는 이슈에 대해 알아보겠습니다. 우선 fixed 속성은 요소의 위치를 뷰포트에 상대적으로 지정합니다. 그 덕분에 페이지의 스크롤을 움직여도, 고정된 위치에 출력이 되는 것이죠. 하지만 부모 요소에 transform 속성을 적용하면 이야기가 달라지게 됩니다. transform이 적용된 컴포넌트는 새로운 뷰포트로 설정이 되는데, 이 때 자식요소의 스타일..

오늘은 github에 있는 내 프로필을 꾸며볼까 합니다. 우선 가장 먼저 자신의 이름을 딴 repository를 만듭시다. 깃허브에는 username.github.io 이름의 repository를 생성하면 github page처럼 블로그로 활용할 수 있는 이스터에그가 있는데 이걸 본격적으로 이용할겁니다. 예를 들어 저 같은 경우 github 닉네임을 weaklion으로 쓰기 때문에 weaklion이라는 repository를 만들면 되겠죠. 저같은 경우 이미 repository를 만들었기 때문에 만들 수 없다고 뜨지만 대부분은 만들 수 있을 겁니다. 여기서 가장 중요한 건 README 입니다. README에 마크다운으로 작성한 것들이 프로필에 그대로 보여지기 때문이죠. 따라서 만들시에 README 파일도 ..

Github actions에 관한 포스팅은 한 적이 있는데 예제가 좀 부족한 거 같아서 임시로 만든 workflow.yaml을 올려봅니다. 저장소에서 사용하기 위해선 루트 폴더에 .github/workflow 폴더를 생성해야만 사용할 수 있습니다. aws s3 에 배포, cloudfront에 무효화까지 하는 과정까지 jobs에 포함되어 있습니다. on: push: branches: - 들어갈 브랜치 라는 브랜치에 push할 시 workflow가 실행 jobs: build-and-deploy: runs-on: ubuntu-latest strategy: matrix: node-version: [16.x] # 사용할 노드 버전 추가 ex)[14, 16] env: AWS_BUCKET_NAME: aws bucke..

onKeyDown, onKeyUp은 키를 누르고 떼는 동작에 반응합니다. 그래서 보통 input에 이벤트를 걸고 사용하게 되는데 한글을 입력하게 되면 함수가 두 번 실행되는 경우가 있습니다. 이 경우는 동아시아문자의(CJK)의 특이성 때문입니다. 한글을 예로 들면 한글은 자음과 모음의 조합으로 한 음절인 조합문자지만, 영어는 한 음절이 하나의 알파벳으로 이루어집니다. 이 말은 우리가 input에 입력시마다 이벤트를 걸었을 때 우리가 키를 누르고 떼는 순간까지의 시간 동안에 이벤트가 발생하고 진행되는데, 그 시간 동안에 음절이 완성되면 다시 이벤트가 호출될 수 있다는거죠. 당연하지만 JS는 영어를 기준으로 작성되었기 때문에 우리는 이걸 따라야만 합니다. 해결방법으로는 두가지가 있습니다. 1.onKeyPre..

퍼블리싱 작업을 하다 보면 div 같은 블록 레벨의 태그를 상당히 많이 쓰게 됩니다 그리고 필연적으로 마진 상쇄에 부딪히게 되죠. 마진 상쇄란 말 그대로 마진이 상쇄돼 가장 큰 마진으로 결합되는 현상을 말합니다. 수직으로 마진을 적용할 때에 일어나며 주로 아래와 같은 3가지 상황에 일어나게 됩니다. 두 요소가 상하로 인접한 경우 : 위 요소와 아래 요소의 마진중 가장 높은 값으로 병합 부모 요소의 첫 번째 자식 또는 마지막 자식 요소 첫 번째 자식 : 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진이 병합 마지막 자식 : 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진이 병합 내용이 없는 빈 요소의 경우 : 해당 요소의 상단 마진과 하단 마진 중 가장 높은 값으로 병합 꼭 마진이 존재해서..