분류 전체보기

오늘 처음으로 회사 레포에 완성된 마크업 페이지를 디벨롭에 적용하는 과정에서... 예상치 못한 오류가 발생했다! >>> ⚠️git conflict 그러던 중 옆에 사수 분께서 rebase라는 새로운 방식을 언급해주셔서,,, (하지만 나는 처음 보는 명령어임) 문득 merge와 rebase의 차이점에 대해 궁금하여 해당 포스팅을 준비해보았습니다! 1. git merge(병합) merge는 두 개의 다른 브랜치를 하나로 합치는 과정을 의미합니다. git checkout main// main에서 병합 진행 git merge feature-branch// 현재 작업중인 브랜치를 main에 병합 git merge는 새로운 병합 commit을 생성하고, 각각의 브랜치에서의 변경 내용을 포함합니다. 두 개 이상의 개..

0. 들어가기전 동기/비동기 와 블로킹/논블로킹 의 개념은 비슷해 보일지라도 서로 다른 차원에서 작업의 수행 방식을 설명하는 개념이다. 동기/비동기 : 처리해야 할 작업들을 수행 방식(완료 여부)의 차이 블로킹/논블로킹 : 처리해야할 작업의 과정의 제어권 처리 방법의 차이 그렇기 때문에 동기 != 블로킹, 비동기 != 논블로킹 이다. 1. 동기(Sync) vs 비동기(Async) 동기와 비동기를 구분하는 방법은 처리해야 할 작업들에 대한 작업 순서 처리의 차이이다 . 요청한 작업에 대해 완료 여부를 따져 순차대로 처리한다면 동기, 요청한 작업에 대해 완료 여부를 따지지 않는다면 비동기이다. 1. 동기 호출된 작업의 리턴하는 시간과 결과를 반환하는 시간이 일치하는 경우를 말한다. 작업 A의 종료시간과 작업..

요즘IT를 읽으며 흥미로운 주제 발견! "React Server Component(RSC)" 라는 것이 있다는 것이다! 최근 리액트 생태계에서 가장 핫한 이슈로 개발자들의 주목을 받고 있다고 해서 우리 프론트공주들과 함께 읽어보면 좋을 것 같아서 해당 주제를 가져 왔다. (그리고 너무 내용이 어려워서 후회했다..🥲) 1. RSC, 서버 컴포넌트가 뭐지..?🤔 React Server Components는 React 18 버전부터 도입된 개념으로, 말 그대로 서버에서 동작하는 컴포넌트를 가리킨다. 서버 측에서 컴포넌트를 실행하여 미리 렌더링된 마크업을 생성한 후, 클라이언트에게 전달되어 사용자에게 콘텐츠를 보여주는 방식이다. CSR vs SSR 고전 웹 프론트엔드는 MPA 구조로 SSR 방식을 택했다. 하지..

0. 서론 바야흐로 HourGoods... Lighthose 점수를 너무 높이고 싶었던 규투리... 폭풍검색을 하여 React.lazy()를 사용해서 79 -> 98 이라는 킹성비 성능 개선을 이루어냈으나!!!! 대충 코드스플리팅 때문에 성능 점수가 확 올랐구나 정도만 알고, 정확히 어떤 메커니즘으로 동작이 되는지 알지 못했기에 조금 늦었지만 제대로 다시 공부해보고자 한다. 1. 코드 분할(Code Splitting)이 필요한 이유 코드 분할을 하면 lighthouse 성능 점수가 확 뛰는 이유가 있다. 바로 사용하지 않는 자바스크립트를 줄일 수 있기 때문이다. 프로젝트가 크고 복잡해질수록 번들도 커진다. 이때, 번들이 거대해지는 것을 방지하기 위해 가장 좋은 해결방법은 코드를 나누는 것이다. 모던 웹이..

👩‍🏫 : "프로세스와 스레드의 차이점에 대해 설명해주세요." 🙋🏻‍♀️ : "..." 면접 단골 질문 프로세스와 스레드의 차이점에 대해 알아보자!!!!!! 0. 들어가기 전 브라우저를 웹서핑하다가 마음에 드는 게임을 찾았다! 오잉? 다운로드 버튼을 눌렀더니 갑자기 마우스도 안 움직이고 키보드도 안 먹힌다..;; 몇 분에 걸쳐 이 게임이 다 받아질 때까지 컴퓨터가 먹통이 되어 있는 거다.. ㅜ 뭔 이딴 컴퓨터가 다 있냐?! 라고 생각할 수 있겠지만, 옛날 컴퓨터들은 다 이런 식으로 작동했다. 게임을 다운로드 하는 작업, 마우스나 키보드로부터 입력을 받는 작업, 브라우저로 사이트를 돌아다니는 작업 과 같은 일들을 동시에 처리하지 못하고 한 번에 하나씩만 할 수 있었다. 컴퓨터가 프로세스 여러개를 함께 돌리..

프론트엔드 채용공고를 보다가 익숙치 않은 새로운 단어가 보였다. "지도 Javascript SDK를 개발해요" (당근마켓) 오잉? SDK가 뭐지..? 많이 들어본 것 같기도 하고... 또 다른 채용공고를 보니.. "다양한 환경에서 실행되는 SDK 형태의 서비스로서 크로스 브라우징을 깊이 있게 지원합니다." (채널톡) 오..😦 난 몰랐지만, 많이 사용되는 개념인가보다! 하여... 이번 포스팅에서는 SDK에 대하여 다뤄보도록 하겠습니다. 또, 제가 SDK를 알아보며 가장 헷갈렸던 API와의 차이점에 대해서도 같이 알아보도록 해요!😉 1. API란? 💡 API란? 👉 Application Programming Interface의 약자로, 모듈화하여 만들어진 어떤 기능을 제어/제공하는 인터페이스이다. API는 ..

지난 포스팅.. 패키지 매니저에 대해 공부하면서 많이 보이던 단어 "모노레포".. 많은 기업에서 yarn berry를 도입한 이유의 큰 이유 중에 하나가 모노레포를 구축하면서 선택했던 도구였다고 합니다. 그렇다면 과연 모노레포는 무엇이며, 어떤 특징이 있는지 알아봅시다! 1. 모노레포의 등장 배경 💡모노레포란? 모노레포란 버전 관리 시스템에서 두 개이상의 프로젝트 코드가 동일한 저장소에 저장되는 소프트웨어 개발 전략 초창기 서비스의 시작, 모놀리식 구조 모노레포는 고전적 소프트웨어 개발 방식인 모놀리식 애플리케이션(monolithic application)의 한계에 대해 비판해서 출판합니다. 여기서 모놀리식 애플리케이션이란 모듈화 없이 설계된 소프트웨어 애플리케이션을 말합니다. 대부분의 초창기 프로젝트들..

발생경위 새로운 프로젝트 설치를 하던 도중... 나는 npm i 만 했을 뿐인데....🥲 에러전문 더보기 npm ERR! code ERESOLVE npm ERR! ERESOLVE could not resolve npm ERR! npm ERR! While resolving: react-scripts@5.0.1 npm ERR! Found: typescript@5.1.6 npm ERR! node_modules/typescript npm ERR! dev typescript@"^5.1.6" from the root project npm ERR! peer typescript@">= 2.7" from fork-ts-checker-webpack-plugin@6.5.3 npm ERR! node_modules/fork-t..

우리가 자주 사용하는 단짝친구 npm과 yarn! 오늘은 패키지 매니저에 대해 알아보겠습니다..!! 1. 패키지 매니저란? 패키지 매니저는 앱이나 소프트웨어에서 사용되는 패키지(라이브러리, 모듈 등)들을 관리하는 도구입니다. 가장 대표적인 패키지 매니저는 npm 과 yarn 입니다. 패키지 매니저를 사용하면 프로젝트에 필요한 외부 라이브러리를 쉽게 설치하고, 버전 관리를 할 수 있습니다. 이때, 패키지란? 👉 코드의 배포를 위해서 사용되는 코드의 묶음을 뜻합니다. 패키지는 라이브러리와 비슷한 개념입니다. 라이브러리는 코드 작성을 위해 필요한 코드 모음이며, 패키지는 코드의 배포를 위해 사용되는 코드 모음을 뜻합니다. 패키지는 일반적으로 다음을 포함합니다. 라이브러리 실행파일 .bin(컴파일한 binary..

때는 바야흐로.. HourGoods 프로젝트에서 채팅창을 구현하던 중… “새로운 메세지가 왔을 때 자동으로 스크롤이 내려가면 좋겠어요!” 와 같은 불편이 접수됐다. 기억을 정리하고자 블로그 작성을 해봤습니다! 아래는 결과화면입니다. (최종 완성본과는 다르지만.... 자동스크롤 녹화해둔게 없기에..) 1. 스크롤바를 항상 아래로... 일반적인 채팅창에서는 내가 채팅을 친 경우 상대방이 채팅을 친 경우 즉, 새로운 메세지가 올 때마다 스크롤이 항상 맨 아래로 향합니다. 자동 스크롤을 구현함으로써 채팅을 새로 칠 때마다 스크롤을 아래로 일일이 내릴 필요가 없으니, 사용자에게 보다 좋은 UX를 제공할 수 있게 됩니다. 2. 하단 영역을 useRef로 설정하기 잠깐 useRef에 대해 짚고 넘어가자면.. 💡 us..