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

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

[React] 이미지 로딩, 렌더 사이 깜박임 현상 해결하기

기본적인 skeleton을 구현한다면, 이미지를 불러오는 동안 (로딩 되는 동안) 스켈레톤 UI가 잘 작동 하지만, 이미지를 불러오고 나서, 렌더되는 사이에 오른쪽에서 왼쪽으로 버벅거리며 렌더되는 현상이 있습니다.Image의 src를 Control할 수 있게 state로 변경하여, 이를 개선해보고자 합니다.import { useEffect, useState } from 'react';import styles from "./index.module.css";function ImageComponent(props) { const [imageBlob, setImageBlob] = useState(null); const [isLoading, setIsLoading] = useState(false); useEf..

• format_list_bulleted 개발관련/React
• · 2024. 9. 5.
• textsms

스토리북 조금 더 잘 사용하기. Auto Docs, decorators, play function. feat Storybook 8.2

글쓰고 있는 현재 스토리북은 8.2버전까지 출시되었습니다. 이번 업데이트를 통해서 다양한 테스트 툴에서 사용되고 있는 jasmine 스타일의 테스트 코드로써 스토리를 작성할 수 있게끔, 러닝 커브를 줄이려는 모습을 보여주고 있다는 생각도 들고, 다른 테스트툴과의 연결성을 신경쓰는 듯한 모습을 보여주고 있어서 추후 더 기대되는 툴이라고 생각되어 글을 작성하게 되었습니다!스토리북을 처음 사용하시는 분들을 위한 글로 처음부터 차근차근 정리하는 식으로 글을 구성하였습니다.이 글은 스토리북을 사용하여 리액트 컴포넌트를 테스트하는 방법을 다룹니다. 우선 스토리북이 무엇인지 부터 알아가보도록 하죠!1️⃣ 스토리북(Storybook)이란 무엇인가?스토리북은 UI 컴포넌트 개발을 위한 오픈소스 도구입니다. 이를 사용하면..

• format_list_bulleted 카테고리 없음
• · 2024. 8. 19.
• textsms

[개발 상식] 쿠키의 HttpOnly, Secure, SameSite

HTTP 통신 중 사용자의 중요 정보를 담고 있는 쿠키를 보호하기 위한 방법으로, 여러 쿠키 플래그가 있습니다. 그 중에서도 HttpOnly, Secure, 그리고 SameSite 플래그에 대해 자세히 알아보고자 합니다.1. HttpOnly 플래그의 역할HttpOnly 플래그는 웹 어플리케이션에서 쿠키를 더 안전하게 관리할 수 있게 도와주는 설정입니다. 이 플래그가 설정된 쿠키는 클라이언트 사이드 스크립트, 즉 자바스크립트를 통한 접근이 차단됩니다.사용자가 웹 페이지에 접속할 때 서버에서 HttpOnly 플래그를 포함한 쿠키를 전송하면, 해당 쿠키는 브라우저에 저장되지만 document.cookie를 통한 직접적인 접근은 불가능해집니다.이러한 특성 덕분에, HttpOnly 쿠키는 Cross-Site Sc..

• format_list_bulleted 개발관련/개발 상식
• · 2024. 8. 15.
• 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

React + Typescript + Webpack (esbuild-loader) 설정

1. React와 TypeScript 설치먼저, React와 TypeScript를 설치하겠습니다. TypeScript 의존성은 .ts 파일을 컴파일하는 데 사용됩니다.npm i react react-domnpm i -D typescript2. Webpack 설치다음으로, Webpack을 설치합니다. Webpack은 모듈 번들러로, 개발 중과 빌드 과정에서 유용하게 사용됩니다.npm install -D webpack webpack-cli webpack-dev-server3. 로더 설치CSS 스타일을 적용하기 위해 style-loader와 css-loader를 설치합니다. 또한, 빠른 번들링을 위해 esbuild-loader를 사용할 것입니다.npm i -D style-loader css-loader esb..

• format_list_bulleted 개발관련/우아한 테크코스 6기
• · 2024. 7. 15.
• textsms