creamymood의 개발 공부 발자취 💭

react-hook-form을 어떻게 쓰는지, 내가 만든 인풋이랑 연결은 어떻게 하는지 유효성 검사를 라이브러리 써서 어떻게 하는지.. 차근차근 공부 스타투,,1단계: Hook Form ?React Hook Form은 리액트에서 폼을 쉽게 관리하고, 유효성 검사까지 도와주는 도구쉽게 말하면, 입력창 값들을 알아서 관리해주고 검사해주는 라이브러리 2단계: 왜 필요한데?리액트에서 을 많이 쓰잖아. 그런데 각각의 을 useState로 관리하면 코드가 많아져.Hook Form을 쓰면 그걸 줄일 수 있어. const [email, setEmail] = useState(''); setEmail(e.target.value)} />이런 걸 생략하고, Hook Form한테 맡길 수 있어. 3단계: register가 뭐..

실무에서 자주 쓰는 인풋 관련 속성들 (React + TypeScript에서도 그대로 사용 가능)🐰속성설명예시type입력 필드의 종류 설정 (text, password, email 등)value입력값을 상태로 관리할 때 사용 (controlled component)defaultValue초기값 설정 (uncontrolled component에서 사용)onChange입력값이 바뀔 때마다 실행할 함수 setText(e.target.value)} />placeholder입력 전 힌트로 보여줄 텍스트nameform 데이터를 보낼 때 key 이름 역할id라벨(label)과 연결하거나 DOM 조작 시 사용autoFocus컴포넌트가 마운트되자마자 focus 되게 함requiredform 제출 시 반드시 입력되도록 설..

팀원분들이랑 공통 컴포넌트 만드는 걸 역할 분담 했었는데 만들어진 인풋 컴포넌트 창을 바로 가져다 쓰려고 하니까앞선 팀원분께서 인풋창에 사이즈를 고정으로 해두니까..css에 대한 확장성이 없어서,(완전히 고정된 고정값만, 공통 인풋 컴포넌트에서 지정해주고) className으로 아예 테일 윈드 스타일을 프롭스로 내려줘서 공통 인풋창이나 버튼창을 import 해서 쓰는 곳에서 아예 하드 코딩 하는 방법을 선택하기로 했다 !! 프로젝트 하며 정말 진짜 할게 많지만, 배우는게 많고정신 똑바로 차리려다보니까 좋은 점과 배울점이 더 많다 - ♥︎테일윈드 쓰고 있다면 공통 버튼 컴포넌트에서 className을 prop으로 내려주는 방식이 제일 일반적이고 유연하다.이렇게 하면 외부에서 스타일을 자유롭게 확장하거나 ..

정말 알쏭달쏭한 rebase..비유로써 먼저 이해해보기💡 from 팀원 excellent님의 비유법네가 필기노트를 쓰고 있는데, 친구가 이미 잘 정리된 최신 노트를 줬다고 해봐. 그럼 너는: "내가 쓴 내용을 친구 노트 마지막에 깔끔하게 붙여넣고 싶다" 이게 바로 rebase야. 우선 대충 감 잡아보자면..새롭게 생긴 줄에 줄 (다시) 서는 것 ! 이런 느낌 같다리베이스 공부 전에, 우선 base의 개념먼저 알아야 한다. a2에서 새로 나온 a3가 바로 b1의 베이스 !그렇다면.. 깃 리베이스란 개념이 내가 하고 있는 팀 기준으로 하면 지금 dev에서 분기되서 feature가 나왔는데 갑자기 dev2가 되면, 그 dev2로 붙이는게 rebase인가 ..? 내가 생각한 흐름이 맞는 것 같다. Reba..

React 시작 전에 분명 npm에 대해 공부했지만..막상 정확히 뭔지 모르고 따라치기만 했고 vite 프로젝트 생성할 때 생성되는 폴더나 파일들을 모르니 config 이런 파일도 모르고..어떨 때 npm i 해야하는지도 어떨 때 npm run dev 이런거 해야하는지도 모르는 상황 발생따라치기만 해서.. 응용이 안되는 상태 ⭐️ 하나 둘 씩 다시 복습도 해보고, 익히며, 내가 직접 쓸 수 있도록! Vite 프로젝트 구조 이해하기 (feat. vite.config.ts)npm run dev가 실제로 무슨 일을 하는 걸까? 리액트 + Vite 프로젝트를 처음 만들면 생성되는 파일들, 그리고 npm run dev 같은 명령어들이 무엇을 의미하고 어떻게 연결되어 있는지 알면, 앞으로 더 이상 무작정 따라치는 ..

본격적인 프로젝트가 시작되면서채널도 많고 신경쓸 것도 많고 어렵고 민폐끼치기 싫어서 정신 똑바로! 차리는 중깃을 협업에서 처음으로 써보는데 ..사용하시는 말들이 생소해서 공부해보고 넘어가기 by 깃 초보...기본 개념 설명더보기깃(Git)은?여러 사람이 같은 코드를 함께 작업할 수 있게 도와주는 시스템Pull / Push는 뭐야?1. 📥 git pull"다른 사람들이 서버에 올려놓은 최신 코드들을 내 컴퓨터로 가져오기"예시: 너가 3일 전에 복사해온 문서를 계속 수정하고 있었는데, 그 사이에 팀원이 새로 내용을 많이 추가했어.그런데 넌 그걸 모르고 있어.pull을 하면 "최신 버전 가져오기!" 해서 네 문서를 업데이트해줘.2. 📤 git push"내가 수정한 코드들을 깃 서버(=GitHub)에 올리기..

프로젝트 하면서 깃 사용할 일 정말 많고효과적이고 깔끔한 커밋을 위하여 템플릿을 설정해보고 사용해는 연습을 ! ✨더불어 깔끔한 커밋 작성하는 요령까지 공부해보자깃 커밋 템플릿 설정하기💡커밋 템플릿은 git 커밋을 할 때 매번 똑같은 형식으로 메시지를 쓰기 쉽게 도와주는 초안 파일로,commit message를 일정한 규칙에 맞게 작성할 수 있도록 도와줌 [commit template 등록]1. git 폴더가 있는 위치에 .gitmessage.txt 파일을 생성 💭 그냥 루트 디렉토리에 만들면 될 듯 2. 생성한 .gitmessage.txt 에 내용 작성원하는 내용을 작성 한다.# ✨ feat: 사용자 로그인 기능 추가# 🐛 fix: 댓글 생성 시 발생하는 NullPointerException 수정..

나는 깃이 내가 치는 코드 모두 실시간 다 CCTV처럼 다 저장하는 줄 알았는데.. Git은 **"git add 하는 순간의 코드"**만 저장git commit은 git add된 코드의 스냅샷만 저장즉, 그 순간의 "확정된 코드"만 기록된다!상황// 파일 수정 1let a = 1;이 상태에서 git add . 했다고 해보자(= 지금까지 작업을 "스테이징 영역"에 올린 것)그다음에 코드를 또 수정하면?// 파일 수정 2let a = 1;let b = 2;이 상태에서 바로 git commit 하면 어떤 코드가 저장될까?수정 2는 저장 안 됨!왜냐면 git add는 수정 1까지만 반영했기 때문이다. 정리하면:"Git은 내가 add한 시점의 코드만 기억한다!" Git은 내가 수정한 모든 내용을 자동 저장한다❌..

프로젝트 하고 타입스크립트도 본격적으로 쓰고 하니까함부로 손도 대면 안될 것 같고 (충돌 나고 할까봐...) 정말 정말 조심히 코드 치려고 하고 있다 ㅠ0ㅠ...... 타입 정의는 언제 해줘야 하며, 어느걸 해줘야하는지 아직 감도 안잡히는데..플젝에서 쓰려고 하니 나 최큼 힘들어 ... ⭐️구현 해야 할 UI ↓ 코드 치기 전, 내가 궁금했던 건1. 타입 지정은 언제 어디서부터 어떻게 ? 그리고 공통 컴포넌트의 타입은 또 언제?2. 그냥 js로 먼저 작성한 뒤, 타입 지정 해주면 안되는건가 ?3. 예를 들어, 회원 가입 페이지를 만들 때 어떤 흐름으로 만드는걸까? 공통 컴포넌트 먼저 제작? 3번 흐름 먼저 잡고 가보자. 지피티 사마의 답변이다. 타입스크립트 + 리액트 처음 할 때 "순서" 헷갈리는 건 정..

css를 지피티에만 의존할 수는 없군..나도 어느정도는 할 줄 알아야 하니까, 자주 쓸 것들 정리해두기 🍑 추가될 때 마다 와서 정리해야지 !Tailwind에서 **자주 쓰이는 접두사(클래스 prefix)**랑 기능을 카테고리별로 총정리🎨 색상 관련text-글자 색상text-gray-800bg-배경 색상bg-blue-100border-테두리 색상border-red-300placeholder-input 안 placeholder 색상placeholder-gray-400divide-자식 요소 사이의 구분선 색divide-gray-200 🔡 텍스트 관련text-글자 크기/색text-sm, text-whitefont-폰트 굵기font-bold, font-lightleading-줄 간격(line-height)..