프론트엔드 개발의 Kick, Web API (feat. React)
박용주
실무에 적용할 수 있는 Web API를 다룹니다. 한 번쯤 꼭 마주치게 될 요구사항들을 풀어낼 무기를 얻어가시길 바랍니다.
초급
JavaScript, React, Web API
BEST
Next.js はじめ方（feat. 地図サービス開発）
Next.jsの基本を扱う講座です。 Next.jsで地図サービスを最初から最後まで開発してみます。
学習した受講者のレビュー
こんなことが学べます
Next.jsの基本構造と様々なAPI
Next.jsで地図ウェブサービス制作
Next.js プロジェクト 公開、検索エンジン登録、各種最適化
先進のFE開発者のためのNext.js！
店舗マップサービスを作成し、簡単かつ楽しく。
マップサービスの作成 - 展開 - 最適化まで
Next.js 一度に始める
✅
Next.jsで作成されたWebサービスのコードを見たい場合
✅
バックエンドコードなしでフロントエンド技術でWebサービスを最初から最後まで完成するプロセスを知りたい場合
✅
SSR/SSG/CSRなど、さまざまな最適化方法について疑問がある場合
Next.js 学びたいフロントエンド開発者なら！
Next.js 入門/初級段階のフロントエンド開発者のための講義です。
バックエンドコードなしでNext.jsでサポートされているさまざまなAPIを使用してマップサービスを簡単に開発することで、必須のNext.jsの仕組みとAPIの両方を学ぶことができます。
今、なぜNext.jsですか？
Next.jsは、優れた開発者エクスペリエンス、簡単で直感的なAPI、さまざまな最適化をサポートするReactフレームワークです。 SSR/SSG/CSR方式を積載適所に使用でき、開発者の利便性を考慮した最適化機能もサポートします。
その間、Next.jsでいくつかのプロジェクトを進めながら、Next.jsの利点が目に入りました。今後、フロントエンド陣営でのより速い成長が期待されるNext.jsをご紹介いたします。
学習負担は減り、
概念はより確実に。
地図サービスでAからZまで
マップサービスを作成し、開発中に不可欠なNext.jsの仕組みとAPIの両方を学ぶことができます。 Next.js 12とNext.js 13の両方に含まれるnext / link、next / imageなどのAPIを両方のバージョンで学習し、v13の利点を理解します。
フロントエンド開発の実力をよもぎ
講義に従って学習する過程で、UI開発（HTML / CSS）、WebパフォーマンスとWebアクセシビリティ、デプロイ、検索エンジンの登録など、フロントエンド開発者として知っておくべき基本概念まで一緒に学ぶことができます。
学習者を考えた講義
講義進行のためのソースコードを授業別にブランチで提供します。また、すべての授業映像に字幕をサポートし、内容に従うのが難しくないように制作しました。
講義は更新されます
追加の説明が必要な部分について補強を進めます。 Next.js 13に関するニュースについてもレッスンの更新を進める予定です。
店舗マップサービスを作成して学ぶNext.js API 10ポイント ✅
- next/linkにマップページ/フィードバックページを移動する
- next/imageでロゴ画像/店舗画像を最適化
- next/scriptでマップスクリプトを読み込む
- API Routes で店舗データを読み込む
- getStaticPropsでマップページをプリレンダリングする
- getStaticPathsですべての店舗の動的ルートをプリレンダリングする
- getServerSidePropsからフィードバックページデータを読み込む
- Next.js 12と13のnext / link、next / imageなどのAPIの違い
- LighthouseによるWebパフォーマンスチェックとWebアクセシビリティ、SEOの改善
- VercelによるNext.jsプロジェクトのデプロイ
学習カリキュラム📚
👉講義で作成するマッププロジェクトのプレビュー（リンク）
Section 0: 開発環境設定
- 本格的な内容を学習する前に、Next.jsの基本設定を行います。
- create-next-appでプロジェクトを起動し、eslint、prettierを設定します。
Section 1: Data Fetching について
- Next.jsのさまざまなデータフェッチ方法を学びます。 (SSR/SSG/CSR)
- next build 結果と開発者ツールの [ネットワーク] タブを使用して、Next.js の page transition 最適化の原理を理解します。
- next/link と next/router を学習します。
Section 2: Header UI の作成
- ロゴ画像を読み込むためにnext / image APIを学びます。
- Next.js 13 next/imageとNext.js 12 next/legacy/imageの容量最適化と機能を学習します。
- セクション1で学んだことに基づいて地図ページとフィードバックページをルーティングします。
セクション3：マップUIの作成
- マップスクリプトを読み込むためにnext / script APIを学びます。
- next/routerを使用してURLに状態を保存する方法を学びます。
- Sprite marker image でマーカーアイコンを描画します。
- map, marker の click event を処理します。
- SWRを利用して簡単に店舗データをグローバル状態で管理します。
Section 4: 店舗詳細ページの作成
- 店舗詳細ページの動的ルートを作成し、getStaticPaths APIの使い方を学びます。
- 店舗詳細UIを実装します。
- next/routerを利用して店舗詳細ページと地図ページをリンクします。
第5章：LighthouseでWebパフォーマンスを確認する
- Chrome Lighthouseを使用してウェブパフォーマンスを確認します。
- Webパフォーマンス、Webアクセシビリティ、SEOを改善します。
- _documentまたはnext-seoライブラリを使用してHTMLヘッドを埋めます。
セクション6：Vercelとしてデプロイする
- 完成したウェブサイトをvercelとして配布します。
- next-sitemap ライブラリを使用して robots.txt と sitemap.xml ファイルを生成します。
- ネイバーサーチアドバイザーとGoogle Search Consoleにサイトを登録します。
- Google Analyticsを使用してください。
Section 7: プロジェクトの仕上げ
- Next.js API Routesで店舗データに応答するGET APIを作成します。
- フィードバックページでは、Firebase Cloud Firestoreにデータを読み書きする方法について説明します。
- マップサービスの作成プロジェクトを完了します。
第8章：質問の回答と補強
- 講義内容の中で補足説明が必要な場合や重要な質問がある場合に補強を進めます。
- Next.js 13についてさらに説明が必要な場合は、補強を進めます。
Next.jsでサービスと製品を開発し、得られたヒントをお届けします。
私はスタートアップ4年目のフロントエンドリーダーとして働き、Next.jsでメインプロダクトとホームページを開発しました。さらに、Next.jsでWebゲームサービスを開発し、JUNCTION ASIA 2022 Track 3などを受賞した経験、Next.js T3 Stackを活用したウェブサービスでKAIST SPARCS HACKATHON 2などを受賞した経験があります。これまでNext.jsでプロジェクトを進め、知り合ったメリットとノウハウをより多くの方々にご紹介させていただきたいです🙂
Q&A 💭
Q. Next.jsをなぜ学ぶべきですか？
既存のフロントエンド開発フレームワークの中で開発者の経験が良く、APIが直感的で多様な最適化をサポートしてくれると思います。これまで、さまざまな技術の長所と短所をトレードオフしてスケールした場合、Next.jsは彼らの長所だけを選び、APIとして提供する方向を追求します。そして何よりも継続的にアップデートが行われているため、今後ますます多くの場所で導入されます。
Q. 講義の難易度はどのくらいですか？
Next.js入門を目指して制作し、ソースコード、映像、字幕に沿って進むと、自然にプロジェクトが完成するように進めます。講義ごとにブランチが用意されているので、実力に応じて講義を越えたり、また戻ることができます。 Reactに関する基本的な知識（jsx文法、useState / useEffect hookなど）が必要です。
Next.jsが初めての場合は、次の手順でNext.jsを起動することをお勧めします。
- 講義と提供されたコードを見て、全体の流れを学びます。
- コードを自分の方法で変更して改善してみる。
- 独自のNext.jsプロジェクトを完成する。
Q. クラスでは、Next.js以外にどのライブラリを使用しますか？
TypeScript、ESlint/Prettier、SWR、next-seo、next-sitemap、sass(scss)、react-icons、copy-to-clipboard、@types/navermaps、firebase(Cloud Firestore) を使用します。コアライブラリ（TypeScript、scss）を除く残りの部分は、サービスの実装に最小限に使用されます。追加のUIライブラリやCSS-in-JSは使用しません。
💾受講前の注意
- 講義はNext.js 13.0.7 version, pages directoryに基づいて行われます。
- 理論と実践は1：2の比重で行われます。実践の過程で、単純なUI実装は簡単に説明し、理論的に学んだNext.jsの概念を中心に説明します。
- IDEはJetBrainsのWebStorm、Package Managerはyarnを使用します。 VSCodeやnpmを使用しても困る場合はお問い合わせください。
- React FrameworkであるNext.jsに関する講義であるため、Reactに関するプレイヤーの知識が必要です（jsx文法、useState / useEffect hookなど）
- scssを使用してください。 CSS-in-JSライブラリ（emotion、styled-components）は使用しません。
- React、yarn（npm）に加えて、TypeScriptとGitの基礎知識が必要です。
- 状態管理ライブラリとしてSWRを使用します（Next.jsと同じようにVercelチームによって作成された状態管理ライブラリ）。学習に負担がかからないように、最小限のグローバルステートフルに使用します。
- クラスごとのブランチを含む完全なソースコードを提供します。付属のソースコードを見て映像に集中していくことをおすすめします。 （画面上のコードを同じように書く方法はよくあります。）さらに、Next.jsの公式ドキュメントを参照してください。
- 質問の回答に加えて補充が必要だと判断されたときに補強映像を更新する予定です。
こんな方に
おすすめです
学習対象は
誰でしょう？
Next.jsを学んでみたい方
ウェブサービス開発過程の全体像を把握したい方々
地図サービスを作ってみたい方々
前提知識、
必要でしょうか？
React(jsx 文法, useState/useEffect 使用法)
git 使い方
yarn(またはnpm)使い方
TypeScript 構文
1,029
受講生
49
受講レビュー
87
回答
4.5
講座評価
2
講座
안녕하세요.
스타트업에서 4년동안 프론트엔드 개발자로 일하고 있습니다.
React, Next.js, 지도, 차트, UI library 등을 다룹니다.
カリキュラム
全体
45件 ∙ (4時間 7分)
講座資料（こうぎしりょう）:
授業資料
4. CSR/SSR/SSG の理解
05:04
5. Next.js を使用する理由
03:06
6. getStaticProps
10:21
9. .next フォルダの分析
02:47
11. CSR
03:27
12. 完成したヘッダーUIプレビュー
00:54
13. Header コンポーネント作成
04:32
14. next/image
17:08
15. Header コンポーネント完成
05:08
講座掲載日:
最終更新日:
受講レビュー
全体
46件
4.5
46件の受講レビュー
박제영受講レビュー 24
∙
平均評価 4.8
5
100% 受講後に作成한 줄 소감 : 큰 기대 없이 결제햇다가 이 강의 좋다 라고 느낌 결제계기 : 타 강의 결제한게 있는데 업무땜에 짬이 안나다 신규는 모던 브라우저 환경으로 진행한다하여 필요한 시기가 되어 기존 결제강의 보는데 너무 길고 지루해서 짧은거 찾다가 목차보고 결제함 좋았던 점 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 공식문서에서도 모노레포 디버깅 셋팅은 나와있지 않아요)
- LuckyLatte
受講レビュー 1
∙
平均評価 5.0
- 황호세
受講レビュー 1
∙
平均評価 5.0
- SHAN
受講レビュー 1
∙
平均評価 5.0
- tlsgkdals71
受講レビュー 6
∙
平均評価 5.0
￥5,290
vroomfanの他の講座
知識共有者の他の講座を見てみましょう！
似ている講座
同じ分野の他の講座を見てみましょう！
![[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스강의 썸네일](https://cdn.inflearn.com/public/courses/329963/cover/26550c58-624a-41c8-86dc-fea75b6c3b22/thumbnail-frontnew.png?f=avif&w=420)
