스크립트언어 & 컴파일언어
본격적인 '언어공부'에 앞서서 언어의 두 가지 종류를 알고가자.
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중에 뭐가 더 좋나요???"
"일장일단입니다..."
나 역시 항상 궁금한 부분이기도 했다.
(다 하기 싫고 좋은것만 골라하고 싶으니까)
하지만 이런 질문의 답변은 항상 '장단점이 있다' 였다.
너무 맞는 말이어서 머리가 지끈거리지만, 어쩔 수 없다. 맞으니까!
그러나 둘 중 하나를 잘 공부하다보면, 저절로 장단점을 알게 된다.
이것의 단점을 보완하는 녀석을 찾게된다.
그 녀석을 공부하다보면, 또 장단점이 있다.
(무한루프...)
결론은 하나에 대해서 어느정도 수준까지의 학습이 돌파구라는 것을 느끼게 된다.
