본문 바로가기

전체 글

 (115)
[WEB] 디스플레이 해상도 📘 이 글을 읽기 전에 먼저 최신 실전 정리 편을 확인하는 것을 권합니다이 글은 당시 관점으로 정리된 내용이라 여전히 참고할 부분이 있지만, 지금은 해상도·DPR·DPI Scaling·뷰포트 같은 개념을 더 명확하게 정리한 최신 실전편이 별도로 준비되어 있습니다.최신 글을 먼저 보면 이 글에서 다루는 설명과 사례들을 훨씬 수월하게 이해하실 수 있습니다.👉 먼저 보면 좋은 최신 글: [디스플레이 해상도·뷰포트·Figma 1440 총정리] 디스플레이 해상도가 높을 수록브라우저는 더 많은 내용을 한 번에 보여줄 수 있다. ## 개발 진행할 때 고려할 점 ✅ 다양한 해상도에 지원되어야 한다: 사용자마다 해상도와 배율 설정이 다를 수 있다.EX) 고해상도 유저(2560x1440, 4K 해상도), 노트북 사용..
[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..
[WEB] 디스플레이 해상도 📘 이 글을 읽기 전에 먼저 최신 개념 정리 편을 확인하는 것을 권합니다이 글은 작성 당시의 관점과 경험을 바탕으로 정리된 내용이며, 지금 읽어도 참고가 될 부분이 있습니다.다만 최신 글을 먼저 읽으면 기본 개념이 잡혀, 이 글에서 다루는 세부 내용과 사례들을 훨씬 수월하게 이해하실 수 있습니다.👉 먼저 보면 좋은 최신 글: [디스플레이 해상도·뷰포트·Figma 1440 총정리] 해상도: HD, FHD, QHD총 픽셀 수가 곧 화소 수이며, 화소 수가 높을수록 선명하다. 고해상도란?: 동일면적에 얼마나 많은 픽셀이 포함되느냐 (PPI) 해상도가 높아지면 글자나 이미지 크기가 작아지는 현상이 발생한다.Why?: 동일한 디스플레이 크기에서 픽셀이 많아진다는 것은, 픽셀 하나의 크기가 작아진다는 뜻.더 ..
[SEAYA] Vite + React + TS (Yarn 패키지 매니저) yarn create vite [프로젝트명]React. TypeScript + SWC. cd nftyarnyarn dev yarn add eslint @typescript-eslint/parser @typescript-eslint/eslint-plugin eslint-plugin-react eslint-plugin-react-hooks eslint-config-airbnb eslint-config-airbnb-typescript eslint-plugin-import eslint-plugin-jsx-a11y eslint-config-prettier eslint-plugin-prettier prettier eslint-plugin-react-refresh필요한 패키지 설치// eslint.config.js..
[FE:SEAYA] React, JavaScript의 이해 React 애플리케이션을 JSX로 구현한 후, 애플리케이션이 브라우저에 나타나는 과정. 중요 키워드: 트랜스파일,Babel, 번들링,Webpack,로더, 빌드 1. 애플리케이션 작성 및 트랜스파일(Transfile)도구: Babel (자바스크립트 컴파일러)JSX는 브라우저가 이해할 수 없다. 따라서 Babel을 사용하여 순수한 JavaScript로 변환한다.이 때, 최신 자바스크립트 문법도 구형 브라우저에서 동작할 수 있도록 변환된다. 2. 모듈 번들링 (묶음)도구: Webpack (자바스크립트 모듈 번들러) 여러 모듈들을 하나로 묶는 과정을 번들링이라 한다.여러 개의 자바스크립트 모듈과 기타 자산(CSS, 이미지, 폰트 등)을 하나 또는 여러 개의 번들 파일로 묶는다. 다양한 파일 유형(CSS, 이미..
[ICT멘토링 레벨업패스] TypeScript 컴파일 언어: 코드 전체를 한번에 해석해서, 실행할 수 있는 파일로 변환시켜주는 방식인터프리터 언어: 코드를 한 라인씩 해석하면서, 실행하는 방식 TypeScript는 컴파일 과정을 통해 JavaScript로 변환되어 사용된다. 1. 구상2. 설계: 머리속으로 구상한 것을 문서로 기록하는 것.3. 구현 컴파일과 링크를 합쳐서 "빌드" 과정이라고 부름. /* Date: 2024. 07. 17 author: dekoms remark: hello world*/함수 위에 간단하게 설명 적어주는 느낌.  자바스크립트 엔진: 콜스택, 메모리힙이 존재한다. 콜스택: 원시 타입메모리힙: 배열, 객체, 함수포인터 💯💯💯 렉시컬 환경??? 포인터 변수: 주소값을 저장하는 변수.  if문을 여러 번 작..
[poompoom] 트러블슈팅 header 여러개 사용가능하다. headermainfooter 내부에 section잡고div로 양옆 마진 잡고그 다음 콘텐츠 딱맞게 크기 조율. axios Instance 생성 후 AT 확인일반적으로는 헤더 설정에 Authorization 속성에 `Bearer ${accessToken}`을 값으로 넣음.근데 종설할 때는 왠지 모르게 헤더 속성에 접근이 안돼서 사설 속성 access를 사용함.access 속성에 직접 accessToken을 넣었음.// 요청 인터셉터axios.interceptors.request.use( (config) => { const accessToken = localStorage.getItem('accessToken'); if (accessToken) { ..
[Infra] AWS ✅EC2: 하나의 컴퓨터?(CPU)에 하나의 운영체제를 가진 서버.-> 그래서 클라우드 서비스를 사용하지 않고, 라즈베리파이를 사용해 리눅스 서버로 활용할 수도 있다. ✅SSH: 원격 Secure 프로토콜 ✅ClientServer1동작하는 프로그램(Application): React ServerServer2동작하는 프로그램(Application): Spring(WAS) DBServer3동작하는 프로그램(Application): MySQL ✅하나의 프로그램에는 하나의 포트가 필요하다. ✅S3에 .jpg .png .mp3 등 정적 파일을 저장함.그 후 S3에 저장된 정적 파일의 URL을 DB에 저장함. ✅ 아키텍처 동작과정 Web Hosting Service에서 빌드된 JS를 읽음.Client Server(..
[poompoom] 개발 순서 중간에 느낀 점 피그마 통해 디자인 기획->그에 따라 바로 via.placeholder 사용해서 이미지로 견적 짜기 거의 무적인 레이아웃 설정width: 80%;margin: 0 auto;border: 3px solid #ccc;background: #ccc; return ( 로고 {/** 추후에 컴포넌트 사용 */} 메뉴바 {/** 추후에 컴포넌트 사용 */} ); const Container = styled.div` width: 80%; margin: 0 auto;`;const ProfileHeader = styled.div` background-color: #e6e6e6; bo..

티스토리툴바