코어 자바스크립트
정재남
ES6 이전까지의 자바스크립트 전체를 관통하는 핵심 개념들에 대하여, 전반적인 흐름을 살펴보는 강의입니다.
초급
JavaScript
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 learn!
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,586
Learners
677
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
40 reviews
4.7
40 reviews
sakom33Reviews 7
∙
Average Rating 5.0
- xiuxiu
Reviews 2
∙
Average Rating 4.0
- Mark
Reviews 1
∙
Average Rating 5.0
- 노강표
Reviews 5
∙
Average Rating 4.8
4
100% enrolled토이프로젝트를 진행하기전에 전체적인 흐름을잡기위해 강의를들었는데 도움이 되었습니다. rest에서 graphql로 변경하면서 graphql이 좀더 유연하다는것을 직접 느낄수 있었던것같고, 다만 graphql을 아예 처음듣는 입장으로썬 이해하는데는 어려워 다른 내용을 추가로 찾아봤었습니다. 특히 클라이언트 측에서 리액트 쿼리부분은 직접 적용하기에는 좀더 찾아봐야할것같습니다.. 하지만 리액트 쿼리가 주는 장점은 확실히 있는것같습니다. 부트캠프를 마치고 들었던 입장으로썬 단순한 풀스택 토이프로젝트가 아닌 좀더 신기술(?)을 다뤄본것같아 앞으로 공부할 범위가되어 힘들지만 만족스럽게 들었습니다.
- 임채영
Reviews 10
∙
Average Rating 4.5
$17.60
jaenam's other courses
Check out other courses by the instructor!
![[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 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!
![GraphQL 완전정복 (키오스크를 만들며 배우는 풀스택 과정) - [2024 부분 리뉴얼]강의 썸네일](https://cdn.inflearn.com/public/courses/329186/cover/a63c6c95-2318-4e7a-a4f0-34d4512b3ae6/329186-eng.png?f=avif&w=420)
![[자바스크립트 GUI 개발 #1] Electron + React로 만드는 타이머 앱 (+ Zustand)강의 썸네일](https://cdn.inflearn.com/public/files/courses/336817/cover/01jwx9ttbwnetdsbt5qrxgxb3x?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)
