dohun.log

최근에 React 19가 정식 출시됐다.v19 CHANGELOG공식 문서몇 달 전 FETR(사내 FE 기술 리뷰 시간)에서 몰리가 소개한 익숙한 스펙들이 있었는데, 내부 코드가 궁금해져서 하나씩 살펴보기 시작했다.대형 오픈소스답게 릴리스 문서에 각 API가 개발된 PR이 친절하게 링크되어 있어서 하나씩 읽어보기로 했고, 그 첫 번째로 formAction과 useFormStatus를 선택했다. 첫 번째로 이것을 고른 이유는 FETR에서 관련 훅 설명을 들으면서 생긴 궁금증 때문이다. form 태그를 사용했을 때 내부의 button이 어떻게 status를 알 수 있는 걸까? 어떻게 기본 HTML 태그가 Context처럼 동작하는 걸까? 이런 의문이 들었고, 그래서 첫 번째로 선정했다.formActionfor..

최근에 회사에서 인쇄모드 관련해서 현재 조금 문제가 있던 스타일을 개선하고 조금의 스타일을 추가하는 작업을 진행했었는데, 관련해서 조사하던 중 카카오 컨퍼런스 영상을 보고 break-insdie라는 스타일을 알게됐고 해당 스타일을 써서 문제를 해결을 시도했다. 해당 작업을 진행하면서 @media 중에 print가 있고, print 모드일때 스타일을 css로 추가할 수 있다는 사실을 새롭게 알게됐다. 이렇게 새롭게 알게된 스타일 속성들을 기록해두려고 한다. ... // 노란박스 ... // 분홍박스 ... // 오렌지박스@media print@media print는 인쇄 모드용 미디어 쿼리다. 아래와 같이 선언하고 해당 블럭내에 스타일을 추가하면 인쇄모드에 적용된다.@media print ..

최근에 회사 공통 모듈작업을 하면서 dependencies 관련해서 계속 예상치 못한 이슈가 생겨서 코드 고치고, 빌드 파일 확인하고, 코드 고치고, 빌드 파일 확인하고를 여러번 반복하면서 이제야 완전히 이해한것 같다. 그래서 까먹기 전에 메모..!dependenciesdependencies는 프로젝트 실행에 필수적인 패키지들을 포함프로덕션 환경에서도 필요하며, 번들링 시 함께 포함된다. 예를 들어, React나 Vue.js와 같은 프레임워크, 상태 관리 라이브러리인 Redux, 그리고 HTTP 클라이언트인 Axios 등이 여기에 해당할 수 있다.devDependenciesdevDependencies는 개발 과정이나 테스트에서만 필요한 패키지들을 포함이들은 프로덕션 빌드에는 포함되지 않아 최종 번들 크기..

회사수습 통과5월에 수습 통과를 하고 드디어 하얀색 사원증을 받았다! (수습땐 검은색)수습 회고다국어 작업1, 2분기엔 글로벌 서비스를 위한 기술 스택 변경 작업을 진행했다. 기존에 바닐라로 되어 있던 코드들을 각 도메인에 맞게 리액트, 혹은 Next로 마이그레이션 하는 작업인데 마이그레이션 작업은 생각했던 것보다 만만한 작업이 아니었다. 기존 동작 그대로 유지해야 하고, 유지보수를 위해서 코드 퀄리티도 신경 써야 하고, 빠르게 진행해야 했다. 그래도 해냈다! 멋있는 팀원들과 함께라 가능했던 것 같다. 지금은 기술 스택이 거의 다 변경되어서 글로벌 서비스를 위한 다국어 작업을 진행하고 있다. 랠릿셀에서 다국어 작업을 제일 먼저 들어가서 다른 FE파트 분들이 사용할 수 있게 여러 가지 자동화 코드들을 만들..

Optimistic Replication 공동 편집에는 응답성이 매우 중요합니다. 그리고 네트워크 지연이나 문서의 락에 영향을 받지 않아야 합니다. 모든 유저는 자신의 디바이스에 편집하려고 하는 문서의 복제본을 가지고, 이를 Optimistic Replication이라고 부릅니다. 사용자의 편집 operator의 반영 순서는 다음과 같습니다. 로컬 복제본 -> 원격 복제본 upstream 실행: local operation 실행 downstream 실행: 다른 사용자가 전송한 원격 operation 처리 OT (Operation Transformation) OT는 2006년까지 사용되던 기술로 Google Docs, Ms Office 등에서 사용합니다. 동작 원리 왼쪽 친구는 3번째 인덱스에 l을 추가했..

들어가기 전 회사에서 차트를 다룰 때 제 모든 관심은 차트와 canvas에 쏠려 있었습니다. 다른 회사 서비스를 보다가 차트만 나오면 개발자 도구를 열어서 svg인지 canvas인지 염탐하고, 어떻게 하면 차트 성능을 높일 수 있을지 매일 시간만 나면 찾아봤습니다. 그러던 중 추석 연휴가 막 시작했을 때 react-konva 존재를 발견했습니다. canvas는 항상 context로 그림을 그리고 따로 node가 없기 때문에 선언적으로 사용할 수 있을까라는 막연한 상상만 하고 있었는데 react-konva는 아래 코드처럼 선언적인 방식을 제안합니다. return ( ) 이게 어떻게 가능한 걸까요? 이 글에서 한번 알아보도록 하겠습니다. 추석 연휴에 이걸 발견한 게 정말 행운이었습니다. 연휴 동안 원 없이 ..

0. 상반기라고 하기엔 늦은 감이 있지만 프로젝트가 끝난김에 2023년 상반기 회고를 해보려고 한다. 지금까지 백도훈에 대한 이야기는 이전 글에 잘 정리했으니 2023 백도훈에 대해 차근차근 본격적으로 얘기해보자. Work 01. 입사 운 좋게 올해 4월 3일부터 줌인터넷에서 프론트엔드 개발을 하게 되었다. 졸업하자마자 바로 취업해야지 라는 막연한 생각은 있었는데 진짜로 이렇게 덜컥 취업할줄은 상상도 못했는데 벌써 4개월이나 됐다. 어떤 파일럿 프로젝트를 하게 될까 기대했는데 기대한만큼 재밌는 주제를 받았고 실제로 파일럿 프로젝트 진행하는 한달동안 시간 가는 줄 모르고 퇴근 이후에도, 주말에도 시간가는 줄 모르고 너무 재미있게 개발했다. 그리고 입사하면 기술 블로그에 글 한편 써보리라 다짐했는데 진짜로 ..

남들처럼 멋있는 회고는 아니지만 더 나은 2023을 위해 기록한다. 2022년 회고보단 어떻게 살아왔는지, 어쩌다 개발을 하게 됐는지 ~2022년 회고를 해보려고 한다. 글을 적다보니까 회고와 일기 그 사이 어디쯤이 되어버렸다. 성장을 맛보다 나는 공부를 늦게 시작했다. 중학생때까지 예술인의 길을 걷겠다며 공부는 안하고 그림만 그렸다. 그러다 예고 입시를 실패하고 인문계에 진학을 했다. 고1 예고에 못갔는데 이제 미술은 그만할래. 그럼 난 뭐지? 뭘 해야 하지? 같은 고민을 하면서 한참동안 방황했다. 그러다 어느 날 친한 친구가 “어~ 나보다 등수 아래야~”같은 고급 도발스킬을 시전 했다. 친구 A는 도발을 썼다! 효과가 굉장했다! 그렇게 도발 스킬에 당해 공부를 하게된다. 큰누나는 음악을 하고 작은 누..

마지막이라는 말은 왜이렇게 슬픈건지.. 이번주 내내 마지막에 슬퍼하며 살았음 혼자 마지막에 과몰입해있을 때 유일하게 리액션 잘해주던 너구리형.. 우리팀은 그런거 없음 아무튼 눈물의 부스트캠프에서의 "마지막" 회고를 시작합니다. 사실 마지막이 아닐수도.. 아쉬워서 이리저리 여러 글 더 쓸 것 같은 느낌적인 느낌 학습 스프린트 2주차 회고 3주차 회고 4주차 회고 5주차 회고 페어프로그래밍 회고 8주차 회고 학습 스프린트는 8주동안 진행된다. 챌린지는 하루안에 정해진 미션을 해결해야해서 그날 뭐할지 고민할 필요가 없는 반면, 학습 스프린트에는 일정 관리의 선택권이 생긴다. 어떻게하면 갑자기 생긴 선택의 자유에서 책임을 충분히 감당할 수 있을까? week1에 너무 빠르게 달려버리면 week2엔 힘이 빠져버린다..

그... CRDT를 아시나요? Wabinar는 실시간 공동 편집 회의록을 유저에게 제공해주어야 한다. (이때까진 좋았지...) 실시간 공동 편집 뭔가 까리하지 않나요? 까리하다구요? 그럼 구현까지 해보세요... 매 스프린트 회의마다 태스크의 예상 시간을 산정하는데 이번주는 정말 정말 예상하기 어려웠다. CRDT가 뭔지 알아야지.. 나원참.. 아무튼 겁도 없이 그 CRDT에 손을 댔다. 진짜 월요일, 화요일 이틀동안 CRDT 관련된 블로그, 동영상, 라이브러리, 논문 다 찾아봤는데 진짜 보면 볼수록 더 모르게 되는 매직. 그러다가 문득 이런 생각이 들었다. 아... 저런 라이브러리나 논문처럼 삐까뻔쩍하게 만들지 못하는건 당연하구나...! 이거때문에 스트레스 받을 필요가 없구나. 그냥 우리가 할 수 있는 만..