SSR로 사용자 경험 향상시키기

❓SSR은 무엇일까요?SSR(Server-Side Rendering)은 서버에서 HTML을 생성하여 클라이언트에 전달하는 렌더링 방식입니다. 이는 브라우저가 자바스크립트를 실행하기 전에 사용자가 완전한 HTML 문서를 받을 수 있도록 도와줍니다.기존 CSR의 문제점CSR(Client-Side Rendering)은 자바스크립트가 클라이언트에서 실행되기 전까지 빈 HTML 파일이 로드되는 방식입니다. 이로 인해 발생하는 주요 문제는 다음과 같습니다:SEO 문제검색 엔진 크롤러는 자바스크립트를 실행하지 못하는 경우가 많아, CSR에서는 빈 페이지를 읽게 됩니다.이로 인해 SEO 최적화가 어려워질 수 있습니다.느린 초기 로드(FCP)클라이언트가 화면에 콘텐츠를 표시하기 전에 자바스크립트 번들을 다운로드하고 실행..

• format_list_bulleted 개발관련/Front End
• · 2024. 12. 28.
• textsms

Next.js vs Remix 뭐가 더 좋을까?

서론Next.js와 Remix는 무엇인가?현대 웹 개발에서는 사용자 경험과 성능을 최적화하기 위해 다양한 프레임워크들이 사용됩니다. 그 중에서도 Next.js와 Remix는 React 기반의 프레임워크로, 각각 고유한 방식으로 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 그리고 클라이언트와 서버 간의 데이터를 효율적으로 관리하는 방식 등을 제공합니다.Next.js는 Vercel에서 개발한 풀 스택 웹 프레임워크로, React 애플리케이션의 서버 사이드 렌더링과 정적 사이트 생성 기능을 쉽게 구현할 수 있도록 해줍니다. 파일 기반 라우팅, 이미지 최적화, API 라우팅 같은 기능을 제공해 성능 향상과 SEO 최적화에 유리한 옵션으로 알려져 있습니다.Remix는 풀 스택 웹 프레임워크로, 데이..

• format_list_bulleted 개발관련/Front End
• · 2024. 10. 31.
• textsms

[FE] 디자인 시스템에 아토믹 디자인 패턴 도입하기

크루루 서비스는 리액트 웹 어플리케이션으로 Emotion-Styled를 사용하는 구조를 사용하고 있습니다.서비스 개발 초기 단계에서 우리는 컴포넌트 분리에 대한 명확한 기준을 가지지 않았습니다.이는 서비스 도메인에 따라 컴포넌트 구조가 변경될 사항이 많을 것이라 예상했기 때문입니다. 이러한 이유로 우리는 유연하게 변화에 대응할 수 있는 컴포넌트를 만들고자 했습니다.하지만 서비스가 확장됨에 따라 공통 컴포넌트의 수가 늘어나고, 복잡한 컴포넌트들이 생기기 시작했습니다. 이로 인해 코드의 관리가 어려워졌고, 각 컴포넌트 간의 역할과 책임이 모호해지는 문제가 발생했습니다.우리는 다음과 같은 컴포넌트 구조를 가지고 있었습니다.📦components ┣ 📂appModal ┣ 📂applyManagement ┣ ?..

• format_list_bulleted 개발관련/Front End
• · 2024. 9. 15.
• textsms

[웹 최적화] 웹 페이지 번들 사이즈 줄이기

Minify주석 공백, 줄바꿈 등을 삭제하여 소스코드의 사이즈를 줄이는 것을 말합니다.가독성에는 문제가 생기지만, 단순히 불필요한 코드를 제거하는 것이므로 코드 구조는 변하지 않습니다.// Before minificationfunction add(a, b) { return a + b;}// After minificationfunction add(a,b){return a+b;}Uglify코드의 크기를 줄이는 것뿐만 아니라, 변수명 축약과 같은 난독화 과정을 포함합니다.코드를 읽기 어렵게 만들어서 보안성을 강화하는 동시에 파일 크기를 더 줄이기 위한 목적으로 사용됩니다.// Before uglificationfunction addNumbers(a, b) { return a + b;}// After..

• format_list_bulleted 개발관련/Front End
• · 2024. 9. 8.
• textsms

MSW 사용, 테스트 환경 세팅, TextEncoder is not defined 트러블 슈팅 기록

1️⃣ 왜 MSW를 도입했는가?API 이슈와 MSW 도입의 필요성문제없이 개발하던 중, 어느 순간 API 요청이 먹통이 되는 상황이 발생했습니다. 알고 보니 백엔드 측에서 HTTP를 HTTPS로 변경하는 과정에서 설정이 잘못되어, 그 설정을 하는 동안 클라이언트 측의 프론트엔드 개발자들은 개발이 잠시 중단되는 상황이 발생했습니다. 이러한 상황을 겪으면서, 만약 MSW(Mock Service Worker)를 설정해두었다면 막힘없이 개발을 계속 진행할 수 있었을 텐데라는 생각이 들었습니다.그래서 백엔드의 의존을 덜어낼 수 있는 안정적인 Mock 환경을 세팅을 시작하게 되었습니다.2️⃣ MSW 세팅 시작1. 기본적인 세팅MSW의 공식 문서에 따라 기본적인 세팅을 진행했습니다. Mock Service Worke..

• format_list_bulleted 개발관련/Front End
• · 2024. 7. 21.
• textsms

[한글 번역] Stop mocking fetch - Kent C. Dodds

“fetch” 모킹은 그만!이 글은 아래 원글 ‘Stop mocking fetch - Kent C. Dodds’ 의 내용을 번역한 글입니다.원글⬇️ Stop mocking fetchStay up to date Stay up to date All rights reserved © Kent C. Dodds 2024kentcdodds.com ❗️tl;dr - 옮긴이Fetch 모킹의 문제점중복되는 백엔드 구현: fetch를 모킹하면 테스트 곳곳에서 백엔드의 기능을 재구현해야 한다. 이는 중복 작업을 초래하고 테스트의 복잡성을 증가시킨다.테스트와 서버 코드의 분리: 클라이언트와 서버 사이의 상호작용을 모킹함으로써 실제 서버의 동작과 테스트가 분리되어, 테스트가 실제 환경을 제대로 반영하지 못할 수 있다.구현 세부사..

• format_list_bulleted 개발관련/Front End
• · 2024. 5. 31.
• textsms