어제보다 더 나은 오늘

feature flags라는 키워드를 처음 보게 된 건 트래블월렛 프론트엔드 팀에서 Trunk Based Developement(TBD) 전략을 통해 단일 브랜치를 사용하고 있다는 인터뷰 아티클이 그 시작이었다. 지속적 배포를 위한 git 전략을 연구 중에 있습니다.trunk based development라는 전략인데요 단일 브랜치로 배포 전략을 구성하는 것입니다.작업 주기를 짧게 가져 바로 메인 브랜치에 머지 되고 배포 되는 방식이어서 개발자가 부담 없이 하루에도 몇번 씩 배포할 수 있는 환경을 구축하려고 합니다.출처: https://travel-wallet.career.greetinghr.com/interview16  이게 어떻게 가능한 거지? 생각하며 조금 더 찾아보니 feature flags라는..

지난 포스팅 - 볼드, 이탤릭 등 스타일 변경 기능 구현 1편 -에 이어서 작성하는 글입니다. 1편에서처럼 데이터 스키마를 정한 이후1) 서버에서 받아온 데이터를 화면에 보여주고,2) 사용자가 입력한 스타일 정보가 포함된 텍스트를 서버에 보낼 때 정해진 양식으로 변환하는두 가지 함수가 먼저 필요했다. { trg_text: "아버지가 방에 들어가신다.", trg_text_styles: [ { range: [0, 3], styles: ['bold', 'italic'] }, ],} enum StyleToTagMap { bold = 'b', italic = 'i', underline = 'u', subscript = 'sub', superscript = 'sup',}type StyleType..

프론트엔드의 꽃은 에디터 만들기가 아닐까 싶다. 회사 제품이 CAT(Computer-Assisted Translation) tool이다보니 리치 텍스트 에디터는 아니지만 점점 그렇게 되어가고 있는...? 중이다 ㅋㅋㅋ 지난 9월 스프린트의 주요 에픽이 바로 스타일 구현이었다. 요구사항은 다음과 같았다. - 볼드, 이탤릭, 밑줄, 위첨자, 아래첨자 총 다섯 가지 스타일 제공 - 각각의 스타일을 중복으로 적용 가능해야 함 - ctrl + b 등 단축키와 스타일 버튼 두 가지 형식으로 제공 - 스타일 변경에 대해서도 실행취소/재실행 기능을 확장해서 제공해야 함 - 서버와 스타일 정보에 대한 규격을 정해 사용자가 입력한 텍스트와 함께 변경된 스타일 정보를 실시간으로 저장 이미 실시간 텍스트 편집에 대한 기능은 ..

자동 배포 파이프라인 중 하나로 github actions를 사용 중인데, PR 올린 코드에 대해 빌드 에러가 있는지 확인해 주는 일종의 checker를 yaml로 작성했다.  organization에 속해 있는 레포의 경우 SSH 키를 생성해야 한다. SSH key 생성 및 github에 등록 과정은 아래의 포스팅을 참고했다. [Github Actions] CI - 빌드 실패 시 Pull Request 닫고 코멘트 등록하기얼마전 회사에서 github actions로 CI를 적용하는 일을 맡게 되었다. 이전에 프로젝트에서 자동 배포용으로 github actions를 사용해 본 적은 있지만, 부끄럽게도 문서 한번 찾아보지 않고 블로그에 나와zubetcha.tistory.com name: CI Build E..

1. 명령 팔레트(cmd + shift + p)를 열어서 아래의 기본 설정: 사용자 설정 열기(JSON)를 선택   2. settings.json 파일에 다음의 설정 저장 default formatter는 prettier로 지정되어 있지만, prisma 파일을 열 때는 Prisma를 default formatter로 사용하겠다는 뜻 { "editor.defaultFormatter": "esbenp.prettier-vscode", "[prisma]": { "editor.defaultFormatter": "Prisma.prisma" }}  prisma 파일을 수정할 일이 많지는 않아서 이제까지 prisma 파일 켤 때마다 default formatter를 잠깐 Prisma로 바꿔서 사용했었는데 ?..

부모 요소의 state에 따라 특정 자식 요소의 스타일을 지정해야 하는 경우, 먼저 부모 요소에 `group` 클래스를 작성하고, target 요소에는 `group-hover` 등 `group-*` modifier를 사용해 스타일을 지정할 수 있다.  예를 들어 다음과 같은 책 상세 페이지에서 한 줄 평 영역에 마우스를 hover할 때 편집 버튼이 나타나게 하고 싶다면 다음과 같이 코드를 작성할 수 있다.   이 동작을 css에서 직접적으로 구현하려면 다음과 같은 방식으로 할 수 있다.   즉, Tailwind CSS의 `group`은 css의 가상 클래스와 자식 선택자를 활용해 부모 요소의 상태에 따라 자식 요소의 스타일을 지정하는 기능을 제공하는 것이다.  실제로 빌드 파일을 살펴보면 다음과 같은 라..

Next.js 공홈의 Learn Next.js를 따라가며 docs를 보는 스터디를 하고 있다. Learn Next.js의 실습은 SQL을 사용해 DB에 직접 쿼리를 날리는 방식 위주여서 API Layer 방식의 데이터 패칭은 어떻게 하는 것인지 도무지 와닿지가 않았다. 공홈의 문서를 봐도 route.ts 파일에서 Route Handler를 선언하는 코드만 나와있고, 이 선언된 코드의 사용부에 대한 내용이 당최 없다. Lee Robinson이 설명하는 youtube 예제에서도 API Layer에 대한 내용은 없다. Routing: Route Handlers | Next.jsCreate custom request handlers for a given route using the Web's Request an..

목록 페이지에 페이지네이션이 있을 때, 상세 페이지를 갔다가 뒤로 가기를 눌렀을 때 항상 1페이지로 돌아가는 것이 아니라 원래 있던 페이지를 기억해서 해당 페이지로 돌아오게 하는 기능을 구현하는 방법을 간략하게 정리해 본다. 위의 기능을 구현하기 위해서는 현재 페이지를 어딘가에 저장해두어야 하는데 이때 다음의 세 가지 방식을 생각해 볼 수 있을 것 같다. 1. 브라우저의 sessionStorage 세션 스토리지는 탭이 열려 있는 동안 정보를 저장할 수 있어, 사용자가 페이지를 떠났다가 돌아왔을 때 이전 페이지 정보를 유지하는 데 유용하다. 2. URL의 쿼리 스트링 URL로부터 페이지 정보를 읽어들일 수 있다. URL을 가지고 있으면 탭을 닫았다가 다시 열 때도 이전 페이지로 돌아갈 수 있고, 해당 UR..

1. React.Fragment () 추가 HTML 요소 없이 여러 요소를 함께 렌더링하려는 경우에 사용한다. react legacy docs의 JSX in Depth 파트를 보면 JSX는 React.createElement의 syntatic sugar임을 상기해 보면 왜 그루핑이 필요한 지 알 수 있다. import React from 'react'; import CustomButton from './CustomButton'; function WarningButton() { // return React.createElement(CustomButton, {color: 'red'}, null); return ; } // node_modules/@types/react/index.d.ts function cr..

windowing 기법 또는 list virtualization 기법을 적용해 무한 스크롤 성능을 최적화하기 위해 tanstack의 react-virtual 라이브러리를 사용하면서 위의 YouTube 클립의 도움을 많이 받았다. 위의 클립에서 faker-js로 랜덤한 길이를 가진 문장을 리스트로 만들어 virtualization을 통해 최적화하는 구현 방법을 코드로 옮겨 보았다. 랜덤한 길이를 가졌기 때문에 리스트 아이템의 height가 일정하지 않다. 즉 dynamic height를 가진 아이템을 구현하는 방법이다. 먼저 virtual을 적용하기 전 코드이다. 10만 개가 아니라 100만 개의 아이템을 렌더링한다면? 어지간히 성능 좋은 컴퓨터에서도 100만개를 렌더링하는 순간 브라우저가 죽어버릴 것이다..