[TIL] JavaScript

jay__ss·2021년 11월 26일
0
post-thumbnail

스크립트언어 & 컴파일언어

본격적인 '언어공부'에 앞서서 언어의 두 가지 종류를 알고가자.

1. 스크립트언어_JS는 여기에 해당!

(스크립트언어)소스코드 -> 인터프리터 -> CPU / 메모리

동적 타입의 인터프리터 언어
런타임에서 오류를 발견할 수 있습니다/.(돌려봐야지만 에러를 확인 가능👽)

2. 컴파일언어_TS는 여기에 해당!

(컴파일언어)소스코드 -> 컴파일러 -> 기계어 -> CPU / 메모리

정적 타입의 컴파일 언어
컴파일 단계에서 에러를 발견(컴파일은 일종의 쓸모가 있는 놈으로의 변환)
즉, 작성단계에서 오류 확인이 가능!!!

코드 작성 단계에서 타입을 체크해 오류를 확인할 수 있고 미리 타입을 결정하기 때문에 실행 속도가 매우 빠르다는 장점이 있습니다. 하지만 코드 작성 시 매번 타입을 결정해야 하기 때문에 번거롭고 코드량이 증가하며 컴파일 시간이 오래 걸린다는 단점이 있습니다.
https://post.naver.com/viewer/postView.naver?volumeNo=31841463&memberNo=36733075


Computational thinking

우리의 사고와 컴퓨터의 사고는 다르다. 언어도 다르다.
(다르다는 표현보다도, 훨씬 그 너머의 벽이 느껴질만큼)
우리의 사고를 우리의 언어에서, 컴퓨터의 사고와 컴퓨터의 언어로 입력해줘야 한다.

그렇기에 Computational thinking은 까다롭다.

컴퓨터가 수행할 수 있도록 해결책을 만드는 과정 혹은 사고.

이러한 과정에는 분기(Yes or No)와 반복(Repeat)이라는 과정이 있다.


Hello JavaScript !

웹이 읽을 수 있는 것은 단 3가지.
HTML, CSS, JS

프론트엔드 개발자인데, 무언가가 막힌다면 그건 이 셋중에 한곳에서 막히는 것이라고 생각한다.(개인적으로)


What is JS...?

웹 개발을 요약하자면,

정보를 담은 문서를 만들고, 그 문서를 꾸며준 뒤, 상호작용을 위해 제어한다.

축약의 축약을 하다보니 표현이 이상하지만, 위의 문장은 결국 아래를 의미함.

HTML + CSS + Javascript

여기서 제어라는 표현이 처음 등장했다.
제어를 하려면 어떻게 하느냐도 중요하지만, '무엇을' 제어할 것인지 먼저 알아야 한다.
(아주 간단하게, '버튼'을 클릭했을 때 무언가 변하게 하고 싶다면 내가 제어하고자 하는 것은 버튼이 되는것이다.)

이 때, 자바스크립트가 제어하는 것을 객체라고 한다.

그럼 이렇게 '객체화'시키는 것을 우리가 전부 해줘야하나?!?!
답은 아니다.

객체화는 웹 브라우저가 기본적으로 해준다.

  • Object : 자바스크립트로 제어할 수 있는 무언가 - 객체
  • Object Model : 브라우저의 구성요소들을 객체로 만들어서 제공해주는 것
    테두리와 같은 역할(JS Core, BOM, DOM)
  • window : 창 - '전체의 영역!'
  • Javascript core : 자바스크립트 자체에 정의되어 있는 객체들
  • Browser Object Model : 웹페이지의 내용을 제외한 브라우저의 요소들을 객체화시킨 것이다.
  • Document Object Model : 웹페이지의 내용을 제어한다 - HTML로 이해함

이 정도로 알고 들어가느냐, 모르고 들어가느냐의 차이가 있다고해서 이 정도로 알고 들어간다.


자바스크립트 로드하기

CSS의 방식과 매우 유사하다!!

inline

HTML문서 내에서 작성한다.

<script> 
  blablahblah...
</script>

script

외부 파일로 저장하고, 로드한다.

<script src="경로!"></script>
  • 왜? 스크립트는 하단에 작성할까요?
    -> HTML을 렌더링하다가 script를 만나면 렌더링을 중지하고 script를 먼저 읽어냅니다. 이러한 이유로 끝단에 작성하지 않을까 싶습니다.

변수(Variables)

변수 : 변할 수 있는 정보, 데이터(를 담은공간)

왜인지는 모르겠으나, 내 머릿속엔 변수란 숫자라는 강박관념이 있었다.

오늘부터 변수는 박스이다. 상자다. 공간이다. 주머니다. etc,,,
+) = 는 같다가 아니다... 할당이다... 할당 할당 할당...

변수 선언

엄밀히 let, const, var가 있으나, 지금은 다루지 않는다.

var myname; //카멜이 아니어서 보기 불편하네요
var myName; //위와 다릅니다! 대소문자를 구별합니다.
var my_name; //특수문자는 _, $만 가능합니다!
var 한국어; //이처럼 유니코드문자도 사용할 수 있습니다.
var var; //예약어는 변수로 선언이 불가능합니다. 에러가 납니다.
//예약어란 이미 약속된 단어들입니다. var, function, for, etc,,,
var 2myname; //숫자로 시작할 수 없습니다. 에러가 납니다.
var myname2; // 그렇다고해서 숫자를 못쓰는게 아닙니다. 에러 안나요!

myName = "jayss"; //할당은 이렇게 합니다.

변수의 자료형 - 데이터의 형태

우리는 데이터를 어떻게든 마구잡이로 넣을 수 있지만, 그렇게 넣는 데이터에는 종류(형태)가 있다.

  • number : 숫자를 담는다
  • string : 문자열을 담는다
  • boolean : true, false를 담는다.(참, 거짓)
  • array : 여러 자료형을 한꺼번에 담는다.
  • function : 함수를 담는다.

자료형에 대한 공부는 끝이 없어 보인다


Template Literal

문자열 안에서 변수를 쓰고 싶을 때 사용된다.

var todayLunch = "pasta";
document.write(`오늘의 점심은 : ${todayLunch}`); 

이 때, 따옴표가 아닌 백틱을 이용하면 문자열과 변수를 같이 쓸 수 있다.


끝으로

"xx랑 xx중에 뭐가 더 좋나요???"
"일장일단입니다..."

나 역시 항상 궁금한 부분이기도 했다.
(다 하기 싫고 좋은것만 골라하고 싶으니까)
하지만 이런 질문의 답변은 항상 '장단점이 있다' 였다.
너무 맞는 말이어서 머리가 지끈거리지만, 어쩔 수 없다. 맞으니까!

그러나 둘 중 하나를 잘 공부하다보면, 저절로 장단점을 알게 된다.
이것의 단점을 보완하는 녀석을 찾게된다.
그 녀석을 공부하다보면, 또 장단점이 있다.

(무한루프...)

결론은 하나에 대해서 어느정도 수준까지의 학습이 돌파구라는 것을 느끼게 된다.

profile
😂그냥 직진하는 (예비)개발자

0개의 댓글