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.
React
Creating a local database and server
REST API
GraphQL
CRUD
Front-end developers, level up!
Build confidence in data communications.
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.
Recently, while mentoring people preparing for front-end employment, I noticed that many of them felt burdened by learning server-side technologies.
“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 .
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
✅ 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.
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!
We'll begin front-end development using React and Next.js. We'll create mock data and implement all functionality without server communication.
Run a server based on the Express framework in Node.js. Build a database and create routes using JSON.
The client completes CRUD based on actual data through REST API communication.
Convert the server to GraphQL syntax based on Apollo Server.
Implement GraphQL communication on the client. We'll also explore the react-query API, which is dedicated to infinite scrolling.
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.
Who is this course right for?
Front-end job seeker
Current front-end developer
Need to know before starting?
React
yarn / npm
32,546
Learners
676
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
All
25 lectures ∙ (3hr 37min)
All
40 reviews
4.7
40 reviews
Reviews 7
∙
Average Rating 5.0
5
I haven't been able to easily access it in other lectures, but it seems like a lecture that is absolutely necessary for front-end developers! I was at a loss as to whether I should study full-stack because they said that front-end development also requires server-side knowledge, but it was very good because I was able to understand and experience basic communication concepts relatively easily.
Reviews 2
∙
Average Rating 4.0
5
Hello teacher! I also read the Tiger book diligently (loud voice)!! I was looking for a full stack project and when I saw that a new lecture was uploaded, I paid at the speed of light (early bird 🐶 profit!) and bought it and started studying now. I've only seen section 1 so far, but I really like how it's concise but explains only the key points, and I'm really grateful that you keep updating it with small but additional responses. I'm writing a review in advance because I think it'll be good in the future! If I don't know anything after reading it, I'll come back with a question. I'll also wait for the ts additional version like the article below!!
Reviews 1
∙
Average Rating 5.0
5
While working on a project that had to be completed in a short period of time, I had to test the communication function, but there was no server to pass the API to, so I had to create a local API in a hurry. At that time, I was able to access the lecture at a very timely time, and fortunately, I was able to test and demonstrate the communication function without any problems within the period :) The lecture itself was concise and focused on the necessary parts, so after completing the lecture once, it was a lecture that I could create on my own without any burden. Thanks to this, it was very helpful! Thank you!
Reviews 5
∙
Average Rating 4.8
4
I listened to the lecture to get the overall flow before proceeding with the toy project and it was helpful. I think I could feel directly that GraphQL is more flexible by changing from Rest to GraphQL, but as someone who is hearing about GraphQL for the first time, it was difficult to understand, so I looked up other contents. In particular, I think I need to look into the React query part on the client side more to apply it directly. However, it seems that React query definitely has advantages. As someone who listened to it after finishing the boot camp, it felt like I dealt with a newer technology(?) rather than a simple full-stack toy project, so it was difficult but satisfying to listen to it because it will be a scope of study in the future.
Reviews 10
∙
Average Rating 4.5
5
I took the course without any understanding of GraphQL. It was a time when I could get a taste of the technology. Although the learning volume was not large, I was able to learn it in a fun way. I needed to have some understanding of React and Next.js, and the mutation handling and other functional security parts in Section 6 were a bit difficult.
Limited time deal
$13.20
25%
$17.60
Check out other courses by the instructor!
Explore other courses in the same field!
![[React / VanillaJS] Creating UI elements directly Part 1강의 썸네일](https://cdn.inflearn.com/public/courses/333258/cover/1b33bae1-68fa-4b4d-b089-199eab988c84/333258.png?f=avif&w=420)
![[React / VanillaJS] Creating UI elements directly Part 2강의 썸네일](https://cdn.inflearn.com/public/courses/333795/cover/0cf744ff-43a2-4de7-a5e5-7f5619b7cb15/333795.png?f=avif&w=420)
![Complete Mastery of GraphQL (Full-stack Course Learning by Building a Kiosk) - [2024 Partial Renewal]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
![From Events to SPA, the Essential Engine of Interactive Web - [Complete DOM Mastery Part 2]강의 썸네일](https://cdn.inflearn.com/public/files/courses/338102/cover/01k1bjkdeb2ap7p4b0vb2fck06?f=avif&w=420)
![From DOM to Pixels, Complete Mastery of Browser Rendering and CRP - [DOM Complete Mastery Part 3]강의 썸네일](https://cdn.inflearn.com/public/files/courses/338418/cover/01k34f9mhtvq2xgzr15w1qhmas?f=avif&w=420)
![[MMORPG Game Development Series with C# and Unity] Part 6: Web Server강의 썸네일](https://cdn.inflearn.com/public/course-325464-cover/1fa9d02e-de61-46aa-80db-a46a4a573ce9?f=avif&w=420)
