Front-end

요즘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 성능 점수가 확 뛰는 이유가 있다. 바로 사용하지 않는 자바스크립트를 줄일 수 있기 때문이다. 프로젝트가 크고 복잡해질수록 번들도 커진다. 이때, 번들이 거대해지는 것을 방지하기 위해 가장 좋은 해결방법은 코드를 나누는 것이다. 모던 웹이..

프론트엔드 채용공고를 보다가 익숙치 않은 새로운 단어가 보였다. "지도 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..

https://hi-claire.tistory.com/61 [Javascript] 불변성이란 무엇인가(상) 리액트를 공부해본 당신.... 리액트가 지향하는 개념 중 하나인 "불변성"에 대해 알고 계시나요? 저는 useState, spread 연산자를 사용하면 되는 건줄로만 알고 있었는데... 정확히는 "왜?🤔" 사용하는 hi-claire.tistory.com 이번 포스팅은 위 포스팅에서 이어집니다. 원시 타입과 참조 타입에 대해 알고 포스팅을 읽으면 수월하게 이해하실 수 있습니다! 안녕하세요! 이번 포스팅은 "리액트의 불변성"에 대해 알아보도록 하겠습니다. 0. 들어가기 전 저번 포스팅에서 원시 타입과 참조 타입으로 "불변성"이 무엇인지 알아보았습니다. 다시 복습하자면 다음과 같습니다. 불변성 : 메모리..

리액트를 공부해본 당신.... 리액트가 지향하는 개념 중 하나인 "불변성"에 대해 알고 계시나요? 저는 useState, spread 연산자를 사용하면 되는 건줄로만 알고 있었는데... 정확히는 "왜?🤔" 사용하는지 모르겠더라구요...!!!!! 그래서 이번 시리즈는 "리액트의 불변성" 에 대해 알아보도록 하겠습니다. 그 전에 Javascript의 메모리 구조와 데이터 타입을 통해서 정확히 "불변성"이 무엇인지, "불변성"은 어떻게 지키는 것인지 알아보는 시간을 갖도록 하겠습니다! (그래서 상 편 ㅋㅅㅋ) 1. JS의 메모리 구조와 데이터 타입에 대해 알아보자.. Javascript 엔진은 Call Stack과 Heap 두 가지의 메모리 공간을 가집니다. 더보기 콜 스택 : 실행 중인 함수를 추적해 계산을..

문득 프론트엔드 모집공고를 보다가.. [우대사항] - GraphQL 경험이 있으신 분 를 보았다. GraphQL..? GraphQL이 뭘까? 하다가 작성하게 된 오늘의 포스팅! (두둥-) 오늘은 GraphQL에 대해 알아보고, 자주 비교되는 REST API 와도 차이점을 알아보겠다!!! 1. 그래서.. GraphQL이 뭔데? 🧐 GraphQL은 페이스북에서 만든 쿼리 언어입니다. React를 만든 곳에서 만들었으니 호환성도 좋겠죠? GraphQL은 데이터 쿼리 언어이자, API용 서버에서 작동하는 프로그램입니다. GraphQL은 SQL과 마찬가지로 "쿼리 언어" 이다! 둘의 차이점이라 하면 SQL은 데이터베이스 시스템에서 저장된 데이터를 효율적으로 가져오는 것이 목적이고, GQL은 웹 클라이언트가 데이터..