강의

N
챌린지

멘토링

N
클립

로드맵

BEST
Programming

/

Front-end

[Code Camp] A highly concentrated front-end course created at Bootcamp

This is a highly concentrated curriculum from a ‘real’ bootcamp that has produced over 300 developers in a year. With just this one class, you will be able to grow to the level of a junior developer in the field and gain the ability and knowledge to use the front-end technology stack. [InflearnX Code Camp] has prepared this so that anyone can build a career regardless of their social, economic, or educational background :)

(4.5) 79 reviews

1,889 learners

프론트엔드
front-end
리액트
react
next.js
graphql
React
Next.js
GraphQL
SEO
Node.js

Reviews from Early Learners

What you will learn!

  • 2 practical portfolios

  • 8 Projects Built Using the Latest Tech Stack

  • Complete understanding of the overall development cycle

  • Enhance practical communication skills

  • +α Learn the basics of CRUD in the backend

Even for those with no base and no major
Career Jump as a Front-end Developer! ⭐

📢 There are instructions.
This is an updated lecture of the high-concentration front-end course.
[The Perfect Front-End Course] has been newly opened.

👉🏻 New Frontend Course:



The new Front-End Bootcamp course for 2025 has been re-launched with more powerful and detailed content!
Grow quickly and with practical learning content in the 'Complete Front-End Course' consisting of 4 parts.

[Start with Free Camp], [CSS&Javascript Master]. [Web Front-end Bootcamp], [Hybrid App Bootcamp]
We are continuing to provide over 150 hours of intensive front-end lectures, from complete beginner level to hybrid app course:)

Take a higher career jump in 2025🚀
CodeCamp supports your growth.

💥 Attention!
 This course is a curriculum that is actually used in coding bootcamps and can be taken by anyone from beginners to non-majors and junior developers.

Made in a 'real' bootcamp
[Highly concentrated front-end course]

✅ Studying is like working! A practical lecture that teaches you how to apply it to work.

✅ A step-by-step curriculum that can be understood by everyone from non-majors to majors

✅ [React, Next.js, Graphql] Learning languages and implementing projects using the latest technologies

✅ The curriculum is based on a certified 'real' bootcamp with a 92% employment rate .

✅ Growth from complete basics that even no-base can achieve to developer employment level


 For these people
It's a perfect fit

A to Z,
I want a professional lecture.

Development..? I don't know anything
I want to grow to a job level.

The techniques used in practice
I want to learn real know-how.

Why do we
Should I use React and Next.js?

Next.js is a framework for the React library . Unlike React, Next.js basically does Server-Side Rendering (SSR), so it is good for search engine optimization (SEO) . It also allows you to retrieve pages with data rendered in advance through pre-rendering, so it is also advantageous in terms of user experience.

In addition to this , it provides page-based routing, image optimization, built-in-css, etc. to improve project performance and provide a convenient development environment for developers, allowing for efficient and high-performance development :)

It's okay even if you're a complete beginner.
 Should we start from the basics first?

"I don't even know the 'code' of coding... Will I be able to get a job as a developer?" Put those worries aside right now. This course starts with a solid foundation so that even complete beginners can grow to the level of working developers!

🧩 Basic application step 01.

What is coding? From program installation to building the basics

We will learn the basics of web and app development, the basic grammar and usage of HTML, CSS, and Javascript, and based on what we have learned, we will implement membership registration and a mini-homepage.


🧩 Step 02 of spreading the foundation.

CSS with over 60 cutting-edge properties!

Let's review what we learned today today! After attending the lecture, we will help you fully absorb it through sufficient practice.

🧩 Basic application step 03.

Enrich your web pages with Javascript.

This is a time to learn about the tools we use together, how Javascript works, how to write code, and to make what you have learned completely your own by implementing a d-day counter and to-do list.


Not missing a single gap
Front-end curriculum that 'crosses the line'

#01. React Basics

Let's start with the basics of React. First, install various packages. Then, understand Node.js, a Javascript runtime environment, and create a project with React.

#02. Data Communication

Understand the difference between Rest-API and GraphQL, and learn how to communicate with the backend through Apollo Client.

#03. Routing and Re-Rendering

You can understand and utilize the differences between Router and Dynamic Routing, which are page movement methods.

#04. Folder structure, props, and component reusability

Understand the Container/Presenter pattern and learn how to reuse components to increase efficiency.

#05. TypeScript

Understand the different types in TypeScript and apply them to my portfolio.

#06. Framework/Library and Layout
structure

Various libraries for decorating web pages. Learn how to use them and implement pagination and infinite scroll for usability.

#07. Components and Life Cycle

Understand the difference between the lifecycle of a class component and the lifecycle of a functional component, and learn how to utilize it based on this.

#08. Backend Structure and Firebase

You can create your own API and understand the basics of the backend. You will also utilize Firebase, a BAAS service. A frontend developer who understands the backend! Isn't that so attractive?

#09. Upload image

'I want to upload a pretty image on my homepage!' You can understand the process of uploading images and upload them yourself after verification.

#10. Search

A search function is a must on any webpage. Understand the search process and apply debouncing to enhance your webpage.

#11. Login and Permissions Branching

Understand the login process using the JWT token method. You can also set up authorization branching based on login status and manage Globalstate using Recoil.

#12. Form Library

You can improve your service more efficiently by refactoring existing codes using React-Hook-Form and yup.

#13. custom hooks

You can create custom hooks using destructuring assignment and TypeScript's generic types.

#14. Kakao Map and Web Editor

Do you know SSR and CSR? Understand the difference and learn how to use Kakao Map and Web Editor.

#15. Payment and Event Loop

The core of the e-commerce platform! Understand and implement the payment process. Also, learn more about the operating principles of JavaScript.

#16. Refresh Token

Learn a practical login process using refresh tokens.

#17. Performance Optimization

You can refactor existing codes as if you were working in real life by using useMemo, useCallback, and temporary image URLs.

* Provides a separate API for classes.

#18. Test code and deployment

I'm going to create a test code using jest and cypress. This will allow me to test my code by performing unit tests and integration tests.


With code filled by my own hands
Complete your portfolio.

☝🏻 All About Free Bulletin Board

You can directly implement a bulletin board that is indispensable anywhere on the web, such as blogs and communities. It is impossible to do coding only with theory! Through project practice, you can fill in your own code with various functions such as pagination and infinite scroll. In addition, you can decorate it with a UI that suits your personality, so not only interest but also skill will increase, right?

✌🏻 An e-commerce platform created with a bulletin board

"By any chance... Are you a carrot?🥕" Do you know how E-commerce platforms like Coupang and Carrot Market are created ? You can implement an E-commerce website with many functions such as membership registration, login, payment, and community with your own hands . It may seem daunting at first, but after taking this course, you will have created a wonderful portfolio.

🎯 This is the portfolio you get from this course.
· 01. Free Bulletin Board - Implement the most core functions of the web, such as UI, list-up, pagination, and post editing and deletion, and complete a portfolio based on these.
· 02. Secondhand Market - This is a portfolio that upgrades the bulletin board created as the first portfolio into a secondhand market. It implements functions such as login, permission division, payment, and image processing.

Plus, just one lecture
Get this much stack at once!

It is difficult to understand multiple languages at once. In this course, you will complete your own web page by directly utilizing various stacks such as Javascript, Typescript, React, Next.js, and Graphql through a project. You will learn how to use languages that are organically connected to implement a single function, and you will understand it naturally.

In real practice, you need to be able to use various languages appropriately and achieve the best efficiency!

* version: This is the version used when taking the course. (Please refer to this if necessary!)
 

 - next 12.1.0
- react": 17.0.2
- react-dom": 17.0.2
- typescript": ^4.8.4
- @types/node": 17.0.2
- @types/react": 17.0.2
- @apollo/client": ^3.6.9
- @emotion/styled": ^11.10.0
- @material-ui/core": 4.12.4
- antd": ^4.22.8
- eslint": ^8.0.1
- prettier": 2.7.1

 It's okay if you don't understand 'Version' and its technology stack. I'll explain it to you in detail and kindly in the lecture :)

For a higher career jump
We provide boot camp course materials.


📑 Section-by-section learning materials

This is a resource that helps you understand the content while taking the class. Since it is a resource that actual boot camp students also use, if you use it well, it will be of great help even if you miss something.

📑 Section-by-section assignment materials

Let's review what we learned today today! After attending the lecture, we will help you fully absorb it through sufficient practice.


📑 Portfolio by section

This is a reference material that you can use when creating a portfolio using the features you learned in each section. Add two projects to your portfolio with this lecture!



Students taking this course
Introducing a service we created ourselves.

🎨 Artipul
 This is a service that allows you to easily purchase art works by art students. In addition to the main page, it enables point charging and payment through an open payment API, and even implemented a real-time bidding function using Socket.io.

📙 Flog
 It is a travel guidebook service consisting of a travel schedule, household account book, and travel log. If you create a travel schedule with the drag&drop function, it will be saved in the DB in real time, which increases usability. In addition, it has been implemented so that you can share your schedule with other users!

[Highly concentrated front-end course]
After taking the course, I too can become a developer!

🙆🏻‍♀️ 2 portfolios that can be used immediately in practice

👨🏻‍🎓 Build a solid development knowledge base that can help you grow on your own

💁🏻‍♀️ Junior developer with smooth communication in practice

👨🏻‍💻 Front-end developer with excellent collaboration skills with other departments

🙋🏻‍♀️ Developing an E-commerce Platform that You Can Do on Your Own

For a higher career jump
[Highly concentrated backend course] has also been prepared.

👉🏻 Related recommended lectures:


If you have understood the latest front-end technology stack and development cycle using the practice API, learn more about the back-end centered on Node.js and Nest. We will teach you everything about the back-end, such as how to create the necessary API yourself, how to handle data, search, payment, and distribution. Complete the back-end course and jump higher in your career as a full-stack developer🚀

for a moment!
Please check before taking the class.

💡 Please check your computer specifications . 

 · Mac OS specifications are irrelevant.

 · If you are using Window OS, you need to install git-bash.
 - Please refer to Class Materials > Environment Settings.

 - Intel Core i5 9th generation or higher / AMD RYZEN 5 2nd generation or higher
 - RAM 16GB or more recommended

💡 I recommend that you create a schedule and study regularly and consistently .
💡 Please create an account for the collaboration tool ‘Notion’ to receive learning materials.
💡 Learning materials required for the course are provided through Notion (link) .
※ The copyright of the learning materials belongs to Code Camp. Unauthorized use, distribution, or reproduction is prohibited.

if
Do you have any questions?

Q. Can I take the course without any knowledge?
 Yes, it's okay if you don't know anything about coding. It includes a beginner's course on HTML, CSS, and Javascript to help you understand it more deeply and broadly.

Q. Is there a separate textbook?
 Please use the [lecture materials] provided by Notion! These materials are the exact materials used in actual boot camps. Unauthorized use, distribution, and reproduction are prohibited.

Q. I'm confused about the list of course materials for the basic course (starting with pre-camp, CSS, Javascript).

Q. I have a question during class.
 Please leave your questions in the community. The CodeCamp team will provide a quick and satisfying answer as soon as possible :)

Team Code Camp
Introducing.

Recommended for
these people

Who is this course right for?

  • Anyone who wants to grow properly with a professional curriculum

  • Those who feel a lack in national or other lectures

  • Junior developers who want to complete their development cycle with the latest technology stack

  • Job seekers who want to get a job with a portfolio that fits the trend

  • College students who want to study coding systematically

Need to know before starting?

  • Passion and will for coding 💪🏻

Hello
This is

15,063

Learners

392

Reviews

210

Answers

4.8

Rating

14

Courses

"Try anything, Try everything!"

코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!

Co-instructor

Curriculum

All

341 lectures ∙ (128hr 6min)

Published: 
Last updated: 

Reviews

All

79 reviews

4.5

79 reviews

  • 수달님의 프로필 이미지
    수달

    Reviews 1

    ∙

    Average Rating 5.0

    5

    1% enrolled

    안녕하세요. 1년차 주니어 백엔드 개발자입니다. 회사의 필요와 개인적인 욕심으로 프론트 분야도 학습을 하는 중이었는데 마침 이 강의를 만나게 되어 바로 구매 후 수강중입니다. 확실히 백엔드 분야와는 다른 흐름이 눈에 띄어서 처음에는 낯설게 느껴졌지만, 자바스크립트라고 하는 언어의 원리와 사용법까지도 함께 알려주시니 점점 재미와 속도가 붙네요. 원리만 학습하는 것이 아니라 함께 만들어 가면서 공부하는 방식인 덕분에 이해가 잘 되지 않을 때에도 이것저것 혼자서 만져보며 학습할 수 있어서 더 좋은 것 같습니다. 좋은 커리큘럼 덕분에 이 강의를 모두 듣고나면, 최소한 프론트엔드의 로직을 이해할 수 있는 백엔드 개발자라는 포지션. 그 이상을 가져갈 수 있을 것이라 기대가 되네요. 좋은 강의 감사합니다.

    • 감자도리님의 프로필 이미지
      감자도리

      Reviews 5

      ∙

      Average Rating 5.0

      5

      2% enrolled

      원두 멘토님..... 인프런에 강림해주시다니요. 믿고듣는 원두 멘토님 강의 ㅠㅠㅠ 엉엉 잘 지내시죠? 너무 보고싶어요. 멘토님 덕분에 프론트엔드 개발자로 취업하고 1년째 회사 잘 다니고 있어요ㅠㅠ! 인프런 구경하다가 강의 갑자기 올라와서 호다닥 강의 결제했어요! 프론트엔드는 소장하구 백엔드는 공부해보려구요❤️ 첫 부분 조금 다시 들었는데 멘토님 목소리와 얼굴 너무 향수병 유발하는 것... 이렇게라도 뵐 수 있어 너무 좋습니다!!! 멘토님 따라서 다시 한 번 열공해서 풀스택으로 점프업해볼게요!!!!! 조만간 인사드리러 가겠습니다! 존경합니다 멘토님!😍

      • 움냐님의 프로필 이미지
        움냐

        Reviews 2

        ∙

        Average Rating 5.0

        5

        3% enrolled

        오프라인으로 코드캠프 풀스택 과정 수료한 수료생입니다! 문자로 원두 멘토님의 강의가 인프런에 올라온다는 썰을 듣고 달려왔습니다. 개발자가 된 이후 개발자의 시선으로 이 커리큘럼을 말씀 드리자면 프로젝트의 성능을 고려하는 주니어가 되고싶다면 완벽한 커리큘럼인 것 같습니다! 주니어도 흔히 접할 수 있는 react에서 사용하는 memoization뿐만 아니라, 브라우저 렌더링 원리를 기반으로 한 repaint, reflow도 배우다 보니 확실히 리팩토링 할 때 고려할 수 있는 폭이 넓어졌습니다! 그리고 유지보수에 조금 더 유리한 방면으로 코드를 짤 수 있는 패턴들을 알려주시고, 팁들을 주셔서 개인적으로 잘 활용해보고 있습니다! 이 강의를 다시 보게되다니ㅠ 원두멘토님 절 기억하실지 모르겠지만, 보고싶습니다ㅜㅜㅜ 노원두! 노게인! 포에버!

        • JAB님의 프로필 이미지
          JAB

          Reviews 5

          ∙

          Average Rating 5.0

          5

          1% enrolled

          웹 프론트엔드 개발자가 되기 위해 준비중인 학생입니다. 인프런 코드캠프 HTML, CSS, 자바스크립트까지 다 듣고 프론트엔드 코스까지 있어 같이 구매했습니다!!!!! 앞부분 리액트 강의 듣고 있는데, 너무 재미있어요~~~!!!!!!! 아직까지 어려운 부분은 없는데, 뒤로 갈수록 점점 어려워질까봐 조금 걱정이 되지만! 열심히 들어볼 에정입니다! 일단 노션 자료가 너무 좋아요ㅠㅠㅠㅠㅠ 제 마음에 쏙 들어요ㅠㅠㅠㅠㅠ 이해안되는 부분들은 무한 반복으로 돌려보면 되겠죠..?????ㅎㅎㅎ 감사합니다!!!!!! 화이팅 꼭 수강 완료해서 포트폴리오 완성시켜 보겠습니다 화이팅

          • 기쁜 문어님의 프로필 이미지
            기쁜 문어

            Reviews 3

            ∙

            Average Rating 5.0

            5

            32% enrolled

            노원두 멘토님께 오프라인 강의를 들어 본 학생입니다! 혼자 듣기 아까운 퀄리티의 강의여서 주변 친구들에게도 이미 추천을 많이 했었는데, 이렇게 인프런에서 뵙게 되다니 너무 반가워요ㅠㅠ 보고 싶었어요 ㅠㅠ 이전에 다른 강사님의 수업도 들어봤지만, 실습 없이 이론 위주의 수업이 대부분이어서 막상 직접 코딩을 하려고 하면 막막하기만 했습니다.. 반면 노원두 멘토님은 실무에서 사용되는 기술 위주로 이해하기 쉽게 알려주시고, 원리를 파악한 후 스스로 직접 구현까지 해보도록 수업이 진행되어 실무에서도 바로 적용할 수 있을 정도의 수준을 만들어 주셨습니다. 수업에서 다루지 않은 기술을 마주하게 되어도 배운 원리들을 적용해서 파악할 수 있게 되었습니다. 또한 수업 중간중간에 해주시는 조언들을 통해 개발자로서 가져야 하는 마인드도 배울 수 있었습니다. 멘토님께서 개발을 진심으로 즐기고 사랑하시는 마음이 느껴져서 저도 덩달아서 개발 공부가 즐거워진 부분도 있습니다. ㅎㅎ 노원두 멘토님은 정말 저의 은사님이십니다,,💕 하루가 다르게 변하는 프론트 업계답게🥲 제가 아직 배우지 않은 새로운 기술과 내용이 많아 보여서 수강하려 합니다! 다른 수업도 열리면 바로 또 들으러 올게여ㅎㅎㅎ

            Limited time deal

            $297,000.00

            25%

            $304.70

            codecamp's other courses

            Check out other courses by the instructor!

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

            코드캠프

            10분만에 바이브코딩으로 만들 수 있는 단순한 서비스는 이제 버리세요! '진짜' 실무적용 바이브코딩을 배울 수 있습니다. 기획과 디자인대로 실서비스 수준의 고도화된 서비스를 커서AI NCOP로 만들어보시죠. No Code, Only Prompt

            중급이상

            중급이상

            React, Next.js, cursor

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일

            [VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)

            코드캠프

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

            코드캠프

            코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

            입문

            입문

            NestJS, Node.js, JavaScript

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

            코드캠프

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

            코드캠프

            수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

            입문

            입문

            React, Next.js, GraphQL

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

            코드캠프

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

            초급

            초급

            React, Next.js, expo

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기강의 썸네일

            [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

            코드캠프

            최신 CSS 프러퍼티와 실무적인 Javascript를 프로젝트를 진행하면서 재밌게 배울 수 있습니다.

            입문

            입문

            HTML/CSS, JavaScript, vanilla-javascript

            [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기강의 썸네일

            [CSS&JS Master] - 트렌디한 감정기록 일기장 만들기

            코드캠프

            [코드캠프] 훈훈한 Javascript강의 썸네일

            [코드캠프] 훈훈한 Javascript

            코드캠프

            다른 언어도 많은데.. 왜 자바스크립트여야 하냐구요? 자바스크립트는 전세계에서 가장 많이 쓰는 언어로, 비전공자도 빠르게 배울 수 있고 이해하기 쉬운 구조를 가지고 있어요. 게다가 구글, 페이팔, 아마존 등 유명 기업들도 활용하고 있다니! 더 이상의 고민이 필요한가요?

            입문

            입문

            JavaScript

            [코드캠프] 훈훈한 Javascript강의 썸네일

            [코드캠프] 훈훈한 Javascript

            코드캠프

            [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습강의 썸네일

            [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

            코드캠프

            너무나 어렵게만 느껴지는 알고리즘... 수학과 친하지 않은 수강생이라도 이 강의 하나로 알고리즘 기초를 한 번에 끝낼 수 있을 거예요! 알고리즘을 푸는 데 필요한 기초 개념을 차근차근 배우고, 더 나아가 문제에 적용하는 코드캠프의 노하우까지 싹 다 알려드릴게요 :)

            초급

            초급

            JavaScript

            [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습강의 썸네일

            [코드캠프] 입문자를 위한 Javascript 알고리즘 이론+실습

            코드캠프

            [코드캠프] 강력한 CSS강의 썸네일

            [코드캠프] 강력한 CSS

            코드캠프

            CSS만 집요하게 모아놓은 강의 보셨나요? 이 강의에서는 총 2가지 프로젝트를 진행하면서, 가장 기본적인 레이아웃 구성부터 반응형까지 구현하게 될 거에요! 자, 이제 준비되셨다면 시작해볼까요?

            초급

            초급

            HTML/CSS

            [코드캠프] 강력한 CSS강의 썸네일

            [코드캠프] 강력한 CSS

            코드캠프

            [코드캠프] 시작은 프리캠프강의 썸네일

            [코드캠프] 시작은 프리캠프

            코드캠프

            코딩 부트캠프의 독보적인 커리큘럼으로 만든 강의입니다. 가장 기초적이고 실무에서 꼭 필요한 내용들로 구성되어 있어요. '누구나 가능한 개발자로의 커리어 전환' 이 강의로 시작하세요.

            입문

            입문

            HTML/CSS, JavaScript

            [코드캠프] 시작은 프리캠프강의 썸네일

            [코드캠프] 시작은 프리캠프

            코드캠프

            Similar courses

            Explore other courses in the same field!

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

            코드캠프

            수백명의 개발자를 배출한 ‘진짜’ 부트캠프의 완벽한 프론트엔드 커리큘럼 입니다. 이 강의 하나로 여러분은 현업 주니어 개발자 수준까지 성장 가능하며, 프론트엔드 기술스택의 활용 능력과 지식을 얻게 될거에요. 누구나 사회적, 경제적, 교육적 배경에 상관없이 커리어를 쌓을 수 있도록, [코드캠프]가 준비했습니다 :)

            입문

            입문

            React, Next.js, GraphQL

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

            코드캠프

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

            코드캠프

            코딩과 사랑에 빠져버린 8년차 풀스택 개발자 Captain의 사심이 가득 담긴 커리큘럼이에요. 백엔드의 모든 것을 다 알려주고 싶은 Captain의 마음이 녹아있죠! 이 강의를 듣다보면 '이렇게까지 알려준다고?' 하는 생각을 떨칠 수 없을 거예요. 모두가 어려워하는 부분까지 꼭꼭 씹어 떠먹여주는 이 강의로 시작해 볼까요?

            입문

            입문

            NestJS, Node.js, JavaScript

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스강의 썸네일

            [코드캠프] 부트캠프에서 만든 고농축 백엔드 코스

            코드캠프

            [리뉴얼] React로 NodeBird SNS 만들기강의 썸네일

            [리뉴얼] React로 NodeBird SNS 만들기

            제로초(조현영)

            리액트 & 넥스트 & 리덕스 & 리덕스사가 & 익스프레스 스택으로 트위터와 유사한 SNS 서비스를 만들어봅니다. 끝으로 검색엔진 최적화 후 AWS에 배포합니다.

            중급이상

            중급이상

            React, Redux, Node.js

            [리뉴얼] React로 NodeBird SNS 만들기강의 썸네일

            [리뉴얼] React로 NodeBird SNS 만들기

            제로초(조현영)

            SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs강의 썸네일

            SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs

            ludgi

            실전 바이브 코딩으로 회사 소개 랜딩페이지를 완성합니다. Cursor AI + Next.js + TypeScript + TailwindCSS + shadcn/ui + MCP 스택으로, 설계부터 배포까지 한 번에 진행합니다. 핵심은 “빠른 구현 + 검색 엔진에 잘 노출되는 SEO 기반”입니다. 🏁 강의 목표 랜딩 제작 → 성능 최적화 → SEO 반영 → 배포/인덱싱 실시간 코딩(바이브 코딩)으로 섹션별 완성본을 바로 확인 검색 반영까지 직접 체험 🛠️ 실습 스택 Cursor AI, Next.js(App Router), TypeScript TailwindCSS, shadcn/ui, MCP 워크플로우 🔍 SEO 실습 강사가 제공하는 SEO 최적화용 MD 파일 적용 메타데이터, OG/Twitter 카드, robots/sitemap, 구조화 데이터(JSON-LD) 다국어 라우팅 선택 적용 🎯 완성물 반응형 회사 소개 랜딩 + 문의 폼 Lighthouse 95+ 목표 Vercel 배포 후 Search Console 등록 및 인덱싱 요청 📚 이 강의로 배우는 것 히어로/신뢰/기능/FAQ 섹션을 빠르게 구성하는 법 shadcn/ui로 깔끔한 UI 구성 폼 검증과 기본 전환 추적 포인트 설계 구조화 데이터 + 다국어 라우팅으로 SEO 스코어 올리기 배포 후 Search Console을 통한 인덱싱 과정 이해 💡 현업 인사이트 (강의 특전) 단순히 코드 구현만이 아니라, 실제 시장에서 활용되는 마케팅·노출 방식도 간단히 짚어드립니다. 광고, 블로그 포스팅, 댓글 작업의 현실적인 단가 범위 외주·용역 업체들이 실제로 SEO, 노출 작업을 어떻게 진행하는지 개발자가 직접 참여했을 때와 외주를 맡겼을 때의 비용/효율 차이 이 부분을 통해 단순히 기술을 넘어서 실제 현업에서 어떻게 활용되는지, 어떤 비용 구조로 움직이는지까지 감각을 익힐 수 있습니다. 한 줄 정리 “구현 → 최적화 → 배포 → 인덱싱”의 흐름을 따라가며, 실제 검색 노출과 현업 시장 구조까지 연결되는 웹 제작 프로세스를 배웁니다.

            입문

            입문

            React, Node.js, cursor

            SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs강의 썸네일

            SEO 최적화 랜딩페이지 솔루션 & 노출전략: 바이브코딩으로 완성 with Nextjs

            ludgi

            부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편강의 썸네일

            부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

            애프터캠프

            React 렌더링 원리, 최적화를 마스터해서 실전 활용 및 면접 준비를 해보세요!

            중급이상

            중급이상

            React, react-usememo, 기술면접

            부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편강의 썸네일

            부트캠프에서 알려주지 않는 것들 (리액트 렌더링 최적화 편) 2편

            애프터캠프

            비전공자를 위한 진짜 입문 올인원 개발 부트캠프강의 썸네일

            비전공자를 위한 진짜 입문 올인원 개발 부트캠프

            그랩

            왕초보도 할 수 있는 웹, 서버, 모바일 앱, 머신러닝까지 익히는 끝판왕 풀스택 강의!! 개발을 어디서부터 시작할지 막막했다면 이 강의를 강력 추천할게요. Javascript 하나로 진행합니다!

            입문

            입문

            JavaScript, React, Node.js

            비전공자를 위한 진짜 입문 올인원 개발 부트캠프강의 썸네일

            비전공자를 위한 진짜 입문 올인원 개발 부트캠프

            그랩

            공식문서로 배우는 실전 타입스크립트강의 썸네일

            공식문서로 배우는 실전 타입스크립트

            어쩔코딩

            타입스크립트를 제대로 이해하려면 공식문서를 한번쯤 보셔야겠죠? 문서에서 중요한 부분들만 콕 집어서 알기 쉽게 전달해드리고 실전에 필요한 내용들도 같이 알려드리는 강의입니다!

            입문

            입문

            TypeScript, JavaScript, ES6

            공식문서로 배우는 실전 타입스크립트강의 썸네일

            공식문서로 배우는 실전 타입스크립트

            어쩔코딩

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

            John Ahn

            이 강의를 통해서 쇼핑몰 웹사이트를 처음부터 하나하나 만들어 보실 수 있습니다.

            중급이상

            중급이상

            React, Redux, Node.js

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]강의 썸네일

            따라하며 배우는 노드, 리액트 시리즈 - 쇼핑몰 사이트 만들기[전체 리뉴얼]

            John Ahn

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

            닭강정

            React, Electron, Zustand를 활용해 타이머 앱을 직접 제작하고 크로스 플랫폼(윈도우, 맥 OS, 리눅스)으로 배포까지 하는 실전 강의입니다. 익숙한 React 웹 개발을 시작으로, Zustand를 통한 전역 상태 관리와 최종 GUI 배포까지, 데스크톱 앱 개발의 전체 흐름을 배우실 수 있습니다!

            초급

            초급

            React, Electron, GUI

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일

            [자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)

            닭강정

            GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일

            GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

            Indie Coder

            차세대 API 제어 기술인 GraphQL의 기본과 고급 사용법 그리고 GraphQL로 만들어 가는 가상의 키오스크 서비스를 통해서 실제 프로젝트 경험을 학습하게 됩니다. 강좌는 2024년 2월 기준 가장 최신 버전인 apollo-server v4로 강좌를 부분 업데이트 했습니다.

            초급

            초급

            GraphQL, Svelte, MongoDB

            GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일

            GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]

            Indie Coder

            mongoDB 기초부터 실무까지(feat. Node.js)강의 썸네일

            mongoDB 기초부터 실무까지(feat. Node.js)

            김시훈 (도도소프트)

            mongoDB, NoSQL 요즘 많이 들리지만 아직은 낯선 데이터베이스인가요? 관계형 데이터베이스(RDS/SQL)처럼 사용하고 계시지는 않으신가요? 아무리 좋은 기술도 올바르게 사용하지 않으면 역효과가 발생합니다. 그래서 몽고디비 사용 실패 사례도 종종 보이는데요. 이 강의는 mongoDB를 최대한 mongoDB스럽게 사용할 수 있도록 기본 개념부터 실무 노하우까지 가르쳐드려요.

            초급

            초급

            MongoDB, REST API, Node.js

            mongoDB 기초부터 실무까지(feat. Node.js)강의 썸네일

            mongoDB 기초부터 실무까지(feat. Node.js)

            김시훈 (도도소프트)

            바이브 코딩 With Claude Code로 웹 서비스 만들기강의 썸네일

            바이브 코딩 With Claude Code로 웹 서비스 만들기

            개발 까마귀

            현직 스타트업 CTO가 실제 서비스와 여러 외주를 통해서 얻은 바이브코딩 지식 전수해드립니다.

            입문

            입문

            HTML/CSS, JavaScript, Next.js

            바이브 코딩 With Claude Code로 웹 서비스 만들기강의 썸네일

            바이브 코딩 With Claude Code로 웹 서비스 만들기

            개발 까마귀

            [웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지강의 썸네일

            [웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

            개발자의 품격

            본 강의는 풀스택 웹 개발자 양성을 위한 [웹 개발 풀스택 코스] 강의 시리즈의 백엔드 부분에 대한 강의입니다. 이 강의는 강사의 저서 <Node.js 프로젝트 투입 일주일 전>의 내용을 바탕으로 만들어진 강의입니다.

            초급

            초급

            Node.js, MySQL, Express

            [웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지강의 썸네일

            [웹 개발 풀스택 코스] Node.js 프로젝트 투입 일주일 전 - 기초에서 실무까지

            개발자의 품격

            SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문강의 썸네일

            SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

            코딩도니

            React 프론트엔드와 SpringBoot 백엔드를 AWS 클라우드에 직접 배포하는 포트폴리오 중심 강의! 빠르게 자신의 포트폴리오에 프론트, 백앤드 프로젝트를 배포하고 싶은 분들에게 도움이 되는 강의입니다! 배포하는 데 필요한 지식들을, 서버 설정부터 Docker, Domain 연결, Nginx, HTTPS 적용까지 단계별로 단기간 실습할 수 있게 됩니다!

            초급

            초급

            React, Java, AWS

            SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문강의 썸네일

            SpringBoot & React 포트폴리오 프로젝트: AWS 서비스로 실전 배포 입문

            코딩도니

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            웹 개발을 활용해서 Android와 IOS에 서비스 가능한 모바일앱 개발을 할 수 있도록 도와주는 강의입니다.

            초급

            초급

            React, Next.js, expo

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크강의 썸네일

            웹 개발자의 연봉을 올려주는 하이브리드앱 with Expo 프레임워크

            코드캠프

            바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기강의 썸네일

            바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

            ludgi

            Whisper를 로컬에서 실행하고, FastAPI와 Next.js를 활용해 AI 음성 인식 앱을 빠르게 개발하는 실전 프로젝트 강의입니다. 실시간 음성 인식까지 구현하며, 짧은 시간 안에 간단한 포트폴리오로 활용할 수 있는 결과물을 완성할 수 있습니다.

            초급

            초급

            Next.js, FastAPI, whisper

            바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기강의 썸네일

            바이브 코딩: Next.js + FastAPI + Faster-Whisper로 음성 메모 앱 만들기

            ludgi

            Node.js로 웹 크롤링하기강의 썸네일

            Node.js로 웹 크롤링하기

            제로초(조현영)

            네이버, 아마존, 트위터, 유튜브, 페이스북, 인스타그램, unsplash.com 등의 사이트를 크롤링하며 실전에 적용해봅니다.

            중급이상

            중급이상

            JavaScript, Node.js, 웹 크롤링

            Node.js로 웹 크롤링하기강의 썸네일

            Node.js로 웹 크롤링하기

            제로초(조현영)

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            Mobile App Front-End 개발을 위한 React Native의 기초 지식 습득을 목표로 하고 있습니다. 진입장벽이 낮은 언어/API의 활용을 통해 비전문가도 쉽게 Native Mobile App을 개발할 수 있도록 제작된 강의입니다.

            초급

            초급

            React Native, React, ES6

            iOS/Android 앱 개발을 위한 실전 React Native - Basic강의 썸네일

            iOS/Android 앱 개발을 위한 실전 React Native - Basic

            Wintho

            The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

            딩코딩코

            AI는 이제 선택이 아닌 생존의 문제입니다. 3일 걸리던 개발을 30분으로 단축하고, 반복 업무는 AI에게 맡기고 당신은 더 중요한 문제 해결에 집중하세요. 이론이 아닌 실무에서 바로 써먹는 AI 네이티브 개발법으로, 회사에서 "AI 잘하는 개발자"로 인정받는 확실한 방법을 알려드립니다.

            초급

            초급

            Spring Boot, Next.js, 인공지능(AI)

            The 10x AI-Native Developer: 회사에서 AI로 압도적 성과를 내는 법

            딩코딩코

            비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

            딩코딩코

            코딩 몰라도 OK! 당신의 아이디어를 단 4주 만에 실제 수익으로 바꿔보세요. AI와 최신 도구를 활용해, 웹사이트와 앱을 동시에 만들고 바로 서비스까지 연결합니다.

            입문

            입문

            Flutter, Next.js, cursor

            비개발자 4주만에 수익화 서비스 만들기: AI 바이브코딩 웹 + 앱 ALL IN ONE

            딩코딩코