Frorong

[React] 전역 상태관리를 효율적으로 사용하기 위한 생각. react에서 가장 중요한 개념 두 개를 꼽자면 컴포넌트, 그리고 상태일 것이다. 여기서 상태는 단순한 값이 아니라, 컴포넌트의 렌더링에 영향을 미친다. 따라서 굉장히 중요하다. 여러 개의 컴포넌트에서 같은 상태를 공유하기 위해서는 prop을 통해 상태를 넘겨주어야 한다.const Component = ({prop1}) => {prop1}; 위 코드와 같은 형태로 말이다. 이제 상태를 좀 더 확장시켜 보자.const Layout = () => { const userInfo: UserInfoType = . . .; return }const Body = ({userInfo}: {userInfo:UserInfoType}) => { ..

[React] react 19 버전에 대한 고찰 Svelte, Astro, Remix와 같은 js 프레임워크들이 떠오르고 있다. 하지만, React가 근본 프레임워크인 것은 부정할 수 없다. 신규 프레임워크들도 좋은 기술들과 성능들을 갖고 있지만, React의 역사와 유저풀은 결코 무시할 수 없기 때문이다. 지난 2024 04 25일자에 React의 19 버전이 베타 릴리스 되었다. 2022년 6월 14일 출시된 React 18.2.0 버전 이후로 처음이다. React 18 버전에서는 서버 컴포넌트가 공개되며 엄청난 이목을 끌었는데.. 19 버전은 또 얼마나 대단한 업데이트를 가져왔을지 기대되었다. 자, 지금부터 React 19 버전에 대한 변경사항을 알아보겠다. React 19의 새로운 기능Hooks비..

[React] 컴포넌트를 잘 설계하기 위해서 생각해야 할 것. 위 사진은 내가 진행하는 프로젝트에서 메인 화면의 UI다. view size에 따라 렌더링 하는 카드 리스트의 UI가 굉장히 상이하다. 우리 코드의 문제점은 다양한 UI를 렌더링 하는 코드에서 비롯되었다. 컴포넌트를 유연하게 사용하기 위해서 하나의 컴포넌트에서 다양한 형태의 UI를 구현하려고 했지만... 그렇게하니 코드가 더러워졌다. 아래 코드를 보자. 코드가 굉장히 더러우니 대충 읽어도 된다. 요약하자면 view size에 따라 각기 다른 UI의 슬라이더를 렌더링하고, 조작하는 코드이다. 굉장히 읽기도 어지럽고 너무 복잡하다. 이런 코드는 당장 보기도 어려울 뿐더러, 유지보수에도 최악이다. 이 블로그에서는 어떻게 아래와 같은 컴포넌트를 개선..

[React] 실시간 채팅 기능을 어떻게 구현할까? STOMP 이번에 진행하는 프로젝트에서 실시간 양방향 채팅 기능을 구현하기 위해 STOMP가 채택되었다. 때문에 STOPM가 어떤 것인지, react에서 어떻게 STOMP를 사용할 수 있는지 알아보려 한다. 먼저 STOMP를 이해하기 위해서는 web socket에 대해서 알아야 한다. Web Socket web socket은 웹 어플리케이션에서 실시간 양방향 통신을 가능하게 하는 통신 프로토콜이다. 기존 http로 client와 server가 상호작용 하는 것을 생각해 보자. client에서 server에 요청을 보내면 server는 client에게 요청에 대한 결과를 반환한다. 이렇게 client -> server로만 요청을 보내는 단방향 통신이 이루..

[Next] Next.js는 어떻게 SSR과 CSR을 혼합했을까? Next.js의 Hydration 우리가 코드를 작성하여 만들어진 웹 어플리케이션은 브라우저 위에서 구동된다. 브라우저의 페이지 렌더링 방식은 크게 두 가지가 있는데 바로 CSR(client side rendering)과 SSR(server side rendering)이다. CSR과 SSR에 대해 궁금하다면 아래 게시글을 참고하자. [CS, Next] SSR 개념 바로잡기! Server Side Rendering!! Server Side Rendering이 무엇일까? server side rendering을 이해하기 위해서는 먼저, client side rendering에 대한 이해가 필요하다. 브라우저 렌더링 관련 참고 게시글. 왜 tr..

[React] react life cycle과 virtual DOM react는 가장 인기 있는 javascript framework이다. cloud flare의 2023 통계에 따르면 react가 점유율 38%로 압도적인 1위를 달리고 있다. 나는 react를 어느 정도는 사용할 수 있지만, 더 잘 사용하기 위해서는 기초적인 개념을 더 깊게 이해할 필요가 있다고 생각했다. 따라서 이 글에서는 react의 중요한 개념인 life cycle과 virtual DOM에 대해 알아보겠다. Virtual DOM vitual. 가상이라는 뜻이다. 브라우저의 렌더링 엔진이 DOM 트리를 기반으로 화면을 렌더링 하는 것은 알겠는데.. 가상 돔은 무엇일까? 여기 감성돔 한 마리가 있다. 이 감성돔을 꾸며주려고 하는데, ..

웹 개발에서 성능 최적화하기! Minifying과 Code Splitting!! 웹 개발을 하면 어플리케이션의 초기 로딩이 느리다던가, 코드의 용량이 너무 크다던가 하는 문제가 생길 수 있다. 오늘은 이러한 문제들을 어떻게 해결할 수 있는지 웹 개발 성능 최적화 방법에 대해 알아보겠다. 또한, React에서는 어떻게 이 해결 방법을 적용 중인지 알아보자. Minifying 성능을 최적화하기 위해서는 개발하여 나온 소스 코드 자체를 줄이는 방법이 있다. 우리가 개발을 할 때에는 가독성을 굉장히 중요시한다. 이는 다른 개발자들이 코드를 쉽게 이해하도록 하여 코드 리뷰 시간을 단축시키고, 유지보수 비용을 줄인다. 하지만 인간이 코드를 편하게 해석하기 위한 것이 컴퓨터에게도 동일하게 적용되지는 않는다. 컴퓨터는..

Vanilla Extract로 개발자 경험, 사용자 경험 모두 챙기자. emotion이나 styled-components와 같은 css-in-js 라이브러리들이 많은 인기가 상승 곡선을 그리고 있다. 이렇게 많은 인기를 얻고 있는 css-in-js 라이브러리는 무엇일까? css-in-js란? css-in-js는 어플리케이션의 스타일을 js로 작성하여 적용하는 것을 의미한다. 동작 원리를 간략히 설명하면 다음과 같다. 1. 개발자가 js로 스타일을 정의한다. 2. 라이브러리가 각 스타일에 대한 고유한 class name을 생성한다. 3. 생성된 스타일과 class name을 기반으로 style sheet를 생성한다. 4. 의 형태로 DOM에 주입한다. 이러한 css-in-js는 컴포넌트 기반 스타일링이 가..