어제보다 더 나은 오늘

chart.js는 이게 안 돼? 하는 게 의외로 정말 안 될 때가 많다. 🤷🏻‍♀️ :root { --primary-color: #52006a; --secondary-color: #98d8c8}const data = { label, datasets: [ { label: "dataset 1", data: [1, 2, 3], color: "var(--primary-color)", }, { label: "dataset 2", data: [10, 20, 30], color: "var(--secondary-color)", }, ],} 위와 같이 차트에 css 변수를 넘기려 할 때 동작하지 않는다. 관련해서 github 레포에..

프론트엔드 개발을 하다보면 IDE에서 수많은 색상 코드들을 마주하게 된다. #3498db, rgba(52, 152, 219, 0.8), hsl(204, 70%, 53%) 같은 코드들을 보고 바로 어떤 색인지 떠올릴 수 있는 사람은 아무도 없을 것이다. Colorize 익스텐션은 이런 고민을 완전히 해결해준다. 색상 코드에 실제 색상을 시각적으로 표시해주기 때문에 개발 효율성이 높아진다. https://marketplace.visualstudio.com/items?itemName=kamikillerto.vscode-colorize colorize - Visual Studio MarketplaceExtension for Visual Studio Code - A vscode extension to help ..

구글링해서 reddit을 통해 힌트를 얻었다.https://www.reddit.com/r/nextjs/comments/1hfru5n/framer_landing_page_nextjs_application_deployed/?rdt=56003 From the nextjs community on Reddit: framer landing page, nextjs application deployed on vercel applicationExplore this post and more from the nextjs communitywww.reddit.com module.exports = { rewrites: async () => { return [ { source: '/', d..

21년도 발표 영상이라 시간이 조금 많이 지난 영상이지만, 팀 내에서 화제의 Frontend Fundamentals로 스터디를 해보면 어떻겠냐는 얘기가 나와서 스터디하기 시작하기 전에 징검다리 같이 한 번 보면 좋을 것 같아 영상을 시청했다. 20분 남짓해서 한 번 쓱 보기에 부담없는 분량이다.  '클린코드'에 대해서 항상 클린코드란 대체 무엇인지, 각자의 정의가 다양할 뿐더러 가령 읽기 좋은 코드라고 정의할 때 어떤 코드가 A에게는 읽기 좋지만, B에게는 읽기 좋지 않을 수도 있어서 이런 부분이 어렵게 느껴졌다.   위의 영상에서는 개발자의 시간이 곧 회사의 자원이고, 이를 단축시켜줄 수 있는 코드가 클린코드라고 정의한다. 팀마다 시간을 단축시킬 수 있는 방법과 토대가 다를 것이라 우리만의 방법이 무엇..

사전 환경 및 구현 목표: - 프로젝트 내부에서 라이트/다크 모드 구분 없이 단일 모드(라이트 모드) 사용 - 시스템 설정에 따라 브라우저가 라이트 또는 다크 모드로 변경됨에 따라 파비콘 이미지가 동적으로 변경될 수 있도록 하고자 함  // app/layout.tsxexport const metadata: Metadata = { title: "Your application's title", description: "Your application's description", icons: { icon: [ { media: "(prefers-color-scheme: light)", url: "/images/favicon-light.png", typ..

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로 바꿔서 사용했었는데 ?..