프로세스와 스레드의 차이가 뭐죠? 차이점도 설명해주세요! 기술 면접 단골 질문으로 알려진 프로세스와 스레드의 차이점, 몰랐다! 매번 실무 얘기 하다가 기술 질문을 던져주시는 사수분께 감사한다. (꾸벅) 제대로 공부했음을 증명? 하기 위해 그리고 기록하기 위해 포스팅을 한다. 나처럼 프로세스와 스레드의 차이점에 대해 잘 모르는 분들께 도움이 되기 위한 글이다. 나는 운영체제 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년 동안 일했던 회사를 그만두고 신입 개발자를 향해 가는 중. 직무 전환(또는 확장이라 생각한다)을 하려는 ..

리액트 스터디 중 "가상DOM과 리액트 파이버" 주제가 나왔다. 발표를 맡게된 리액트 렌더링 부분을 준비하고, 발표 당일 스터디원들과 얘기하며 조금씩 윤곽이 잡히기 시작했다. 하지만 여전히 어려운 건 매한가지... 그러다가 좋은 글을 발견했는데 포스팅 일자가 리액트 15,16 기준이라 렌더가 동기식으로 진행된다고 되어있어서 🤔 제대로 스터디 내용을 복기할 겸, 그리고 파이버와 좀 친해질 겸 포스팅 주제로 선정하게 되었다. 조금 의문이었던 것은 재조정 과정은 똑같고, 여전히 유효할 것 같은데 리뉴얼된 React 사이트에는 파이버와 관련된 내용이 전부 생략되어있다. 왜일까????? 그래서 더 어렵게 느껴졌던 것 같다. 더이상 관련이 없는 내용인지? 레거시한 부분인 건지에 대한 고민. 리액트 파이버 아키텍처 ..

Introduction 나는 null이 아니라 any 형식이 포함된다고 Error가 떴다. React에서의 event를 제대로 이해하지 못한 탓인지 tsx를 화나게 했다. 나처럼 js에서의 Event는 익숙한데, React + TypeScript에서의 Event 타입을 어떻게 다루어야 할 지 이해하지 못하는 분들을 위해 글을 쓴다! React, TypeScript에서의 Event Type JavaScript에서 자주 쓴 `addEventListener( )`, `on____` 예시로 `onChange` change event는 주로 input element의 값이 수정되었을 때 발생하도록쓰인다. // Syntax addEventListener("change", (event) => {}); onchange..

어제 test repo에 27번 시도 끝에 성공했다고 신난 나머지 프로젝트 레포에 그대로~ 복붙했다가 3시간 걸린 이야기..를 풀어보겠다. 이전 포스팅의 마지막 줄에 내가 써놓은 멘트에 내가 당했다..! 2023.11.11 - [Problem Drilling] - Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm Github Actions 사용, Workflow 테스트 자동화 적용하기, pnpm Github Action를 사용해서 테스트 자동화를 해보게 되었다. 우선 Github에 있는 node.js.yaml 템플릿으로 어찌저찌 구현하다가 pnpm 이라는 난관.. 그리고 working-directory 쪽에서도 헤맸고. 전혀 다른 곳에서 nami-socket.tistor..

Github Action를 사용해서 테스트 자동화를 해보게 되었다. 우선 Github에 있는 node.js.yaml 템플릿으로 어찌저찌 구현하다가 pnpm 이라는 난관.. 그리고 working-directory 쪽에서도 헤맸고. 전혀 다른 곳에서 테스트되기도 했다. 그래도 처음인데도 몇 시간내로 바로 구현했고 27번의 시도만에 성공했다. 이 과정을 공유하고 내가 쓴 워크플로우도 공유하겠다! Github Actions Github Actions는 repository에서 바로 소프트웨어 개발 workflow를 자동화하여 실행할 수 있다. 빌드, 테스트 및 배포 파이프라인을 자동화할 수 있는 CI/CD 플랫폼! 레포에 대한 모든 PR을 build 및 테스트하는 workflow로 만들거나 병합된 PR을 프로덕션..