본문 바로가기

개발40

RSC vs SSR 서론Next를 사용하게 되었을 때의 렌더링 과정을 공부하던 중 좋은 글을 발견해서 그 글을 보며 정리하게 되었다=> 원본 글을 거의 그대로 정리하는 것임을 미리 밝힙니다(제가 참고했던 글에 대해서는 게시물 하단에 링크를 달아두었습니다)우리가 흔히 React와 Next의 가장 큰 차이라고 하면,CSR(Client Side Render)과 SSR(Server Side Render) 라고 답할 것이다.SSR은 서버측에서 완성된 HTML을 보내주기 때문에 클라이언트는 그걸 받아서 곧바로 화면에 보여주기만 하면 되기에 사용자가 빈 화면을 보는 시간을 줄여줄 수 있다.이정도의 개념은 가지고 있었지만, 조금 더 자세하게 알 필요가 있다고 생각했다. Server ComponentNext에는 Server Componen.. 2024. 5. 4.

Cache의 사용 예 캐시는 어떤 경우에 사용할 수 있을까?캐시는 느린 것을 빠르게 하기 위해 서 사용한다느린 저장장치의 데이터 중 일부를 빠른 저장장치에 올려두고 사용하는 것이 캐시 Cache Aside (Look Aside)캐시에 먼저 접근하고 없으면 DB에 직접 접근 후 캐시 업데이트가장 일반적인 형태 의 캐시 사용어떤 경우에 성능이 가장 좋을까?캐시 Hit가 많이 발생할 때어떤 경우에 성능이 가장 떨어질까?DB에 없는 데이터를 계속해서 접근하게 될 때DB에 없는 데이터에 접근하는 경우에는 Miss가 발생해도 데이터를 캐시에 올려둘 수 없기 때문에 매번 DB에 방문하게 된다이러한 경우에는 이 데이터는 존재하지 않는다는 것을 캐시에 저장 하면, DB에 가지 않아도 데이터가 없음을 알 수 있다이러한 구조에서 더 고려해야 할.. 2024. 4. 30.

레디스 ? Redis일반적으로 레디스라 했을 때 떠오르는 이미지는,DB에 접근하는 것이 느리기 때문에 DB 데이터의 일부를 저장하는 캐시 역할 의 Key-Value Store라고 알고있다.대략적으로 이정도는 알지만, 정확히는 잘 몰랐기 때문에 이번에 정리를 한번 해보고자 한다 최근 이슈Redis는 원래는 오픈소스였으나, 최근에 라이센스가 변경되어 더이상 오픈소스가 아니게 되었다다행(?)인 점은 기존 개발자 중 몇명이 Fork를 떠서 가지고 나와서 ValKey라는 오픈 소스를 만들게 되었다ValKey는 현재 Linux의 재단에서 관리를 하고 있고, 이미 많은 사용자들이 ValKey를 사용하고 있다Fork를 떠온 것이기 때문에, 현재까지는 사용법에 큰 차이가 없다 Redis?레디스란 무엇인가In-Memory Cache.. 2024. 4. 13.

[공식문서 번역] Composition Pattern 컴포지트 패턴? 컴포지트 패턴은 객체들의 관계를 트리 구조로 구성하여 부분-전체 계층을 표현하는 패턴으로, 사용자가 단일 객체와 복합 객체 모두 동일하게 다루도록 한다 원래는 객체지향에서 사용되던 패턴인듯하다 이걸 어떻게 NextJS에서 사용하게 될지, 공식문서를 정리해보았다 Server and Client Composition Patterns 서버와 클라이언트의 컴포지트 패턴 리액트 애플리케이션을 만들 때, 애플리케이션에서 어떤 부분이 서버에서 렌더되어야 하는지 또는 클라이언트에서 렌더되어야 하는지를 고려할 필요가 있다. 이 페이지는 서버 컴포넌트와 클라이언트 컴포넌트를 사용할 때 추천되는 컴포지션 패턴을 다룬다. When to use Server and Client Components? 언제 서버 컴.. 2024. 3. 22.

[공식문서 번역] NextJS 클라이언트 컴포넌트 Client Components클라이언트 컴포넌트클라이언트 컴포넌트는 서버에서 미리 렌더링된 상호작용이 가능한 UI를 작성할 수 있게 하고, 브라우저에서 동작하는 JavaScript를 사용할 수 있게 해준다.이 페이지는 어떻게 클라이언트 컴포넌트가 동작하는지, 어떻게 그들이 렌더되는지, 그리고 언제 그것을 사용해야 하는지에 대해 알아볼 것이다. Benefits of Client Rendering클라이언트 렌더링의 이점클라이언트측에서 렌더링 작업을 하는 것은 다음과 같은 2가지 이점을 가진다.Interactivity (상호작용): 클라이언트 컴포넌트는 상태(state), 효과(effects), 이벤트 리스너(event listeners)를 사용할 수 있게 해준다. 그것은 유저에게 즉각적인 피드백을 제공하고.. 2024. 3. 21.

[공식문서 번역] NextJS 서버 컴포넌트 Server Components Next13이 등장하면서 가장 중요한 변화는 서버 컴포넌트라고 생각된다 리액트 서버 컴포넌트(RSC)는 서버에서 렌더링되고 선택적으로 캐시될 수 있는 UI를 작성할 수 있도록 해준다. NextJS에서 렌더링 작업은 Route Segment 별로 분할되기 때문에 스트리밍(Streaming)과 부분 렌더링이 가능하다. 서버 렌더링 방식에는 3가지가 있다. Static Rendering (정적 렌더링) Dynamic Rendering (동적 렌더링) Streaming (스트리밍) Benefits of Server Rendering 서버에서 렌더링을 했을 때의 이점 Data Fetching (데이터 불러오기) 서버 컴포넌트는 데이터를 불러오는 로직을 데이터 소스와 가까이에 있는 .. 2024. 3. 20.

autoprefixer 여러 개발 서버들에서 개발자 도구(F12)를 사용해서 적용된 css를 보면 줄이 그어져 있는 속성들을 확인할 수 있다. 즉, 현재 내가 보고 있는 화면에 해당 속성이 적용이 되지 않고 있다는 뜻인데, 그럼 왜 작성을 해두었을까?? 값이 -webkit-box와 -ms-flexbox 해당 속성들은 일종의 스타일 보험이라고 볼 수 있다. 우리가 작성한 스타일이 구형 브라우저에서는 제대로 동작하지 않을 수가 있는데 이때를 대비해서 미리 보험을 들어두는 것이다. 만약 특정 브라우저에서 동작할 수 없다면 autoprefixer가 자동으로 동작할 수 있게끔 변환을 해준다. 어떻게 적용할까?? 일단 npm i -D postcss autoprefixer 명령을 통해 postcss, autoprefixer 패키지를 개발 .. 2023. 2. 14.

정적 파일 연결 지난 스타벅스 예제에서 루트 폴더에 favicon.ico 라는 icon 파일이 존재하면 따로 link 태그를 통해 연결해주지 않아도 자동적으로 favicon으로 인식을 한다고 배웠다. 하지만 새로운 프로젝트를 만들어 npm run dev를 통해 개발 서버를 열어서 확인해본 결과 루트 폴더에 favicon.ico 파일이 존재함에도 favicon으로 인식되지가 않았다. vs code에서 제공하는 기능인 open with live server를 통해 서버를 열어서 확인했을 때는 잘 인식이 됐었는데 num run dev를 통해 확인 한 결과는 왜 다를까?? parcel bundler를 통해 개발 서버를 열거나 제품화를 시키게 되면 우리가 작성한 html, css, sass, js 파일 등을 기본으로 dist라는.. 2023. 2. 13.

번들러 개요 Bundler를 사용하는 이유 웹에서는 HTML, CSS, JS 3가지 언어가 동작을 하는데, 이 3가지 언어만을 가지고 작을 하기에는 비효율적인 면이 있다. TS, SASS, REACT 등의 패키지를 고도화된 기능을 사용하여 프로젝트를 작성할 수 있고, 이렇게 작성된 프로젝트를 웹에서 동작시키기 위해 다양한 번들러를 사용한다. parcel bundler VS webpack bundler parcel bundler 구성이 없는 단순한 자동 번들링 대부분 자동으로 처리해준다는 장점 그러나 비효율적 따라서 소/중형 프로젝트에 적합 _______________________________________________ webpack bundler 매우 꼼꼼한 구성 너무 디테일한 구성으로 인해 번거러움이 있음. .. 2023. 2. 13.

이전 1 2 3 4 5 다음

티스토리툴바