김성원의 코딩 일기

해상도(x1, x2, x3)에 적합한 이미지 크기를 정할 때, 해상도 배율을 고려한 "정확한 배수"를 맞추는 것이 중요함! x1, x2, x3 해상도란?x1 (기본 해상도, 1배) → 일반 모니터 (예: 1920x1080)x2 (레티나 해상도, 2배) → 고해상도 디스플레이 (예: MacBook Retina)x3 (초고해상도, 3배) → 최신 스마트폰 (예: iPhone Pro) 예제:만약 기본 크기가 100px인 이미지라면?해상도크기(px)x1 (1배)100pxx2 (2배)200pxx3 (3배)300px 해상도 대응할 때 좋은 팁1. srcset을 활용해 해상도별 이미지 제공 →  이렇게 하면 고해상도 디스플레이에서 자동으로 최적의 이미지를 선택 2. CSS로 background-image 활용 (미디..

나는 si 업체에서 react, ts로 프론트를 개발하고 있다. 기존 html, css, js, jquery로 코딩을 하다. 올해부터 프론트는 react, ts로 코딩하기로 했다.  react 디자인 패턴 - 독학으로 react, ts를 공부하고 업무로 사용하는 것을 처음이라 고민을 많이 했다. 우선 디자인 패턴을 정하고 그것에 맞추어 작업한 적이 없어 이번은 디자인 패턴에 맞추어 작업할 것이며 지금 진행 중에 있다. 백엔드 api도 규격화가 되어 있어 다른 프로젝트들에서도 재사용이 가능한 컴포넌트들은 Container & Presentational 또는 Composition으로 하고 있으며 page들은 Custom Hook으로 진행하고 있다. 컨테이너 & 프레젠테이션 패턴 (Container & Pre..

12 배수 (12-column grid system)는 반응형 웹 디자인에서 매우 인기 있는 레이아웃 시스템으로, 특히 CSS Grid나 Flexbox를 사용한 레이아웃에서 널리 채택되고 있다. 그 이유와 함께 12개의 컬럼을 사용하는 방식이 이류는 아래와 같다 1. 12 배수 시스템의 이유1.1. 나누기 쉽기 때문12라는 숫자는 균등하게 나누기 좋은 숫자이기 때문이다. 12는 다음과 같은 방식으로 나눌 수 있다.1, 2, 3, 4, 6, 12 등으로 나눌 수 있어, 유연하게 다양한 크기의 칸을 만들 수 있다.이렇게 나누기 좋은 특성 덕분에, 다양한 크기의 모바일, 태블릿, 데스크톱 레이아웃에서 유연하게 사용할 수 있다.1.2. 여러 화면 크기에서 유연성 제공12개의 컬럼을 기준으로 하게 되면, 화면 크..

1. 적응형 디자인이란?적응형 디자인(Adaptive Design)은 기기별(데스크톱, 태블릿, 모바일 등)로 별도의 UI 디자인을 적용하는 방식이다.즉, 미리 정해진 몇 가지 화면 크기에 맞춰 각기 다른 레이아웃을 제공하는 방식이다. 핵심 개념모든 화면 크기에 유동적으로 대응하는 반응형 디자인(Responsive Design)과 달리, 미리 정의된 몇 가지 해상도에 맞춰 각각 다른 디자인을 준비하는 방식.기기마다 최적화된 UI를 제공할 수 있어서 성능을 최적화하고 더 나은 사용자 경험을 제공할 수 있음.일반적으로 데스크톱, 태블릿, 모바일 등의 특정 해상도에 따라 다른 스타일과 레이아웃을 적용함. 2. 적응형 디자인의 규격 정의적응형 디자인에서 일반적으로 사용되는 해상도 규격은 아래와 같다.기기 종류일..

반응형 디자인은 웹 페이지가 다양한 화면 크기(모바일, 태블릿, 데스크톱 등)에서 일관된 사용자 경험을 제공하도록 설계하는 방법이다.해상도나 기기의 화면 비율이 달라도 콘텐츠가 자연스럽게 조정되도록 하는 것이 목표며,반응형 디자인을 구현하는 주요 방법은 CSS 미디어 쿼리, 유동적인 레이아웃, Flexbox 및 Grid 활용이 있다. CSS 미디어 쿼리 사용미디어 쿼리(Media Queries)는 특정 화면 크기에 따라 CSS 스타일을 다르게 적용할 수 있도록 해주며,이걸 이용하면 작은 화면에서는 요소를 세로로 배치하고, 큰 화면에서는 가로로 배치하는 식의 조정이 가능하다.@media (max-width: 768px) { .container { flex-direction: column; }} 이..

HTML에서 스타일 적용 방식- html에 스타일을 적용하는 방법은 3가지가 있다.인라인 스타일 (style="")내부 스타일 (클릭 3. 외부 스타일 React에서 스타일 적용 방식- React에도 스타일을 적용하는 방법은 3가지가 있다.인라인 CSS (style={{}})CSS-in-CSS (.css 파일 사용)CSS-in-JS (styled-components, Emotion)적용 방식설명특징인라인 CSSJSX에서 style 속성을 객체 형태로 사용JS 값을 직접 스타일로 사용할 수 있지만 성능 이슈 (렌더링 시 새로운 객체가 생성됨)가 있으며 미디어 쿼리, hover, :before 등의 기능 사용 불가능함CSS-in-CSS기존 CSS 방식과 동일, className으로 적용기존 CSS와 동일한 ..

- react의 생명주기는 총 4개가 존재함. 1. 렌더링정의: 함수가 실행되거나 컴포넌트에서 UI를 그려지는 과정초기 렌더링: 처음으로 컴포넌트가 그려지는 것리렌더링: state나 props가 변경되었을 때 다시 그려지는 것const MyComponent = ({ text }: { text: string }) => { console.log("렌더링"); return {text};}; 2. 마운트컴포넌트가 생성되어 DOM레 추가되는 과정 초기에 한 번만 실행된useEffect(() => {}, [])관련 용어용어설명초기화 (Initialization)컴포넌트가 처음 만들어지는 과정Hydration서버에서 렌더링된 HTML을 React가 활성화하는 과정 (SSR 관련) 3. 업데이트 컴포넌트의 stat..

- 이미 만들어져 있는 hook과 util을 구분하는 것은 쉽다. 그런데 커스텀 hook과 util을 만들 때는 그냥 만들지 않고 명확한 기준점이 필요하다.1. util (Utility Funcions)정의: 특정 기능을 다양한 곳에서 재사용하기 위해 일잔적인 기능을 함수로 만들어 놓음.특징: 상태나 React의 생명주기와 무관하며 어디서든 호출 가능함.예제:// utils/format.tsexport const formatDate = (date: string) => { return new Date(date).toLocaleDateString();}; 2. hook (Custom Hook)정의: react의 상태나 생명주기를 활용하는 함수이며 재사용 가능한 상태 로직을 캡슐화함.특징: useState,..

1. 상태 관리란?상태란? 특정 시점에서 가지고 있는 데이터를 의미하며, 보통 사용자의 입력, UI의 변화 네티워크 요청 결과 등임.상태 관리란? 테이터(상태)를 효과적으로 유지하고 업데이트하는 방법을 의미함. 2. 상태 관리가 필요한 이유상태가 많아지면 컴포넌트 간 데이터 전달이 복잡해지고 유지보수가 어려워 체계적으로 생태를 함. 그래서 상태 관리를 위한 도구나 패턴을 사용함.  2-1 상태 관리 라이브러리를 써야 할 때상태가 많고 컴포넌트 간 공유가 많을 때상태가 여러 곳에서 변경될 때네트워크 상태(비동기 데이터)를 효과적으로 관리할 수 때 3. 상태 관리 방법로컬 상태 (Local State) -> useState, useReducer: 컴포넌트 내부에서만 관리하는 상태전역 상태 (Global, S..

동작 방식 변수는 데이터를 할당 및 재할당할 때 사용한다. 변수에 값을 할당하면 메모리 셀 어딘가에 할당한 data가 저장되고 data가 어디 있는지 알려주는 메모리 주소가 주어진다. 선언한 변수 명은 주어진 메모리 주소를 가리킨다. null, nudefined vlaue - 할당된 값이 있음 null - 할당된 값이 없음 nudefined - 할당된 값이 있는지 없는지 모름