Inflearn brand logo image
Inflearn brand logo image
Inflearn brand logo image
개발 · 프로그래밍

/

웹 개발

React.js + Node.js 롤 전적 검색 사이트 만들기

이 강의는 Riot Games API를 활용하여 React.js와 Node.js를 이용한 '리그 오브 레전드 전적 검색 사이트'를 직접 만들어보는 실습 중심 강의입니다. 수강생은 기본적인 API 사용법부터, 프론트엔드(React.js)와 백엔드(Node.js, Express.js) 연동, 전적 데이터 시각화, 그리고 op.gg 스타일의 UI 구현까지 프로젝트를 단계별로 따라하면서 실습을 통해 자연스럽게 배우게 됩니다. 복잡한 이론보다는 코드 중심으로 '직접 따라 만들기'를 통해 빠르게 결과물을 경험할 수 있습니다.

(5.0) 수강평 4개

수강생 43명

  • 영넨

이런 걸 배울 수 있어요

  • Riot Open API 활용법

  • React.js로 실시간 전적 검색 UI 개발

  • Node.js & Express.js로 백엔드 프록시 서버 구축

  • 프론트-백 연동 및 실시간 전적 데이터 처리

나만의 롤 전적 검색 사이트 만들기 💡

이 강의에서는 Node.js와 React.js를 활용하여 Riot Games Open API를 연동한 롤 전적 검색 사이트를 직접 만들어봅니다.
프론트엔드와 백엔드를 분리하여 REST API 구조를 이해하고, Riot API를 통해 실제 전적 데이터 조회, 사용자 인증, 데이터 가공 및 화면 출력까지 실습합니다.

Node.js와 Express를 이용한 백엔드 구축, Riot API 연동, React.js를 활용한 프론트엔드 개발 등 실전 프로젝트에서 필요한 전 과정을 단계별로 학습합니다.
op.gg 스타일의 전적 요약과 상세 전적 화면을 직접 구현하며 API 요청 흐름, 데이터 처리, UI 구성의 실전 개발 경험을 쌓을 수 있습니다.

이 강의는 코드 중심의 실습형 강의로, 복잡한 이론 없이 직접 만들어보며 Riot API 활용법과 React.js & Node.js 기반 웹 서비스 제작 능력을 자연스럽게 익힐 수 있도록 구성하였습니다.
강의를 마치면 Riot API를 활용한 나만의 데이터 검색 사이트를 만들 수 있는 실력을 갖출 수 있습니다.

👏강의를 모두 수강 하시면!

  • 프록시 서버 구조 이해

  • OpenAPI 사용 방법


이런 내용을 배워요

React.js + Node.js를 사용한 프록시 서버 구축 💻

간단한 프록시 서버를 구축하고, OP.GG와 같은 전적 검색 사이트의 구현 방법을 간단하게 구현합니다. API의 요청과 응답에 대한 구조를 간단하게 학습하고, 데이터를 시각화 합니다.

전적 검색 매치 리스트

공식 API 문서 분석 및 API 이해 📃

Riot Games Open API 공식 문서를 기반으로 API 스펙을 해석하고 실제 서비스에 적용하는 역량을 배양합니다.
API 호출 흐름과 명세를 읽는 방법부터 실전 데이터 활용까지 단계적으로 습득합니다.

Riot 공식 API

강의 자료 제공 📖

노션을 활용해 강의 코드와 환경 설정 파일을 제공합니다.

노션 자료

수강 전 참고 사항

실습 환경

  • 운영 체제 및 버전(OS): Windows 10, Windows 11, macOS

  • 사용 도구: Visual Studio Code, Postman

  • PC 사양: 인터넷 접속이 가능한 기본 사양의 PC

학습 자료

  • 노션 마크 다운 파일 제공

선수 지식 및 유의사항

  • React.js와 Node.js의 선수 지식이 있으면 좋습니다.

  • Riot 회원 가입

  • 무단 배포 및 복제를 금지합니다. 학습 자료 역시 저작권이 있으며, 개인적인 학습 목적 외 사용을 금합니다.

이런 분들께
추천드려요

학습 대상은
누구일까요?

  • React.js와 Node.js를 활용한 실습형 프로젝트를 통해 웹 개발 역량을 키우고 싶은 초급~중급 개발자

  • Riot Games API를 사용하여 나만의 게임 전적 사이트, 데이터 시각화 서비스 등을 만들고 싶은 분

선수 지식,
필요할까요?

  • React.js

  • Node.js

안녕하세요
입니다.

382

수강생

35

수강평

9

답변

4.6

강의 평점

3

강의

웹 개발을 하다가 게임 개발에 빠져 살고 있는 개발자 입니다!

항상 배우는 마음가짐으로!

커리큘럼

전체

23개 ∙ (2시간 40분)

강의 게시일: 
마지막 업데이트일: 

수강평

전체

4개

5.0

4개의 수강평

  • hyuk394025809429님의 프로필 이미지
    hyuk394025809429

    수강평 1

    평균 평점 5.0

    5

    30% 수강 후 작성

    • alsrl92956022님의 프로필 이미지
      alsrl92956022

      수강평 2

      평균 평점 5.0

      5

      30% 수강 후 작성

      • ddoyoi님의 프로필 이미지
        ddoyoi

        수강평 8

        평균 평점 5.0

        5

        100% 수강 후 작성

        It's so fun

        • kimszin16481님의 프로필 이미지
          kimszin16481

          수강평 2

          평균 평점 5.0

          5

          30% 수강 후 작성

          ₩16,500

          영넨님의 다른 강의

          지식공유자님의 다른 강의를 만나보세요!

          비슷한 강의

          같은 분야의 다른 강의를 만나보세요!