프론트엔드 입문자들에게 좋은 링크 모음 (React 위주) ~Last Update 24.03.17

Romuru·2022년 8월 29일
822

지식 공유

목록 보기
1/3
post-thumbnail

프론트엔드 입문자들에게 좋은 링크 모음 (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 애니메이션 생성기

코드로 하나하나 속성을 주고 확인하기보다 페이지 내에서 편리하게 생성하고 복사해서 바로 적용 시킬 수 있는

사이트 모음입니다.

webcode.tools

html-code-generator

uiverse

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 생성기

faker.js

외부 API

강아지 사진

고양이 사진

테스트용 데이터 제공 API, JSON Placeholder

구글 번역

날씨,Open Weather Map

The Pokemon API

라이엇게임즈(롤)

넥슨 오픈 API

공공데이터 포탈

네이버 API

카카오 API

업비트 API


유용한 사이트 모음.

내 웹사이트를 슬랙에서 돋보이게 해줄 메타 태그 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 소식]

요즘 IT 트위터 계정

Dev Event Web
[공식 사이트, 개발자 행사 정리]


좋은 유튜브 체널 추천

노마드코더 유튜브

개발자의품격

부스트코스

코딩애플

널널한 개발자 TV

드림코딩

생활코딩

얄팍한 코딩사전

우아한-Tech


주로 HTML, CSS, JS로만 페이지를 만들어보는 유튜브 강의 체널 (영어)

freeCodeCamp.org

Julio Codes

Kevin Powell

Traversy Media


React를 사용하여 페이지를 만들어 보는 유튜브 강의 체널 (영어)

Code Commerce

Dev Ed

Fireship

freeCodeCamp.org

JavaScript Mastery

Academind

Lama Dev

The Net Ninja


개발도서 추천

Web

HTTP 완벽 가이드


JavaScript

자바스크립트 완벽 가이드

리팩터링

모던 자바스크립트 딥다이브 (심화)


React

모던 리액트 딥다이브 (심화)

리액트 훅을 활용한 마이크로 상태 관리 (심화)


개발론

개발자의 글쓰기

CODE

Clean Code(클린 코드)

IT 5분 잡학사전

데이터 중심 애플리케이션 설계

가상 면접 사례로 배우는 대규모 시스템 설계 기초

우아한 타입스크립트 with 리액트

유난한 도전

프로그래머의 뇌


디자인

버려지는 디자인 통과되는 디자인: 웹&앱디자인

profile
늘 새로운 호기심을 찾고, 기술적 한계에 도전하고, 하늘색이 잘 어울리는 사람입니다.

30개의 댓글

comment-user-thumbnail
2022년 8월 30일

좋아요!@

1개의 답글
comment-user-thumbnail
2022년 8월 30일

좋은 정보 완전!! 감사합니다!

1개의 답글
comment-user-thumbnail
2022년 8월 31일

대부분 경험한 내용들이 있어 더 반갑네요!! 깔끔하게 정리를 해주셔서 앞으로 이 포스팅 글을 추천하면 되겠어요!

1개의 답글
comment-user-thumbnail
2022년 9월 4일

해외 유튜버분들 중에 Web Dev Simplified 이분도 강추드립니다. 웹 개발 관련 컨텐츠가 정말 다양하더라구요

1개의 답글
comment-user-thumbnail
2022년 9월 5일

이 글에 있는 링크만 정독해도 자바스크립트 입문은 끝나겠네요 감사합니다 열심히 할게요!!

1개의 답글
comment-user-thumbnail
2022년 9월 6일

감사합니다

1개의 답글
comment-user-thumbnail
2022년 9월 7일

제가 자주 보던 사이트나 유튜브 채널이 많아서 언급해주신 다른 링크들도 도움이 될 것 같습니다. 공유 감사합니다.

1개의 답글
comment-user-thumbnail
2022년 9월 8일

오..이글 지우지 말아주세요. 볼거 많네요. 감사합니다~~

1개의 답글
comment-user-thumbnail
2022년 9월 21일

감사합니다! 잘 활용해보겠습니다!

1개의 답글
comment-user-thumbnail
2022년 12월 8일

최고십니다 감사합니다!!! 🙇‍♀️🙇‍♀️🙇‍♀️🙇‍♀️

답글 달기
comment-user-thumbnail
2022년 12월 17일

좋아요!

답글 달기
comment-user-thumbnail
2023년 3월 15일

좋은 정보 감사합니다! 😄

답글 달기
comment-user-thumbnail
2023년 7월 19일

안녕하세요! 너무 좋은 글 잘보았습니다. 해당 글을 제 github 공부 Repo에 참고해서 올려두고 싶은데 사용 가능할까요???

답글 달기
comment-user-thumbnail
2023년 8월 28일

추천해주신 udemy 강의들 잘 듣겠습니다. 감사합니다

답글 달기
comment-user-thumbnail
2023년 10월 17일

좋은 정보 감사합니다!! 참고하겠습니다!

답글 달기
comment-user-thumbnail
2023년 12월 11일

너무 감사합니다

답글 달기
comment-user-thumbnail
2024년 3월 30일

이직준비 하면서 너무 많은 도움이 될 거 같아요 정보 감사합니다!

답글 달기
comment-user-thumbnail
2024년 5월 7일

이걸 이제서야 봤네요... 좋은 정보 감사드립니다!

답글 달기
comment-user-thumbnail
2024년 6월 6일

와 좋은 정보 정말 감사합니다!!

답글 달기