로드맵 썸네일

프론트엔드 기본 다지기

작성자 프로필 이미지

토리

React
JavaScript
ES6

초급 대상

로드맵 참여중인 유저 프로필 사진
로드맵 참여중인 유저 프로필 사진

3명 참여중

로드맵 코스

프론트엔드를 처음 준비하는 분들을 위한 로드맵입니다.

완주 후 CS 전공 지식을 이어서 들으면 좋습니다.

HTML: 다양한 실전 예제를 통해 퍼블리싱, 웹표준, SEO 등 요구사항을 이해하고 서비스를 고도화하기 위한 지식을 습득할 수 있습니다.

CSS: 포지션, 각종 레이아웃, 선택자, 상속, 가상 선택자 등 디자인을 구현하는데 필요한 기본 개념부터 어려운 개념까지 학습합니다.

JS: 자바스크립트 기본 개념부터 코드의 동작 원리까지 이해하여 효율적인 코드를 작성할 수 있는 기본기를 다집니다. 자바스크립트의 생태계를 이해하고 ES5 이전과 후를 비교하며 모던 문법을 학습합니다.

REACT: 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리로, 현재 FE 개발툴로 가장 인기있는 라이브러리입니다. SPA(Single Page Application)를 이해하며 REACT 에서 제공하는 다양한 기능을 이해하고 활용할 수 있는 능력을

NEXTJS: SPA와 비교하여 SSR의 장단점을 파악하고 유사한 SNS 서비스를 만들어봅니다.

로드맵 상세보기

7개 코스

로드맵에 포함된 강의 썸네일
인프런
퍼블리셔 취업을 위해 제대로 배워보는 html과 css, 그리고 웹표준
웹표준 기초인 html과 css를 마스터하고 실전 웹페이지를 제작해 봅니다.
그때 그때 '그럴 것같은' 이 아니라 제대로 된 퍼블리싱 개념과 방법을 배워 퍼블리셔가 될 수 있습니다.

44,000

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

55,000

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

55,000

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

38,500

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

29,700

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

38,500

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

69,300

로드맵 코스 7