본문 바로가기

전체 글

 (115)
[FE] CSS 컨벤션 .selector { /* 박스 모델 */ display: flex; position: relative; top: 0; margin: 10px; padding: 15px; /* 크기 */ width: 100%; height: auto; /* 테두리 및 배경 */ border: 1px solid #ccc; border-radius: 5px; background-color: #f5f5f5; /* 텍스트 및 글꼴 */ font-size: 16px; color: #333; text-align: center; /* 기타 */ cursor: pointer; transition: all 0.3s ease;}
[Web] 프로젝트 디자인 협업 진행 - 논리적 픽셀 크기window.innerWidth: 1512window.innerHeight: 982=> 논리적 픽셀 크기: 1512x982. i.e) 뷰포트 크기와 동일하게 동작함. 디스플레이 해상도는 물리적 픽셀 크기를 뜻함. - DPR & 운영체제 배율window.devicePixelRatio: 1.25 i.e) DPR(픽셀 비율): 1.25=> 운영체제 배율(125%)은 자동으로 브라우저에서 DPR에 반영됨. 운영체제 배율과 DPR은 다른 개념!!! Ex)고해상도 이미지는 DPR 기반으로 제공@media screen and (min-resolution: 192dpi) { .image { background-image: url('image@2x.png'); }}텍스트와 레이..
[SMAAP] TS 타입 정의 궁금증 naver.map의 타입 정의를 하는데 의문이 생김. 네이버 지도 script를 가져올 때 문제가 발생한다면, 인스턴스를 생성하기 전부터 이미 오류가 발생하지 않나?따라서 오류 검증이 충분히 된 상태인데, 굳이 map인스턴스의 타입을 null 허용해야 하는지 궁금증이 생김. interface MapContextType { map: naver.maps.Map | null; // 지도 인스턴스 객체 userCity: string; // 사용자 시도별 위치를 저장할 상태 userCoordinates: { latitude: number; longitude: number } | null; // 사용자 좌표 상태 setMapInstance: (mapInstance: naver.maps.Map) => void..
[SMAAP] npx와 npm 차이 왜 npx create-react-app my-app이라고 작성해야 할까? 우선 npx는 npm내부의 유틸리티이다. npm이 더 큰 개념. npm안에 npx가 존재한다. npx는 주로 한번만 실행할 명령어 or 전역 설치 없이 즉석에서 바로 실행할 패키지를 다룰 때 사용한다.=> node_modules 설치 없이 사용할 명령어에 사용하는 것. npm create-react-app my-app를 하려면, create-react-app이라는 패키지를 사용해야하므로npm install -g create-react-app으로 패키지의 전역 설치가 우선되어야만 한다. 이런 번거로움을 해결하기 위해, 전역 설치가 불필요한 npx를 사용하는 것!!!
[SMAAP] 트러블슈팅 ESLint 9.0.0 ESlint 세팅 끝나고 제대로 됐는지 확인하려고// 좀 더 일반적인 방법. 재귀적으로 탐색.eslint src/ --ext .js,.jsx,.ts,.tsx// 세밀한 분석 가능. Glob 방식.eslint "src/**/*.{js,jsx,ts,tsx}"위의 명령어 실행함. 그런데 ESLint v9.0.0 이상부터는 eslint.config.js만 지원이 된다고 한다...!!! ICT때의 절망을 느끼지 않기 위해 빠르게 다운그레이드함."eslint": "^8.0.0",
[SMAAP] .editorconfig vs .prettierrc.js vs .eslintrc.js .editorconfig : 다양한 개발환경, 에디터(IDE)에서의 파일 형식 일관성 유지. 에러나 경고를 표시하지 않음. 모든 파일 형식 지원(언어 무관) .prettierrc.js : 줄바꿈, 들여쓰기, 괄호 위치, 세미콜론 등 매우 구체적인 코드 스타일 적용 .eslintrc.js : 문법 오류, 코드 스타일 등 코드의 품질 및 스타일 관리.
[SMAAP] 템플릿 vs 보일러플레이트 Vite는 템플릿이다. XVite는 템플릿의 성격을 가진다. O=> Vite는 개발 도구고, 템플릿은 단순히 기본 구조를 제공한다는 개념일 뿐이다. 기본 CRA는 public/, src/를 생성하기에 보일러플레이트의 성격을 가짐.But, --template 옵션을 통해 프로젝트 생성할 때 여러 커스터마이징 가능하기에 템플릿 성격도 가지고 있음.
[SEAYA] 트러블 슈팅 모달창 선 그리는 방법1. padding, margin 조절. (적절하지 않음. XXX) 2. 가상 요소 사용하기.menu-option { position: relative; /* 가상 요소의 절대 위치를 위한 상대 위치 지정 */ &:not(:last-child)::after { content: ''; position: absolute; bottom: 0; left: 10px; right: 10px; border-bottom: 1px solid #ddd; /* 원하는 색상으로 변경 */ }}.option-button { width: 100%; padding: 10px; &:hover { background-color: #e0e0e0; } &:focus { ..
[WEB] 웹 운영 전략과 레이아웃 설계: PC·모바일을 아우르는 접근 🌐 웹 운영 전략과 레이아웃 설계: PC·모바일을 아우르는 접근웹 서비스는 더 이상 특정 기기만을 전제로 하지 않습니다.사용자는 PC와 모바일을 오가며 서비스를 이용하고, 서비스 제공자는 그 과정에서 일관된 경험을 제공할지, 혹은 기기별로 최적화된 경험을 분리할지를 선택해야 합니다. 이때 중요한 두 가지 축은 다음과 같습니다.운영 전략(Service Strategy / Product 관점): PC·모바일을 어떤 방식으로 나눠서 운영할지 (예: PC/모바일 웹 분리 vs 단일 반응형 웹앱)레이아웃 설계(Layout Design / Frontend 관점): 동일한 코드베이스에서 화면을 어떤 방식으로 대응·구성할지 (예: 고정형 모바일 레이아웃 vs 모바일 퍼스트 반응형)앞선 글에서는 모바일 중심으로 적응형..
[Git] git branch -d 브랜치 캐싱 Git은 기본적으로 원격 브랜치가 삭제되었더라도 그 정보를 즉시 로컬에서 업데이트하지 않으며, 캐싱된 정보를 계속 사용합니다. 따라서 원격에서 이미 삭제된 브랜치라도, 로컬에서는 해당 브랜치가 남아있는 것처럼 행동하고 checkout 시에 자동으로 추적 브랜치를 생성하게 됩니다.그래서 삭제한 로컬 브랜치도 tab사용하면 자동완성이 될 때가 있다는거...??: 비슷한 이유, Git의 캐시나 리플렉트된 원격 참조가 남아있기 때문입니다. => 결론: 요약하자면, 원격 브랜치가 삭제되었지만 로컬에서 해당 정보를 업데이트하지 않았기 때문에 checkout 시에 원격 캐시 정보를 기반으로 추적 브랜치가 자동 생성된 것입니다 이를 방지하기 위해서는 git fetch -p로 원격과 로컬의 정보를 동기화하는 것이 좋다...
[SEAYA] 모달창 구현 시 UX/접근성/스크린 리더 고려. useModal 사용한 모달창 구현import { useState } from 'react';const useModal = () => { const [isOpen, setIsOpen] = useState(false); const openModal = () => setIsOpen(true); const closeModal = () => setIsOpen(false); return { isOpen, openModal, closeModal, };};export default useModal;기본 모달창 생성.import React from 'react';import './Modal.scss';interface ModalProps { isOpen: boolean; onClose: (..
[WEB] 피그마 협업 시 1배수 디자인 고려할 점(해상도, 배율, 뷰포트) 📘 이 글을 읽기 전에 먼저 최신 개념 정리 편을 확인하는 것을 권합니다해상도, 물리/논리 픽셀, DPR·DPI Scaling, Figma 프레임 같은 기본 개념을 먼저 이해하면 이후 글의 흐름을 훨씬 쉽게 따라갈 수 있습니다. 따라서 아래의 최신 개념 정리 편을 먼저 읽어보기를 권합니다.👉 먼저 읽으면 좋은 글: [디스플레이 해상도 / 뷰포트 / Scaling 개념 총정리] 상황 설명제가 사용하는 환경은 "Windows 10 Pro, 해상도 1920x1080, 뷰포트 1536x703, 디스플레이 배율 125%"입니다.이 상태에서 타겟 사용자의 디스플레이를 MacBook Pro로 정하고, 피그마에서 1280x832 크기의 프레임으로 디자인을 진행해야 한다면, 어떻게 디자인을 해야 하고 이를 내 환경..

티스토리툴바