웹폰트 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

CSS 변수(CSS Custom Properties)란?

CSS 변수(CSS Custom Properties)는 웹 개발에서 가장 많이 활용되는 기술 중 하나인데, 특히 반응형 웹, 다크 모드, 테마 관리와 같은 프로젝트에서 많이 쓰인다. 이번 글에서는 CSS 변수의 개념부터 사용법, 그리고 실제 styled-components 같은 CSS-in-JS 환경에서의 활용까지 자세히 다뤄보고자 한다.!CSS 변수란 무엇인가?CSS 변수는 말 그대로 CSS에서 사용할 수 있는 사용자 정의 값이다. 전통적으로 색상이나 폰트 크기를 바꾸려면 모든 CSS 속성을 일일이 수정해야 했다. 하지만 CSS 변수를 사용하면 공통 속성을 한 곳에서 정의하고 여러 컴포넌트에서 재활용할 수 있어 유지보수가 크게 편해진다.:root { --main-color: #3498db; --te..

• format_list_bulleted 코딩/Web
• · 2025. 8. 17.
• textsms

Jest에 대해 알아보자

인턴생활을 하면서 처음 접하게 되면서 많이 사용했던 Jest에 대해 정리해보고자 한다..!Jest란?처음 Jest 공식 홈페이지를 들어가면 다음과 같이 적혀있는걸 확인할 수 있다.Jest는 단순함에 중점을 둔 즐거운 JavaScript 테스트 프레임워크입니다. 이 프레임워크는 Babel, TypeScript, Node, React, Angular, Vue 등 다양한 프로젝트와 함께 사용할 수 있습니다! 즉 Jest는 JS의 테스트를 위해서 만들어진 프레임워크인 것인데, 더 자세히 알아보도록 하자.2. Jest의 탄생 배경Jest는 2014년, 페이스북(Facebook)이 자체적으로 React 프로젝트를 테스트하기 위해 개발한 테스트 프레임워크이다.당시 JavaScript 테스트 도구는 존재했지만, 설정이..

• format_list_bulleted 코딩/Web
• · 2025. 8. 5.
• textsms

로컬스토리지(LocalStorage), 세션스토리지(SessionStorage), 쿠키(Cookie)의 차이점

웹 애플리케이션을 개발하다 보면 클라이언트 측에 데이터를 저장할 필요가 생긴다. 대표적으로 사용되는 기술이 LocalStorage, SessionStorage, Cookie이다. 이 글에서는 각 저장 방식의 특징과 차이점, 그리고 언제 어떤 걸 쓰는 게 좋은지에 대해 정리해본다. 1. LocalStorage브라우저에 영구적으로 데이터를 저장할 수 있는 방법 -> 내 브라우저 안의 보관함용량: 약 5~10MB (브라우저마다 다름)만료 시점: 사용자가 명시적으로 삭제하지 않는 한 영구 저장브라우저/탭 간 공유: 동일 출처(origin) 내에서는 모든 탭/창에서 공유HTTP 요청에 포함: ❌ 포함되지 않음API: localStorage.setItem(key, value) / localStorage.getIte..

• format_list_bulleted 코딩/Web
• · 2025. 7. 23.
• textsms

TypeScipt - zod 라이브러리

zod 라이브러리란?Zod는 TypeScript 및 JavaScript 프로젝트에서 입력 데이터를 *스키마로 정의한 후 이를 기반으로 유효성 검사를 가능하게 도와주는 라이브러리이다. Zod를 사용하면 간단한 문법을 통해 데이터 검증과 변환을 동시에 작동할 수 있다. 주로 API 요청과 서버 응답, 폼 데이터 등의 데이터를 안정적으로 검증할 때 사용할 수 있다. 그렇다면 사용 방법에 대해 알아보자 *스키마란 데이터를 구조화하고 해당 데이터에 대한 규칙과 제약을 정의한 것이다. 기본 스키마 정의 및 유효성 검사기본 타입 스키마 정의Zod를 통해 여러 기본 타입을 검증할 수 있는 스키마를 정의할 수 있다.  또한 예시와 같이 기본 타입에 추가적인 검증 규칙을 정의할 수 있다.import { z } from '..

• format_list_bulleted 코딩/TypeScript
• · 2024. 10. 17.
• textsms