프론트엔드 입문자들에게 좋은 링크 모음 (React 위주)
Write by @Romuru, pastel0721@naver.com
Last Update_24.03.17ㅤv1.5.0
개발 관련부터 점심매뉴 추천까지, 고민이 있으시면 편하게 뜨이따, 메일 주십시오.
유의점
최대한 무료와 한국어로된 자료 혹은 한국어 자막이 있는 자료로 취합하려고 했습니다.
그래도 이 글에서 가끔씩 유료로 추천 드리는 것들이 있는데,
가격에 2배 이상 이여도 구매가치가 있는(Udemy는 10배이상) 자료들로 구성을 해봤습니다. (개발도서는 제외)
각 링크 아래쪽에 플랫폼과 배울 수 있는 기술들을 간단정리 했으며
기본적으로 가격 언급이 없다면 무료입니다.
Udemy 이용시
유데미 강의들은 대부분 엄청 저렴하다고 하기에는 조금 어려운 가격대 (대부분 10~20만원 선)이지만,
유데미는 큰 할인을 자주합니다. ( 10 ~ 20만원대 ) 강의들을 평균 14,000원에 구매할 수 있습니다.
할인을 진행하면 가격이 12,000원 ~ 17,000원 선에서 변동이 있지만
15,000원만 되어도 충분히 기분좋게 구매할 수 있는 가격이라고 생각합니다.
로드맵
2022 웹개발 로드맵 총정리 (공부순서 알려드림) | 올해는 정말 해보자 🚀
[드림코딩 유튜브 , 웹개발 로드맵]
프론트엔드-로드맵
[깃 문서, 프론트엔드 로드맵]
프론트엔드?
프론트엔드 백엔드란 무엇인가? | 클라이언트 서버란 무엇인가? | 초보자를 위한 쉬운 개념 정리!
[짐코딩 유튜브, 프론트엔드_백엔드]
프런트엔드 개발자 학습 방향
[유튜브, 프런트엔드 학습방향]
개발환경 셋팅
Window
비쥬얼 스튜디오 코드(visual studio code) 설치 및 9개 익스텐션 추천!! - 프론트엔드 개발자 입문편 / 웹 개발 환경 설정
[유튜브, 윈도우 셋팅]
Mac
개발자를 위한 M1 풀옵션 맥북프로 세팅!
[노마드코더 유튜브, 맥 셋팅]
라이브러리, 프레임워크 차이
라이브러리? 프레임워크?
[노마드코더 유튜브, 라이브러리, 프레임워크]
HTML
생활코딩 - HTML
[유튜브, HTML 기초]
기초를 배울 수 있는 강의입니다. 암기보단 태그에 대해서 이해를 중점으로 보시면 좋습니다.
HTML 태그들, 헷갈리는거 정리해 보았다 🥳 (시맨틱 태그, 중요한 태그들 모음)
[유튜브, HTML 정리]
많은 태그들을 한번씩 정리해주는 영상입니다.
MDN - HTML
[공식문서 - MDN , HTML]
가장 많이 시간을 보낼 MDN 사이트입니다.
MDN - div
[공식문서 - MDN , HTML - div]
HTML작업을 할 때, 가장 흔하게 사용되는 div태그에 대한 설명입니다.
브라우저, DOM(Documnet Object Model)
브라우저는 어떻게 동작하는가?
[네이버 개발자블로그, 브라우저 동작]
DOM은 뭐고 가상 DOM은 뭔가요?
[유튜브, DOM, 가상 DOM]
MDN - DOM
[MDN, DOM 이론]
CSS
학습 하실때 HTML과 같이 모든 옵션을 암기하는게 아닌, 이런 옵션이 있다로 이해하시면 좋을꺼 같습니다.
CSS를 처음 배우실 때 가장 어려운점이
요소(태그)를 지정하는 선택자와 요소들을 어떤 식으로 배치를 할 지 지정하는 배치속성입니다. 어떤 속성들이 있는지 훑어보신 후 사이트를 따라서 만드는(클론코딩) 연습을 해보시면 쉽게 익숙해 집니다.
생활코딩 - CSS
[유튜브, CSS 기초]
CSS Flexbox 완전 정리. 포트폴리오 만드는 날까지!
[유튜브, CSS 배치 기초]
Learn-CSS!
[학습 사이트, CSS]
MDN - CSS
[MDN, CSS - 속성들]
반드시 기억해야 하는 CSS 선택자 30개
[외부사이트, 선택자 정리]
CSS 프레임워크
부트스트랩(bootstrap)
[공식사이트, 부트스트랩]
Sass(Scss)
[블로그, Sass 이론]
TailWind CSS
[공식사이트, TailwindCSS]
TailWindUI
[공식 템플릿 사이트 , TailWindUI ]
flowbite-react
[tailwind UI 컴포넌트 라이브러리]
CSS 프레임워크 for React
Styled-component
[블로그, styled-components ]
React boot-strap
[공식사이트, React 부트스트랩]
html/css 애니메이션 생성기
코드로 하나하나 속성을 주고 확인하기보다 페이지 내에서 편리하게 생성하고 복사해서 바로 적용 시킬 수 있는
사이트 모음입니다.
JavaScript
바닐라 JS로 크롬앱 만들기
[노마드코더 강의, JS]
Momentum 이라는 크롬 앱을 따라 만들어보면서 JS의 기초를 배워봅니다.
프론트엔드 입문자라면 HTML와 CSS를 훑어 보시고 시작하길 바랍니다.
모던 자바스크립트
[이론, JS]
잘 정리된 JS이론 사이트입니다. 메인으로 잡고 공부하시길 추천드립니다.
ES2021 자바스크립트 강좌
[유튜브 강의, JS]
시나브로 자바스크립트
[유료, JS]
npm 라이브러리의 구조를 살펴보고, 전반적인 자바스크립트 기술에 대해서 깊게 배워볼 수 있는 강의입니다. (주인장이 이름 지음)
벨로퍼트와 함께하는 모던 자바스크립트 튜토리얼
[웹사이트, JS]
JS의 기초(초반부분)를 배울수 있습니다.
JavaScript 완벽 가이드 : 초급 + 고급 마스터 과정
[유료, 유데미 강의, JS]
JavaScript 알고리즘 & 자료구조 마스터클래스
[유데미 강의, 유료, 자바스크립트 알고리즘 ]
JavaScript 알고리즘 및 자료 구조
[깃허브 저장소, JS의 로직 모음]
ES6+,ECMAScript?
ES6+ 변경점 간단정리
[사이트, JS(ES6+)]
HTML, CSS, JS로 웹페이지 만들어 보기
왕초보를 위한, HTML&CSS 웹 개발 입문
[인프런 강의, HTML,CSS]
제대로 파는 HTML & CSS 강좌 - 웹개발 퍼블리싱 끝장내기
[유튜브 강의, HTML, CSS]
포트폴리오 웹사이트 만들어보기
[유튜브 강의, 영어, HTML, CSS, JS]
The Web Developer 부트캠프 2022
[유데미강의, 유료, 웹 풀스택]
Git, GitHub(깃,깃허브)
깃 끝장내기, 제대로 파는 Git & GitHub 강좌
[유튜브, 깃,깃허브 이론]
깃, 깃허브 제대로 배우기 (기본 마스터편, 실무에서 꿀리지 말자)
[유튜브, 깃,깃허브 이론]
깃 연습해보기
[연습사이트, 깃,깃허브 커맨드 직접 입력해서 배울 수 있는 사이트]
GitHub ReadMe(자기소개) 꾸미기
Github Readme 꾸미기 총정리
[블로그, Git ReadME 꾸미기]
마크다운(Markdown) 사용법
[깃 문서, 마크다운 사용법]
React
React.js로 영화 웹 서비스 만들기
[노마드코더 강의, React 기초]
리액트의 Hooks 완벽 정복하기
[블로그, React Hook]
React & Express 를 이용한 웹 어플리케이션 개발하기
[인프런 강의, React, Node,js]
React-Master-Class
[노마드코더 강의, 유료(12만원) React 심화, recoil, react-query, dnd, react-router, styled-component]
React 완벽 가이드 with Redux, Next.js, TypeScript
[유데미강의, 유료, React]
React 공식 사이트
[공식사이트, React 이론]
한글 지원 및 다양한 예제가 많이 추가 되었습니다.
벨로퍼트와 함께하는 모던 리액트
[이론, React]
상태관리
React에서 상태관리하기
[블로그, React 상태관리]
남들이 사용해서 Redux 인가, 필요에 의해 쓰는 Redux 인가.
[블로그, 상태관리 이론]
초보자를 위한 리덕스 101
[노마드코더 강의, Redux]
생활코딩 - Redux
[유튜브 강의, Redux]
Next.js
서버사이드 렌더링 (개발자라면 상식으로 알고 있어야 하는 개념 정리 ⭐️)
[유튜브 이론, Next.js의 핵심 SSR, CSR]
Next.js 시작하기.
[노마드코더 강의, Next.js 기초]
Next.js?
[블로그 , Next.js 기초]
Next.js - 완벽 정복 가이드
[유데미, 유료, Next.js]
TypeScript
내가 자바스크립트를 쓰지 않는 이유?
[노마드코더 유튜브, TS이론]
타입스크립트로 블록체인 만들기
[노마드코더 강의 , TS강의]
타입스크립트 핸드북
[블로그, TS 이론]
GraphQL
이 영상을 보고나면 REST API 를 못쓰게 됩니다.
[노마드코더 유튜브 , GraphQL 이론]
얄팍한 GraphQL과 Apollo
[얄코 강의, GraphQL]
GraphQL로 영화 API 만들기
[노마드코더 강의, GraphQL]
GraphQL로 영화 웹 앱 만들기
[노마드코더 강의, GraphQL, React]
JS 사이드프로젝트 추천 모음집
초보자를 위한 40가지의 자바스크립트 프로젝트
[외부사이트, 프로젝트 추천]
당신의 사이드 프로젝트를 위한 10가지 팁
[블로그, 사이트 프로젝트 팁]
더미/테스트 데이터,JSON 생성기
외부 API
테스트용 데이터 제공 API, JSON Placeholder
유용한 사이트 모음.
내 웹사이트를 슬랙에서 돋보이게 해줄 메타 태그 8가지
[블로그, 메타태그 이론]
웹 프론트엔드 개발자, 어떻게 준비해야 할까?
[블로그, 프론트엔드 준비 이론]
실용주의 프런트 엔드 개발
[블로그, 프론트엔드 개발 이론]
함수형 프로그래밍과 ES6+
[유튜브, 함수형프로그래밍]
고퀄리티 개발컨텐츠 모음
[깃 문서, 고퀄리티 개발컨텐츠 모음]
TOAST UI
[TOAST UI 문서, 개발 이론]
regexr
[공식사이트, 정규식 간편하게 생성]
컴퓨터공학
PS를 공부하는 뉴비들을 위한 안내서
[블로그, 문제해결 이론 ]
운영체제 공룡책 강의
[인프런 강의, 운영체제]
이력서 작성 & 면접
[CS 지식] 내가 공부하려고 만든 신입 개발자 면접 지식 모음집
[블로그, 개발자 면접 준비]
15초의-승부-이력서-작성의-세계
[블로그, 이력서 by totu]
웹 프론트엔드 개발자 아무것도 모르는 상태에서 취업까지 하는 구체적인 준비방법
[유튜브, 프론트엔드 취업준비]
취준생이 반드시 알아야 할 프론트엔드 지식들
[깃 문서, 프론트엔드 면접 준비]
개발자 이력서 작성하기
[블로그, 이력서 작성]
운.동. (건강)
직장인 스트레칭, 사장님 몰래 하세요
[유튜브, 스트레칭]
지금 딱 8분만 해보세요👌🏻골반과 고관절이 놀랍도록 편해집니다
[유튜브, 골반 스트레칭]
맨몸운동으로 전신 근육통 만들어주는 홈트루틴🔥 웨이홈트
[유튜브, 맨몸 전신운동]
덤벨만으로 하는 BEST 전신운동
[유튜브, 덤벨 전신운동]
영양제 여러개 챙겨드시기 힘드시죠? 이 영양제 하나면 충분 합니다!!
[유튜브, 영양제 추천]
영어
연봉 앞자리가 바뀌는 개발자 필수 언어
[노마드코더 유튜브, 영어 중요성]
영어를 편하게 듣고, 읽을 수 있는 법 - 1. 발음공부부터 하라
[블로그 , 영어 공부 이론]
readworks
[외부사이트 , 영어 공부 사이트]
Mystery Doug
[유튜브, 여러 상식을 영어로 알려주는 사이트]
Kurzgesagt
[유튜브, 여러 상식을 영어로 알려주는 사이트 (주로 우주)]
외국 홈쇼핑 방송
[유튜브 생방송, 일상생활 영어]
개발자영어 - 독해부터 클린코드까지 문제 해결과 개발 역량 강화
[유데미 강의 , 유료 , 영어]
IT 개발자의 영어 필살기
[서적, 유료, 개발자 영어]
플랫폼 잉글리시
[서적, 유료, 개발자 영어]
영어 타자 연습 사이트
[외부사이트 , 영어 타자 연습사이트]
웹(앱)디자인, UI/UX
MadiaDesigner
[유튜브 체널, 디자인]
웹 최적화 방식 모음 - 3.3 UX 트릭
[블로그, UX최적화]
DesignCourse
[유튜브 체널, 영어, 디자인]
frontendmentor
[외부 사이트, 부분 유료, 주어진 디자인을 보고 퍼블리싱 해야됨]
Daily UI
[외부 사이트, 디자인 100일 챌린지]
Color Hunt
[외부 사이트, 색상 팔렛트 추천]
MATERIAL DESIGN
[외부 사이트, 유용한 디자인 이론, 참조]
uiverse
[외부 사이트, html, css로 이루어진 요소들 다량 보유]
MATERIAL- color
[외부 사이트, 색상 배합 추천]
반응형 디자인?
[블로그, 반응형 디자인 이론]
UPA
[외부 사이트, 실제 서비스 중인 UX 패턴 모음 ]
폰트, 아이콘
눈누 폰트
[공식 사이트 , 폰트 모음]
heroicons
[공식 사이트, 아이콘 모음]
ionicons
[공식 사이트, 아이콘 모음]
개발자 플랫폼
요즘IT
[요즘 IT, 전반적인 IT, UI/UX 소식]
Dev Event Web
[공식 사이트, 개발자 행사 정리]
좋은 유튜브 체널 추천
주로 HTML, CSS, JS로만 페이지를 만들어보는 유튜브 강의 체널 (영어)
React를 사용하여 페이지를 만들어 보는 유튜브 강의 체널 (영어)
개발도서 추천
Web
JavaScript
React
개발론
디자인
좋아요!@