![[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?w=420)
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
코드캠프
코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?
입문
NestJS, Node.js, JavaScript
바이브코딩으로 피그마 디자인 100% 동일하게 UI 생성하는 법
실제 적용 가능한 프롬프트 제공
바이브코딩으로 기능 중심의 전체 프로젝트 완성
바이브코딩 포트폴리오
회사에서 사용 가능한 실무 중심 바이브코딩
실패 없는 바이브코딩
피그마 기획·디자인대로 100% 구현하는 법을 공개합니다.
'바나나 그려줘~' 이런 느낌이 아닌 실무 바이브코딩을 표현하는 바나나 이미지
왜 바나나가 대표 이미지인가요? 바나나 하면 바이브코딩 생각의 흐름대로 바이브코딩스럽게 선택했어요. 하지만, 개발자를 위한 바이브코딩은 느낌대로 할 수 없습니다. 체계적이고 설계 기반으로 진행해야 합니다.
이 강의는 개발자를 위한 진지한 바이브코딩입니다. 실무에 적용 가능한 수준의 바이브코딩이에요.
특히, 주니어 개발자라면 AI시대 반드시 알고 있어야 하는 필수 역량입니다.
피그마를 다룰 수 있는, Project Manager, UIUX designer, 서비스 기획자가 학습하기에도 충분한 난이도로 진행하고 있습니다. 1인 창업 및 N잡을 원한다면 도전해보세요!
바이브코딩으로 피그마 디자인을 100% 구현이 안되어 답답하지 않으셨나요?
우리 팀, 또는 내가 만들고 싶은 정확한 Figma 디자인을 바이브코딩으로 100% 정확하고, 빠르게 생성하는 비법을 공개합니다.
어설픈 초기 Figma MCP 결과물 → 정확하게 생성하기 (야놀자 홈페이지 예시)
5분 만에 만들어지는 단순한 바이브코딩 서비스고 말고, 제대로된 서비스를 만들고 싶으셨나요?
우리 팀, 또는 내가 만들고 싶은 정확한 Figma 기획을 바이브코딩으로 100% 정확하게 구현하는 방법과 프롬프트를 공개합니다.
이 강의 이후엔, 진짜 실무에도 완전 자동화 바이브코딩을 적용해서 작업할 수 있어요!
바이브코딩에 특화된 개발 원리·개념을 포함하여 비개발자도 충분히 학습 가능합니다.
개발자가 바이브코딩으로 자기주도적 성장할 수 있도록 로드맵을 제안합니다.
'감정 일기장' 프로젝트로 바이브코딩의 거의 모든 방법론을 학습할 거예요!
피그마 디자인 그대로 UI 생성하기
실무 개발처럼 공통 컴포넌트 만들기
바이브코딩을 위한 개발 순서 정하기
다양한 기능 구현 및 API 연결하기
로그인 및 권한분기 처리하기
개발자다운 병렬처리 방법
AI가 실수했을 때 안전하게 되돌리기
내 의도대로 120%의 결과물을 얻는 프롬프트 제공 및 작성법을 학습할 거에요!
커서 Rule 설정법
재사용 가능한 프롬프트 제공
100% 안정적인 결과물 얻는 Rules
바이브코딩을 위한 폴더 구조
AI가 생성하는 바이브코딩 방식은 코드의 충돌을 피하기 위한 개발 순서가 중요해요!
AI가 생성하는 바이브코딩 방식은 코드의 충돌을 피하기 위해 병렬 가능한 범위를 알아야 해요!
바이브코딩 특성상, 매번 다른 결과물이 나올 수 있기에 커리큘럼 완성이 어려웠습니다.
모두가 동일한 결과물이 나올 수 있도록 수정 및 결과물 재검토 하는 법을 찾았어요!
실무를 따라가는 명확한 커리큘럼을 확인해 보세요.
강의 프로젝트와 유명 블로그 서비스 'Velog'의 원리는 동일해요!
더 복잡한 여행플랫폼 '마이리얼트립'도 원리는 동일해요!
1. 유명 블로그 서비스 'Velog'의 UI와 거의 모두 동일해요.
일기보관함 → 사진보관함 이동 : 트렌딩 → 최신·피드 이동과 동일
일기카드 : 블로그 카드 동일
2. 유명 블로그 서비스 'Velog'의 기능과 거의 모든게 동일해요.
전체 필터 : 이번 주 필터 기능은 동일
검색 로직 동일
모든 페이지 이동 로직 동일
이중 모달 및 프로바이더 로직 동일
3. 여행 플랫폼 '마이리얼트립'의 프론트엔드 원리와 거의 동일해요.
이제는 어떤 서비스던 실무적용 바이브코딩으로 빠르게 쉽게 프론트엔드를 AtoZ 구현할 수 있어요.
직접 원하는 디자인 소스를 얻는 HTML to Design 플러그인 사용법도 다루고 있어요!
프롬프트를 수정해서 다양한 디자인으로 바이브코딩 연습해보세요.
1인 창업 또는 수익화 서비스를 위한 프로젝트를 구현해보세요.
Velog Figma
마이리얼트립 Figma
29cm Figma
최선의 결과를 내기 위해서, 커서AI 유료 플랜을 사용하고 있어요. 클로드 4.0 기준으로 AI 생성하기 때문에 토큰 소진이 있는 점 참고해주세요.
바이브코딩으로 프로젝트를 만들 때는, 피그마의 유료 서비스인 데브모드는 없어도 가능해요! 제공된 디자인을 여러분의 페이지에 복붙해서 사용하세요.
기초 HTML, CSS, Javasript 지식이 있으면 좋아요.
React 기초 지식이 있다면, 바이브코딩이 더 쉬워져요!
프롬프트 작성법과 개발 개념을 함께 배울 수 있어요.
바이브코딩으로 프론트엔드를 빠르게 만들고 싶은 개발자라면
피그마로 기획 및 디자인 가능한 사람, 특히 UIUX 디자이너 & PM이라면
매달 들어오는 ‘제 2의 월급’을 퇴근 후 쉽게 만들고 싶다면
빠른 결과물이 필요한 스타트업을 꿈꾼다면
이 강의가 딱 맞을 거예요.
그동안 받아왔던 노원두님의 키워드와 수강평을 정리했습니다.
이 강의를 통해 노원두님과 함께 앱 개발자로 성장해보세요🚀
#친철한 강의
#꼼꼼한
#힘숨찐
#귀에 쏙쏙
#찐개발자
#멘토의 멘토
#원두콩
#좋아요좋아요
React.js 또는 Next.js 기초 지식이 있으신 분들이 듣기에 최적화된 강의입니다.
프롬프트 기반의 바이브코딩으로 전체 개발 사이클을 학습할 수 있는 핵심 강의입니다.
working prompt를 제공하기 때문에, 프롬프트를 응용하여 개별 프로젝트에 적용할 수 있습니다.
저희가 경험했던 시행착오를 여러분들은 하지 않도록, 최대한 많은 내용을 담았습니다.
더욱 확실한 결과를 얻기 위해서 더 똑똑한 AI를 선택하는 것이 바람직하다고 판단하고 있습니다. 강의는 커서 유료 플랜을 사용하고 있으며, 클로드 4.0과 o3로 개발을 진행하고 있습니다. 따라서 토큰 소진이 다소 되고 있다는 점을 꼭 확인해주세요.
학습 대상은
누구일까요?
바이브코딩으로 실서비스 구축하고 싶은 누구나
바이브코딩을 회사에서 사용하고 싶은 누구나
바이브코딩 포트폴리오가 필요한 누구나
정교한 1인 창업 서비스를 바이브코딩으로 만들고 싶은 누구나
내 서비스를 만들고 싶은 UIUX 디자이너
내 서비스를 만들고 싶은 기획자 또는 PM
선수 지식,
필요할까요?
React 기초
HTML, CSS 기초
13,392
명
수강생
383
개
수강평
193
개
답변
4.8
점
강의 평점
12
개
강의
"Try anything, Try everything!"
코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
전체
50개 ∙ (18시간 10분)
해당 강의에서 제공:
5. [2-2] enum 생성
10:59
6. [2-3] url 생성
07:22
7. [2-4] 프로바이더 생성
15:23
9. [2-6] 스토리북 생성
24:10
18. [4-1] 커서룰 고도화
07:34
19. [5-1] 기능 구현 순서
05:21
20. [5-2] TDD와 안전성
22:48
21. [5-3] 페이지 이동 연동
52:31
22. [5-4] 상세 배너 연동
17:15
23. [5-5] 일기쓰기 버튼 연동
29:20
얼리버드 할인 중
₩65,340
40%
₩108,900
지식공유자님의 다른 강의를 만나보세요!
같은 분야의 다른 강의를 만나보세요!