한 개발자의 노트패드

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가지 상황에 일어나게 됩니다. 두 요소가 상하로 인접한 경우 : 위 요소와 아래 요소의 마진중 가장 높은 값으로 병합 부모 요소의 첫 번째 자식 또는 마지막 자식 요소 첫 번째 자식 : 부모 요소의 상단 마진과 첫 번째 자식 요소의 상단 마진이 병합 마지막 자식 : 부모 요소의 하단 마진과 마지막 자식 요소의 하단 마진이 병합 내용이 없는 빈 요소의 경우 : 해당 요소의 상단 마진과 하단 마진 중 가장 높은 값으로 병합 꼭 마진이 존재해서..

재밌는 글이 있어서 올려봅니다. https://bitfieldconsulting.com/golang/crisp-code

요즘 ai가 유행하고 있습니다. gpt3니 4니 뭐니 해서 나올때마다 연신 최고라고 추켜세우고 있죠. 기술이 발전하고 있습니다. 그럼에 따라 개발자들의 지식도 발전하고 있죠. 예전보다 더 늘어가는 지식에 더불어 저는 큰 고민에 빠졌습니다. '어떻게 해야 개발을 날먹할 수 있을까?' 인생 날먹을 실패했기에, 이번엔 개발이라도 날먹을 시도해보기로 했습니다. 엠지하지 못하고 꼰대같은 마인드였던 제가, 드디어 엠지한 ai와 손을 잡기로 한 것이죠. https://github.com/features/copilot 깃허브 코파일럿. 개발 인생에 처음으로 써 본 ai입니다. 사실 나오기 전부터 유명했죠. 컴퓨터가 코드를 대신 짠다느니, 개발자들이 망한다느니 해서 논란도 많았고, 깃허브의 repo를 무단으로 가져온다고..

v-if와 v-show. 둘 다 조건부 렌더링에서 사용하는데에 쓰입니다. v-if는 조건이 만족했을 때에 렌더링을 하고 그렇지 않을 시에 dom 레벨에서 제거되며, 그와 관련된 모든 감시들도 제거됩니다. 만약 컴포넌트라면 인스턴스가 제거 되며 이후 렌더링이 되면 모든 상태가 초기화가 되겠죠. v-if는 주로 특정한 데이터를 가지고 있지 않을 시 오류를 발생시키거나, 컴포넌트를 많이 사용되는 경우에 사용됩니다. 주로 에러 출력이나, 비동기 처리로 불러온 값에 따라 렌더링을 요구할 시에 사용하죠. v-show는 display:none으로 처리를 하기 때문에 dom 레벨에서도 제거되지 않으며, 모든 감시들도 제거되지 않기 때문에 상태값도 초기화가 되지 않습니다. 추로 변경 빈도가 높은 경우에 사용하며 대표적으..

vscode의 extension에선 많은 기능들을 지원합니다. 저는 그 중 todo highlight라는 걸 이용하는데 사용법은 간단합니다. 주석으로 FIXME를 입력하면 저렇게 highlight가 생기게 됩니다! 참 신기하죠!? 그냥 해봤습니다. 여튼 저같은 경우 실무에서 api가 연동되지 않았을 때, 혹은 작업이 수정될 때에 FIXME를 통해 하이라이트를 주곤 합니다. json을 통해 수정도 할 수 있고, 어렵지도 않아서 설치만 하면 됩니다.

UI 빌더를 지탱하는 레고 블록 같은 아키텍처 만들기. 코어와 프로덕트의 책임 모호. 이걸 어떻게 해결해야 할까? 1.계층을 나누고 책임을 재설계하라. 하지만 도메인이 안보인다. 여기선 sdk 안에 도메인이 있는데 굳이 이럴 필요가 없지 않을까? 2.ui 파운데이션을 만들자. 하지만 상위 조직에 들어갔을 때 디자인 시스템이 대체 되면 어쩌지? 다른 조직에선 디자인 시스템을 다르게 쓰면 어떡하지?라는 생각이 들었다. 그래서 뺌. 3. 변경을 모듈화해서 동선을 최소화하자 매니페스토 파일을 만들어서 잘 활용해보자. 정리.