❓ 정의- 분산 버전 관리 시스템(DVCS, Distributed Version Control System)으로, 코드의 변경 사항을 추적하고 여러 개발자가 효율적으로 협업할 수 있도록 도와주는 도구❗ 사용이유 채용 공고를 보면 git 사용 경험을 우대하는 곳도 많고, 거의 필수라고 볼 수 있다.✅ 브랜치를 활용하여 독립적인 작업을 수행하고 병합 가능 ✅원격 저장소를 통해 팀원 간 코드 공유 및 협업 가능 ✅변경 이력을 저장하여 과거 코드로 쉽게 되돌릴 수 있음💠 주요 용어1️⃣ Repository- 로컬 저장소(Local Repository): 개발자가 자신의 컴퓨터에서 작업하는 공간- 원격 저장소(Remote Repository): GitHub, GitLab, Bitbucket 같은 플랫폼에 존재하..

❓ 정의- 1차원인 flex와 달리 grid는 2차원 레이아웃 시스템으로, 웹 페이지의 요소를 행과 열 단위로 배치할 수 있도록 도와주는 CSS 기능- 부모 요소인 grid container와 자식 요소인 grid item으로 구성💠 사용법1️⃣ grid 선언- grid를 사용하기 위한 첫 번째 단계다. container에 grid를 선언해준다..container{ display:grid; }2️⃣ grid-template-columns와 grid-template-rows 선언- container에 grid를 선언한 후, grid-template-columns와 grid-template-rows 속성을 사용해 grid의 (열과 행)크기를 지정해준다.- grid-template-columns : c..

❓ 정의- Flexbox(Flexible Box)는 CSS의 1차원 레이아웃 방식으로, 컨테이너 내부의 아이템을 가로 또는 세로 방향으로 정렬하고 배치할 때 사용된다.- 반응형 웹 디자인에 필수적인 기능이며, float이나 position을 사용하지 않고도 쉽게 정렬을 조정할 수 있다.❗ 특징✅ 부모와 자식 태그가 필요하고, 부모 요소(flex-container)와 자식 요소(flex-item)에 적용하는 속성이 구분되어 있다!- 속성은  컨테이너의 직계자식까지만 영향을 준다는 특징이 있으니 주의해야 함!- flex-container의 속성 : flex-direction, flex-wrap, justify-content, align-items, align-content 등- flex-item의 속성 : ..

한 프로젝트에서 회원 관리 담당인 내가 로그아웃 로직을 구현했는데, 팀원이 여기에 상태 관리 코드를 추가했다.const useUserStore = create()( persist( (set, get): UserState => ({ user: null, role: null, isAuthenticated: false, isLogin: false, accessToken: null, setAccessToken: (token) => set({ accessToken: token }), setUser: (user) => set({ user }), // 생략 logout: async () => { const {..

✅ 변수명, 함수명, 컴포넌트명 변경의미를 더 명확하게 전달할 수 있도록, 중복 가능성이 있거나 헷갈릴 만한 이름을 변경했다. ✅ 에러 핸들링switch로 감싸 case로 나눔으로써 가독성을 높였다.그리고 성공인 경우 default를 실행할 수 있도록 했다. ✅ 에러 메세지 상수처리에러 메세지를 일관성있게 유지하고, 한 곳에 모아 더 편리하게 변경할 수 있도록 src/constants/errorMessages.ts 경로에 파일을 따로 생성했다.✅ 타입 분리@types/global 경로에 api를 호출할 때 사용하는 함수들의 타입을 한 곳에 모아 관리하기 위해 각 파일에서 분리하였다.그리고 interface 이름도 일관성 있게, 더 직관적이게 살짝 변경하였다. 찾고자 하는 함수명으로 검색하면 된다.✅ 컴포..

반응형 웹을 구현할 때 가장 헷갈리는 것 중 하나가 적절한 단위 선택이다.%, vw/vh, rem/em은 각각 다른 기준점과 동작 방식을 가지고 있어서, 제대로 이해하지 못하고 사용하면 의도한 디자인과 완전히 다른 결과물이 나올 수 있다...!각 단위들의 특징과 실제 프로젝트에서 언제, 어떻게 활용하면 좋을지 정리해보고자 한다.✅ % (퍼센트) - 부모 요소 기준- 부모 요소의 크기를 기준으로 상대적인 크기를 설정🤔 언제 사용할까?  1️⃣ 컨테이너나 박스의 너비나 높이를 부모 요소에 비례하여 조정해야 할 때  2️⃣ 반응형 그리드 레이아웃을 구현할 때 (예: 12칼럼 그리드 시스템)  3️⃣ 다양한 화면 크기에서 일관된 비율을 유지해야 하는 요소들 .container { width: 80%; /* ..