프론트엔드 개발자가 되기 위해서는 선택의 여지가 없습니다.
무조건 자바스크립트를 마스터해야 합니다.
실무에서 자바스크립트만으로 개발할 일은 거의 없겠지만
단언컨대 자바스크립트를 어설프게 알고서는 React나 Vue를 잘할 수 없습니다.
다행히 자바스크립트를 공부할 수 있는 자료들은 많습니다.
굳이 책을 사지 않더라도 웹 상에서 좋은 강의들을 찾아볼 수 있습니다.
제가 과거로 다시 돌아가서 프론트엔드 개발자를 준비한다면 다음 사이트들을 눈여겨볼 겁니다.
자바스크립트를 공부하기 위한 웹 사이트
1. 생활코딩
우리 나라의 개발자라면 누구나 알고 있는 사이트입니다.
처음 시작하는 사람의 눈높이에서 기초부터 차근차근 알려주기 때문에
개발 입문 영상으로 제격입니다.
Web 카테고리에서 HTML, CSS, JavaScript 강의 영상들을 보시길 추천드립니다.
https://opentutorials.org/course/3085
2. Mosh, Udemy
영어가 조금 되는 분들이라면
또는 개발자를 준비하면서 영어도 공부하고 싶다면
이 유튜브 채널도 추천해 드립니다.
사람에 따라 다르겠지만 자막을 열고 영상을 되돌리며 보면
어느 정도 이해할만합니다.
JavaScript Tutorial for Beginners
단순히 쉽게 가르쳐 주는 것을 넘어서 원리까지 명확히 알려주기 때문에 기초를 제대로 잡고 시작할 수 있습니다.
유튜브에는 1시간 정도의 샘플 강의를 공개하고
더 보고 싶다면 아래 홈페이지에 들어가 저렴한 값에 나머지 강의를 들을 수 있습니다.
참고로 udemy에도 좋은 강의가 많습니다.
영어권 강의를 추천드립니다.
글로벌 best라는 이름으로 한글 자막 작업이 된 강의들도 있는데요.
할인할 때 구매하면 커피 3잔 값으로 몇 십시간에 달하는 세계 최고 수준의 강의를 들을 수 있습니다.
(정가에 사면 배 아플 정도로 할인 기간이 자주 있으니 참고하세요.)
https://www.udemy.com/courses/development/web-development/
3. 모던 자바스크립트 튜토리얼
자바스크립트의 정석과도 같은 사이트입니다.
처음부터 이 사이트로 시작하기는 어렵겠지만
자바스크립트가 익숙해지고 나서 한 번은 쭉 정독해 보시길 권합니다.
꼭 알아야 할 것들
이상의 강의들만 참고하더라도 내용 자체는 절대 부족하지 않습니다.
마지막에 소개해드린 모던 자바스크립트 튜토리얼은 정말이지 대박입니다.
그렇다고 시작부터 모든 것을 다 볼 수는 없습니다.
거의 사용하지 않는 기능들까지 공부할 필요는 없죠.
아래 리스트에서 언급한 것 위주로 먼저 공부하시고
나머지는 필요할 때 찾아보는 식으로 접근해 보세요.
이후에 자바스크립트가 어느 정도 익숙해지면 이런 가이드 없이도
어떤 것을 공부해야 하는지 스스로 아시게 될 겁니다.
Check List
1. 변수
- var는 몰라도 된다.
- let과 const를 익힌다.
https://ko.javascript.info/variables
2. 자료형
- string, number, boolean, undefined, null, object
https://ko.javascript.info/types
3. 형 변환
- string과 number를 더하면 string이 된다.
- String(), Number()
https://ko.javascript.info/type-conversions
4. 기본 연산자
- +, -, *, /, %, =
- 일반적인 수학과 달리 변수에 값을 넣을 때 쓰는 = 연산자에 익숙해져야 한다.
https://ko.javascript.info/operators
5. 비교 연산자
- >, <, >=, <=, ===
- ==은 절대로 사용하지 않는다.
https://ko.javascript.info/comparison
6. if문
- truthy, falsy
- if문의 괄호 안에 숫자가 들어가는 경우 0 때문에 통과되지 않을 수 있다는 것을 잘 기억해야 한다.
https://ko.javascript.info/ifelse
7. 논리 연산자
- ||, &&, !
https://ko.javascript.info/logical-operators
8. while문과 for문
- while, for 기본 사용법
- break, continue
https://ko.javascript.info/while-for
9. 함수
- 함수 선언 방식, 함수 표현식
- 지역변수, 외부변수, 전역변수, 매개변수
- return
https://ko.javascript.info/function-basics
https://ko.javascript.info/function-expressions
10. 객체
- 객체를 생성하는 방법
- 중괄호({})를 이용한 방법
- new 키워드를 이용한 방법
- 객체의 값을 불러오는 방법
- 점(.)을 이용한 방법
- 대괄호([])를 이용한 방법
- 객체의 값을 넣거나 수정하는 방법
- for-in문
https://ko.javascript.info/object
- 원시값과 달리 객체가 어떤 식으로 복사되는지를 알아야 한다.
(객체를 담고 있는 변수는 사실 객체가 저장된 곳의 주소값을 저장하고 있다.)
- Object.assign을 이용한 객체 복사
(객체의 값에 객체가 있는 경우 lodash의 cloneDeep을 대신 사용해야 한다.)
https://ko.javascript.info/object-copy
- 메소드를 만드는 방법
- 실행 환경에 따라 달라지는 this
https://ko.javascript.info/object-methods
11. 타입 변환 메소드
- Number()
- String()
- Boolean()
https://ko.javascript.info/primitives-methods
12. Number 메소드
- Math.floor()
- Math.ceil()
- Math.round()
https://ko.javascript.info/number
13. String 메소드
- 특정 위치의 글자를 읽는 방법
- str.length
- str.indexOf()
- str.slice()
- str.substring()
https://ko.javascript.info/string
14. 배열
- 대괄호([])로 배열을 생성하는 방법
- 배열의 값을 불러오는 방법
- 배열의 값을 수정하는 방법
- length를 이용해서 배열의 길이를 구하는 방법
- 메소드
- push()
- shift()
- pop()
- unshift()
https://ko.javascript.info/array
- splice()
- slice()
- concat()
- forEach()
- indexOf()
- includes()
- find()
- filter()
- map()
- sort()
- reverse()
- join()
- split() : string 메소드
- reduce()
'프론트엔드 개발 입문' 카테고리의 다른 글
| 웹 페이지를 HTML 태그로 만드는 방법 기초 (0) | 2021.05.22 |
|---|---|
| 프론트엔드 개발 도구와 설치 방법 (0) | 2021.05.18 |
| 웹 프론트엔드 개발자 시작하기 (4) | 2021.05.17 |
