반응형
관련 글 썸네일

웹폰트 tff와 woff의 차이와 성능

웹 개발에서 폰트 선택은 디자인과 사용자 경험(UX)에 큰 영향을 준다. 내가 만들고 있는 서비스가 자꾸 렌더링 할 때마다 글자가 작아졌다 원상태로 돌아오고 그러길래 왜 그러지 하고 찾아보다가 알게 된 이야기이다! 이번 글에서는 TTF와 WOFF2의 차이를 비교하고, 왜 React 프로젝트에서 WOFF2가 더 적합한지 설명하고자 한다.웹폰트란 무엇인가?웹폰트(Web Font)는 사용자의 로컬 환경에 설치된 글꼴이 아닌, 웹 서버에서 다운로드하여 브라우저가 렌더링하는 글꼴이다. Google Fonts, Adobe Fonts 등 외부 서비스를 통해 불러오거나, 직접 프로젝트에 포함시켜 사용할 수 있다.TTF( TrueType Font )의 특징1980년대 Apple과 Microsoft가 개발한 오래된 폰트 ..

  • format_list_bulleted 코딩/Web
  • · 2025. 8. 18.
  • textsms
관련 글 썸네일

CSS in JS란?

강남언니 인턴 면접 때 CSS in JS가 뭐냐는 질문을 바든 적이 있다. 나는 자신이 없기도 하고, 말로 설명을 할 자신이 없어서 모른다고 했지만 당시 면접관님의 도움을 받아 얼떨결에 답변을 할 수 있었다. 오늘 꿈에서 일하던 날이 나와서 블로그를 작성해보고자 한다!CSS in JS란?CSS in JS는 말 그대로 JavaScript 코드 안에서 CSS를 작성하는 방식이다. (면접 때도 js의 특징을 먼저 물어보면서 나의 답변을 유도해주셨다..하하 Thanks to CT)일반적인 CSS 파일이 아닌, 컴포넌트 내부에서 스타일을 선언하고 관리한다. 대표적인 라이브러리로는 styled-components, Emotion, JSS 등이 있다. import styled from "styled-component..

  • format_list_bulleted 코딩/Web
  • · 2025. 8. 17.
  • textsms
관련 글 썸네일

디바운싱(Debouncing)과 쓰로틀링(Throttling)의 개념과 차이

웹 개발을 하다 보면 스크롤 이벤트, 검색창 입력, 윈도우 리사이즈 같은 이벤트가 너무 자주 호출되어 성능이 저하되는 경우가 많은데, 이럴 때 유용하게 쓰이는 기술이 바로 디바운싱(Debouncing)과 쓰로틀링(Throttling)이다. 이번 글에서는 두 개념의 차이와 구현 방법을 알아보고자 한다!! 1. 디바운싱(Debouncing)란?디바운싱은 이벤트가 연속해서 발생할 때, 마지막 이벤트가 끝난 후 일정 시간 동안 대기한 후에 함수를 실행하는 방식이다.즉, 사용자가 입력을 멈춘 뒤에만 함수를 실행한다.활용 예시검색창에서 사용자가 타이핑을 멈춘 뒤 API 호출창 크기 변경이 끝난 후 레이아웃 계산버튼 클릭 방지 (더블 클릭 방지)동작 예시이벤트: A ---- A ---- A ----(300ms 대기)..

  • format_list_bulleted 코딩/JavaScript
  • · 2025. 8. 12.
  • textsms
관련 글 썸네일

React에서 콘솔 로그 안뜨게 하는 방법 (개발·배포 환경별 설정)

React 프로젝트를 개발하다 보면 console.log, console.warn, console.error 등이 브라우저 콘솔에 출력되어 화면을 어지럽히는 경우가 많은데. 배포 환경(production)에서는 보안과 깔끔한 UI/UX를 위해 콘솔 출력을 완전히 제거하는 것이 좋다.이번 글에서는 React에서 콘솔에 아무것도 뜨지 않게 하는 방법을 단계별로 정리보고자 한다!1. 개발 환경에서 콘솔 출력 최소화하기개발 중에는 디버깅을 위해 console.log가 유용하지만, 불필요하게 많은 로그는 오히려 작업 속도를 늦출 수 있다.아래처럼 조건부 로그 출력을 적용하면 필요한 경우에만 콘솔이 찍힌다.if (process.env.NODE_ENV === 'development') { console.log('개..

  • format_list_bulleted 코딩/React
  • · 2025. 8. 12.
  • textsms
관련 글 썸네일

Web Workers와 성능 최적화

웹 애플리케이션의 기능이 점점 복잡해지면서 JavaScript 성능 최적화는 프론트엔드 개발의 필수 과제가 되었다. 특히 무거운 연산이나 대용량 데이터 처리가 필요한 경우, 메인 스레드(Main Thread)가 이를 모두 처리하면 UI 렌더링이 멈추는 현상(프리즈)이 발생할 수 있다. (근데 난 아직 못 본 거 같다..) 이때 브라우저에서 제공하는 Web Workers(웹 워커)를 활용하면 성능 저하 없이 부드러운 사용자 경험을 제공할 수 있다고 해서 공부를 해보았습니다람쥐! https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers Using Web Workers - Web APIs | MDNWeb Workers..

  • format_list_bulleted 코딩/Web
  • · 2025. 8. 10.
  • textsms
관련 글 썸네일

클래스형 컴포넌트와 함수형 컴포넌트의 차이

한 줄 차이클래스형: class로 만들고 this를 사용하며 라이프사이클 메서드로 상태와 부수효과를 관리한다.함수형: 함수와 Hook으로 상태와 부수효과를 선언적으로 관리한다. 보일러플레이트가 적고 최신 기능이 집중된다.핵심 비교 표항목클래스형 컴포넌트함수형 컴포넌트선언 방식class extends React.Componentfunction 또는 화살표 함수상태 관리this.state, this.setState(얕은 병합)useState, useReducer(교체식, 직접 병합)부수효과componentDidMount/Update/UnmountuseEffect(의존성 기반, 정리 함수)최적화PureComponent, shouldComponentUpdateReact.memo, useMemo, useCallb..

  • format_list_bulleted 코딩/React
  • · 2025. 8. 8.
  • textsms
반응형