어제보다 더 나은 오늘

개발자로 첫 발을 뗄 수 있게 해준 회사를 나왔다. 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..

지난주 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..

프로젝트에서 일종의 에디터 역할을 하는 화면이 있어서 `contenteditable` 속성을 사용해 사용자가 텍스트를 편집할 수 있게 하고 있다. React에서 `contenteditable` 속성을 사용하는 것은 쉽지 않은데, 특정 요소에 `contenteditable` 속성을 사용하려고 하는 경우, 다음과 같은 경고를 한다.  Warning: A component is contentEditable and contains children managed by React. It is now your responsibility to guarantee that none of those nodes are unexpectedly modified or duplicated. This is probably not in..

이번주에 버그로 등록된 이슈 하나를 해결했던 과정이 재미있어서 기록으로 남겨두는 게 좋겠다는 생각이 들었다. 먼저 제보된 이슈는 다음과 같았다.특정 문서를 업로드했을 때 편집 화면에서 스크롤 이동이 되지 않고, A 기능이 동작하지 않음  A 기능은 편집 화면 내에서 스크롤 이동시 뷰포트에 들어와 있는 아이템을 대상으로 서버에 배치로 요청을 한 다음, 해당 응답 결과를 가지고 화면에 특정 UI로 렌더링하는 기능이었기 때문에 이건 스크롤 이슈였다.  먼저 해당 현상을 재연하기 위해 버그가 발생한다고 제보한 계정으로 접속해 해당 문서를 확인해 보았다. 그런데 내 컴퓨터에서는 스크롤도, A 기능도 정상적으로 동작했다. 내 컴퓨터는 맥북이었고, 버그를 제보한 분의 컴퓨터는 윈도우 데스크탑이었다. 그래서 팀 공용 ..

입사 3개월, 6개월차 회고는 저멀리 지나가고 어느새 만 1년을 바라보는 시기가 되었다. 6월부터 새로운 프로젝트를 준비하고 있다. 입사 후 두번째 프로젝트다. 첫번째 프로젝트와 마찬가지로 바닥부터 시작하는 그린필드 프로젝트지만 첫번째 프로젝트와 같은 카테고리의 솔루션이기 때문에 노하우(랄게 있다면..🥲)들을 이식해와야 한다.  그래서 첫 프로젝트에서 해결하지 못한 기술적 과제들을 정리해 보았다. 이 과제들을 해결하지 못한다면 새 프로젝트도 고스란히 부채를 안고 시작해야 하기 때문에 어떻게든 기존보다 더 나은 방향으로 진행해 보고 싶다.   1. contentEditable 이슈 보통 생각하는 에디터 기능까지는 아니지만 서비스에서 사용자가 텍스트 편집과 조회를 하는 게 필수 기능이다. React 프로젝..

지난 5월 원티드 프리온보딩 FE 챌린지에서 데이터 / 계산 / 액션을 구분하는 것이 복잡도와 의존도를 낮추는 방법 중 하나라는 걸 배웠다.  1. 데이터: 이벤트에 대한 사실. 문자열, 객체 등 단순한 값 그 자체     예) 사용자가 입력한 이메일 주소, 은행 API로 가져온 달러 수량 2. 계산: 입력으로 얻은 출력. 순수 함수라고 부르기도 함.     예) 최댓값 찾기, 이메일 주소가 올바른지 확인하기  3. 액션: 외부 세계와 소통하므로 실행 시점과 횟수에 의존. 부수효과를 일으킴.    예) 이메일 보내기, 데이터베이스 읽기   이번주 티켓 중에 antd Table을 사용해 Weekly 캘린더를 구현해야 하는 작업이 있었다. (antd Calendar는 yearly, monthly만 제공한다...

1. 요소의 indeterminate 상태 :indeterminate - CSS: Cascading Style Sheets | MDNThe :indeterminate CSS pseudo-class represents any form element whose state is indeterminate, such as checkboxes that have been set to an indeterminate state with JavaScript, radio buttons which are members of a group in which all radio buttons are uncheckdeveloper.mozilla.org 체크박스 그룹이 있을 때 한 개 이상의 아이템에 체크가 되었을 때 Check al..