국내유일
Remix 핵심정복
편리하고 더 빠른 웹 개발
feat. 성능최적화

  • 2개 프로젝트&20시간 강의 체계적 학습

    개발부터 배포까지 완벽 학습! 필수 기능 꼼꼼히 학습하여 나홀로 사이드프로젝트도 가능해집니다.

  • 성능최적화 개념까지 함께 학습

    빠른 웹을 만드는 Remix의 핵심 기능을 학습하며 성능최적화 관련 개념까지 함께 엿볼 수 있어요.

  • 버전 업그레이드 맞춤 강의 업데이트 보장

    Remix의 버전 업그레이드에 맞추어 강의 업데이트를 약 3년간 보장합니다. 평생소장으로 활용하세요.

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.

프론트엔드 & 풀스택 개발자인 당신,
이런 생각한 적 있나요?


  • React의 까다로운 문제들을
    한 번에 해결하여 개발 속도를 높입니다

    Remix는 React에서 하기 어려운
    Optimistic Ui, Race condition 자동 처리,
    에러 자동 처리, 손쉬운 Nested routing을 지원합니다.

  • Next.js보다 빠른 콘텐츠 제공으로
    유저의 웹 사용 만족도가 높아집니다

    Remix는 Next.js에 비해 정적/동적 콘텐츠 제공이 빠릅니다.
    빌드 시간도 Next.js는 데이터에 비례해 증가하지만,
    Remix는 거의 즉각적입니다.

  • 효율적이고 빠른 웹 서비스 개발
    유저의 웹 페이지 & 개발자의 작업 속도 향상으로 한정된 시간에 속도감 있는 유저 단을 개발할 수 있습니다.

Remix는 프론트엔드 및 풀스택 개발자의 어려움과 복잡함을
가볍고 말끔하게 해결합니다.

여러분이 만약 빠른 시간 내에 빠른 웹 서비스를 효율적으로 개발하고 싶으시다면, 단언컨대 Remix 사용을 추천해 드립니다.
Nested Route 기능으로 페이지별로 여러 기능들을 Remix 내장 모듈로 구현할 수 있어 훨씬 편했습니다. 또, Data Prefetch 기능으로 User Experience 관점에서 사용자에게 더욱 나은 웹 서비스를 제공할 수 있다는 점이 인상 깊었습니다. 버튼 클릭(페이지 이동) 전, 버튼을 호버했을 때, 다음 페이지 데이터를 미리 연산하여 클릭 시 바로 접속할 수 있어서 속도가 개선되었거든요. 더불어 Next.js 보다 속도가 빠르다는 공식 문서의 말처럼 정말 빠른 속도를 체감할 수 있었습니다. Full-Stack 웹 프레임워크인 만큼 원하는 기능을 단시간 내에 구현할 수 있고, 백엔드와 프론트 사이의 공통 코드를 재사용 할 수 있어 더욱 편리했죠!

잠깐, Remix에 대해 자세히 알고 싶다면? (펼치기)


Remix는 React의 풀스택 웹 프레임워크입니다.
・React Router 제작자가 만들어 웹 개발에 더 나은 성능, 최신 웹 표준 및 더 나은 라우팅/로딩 전략을 제공할 것을 약속합니다.
・클라이언트에서보다 서버에서 더 많은 것을 담당하는 것을 원칙으로 합니다. 하여, 서버 측 렌더링에 집중했고, 클라이언트의 네트워크 및 CPU 부하가 줄어들어 이론적으로 성능이 향상됩니다.
・HTML 표준을 사용하여 JS 없이도 웹이 잘 작동할 수 있도록 합니다. 하여, 네트워크 상태가 좋지 않거나 느린 사용자에게도 Remix로 만든 웹은 유용합니다.

Remix 강의를 만나보세요!
Speedy한 웹을 쉽고 간편하게 개발할 수 있습니다.

* 버전 업데이트 모두 영상으로 제공되지 않으며, 일부 업데이트의 경우 문서 (노션, PDF)로 추가 될 예정입니다.

이 강의 하나면 앞서나가는 개발자,
빠른 웹을 빠르게 만드는 개발자가 될 수 있습니다.

Preview

학습하게 될 Remix의 핵심 기능을 확인하세요

2가지 프로젝트

이토록 강력한 Remix의 기능을
가장 잘 학습할 수 있는 주제로 선정한
최적의 프로젝트 2개를 선정했습니다

학습할 프로젝트 주제, 깐깐하게 고르고 골랐습니다!
프로젝트 선정 기준을 확인하세요.

Project Preview
2가지 프로젝트로 상용 웹 개발에 필요한 기능을 한 번에 학습하세요

PROJECT 01. 개념 학습을 위한 테크 blog 개발

Remix의 기초 개념을 종합적으로 다룹니다.
본 프로젝트 구현을 통해 Remix의 개념과 동작 방식을 학습하게 됩니다.

* 위 프로젝트 이미지는 예시 이미지로 실제 실습 이미지와 다를 수 있습니다.

PROJECT 02. 결제 기능 포함 커뮤니티 개발

필수 핵심 기능을 모두 개발할 수 있도록 결제까지 학습합니다.
‘게시판’의 CRUD와 ‘카드 결제’ 기능을 한 번 개발해 보면 Remix로 다른 프로젝트를 진행할 때에도 학습한 기능을 모두 활용할 수 있습니다.
개발부터 배포까지의 전 과정을 패스트캠퍼스에서 하나의 강의로 학습 하세요.

* 위 프로젝트 이미지는 예시 이미지로 실제 실습 이미지와 다를 수 있습니다.

잠깐!

위 프로젝트 개발에 필요한 스택 수로
Remix의 효율성을 확인하세요!

사용 스택 수 2배 차이 절감에 따른 효율을 상상하세요

Plus +

사이드 프로젝트에 바로 적용하기 원하신다구요?
‘개발부터 배포까지’ 완벽 대비!

이 강의 하나로 웹 서비스를 완성하세요.

커리큘럼 요약

규모 있고 안정성 있는 웹 서비스를 개발할 수 있도록
기초 & 심화 단계로 구성된 약 20시간의 체계적 커리큘럼

Basic | 9hrs

Part 2&3 학습 포인트
• Remix의 기초 내용을 학습하고, 실제 Playground 같은 프로젝트에서 실습합니다.
• 데이터 통신을 위하여 Supabase 서비스를 이용해 간단한 데이터베이스 구축 및 테이블을 설계하고 Remix와 연동합니다.
• Prefetch로 성능 최적화 할 수 있는 방법을 학습합니다.
• 모두 Typescript 기반으로 타이핑까지 진행됩니다.

  • Part 1. 오리엔테이션 1hr

    • Remix 프레임워크 소개 및 기존 프레임워크와의 차이 비교
    • Remix 개발 시작 전 환경 설정

  • Part 2. Remix 다뤄보기 4hrs

    Remix 개념과 실습
    • Remix 의 철학과 기능
    • Remix Stacks 에 대한 설명과 Playground 구성
    • Route Module 을 이용한 웹 페이지 구성
    • Link/Outlet 을 이용한 Nested Route 구성
    • Remix Server 와 데이터 통신 구성
    • Supabase 을 통한 데이터베이스 생성
    • Supabase 을 통한 데이터 통신 모델 구현
    • Loader 를 통해 Remix 서버로부터 데이터 불러오기
    • Form/Action 을 통해 Remix 서버에 요청 보내기

  • Part 3. 나만의 테크 블로그 만들기 4hrs

    기초 작업 : Vercel 를 통한 CI/CD 배포 진행
    • UI & 로직 구현하기
    • Remix 와 사용하기 좋은
    Mantine UI Framework 소개 및 설치
    • Nested Route 기반 페이지 레이아웃
    • 글 목록 컴포넌트 & 기능 구현하기
    • 글 작성 컴포넌트 & 기능 구현하기
    • 글 렌더링 컴포넌트 & 기능 구현하기
    • 댓글 컴포넌트 & 댓글 작성/수정/삭제 기능 구현하기
    • 데이터베이스 설계
    • 데이터 모델 정의하기

Advanced | 11hrs

Part 4&5 학습 포인트
• 렌더링 최적화 등과 같은 성능 최적화 관련 부분을 학습합니다.
• Remix-utils라는 라이브러리를 활용해 Remix의 시너지를 내는 방법을 알려드립니다.
• 커뮤니티 프로젝트는 Nested Route 를 완벽하게 사용하는 방식을 학습하게 됩니다.

  • Part 4. Remix 깊이보기 3hrs

    Remix 심화 개념과 실습
    • CatchBoundary 와 ErrorBoundary 로 에러 핸들링 구현하기
    • Cookie 사용 방법 및 사례
    • Session 사용 방법 및 사례
    • useFetcher 를 통해 컴포넌트 단에서 요청 보내기

    Remix 현업에서 사용하는 방법
    • Remix 내에 존재하는 기능들로 UI 최적화하기
    • JWT 을 통해 유저 인증 기능 구현하기
    • ClientOnly 기능을 통해 외부 라이브러리 사용해보기

  • Part 5. 결제 기능 포함 커뮤니티 만들기 8hrs

    기초 작업 : 프로젝트 구축Vercel 를 통한 CI/CD 배포 진행
    • UI & 로직 구현하기
    • 라우팅 구조 및 페이지 레이아웃 설계
    • 헤더 컴포넌트 구현하기
    • 로그인 및 회원가입 컴포넌트 구현하기
    • 게시글 리스트 컴포넌트 구현하기
    • 댓글 컴포넌트 & 작성/수정/삭제/ 불러오기 기능 구현하기
    • 글 작성 컴포넌트 & 작성/수정/불러오기 기능 구현하기
    • 포인트 구매 컴포넌트 구현하기
    • 결제 컴포넌트 & 로직 구현하기
    • 데이터베이스 설계
    • 데이터 모델 정의하기
    • 로그인/회원가입 기능 구현
    • 유저 인증 기능 구현

Finish | 1hr

  • Part 6. 마무리 정리 1hr

    • Remix 사용 시 마주칠 수 있는 문제들과 해결 방안
    • Remix 학습 로드맵 제안

그저 빛, 유저에게는 빠른 페이지 로드를,
개발자에게는 편안함을 주는 Remix로
성능최적화까지 함께 학습하세요!

성능최적화

왜 성능최적화 개념을 알아야 할까요?

프론트엔드 성능최적화의 핵심은
유저가 느끼는 홈페이지 속도!

Remix의 빠른 속도를 책임지는 이 모든 기능들로 성능최적화 개념까지 함께 학습합니다.

  • 성능최적화 관련 기본 개념

    • 웹 성능 측정 방법 : Lighthouse를 활용한 성능 측정 및 Remix 서버의 캐시컨트롤으로 유저에게 더 빠른 웹 서비스 제공 & 데이터 캐싱 주기를 효과적으로 컨트롤 할 수 있습니다.

  • 로딩최적화 관련 개념

    • UI 최적화 : useTransition, useLoaderData 와 같은 Hook 을 활용하여 UI 최적화를 실습합니다.
    Remix 자체 기능 UI Optimazation을 활용합니다.
    • 레이아웃 최적화 : Nested Route를 기반으로 페이지 레이아웃을 짜기에 간단한 페이지별 레이아웃을 구성할 수 있습니다.
    • PreFetch : PreFetch 사용으로 페이지에 필요한 데이터들을 미리 불러와서 유저에게 페이지 로딩 없이 열리는 느낌을 줍니다.

  • 렌더링 속도 향상 관련 개념

    • Nested Routes로 초기 렌더링 성능 개선 : Nested Routes로 필요한 Route만 렌더링 할 수 있어 초기 렌더링 속도가 빠르고 한 페이지에 들어있는 모든 Route를 병렬로 Remix 서버쪽에서 처리하여 클라이언트로 보내주기에 렌더링 성능을 개선할 수 있습니다
    • SSR로 빠른 속도 : 유저 단보다 서버가 더 많이 일하는 콘텐츠 처리 방식으로 렌더링 속도를 관리합니다.

Remix 사용으로 달라질 웹, 빨라질 웹을 상상하세요!

트러블 슈팅 노하우

공식 문서에도 없는 Remix 초밀착 노하우 전격 전수!
Remix 출시 초기부터 활용한 함종현 강사님만이 알려주실 수 있는
트러블 슈팅 방법을 확인하세요.

함종현 강사님
경력
현) Toss(비바리퍼블리카) | Server Developer
전) Transverse | Co-Founder & Lead Software Engineer
전) 주식회사 글루리 리허설 | Frontend Developer
• Naver Boostcamp 7th Backend Code-Reviewer
• NeuralAction | 개발 프로젝트 오픈소스로 공개
• Uber Baseweb Contributor (우버에서 개발한 React UI framework)
• 2020 인공지능 온라인 경진대회 사업화 지원 (1.6억원) 선발
• 2019 OpenResource Hackathon Seoul 2019 1등 수상
• 2018 대한민국 인재상 (Talent Award of Korea) 수상
• 2018 Intel International Science and Engineering Fair 대한민국 국가대표 및 Robotics and Intelligent Machines Grand Award
Remix는 활용하면 활용할수록 Next.js의 부족한 점을 잘 채운 스택이란 생각이 듭니다.
저조차도 이제는 Remix에 의존하고 있다는 생각이 들 정도니까요. 여러분도 저처럼 Remix의 매력을 한 껏 느끼고 활용하실 수 있도록 제가 가진 노하우를 모두 전수해드리겠습니다.

강사님의 노하우 엿보기

  • 개발 상황별 고려할 점

    • 회원 인증 상태에 따라 페이지 결과가 바뀔 수 있는 경우
    • API 요청 시 인증 정보를 포함하는 방법
    • 인증되지 않은 유저에 대한 핸들링 방법
    • JWT 인증 방식 중 Refresh Token 로직 구현 방법
    • 클라이언트 단에서만 렌더링 해야하는 컴포넌트 관리법

  • 사용 중 헷갈리기 쉬운 내용정리

    • 프론트 단과 서버 단의 각 서버 처리 방법
    • Remix에서 유용한 Loader, Action, Fetcher 기능 Remix 페이지 설계 및 버그 찾기

  • 에러 처리 방법 학습

    • 자료가 부족한 Remix에서 에러 발생시 대처하는 강사님의 노하우

강사님의 노하우 전수로 빠르게 Remix를 정복할 수 있습니다!

최초다운

Remix를 제대로 활용할 수 있을 때까지!
확실하게 책임지는 보조 시스템으로 적재적소에 활용할 수 있습니다.

* 버전 업데이트 모두 영상으로 제공되지 않으며, 일부 업데이트의 경우 문서 (노션, PDF)로 추가 될 예정입니다.

여기서 더 +

강의 중 받아쓰기는 그만!
집중 최적 환경을 만드는 강의 자료를 모두 드립니다

* 이 강의를 듣기 위해서는 아래와 같은 선수지식이 필요해요
• HTML : 작성 시 사용하는 기초 태그에 대한 지식과 DOM 에 대한 지식이 필요합니다.
• CSS : 기초적인 스타일에 대한 지식과 Flexbox 를 통해 레이아웃을 그려 본 경험이 있으면 좋지만, 없어도 강의 이해에는 어렵지 않습니다.
• Javascript : 기초적인 내용을 포함하여 Promise, async/await 과 같은 비동기 처리에 대한 지식이 필요합니다.
• Typescript : 인터페이스와 타입을 통해 변수, 함수에 대하여 타이핑 할 줄 알아야 하며 제네릭에 대한 지식이 있으면 좋습니다.
• React : 컴포넌트 제작부터 Route 에 대한 이해가 있어야 하며 Functional Component, Hook 등을 잘 사용할 줄 알아야 합니다.

추천대상

이런 웹 서비스를 만들고 싶은 분들께 추천드려요

Nested Route 를 효과적으로 구성할 수 있는 UI를 가진 웹 서비스를 만드시는 분
• 블로그 (Velog, 네이버 블로그 등)
• 온라인 게시판 (네이버 카페, 블라인드 등)
• 백 오피스 (단, 한 페이지에 데이터 변경이 많아야 하는 경우는 오히려 추천하지 않음)
• 이커머스 (쿠팡, 네이버 스마트 스토어 등)

동적 콘텐츠를 빠르게 제공해야 하는 웹 서비스를 만드시는 분
위키피디아 / 프로젝트 웹 문서 / 이커머스

이런 고민이 있으신 분들께도 Remix 활용을 꼭! 추천드려요

| 사이드 프로젝트 팀원 모집이 고민인 개발자 (프론트엔드/풀스택/HTML,CSS를 아는 백엔드 개발자)
Remix는 풀스택 웹 프레임워크여서 팀원 모집 없이 나홀로 사이드 프로젝트를 간단하게 진행할 수 있어요!
본 강의에서는 유저단 개발부터 배포까지 진행하니 나홀로 사이드 프로젝트를 생각하고 계시다면 Remix를 딱 사용하기 좋아요!

| 평소 React의 귀찮은 문제들을 새롭게 풀어보고 싶었던 프론트엔드 개발자
Remix는 React와 달리 라이브러리 없이 상태관리라 가능해요, 에러 처리도 컴포넌트 기준으로 진행되어 손쉽게 처리되죠!
React로 개발하며 새로운 문제 해결 방법을 경험해보고 싶던 개발자라면 Remix의 신세계를 접해보세요!

| 적은 인원으로 속도감 있는 웹 서비스를 구축하고 싶은 팀
Remix는 Nested Route 기능으로 페이지별로 여러 기능들을 Remix 내장 모듈로 구현할 수 있어 개발이 빨라집니다.
더하여, Data Prefetch 기능으로 유저에게 빠른 로딩 속도를 제공할 수 있어 더욱 나은 웹 서비스를 제공할 수 있다는 장점이 있습니다.

코스 프로모션 배너 전용입니다.
0일 0시간 0분 0초 코스 프로모션 배너 전용입니다.
  • 한번 구매로, 평생 소장하세요.
  • 평생소장
  • 최저가

한번 구매로, 평생 소장하세요.
(자동 구성) 가격이 인상됩니다.

조만간 가격이 인상될 예정입니다.
지금 구매하세요!

  • 정상가 (자동 구성)
  • 할인 금액 (자동 구성)
  • 최종 금액 (자동 구성)
  • 12개월 할부 시 월 (자동 구성)원
오늘이 최저가!

상세 커리큘럼.

아래의 모든 강의를 초격차 패키지 하나로 모두 들을 수 있습니다.
지금 한 번만 결제하고 모든 강의를 평생 소장하세요!

Part 1. 오리엔테이션

Part 2. Remix 다뤄보기

Part 3. 도전: 나만의 테크 블로그 만들기

Part 4. Remix 깊이보기

Part 5. 도전: 결제 기능 포함 커뮤니티 만들기

Part 6. 마무리 정리

Part 7. 새 Remix 대응하기

  • 상세 커리큘럼

    자세한 커리큘럼 및 내용은 여기서 확인하세요!

    자세히 보기 »

(자동)
정가 (자동)
할인 금액 (자동)
현재 판매가 (자동)

(자동)

* 12개월 무이자 할부 시
바로 구매하기
이 강의도 추천해요.