어제보다 더 나은 오늘

개발자로 첫 발을 뗄 수 있게 해준 회사를 나왔다. 10여 년만에 다시 직장인이 되어 안정적인 소속감을 느끼며 일할 수 있었던 시간이었다. 원래는 25년 상반기 정도에 이직을 할 생각이었는데, 예상보다 조금 일찍 움직이게 되었다. 작은 규모의 팀이다보니 퇴사하기에 좋은 타이밍이 있을까 싶기는 하지만 내가 시작해놓고 결국은 마무리하지 못하고 나온 부분들도 있어서 퇴사일자가 하루 지난 지금 이 순간까지도 마음이 편치는 않다.  재작년 여름, 첫 회사 입사를 앞두고 썼던 포스팅에서 '이직의 조건 4Cs'라는 아티클을 인용하여 Compensation(보상), Collegue(동료), Chance(기회), Culture(조직 문화) 등 네 가지를 기준으로 삼으라는 내용을 언급한 적이 있다. 이번에 이직을 하면서 ..

작년 12월 무렵 한 해 동안 공부해야 할 키워드 목록을 다음과 같이 뽑았었다.  ✅ 디자인 패턴✅ TypeScript 클린 코드 ✅ Git✅ 예외 처리 및 에러 핸들링 프론트엔드의 테스트 전략 및 테스트 코드 작성 방식아키텍처✅ 렌더링 패턴: CSR, SSR 등 ✅ Next.js✅ JavaScript Deep Dive✅ 팀, 협업  공부하면서 도움이 되었던 자료들은 다음과 같다.  1. 디자인 패턴https://www.patterns.dev/ Patterns.devLearn JavaScript design and performance patterns for building more powerful web applications.www.patterns.devhttps://refactoring.guru/k..

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..

지난주 next.js로 토이 프로젝트를 배포하고 작성했던 포스팅에서 Image 컴포넌트의 src에 문자열 경로를 지정하는 경우 이미지 엑박이 뜨고, StaticImageData로 바꿨을 때는 정상적으로 이미지가 뜨는 원인을 알았다. 원인을 파악하기에 앞서 StaticImageData를 콘솔에 찍어보니 다음과 같은 객체를 볼 수 있었다.  import HeroImage from '/public/hero_256x256.png';export default function Home() { console.log(HeroImage); return ( );}// HeroImage 객체{ src: '/_next/static/media/hero_256x256.0d595165.png', height: ..

토요일 아침 댓바람부터 세미나 들으러 다녀왔다. 재직자 관점의 테크 분야 신기술과 업계 동향 세미나라는 부제로 총 3명의 연사가 30분씩 발표하는 자리였다. 각 발표별로 메모한 내용을 짤막하게 기록해두려고 한다.   1. 생성형 AI의 발전에 따른 일하는 방식의 진화 - 한빛앤 개발팀 팀장 김민혜두뇌를 캐시로, AI를 데이터베이스로 사용하자.: 캐시 hit rate를 올리려는 노력이 필요 챗GPT에게 업무에서 캐시 hit rate를 높이려면 어떻게 하는게 좋겠냐고 물어봤다. 내가 평소에 AI를 어디에 많이 사용하고 있는지도 한 번 정리해두면 좋을 것 같다는 생각도 들었다. - 변수명, 함수명 제안 - 정규식 코드 작성 - 문서화 양식 만들기 - 특정 문제를 풀 때 접근할 수 있는 '키워드' 얻어내기  연..

next.js 예제와 강의를 보며 틈틈이 만들었던 프로젝트를 이번 주말 배포했다. 나중에 내가 볼 요량으로 배포하면서 알게 된 것들 몇 가지 간단하게 정리해본다.  Vercel Postgresvercel로 배포했고, DB도 vercel postgres를 사용했다. 무료 플랜으로 1개의 DB를 제공하고 있다. 처음 DB를 생성하고 프로젝트와 연결할 때 총 6개의 region 중에 하나를 골라야 한다. 아시아 지역은 싱가폴이 유일해서 Singapore를 선택했다. region은 한 번 선택하면 그 이후에 변경이 안 되기 때문에 유의해야 한다. We recommend choosing the same region as your Serverless and Edge Functions for the fastest r..

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