본문 바로가기

분류 전체보기

 (101)
[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배수 디자인 고려할 점(해상도, 배율, 뷰포트) 상황 설명제가 사용하는 환경은 "Windows 10 Pro, 해상도 1920x1080, 뷰포트 1536x703, 디스플레이 배율 125%"입니다.이 상태에서 타겟 사용자의 디스플레이를 MacBook Pro로 정하고, 피그마에서 1280x832 크기의 프레임으로 디자인을 진행해야 한다면, 어떻게 디자인을 해야 하고 이를 내 환경에서 어떻게 해석해 개발해야 할까요? 여기서 중요한 점은, 해상도 자체는 문제 되지 않는다는 것입니다. 해상도는 하드웨어가 가진 픽셀 수 차이일 뿐 개발자가 바꿀 수 있는 영역이 아닙니다.혼란의 원인은 개발자가 사용하는 PC(예: Windows 125% 배율, 특정 뷰포트)에서 디자인이 의도와 다르게 보이는 상황입니다.따라서 개발자는 자신의 환경을 타겟 사용자 환경(MacBook P..
[WEB] 디스플레이 해상도 디스플레이 해상도가 높을 수록브라우저는 더 많은 내용을 한 번에 보여줄 수 있다. ## 개발 진행할 때 고려할 점 ✅ 다양한 해상도에 지원되어야 한다: 사용자마다 해상도와 배율 설정이 다를 수 있다.EX) 고해상도 유저(2560x1440, 4K 해상도), 노트북 사용자(1366x768, 낮은 해상도) ✅ 반응형 웹 디자인 필요하다.: 다양한 화면 크기(모바일, 태블릿, 데스크톱)와 해상도에서 사용자에게 최적의 경험을 제공해야 한다. 화면 크기에 맞게 UI가 자동으로 조정되도록 해야 한다. 🤔🤔🤔그렇다면 적응형 웹 디자인은 안 쓰이는가???: 아주 가끔 쓰인다. 로딩 속도 빠름, 특정 해상도에서 최적화된 정밀한 제어 가능.But, 320px, 768px, 1024px에 대한 고정 레이아웃을 개발해둔 ..
[SEAYA] Jira + Bitbucket, GitHub PR 추적, 트러블 슈팅 Bitbucket을 사용해서 remote 두 개를 관리할 수 있다. 그런데, PR제목은 사람이 적는거였다. 단지, LR-21만 적어주면 지라에서 추적을 해준다는 점!!! ✅ 경로 별칭 설정vite.config.js와 tsconfig.json에서 경로 별칭 설정을 해도ESLint는 인식하지 못한다.=> 따라서 eslint-import-resolver-alias 패키지를 설치한 뒤, .eslintrc.cjs에서 추가로 경로 별칭을 명시해줘야 한다. 'import/resolver': { alias: { map: [ ['@assets', './src/assets'], // Vite에서 사용 중인 별칭 추가 ['@components', './src/co..
[WEB] 모바일 중심 서비스 설계: 적응형·반응형과 모바일 웹·웹앱·PWA 비교 📱 모바일 중심 서비스 설계: 적응형·반응형과 모바일 웹·웹앱·PWA최근 모바일 환경에서 어떻게 서비스를 설계하고 제공할 것인가에 대한 고민이 많았습니다.특히,화면 설계(UI/Layout 관점): 적응형 vs 반응형제공 방식(Service/Strategy 관점): 모바일 웹 vs 웹앱 vs PWA이 두 축이 혼재되어 쓰이는 경우가 많아 개념을 정리할 필요가 있었습니다. 이 글에서는 주로 모바일 환경 중심에서, 화면 설계 방식과 제공 방식을 어떻게 선택할 수 있는지 다룹니다.👉 PC와 모바일을 아우르는 운영 전략까지 확장된 내용은 다음 글에서 별도로 정리했습니다: [WEB] 웹 운영 전략과 레이아웃 설계: PC·모바일을 아우르는 접근1. 모바일 환경에서의 고민: 어떻게 화면을 설계할 것인가?모바일 서비..
[Git] git 브랜치 흐름 관리 Q. main에서 분기된 feature/login에서 작업하고 있는데 다른 동료가 main에 작업물을 merge했어. 이때, feature/login을 원격 레포지토리에 올리려면 어떻게 해야 해? git checkout maingit pull origin mainmain 브랜치 업데이트 git checkout feature/logingit mergin mainfeature/login 브랜치 업데이트if) 충돌 발생하면 해결하고 병합 마무리하기!!! 이후에 feature/login 작업 내용 원격 레포지토리에 push.
[SEAYA] ESLint/Prettier Airbnb 스타일 + TypeScript 설정 >> ESLint: 잠재적인 버그를 발견하고, 코드 스타일(들여쓰기, 공백 등)을 검사함. 뿐만 아니라 코드의 오류, 잘못된 패턴을 찾아냄.>> Prettier: 오로지 코드의 포맷팅을 다루는 도구. 코드가 일관된 형식을 갖추도록 한다. 매우 엄격하게 코드를 재포맷함. => ESLint와 Prettier의 코드 스타일 규칙이 충돌할 수 있다. ✅ Prettier와 ESLint의 중복 해결"eslint-config-prettier" : Prettier와 충돌하는 ESLint의 모든 스타일 규칙을 비활성화한다. Prettier가 코드 포맷팅을 전담하도록 한다. ESLint는 코드 스타일 규칙과 관련된 경고를 출력하지 않는다.{ "extends": [ "eslint:recommended", "pl..
[FE] 디스플레이 해상도 해상도: HD, FHD, QHD총 픽셀 수가 곧 화소 수이며, 화소 수가 높을수록 선명하다. 고해상도란?: 동일면적에 얼마나 많은 픽셀이 포함되느냐 (PPI) 해상도가 높아지면 글자나 이미지 크기가 작아지는 현상이 발생한다.Why?: 동일한 디스플레이 크기에서 픽셀이 많아진다는 것은, 픽셀 하나의 크기가 작아진다는 뜻.더 작은 크기의 그림을 그릴 수 있어진다는 장점이 있다. 글자나 이미지 크기가 작아지는 현상을 다시 늘리는 것을 배율로 해결한다.But, 완벽하지 않은 해결 방식임. Window에서는 번지는 현상 발생함.https://codevang.tistory.com/173 (디테일한 설정) 윈도우 해상도와 배율 조정 (글자/화면 크기 키우기)해상도를 높이면 화면의 글자와 그림 등의 크기가 작아집니다...

티스토리툴바