오늘은 파트에서 FE 새싹 트렌드 스터디 🌱를 진행하는 날입니다. React 18이 가진 몇가지 흥미로운 기능에 대한 소개하며, 정리한 내용을 공유합니다 :) How to Update 리액트 18 버전은 기존의 코드를 유지하며, 버전 업데이트를 위해 아래 2가지 작업만 진행해주시면 됩니다. yarn add react@18 react-dom@18 // 두 줄만 변경하면 The End! import ReactDOM from 'react-dom/client'; // import by client import App from './App'; // 기존 ReactDom.render 함수 교체 → ReactDom.createRoot() 적용 const root = ReactDOM.createRoot(document..

최근 회사에서 인사이트를 공유하고자 스토리북 사용 권장을 위한 팀 세미나를 진행했습니다. 사용하면서 느꼈던 장점과, 처음 접했을 때 헷갈릴 수 있는 요소들을 위주로 가볍게 정리해본 내용에 대해 공유합니다 :) 디자인 시스템 디자인 시스템이 처음이라면, 간단히 스타일 가이드와 컴포넌트의 복합체를 의미합니다. 컴포넌트들이 어떻게 사용되어야 하는지, 디자인을 할 때 어떤 규칙들을 지켜야 하는지에 대한 가이드를 제시하고, 통일성 있는 UI를 제공합니다. 스토리북 디자인 시스템과도 밀접한 관련을 가진 스토리북은, 개발 방식의 효율성 향상을 위해 다양한 방식으로 사용되는 UI 컴포넌트 개발 도구입니다. 리액트와 완전히 분리된 UI 컴포넌트 개발용 오픈소스 도구로, 디자인 시스템의 테스팅, 문서화 툴, 외부 공개용 ..

🔮 코드 성능 영향 요소 점검 수칙 패키지 최적화 번들 사이즈 측정 결과 분석 빌드 시간과 번들링 사이즈에 영향 웹 페이지 리소스 로딩 속도 개선 기대 렌더링 최적화 Page 단위 Server-side Data Fetching 활용 유저의 대기시간 최적화 렌더링 속도(웹 화면 그려지는 로직) 개선 기대 로직 최적화 Memory Leak 등 성능 영향 로직 수정 브라우저 상호작용 속도 개선 기대 이번 포스팅에선 개발 과정에서 적용할 수 있는 번들 사이즈 최적화를 다룹니다. 번들 최적화 01. 원인 분석 번들 사이즈를 분석할 수 있는 다양한 도구들이 존재한다. 프로젝트 내 라이브러리별 비중을 파악해보고 그에 맞는 최적화 진단을 시작해보자. Webpack Analyse ( 가장 다양한 정보 제공 but 사용법..

Result 전세계의 다국어 도메인은 퓨니코드로 변경되어 등록과 처리가 진행된다. 인터넷 사용자가 입력한 다국어 도메인은 클라이언트 측에서 아스키 기반의 퓨니코드로 변환되 네임서버로 전송된다. | 과정 주소창에 다국어 도메인이 입력된다 (ex. 청와대.com) 클라이언트(브라우저)측에서 퓨니 코드로 변환한다 ( ex. xn--vk1b187a8ue.com ) DNS의 네임 서버로 전송되 IP 주소를 찾아 접속하게 된다 * 네임 서버는 퓨니코드 형태의 영역 데이터를 운영한다 . 1) 국제화 도메인 네임 ( IDN _ Internationalized Domain Name ) 인터넷 상에서 호스트의 주소를 나타내는 도메인 네임은 기본적으로 라틴 문자, 숫자, ( _ )언더바 등으로 구성되어있다. 여기서 말하는 ..

프론트엔드 개발에서 상태 관리는 매우 중요한 개념입니다. 상태 관리를 통해 사용자 인터페이스(UI)의 상태를 관리하고 변경사항을 추적하고, 애플리케이션의 동적인 요소를 효과적으로 제어해 사용자 경험을 향상시킬 수 있습니다. 프론트엔드에서 가장 일반적인 상태 관리 방법 중 하나는 상태 관리 라이브러리를 사용하는 것입니다. 대표적인 상태 관리 라이브러리로는 Redux, MobX, Vuex 등이 있습니다. 이러한 라이브러리는 애플리케이션의 상태를 중앙 집중화된 저장소에 저장하고, 상태의 변경을 관리하며, 컴포넌트 간의 상태 공유를 용이하게 해줍니다. Redux는 가장 널리 사용되는 상태 관리 라이브러리 중 하나로, 단방향 데이터 흐름을 기반으로 합니다. Redux는 액션(Action), 상태(State), 리..

React에서 하위 컴포넌트로 props 전달 시, 특정 요소에만 전달하기 원하는 변수가 존재한다. 아래 예시로 가로줄을 구성하는 Row 컴포넌트의 첫번째 줄에만 isLargeRow 변수를 전달해 다른 요소보다 크게 화면에 표현하고 싶다면 하위 컴포넌트에서 isLargeRow 변수의 default값을 false로 지정한 다음 원하는 특정 컴포넌트 요소에만 isLargeRow 변수를 전달해주면된다. 하위 컴포넌트 function Row({ data, isLargeRow = false }) { return( {data.name} ); } export default Row; 상위 컴포넌트로부터 data와 isLargeRow이라는 boolean값을 전달받는 Row 컴포넌트가 존재한다. isLargeRow 변수를..