Khóa học
Đánh giá khóa học
- [CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp
jjoya
·
[Live Challenge] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)[Live Challenge] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)ppos786679
·
[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)[VOD] Hoàn thành trong 6 tuần! Lập trình Vibe cô đặc cho thực tế phát triển (Cursor AI, Figma)- [CodeCamp] Khóa học backend cô đặc được tạo ra từ bootcamp
- [Code Camp] Javascript ấm áp
Bài viết
Hỏi & Đáp
룰 간 충돌 분석
안녕하세요! 날래날래님!1. 확실히 claude-sonnet 4.5 thinking이 똑똑하네요!최대한 많은 인풋, 버튼을 가져와서 공통컴포넌트를 만드는게 원칙적으로 맞습니다!해당 프로젝트내의 인풋, 버튼은 공통컴포넌트 하나로 사이즈가 유연히 변경될수있도록 말이에요!=> 보통 실무에서 공통컴포넌트만 사이즈별로 모아놓는 영역을 디자이너님께서 만들어주시기 때문에, 그 안의 모든 버튼들이 담긴 노드를 복사해서 제너레이팅하면 쉽게 해결이 됩니다!하지만, 현재 우리 수업에서는 공통컴포넌트만 담겨있는 피그마 영역은 따로 존재하지 않아요!그럼에도 불구하고 claude-sonnet이 똑똑하게 잘 만들어 준 것 같네요!^^반응형 디자인은 뒤에 수업에서 다루게 되는데요!복잡도를 낮추기 위해, AI로 1차 스케치하고, 2차 반응형 디자인 덮어씌우기 방식을 진행합니다.물론, 최초 시작부터 반응형까지 고려하여 설계하시는 것도 가능합니다!(이 경우에는 와이어프레임부터 반응형 설계가 들어가셔야 합니다.)하지만, 빠른 병렬처리와 최소한의 설계를 통한 프롬프팅의 복잡도를 낮추는 방법으로, 뒷부분 반응형디자인 파트에서 소개합니다!^^
- 0
- 2
- 24
Hỏi & Đáp
깃은 어떻게 하나요?
안녕하세요! 시현님!원래, 배포라는 과정은 굉장히 복잡한 프로세스였으나, 현 시대에는 클릭 한번에 배포가 되는 시대에 왔어요.따라서, 복잡한 규모가 아닌 간단한 프로젝트의 경우 vercel 배포를 추천드립니다!1. git-hub 계정을 만들고 git-hub에 내 프로젝트 업로드하기2. vercel에 가입하고, git-hub 연동하기 버튼을 클릭해서 연결하기위 2과정만 진행하시면, git-hub에 push만 하면, 자동으로 배포됩니다(자동으로 생성된 url은 vercel 홈페이지에서 확인 할 수 있어요!)
- 0
- 2
- 31
Hỏi & Đáp
톡투피그마 mcp 연결이 안돼요 ㅠㅠ
안녕하세요! 시현님!window 에서도 동일하게 작동합니다!MCP 관련 강의가 추가 업로드 되었으니, 한 번 확인해 주세요!해당 강의에서는 총 2개의 설정 확인을 요구하고 있어요!1. 커서의 셋팅에서의 초록불(커서 완전종료 후 재시작 필요)2. 피그마 연결에서의 초록불
- 0
- 2
- 30
Hỏi & Đáp
현재 버전과 맞지 않습니다.
안녕하세요! 병조님!오토모드 정확하게 잘 적용하셨습니다!감사합니다.
- 0
- 1
- 35
Hỏi & Đáp
룰 적용이 계속 안되는것 같아요
안녕하세요! 병조님!룰 적용의 정석 방법은 채팅창에 @방식으로 직접 입력하는 방법이에요!하지만, 이 방법은 매번 입력해야 해서 비효율적이므로, 우리 수업에서는 프롬프트 내에서 룰을 적용하는 방법을 채택중인데, 이 과정에서는 정석이 따로 없으므로 가장 잘 먹히는 베스트 프랙티스를 적용해 보시는게 좋아요!따라서, 현재 상황에서는 더 잘 먹히게 하려면 경로를 명확히 지정해주면, 더 잘 인식된답니다!적용 방법은 다음과 같습니다.1) 01-common.mdc 파일에 마우스 오른쪽 버튼을 눌러서 상대경로를 복사해 주세요.2) 프롬프트의 룰적용 부분에 경로를 추가해 주세요. 기존 방식- 01-common.mdc 변경 방식- 01-common.mdc => 파일경로: .cursor/rules/01-common.mdc보내주신 스크린샷과 관련해서 답변을 드리자면,Rules에는 always, manually 등의 방식이 있는데, 우리는 현재 manually 방식을 사용중에 있어요.always 방식은 항상 적용, manually 방식은 @로 지정했을 때만 적용되므로, 해당 스크린샷처럼 기본적으로 적용되지 않는다는 메시지가 나오면 정상이랍니다!(만약, 이를 확인해보시기 위해선, always로 아무거나 하나 수정해 보시고, cursor를 재시작 하시면, always로 적용된 rules는 정상적으로 활성화 된 것을 확인해 보실 수 있어요!)
- 0
- 1
- 46
Hỏi & Đáp
디자인 시스템 파운데이션 단계를 토큰화 해뒀는데 어떻게 적용할 수 있을까요?
안녕하세요! 재욱님! json을 뽑아서 넣어주세요!대신 피그마 노드ID 입력 자리를 JSON 입력 자리로 변경해 보세요!ex) 피그마 노드ID: 12:382 => 피그마 토큰JSON: src/.../파일명.json플러터 위젯북에 대해서 확인해보았는데, 리액트의 스토리북과 동일한 개념이네요!결국, AI가 만들어 줄 것이므로 단어만 잘 바꿔서 요청해 주세요!^^
- 0
- 2
- 30
Hỏi & Đáp
cursorTalkToFigmaMcp 사용방법
안녕하세요! 콜라중독님!피그마에 연결하는 방법은 버전에 따라 다양한 방법으로 나뉠 수 있는데요!현재 기준으로 쉽게 접속하는 방법이 있어서 안내드릴테니 따라해 보세요!아래의 순서대로 총 4가지 단계를 완료해 주세요!과정1) Cursor-Talk-To-Figma 플러그인을 실행하여 Connect하기과정2) Cursor-Talk-To-Figma 플러그인에 Connect 되면 나타나는 설정값을 복사해서 커서 Settings에 등록하기과정3) 커서를 종료하고 다시 켜기(이 과정에서 반드시 "완전히 종료" 하셔야 합니다 - 최소화(X))과정4) 커서 Settings에 등록된 MCP 초록불 확인 후, Cursor-Talk-To-Figma 플러그인 다시 Connect아래 상세한 가이드를 드립니다과정1) Cursor-Talk-To-Figma 플러그인을 실행하여 Connect하기피그마에 접속해서 Cursor-Talk-To-Figma 플러그인을 실행해 주세요!(사진)연결이 되지 않았다는 에러메시지를 복사하여 Cursor의 채팅에 알려주세요!(사진) (사진) (사진)(이 과정에서, bun이 컴퓨터에 설치되지 않은 경우 에러가 발생할 수 있는데, "bun이 설치되지 않은 경우 bun을 설치해서 진행해줘" 라는 문장을 추가해서 요청해 주세요!)과정2) Cursor-Talk-To-Figma 플러그인에 Connect 되면 나타나는 설정값을 복사해서 커서 Settings에 등록하기연결 준비가 완료되었으므로 피그마에 돌아가서, Connect 버튼을 눌러서 연결 한 후, 설정을 복사해 주세요!(사진) (사진) 복사한 설정값을 Cursor의 Settings의 MCP 메뉴에 들어가서 추가해 주세요.(사진)과정3) 커서를 종료하고 다시 켜기(이 과정에서 반드시 "완전히 종료" 하셔야 합니다 - 최소화(X))최소화가 아닌, 완전히 종료 후 다시 실행해 주세요.과정4) 커서 Settings에 등록된 MCP 초록불 확인 후, Cursor-Talk-To-Figma 플러그인 다시 Connect하기Cursor를 재시작 후, Settings에 들어가서 피그마MCP에 초록불이 켜진 것을 확인해 주세요.(사진)피그마에서 Cursor-Talk-To-Figma 플러그인을 켜고, 연결을 재시도하여, 성공시 나타나는 채널명을 복사해서 사용해 주세요(사진)프롬프트에서 활용하기 이전에, 정말 연결이 잘 되었는지 테스트가 궁금하다면 미리 한 번 테스트 해보세요!(사진)(사진)
- 0
- 2
- 66
Hỏi & Đáp
flex를 grid 처럼 만들기 질문드립니다.
안녕하세요! robotics님!강의에서 설명드린 것과 같이, 위에 한 번 더 감싸기를 함으로써 구현해 보실 수 있어요!// CSS 영역 .CSS_결제수단그룹1 { display: flex; flex-wrap: wrap; width: 360px; // 이 부분의 크기를 400px에서 360px로 변경(바깥에 400px 상자를 두고, 통째로 가운데 정렬하기 위함)하고, 배경색을 제거해 주세요. column-gap: 30px; } .전체한번더감싸기 { width: 400px; // 한 번 더 감싼 영역의 크기를 400px로 두고, 내부의 자식들은 center 정렬해요. display: flex; justify-content: center; background-color: lightgray; // 최상위 태그네 배경색을 추가해 주세요. } // HTML 영역 신용카드 계좌이체 핸드폰결제 무통장입금 포인트결제
- 0
- 2
- 24
Hỏi & Đáp
깃 레포지터리 소스
안녕하세요! moon님!해당 과정은 오프라인 부트캠프를 그대로 온라인화 한 과정이에요!따라서, 소스코드를 누구나 다운로드 받을 수 있게 공개하기 보단, 이를 필요로하는 실무자에 한하여 이메일로 제공해드리고 있어요!이메일을 알려주시면, 해당 메일로 전송드릴게요!
- 0
- 2
- 22
Hỏi & Đáp
Figma MCP 도구에 접근할 수 없다고 나오네요....
안녕하세요! pyo5330님!현재 Cursor를 포함한 AI도구들의 업데이트가 빠르게 진행되다보니, 수업에서 진행되는 방식과 버전에따른 차이가 발생할 수 있어요!아래의 링크를 통해 문제를 해결해 주세요!^^https://inf.run/K9CA3
- 0
- 2
- 51