9. Git, CursorAI, Python flask

Git이 무엇인지

Git은 코드를 시간별로 저장하고 관리할 수 있게 해주는 프로그램"으로, 내 프로젝트의 모든 변화(수정/추가/삭제)를 기록해준다. 그래서 과거 코드로 되돌리거나, 다른 사람과 동시에 작업해도 충돌 없이 협업할 수 있다는 특징이 존재한다.

 

GitHub가 무엇인지

GitHub는 Git으로 만든 프로젝트를 웹에 올려서 다른 사람과 공유하고 협업할 수 있는 공간 및 서비스이다. GitHub 외에도 비슷한 사이트가 존재하는데, GitLab과 같은 기업용으로 자체 서버 설치가 가능한 사이트도 존재한다.

 

자주쓰는 Git 명령어

git add

변경할 파일을 저장할 준비를 함

git add 파일명

git add .           # 모든 파일을 준비함

 

git commit

실제로 저장소에 기록을 남김 : 스냅샷 찍기와 유사 : 순간의 코드를 저장소에 남기는 것

git commit -m "설명 메시지"

 

git push

내 컴퓨터에서 GitHub로 보내기 : 코드를 GitHub에 올리는 것 : 아래에서 origin은 원격 저장소를 의미하며, 보통 GitHub

git push origin main

 

git pull

GitHub에 올라온 최신 코드를 내 컴퓨터로 가져오기 : 동기화

git pull origin main

 

git clone

처음부터 GitHub에 있는 전체 프로젝트를 복사해오기

git clone 깃허브주소

 

 

사용 예시

1단계 : Git 초기화

cd ~/projects/my-portfolio     # 내가 만든 폴더로 이동

git init                                        # Git 시작 (.git 폴더 생성됨)

 

2단계 : 변경된 파일 추적하고 커밋하기

git add .                                                                  # 현재 폴더의 모든 변경 파일을 추적 대상으로 올림

git commit -m "초기 커밋: 프로젝트 셋업 완료"      # 첫 저장 (스냅샷 남기기)

 

3단계 : GitHub 저장소 만들기

GitHub 들어가서 → "New repository" 클릭 : 이름 : my-portfolio → Create repository 클릭 / 주소 복사: https://github.com/your-username/my-portfolio.git

 

4단계 : GitHub와 연결하고 첫 push

git remote add origin https://github.com/your-username/my-portfolio.git      # GitHub와 내 로컬 저장소 연결

git branch -M main                                                                                                 # 브랜치 이름을 main으로 설정 

git push -u origin main                                                                                           # GitHub에 업로드 (처음이라 -u 필수)

 

5단계 : 코드 수정 후 업데이트

# 파일 몇 개 수정한 뒤

git add .

git commit -m "contact form 섹션 추가"

git push

 

6단계 : GitHub 최신 코드 내려받기 (협업할 때 자주 사용)

 

git pull origin main                 #다른 사람이 올린 최신 코드를 내 컴퓨터에 적용

 

 

 

---

 

 

Cursor AI란

코딩을 도와주는 AI 기반 코드 에디터이다. 즉, AI가 내장된 VS Code 기반 코드 에디터로 AI와 대화하면서 코드를 짜고 수정할 수 있는 코드 에디터이다.

 

 

기본 단축키

Command+L 또는 Ctrl+L (Ask, Learn)

채팅 인터페이스에서의 기능으로 코드에 대한 질문이나 문제 해결을 빠르게 도와줄 수 있음 : 실시간으로 AI와 대화하며 코드 수정, 아이디어를 얻을 수 있음

위의 사진에서 오른쪽 패널이 채팅 인터페이스이며, Ask 선택 후 원하는 질문을 입력하면 AI가 답을 해주는 형식 : 이 질문에는 코드에서 블록을 선택한 상태에서 단축키를 눌러 해당 블록에 대해서만 질문을 하든가, @를 통해 특정 파일을 선택하든가, @Codebase 등의 기능을 통해 전체 파일을 훑어보고 질문자의 질문과 대조하여 답변을 하는 등의 기능 수행이 가능

 

Command+I 또는 Ctrl+I (Agent, Import)

이전의 Ask 기능은 만약 질문을 해서 코드를 제공받았다면, 사용자가 그걸 확인하고 Apply를 눌러야 코드가 파일에 적용되는 형식 : 반면에 Agent 기능은 사용자가 명령을 내리면 즉시 수정과 적용이 진행되는 기능 : 그래도 이 적용된 것을 확인하고 Reject, Accept를 선택할 수 있음

 

Command+K 또는 Ctrl+K (코드 수정)

코드를 선택한 후 단축키를 누르면, 'Editing instructions...' 이라는 메시지와 함께 선택한 부분에 텍스트 입력 박스가 나타남

여기에 원하는 수정 방향을 입력하면, 해당 선택 부분에만 코드 수정이 진행되는 기능

 

 

CursorAI 이용해서 포트폴리오 웹사이트 채팅창 레이아웃 디자인 해보기

아래와 같이 기존 디자인과 어울리게 CursorAI와 함께 수정을 반복하면서 아래와 같은 채팅창 레이아웃 및 배너 디자인을 완성하였다

 

Cursor AI 질문 내역

1. 해당 Portfolio 폴더는 저의 포트폴리오 웹 사이트를 구현한 파일들로 구성되어 있습니다. 저의 코드베이스를 바탕으로 대화형 챗봇 컴포넌트를 구현해주세요. 컴포넌트를 만드는 저의 목적은 포트폴리오 웹사이트를 보는 사람 입장에서 이 사람에 대한 궁금한 점이 생겼을 때, 해당 기능을 활용해서 chatgpt와 같은 AI와 대화하면서 저의 정보를 답변해주는 것입니다. @compoents/Chat.jsx로 구현 부탁합니다. 먼저 현재 프로젝트는 React + Tailwind + motion 기반이며 코드 구조는 이미 잡혀 있습니다. 유의할 점은 해당 코드는 다크모드, 모바일 버전도 지원한다는 점입니다. 다음 조건을 만족하는 컴포넌트를 만들어주세요. 1. Contact 컴포넌트 아래의 위치에 위치할것, 2. About, Contact, Services, Work 컴포넌트들을 보면 사이에 간격이 일정한 것을 확인할 수 있는데, 이처럼 간격을 유지하면서 디자인의 구조를 망가뜨리지 않고 Chat 컴포넌트를 추가할 것 3. chatgpt등 대화형 AI처럼 채팅 메시지 목록과 입력창이 포함. 4. tailwind + motion을 활용해 현재 제작된 포트폴리오 디자인과 똑같은 폰트를 사용. 즉, 폰트와 색상도 기존 스타일에 어울리게 맞춰주셔야합니다. 이때 주의할 점은 다크모드와 모바일 버전 시의 디자인도 고려해야합니다. 앞으로 다크모드, 모바일모드를 말하지 않아도 알아서 고려해서 설계. 5. Chat 컴포넌트의 헤더는 Ask me anything과 Conversational chatbot으로 시작

2. Contact 컴포넌트의 Submit now와 Chat 컴포넌트 사이의 간격을 Work 컴포넌트의 Show more과 Connect with me 사이의 간격과 똑같이 바꾸어주세요

3. 메시지 전송시 페이지 최하단으로 자동으로 내려가는 것을 수정해주세요. 메시지 전송을 하여도, 보고 있던 화면이 유지되도록 해야합니다.

4. 좋습니다. 또한 채팅창 내부를 스크롤 하기위한 스크롤바가 채팅창 레이아웃 모서리가 둥글다는 점 때문에 해당 레이아웃 바깥으로 스크롤바가 튀어나온 상태입니다. 이를 수정해주세요.

5. 좋습니다. 근데 스크롤 바 썸의 색상은 핑크색이 아니였으면 좋겠습니다. 옅은 그레이 색상인데 현재 스타일에 어울리게 수정해주세요.

6. 좋습니다. 근데, 채팅창 레이아웃의 테두리가 스크롤바쌈의 공간을 같이 차지하고 있다는 점 떄문에 스크롤바가 스크롤바썸 중간에 있다고 느껴지지 않습니다.

7. 좋습니다. footer-bg-color.png를 Chat 컴포넌트 배경에도 적절한 위치에 배치해주세요. Contact 컴포넌트를 참고하시면 좋습니다.

8. 적용된 것은 확인했지만 티가 너무 안납니다. 'Conversational chatbot' 텍스트의 위치와 채팅창 레이아웃 위치 중간에 위치하면 좋을 것 같습니다.

9. 좋습니다. 하지만 욕심을 부려서 해당 배경이 왼쪽 여백에도 위치가 되어서 좀 더 보였으면 하는 바램이 있는데, 크기를 한번 키워봐주세요.

10. 좋습니다. 근데 메시지 입력창부터해서 메시지 입력 버튼까지 좀 디자인이 애매하다는 생각이 듭니다. 채팅 입력 배경 색깔을 채팅창 레이아웃 색상인 흰색과 차별화가 되었으면 좋겠습니다.

11. Chat 컴포넌트 전체를 현재 스타일에 어울리는 테두리로 한번 감싸주세요.

12. 제가 좀 전에 다음 질문 "좋습니다. 근데 메시지 입력창부터해서 메시지 입력 버튼까지 좀 디자인이 애매하다는 생각이 듭니다. 채팅 입력 배경 색깔을 채팅창 레이아웃 색상인 흰색과 차별화가 되었으면 좋겠습니다." 을 했었는데, 이거 적용한거 다 취소해주세요.

13. 좋습니다. Navbar에 'Chatbot'을 추가하여, 다른 컴포넌트들과 마찬가지로 클릭시 자유롭게 이동이 되도록 설계해주세요. 

14. ChatBot이 아니라 Chatbot으로 수정해주시고, 해당 메뉴는 다른 메뉴들보다 눈에 안띄지만 차별화를 주었으면 좋겠습니다. 저의 의도는 챗봇은 부가항목이니 다른 메뉴들과 같은 디자인을 주는 것이 아쉽습니다.

15. 좋습니다. 근데, 이탤릭체 적용, 글자크기 축소는 취소해주세요.

16. 모바일메뉴를 제외한 Navbar에서의 chatbot 메뉴 텍스트 뒤에 @header-bg-color.png를 'Chatbot' 텍스트가 차지하고 있는 공간만큼 맞추어 적용해주세요.

17. 좋습니다. 근데 밑줄로 보이는건 좋은데, 밑줄이 'Chatbot' 텍스트 중앙에 위치한 느낌이 들지 않습니다. 중앙에 위치하도록 설정해주세요.

18. 좋습니다. 근데 이미지가 텍스트 바로 밑에 있는 느낌이 아니라 좀 밑으로 떨어져 있는 느낌입니다. 텍스트 바로 아래에 위치하도록 조정해주세요.

19. 좋습니다. 밑줄을 Chatbot 텍스트의 'C'부터 't'까지 그은것 처럼 처음부터 끝까지 밑줄이 있는 것 처럼 조정해주세요.

20. Chatbot 텍스트 관련 사항은 일단 지금 코드로 픽스해주세요.

21. 첨부된 사진은 ChatGPT의 채팅 입력창 디자인 사진입니다. 제 대자인도 이 디자인을 참고해서 수정해주세요. 색상은 기존 디자인을 유지합니다.

22. '무엇이든 물어보세요'의 텍스트 크기가 조금 큰 것 같고 위치가 좀 왼쪽으로 치우쳐져있습니다. 비율을 스타일에 어울리게 수정해주세요.

23. 화면이 Work 컴포넌트에 위치하게 되는 순간(Navbar의 'My work'를 클릭했을 때 보이는 화면과 같은 화면을 의미)에는 chatbot 텍스트 밑줄이 자연스럽게 사라지고 나타나게 수정해주세요.

24. 다크모드 일때 챗봇 입력 버튼 화살표 색상이 너무 어두워서 배경이랑 비교가 안됩니다. 스타일에 맞게 조금 색상을 밝혀주세요.

25. 조금만 더 밝게 해주세요. 물론 현재 스타일레 어울리게

 

* 다크모드, 모바일모드 고려사항 애초에 픽스하는 방법은 Cursor > 기본 설정 > Cursor Settings > Rules > Project Rules에 적용하면 편함 : 앞으로 해당 기능 사용하기

 

---

 

 

Flask란 무엇인지

Flask는 Python으로 웹사이트를 만들 수 있게 해주는 간단한 웹 프레임워크로, 가볍고 빠르게 서버를 만들 수 있다.

 

Homebrew란 무엇인지

macOS 운영체제에서 소프트웨어를 설치할 수 있게 해주는 패키지 관리자이다.

 

Python 설치 및 간단한 코드 작성

Homebrew를 사용하여 Python을 설치 : /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)" : 이후 파이썬 설치 : brew install python : Flask 설치 : pip3 install flask

flask에 /hello 에 요청을 보내면 화면에 hello가 나오도록

 

from flask import Flask            # flask 라이브러리에서 Flask 클래스 가져옴

app = Flask(__name__)           # app이라는 Flask 클랙스의 객체를 만듦 : 웹 서버의 본체 : __name__은 현재 파일의 이름을 의미하

                                                     고, Flask가 이 파일을 웹 어플리케이션의 시작점으로 인식

@app.route("/hello")                # 라우팅이라고 불리며, 사용자가 웹 사이트 주소 localhost:5000/hello로 접속했을 때, 

def hello():                                 # hello() 함수를 실행하라는 뜻

return "hello"

if __name__ == "__main__":   # 이 파일을 직접 실행할 할 때만 작동하도록

app.run(debug=True)               # Flask 서버를 실행하며, debug=True를 통해 코드 수정 시 자동 재시작되고, 

                                                    # 에러 메시지도 보기 좋게 출력됨 : 개발할 때만 사용

 

 * Running on http://127.0.0.1:5000 : 해당 주소를 브라우저에 열고, "http://127.0.0.1:5000/hello" 주소를 입력하면 "hello" 가 화면에 출력