[유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 - 사전직무교육 1일차 후기

 

24년 5.24일 첫날 수업으로는 OT를 듣고 점심부터 자바스크립트의 기본을 공부하게되었다.

이미 아는 내용들이 많았지만 그래도 복습하는 차원으로 학습한 것들을 기록해 놓는다.! 

자바스크립트의 역사

최초로 공개된 모질라 -> 모자이크 브라우저가 나옴

1994년 -> 모질라에서 나와 넷스케이프 -> 넷스케이프 내비게이터를 만듬
1995년에 넷스케이프에서 넷스키에프 내비게이터 안에 라이브스크립트를 공개 후 홍보를 위해 자바스크립트로 명명함
1996년 ->마이크로 소프트사 -> 인터넷 익스플로우 와 그안에 jscript 출시
1997년 cma에 이름 의뢰 -> ecmascript1
1998-> ecmascript2
~ 2000->ecmascript4
2006- 웹개발자들의 열광의 j-quary등장 호환성 통일 3사 (크롬 익스플로어 파이어폭스)

script부분에 async 를 사용하는 이유

 

 

 

async를 사용하는 이유?

1. 사용하지 않을시 -무조건 첫 코드부터 실행을 한다.
그래서 저 script부분에서 저 자바스크립트를 다운로드 다하고 다시 코드를 읽는다

근데 저 스크립트 부분이  무거우면 첫 로딩화면이 로딩이 오래 걸리는 단점이 생긴다

그래서 예전에 body태그가 끝나기전에 script를 썼다

(근데 async 를 안쓰고 저 사이에 썼다? 퇴사각)

2. body태그 끝나는 부분에 쓴다 -그러면 html의 모든 코드가 랜더링이 되어 보여지겠지만 애플 홈페이지처럼 인터랙션(애니메이션)이 중요하면 저 아래에 썼을때 이미 보여지고 애니메이션이 보여지기에 부조화가 와서 보기 껄끄럽다 그렇기에  맨뒤에쓰는게 좋은 편은 아니다

단점:인터랙션이 나중에 입혀짐
장점: 빨리 볼수 있다

 

 

3. async사용 - 잘 코드를 읽다가 script부분에서 html도 진행하며 자바스크립트를 다운받으며 병렬로 다운로드를 받고 실행할때 만 잠시 멈추고 html를 킨다

 

단점:asyne 가 여러개면 다운로드가 먼저 된놈이 먼저 바로 실행이되서 순서가 무작위이다. 차례대로 실행을 해야한다면 비추

 

4. defer 사용  - Html이 실행 되다가 async처럼 병렬로 다운받되 실행은 html이 다끝나고 실행을 한다. 단 여러개를 다운받을때, async처럼 다운로드가 끝난거부터 실행하지 않고 기다리다가 먼저 다운로드 한걸 실행 시킨다.

 

단점 : 얘도 인터랙션이 나중에 보여질 수 있다

장점: 다운로드를 빨리 한다

?? 궁금증 : 자바스크립트가 겁나 무겁다 그럼 defer랑 똑같은거아냐? 응 그래도 실행은 순서대로 된다~

 

 

 

Var let const 키워드

데이터를 저장해주는 공간을 만들어주는  문법

 

 

num1 -> 식별자를 이용해 데이터를 담아 저장해주는 공간을 만듬

데이터는 = 1을 하여 담으세요

= → 데이터를 할당해주는 할당 연산자

 

var num1 = 10+20 → 표현식

 

 

var이외에 let const도 써야하는 이유

let은 중복 변수명을 만들수 없다 → 경고가 뜬다 var은 중복변수로 할당이 가능

var키워드로 되있음 퇴사

 

1. 데이터가 재할당을 보장하지 않을떄 const를 쓴다

 

2. 재할당이 가능한거는 let을 써라

 

3. const는 꼭 데이터를 적어야한다

 

 

 

 

개발자가 담에 쓰려고 넣어놓은것 의도한거다

 

배열에 모든것을 넣을수있다 한꺼번에 넣어서 모든데이터 가능!

배열과 비슷한 것 객체

객체가 좋은점 : 키와 값으로 이뤄져있어서 설명이 직관적이라 한번에 알수 있다

 

 

위 배열 아래 객체

[ 대괄호 ] { 중괄호 } (소괄호)

 

 

기본자료형과 참조 자료형을 나눈이유?

값을 저장하는 방식이 조금 다르다

 

이러면 false가 나온다 그이유는 fruits 에는 그 값의 주소값이 담겨져있고 2도 똑같이 다른 주소값이 저장됨

 

그래서 서로 다르다고 말해준다

이건 2에 fruits의 주소값을 그대로 줬기에 true가 나온다

 

 

신기한 이야기

 

object로 나옴 array로 안나옴 →개발자의 실수 오피셜 내가 미안해~

 

 

 

피연산자들의 데이터가 같으면 참을 반환합니다. (자료형 검사 x)

안에 자료형은 하나로 통일한다

1. 개발자가 의도로한 형변환이 아니기에 암묵적 형변환
2. === 은 정확히 저런거 나올까봐

팁!

전치 ++a , —a →~~하기전에 더하기 뺴기 ex) 변수에 담기전에 더하고 변수에 담기 이렇게!

후치 a++ , a— → ~~한 후에 더하기 빼기

증감연산자 쓸바에 헷갈리니 정확히 쓰자 그냥 a+1 이렇게

&& → 앞이 false가 오면 뒤에께 실행안됨

|| → “ “ 비어있으면 false 이고 “ default value” 를 넣어 저렇게 나오게 할 수 있다 . true 이면 뒤는 보지도 않고 true 넣음 저 default value할때 말고

자바스트립트 엔진은 “ “를 자료형검사 없이 그대로 받아들이나 보다!

 

 

 

 

본 후기는 본 후기는 [유데미x스나이퍼팩토리] 프로젝트 캠프 : Next.js 1기 과정(B-log) 리뷰로 작성 되었습니다.