토리

웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다.
그때 그때 '그럴 것같은' 이 아니라 제대로 된 퍼블리싱 개념과 방법을 배워 퍼블리셔가 될 수 있습니다.

Level 2

초급

퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준

HTML/CSS는 웹 페이지의 기본! 웹 페이지의 뼈대를 만들고, 디자인을 입히는 첫 시작을 열어줄 거예요.

HTML/CSS

기본부터 실전까지! 실력있는 전문가들의 디자인 실무 노하우를 배워보세요!

Web Design

웹 디자인

4개 강좌로 구성된 자바스크립트 바이블 강좌의 3번째 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다. ES6+ 환경에서 새로운 패러다임의 프로그램을 개발할 수 있습니다.

모던 자바스크립트(ES6+) 기본

프로그래밍 언어 랭킹마다 늘 상위권을 차지하는 자바스크립트! 프론트엔드에서 백엔드까지 다양한 영역에서 활발히 쓰이고 있어요.

자바스크립트

JavaScript

ES6의 개념과 새로운 기능을 배워 더욱 읽기 편한 코드를 작성해보세요.

4개 강좌로 구성된 자바스크립트 바이블 강좌의 마지막 강좌입니다. 자바스크립트 스펙의 95% 이상을 다룹니다.
특히, 비동기 통신과 비동기 프로세스 전반을 11단계로 나누어 프레임워크를 만드는 개념으로 접근합니다.

모던 자바스크립트(ES6+) 심화

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다. SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다. Part1에서는 리액트(React)를 사용한 웹 개발에 대한 기본 개념을 학습합니다.

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.1

페이스북이 개발한 Javascript 라이브러리, React

리액트

React

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다. SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다. Part.2에서는 리액트의 컴포넌트를 만드는 여러가지 방법을 학습합니다.

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.2

리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있습니다. SPA(Single Page Application)을 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트를 사용하여 웹 개발을 하는데 필요한 모든 구성 요소를 학습합니다. Part3에서는 하나의 완성된 데이터베이스 처리 웹앱을 만들어봅니다.

오픈 소스 자바스크립트 React 프로그래밍 입문 Part.3

리액트18 & 넥스트14 & 리액트쿼리5 & Next Auth5 & MSW2 & socket.io4 & zustand 스택으로 트위터(X.com)와 유사한 SNS 서비스를 만들어봅니다.
끝으로 검색엔진 최적화를 위한 SSR까지!

Level 3

중급이상

Next + React Query로 SNS 서비스 만들기

넥스트 제이에스

Next.js

react-query

next-auth

<div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="one-column-grid"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="-1" translate="no"><p><span style="color: rgb(73, 80, 87)">프론트엔드를 처음 준비하는 분들을 위한 로드맵입니다.</span></p><p>완주 후 CS 전공 지식을 이어서 들으면 좋습니다.</p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="two-column-grid two-column-grid--1to2"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size: 32px; color: rgb(134, 142, 150); width: 32px; height: 32px;"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content " src="https://cdn.inflearn.com/public/files/roadmaps/1603/builder/4dad393f-8393-4055-a210-7aa42684a94a/icons8-html-5-48.png?w=960" alt="icons8-html-5-48"></div></figure></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="0" translate="no"><p><span style="color: rgb(73, 80, 87)">HTML: 다양한 실전 예제를 통해 퍼블리싱, 웹표준, SEO 등 요구사항을 이해하고 서비스를 고도화하기 위한 지식을 습득할 수 있습니다.</span></p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="two-column-grid two-column-grid--1to2"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size: 32px; color: rgb(134, 142, 150); width: 32px; height: 32px;"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content " src="https://cdn.inflearn.com/public/files/roadmaps/1603/builder/da415b6e-8e5b-414a-a731-405e693510f8/icons8-css3-48.png?w=960" alt="icons8-css3-48"></div></figure></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="0" translate="no"><p>CSS: 포지션, 각종 레이아웃, 선택자, 상속, 가상 선택자 등 디자인을 구현하는데 필요한 기본 개념부터 어려운 개념까지 학습합니다.</p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="two-column-grid two-column-grid--1to2"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size: 32px; color: rgb(134, 142, 150); width: 32px; height: 32px;"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content " src="https://cdn.inflearn.com/public/files/roadmaps/1603/builder/5fbbfe0a-e553-4397-ae8e-b629035b1e20/icons8-html-5-48 (1).png?w=960" alt="icons8-html-5-48 (1)"></div></figure></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="0" translate="no"><p>JS: <span style="color: rgb(73, 80, 87)">자바스크립트 기본 개념부터 코드의 동작 원리까지 이해하여 효율적인 코드를 작성할 수 있는 기본기를 다집니다. 자바스크립트의 생태계를 이해하고 ES5 이전과 후를 비교하며 모던 문법을 학습합니다.</span></p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="two-column-grid two-column-grid--1to2"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size: 32px; color: rgb(134, 142, 150); width: 32px; height: 32px;"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content " src="https://cdn.inflearn.com/public/files/roadmaps/1603/builder/52ac20ee-30bb-4953-b2fe-562ef5ace3a2/react_original_wordmark_logo_icon_146375.png?w=960" alt="react_original_wordmark_logo_icon_146375"></div></figure></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="0" translate="no"><p>REACT: 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리로, 현재 FE 개발툴로 가장 인기있는 라이브러리입니다. SPA(Single Page Application)를 이해하며 REACT 에서 제공하는 다양한 기능을 이해하고 활용할 수 있는 능력을</p></div></div></div></div></div></div></div></div></div><div class="grid-wrapper"><div class="action-menu-wrapper action-menu-wrapper--root action-menu-wrapper--view-mode"><div class="two-column-grid two-column-grid--1to2"><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="image-text__container image-text"><div class="dropzone__wrapper"><div class="image-text__placeholder mantine-1avyp1d"><svg aria-hidden="true" focusable="false" data-prefix="fas" data-icon="image" class="svg-inline--fa fa-image " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512" style="font-size: 32px; color: rgb(134, 142, 150); width: 32px; height: 32px;"><path fill="currentColor" d="M0 96C0 60.7 28.7 32 64 32H448c35.3 0 64 28.7 64 64V416c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V96zM323.8 202.5c-4.5-6.6-11.9-10.5-19.8-10.5s-15.4 3.9-19.8 10.5l-87 127.6L170.7 297c-4.6-5.7-11.5-9-18.7-9s-14.2 3.3-18.7 9l-64 80c-5.8 7.2-6.9 17.1-2.9 25.4s12.4 13.6 21.6 13.6h96 32H424c8.9 0 17.1-4.9 21.2-12.8s3.6-17.4-1.4-24.7l-120-176zM112 192a48 48 0 1 0 0-96 48 48 0 1 0 0 96z"></path></svg></div><figure class="dropzone-preview__figure"><div class="dropzone-preview__uploaded-anchor dropzone-preview__uploaded-anchor--no-link"><img class="dropzone-preview__uploaded-content " src="https://cdn.inflearn.com/public/files/roadmaps/1603/builder/e0e19c29-5100-47d2-bb38-f6f74496fbf5/nextjs_icon_132160.png?w=960" alt="nextjs_icon_132160"></div></figure></div></div></div></div></div><div><div class="box__children-wrapper"><div class="action-menu-wrapper action-menu-wrapper--view-mode"><div class="editor-container text-view-mode" style="display: flex; flex-direction: column; height: auto; max-height: 100%; min-height: auto; border-radius: 8px;"><div data-testid="editor-content-container" class="editor-content-container markdown-body" style="background-color: rgb(255, 255, 255); cursor: auto;"><div class="tiptap ProseMirror" tabindex="0" translate="no"><p>NEXTJS: SPA와 비교하여 SSR의 장단점을 파악하고 유사한 SNS 서비스를 만들어봅니다.</p></div></div></div></div></div></div></div></div></div></div>

프론트엔드 기본 다지기

로드맵 코스