들어가며
정확히는 2일차. 어제는 OT였으니까 넘어가주고. 강의 시작한 당일부터 1일차라 표하겠다.
오늘 배울 강의의 이름은 JS주요문법. 중요 메소드, 동작원리를 심도깊으면서도 심플하게 강의해주시는 것 같다.
근데 자료구조-알고리즘등 CS지식도 같이 들어있는걸 보아하니, JS주요문법보다는 강사님이 소개해주신 타이틀 기본기와 상식이 더 어울린다.
강사님께서 추천해주시는 학습방법
- 기본기를 탄탄
- 정답을 찾는 과정 즐기기
- 메타인지
- 기록하기(공개)
- 질문을 두려워x
원래 하고있던 방법와 유사해서 다행이구려
참고로 본인은 강좌를 들으며 부족한 내용은 deepDive 서적에서 발췌하였음.
JS와 프론트 개발
js로 무얼 할수있을까?
초창기의 JS는 단순한 DOM조작
이제는 단순조작을 넘어서 다양한 동적 커뮤니케이션가능
특히 JS만으로 서버-프론트엔드-앱 개발 가능 => 이래서 스타트업에서 MERN스택을 많이 쓰는거겠지?
i18n이라는 라이브러리는 사용자의 언어를 감지, 번역본 캐싱 등 국제화 관련 기능 제공.
=> 흥미가 가는데, 한번 알아봐야겠다.
브라우저 동작원리 simple하게
통신 - 렌더링 - 스크립트 실행
https://d2.naver.com/helloworld/59361
https://developer.mozilla.org/ko/docs/Web/Performance/How_browsers_work
링크를 보고 다시 정리해볼것이다.
많이 길던데, 잘 해낼수 있으런지..
FE개발자의 역할
백엔드, 디자이너에게 무언갈 받아와서 처리하는 직업.
보통 제일 나중에 하는 작업이니 기간 엄수가 필수.
필수지식 6가지
- 커뮤니케이션
- UI
- 네트워크
- 보안
- 브라우저
- 디자인(기초적)
해선 안되는 3가지(닌자코더 되버리기)
- CS지식 무시
- CSS안하기
- 코더가 되기
변수,상수,자료형,메모리
변수는 2가지 존재 var, let 이중 var은 호이스팅기능 때문에 권장하지 않으신다.
그러면서 호이스팅을 숙제로 내주심.
호이스팅
길어져서 따로 파놨음.
자료형
- Number
- String
- Boolean
- Object
- Array
- function
- Undefined
- null
내가 알고있던 타입들과 미묘하게 다르다
함수와 배열 또한 객체라고 알고있었는데, 잘못 알고있는걸까?(나중에 배열도 객체라고 알려주신다. 멋쓱)
메모리
메모리는 할당-사용-해제순으로 이루어짐
js또한 가비지 컬렉터 알고리즘을 사용해 메모리를 관리함
메모리 심화
원시타입 할당
let x1 = 126;
let x2 = x1;
// 둘다 126
let x1 = x1 + 1;
// x1만 127로 바뀌었다x2에 x1을 할당했을땐, x1이 가리키고 있는 메모리 주소를 할당함.
x1에 1을 더했을땐, 원시값은 변할수 없어서 새로운 메모리 공간에 126+1을 할당하고, x1이 그 메모리 주소를 가리키게 함. 따라서 x1 !== x2
원시값은 자료형에서 보여준 타입들(객체제외)
JS 가상메모리
heap에는 참조타입
call stack에는 원시타입을 넣음.
가상메모리는 운영체제부분에서 다뤘음
let a = 1;
let b = "안녕하세요";
let c = [];
c.push(5);
c.push(1);
c.push(3);a,b는 각 값을 가리키는 메모리주소를 가진 채 call stack에 올라감(a,b순)
c는 heap에 저장된(배열의 값들이 저장된 메모리주소를 가리키는 또하나의 값)을 가리킨 채 stack에 올라감
=> 그렇기에 push같은 메소드로 값이 변경 가능한것처럼 보임. 실제로는 heap영역의 값을 변경하는 것.
이후에 사용되지 않는 메모리는 가비지 컬렉터를 이용해 정리
가비지 컬렉터
참조되지 않는 변수(메모리에 할당된)을 지움.
대표적인게 mark and sweep. js의 전역객체 window(node는 global)부터 다 훑으며 탐색불가능한 변수를 지움
트리구조일텐데, dfs나 bfs를 사용할 것 같다.
표현식과 연산자
표현식
표현식이란, 값으로 평가되는 문이다.
=> 표현식이 평가되면 새로운 값이 생성되거나 기존 값을 참조한다.
이게 무슨소리고 하니
- 값 : 표현식이 평가되어 생성된 결과
=>10+20이 평가되면30이 생성.30이 값이다 - 리터럴 : 사람이 이해할 수 있는 문자나 기호를 사용해 값을 생성하는 표기법
=>1, "hi", null, undefined, function(), {}, [].... 리터럴은 곧 값이다.
따라서
let a = 5;
10
'hello'
arr[1]
persone.name
sum += 10
function()등 전부 표현식이다. 또한, 표현식과 값은 동치다1+2 = 3처럼.
따라서 값이 들어갈 자리에 표현식이 들어갈 수 있다.
=> var x = 1+2, x + 3
배열과 객체
배열
배열은 연속적인 데이터. 원소에 번호(index)가 붙음.
배열 생성방법은 두가지가있다.
const arr = new Array();
const arr2 = [];참고로 첫번째 방법은 권장하지 않는다
const arr = new Array(1.2);
//error
const arr = [1.2];
//[1.2]위와같이 new Array는 숫자 리터럴하나만 받을때 길이로 인식함.
함수에는 다양한 메소드가 있음. 객체-배열 메소드를 따로 정리해보는것도 나쁘지 않을듯.
스코프와 클로저
느낀점
1편에서는 생각보다 더 기본적인 기본기를 배웠다. 기초를 다시 다져나가는 느낌이라 좋았다. 강좌에서 깊게 다루지 않았던 내용은 js deepdive책을 보며 정리하니 더 공부가 잘됐다.
얼른 강좌를 끝내고 프로젝트로 들어가면 좋겠음.
개인적으로 컴퓨터 지식 관련 flash card사이트를 만들고싶은데, 언제 만들까 고민된다.
강의는 5시간 내로 들을 수 있을 것 같으니...서너시쯤부터는 가능할것 같기도 하고?
복습을 안했더니 CS지식이 날아가는듯함. 얼른 만들어야겠음
따로 공부해둘 것
비트연산자, 객체-배열 안쓰던 메소드 정리
