프론트엔드 개발의 Kick, Web API (feat. React)
박용주
실무에 적용할 수 있는 Web API를 다룹니다. 한 번쯤 꼭 마주치게 될 요구사항들을 풀어낼 무기를 얻어가시길 바랍니다.
Basic
JavaScript, React, Web API
A course on Next.js fundamentals. Develop a map service end-to-end with Next.js.
Next.js Basic Structure and Various APIs
Next.js Map Web Service Build
Next.js project deployment, search engine registration, various optimizations
Next.js for leading FE developers!
Creating a store map service that's easy and fun.
✅
If you want to look at the code of a web service created with Next.js,
✅
If you want to know the process of completing a web service from start to finish with front-end technology without back-end code,
✅
If you are curious about various optimization methods such as SSR/SSG/CSR,
This course is for front-end developers at the beginner/beginner level of Next.js.
You can learn all the essential Next.js functions and APIs by easily developing a map service using various APIs supported by Next.js without any backend code.
Next.js is a React framework that offers a superior developer experience, a simple and intuitive API, and a variety of optimizations. It supports SSR/SSG/CSR methods, and also supports optimization features designed for developer convenience.
Having worked on several projects with Next.js, I've noticed its strengths. I'd like to introduce Next.js, which is expected to see even more rapid growth in the front-end market.
From A to Z with map service
By building a map service, you'll learn all the essential Next.js functionality and APIs necessary for development. By learning APIs like next/link and next/image, which are included in both Next.js 12 and Next.js 13, you'll understand the advantages of v13.
Improve your front-end development skills
As you follow the lectures, you will learn the basic concepts that a front-end developer needs to know, such as UI development (HTML/CSS), web performance and accessibility, deployment, and search engine registration.
Lectures with the learner in mind
We provide source code for each class, organized into separate branches, to facilitate the course. We also provide subtitles for all video lectures to ensure you can follow along with the content.
The lecture will be updated
We'll be adding more information where it's needed. We'll also be updating the course with news related to Next.js 13.
👉 Preview the map project created in the lecture (link)
Section 0: Setting up the development environment
Section 1: Understanding Data Fetching
Section 2: Creating the Header UI
Section 3: Creating a Map UI
Section 4: Creating a Store Details Page
Section 5: Testing Web Performance with Lighthouse
Section 6: Deploying with Vercel
Section 7: Project Wrap-up
Section 8~: Questions and Answers and Reinforcement
We'll share tips we've learned while developing services and products with Next.js.
As a front-end leader at a startup for four years, I developed the main product and website with Next.js. I also developed a web game service using Next.js, winning third place in the JUNCTION ASIA 2022 Track, and a web service utilizing the Next.js T3 Stack won second place at the KAIST SPARCS HACKATHON. I'd like to share the advantages and know-how I've gained from working on projects with Next.js with more people. 🙂
Q. Why should I learn Next.js?
Among existing front-end development frameworks, I believe Next.js offers a superior developer experience, an intuitive API, and support for various optimizations. While previous frameworks required weighing the pros and cons of various technologies, Next.js pursues a path of extracting only their strengths and presenting them through an API. Furthermore, its continuous updates will ensure its adoption in ever-increasing applications.
Q. How difficult is the course?
This course is designed to introduce you to Next.js, and you'll follow the source code, videos, and subtitles to naturally complete the project. Each course provides separate branches, allowing you to skip ahead or return to sections based on your skill level. Basic knowledge of React (JSX syntax, useState/useEffect hooks, etc.) is required.
If you are new to Next.js, we recommend starting with the following steps:
Q. Besides Next.js, what other libraries do you use in class?
We use TypeScript, ESlint/Prettier, SWR, next-seo, next-sitemap, Sass (scss), react-icons, copy-to-clipboard, @types/navermaps, and firebase (Cloud Firestore). Excluding the core libraries (TypeScript and scss), we use only the bare minimum necessary to implement the service. We do not use any additional UI libraries or CSS-in-JS.
💾 Things to note before taking the class
Who is this course right for?
Those who want to learn Next.js
Those wanting to see the full web service development process.
People who want to try making a map service
Need to know before starting?
React(jsx syntax, useState/useEffect usage)
git usage
yarn(or npm) usage
TypeScript Syntax
1,028
Learners
49
Reviews
87
Answers
4.5
Rating
2
Courses
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
All
45 lectures ∙ (4hr 7min)
Course Materials:
All
46 reviews
4.5
46 reviews
Reviews 24
∙
Average Rating 4.8
5
한 줄 소감 : 큰 기대 없이 결제햇다가 이 강의 좋다 라고 느낌 결제계기 : 타 강의 결제한게 있는데 업무땜에 짬이 안나다 신규는 모던 브라우저 환경으로 진행한다하여 필요한 시기가 되어 기존 결제강의 보는데 너무 길고 지루해서 짧은거 찾다가 목차보고 결제함 좋았던 점 1. 브라우저 열고 디버깅하면서 원리를 알려주어 깊이있는 공부가 되었다 (단순 구현이 아닌 깊이있는 공부를 할 수 있었다) 2. 불필요한 설명을 없이 next.js에 초점을 맞춘다 (scss, css.module, react, 캐시 배경지식 등) 3. 교수법이 좋았다 브랜치 체크아웃하면서 주석만 제거하고 여러 비교사항 보여주며 차이점 및 효율적으로 사용하기 위한 방법을 직접 보여준다 (차이점 그리고 활용법을 군더더기 없는 설명을 해주었다) 4. 가격이 혜자 이정도 퀄리티에 이 가격 너무 혜자라고 생각된다. 5. 질문에 대한 답변이 굉장히 상세하다 이렇게까지 시간을 써서 답변을 해준다고? 라고 느껴질 정도였다 6. tailwind 사용 X 스타일링을 위한 스타일을 외우고 html 태그에 스타일링하는게 너무 불편한데 다행이였습니다. 7. 공식문서 내용도 같이 봐줘서 내가 직접봐야되는 비용이 감소 8. seo관련된 내용 잘 몰라서 답답햇는데 생각보다 쉽게 배울 수 있엇고 요약도 넘 잘되잇음 9.웹 접근성을 고려한 html 코드 작성을 왜 해야하는지 알게되엇음 개인적으로 추가되었으면 하는 내용 1. vscode에서 monorepo로 next.js 사용시 디버깅 셋팅이 쉽지 않아서 이것도 알려주시면 너무 좋을 것 같습니다. (디버깅 셋팅이라는건 중단점 말하는 것임 next.js 공식문서에서도 모노레포 디버깅 셋팅은 나와있지 않아요)
Reviews 1
∙
Average Rating 5.0
Reviews 1
∙
Average Rating 5.0
Reviews 1
∙
Average Rating 5.0
Reviews 6
∙
Average Rating 5.0
$34.10
Check out other courses by the instructor!
Explore other courses in the same field!