전체 글 105

git과 git 실습

Git과 GitHub의 필요성 및 기본 개념Git과 GitHub의 사용 이유 - 버전 관리와 협업1. Git: 버전 관리Git은 '분산형 버전 관리 시스템'이다. 내 컴퓨터(로컬 환경)에서 파일의 모든 '유의미한 변경점', 즉 '버전'을 체계적으로 관리해주는 도구이다. Git은 파일의 변경 이력을 스냅샷 형태로 차곡차곡 저장하여, 언제든 원하는 시점의 버전으로 돌아가거나(롤백), 어떤 내용이 변경되었는지 명확하게 확인할 수 있게 해준다. 이로써 개발자는 불필요한 파일 복사 없이 오직 코드 작성에만 집중할 수 있는 환경을 얻게 된다. 2. GitHub: 협업과 안전한 백업을 위한 중앙 허브Git이 로컬 환경에서 강력한 버전 관리 기능을 제공하지만, 그 자체만으로는 다른 사람과 함께 일하는 '협업'에 한계가..

Programmers 2025.08.29

마크다운과 VCS (Version Control System)

제목1제목2제목3제목4제목5제목6정렬 리스트1정렬 리스트2비정렬 리스트1비정렬 리스트2이태릭볼드볼드 이태릭↓구분선인용문1인용문2버전 관리 시스템(VCS)VCS (Version Control System)란?수많은 코드의 버전을 효율적으로 관리하고, 백업하며, 여러 개발자가 함께 일할 수 있도록 협업 기능을 제공하는 시스템이다.버전 관리의 필요성프로젝트 코드는 계속해서 수정되고 개선된다.이런 유의미한 변경 사항들을 체계적으로 관리하기 위해 버전을 사용한다.VCS의 종류로컬 VCS개인 컴퓨터 내에서만 버전을 관리 협업 기능은 없음중앙집중식 VCS (예: SVN, CVS)하나의 중앙 서버에 모든 파일과 버전 기록을 저장장점: 모두가 한 곳을 바라보기 때문에 이해하고 관리하기 용이단점: 중앙 서버에 문제가 생..

Programmers 2025.08.28

[React/Next.js] 관심사 분리의 중요성과 react-hook-form과 yup

이전 코드의 가장 큰 문제는 react-hook-form의 images 필드가 너무 많은 역할을 담당했다는 것이다. 이 필드는 동시에 세 가지 다른 데이터를 관리해야 했었다.미리보기 데이터: dataURL 형식으로 화면에 이미지를 보여주기 위한 정보.업로드 데이터: 서버로 보낼 실제 File 객체.서버 데이터: 게시글에 최종적으로 저장될 이미지의 URL.dataURL을 받아서 file객체로 변환하고.... dataURL인 경우 서버 업로드 후 URL변환하고....이걸 이미지업데이트 로직에 억지로 우겨넣고... 아무리 바이브 코딩으로 먼저 작성하고 나중에 이해하려고 했다지만 보는 내내 먼가 복잡하고 이해가 안되었었다. 이게맞나 생각하던 와중 문득 생각해보니 dataURL의 미리보기는 그냥 미리보기로 남겨보..

[React/Next.js] 이미지 첨부 시 Yup 유효성 검사로 인해 폼 제출 불가

게시글 등록/수정 폼에서 텍스트 입력은 모두 정상적으로 작동하고 유효성 검사도 잘 수행했다.그런데 '사진 첨부' 버튼을 눌러 이미지를 선택하는 순간, 활성화되어 있던 '등록하기' 버튼이비활성화되면서 폼을 제출할 수 없게 되었다. 이 문제의 핵심 원인은 클라이언트 측 유효성 검사(Validation) 로직에 있었다.더 정확히는, 이미지 미리보기를 위해 사용하는 Data URL과 Yup의 url 검증 규칙 사이의 충돌 때문이었다. 1. 이미지 선택과 Data URL 변환: 사용자가 컴퓨터에서 이미지 파일을 선택하면, 보통 즉시 미리보기를 보여주기 위해FileReader API를 사용한다. 이때 생성되는 것이 바로 data:image/png;base64,... 와 같은 형태의 Data URL이다. con..

[React/Next.js] <button> 태그 속성에 관하여

왜인지 이미지 업로드를 할때 폼 제출이 되는 오류가 있었다. 그 이유를 제미나이의 힘을 빌려 해결하였다. 제미나이가 진단한 오류의 이유는 태그의 속성에 있었다. HTML 의 기본 동작: HTML 태그는 type 속성을 지정하지 않으면 form 내에서 type="submit"으로 동작하는 것이 기본이다.(중요*)결론: 을 클릭하면, 브라우저가 "폼을 제출하라"는 명령으로 인식하여 handleSubmit이 호출되었던 것이다. 해결방법 태그의 type 속성을 type="button"으로 명시적으로 지정한다. // 수정 전 // 수정 후 태그는 괜찮은 이유: 컴포넌트는 img 태그이므로 이 문제와 무관하다.개발 습관 제안: form 태그 안에 있는 을 만들 때는 의도치 않은 제출을 막기 위해 항..