![[React / VanillaJS] UI 요소 직접 만들기 Part 1강의 썸네일](https://cdn.inflearn.com/public/courses/333258/cover/1b33bae1-68fa-4b4d-b089-199eab988c84/333258.png?f=avif&w=420)
[React / VanillaJS] UI 요소 직접 만들기 Part 1
정재남
대표적인 UI 요소들을 React 버전 및 순수 JavaScript 버전으로 만들어 보면서, Web API를 활용한 다양한 관점과 방법을 경험하고, 프론트엔드 개발 실력을 한층 끌어올려 보세요.
초급
React, vanilla-js, ui
BEST
Full Stack React Toy Project - REST, GraphQL (for FE Developers)
Practice REST API and GraphQL while creating a simple SNS service based on React. We introduce how to easily and simply create a backend environment for frontend development.
Reviews from Early Learners
What you will gain after the course
React
Creating a local database and server
REST API
GraphQL
CRUD
Front-end developers, level up!
Build confidence in data communications.
In this lecture
Understand how to use REST API and GraphQL ,
By building a simple database
Use it in your portfolio!
Are you preparing your portfolio with the goal of landing a job as a front-end developer ? In this lecture, we'll create a simple social media service using React through a toy project called "clone coding ." We'll follow along, building not only the client code but also the server and database.
A vague fear of servers
If you want to solve it?
Recently, while mentoring people preparing for front-end employment, I noticed that many of them felt burdened by learning server-side technologies.
Surrounding server-side learning
The worries of a beginner FE developer.
“I feel a great burden in building the backend environment.”
“I'd like to try out GraphQL, but I don't know how to get started without backend help.”
“Is it really right to learn MongoDB, MySQL, Firebase, etc. before getting a job?”
As a non-major who has also experienced similar struggles, I'd like to share with you the know-how I've accumulated. If you clone and code this lecture and follow my flow of thought, you'll naturally gain confidence in data communications .
- By applying the method of using JSON as a DB, you will have no problem practicing data communication even if you have little knowledge about servers and databases.
- By practicing migrating a REST API to GraphQL, you will gain sufficient knowledge to adopt GraphQL.
- If you're a job seeker, it's not too late to learn MongoDB, MySQL, Firebase, and other technologies later when you need them. For now, it's best to focus on front-end development. You should only learn the server-side aspects necessary for front-end development.
About data communication
Build your confidence.
To these people
I recommend it.
job seekers
Front-end employment
Preparing
Non-major
Front Junior
I want to gain know-how
Current front-end
Developers are also welcome!
Practice at once
REST API, GraphQL
Both
Anyone who wants to practice
This is especially helpful for these people:
✅ Those who feel burdened by server-side learning
✅ Front-end developers who want to work on a portfolio or toy project independently
✅ Current front-end developers who want to expedite front-end development before the API is ready in the development phase.
Features of this course
For building a local DB
Minimal CRUD
By dealing only with functions
Less learning burden.
Instead of a grammar-focused explanation,
Focusing on real-world examples
Practical development skills
You can raise it.
The actual development process
Just follow along
Naturally, the overall flow
You can figure it out.
Please check before taking the class!
- Prerequisite knowledge is React, YARN, and npm.
- The full code can be found on GitHub ( https://github.com/roy-jung/api-practice )
Learning Content
1. Client - Implementing basic functions
We'll begin front-end development using React and Next.js. We'll create mock data and implement all functionality without server communication.
2. Server - REST API Implementation
Run a server based on the Express framework in Node.js. Build a database and create routes using JSON.
3. Client - REST API Communication
The client completes CRUD based on actual data through REST API communication.
4. Server - GraphQL Implementation
Convert the server to GraphQL syntax based on Apollo Server.
5. Client - GraphQL Communication
Implement GraphQL communication on the client. We'll also explore the react-query API, which is dedicated to infinite scrolling.
Expected Questions Q&A
Q. Is this a course that non-majors can also take?
Yes, our goal is to provide a minimal backend environment for frontend development for non-majors.
Q. Is there anything I need to prepare before attending the lecture?
You'll need Node.js and Yarn installed. Some familiarity with React and the latest ECMAScript is also recommended for smooth progress.
Q. Do I have to attend the lecture?
No, that's not true. I've made the entire code available on GitHub . I've separated each chapter into branches. If you can view the code and learn directly, you can still master the entire course without having to attend this lecture.
However, the flow of consciousness I convey verbally throughout the lecture cannot be achieved through GitHub code alone. For those who lack confidence in coding and problem-solving on their own, I believe this lecture will be a much more beneficial experience.
Knowledge sharer
Interested in other lectures?
Recommended for
these people
Who is this course right for?
Front-end job seeker
Current front-end developer
Need to know before starting?
React
yarn / npm
32,783
Learners
688
Reviews
395
Answers
4.8
Rating
11
Courses
안녕하세요, 시니어 프론트엔드 개발자 정재남 입니다.
서로 돕고 함께 발전하는 건전한 공유문화를 지향하여 다양한 활동을 하고 있습니다.
저서: 코어 자바스크립트
유튜브 채널: FE재남
아티클 및 인터뷰 영상:
원티드) 신입 개발자, 뭘 공부해야 하죠? https://www.wanted.co.kr/events/22_02_s01_b01
인프런) To. 주니어 개발자 https://www.inflearn.com/pages/for-junior-developers-20211207
벤처이몽) 벤처/스타트업 시니어 개발자와 주니어 개발자의 솔직담백 토크쇼 https://youtu.be/6D7I4NNFHsU?si=nD6-F7EU_ZtYqDLI
바닐라코딩) 프론트엔드 개발자 취업 마인드셋 https://youtu.be/zX68pyoLctI
Curriculum
All
25 lectures ∙ (3hr 37min)
Published:
Last updated:
Reviews
All
41 reviews
4.7
41 reviews
sakom33Reviews 7
∙
Average Rating 5.0
- xiuxiu
Reviews 2
∙
Average Rating 4.0
- Mark
Reviews 1
∙
Average Rating 5.0
- sbbt
Reviews 13
∙
Average Rating 5.0
- Ben's Cookies
Reviews 4
∙
Average Rating 5.0
Limited time deal ends in 00:57:54
$16,500.00
25%
$17.60
jaenam's other courses
Check out other courses by the instructor!
![[React / VanillaJS] UI 요소 직접 만들기 Part 2강의 썸네일](https://cdn.inflearn.com/public/courses/333795/cover/0cf744ff-43a2-4de7-a5e5-7f5619b7cb15/333795.png?f=avif&w=420)
Similar courses
Explore other courses in the same field!
![[리뉴얼] React로 NodeBird SNS 만들기강의 썸네일](https://cdn.inflearn.com/public/course-325637-cover/d5fd6216-71d1-490e-8759-594cbbdc1973?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)
![[C#과 유니티로 만드는 MMORPG 게임 개발 시리즈] Part6: 웹 서버강의 썸네일](https://cdn.inflearn.com/public/course-325464-cover/1fa9d02e-de61-46aa-80db-a46a4a573ce9?f=avif&w=420)
![[VOD] 6주 완성! 개발 실무를 위한 고농축 바이브코딩 (Cursor AI, Figma)강의 썸네일](https://cdn.inflearn.com/public/files/courses/338156/cover/01k4c77bftwd8ec4k0yakavbrc?f=avif&w=420)
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?f=avif&w=420)
