이 주제는 4월에 쓰기 시작하여 5월까지 다뤄보다가 포스팅을 하지 않았다. 단순히 javascript니까 당연히 싱글 스레드 아닌가,,, 했었는데 모호한 영역이 있었고. 그 부분을 제대로 이해하지 못한 채 올린다는 게 스스로 내키지 않았다. 다시 붙잡아보면서 스스로 이 주제에 대한 충분한 이해를 할 수 있길 바란다. 이전에 스레드와 프로세스에 다룬 글이 있다. 스레드의 개념을 먼저 정확히 알고 싶다면 해당 글을 먼저 보면 좋을 듯 하다. 2024.04.04 - [Software Engineering] - Difference between Process and Thread (+ Program) Node.jsNode.js는 크로스 플랫폼 오픈소스 자바스크립트 런타임 환경으로 Window, Linux, mac..

요즘 실무에서 node.js express를 사용하여 백엔드 역할까지 하고 있는데 그 중 이슈를 해결한 부분에 대해 깊이 파보려 한다. 개인적으로 실무에서는 이해 없이 구현을 해버리는 경우가 많아서 아쉬움이 큰데, 이렇게 짚고 넘어감으로써 넓게 이해해보고 싶었다. 이슈 내용파일 이름에 UTF-8 문자가 포함되어 있으면 파싱을 실패하는 이슈 원인Multer has nothing to do with it, Busboy has changed something. 꽤 모듈을 파고 파고 들어가야하는 문제였다. express ➡︎ multer ➡︎ busboyexpress의 multer 미들웨어가 의존하고 있는 busboy라는 모듈 때문인데, 해당 모듈의 속성 중 `defParamCharset`의 Default가 `..

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). 즉, 동일한 형태. 웹 개발에서 동형 애플리케이션은 코드가 서버와 클라이언트 사이드에서 ..

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