2024.08.10 - [Development Environment] - Why Vite? JS 모듈화의 역사, CJS, ESM, Webpack 2024.08.17 - [Development Environment] - 2016, Left-pad 사건에 대한 Rich Harris(Rollup)의 글로 알아보는 번들링의 중요성 위 글과 함께 차례대로 보게 된다면 더욱 이해가 잘 될 것이다. 이전 글에서 ES Modules에 비해 CommonJS의 단점으로 Tree-shaking이 어렵다는 점을 꼽았다. 단순히 import와 require만이 차이점은 아닐 것이다. 정확히 어떤 이유로 그렇게 말을 하는지, 동작 방식을 파헤쳐보면서 이유를 알아보자. Tree-shaking의 정의와 역사코드를 최적화 할 때 적용..

2024.08.10 - [Development Environment] - Why Vite? JS 모듈화의 역사, CJS, ESM, Webpack 얼마 전, Vite를 써야 하는 이유에 대한 글을 쓰면서 Rollup 라이브러리를 접하고 JavaScript Module의 역사, 번들링에 대한 개념을 알게 되었습니다. 그 글을 쓰고 나서 ES Modules와 CommonJS의 차이점을 Tree-shaking 관점으로 집중하여 또 포스팅하고 싶어 졌습니다. (차주 목요일에 발표라 끝나고 포스팅할 것 같습니다.)  제가 원래 영화든 책이든 이런 식으로 디깅을 좋아하는데요...(tmi) 그래야 개념이 확장되고 기억도 잘나고.. 머릿속에 시각화 되는 걸 즐기는 듯합니다.여하튼 공부 중 제 눈을 사로잡은 글이 있었습니..

요즘 일 때문에 굉장히 바쁜 나날을 보내고 있다. 몇 주 전부터 주 1회씩 주제를 정하여 기술 발표를 하고 있다. 기존에 공부한 부분인데도 제대로 설명을 할 수 없었을 뿐더러 잘못 알고 있는 부분이 많았다. velog 포함 현재 이 티스토리 블로그에 올렸던 부분도 있었기에 부끄러움을 무릅쓰고 재게시하려 한다. 굳이 그러지 않아도 되면서 이렇게 하려는 이유는 첫 번째로 항상 틀릴 수 있다는 것을 다짐하기 위해서이고, 두 번째로는 과거의 나보다 현재의 내가 이해할 수 있는 부분이 확장되었다는 확신으로, 원동력을 갖기 위해서이다.  https://velog.io/@chocoallergie/F-Lab-%EB%AA%A8%EA%B0%81%EC%BD%94-%EC%B1%8C%EB%A6%B0%EC%A7%80-60%EC%..

엑셀 데이터를 바이너리로 전달해드릴거에요. 엑셀 데이터를 바이너리로..? 사수분께서 엑셀 파일로 변환된 데이터를 바이너리로 전달해준다고 하셨다. 구현하면서 배운 부분이 많아, 해당 부분을 공유하고 싶었어서 이 기회로 더욱 깊이 공부해보고 정리해보았다. 예를 들어 간단한 설문조사 결과가 담긴 데이터를 관리하는 사용자가 데이터를 출력하기 위해 Excel 파일을 필요로 한다고 가정한다. 사용자는 내보내고 싶은 결과를 선택할 수 있어야하고 해당 데이터를 서버로 요청을 보내고, 응답으로 Excel 파일을 다운 받을 수 있어야한다. 이때 응답을 바이너리 데이터로 받는다는 말이다. 어떻게 해야할지 천천히 알아보자. Blob : Binary Large Object 하나의 Entity로서 저장되는 바이너리 데이터의 모임..

프로세스와 스레드의 차이가 뭐죠? 차이점도 설명해주세요! 기술 면접 단골 질문으로 알려진 프로세스와 스레드의 차이점, 몰랐다! 매번 실무 얘기 하다가 기술 질문을 던져주시는 사수분께 감사한다. (꾸벅) 제대로 공부했음을 증명? 하기 위해 그리고 기록하기 위해 포스팅을 한다. 나처럼 프로세스와 스레드의 차이점에 대해 잘 모르는 분들께 도움이 되기 위한 글이다. 나는 운영체제 OS와 같은 CS 지식에 어려움을 느끼고 있고 이해를 하기 위해서 여러 번 반복해서 곱씹어보아야 한다. 익히기에 좋은 배경을 갖고 있지 않았지만 부족함을 채우려 지속적으로 노력 중이다. 이 글을 보고나서 모든 분들이 헷갈리던 개념에 대해 제대로 이해할 수 있었으면 좋겠다. 운영체제는 현재 하드웨어의 상태는 어떠한지, 여러분의 코드가 어..

최근 실무에서 상태 관리를 위해 Zustand docs와 상태 관리와 관련한 책을 들여다보다 문득 상태 관리를 하려면 상태에 대해서 알아야되는 것 아닌지, 이미 상태에 대해 잘 안다고 단언할 수 있는가하고 스스로 의심하게 되었다. 제일 기본적인 useState도 제대로 알고 쓰는지 확신할 수 없었다. 리액트 공식 문서와 리액트 딥다이브, 리액트 훅을 활용한 마이크로 상태관리 등의 책을 참고하여 상태를 알아보고자 한다. 참고로 원문을 직접 번역해서 적었기 때문에 부족한 부분이 있을 수 있고 그렇기에 react-ko.dev 내용과 차이가 있을 수 있다. State 상태 컴포넌트는 상호작용의 결과에 따라 화면에 표시되는 내용을 변경해야하는 경우가 잦다. form에 입력할 때, input field를 업데이트해..

Axios Interceptors로 내가 필요한 부분을 잘 반영할 수 있었고 성능의 향상도 이끌었다. 내가 느낀 장단점을 알려주고 싶었고 가상 페이지를 예시로 인터셉터 기능을 설명해볼까한다. AXIOS Axios는 node.js와 브라우저를 위한 Promise 기반 HTTP 클라이언트 라이브러리입니다. 그것은 동형 입니다(동일한 코드베이스로 브라우저와 node.js에서 실행할 수 있습니다). 서버 사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpRequests를 사용합니다. 동형 애플리케이션 isomorphic application 동형성(isomorphic). 즉, 동일한 형태. 웹 개발에서 동형 애플리케이션은 코드가 서버와 클라이언트 사이드에서 ..

글또와 글쓰기 세미나를 통한 저의 변화를 통해, 현재까지의 글쓰기 프로세스를 점검하고 어떻게 개선할 수 있을지 살펴보고 과거의 작성글을 직접 수정하여 비교해 보겠습니다. 글쓰기 세미나 회고 기존의 글쓰기에 대한 반성 자기만족을 추구하며 글을 써왔습니다. 예상독자도 저와 항상 비슷한 사람으로 생각했고, 제가 마주한 문제를 해결하는 식의 글, 제 경험으로 비롯된 글감들이 전부였습니다. 이런 것을 지정해 놓고 써왔다기보다 당연하게 여겼다는 게 정확한 설명입니다. 글에 정답은 없다지만 보고 싶은 글만 보고 편식을 많이 해왔습니다. 글또에서의 메타인지 다양한 개발자분들의 글을 보고 부끄러웠습니다. 이전보다 글을 쓰기가 어려워졌습니다. 완벽함에 대한 강박이 생겼어요. 글감을 잘 떠올리던 이전과 다르게 부담감이 엄습..

코딩테스트를 이전에 보았었는데 큰 어려움을 느꼈었다. 원인으로 자료구조에 대한 이해가 부족함을 깨닫고 유데미에서 알고리즘 강의를 두 가지 듣게 되었다. 시간 복잡도와 공간 복잡도.. 등에 대한 개념과 여러 자료구조를 접하고 보고 퀴즈를 풀 수는 있었지만 그것을 직접 코드로 만들어내는 부분, 실제로 알고리즘 문제를 풀어낼 때 연결할 수 있는 부분이 약했다. 강의를 통해 스스로 시각화를 해내는 법을 익혔지만 휘발성이 강하여 강제로 계속 반복적으로 기억해 내기 위해 Linked list라는 주제부터 꺼내오게 되었다. 그리고 어째서 이 자료구조에 대한 특성들을 알아야 하는가,,에 대한 고찰을 담아보려 한다. 시간복잡도 Big O에 대한 개념 설명은 생략한다! Linked List 연결 리스트 요소 간의 연결(L..

한 해를 찬찬히 돌아보고 글로 남기는 것은 내 기억 속엔 여태껏 없는 순간이다. 거시적 관점으로 훑었는데 2023년 1월부터 현재까지의 성장이 명확하게 느껴졌다. 안도했다. 2023년의 회고를 통해 2024년도 제대로 맞이해보려 한다. GOOD BYE 2023 서울의 중간으로🏡 & 안녕히 계세요🏢 상반기의 제일 큰 이슈로는 이사와 퇴사가 있었다. position이 모조리 바뀐 해였으니 적응하는 데에 힘을 많이 썼다. 대학 때문에 서대문구, 은평구 같은 서쪽에 치중되었던 나의 9년을 잘 간직하고 중구로..! 웬만한 곳은 40분 내로 이동할 수 있는 집이라 편안함을 많이 느끼고 있다. 웹 퍼블리셔로 2년 동안 일했던 회사를 그만두고 신입 개발자를 향해 가는 중. 직무 전환(또는 확장이라 생각한다)을 하려는 ..