19일차 수업 - GitHub, AntiGravity, AIStudio

 

우선 우리의 친구 GitHub에 대해서 배웠다

 

GitHub라는 것은 git이라는 도구로 관리되어진 코드들을 적어 둘수 있는 구글드라이브 같은 것

이라고 생각하면 쉬울 것 같다

	Git - 소프트웨어 (도구)	Git Hub - 웹 플랫폼 (서비스)
역할	버전 관리	원격 저장소 & 협업
동작 위치	로컬 (내 컴퓨터)	클라우드 (온라인)
인터넷 필요	❌ 불필요	✅ 필요
개발사	Linus Torvalds	Microsoft

 

나는 개발자이긴 하지만 굉장히 구식의 개발환경에서 개발을 했기때문에

깃허브는 사이드 프로젝트 할때나 몇번 써봤지 현업에서는 SVN만 줄창 썼다

 

사실 깃만해도 공부하다보면 정말 머리가 뽀개질것 같은 것 이라는걸 몇번 느끼고..ㅎㅎ

현업에서는 잘 안쓰니까 적당히 공부만했었는데

 

물론 배워두면 지금도 좋기야 하겠지만.. 이렇게나 편리하게 적용가능하고

사용중에 모르는걸 실시간으로 바로 확인할 수 있다니...

정말 너무 좋은 세상이라고 생각한다

 

나중에 Vercel이란걸 연동하면 깃허브에 푸시만해도 자동으로 배포한다고하니 정말... 아름다운 세상이다

 

 

SVN에 올리고 서버 재기동 할때마다 시니어 개발자들 눈치보고...

시니어 개발자랑 버전관리 실패해서 Conflict나면 ㅋㅋ 잘 해서 머지 하겠다고 했는데

내 코드 그냥 무시당하고 자기거 받고 처음부터 다시하라그러고.....ㅋㅋ

 

수업듣고있는데 주마등처럼 스쳐지나간 기억들....*

 

 

아래는 깃에서 자주 사용하는 용어들이다

Repo (Repository)	프로젝트 파일과 변경 이력이 저장되는 저장소
Commit	변경사항을 로컬 저장소에 저장하는 행위 (=저장 단위)
Push	로컬의 commit을 원격 저장소(GitHub)에 업로드
Clone	원격 저장소를 내 로컬로 복사해오는 것 보통 최초에 사용
Pull	원격 저장소의 최신 변경사항을 로컬로 가져오는 것
Branch	독립적인 작업 공간. 메인 코드에 영향 없이 기능 개발 가능

 

흐름으로 이해하기

Clone → 코드 수정 → Commit → Push

(협업 시) Pull로 최신화 → Branch 따서 작업 → Commit → Push

 

코드 수정과 Commit 사이에 파일을 수정해서 저장하는 Control+S의 과정이 보통 있다

그러다 보니 커밋푸시를 보통 같이 하지 않나 싶다

 

로컬서버에서 실행 해보고 잘되면 코드 보고 Commit 한다음에 Concflict없으면 Push

보통 이런 느낌 아닐까

 

조별과제도 한번 해보면서 GitHub좀 사용해 보고싶다

솔직히 깃허브를 조원들이랑 같이 사용하면서 충돌을 많이 내보고싶다. 여긴 연습하는 곳이니까...

 

서버도 다운시켜보고 해봐야 실력이 느는거 아닙니까!

 

나도 옛날에 SVN에 파일 싹 다날려먹어서 3일전인가 걸로 복구하고... 밤새고.. ㅋ..

 

백업을 열심히 하자!

---

MCP

 

오늘은 내생각엔 굉장히 뜻깊은 수업이었다고 생각한다

진행하는 중에 수많은 오류가 났기 때문이다

내가 위에서 말했던 맥락이랑 동일하게 오히려 이런 수업자리에서 오류가 많이 나보는게 난 더 좋은 것 같다

같이 해결해 주는 사람이든 환경이 없는 상황이 오면... 진짜 막막하다... 요즘은 AI라도있지

나는 인트라넷밖에 없는 PC환경에서 스마트폰 붙들고 Stack Over Flow랑 OKKY붙들고 구글링해가면서...

시간은 지나가는데 한건 하나도 없고...

 

후 얼마나 좋은 세상인가요! 다들화이팅 하자요!

 

오늘은 여러가지로 참 주마등이 많이 스치는 수업이었던것 같다 ㅋ

	API - Application Programming Interface	MCP - Model Context Protocol
목적	서비스 간 데이터 요청/응답	AI 모델이 외부 도구를 사용하도록 연결
주체	개발자가 직접 호출	AI 모델이 스스로 판단해서 호출
표준화	❌ 서비스마다 다름	✅ 통일된 프로토콜
등장 시기	오래됨	2024년 Anthropic 공개

 

내가 쉽게 비유해보자면

 

API는 홍콩반점에 가서 직접 짜장면, 짬뽕, 탕수육을 가져오는것이다

짬뽕! 하면 배달이 온다

 

MCP는 홍콩반점 주방장을 시간제로 고용하는 것이다

데리구와서 짬뽕을 만들던 짜장을 만들던 시키는 것이다

 

 

정확한 표현은 아닐 수 있지만 대충의 느낌은 비슷한 것 같다

 

---

산출물

 

나의 저번 포스팅을 보면알겠지만 AI Studio와 Antigravity의 개발 실력의 수준은 이정도라고 본다

 

근데 문제는 저 뒤에 Gravity has no limit라고 써있는데 순 뻥이다

limit가 너무 금방이야...

 

어제 못다한 수정사항 시켰더니 바로 사용량 다 썼다고 하더니 이번엔 몇시간도 아니고

5일뒤에 사용량 리필된다고 하는것이다..... 도랐?

근데 얘네 뭔가 좀 2.0으로 업데이트해서 정신이 없는지

몇시간 지나니 리필이 되긴했다

함 봐준다

 

여튼 오늘의 목표는 AI Studio에서 만든 작업물 코드를 Github에 올려서

그 코드를 Antigravity에서 연동해서 더 나은 결과물을 만드는 것이었다

 

전에 내가 못한 결과를 여기서 다시 하게 된 것이다

저 수박과 배라고 주장하는 공들과 비교해서 얼마나 좋은 결과가 나오는지 보자

UI도 훨씬 깔끔하고 동작도 훨씬 안정적이다

여전히 수박인지 녹색 농구공인지는 알수없지만 그래도 나름 알아볼 수 있는 구조였고

물리엔진도 적절하게 들어갔는지 자연스러운 모습이었다

---

클린코드

 

내가 스터디 그룹모집하는데 들어가서 산 훌륭한 책받침이 있다

클린코드라고 아주 유명한 책받침이다

2번째 까지 했나? 스터디 그룹이 와해되었다..ㅋ

 

말이 필요없다

 

 

Antigravity에서 다음과 같이 명령하면 그 책받침에 있던걸 바로 적용할 수 있다

 

src/App.tsx 클린 코드 검토 결과

---

1. 가독성 & 구조

원칙 현재 상태 개선 제안

컴포넌트 크기	단일 파일에 555줄, 모든 UI·로직·스타일 포함	ProfileEditor, LinksEditor, ThemePicker, PublicPreview 등으로 분리
조건부 렌더링	viewMode === 'public' 블록이 130줄 이상	<PublicView />, <AdminView />로 별도 컴포넌트 분리
긴 JSX	인라인 스타일, 복잡한 삼항 연산 혼재	스타일은 상수 객체로 추출, 인라인 로직은 헬퍼 함수로 감싸기
주석	주석 거의 없음	useEffect 등 핵심 흐름에 간단한 설명 추가

---

2. 네이밍 (명명 규칙)

항목 현황 권장 개선

상태 변수	tempName, tempProfileImage 등 쌍(pair) 구조	profile, draftProfile 객체로 통합 관리
함수명	handleApplyProfile 등 대체로 명확	copyToClipboard → copyPublicUrlToClipboard 등 더 구체화
상수	테마 키·색상값 하드코딩	src/theme.ts로 분리, export const THEMES로 관리
Magic Numbers	min="-20" max="20" 직접 입력	const IMAGE_TILT_RANGE = { min: -20, max: 20 }로 추출

---

3. 단일 책임 원칙 (SRP)

영역 현재 구현 제안

데이터 로드/저장	useEffect에서 직접 수행	useLocalStorage 커스텀 훅으로 캡슐화
프로필 편집	App 내부에서 모두 관리	ProfileEditor 컴포넌트로 분리
링크 관리	CRUD 핸들러가 App에 존재	LinksEditor 컴포넌트로 분리
테마 선택	App에 로직 포함	ThemePicker 컴포넌트로 분리

---

4. 중복 최소화 (DRY)

중복 위치 내용 개선 방법

버튼 스타일	동일한 style={{ }} 여러 번 반복	CSS 변수(--button-bg) 또는 스타일 함수로 통합
링크 폼	title·url 입력 UI가 map 내부에 반복	LinkForm 컴포넌트로 추출
모달 구조	모달 레이어·닫기 버튼 코드 중복	공통 Modal 컴포넌트 생성 후 children으로 주입
스토리지 키	'z-link-data' 문자열 여러 곳에 사용	const STORAGE_KEY = 'z-link-data'로 선언

---

5. 오류 처리 & 안전성

항목 현재 권장

JSON 파싱	오류 로그만 출력	파싱 실패 시 기본값 초기화 + 사용자 알림(toast 등)
이미지 업로드	reader.result 바로 캐스팅	파일 형식·크기 검증 + reader.onerror 처리
복사 작업	Promise에 then만 사용	catch로 복사 실패 시 fallback 제공
외부 URL	검증 로직 없음	new URL()로 유효성 검증 후 저장

---

6. 성능 최적화

현상 개선

모든 상태 변화마다 localStorage 저장	lodash.debounce 등으로 디바운스 적용
links.map 내 인라인 함수 매 렌더링마다 생성	useCallback으로 메모이제이션
motion 과도한 사용	CSS transition으로 대체 또는 옵션 최소화

---

📋 종합 평가

기능 구현과 UI/UX는 충분히 완성도가 높습니다. 다만 클린 코드 관점에서는 아래 문제가 있습니다.

• 컴포넌트가 과도하게 크고 역할이 혼재 (SRP 위반)
• 중복된 스타일·로직이 여러 곳에 흩어져 유지보수 어려움
• 긴 JSX와 인라인 로직으로 가독성 저하
• 에러 처리와 타입 안전성 부족

---

👉 리팩터링 우선순위

1. 컴포넌트·훅 분리 — ProfileEditor, LinksEditor, ThemePicker, Modal, useLocalStorage
2. 스타일·상수 중앙화 — src/constants.ts, src/theme.ts 분리
3. 에러·입력 검증 강화 — URL, 이미지, 로컬스토리지 파싱 오류 처리
4. 렌더링 최적화 — useCallback/useMemo, 저장 디바운스
5. 테스트 추가 — 스토리지, CRUD, 테마 적용 단위 테스트

 

난 이 기능이 정말 너무 좋은 것 같다

내가 어디선가 리팩토링 기능이 엉망이라고 본것 같은데.. 사실 양보해서 지금 별로라고해도 시간문제 아닌가

인간도 읽기 편한 코드로 까지 만들어주다니 정말...

 

큰 그림을 그릴줄 아는 개발자 외에는 다 사장될 것이라는 말의 의미가 더 명확하게 다가왔던 때였다

 

클린 코드 원칙 & 리팩터링 예시

---

원칙별 정리

# 클린 코드 원칙 리팩터링 예시 설명

1	단일 책임 원칙 (SRP)	ProfileEditor.tsx로 분리	프로필 편집 UI·로직을 별도 컴포넌트로 분리, App은 전체 상태 관리만 담당
2	중복 최소화 (DRY)	buttonStyle(theme) 함수 추출	버튼 스타일을 함수로 추출해 인라인 중복 제거
3	가독성·구조화	useLocalStorage 커스텀 훅	로컬스토리지 로직을 훅으로 캡슐화, App 내 복잡한 useEffect 제거
4	명확한 네이밍	STORAGE_KEY = 'z-link-data'	저장 키를 의미 있는 상수명으로 추출, 문자열 리터럴 직접 사용 제거
5	에러·예외 처리	catch에서 toast 알림 + 데이터 삭제	JSON 파싱 오류 시 사용자에게 알림, 손상 데이터 자동 삭제
6	입력 검증	URL 정규식 검증 후 저장	^https?:\/\/ 정규식으로 잘못된 URL 입력 차단
7	상태 집중 관리	draft와 data 분리	편집용 임시 상태(draft)와 저장된 최종 상태(data)를 구분해 흐름 명확화
8	컴포넌트 재사용	LinksEditor.tsx로 분리	링크 관리 UI를 재사용 가능한 컴포넌트로 추출, props로 전달
9	하드코드 제거	theme.ts에 THEMES 상수화	테마 색상·라벨을 별도 파일에 선언, App 내부 하드코드 제거
10	핸들러 메모이제이션	useCallback으로 콜백 감싸기	매 렌더링마다 함수 재생성 방지, 불필요한 리렌더 최소화

---

핵심 요약

• SRP — UI를 작은 컴포넌트로 분리
• DRY — 스타일·상수·훅을 별도 파일로 추출
• 가독성 — 복잡한 useEffect를 커스텀 훅으로 감춤
• 네이밍·상수화 — 문자열·색상을 의미 있는 변수와 파일에 정의
• 에러·검증 — JSON, URL, 파일 로드 오류에 토스트 알림 제공

 

 

공부를하더라도 이렇게 하는게 훨씬 더 좋은 방법이라는 생각이 든다

물론 책을 보는것도 중요하겠지만.. 지겨워서 못읽고 마는 나에겐 이렇게 하면서 익히는게 더 좋지 않을까?