멋쟁이사자처럼 프론트엔드 부트캠프 14기 - Day 31 (프로그래밍, JavaScript 에코 시스템, JavaScript 시작하기)

 

 

목차

• 프로그래밍
• JavaScript 에코 시스템(생태계)
• JavaScript 시작하기
• 오늘 하루를 돌아보며

 

 

프로그래밍

프로그래밍 언어

프로그래밍 언어는 사람이 컴퓨터와 소통할 수 있는 방식이다. 이런 방식 중 하나가 JavaScript다. 사람이 컴퓨터에게 명령을 내리는 방법에는 특별한 규칙과 명령이 있다.

• 머신 코드(Machine Code): 기계 언어라고도 부르며, 컴퓨터가 직접 알아들을 수 있는 유일한 언어다. 0과 1로 구성되어 있다.
• 프로세서(Processor): 작은 칩(Chip)으로 사람이 컴퓨터에게 명령하는 것들을 처리한다. 머신 언어를 처리하는 컴퓨터의 두뇌라고 볼 수 있다. 무언가를 입력(input) 받고, 출력(output)한다.
• 저수준 언어(Low Level Language): 컴퓨터에 더 가까운 언어다. 머신 코드보다는 조금 더 사람이 이해할 수 있지만 여전히 어렵고 명령어가 많이 필요하다. 어셈블리(Assembly) 언어는 머신 코드에 가장 가까운 저수준 언어다.
• 고수준 언어(High Level Language): 사람이 이해하기 쉽고 사용하기 용이한 언어다. 머신 코드에 비해 느리지만 성능 이슈가 체감될 정도는 아니다. 고수준 언어를 머신 코드로 변경하는 컴파일러나 트랜스파일러의 성능이 강력해졌기 때문이다.
• 컴파일(Compiling): 프로그래밍 언어를 머신 코드로 변환(compile)하는 과정이다.

	컴파일러(Compiler)	인터프리터(Interpreter)
작동 방식	전체 코드를 한꺼번에 변환하여 실행 파일 생성	코드를 한 줄씩 읽고 바로 실행
실행 속도	빠름(변환은 느려도 실행은 빠름)	느림(매번 변환하면서 실행하기 때문)
에러 처리	코드를 다 변환한 뒤에 에러를 알려줌	한 줄씩 실행하다가 에러가 나면 바로 멈춤
출력 결과	실행 가능한 파일(.exe, .app 등) 생성	별도의 실행 파일 없음
반복 실행	빠름(이미 변환이 완료된 파일을 실행)	느림(매번 새로 해석하기 때문)
개발 환경	덜 편리함(전체 코드를 다시 컴파일해야 함)	편리함(바로바로 실행해서 결과를 확인할 수 있음)

 

 

프로그래밍

프로그래밍은 컴퓨터에 알려주는 일련의 명령어 모음이다. 이런 명령들을 프로그래밍 구문(Syntax, 문법)이라고 한다. 컴퓨터는 정확한 문법을 사용해서 말해야 한다. 프로세서에게 무엇을 해야 하는지 지시할 때는 명확하고 자세한 내용이 담긴 프로그램에 의존해야 한다.

 

대부분의 프로그래밍 언어는 코드를 위에서 아래로 순차적으로 읽기 때문에 (이를 순차 실행 sequential execution)이라고 한다.) 코드의 순서가 중요하다.

 

프로그래밍의 원칙 중 GIGO(Garbage In, Garbage Out)라는 말이 있다. 쓰레기를 던지면, 쓰레기를 뱉는다는 의미로, 잘못된 입력을 제공하면 의미 없는 출력이 나올 것이라는 뜻이다. 컴퓨터는 주어진 정보만 가지고 판단하기 때문에 정확한 자료를 제시해야 한다.

 

 

JavaScript 에코 시스템(생태계)

JavaScript는 원래 프론트엔드 개발에서만 작동했었지만, 지금은 백엔드 개발에도 사용되고 있다. 프론트엔드 JavaScript는 Web API라고 통칭되는 함수 집합을 통해 웹 브라우저와 상호작용한다.

 

프론트엔드 JavaScript 세계에는 라이브러리, 프레임워크, 플러그인이라는 세 가지 주요 코드 리소스가 있다.

• 라이브러리(Library): 웹에서 상상할 수 있는 거의 모든 것을 수행할 수 있는 작은 코드 모음
• 프레임워크(Framework): 특정 방식으로 JavaScript를 작성해야 하는 거대한 코드 블록. 웹 애플리케이션을 구축하는 데 자주 사용된다.
• 플러그인(Plugin): 라이브러리나 프레임워크에 추가 기능을 제공하는 코드 블록. 특정 라이브러리나 프레임워크 없이는 작동할 수 없다.

 

 

JavaScript 시작하기

전 세계 개발자들이 가장 많이 사용하는 크로스 플랫폼 인터프리터 언어다. 웹 사이트, 웹 애플리케이션, 모바일 앱 등을 개발하는 데 사용되는 공용 프로그래밍 언어다.

 

HTML 문서에 <script> 태그를 추가하여 JavaScript 코드를 작성할 수 있지만, 이렇게 코드를 작성하는 것보다는 .js 확장자가 있는 별도 파일에 작성하는 것이 더 좋다. JavaScript 파일을 연결하려면 <script> 태그에 src 속성을 사용하여 속성 값으로 파일의 절대/상대 경로를 할당한다. type 속성은 module로 할당하여 2015년 이후 사용 가능한 코드라고 명시하여 다르게 해석하도록 한다.

<script type="module" src="./main.js"></script>

 

 

JavaScript 코드를 콘솔에 직접 작성하여 JavaScript 코드에서 무슨 일이 일어나고 있는지 확인할 수 있다. 콘솔은 오류를 확인(디버깅)하고 제거하는 데 사용할 수 있는 유용한 도구다. 웹 브라우저마다 자체적으로 콘솔을 포함하고 있고, 디버깅에 가장 적합한 브라우저는 Chrome이다. 개발자 도구의 Console 탭에서 사용할 수 있다.

 

콘솔에 직접 JavaScript 코드를 작성(Expression, 표현식)하여 입력하면, 평가(Evaluate)돼서 값(Value)을 출력한다. 하지만 잘못된 코드를 입력하면 오류가 발생한다. 콘솔 패널에서 발생하는 모든 오류에는 의미가 있다. 오류를 통해 디버깅하고 문제를 바로잡을 수 있다.

 

 

오늘 하루를 돌아보며

드디어 JavaScript 수업 첫 날이 왔다! 오늘부터 야무 쌤의 JavaScript 강의를 듣는다. 오늘은 JavaScript를 시작 전에 boiler plate(예열)를 위해 개념 소개를 먼저 들었다. 방대한 양에 압도된 느낌도 들고 조금 지루하기도 했지만, 내가 배울 언어가 어떤 언어인지 알아갈 수 있어서 좋았다.

 

사실 컴공 전공인데도 JavaScript랑 Java랑 같은 건 줄 알았다. 오늘 아침에 예습을 좀 해볼까 싶어서 찾아보다가 두 개가 전혀 다른 언어라는 것을 알게 됐다. JavaScript라는 이름은 Java와 비슷해 보이게 마케팅을 위해 붙여진 이름이다. 표범과 바다 표범이 둘 다 표범이라는 말이 들어있다고 둘이 같은 동물이라고 할 수 없는 것과 같이 JavaScript와 Java가 다르다는 것을 배웠다.

 

오늘 야무 쌤에게 배운 가장 큰 것은 "눈코딩, 입코딩은 기억에 하나도 안 남는다. 손으로 직접 작성해봐야 한다!"는 것이다. 그리고 "배운 내용은 미루지 말고, 그 날 그날 정리하자! 최고의 스승은 반복이다! 최소 2번 이상!!"이다. 앞으로 수업을 들으면서 그 날 그날 배운 것들을 바로 정리하고, 눈코딩이나 입코딩이 아닌 손코딩을 해봐야겠다. 자꾸 펴보고 싶은 귀여운 노트를 사러 나가야겠다!