분류 전체보기58 기존 Vite + React 프로젝트에 TypeScript 추가하기 (마이그레이션 정리) 📚사이드 프로젝트를 새로 시작했다.기존에 세팅은 되었던 프로젝트라, Vite + React(JavaScript) 프로젝트에 TypeScript를 추가하면서 겪었던 과정과 필요한 설정을 정리해보았다.1. TypeScript 설치먼저 프로젝트에 TypeScript와 React 타입을 설치한다.npm install -D typescript @types/react @types/react-dom설치가 완료되면 TypeScript 설정 파일을 생성한다.npx tsc --init그러면 프로젝트 루트에 tsconfig.json 파일이 생성된다. 2. tsconfig.json 설정기본 생성된 tsconfig.json을 Vite 환경에 맞게 일부 수정했다.{ "compilerOptions": { "target":.. 2026. 3. 12. Git 커밋 이력 변경하기 (작성자, 날짜 수정하기) Git을 사용하다 보면 커밋 메시지를 잘못 작성했거나 민감한 정보가 커밋에 포함된 경우처럼 커밋 이력을 수정해야 하는 상황이 생긴다.나는 내 개인 레포지토리에 회사 계정으로 커밋을 해버렸다. Contributors에도 회사 계정이!..회사PC를 사용하면서 유저를 변경하지 않고 신나게 커밋해버린 실수.. 이 글에서는 여러개의 커밋 이력을 변경하는 방법을 정리했다. ⚠️ 주의: 나는 나 혼자 쓰는 개인 레포였지만, 공유 브랜치에서 작업할 경우 팀원들에게 큰 영향을 줄 수 있으므로 반드시 주의할 것! 참고) VSCode 기준 Git Bash 터미널에서 진행했다. 1. 유저 변경git config --global user.name 유저이름 git config --global user.email 유저이메일 .. 2025. 12. 19. 모바일 UI 디자인 시스템과 프론트엔드에서 디자인 시스템 적용하기 😌요즘 휴대폰의 화면비율은 정말 다양하다.미니 사이즈의 선호도가 줄고 휴대폰의 평균 사이즈가 커졌어도 작은 기종을 고려하지 않을 수 없다.어떤 기기는 세로 길이가 667px 정도로 작고, 어떤 기기는 882px 이상으로 꽤 크다.그래서 디자인 시안을 바탕으로 프론트엔드 개발을 하다 보면 이런 고민이 생긴다.UI 요소 크기는 작은 화면 기준으로 해야 할까? 큰 화면 기준으로 해야 할까?작은 사이즈에서는 페이지 디자인이 "예뻐"보이는데 큰 사이즈에서는 적절하지 않아보인다면.. 어떻게 해야할까? 고민을 바탕으로모바일 UI를 디자이너 관점에서 어떻게 설계하는지그리고 프론트엔드에서 디자인 시스템을 어떻게 구현하는지를 가볍게 정리해보았다. 1. 모바일 UI는 어떤 화면 기준으로 디자인할까?웹 디자인을 배워보질 않.. 2024. 1. 20. CSS position: sticky 제대로 이해하기 (왜 고정이 안 될까?) 👽여태 브라우저의 헤더나 하단 바를 만들 때는 보통 position: fixed를 사용해왔다. 그런데 무신사나 지그재그 웹 브라우저처럼 레이아웃이 모바일 사이즈(max-width)로 고정된 구조에서는fixed를 사용하면 요소가 max-width로 제한된 레이아웃을 벗어나 좌우 바깥으로 튀어나오는 현상이 생긴다.( fixed는 뷰포트 기준으로 고정되기 때문 )지그재그 웹을 살펴보니 헤더에 position: sticky가 사용되고 있었다.그래서 같은 방식으로 sticky를 적용해봤지만 고정이 안 됐다.같은 sticky 속성을 사용했는데 왜 고정이 안 될까?원인을 찾는 과정에서 별거 아닌 내용일 수도 있지만 작은 CSS 동작 원리를 하나 새롭게 알게 되어 정리해본다. 결론)position: sticky는 .. 2023. 12. 12. "리액트는 가상 DOM을 사용하여 성능을 최적화합니다." 가 무슨 말이야? ☕프론트엔드를 공부하다 보면 한 번쯤은 이런 문장을 보게 된다.“리액트는 가상 DOM(Virtual DOM)을 사용하여 성능을 최적화합니다.” 그런데 처음 보면 이게 무슨 말인지 꽤 추상적으로 느껴진다.이 문장이 실제로 무엇을 의미하는지, 그리고 왜 성능이 좋아지는지 정리해보았다.1. DOM이란 무엇인가?먼저 DOM(Document Object Model)부터 이해해야 한다.웹페이지는 내부적으로 DOM 구조로 관리되는데, 쉽게 말하면브라우저는 우리가 작성한 HTML을 그대로 사용하는 것이 아니라 트리 구조의 객체 형태(DOM)로 변환해서 관리한다. 예를 들어 제목 내용이 코드는 브라우저 내부에서 다음과 같은 구조로 관리된다.bodyh1p이러한 구조를 DOM이라고 한다. 2. 문제: DOM을 직접 수정.. 2023. 9. 13. 사용자 관점의 UI 구성하기 💭 서론인턴십 기간 동안 실제 프로젝트에 투입되진 못했지만 우리 부서가 개발 중인 서비스의 유사 서비스 업체의 랜딩페이지 클론 업무를 하게 되었다.업무를 진행하며 어쨌든 내게 주어진 일이다보니 구현에 급급했는데, 팀장님께서 구현하는 것에만 급급해 하지 말고 레이아웃 목업부터 시작해 사용자 관점을 생각해보라고 피드백을 주셨다.기억에 많이 남는 피드백이었어서 따로 기록해본다. 1. 어설픈 반응형 보단 스크롤 적용을완전한 반응형 구현에 미숙했던지라 뷰의 사이즈에 따라 컨텐츠가 잘려 보이지 않는 순간들이 존재 했었는데,반응형보다 우선시 되어야 할 것은 사용자가 보는 컨텐츠는 어느 순간에도 보이지 않으면 안 된다는 것이다.따라서 어설픈 반응형을 구현하려다 컨텐츠 안 보임 이슈를 발생시키지 말고 min-width.. 2023. 9. 5. 이전 1 2 3 4 ··· 10 다음
