🖥️HTML 화면단 연결완료와 Cursor 이것저것 팁들 - 5편

📋 오늘의 개요

• 화면단 구현 과정 리뷰

  • React 프로젝트로 변환

  • 페이지 URL 연결

  • 작업 과정 정리해서 공유

• Cursor Rules, 개발 프로세스 만드는 과정 공유

참고 자료 확인

• 지난 글 : 화면단 구축 HTML -> React 변환 시행착오

  

• 엄청난 팁을 주셨다! 적용해봐야지~~ 감사합니다 Rose 님 ❤️✨

Cursor 이슈 발견!! 😫🖤

• 이상한 버그: 어제부터 계속 생김

  

  ALT

  Windows 10의 메시지 설정의 스크린 샷

• 1.1 버전, Claude 모델 사용하면 이런 <no message> 가 나오는 것 같아요

• 커서가 업데이트하고 아픈가봐요 ㅠ

📜HTML → React 변환 작업📜

• 계속 HTML 페이지 -> React 로 변환작업 진행합니다

  

• Rose 님 피드백 받고 문서 반영시키니 직관적인 업무분장을 보여주네요 나이스~

• 모바일, 최적화 이런 부분은 중요하지 않다고 후순위 개발로 두라니까

• 이렇게 반영합니다, 에이전트에게 무엇이 중요한지 지시하는게 중요한 것 같아요 😎

Cursor 작업 관리 전략

• 커서 작업 하면서 느꼈는데, 계속 알 수 없는 무언가들을 만들더라구요

• 그것 땜에 코드 꼬여서 커서가 계속 일하는 현상이 나오는데

• 이번에는 최소 기능, 필요한 것만 지시해서 작업하는 것을 연습해보려고 합니다.

  

  ALT

  한국어 텍스트가있는 검은 색 화면

  

• 이렇게 최소로만 해달라고 해도 뭐가 많은데,

• 제한 없이 만들라고 하니, 하루종일 만드는 것 같더라구요

• 필요한 기능만 짚어서 개발 시키는 방법을 시도합니다.

• 이런 방법이 정답인지는 모르겠지만,

• 개발자 스승이 옆에 있는 것도 아니니

  • 오늘은 이런 방법 해보고, 리뷰하고 이런식으로

  • 점진적 AI 에이전트 다루는 법을 체험하는게 현실적일 것 같아요

  

• 이렇게 페이지단만 만들어도 오늘의 목표는 만족하고 넘어갑니다

• 최적화는 다음에 작업하고, 당장 필요한 우선순위를 완수하는 연습하려 합니다.

디버깅 작업 🐜💘

• 사이트가 리액트에 맞게 변환이 안돼 문제 해결합니다.

• 디버깅 문제해결도 한 번에 하지 말라하고, 컨펌받고 작업하라고 했어요

ALT

한국어 텍스트가있는 검은 색 화면

• 지금처럼, 어떤 내용이 해결됐는지

• 최소 단위로 해결할 수 방법이 무엇인지

• 점진적으로 테스트를 진행하며 문제를 해결하려 했습니다.

  • 실제 현장 엔지니어를 할 때 이런 방식으로 작업했는데

  • 그러한 작업 흐름이 여기에도 반영되니까 나름 좋았어요 😎

문서화 작업 💼✨

• 저는 작업 끝내면 todo, Readme 최신화를 시키고 Push 프로세스 하고 있습니다.

• 이 프로세스를 지침으로 먹이고 작업하려 합니다

Cursor 에 반영한 모습

• 오늘 알았는데, Cursor/Project Rules 설정하는게 있더라구요?

  • Chat GPT 처럼, 프로젝트의 지침을 내리는게 있다는 의미는

  • 각 프로젝트에 어울리는 지침을 커스텀, 자동화 작업이 가능하다는 의미로 이해해서

  • 오늘은 지침 문서화 + 프로세스 정립에 시간을 사용했습니다.

추가 팁 발견

• 쓰레드에 커서맛피아님의 오픈 카톡방에 오늘 비슷한 팁이 올라왔네요 캡쳐~

페이지 구현 완료 😍🖥️

• 이제 컴포넌트 만들고, URL 연결하면 된다고 하네요~

• 제가 규칙 문서에 반영해준 요소들이 반영됐습니다

  • 오늘 제가 한 업무를 키워드로 정리하자면,

  • 최소 단위 개발, 테스트 주도 개발, 문서화 3개로 추릴 것 같네요

• Todolist 를 반영해서 최소 단위 점진적 개발을 이어갑니다

☑️Todolist 핸들링 사례 (우선순위 조율)

• 지금은 블로그 웹 페이지를 만든 상황 -> URL 연결을 우선하고 있는데

• Todo.md 보니까 검색기능 구현, 최적화를 주로 이루고 있습니다.

• 이런 부분에서 내가 원하는게 무엇인지 구분해서 수정하는 작업을 진행합니다

• 가끔 커서가 있는 척하고 마구마구 뭘 만들어내는데 속으면 안됩니다.

• 계속 딴 짓 하길래, 회초리도 한 번 들어줍니다

ALT

한국어 텍스트가있는 화면 스크린 샷

• 이런식으로 세부적인 정보를 넣어 원하는 작업흐름으로 작업하는 연습을 하고 있습니다

• 아마도 이런 부분에서 Vooster ai 를 잘 사용하면 좋을 것 같네요

최종 완성 😍❤️

• 오늘은 페이지 구현 -> 연결하는 작업 흐름, Rules, Todolist 에 반영하는 플로우를 공유드렸네요

• 다음은 페이지 연결 이후 베포하는 과정을 공유드릴 것 같습니다

• 저는 이런 식으로, 작업 후 푸시하라는 todo 를 반영시켜 작업해보는 것을 해봤습니다.

• 지금은 뚝딱뚝딱 거려도 연결되고 작업한 모습을 확인 할 수 있네요

• 로컬에서 테스트하고 꾸준히 작업하면, 베포 가능할 것 같습니다~

🧠 초보 개발자를 위한 팁

• 기능 개발에 무엇이 필요한지 자주 질문하는 습관을 가지는게 좋아요

• 내가 당장 눈에 보이는 직관적인 필요한 기능을 개발하다보니

• 실력이 느는 것은 모르겠지만, 눈에 보이니까 재미는 있더라구요

• 재미있는 개발하는게 중요합니다!

💡 오늘의 인사이트

• 오늘부터 Cursor 를 오냐오냐 하지 않습니다. 엄하게 굴릴거에요 (엄근진)

  • 컨펌 받고 작업해 습관화

  • 우선순위는 참고하되, 결정은 내가 할거야

  • 디버그 로그 만들어

  • 문제해결 프로세스는 일 벌리지 말고 최소 방법으로 점진적으로

  • 필요 필요기능 만 생각해서 리뷰, 컨펌받아

  • TDD 기반 개발 필수

  • 테스트하고, todo.md, Readme.md 문서화 -> Git push 자동화

• Cursor 의 Auto-Run 기능 맹신 금지