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는 개발 과정이나 테스트에서만 필요한 패키지들을 포함이들은 프로덕션 빌드에는 포함되지 않아 최종 번들 크기..

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 ( ) 이게 어떻게 가능한 걸까요? 이 글에서 한번 알아보도록 하겠습니다. 추석 연휴에 이걸 발견한 게 정말 행운이었습니다. 연휴 동안 원 없이 ..

울 동아리에서 진행하는 해커톤에 참가했다. 처음엔 해커톤이라는 단어가 주는 어떠한 압박감에 망설이고 있었는데 같이 부스트캠프 하고 있는 진재 님이랑 휘찬 님이 참가하신다는 얘기를 듣고 냉큼 따라서 신청했다 해커톤 소개 지원 자격 그냥 "백도훈 오세요"라고 하는것 같지 않나요? 해커톤이 처음인 사람한테 이만한 게 없다고 생각했고, 우리 학교에서 진행하는 게 너무 좋았다. (내 구역잖아?) 그래서 해커톤 당일에 부스트캠프 한다고 못 만났던 동기들 만나서 점심도 먹고 하는데 진재 님이랑 휘찬 님한테서 슬랙 DM이 왔다. "도훈님 어디세요?" 나는 1시 30분까지 입장이라고 알고 있었는데 이 사람들이 왜 12시 30부터 나를 부르지?라는 생각과 왠지 모를 싸함.. 그래서 나는 이렇게 답했다. 아~ 아직 시간이 ..

앞의 포스팅과 이어집니다. https://dohun31.tistory.com/28 브라우저 렌더링 과정 (1) 리뷰어님과 미팅을 하던 중 이런 질문을 받았다. 만약에 면접에서 이런 질문을 받으면 뭐라고 답할 건가요? 검색창에 www.naver.com을 입력하면 어떤 일이 일어날까요? 어떻게 www.naver.com가 보일까요 dohun31.tistory.com 이제 우린 www.naver.com의 주소를 알고 연결까지 성공했어! 🙋🏻: 오예~! 그럼 이제 자원을 요청하겠네요? 맞아 이제 naver를 보여줄 html을 받아올거야. 연결된 server에 http 요청을 보내서 html을 받아왔어. 🙋🏻: 엥 이런 html이 어떻게 제가 아는 naver가 돼요? 음 다 방법이 있지~ 앞에서 얘기했던 렌더링 엔..

리뷰어님과 미팅을 하던 중 이런 질문을 받았다. 만약에 면접에서 이런 질문을 받으면 뭐라고 답할 건가요? 검색창에 www.naver.com을 입력하면 어떤 일이 일어날까요? 어떻게 www.naver.com가 보일까요? 이 질문을 듣고 나서 “DNS가 IP주소를 알려주고.. 서버에 요청하면 알아서 보여주지 않을까?"라고 생각했다. 이렇게 생각만 하고 넘기기엔 이 질문이 너무 흥미로웠다. 또 내가 현재 작성하고 있는 코드들이 화면에 어떻게 보이게 되는지 너무 궁금했었는데 이 기회에 정리를 해보려고 한다. 컨셉은 🙋🏻(호둔) 한테 설명해주는 🙋‍♂️(도훈)으로 하겠습니다. 브라우저 🙋🏻: 브라우저가 뭐예요? 브라우저란 웹 서버에서 이동하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 GUI 기반의 응용..

작년 공채 때 눈물의 3.5 솔을 하고 내년엔 이것보단 많이 풀어야지 했는데 진짜 그것보단 많이 풀었다. 조금 더 욕심 부려서 다짐을 했어야 했는데.. 예를 들면 내년엔 올솔해야지 이런 거.. 아쉽네 1번 1번답게 단순 구현이었다. 그냥 달력이라는거 보자마자 일단위로 다 바꿔야겠다는 생각을 했다. 제발 제발 월마다 일수 다르다고 하지 말아줘 하면서 조건을 찾아보니까 월 28일로 고정! 예! 그래서 date 문자열을 파싱해서 day로 변환해주는 함수를 만들어서 빠르게 해결했다. 2번 오히려 2번이 생각보다 어려웠다. 문제를 보고 그리디라고 생각을 못했으면 되게 헤맸을것 같다는 생각이 든다. n이 무척커서 O(n^2)이면 터지겠다는 생각이 들어서 무조건 O(n)으로 해결해야 하겠다 싶었다. 문제를 잘보면 결..

부스트캠프 7기 개발에 막 발을 들였을 때부터 가고 싶었던 부스트캠프에 드디어 지원했다. 작년엔 무서워서 도전을 못했는데 작년에 넣어볼걸 이라는 후회를 엄청 했다. 졸업학년에 와서 하려니까 떨어지면 하반기에 뭘 해야 할까 걱정이 된다. (프로걱정러특 일어나지도 않은 일 상상하면서 힘들어함) https://boostcamp.connect.or.kr/guide_wm.html 부스트캠프 개발자의 지속 가능한 성장을 위한 학습 커뮤니티 boostcamp.connect.or.kr 여기 나와있듯이 부스트캠프의 프로세스는 다음과 같이 진행이 된다. 현재 2차 온라인 코딩 테스트까지 완료했고 최종 합격자 발표만을 기다리고 있다. 알고리즘 문제는 파이썬 사용해서 푼다. 우테캠 코테에서만 js를 썼다. 1차 코딩 테스트 ..