React와 Next.js로 배우는 입문용 프론트엔드 프로젝트: Tailwind CSS와 정적 배포까지 완성하기
ludgi
Next.js와 Tailwind CSS를 활용한 프론트엔드 입문 강의입니다. 백엔드 없이 정적 배포까지 완료하며, 초보자도 완성의 성취감을 느낄 수 있도록 설계되었습니다
입문
Next.js, TailwindCSS, aws-s3
BEST
프론트엔드 마스터클래스
웹 개발 최소 1년 이상의 학생 및 실무자들을 위한 고급 프론트엔드 강좌입니다. 가장 좋은 대상은 현업에서 2~3년 이상의 경험을 하고, 실력의 정체기 또는 대형 기업에서 고려해야하는 제품 구조에 대해 배우고 싶은 분들을 위해 만들어졌습니다.
카카오
임직원들도 이 강의를 듣고 있어요!
카카오
임직원들도 이 강의를 듣고 있어요!
먼저 경험한 수강생들의 후기
4.7
5.0
관태
33% 수강 후 작성
이기적으로 나만 보고 싶은 강의.. 프론트엔드 지망, 주니어 레벨에 있는 단계라면 레벨 업을 할 수 있는 강의 기초적인 부분보다는 심화에 집중되어 있는 강의 시야가 넓어지고 그저 되는 코드만 작성하는 사람들 중 더 좋은 코드를 짜고 싶은 분들에게 추천!
5.0
열람현
10% 수강 후 작성
안녕하세요 수강신청하고 5시간 30분 정주행하고 후기남깁니다 (전체 강의 10% 정도 봤습니다) 강의를 듣기 전 나의 코딩 수준 - 1년 반 전 바이브 코딩으로 시작. 처음에는 재미있었지만 개발 지식이 없어서 막히는 부분이 답답하여 유튜브로 HTML CSS JS 흐름 공부 - 이때부터 AI와 협업이 잘 되어 제가 원하는 수준의 프로그램이나 홈페이지를 완성하는 과정도 재밌었고 적은 용돈도 벌다가 지금은 본업과 비슷한 수준의 돈을 코딩을 통한 부업으로 벌게되었습니다 - 연봉이 두배가 된 셈이지만, 클로드 오퍼스 모델이 나오면서 크게 느끼는점은 비전공자인 제가 AI와 협업하기에는 더 이상 AI의 능력이 말도안되게 높아져서 '더 효율적으로 할 수 있을거같은데...' 라는 생각을 많이 하게되었습니다. 개발 지식이 없으니까 AI 능력을 극대화하는게 불가능하여 벽을 크게 느꼈어요. - '해줘' -> '안되네, 이런 오류가 있어 다시 해줘' -> ' 이번엔 이런 오류야'... 이렇게 원인도 모른채 될때까지 AI에게만 의지하는 무한 반복을 1년 넘게 해보니 지치기도하고, AI 에이전트를 활용해야되는 시대에 비효율적이라는걸 크게 느끼고 성장하기위해 강의를 찾게되었습니다 이 강의를 선택한 과정 - 유튜브에 매일 쏟아지는 뻔한 AI 에이전트 소개 영상에 지침 - 자기가 만든 서비스는 하나도 없으면서 '어디 어디 회사 몇 년 차' 타이틀로 승부하는 컨텐츠들 - AI에게 물어봐도 알 수 있는 지식들을 AI로 대본 뽑고 대단한것처럼 포장하는 썸네일과 컨텐츠에 실망만하게 됨 - 저처럼 바이브코딩으로 작은 성과라도 내보신 분들은 아실 겁니다. 크리에이터 개발자분들은 100마디 말보다 직접 만든 서비스 하나가 실력을 증명한다는 것을요. 이 강사님의 서비스와 유튜브 컨텐츠를 통해 강의에서 반에 반이라도 흡수할 수 있으면 크게 성장할 수 있을거라고 확신했습니다. 수강 후기 - 모든 개발 개념의 지식을 설명한다기보다 실무에서 직접 사용해본 경험을 공유해주어서 차별화가 확실하고 재미있습니다, 챗 지피티도 할 수 있는 일방적인 설명이 아닌 경험을 공유하는 방식이라 다음 이야기가 궁금해서 집중해서 듣게되요 - AI도 알려주지 않는 실무의 기술들이 너무 많습니다, '그동안 내가 했던건 다 똥꼬쇼였구나....'라고 느낍니다. 이 강의에 나오는 방식을 유튜브에서도 한번도 본적 없는게 너무 많아요. 앞으로도 나만 알고 싶다는 생각이 들 정도에요 - 엘리트 시니어 개발자님은 어떻게 개발하는지 볼 수 있어서 제 AI 파트너를 어떻게 세팅해야할지 어떻게 평생 기술로 장착하고 나아가야할지 확실히 알 수 있어서 정말 좋습니다 - 우리 바이브 코더들은 회사에 취업하는게 목표가 아니라서 개발 지식들을 설명할 수 있을정도로 달달 외우는건 필요하지않고, 어떻게 AI를 설정&구축하고 효율적으로 최종 목표를 달성할 것인가에 집중하기때문에 이 목표를 이루고싶은 바이브코더 동료분들에게 강력 추천합니다. 자유를 얻은 기분이에요ㅎㅎ
5.0
mike1124
100% 수강 후 작성
연휴 동안 완강하려 했는데 정말 양이 많네요. 말 그대로 프론트엔드 전체를 한눈에 볼 수 있는 종합 선물 세트 같은 강의입니다. 전체적인 흐름을 잡을 수 있고, 핵심적인 내용이나 중요한 내용들은 실무 예제 중심으로 설명해주셔서 "이건 연휴 끝나고 바로 회사에서 써봐야겠다" 는 생각이 들 정도로 몰입해서 들을 수 있었어요. 백엔드를 어느정도 해봤어서 이해하는데 더 도움이 됐습니다. 어려운 부분도 강의 자료가 잘되어 있어서 좋았습니다. 그리고 전반적으로 개념적인 설명도 같이 해주셔서 AI 시대에 적합한 좋은 강의라고 느꼈습니다. 이 강의를 듣고 나서 예전엔 안 보이던 부족한 부분이 보이고, 이건 이렇게 개선할 수도 있겠다는 생각도 들었습니다. 이 강의의 목표가 코드를 보는 이전과 다른 눈을 가질 수 있게 된다인데 정말 한 코드를 보고도 많은 생각을 할 수 있게 됐어요. 좋은 강의 감사합니다.
수강 후 이런걸 얻을 수 있어요
고급 프론트엔드 개발 방법론
GoF 객체 구조와 이를 실무적으로 적용한 예
이런 분들께
추천드려요
학습 대상은
누구일까요?
실력의 정체기가 온 프론트엔드 개발자
최소 1년 이상의 웹 개발 경험과 경력이 있는 분
선수 지식,
필요할까요?
프로그래밍 기초 지식
최소 1년 이상의 웹 개발 경험
기본적인 HTML, CSS 문법에 대한 이해
바닐라 자바스크립트에 대한 기초적인 이해
최소 6개월 이상 React.js 및 Next.js의 사용 경험
커리큘럼
전체
436개 ∙ (56시간 33분)
7. 7. this란
05:39
10. 10. 변수 객체
02:29
11. 11. 호이스팅
02:31
12. 12. 스코프 체인
04:24
15. 15. 힙의 특징
05:39
16. 16. 이벤트 루프
10:27
19. 19. 비동기란?
04:12
25. 25. p-limit
04:20
26. 26. Web API
19:32
30. 30. Map
04:29
33. 33. Set
16:07
36. 36. WeakSet
12:09
37. 37. Proxy 객체
13:26
42. 42. WeakSet 예시
04:42
50. 50. 빌더 패턴
17:38
53. 53. OCP
08:25
58. 58. 퍼사드 패턴
17:07
59. 59. 전략 패턴
11:06
71. 71. 상태 패턴
10:57
74. 74. 지연 평가
05:55
78. 78. 일급 함수
06:06
81. 81. 커링
02:38
93. Custom Hooks
09:39
97. Render Props
06:08
101. A:B:C:D 테스트
09:08
102. 메모이제이션
14:42
103. 가상화
01:17
108. Slot
14:38
109. State Reducer
14:53
110. Lifted State
06:51
강의 게시일:
마지막 업데이트일:
수강평
전체
14개
4.7
14개의 수강평
열람현수강평 1
∙
평균 평점 5.0
5
10% 수강 후 작성안녕하세요 수강신청하고 5시간 30분 정주행하고 후기남깁니다 (전체 강의 10% 정도 봤습니다) 강의를 듣기 전 나의 코딩 수준 - 1년 반 전 바이브 코딩으로 시작. 처음에는 재미있었지만 개발 지식이 없어서 막히는 부분이 답답하여 유튜브로 HTML CSS JS 흐름 공부 - 이때부터 AI와 협업이 잘 되어 제가 원하는 수준의 프로그램이나 홈페이지를 완성하는 과정도 재밌었고 적은 용돈도 벌다가 지금은 본업과 비슷한 수준의 돈을 코딩을 통한 부업으로 벌게되었습니다 - 연봉이 두배가 된 셈이지만, 클로드 오퍼스 모델이 나오면서 크게 느끼는점은 비전공자인 제가 AI와 협업하기에는 더 이상 AI의 능력이 말도안되게 높아져서 '더 효율적으로 할 수 있을거같은데...' 라는 생각을 많이 하게되었습니다. 개발 지식이 없으니까 AI 능력을 극대화하는게 불가능하여 벽을 크게 느꼈어요. - '해줘' -> '안되네, 이런 오류가 있어 다시 해줘' -> ' 이번엔 이런 오류야'... 이렇게 원인도 모른채 될때까지 AI에게만 의지하는 무한 반복을 1년 넘게 해보니 지치기도하고, AI 에이전트를 활용해야되는 시대에 비효율적이라는걸 크게 느끼고 성장하기위해 강의를 찾게되었습니다 이 강의를 선택한 과정 - 유튜브에 매일 쏟아지는 뻔한 AI 에이전트 소개 영상에 지침 - 자기가 만든 서비스는 하나도 없으면서 '어디 어디 회사 몇 년 차' 타이틀로 승부하는 컨텐츠들 - AI에게 물어봐도 알 수 있는 지식들을 AI로 대본 뽑고 대단한것처럼 포장하는 썸네일과 컨텐츠에 실망만하게 됨 - 저처럼 바이브코딩으로 작은 성과라도 내보신 분들은 아실 겁니다. 크리에이터 개발자분들은 100마디 말보다 직접 만든 서비스 하나가 실력을 증명한다는 것을요. 이 강사님의 서비스와 유튜브 컨텐츠를 통해 강의에서 반에 반이라도 흡수할 수 있으면 크게 성장할 수 있을거라고 확신했습니다. 수강 후기 - 모든 개발 개념의 지식을 설명한다기보다 실무에서 직접 사용해본 경험을 공유해주어서 차별화가 확실하고 재미있습니다, 챗 지피티도 할 수 있는 일방적인 설명이 아닌 경험을 공유하는 방식이라 다음 이야기가 궁금해서 집중해서 듣게되요 - AI도 알려주지 않는 실무의 기술들이 너무 많습니다, '그동안 내가 했던건 다 똥꼬쇼였구나....'라고 느낍니다. 이 강의에 나오는 방식을 유튜브에서도 한번도 본적 없는게 너무 많아요. 앞으로도 나만 알고 싶다는 생각이 들 정도에요 - 엘리트 시니어 개발자님은 어떻게 개발하는지 볼 수 있어서 제 AI 파트너를 어떻게 세팅해야할지 어떻게 평생 기술로 장착하고 나아가야할지 확실히 알 수 있어서 정말 좋습니다 - 우리 바이브 코더들은 회사에 취업하는게 목표가 아니라서 개발 지식들을 설명할 수 있을정도로 달달 외우는건 필요하지않고, 어떻게 AI를 설정&구축하고 효율적으로 최종 목표를 달성할 것인가에 집중하기때문에 이 목표를 이루고싶은 바이브코더 동료분들에게 강력 추천합니다. 자유를 얻은 기분이에요ㅎㅎ
- 관태
수강평 6
∙
평균 평점 5.0
수정됨
- 임영민
수강평 3
∙
평균 평점 5.0
- mike1124
수강평 3
∙
평균 평점 5.0
5
100% 수강 후 작성연휴 동안 완강하려 했는데 정말 양이 많네요. 말 그대로 프론트엔드 전체를 한눈에 볼 수 있는 종합 선물 세트 같은 강의입니다. 전체적인 흐름을 잡을 수 있고, 핵심적인 내용이나 중요한 내용들은 실무 예제 중심으로 설명해주셔서 "이건 연휴 끝나고 바로 회사에서 써봐야겠다" 는 생각이 들 정도로 몰입해서 들을 수 있었어요. 백엔드를 어느정도 해봤어서 이해하는데 더 도움이 됐습니다. 어려운 부분도 강의 자료가 잘되어 있어서 좋았습니다. 그리고 전반적으로 개념적인 설명도 같이 해주셔서 AI 시대에 적합한 좋은 강의라고 느꼈습니다. 이 강의를 듣고 나서 예전엔 안 보이던 부족한 부분이 보이고, 이건 이렇게 개선할 수도 있겠다는 생각도 들었습니다. 이 강의의 목표가 코드를 보는 이전과 다른 눈을 가질 수 있게 된다인데 정말 한 코드를 보고도 많은 생각을 할 수 있게 됐어요. 좋은 강의 감사합니다.
- 왕감자
수강평 1
∙
평균 평점 5.0
비슷한 강의
같은 분야의 다른 강의를 만나보세요!
![[PROKIT] 바이브코딩/프론트엔드 연습용 문제집: 타이머 앱 만들기강의 썸네일](https://cdn.inflearn.com/public/files/courses/339612/cover/01ke6d974hx4y1esmd9p80w7cx?w=420)
![[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?w=420)
