binary_rho

만약에 면접에서 '클로저란 무엇인가요?' 라는 질문이 온다면, 뭐라고 답할까?최근 프론트엔드 스터디를 하게 되면서, 면접용 대답과 실제 개념을 정리하고 발표하고 이를 깃북에 올려 공유하게 되었다. 이러한 작업이 많은 프론트엔드 개발자들에게 도움이 되었으면 하는 바람이다.앞으로 이런 글이 깃북과 깃허브에 계속 올라갈 예정이니, 필요한 분들은 star를 눌러주시면 감사하겠습니다 ! 😇 FE-Tech-Interview | FE-CITYR0CK[JavaScript] 클래스형 컴포넌트와 함수형 컴포넌트의 차이는 무엇일까요?fe-cityr0ck.gitbook.io GitHub - FE-CITYR0CK/FE-Tech-InterviewContribute to FE-CITYR0CK/FE-Tech-Interview de..

velog에 적었던 글들을 차근차근 tistory로 옮길 예정입니다. [react] task queue 와 micro task queue'모던 리액트 Deep Dive'를 읽고!기본적으로 자바스크립트는 싱글 스레드를 가지고 있어 한번에 여러 일을 처리하기 어렵다. 즉, 비동기 처리가 어렵다. (멀티 스레드를 사용하면 같은 메모리를 이velog.io  '모던 리액트 Deep Dive'를 읽다가 정리한 글.기본적으로 자바스크립트는 싱글 스레드를 가지고 있어 한번에 여러 일을 처리하기 어렵다. 즉, 비동기 처리가 어렵다. (멀티 스레드를 사용하면 같은 메모리를 이용해 여러가지 일을 동시에 처리할 수 있다. 하지만 이는 같은 메모리를 이용하기 때문에 동시에 같은 자원에 접근할 시 DOM 표시에 문제를 일으킬 수..

동아리 홈페이지 리팩토링을 진행하면서, 기존 코드를 통해 하나의 레포지토리에 홈페이지와 어드민 페이지를 모두 두고 관리하게 되었다.  그리고 이 과정에서 모노레포가 무엇인지 알게되었고, 이를 정리해보고자 한다. 모노레포란?위의 예시처럼 두개 이상의 프로젝트를 하나의 레포지토리에서 관리하는 소프트웨어 전략이라고 한다.  이는 기존 프론트엔드 전략에서 많이 쓰이던 '모놀리식 서비스 아키텍쳐'의 단점을 보완하기 위해 만들어졌다. '멀티레포'는 모노레포와 반대로 기존에 주로 쓰이던 전략이다. 여러 개의 레포를 사용하여 팀별, 혹은 프로젝트 별로 나누어 레포를 생성하고 개발한다. 보통 프로젝트 별로 완전히 분리되어 서로 영향을 주는 경우는 없지만, 실무에서는 영향을 주기도 한다고 한다.  이 이미지를 확인하면 명..

Swagger UI 를 수정하는 오픈 라이브러리 개발을 하면서 계속 콘솔에 HMR이라는 단어가 뜨는걸 발견했다. 그리고 vite로 react 프로젝트를 생성하니 또다시 ‘HMR’ 이라는 단어가 등장했다. 이를 보고 HMR이 정확히 무엇인지 궁금해졌다. HMR 이란?‘Hot Module Replacement’의 줄임말로 개발 환경에서 내가 수정한 코드의 결과를 브라우저로 바로 확인할 수 있도록 하는 기능이다. 그리고 브라우저 전체를 새로고침하지 않고도 변경된 모듈만 업데이트해준다. Hot Module Replacement | 웹팩웹팩은 모듈 번들러입니다. 주요 목적은 브라우저에서 사용할 수 있도록 JavaScript 파일을 번들로 묶는 것이지만, 리소스나 애셋을 변환하고 번들링 또는 패키징할 수도 있습니다..

절대 단위와 상대 단위처음 프론트엔드 개발을 시작하면 무조건 px이라는 단위를 사용하게 된다. 이는 원래 일상에서도 많이 쓰는 단위이기에 익숙하기도 하고, ‘절대 단위’이기 때문에 원하는 길이를 정확히 지정할 수 있기 때문이다. 여기서 ‘절대 단위’란 말 그대로 어떤 상황에서도 변하지 않는 상수같은 절대적인 길이를 유지하는 단위이다. 그렇다면 ‘상대 단위’란 무엇일까? 절대 단위와 다르게 항상 같은 길이를 유지하는게 아니라 상대적으로 변하는 단위이다. 이러한 ‘상대 단위’에 해당하는 것이 em, rem이다. 상대적으로 변하기 위해서는 그 기준이 필요할텐데, em과 rem의 기준은 무엇이며 둘의 차이점이 무엇인지 정리해보려한다.  em과 remem과 rem이 어떤 기준에 따라 상대적으로 결정된다면, 결국 ..

프로젝트 개발을 하다보면 npm install, npx install 둘의 차이가 정확히 무엇인지 궁금해진다.특히 npm의 경우 node package manager의 줄임말로 pnpm, yarn, yarn-berry 등 다양한 노드 패키지 관리 도구가 있기 때문에, npx가 명확히 무엇이고, yarn과 혼합해서 사용해도 되는지에 대한 의문이 생긴다.  npm기본적인 npm은 말 그대로 노드 패키지 관리자로, 매 프로젝트마다 node_modules 폴더를 만들어 모듈을 관리해준다. 이 경우에는 매 프로젝트마다 모듈을 다운받아 관리하기 때문에 그 용량이 매우 커질 가능성이 있다.이를 위한 npm 옵션이 존재하는데,npm install 모듈이름 -g  바로 -g 옵션이다. 이를 이용하면 모듈을 글로벌로 사용..

프론트엔드 개발을 하다보면 웹 페이지 렌더링 방식에 대해 궁금해진다.React는 CSR 방식을, Next는 SSR 방식을 기본으로 렌더링된다고 하는데, 여기서 CSR과 SSR 방식이 정확히 어떻게 작동하고 어떤 차이가 있을까? 그리고 왜 CSR은 SEO에 부적합할까? CSR우선 CSR은 Client Side Rendering의 줄임말로 말 그대로 서버가 아닌 클라이언트(브라우저) 쪽에서 렌더링을 하는 방식이다. 우리가 주로 이용하는 React, Angular, Vue가 이 방식을 이용한다. 이는 SPA와도 밀접한 관련이 있는데,SPA란?SPA는 Single Page Application의 약자로, 단일 페이지 에플리케이션을 의미하며, 하나의 페이지 내에서 필요한 부분만 렌더링하여 화면을 보여준다. 페이지..