어제보다 더 나은 오늘

블로그 포스팅을 오랜만에 쓰려니 어떻게 시작을 해야 할지 모르겠다는 말로 시작을 해보자. 요즘 여러모로 고민이 많지만 고민을 진척시켜 나갈 기운은 없는 그런 정체기이다. 회사에서는 디자인시스템에 대한 고민이 있다. 조직이 뒷받침되지 않는 디자인시스템을 관리한다는 것은 참 어려운 일이라는 걸 깨달아가고 있다. 하루는 셀렉트 박스에서 메뉴 옵션을 선택했는데, placeholder가 계속 표시되고 있다는 버그 리포트가 들어왔다. 선택한 메뉴 옵션 값은 정상적으로 제출이 되는데 form 화면에 선택한 값이 보이지 않고 해당 필드가 계속 비어 있다는 것이다. 해당 컴포넌트는 9개월 전에 처음 만들어진 후 단 한 줄도 바뀌지 않은 상태였다. `git blame`을 돌려도 손댄 흔적이 없었다. 그런데 "옵션을 ..

2025년 회고 포스팅에서 "초심자의 벽을 넘어서는 경험을 하는 한 해가 되었으면 한다. 질문을 던지고 그 질문에 대한 대답을 찾아는 과정을 체화하고 싶다."고 했다. 이 방향으로 나아가기 위해서 먼저 지난 한 해를 복기해보고자 한다. 1. 이직 후 온보딩 - 회사와 팀, 제품을 이해할 수 있는 온보딩 가이드 문서 작성 - 이후 1년 동안 9명의 신규입사자에게 활용됨 (25년 2월 기준 총 인원 15명) - 신규 인원이 회사에 기여할 수 있는 가장 쉽고 빠른 방법이라는 배휘동 님의 포스팅이 계기가 됨 저는 이렇게 온보딩 자료를 스스로 만들거나 이미 있는 자료를 개선하는 게 신입으로서 조직에 할 수 있는 최고의 기여라고 생각합니다. 저도 지금의 회사인 XL8에 입사했을 때 (아무도 시키지 않았지만) '회..

잘 쓴 코드란 무엇일까? 에 대한 질문을 항상 품고 있다. 여러 가지 답변이 있을 수 있겠으나 요즘의 관심사는 '변경에 유연한 코드'이다. 서비스 개발을 하며 요구사항이 변하고, 기능이 변하고, 구조가 변하고.. 시간이 흐름에 따라 변하는 것이 많다. 이 변화를 주어진 자원(특히 시간) 내에서 따라갈 수 있어야 한다. 다른 사람이 쓴 코드를 보는 경험이 나에게 부족하다는 생각이 들어서 Tanstack form 소스 코드를 살펴보기로 했다. 1. 좋은 코드, 잘 쓴 코드란 무엇일까? 2. react-hook-form과 tanstack form의 차이는 무엇일까? 위의 두 가지 질문을 가지고 스터디를 시작했다. A headless form library for managing complex form s..

연초에 이직을 하고 1년이 흘렀다. 개발로 돈을 번 지 2년 반이 되어 간다. 방통대 컴퓨터과학과에 편입해 두 학기를 수강했다. 졸업까지 딱 절반의 반환점을 돈 셈이다. 이직을 앞두고 연초에 쓴 포스팅을 다시 읽어봤다. 다음의 글귀에 시선이 사로잡혔다. 이번에 이직을 하면서 내 안에 있었던 질문들은 다음과 같다. - 회사의 비전이 나의 가치와 어느 정도 일치하는가 - 회사의 비즈니스 모델이 분명한가 - 동료들과 만들어갈 하나의 세계에 대한 기대감이 있는가 - 대표의 비전을 비롯하여 조직 내 최종 의사결정자들의 결정이 전사 인원에게 어떻게 전파되는가 각 질문에 대해 짧게 지금의 생각을 남겨두는 것도 언젠가 이 글을 다시 읽을 미래에 의미가 있을 것 같다. 1. 회사의 비전이 나의 가치와 어느 정도 ..

1. shottr Shottr – screenshot app for pixel professionalsShottr is a free macOS screenshot app with scrolling screenshots, OCR, annotation and measurement instruments.shottr.cc mac의 스크린캡처 기능을 사용하면 메인 모니터 우측 하단에 캡처 이미지가 생기고 몇 초 뒤에 사라진다. 그 시간 동안 해당 캡처를 드래그하지 못하면 데스크탑에 아이콘으로 자동 저장되지만, 내 모니터에는 이미 온갖 창들이 잠식하고 있어서 바탕화면의 아이콘을 찾으려면 화면을 또 감춰야 하고 등등.. 번거로울 때가 많다. 그런데 shottr를 사용하면 내가 캡처한 곳 바로 옆에 스크린샷이 계속 유..

지금 재직 중인 회사에서는 next.js로 프로젝트를 수행하고 있어서 next.js의 기본 번들러인 webpack을 사용 중이다. 사실 next.js를 쓰면서 딱히 webpack에 대해 의식해본 적은 없다. 별도 설정을 하는 경우도 거의 없으니까. ('거의'라고 붙인 이유는 있긴 있기 때문.) 이전 회사에서 vite를 사용하는 프로젝트에 참여했는데, vite의 공식 문서의 메인 페이지라고 할 수 있는 를 읽어도 읽어도 잘 이해가 안되었다. 방통대 여름방학을 맞아 멈췄던 프론트엔드 스터디를 재개했고, 첫번째 주제로 '번들링'을 공부하기로 했다. 이제는 좀 이해할 수 있으런가 싶어서 스터디 재료로 vite의 문서를 집어넣었고, TIL 문서를 포스팅해본다. Vite의 특징 최초 개발 서버 구동 시간 및 ..

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 레포에..

지난 주말 기말시험을 마지막으로 방통대 3학년 편입 첫 학기 일정이 모두 끝났다. 1월 초 이직을 해서 온보딩 기간 중 개강을 했다. 새로운 회사에 적응을 하며 학사 일정을 쫓아가는 게 생각보다 어려웠다. 무슨 배짱으로 방통대 편입 신청을 한 건지, 나 녀석 겁이 없었군. 제대로 정리된 글은 쓰지 못할 것 같고, 생각나는 대로 짤막하게 몇 가지 소회를 남겨보려고 한다. 복잡한 학사 시스템 방통대 시스템을 알아가는 게 생각보다 까다롭다. 학교 측에서는 신편입생을 위해 1학기에는 '원격 교육의 이해'와 같은 수업을 필수 과목으로 넣어준다. 기본적으로 모든 시스템이 여기저기에 중구난방 흩어져 있다는 인상이 강하고, 자기들끼리만 쓰는 용어가 많아서 첫 학기에는 인지 부하가 많이 걸린다. (가령 '형성 평가'..

프론트엔드 개발을 하다보면 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..