[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 :)
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 witha 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 renderedin 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-commercewebsite 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!)
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,412
Learners
452
Reviews
227
Answers
4.8
Rating
14
Courses
"Try anything, Try everything!" 코드캠프는 유능한 개발자를 양성하며 개발의 미래를 바꾸고자 하는 목표를 가지고 있습니다. 사회적, 경제적, 교육적 배경에 상관없이 누구에게나 커리어 전환의 기회를 제공하기 위해 인프런에 나타났답니다. 코캠과 함께 커리어 점프에 도전하세요!
![[VOD] 6週間完成！開発実務のための高濃縮バイブコーディング (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
ottt
![[コードキャンプ]ブートキャンプで作られた高濃縮バックエンドコース강의 썸네일](https://cdn.inflearn.com/public/courses/329996/cover/2be99a0c-5d5a-4e15-b85b-53c09879058a/thumbnail-backnew.png?f=avif&w=420)
![[コードキャンプ] 初心者向け Javascript アルゴリズム理論+実践강의 썸네일](https://cdn.inflearn.com/public/courses/330604/cover/9c8dddcb-bd3b-4f3d-93af-ea382b6835c0/thumbnail.png?f=avif&w=420)
![[CSS&JS Master] - トレンドの感情記録日記を作成する강의 썸네일](https://cdn.inflearn.com/public/courses/335863/cover/836195ea-22e0-4a97-84a9-5c520b028729/335863.png?f=avif&w=420)
![[コードキャンプ]温かいJavascript강의 썸네일](https://cdn.inflearn.com/public/courses/329922/cover/364e7406-3569-437b-b719-7f146cad3d60/thumbnail-js.png?f=avif&w=420)
![[コードキャンプ]強力なCSS강의 썸네일](https://cdn.inflearn.com/public/courses/329921/cover/325131ea-9c57-427e-98b9-4e207a1dff98/thumbnail-css.png?f=avif&w=420)
![[コードキャンプ]スタートはフリーキャンプ강의 썸네일](https://cdn.inflearn.com/public/courses/329913/cover/eee923cc-911b-4c2d-a445-9fddee8e5992/thumbnail-precamp.png?f=avif&w=420)
![[JavaScriptからReactまで] 諦めないReactへの道 [Full vers.]강의 썸네일](https://cdn.inflearn.com/public/courses/334889/cover/00422504-ab9c-46e3-9abd-8bcf0bb9ec7a/334889.jpg?f=avif&w=420)
![GraphQL完全征服（キオスクを作って学ぶフルスタックコース） - [2024部分リニューアル]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
![[フルスタック入門] Firebaseより10倍良いSupabase강의 썸네일](https://cdn.inflearn.com/public/courses/334439/cover/9e628f60-3721-4d03-b36d-a577593b96fd/334439.jpg?f=avif&w=420)
![[リニューアル] ReactでNodeBird SNSを作成する강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?f=avif&w=420)
![[改訂3版] Node.js教科書 - 基本からプロジェクト実習まで강의 썸네일](https://cdn.inflearn.com/public/courses/330181/cover/47e0125e-75ad-4946-96d3-54bbc444a188/330181-eng.jpg?f=avif&w=420)
![[JavaScript GUI開発 #1] Electron + Reactで作るタイマーアプリ (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)