서론
마침내 프로그래머스 데브코스에서의 자바스크립트 학습이 시작되었다. 그리고 나는 아직까지 그리드 정리를 마치지 못했다. 앞으로도 마치지 못할 것 같다. 농담이고 이 속도라면 React 학습에 들어갈 즈음이 돼서야 그리드 정리를 마치지 않을까.
그래도 오늘 공부할 내용은 문제의 그리드보다는 양이 적다고 할 수 있다. 오늘은 어제처럼 좀 일찍이 끝낼 수 있지 않을까 싶다.
이번 일자는 자바스크립트 기초다.
강의 목적
자바스크립트 학습의 근본적인 이유...?
1. 유저들의 불만사항을 해결하기 위해 서비스를 만든다.
2. 서비스를 만들기 위해 웹 개발을 배운다
3. 웹을 개발하기 위해 자바스크립트를 배운다!
파트별 학습 내용
[1부] 데이터 처리
- 변수, 형태, 함수, 실행.
[2-1부] 인터렉션(interaction)
- 이벤트 심기(scroll, click, 등등...).
- 브라우저 이해하기.
[2-2부] 새로 만들고 유지보수하기
- 코드를 잘 관리하는 방법.
- 서비스 개발을 위하여 계획하기.
자바스크립트 환경 세팅
자바스크립트 사용에 앞서 실습 환경을 세팅해야 한다. 그런데 MacOS 기준으로 설명한다고 하신다.
맥북 없는 윈도우 유저 살려!!!
IDE(Integrated Development Enironment)
- 설치형
- 비주얼 스튜디오 코드(Visual Studio Code)
- 젯브레인 웹스톰(JetBrains Webstorm)
- 비설치형
- Code Sandbox
- Replit
- Playcode
사실 비주얼 스튜디오 코드는 IDE보다는 텍스트 편집기에는 가깝지만, 요즘은 IDE 대용으로 많이 쓰이고 있다.
그리고 이러한 IDE 중에서 비주얼 스튜디오 코드를 주로 사용할 예정이다.
가볍고 빠르고, 생태계도 잘 구축되어 있고, 심지어 무료이니 말이다.
다만, 필요에 따라 Code Sandbox를 사용할 것 같기도 하다.
이유는 팀원들과 실시간 코드 공유가 필요해질수도 있기 때문이다.
옛날에는 Replit를 주로 썼었는데 서버도 불안정하고 정렬 기능도... 안 좋아진 이후로는 거의 안 쓰는 것 같다.
브라우저
- 크롬
- 사파리
- 오페라
- 마이크로소프트 엣지
등등의 브라우저들이 이 세상에는 존재한다. 이번 실습에서는 크롬 위주로 실습이 이뤄질 예정이다.
Terminal
Terminal은 Mac 전용 프로그램이다... 나 같은 윈도우 유저는 쓸 수가 없다... 😭
그리고 이 강의에서는 iTerm2라는 macOS Terminal의 개선판을 사용할 예정이다.
이것 또한 macOS 유저를 위한 터미널이다.
윈도우 유저는 손가락이나 빨자.
결국, 슬픈 윈도우 유저들은 MS 스토어에서 위와 같은 윈도우 터미널을 설치하여 대신 사용하던지.
아니면 기본 명령프롬프트나 powershell을 쓰던지 하는 법 말고는 없다.
윈도우 유저는 슬프다... (Windows Terminal & Oh My Posh)
그나마 다행인 점은 윈도우 터미널이 나름 쓸만하다는 점이다.
그렇기에 나 같은 경우에는 윈도우 터미널에서 powershell과 우분투를 사용할 예정이다.
좀 뭔가 번거롭지만 그래도 칙칙한 명령프롬프트나 파랑파랑한 기본 powershell보다는 낫지 않을까.
https://omoknooni.tistory.com/44
윈도우 터미널에서의 Oh My Posh 설치는 이 블로그를 참고했다.
일단, 윈도우 터미널을 MS 스토어에서 찾아서 다운로드해 준다.
공식적인 명칭은 Windows Terminal이다.
(윈도우 11은 기본 설치되어 있다고 한다.)
그리고 윈도우 터미널을 다운로드한 다음, 다른 것 하나를 더 설치해 준다.
일명 winget이라고도 불리는 앱 설치 관리자이다.
apt, yum과 비슷한 설치 관리자 시스템이며, 이게 있어야 윈도우 터미널에서 다양한 앱을 설치할 수 있다.
(미리 설치된 경우도 많으니, 미리 설치되어 있다고 걱정하진 말자.)
이제 기본적인 준비는 끝났으니 윈도우 터미널을 실행시켜 준다.
물론 혹시 모르니 마우스 오른쪽 클릭을 하여서 관리자 권한으로 실행시켜 주자.
기존 터미널과 다르게 웹 브라우저와 여러모로 비슷한 모양새라는 것을 바로 알 수 있다.
(상단에 있는 + 버튼을 누르면 탭이 늘어나고, 아래 화살표를 누르면 각종 터미널/쉘 중에서 선택 가능하고...)
일단 Powershell에서 Oh My Posh를 설치해야 한다.
Oh My Posh는 Oh My Zsh와 비슷한 파워셸을 꾸며주는 도구라 할 수 있다.
Oh My Zsh는 리눅스 계열 전용이니 대체제를 찾아서 쓰는 것이라고 보면 된다.
(사실 WSL을 쓰면 설치 자체는 Oh My Zsh도 윈도우에 설치는 가능하다. 귀찮은 일들이 많아서 그렇지...)
- https://ohmyposh.dev/docs/installation/windows
- https://ohmyposh.dev/docs/installation/prompt
- https://ohmyposh.dev/docs/installation/fonts
윈도우 유저들은 여길 참고 하도록 하자.
일단, 파워셸에 다음과 같은 명령어를 적어야 한다.
winget install JanDeDobbeleer.OhMyPosh -s winget
그러면 사용 약관 동의 후 다운로드를 본격적으로 할 수 있다.
아래의 사진처럼 말이다.
다만 여기서 끝은 아니다.
테마를 설정해야 본격적인 사용이 가능하다.
그리고 그전에 잠시 제대로 설치되었는지만 확인해 보자.
oh-my-posh get shell해당 셸 명령어를 입력한다.
그래서 powershell이나 기타 등등의 자신이 사용하고 있는 셸의 디자인 테마가 나온다면 정상 설치된 것이다.
어쨌거나 Oh My Posh 명령어 자체가 작동한다는 뜻이니 말이다.
그렇게 정상 작동이 되면 다음 단계로 넘어가자.
notepad $PROFILE
먼저 해당 명령어를 파워셸에 넣어서 터미널 개인 프로필을 만들어준다.
아마 높은 확률로 프로필이 없다며 새로 만들까?라고 메모장을 띄워서 물을 텐데.
거기서 빈 .ps1 파일을 새로 만들어 적당한 곳에 저장하든지 아니면 다른 방법으로 '취소'를 누르고 나오면 된다.
취소를 눌러 나온 경우에는 아래의 명령어를 쳐준다.
New-Item -Path $PROFILE -Type File -Force프로필을 강제적으로 생성해 주는 명령어이다.
경로는 사용자 Documents 폴더 내부의 'WindowsPowerShell'이라는 폴더 내에 생성된다.
notepad $PROFILE프로필을 만들었으니 다시 한번 더 해당 명령어를 입력한다.
이 과정에서 정상 작동을 한다면 아마 텅 빈 내용물 겸 메모장이 나올 것이다.
일단 메모장을 닫지 말고, 파워셸로 다시 향하자.
oh-my-posh init pwsh | Invoke-Expression그리고 위와 같은 명령어를 입력해 보자.
그러면 갑자기 기존 파워셸 디자인과는 다른 무언가로 바뀌게 된다는 걸 알 수 있다.
이게 바로 Oh My Posh의 기본 테마이다.
물론 뭔가 이상한 면이 적잖긴 하다.
앞뒤로 사각형(글자 깨짐)이 생겨 있는 것으로 보이니 말이다.
이건 순수하게 폰트 문제다.
정확하게는 Oh My Posh는 Nerd 폰트를 주로 사용하는데, 여기에만 포함된 아이콘이 기본 폰트에서 말썽인 것이다.
참고로 지금부터는 관리자 권한이 필요하다.
앞서 관리자 권한으로 실행하지 않은 사람은 윈도우 터미널을 종료 후 관리자 권한으로 다시 실행시켜 주자.
그러면 앞서 설정한 테마 디자인이 초기화되었다는 걸 알 수 있다.
이건 당연한 것이기도 한데, 앞서 입력한 테마 설정 명령어(oh-my-posh init pwsh | Invoke-Expression)를 메모장에 집어넣고 저장해야 테마 설정이 완전 저장이 되기 때문이다.
그래도 테마가 설정되어 있든 안 되어있든 지금은 그게 그거이니 폰트를 어떻게 해결해 보도록 하자.
테마가 풀린 사람은 oh-my-posh init pwsh | Invoke-Expression 명령어를 다시 입력해서, 폰트로 인해 깨진 테마를 임시로 또 불러온 다음 폰트 설치로 넘어가자.
윈도우 터미널을 종료하지 않은 사람은 해당 명령어를 다시 입력하지 말고 아래의 폰트 설치로 바로 넘어가자.
oh-my-posh font install그리고 해당 명령어를 입력해서 폰트를 다운로드할 준비를 하자.
그러면 위의 이미지처럼 폰트를 고를 수 있는 메뉴가 나온다.
키보드 상하 키로 조작할 수 있는데, 이걸 보다 보면 정상적인 너드 폰트가 안 보인다고 할 수도 있다.
그건 당연한 게 리스트에 있는 폰트 전체가 너드 폰트에 '포함'되어 있기 때문이다.
-https://www.nerdfonts.com/font-downloads
너드 폰트 공식 홈페이지와 셸 폰트 리스트를 비교해 보면 대충 알 수 있는 사실이다.
그렇기에 해당 사이트에 들어가서 괜찮아 보이는 폰트 이름을 기억 후 셸 폰트 리스트에서 찾아서 선택하면 된다.
나는 해당 폰트들 중에서 너드 폰트가 포함된 D2Coding를 쓰기로 결심했다.
왜 하필 D2Coding이냐고?
D2Coding은 네이버가 만든 한국어 사용에 특화된 코딩 폰트다.
다른 너드 폰트들은 한국어를 제대로 지원한다는 보장이 없으니 한국어 사용자들은 이걸 쓰는 게 맞지 않나 싶다.
설치가 완료되었다.
물론 설치와 적용은 별개의 문제다.
설정 ▶ 프로필의 기본값 ▶ 추가 설정의 모양 ▶ 글꼴 ▶ 선택한 폰트 찾기 ▶ 저장 버튼 클릭 ▶ 셸로 돌아가서 확인
위와 같은 과정을 진행하도록 하자, 찾기 쉽게 아래에 사진도 추가해 놓았다.
참고로 여기서 선택한 폰트의 전체 명칭은 어딘가에 써두도록 하자. 기억해둬야 할 일이 생길 수도 있기 때문이다.
한글 폰트 적용도 잘 되었고, 디자인도 괜찮다.
사실 공식 홈페이지에서는 'CTRL + SHIFT + ,'로 settings.json을 수정하라고 되어 있는데 너무 귀찮아서 이렇게 했다.
이제 해야 할 일은 이러한 테마가 풀리지 않도록 저장해 주는 일이다.
그리고 어떤 테마를 먼저 사용할 것인지 조금 고민을 하고 저장하도록 하자.
Get-PoshThemes위와 같은 Get-PoshThemes로 셸 내에서 다양한 테마를 확인할 수 있다.
물론 셸 말고도 공식 문서에서도 확인할 수 있다.
- https://ohmyposh.dev/docs/themes
어디가 되었든 간에 마음에 드는 테마를 찾아서 골라주자.
그런 다음 해당 테마의 이름을 어딘가에 기록해 놓자.
나 같은 경우에는 kushal 테마를 택했다.
이제 테마를 골랐으니 프로필 설정을 저장할 준비를 하자.
notepad $PROFILE다시 입력해서 프로필 ps1 파일을 켜주자.
이미 켜져 있으면 켜져 있는 걸 그대로 사용한다.
oh-my-posh init pwsh --config "$env:POSH_THEMES_PATH/자기테마이름.omp.json" | Invoke-Expression그리고 텅 빈 메모장에 위와 같은 내용을 적어준다.
'자기테마이름'이라고 된 곳에는 본인이 선택한 테마 명칭을 넣어주자.
참고로 기본 경로 설정은 안 해도 되냐고 할 수도 있는데.
앱 설치 관리자로 설치 시 환경 변수에 기본 경로(POSH_THEMES_PATH)가 알아서 추가된다.
다만, 다른 방법으로 설치하거나.
불운한 경우에는 설치 중 환경 변수 설정이 이뤄지지 않았을 수도 있다.
이때는 'C:\Users\사용자이름\AppData\Local\Programs\oh-my-posh\themes'의 경로를 직접 'POSH_THEMES_PATH' 부분에 써주거나.
환경 변수에 POSH_THEMES_PATH를 직접 추가 후 거기에 테마 경로인 'C:\Users\사용자이름\AppData\Local\Programs\oh-my-posh\themes'를 집어넣어 줘야 한다.
(물론 이런 경우에는 사용자이름은 본인 것에 맞추어서 써주도록 하자.)
어쨌거나 경로와 설정을 완료했으면 메모장을 저장한다.
그리고 셸로 돌아와서 아래의 명령어를 입력해 주도록 하자.
. $PROFILE
일단 오류가 날 수도 있고 안 날 수도 있기는 한데, 어쨌거나 적용되었으면 된 거다.
나 같은 경우에는 실험 삼아 . $PROFILE 명령어를 일찍 써봤었는데, 그것 때문에 아마 오류가 난 게 아닌가 싶다.
어쨌든 이제 윈도우 터미널을 종료했다가 켜도 테마가 유지되는 모습을 볼 수 있다.
이제 보다 더 깔끔한 디자인의 프롬프트를 즐겨보도록 하자.
Oh My Posh 주의사항
안타깝게도 Oh My Posh는 윈도우 프롬프트만 적용되는 것이 아니다.
같은 시스템을 사용하는 비주얼 스튜디오 코드 등의 터미널에도 적용이 된다.
이런 경우에는 터미널의 폰트를 바꿔줘야 정상적인 테마로 돌아온다.
일단, 나는 비주얼 스튜디오 코드를 사용하니 해당 IDE(?) 기준으로 설명하겠다.
'Ctrl + ,(쉼표)'를 눌러서 비주얼 스튜디오 코드의 설정으로 들어간다. 그리고 아래와 같은 과정을 거친다.
검색창에 font로 입력 ▶ 사용자(User) ▶ 기능(Features) ▶ 터미널(Terminal) ▶ Font Family
여기서 Font Family는 앞서 사용했던 Nerd Font를 입력해 주면 된다.
이 문제 때문에 어딘가에 자신이 사용한 Nerd Font 이름을 어딘가에 써두라고 했던 것이다.
만약 안 써둔 경우에는 윈도우 터미널의 설정으로 돌아가 폰트 전체 명칭을 다시 확인하도록 하자.
그리고 폰트 명칭은 따옴표로 가능한 한 감싸주자.
감싸지 않아도 적용은 되는데 띄어쓰기가 있는 경우에는 혹시 어떻게 될지 모르니 말이다.
이걸로 Oh My Posh는 끝이다!
사실 이외에도 zsh 플러그인 같은 걸 Oh My Posh에도 적용시킬 수 있지 않나 싶었으나, 그건 아무래도 힘든 것 같다.
그래도 일부는 터미널에서 제공하고 나머지는 노가다로 때우면 되니 큰 문제는 없을 것 같다.
브라우저 개발자 도구
브라우저에서는 개발자들을 위한 도구를 제공한다.
F12 키 혹은 Ctrl + Shift + i를 누르면 확인할 수 있으며, 해당 도구는 여러 탭(메뉴)으로 나뉜다.
- 요소(Elements): 로드된 파일의 소스를 봄.
- 콘솔(Console): 자바스크립트를 실행시킬 수 있음.
- 소스(Sources): 현재 브라우저에 로딩된 모든 소스 코드를 확인 가능.
- 네트워크(Network): 네트워크 통신이 일어났을 때 네트워크 통신 로그를 볼 수 있음.
- 퍼포먼스(Performance): 웹의 성능을 확인 가능.
- 메모리(Memory): 메모리 누수 등을 확인할 수 있음.
- 어플리케이션(Application): 브라우저의 저장 기능을 확인할 수 있음.
이외에도 보안, 감사, 추가 기능 등의 기능들을 살펴볼 수 있다.
브라우저 디버깅
이슈: 개발 중에 발생하는 예기치 않은 상황 (버그 혹은 에러라고 불리기도 함)
디버깅: 이러한 이슈를 분석 및 해결해 나가는 과정.
이러한 디버깅을 웹에서 수행하는 방법은 총 2가지라고 할 수 있다.
- 코드 내에 log 함수 심어놓기 (console.log, console.dir, console.table 등)
- 개발자도구의 소스 탭 활용하기.
물론 어느 게 뛰어나다고는 할 수 없다. 프론트트엔드, 백엔드 각기 다른 상황 및 각기 다른 코드마다 쓰이는 경우가 다르기 때문이다.
console.log
console.dir("냠냠")
가장 기본적인 콘솔 로그 함수이다. 주어진 인자를 출력한다.
console.dir
console.dir(document)
객체를 출력하는 콘솔 함수로, 주입된 값과 속성을 확인할 때 유용하다.
console.table
let people = [
["A인", "B인"],
["C인", "D인"],
["F인", "E인"],
];
console.table(people);
표 형식의 데이터를 테이블 로그로 표현해 준다.
색인과 값을 테이블로 표한하기에 컬렉션 데이터를 확인하는 용도로 적합하다.
console.info
console.info("정보 콘솔");
콘솔에 정보 메시지를 출력한다.
console.debug
console.debug("디버그 콘솔");
console.log와 거의 비슷한 메소드이다. 다만 차이가 있다면 콘솔 내 수준에서 '상세'를 체크해줘야 나온다는 점이다. 이를 통해 일부 상세한 정보만을 debug로 편하게 빼내서 볼 수 있다.
console.warn
console.warn("경고 콘솔");
오류까지는 아니지만, 경고할 만한 것을 알리는 콘솔 메소드이다.
console.error
console.error("에러 콘솔");
에러 메시지를 콘솔에 띄울 수 있는 메소드이다.
console.group 및 console.groupEnd
console.group();
console.log('로그 그룹 시작');
console.log('헬로헬로헬로');
console.log('로그 그룹 끝 직전');
console.groupEnd();
로그를 그룹 단위로 묶어주는 메소드이다. 콘솔창 분류 및 관리에 유용하다.
console.clear
console.log("콘솔콘솔");
console.log("콘솔콘솔");
console.log("콘솔콘솔");
console.clear();
콘솔에 기록된 내용을 전부 삭제한다.
console.count 및 console.countReset
let edits = "normal log";
function calls() {
console.count();
console.log("Call-Edit Count = " + edits);
}
calls();
calls();
calls();
calls();
calls();
console.count();
calls();
edits = "reset log";
console.countReset();
calls();
calls();
console.count는 특정 콘솔 호출의 횟수를 세어서 알려준다.
console.countReset는 console.count를 통해 카운팅 된 횟수를 초기화한다.
앞으로 카운팅 할 일이 있으면 이걸 쓰면 될 것 같다.
코드 스니펫(코드 조각)
코드 스니펫은 코드 조각. 즉, 코드의 일부분을 뜻한다. 그리고 이는 코드를 빠르게 재사용할 수 있도록 도와주는 편의성 기능 중 하나이다.
즉, 일종의 커스텀 자유도가 높은 메크로에 가까운 기능이라고 볼 수 있다.
코드 스니펫을 생성하려면 먼저 코드 조각을 만들어야 한다.
파일(File)-기본 설정(FPreferences)-사용자 코드 조각 구성(Configure User Snippets)으로 들어간다.
그러면 이와 같은 다양한 옵션들이 나오는데, 여기서 코드 스니펫은 총 3종류로 나눌 수 있다.
1. 새 전역 코드 조각 파일
- 언어, 위치와 상관없는 전역 코드 조각을 만드는 용도이다.
2. '폴더명'에 대한 새 코드 조각 파일
- 해당 폴더 내부에서만 작동하는 코드 조각을 만드는 용도이다.
3. 언어별 코드 조각 파일
- 해당 언어에서만 작동하는 코드 조각 파일이다.
자칫 javascript 코드 조각을 python 같은 곳에서 쓸 수도 있기에, 자신의 상황에 따라 맞추어서 쓰는 것이 현명하다.
그리고 나 같은 경우에는 javascript에만 한정된 코드 조각을 생성했다.
그러면 간략한 사용법을 안내해 주는 주석이 나온다.
사용법은 간단하다.
- Print to console: 코드 조각 명칭을 선언.
- prefix: 코드 조각을 불러올 때 사용할 단축형 명령어.
- body: 불러오고 싶은 코드 조각을 작성한다. 자체적인 스니펫 문법이 존재하니 해당 문법을 다소 주의해야 한다.
- description: 코드 조각을 prefix 명령어를 입력해서 불러오기 직전일 때, 인텔리센스에 나타나는 해당 코드 조각에 대한 정보이다.
해당 사용법을 참고하면 다음과 같은 코드 조각을 만들어낼 수도 있다.
"Print to console": {
"prefix": "clog",
"body": [
"console.log('$1' + $2);",
"$3"
],
"description": "Log output to console"
}
다만, 이러한 코드 조각과 별개로 당장 내 수준에서는 큰 의미가 없다고 생각하고 있기도 하다.
애당초 코드를 전부 치지 않으면 실력도 별로 늘지 않는 데다가 이미 사용자들이 코드 조각 모음을 만들어둔 것이 있기 때문이다.
다음 확장프로그램을 마켓 플레이스에서 다운로드하면 다양한 코드 조각을 만나볼 수 있다.
또한, 이러한 코드 조각은 Github Copilot 등의 AI가 나온 뒤로 점차 하향세에 접어든 느낌이다.
당장 해당 코드 조각 확장프로그램만 해도 마지막 업데이트가 2020년이다.
그래도 개인적인 설정으로는 몇 개 정도 만들어 둘 법도 한 것 같다.
코드 조각에 대한 더 자세한 내용은 비주얼 스튜디오 코드 공식 홈페이지를 참고하도록 하자.
자바스크립트 언어의 특징
컴파일러와 인터프리터 언어
- 컴파일러 언어
- 사람이 코드를 작성한다.
- 기계어로 변환한다.
- 기계에서 실행한다.
- 인터프리터 언어
- 사람이 코드를 작성한다.
- 기계에서 실행한다.
- 변환하며 진행한다.
그리고 자바스크립트는 인터프리터 언어에 속한다.
컴파일 단계가 없고, 컴파일러 언어에 비해 실행 속도가 상당히 느린 편이다.
다만, 최근 나온 자바스크립트 엔진인 V8 엔진부터 컴파일 과정이 추가되어 속도 개선이 어느 정도 이루어졌다.
(그리고 V8 엔진은 구글 및 크롬 진영에서 주로 사용하는 C++ 작성 엔진이다. 모질라 파이어폭스는 V8 대신 SpiderMonkey라는 엔진을 사용한다.)
동적 타입 언어
프로그래밍 언어는 타입에 따라 정적 타입과 동적 타입으로 나뉜다.
여기서 말하는 타입은 타입(int, float, short, long, bool, char 등)을 말하는 것이다.
정적 타입 언어
class Main {
public static void main(String[] args) {
int i = 100;
String s = "Java";
System.out.println(i); // print 100
System.out.println(s); // print Java
}
}프로그래머가 코드를 보고 타입을 결정하는 언어이다.
당연하게도 자료형에 맞지 않는 값이 들어가면 런타임 오류가 발생한다.
또한, 이러한 오류가 발생하기에 타입 에러에 대한 문제점을 빠르게 발견할 수 있다.
변수 및 타입의 안정성이 확보되며, 가독성도 훌륭하며, 미리 타입을 결정하기에 실행 속도도 빠르다.
다만, 번거롭다는 단점 아닌 단점이 있다.
해단 언어로는 C, C++, Java, C#, Scala 등이 있다.
동적 타입 언어
let i = 100;
let s = "JS";
console.log(i); // print 100
console.log(s); // print 'JS'동적타입 언어는 코드를 실행할 때 타입이 알아서 추론되어 결정되는 언어이다.
런타임 과정에 타입이 결정되므로, 명시적인 타입 선언은 필요가 없다.
당연하지만, 유연하고 빠른 코드 작성이 가능하다.
그리고 유연하고 빠른 코드 작성이 가능한 만큼 수많은 단점이 존재한다.
예상치 못한 자료형으로 인한 타입 에러, 코드가 길어질 경우 찾기 힘든 타입 에러 등...
해당 언어로는 JavaScript, Ruby, Python 등이 있다.
일급 객체
다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다.
- 함수는 일급 객체의 특징을 가진다.
- 함수는 객체와 동일하게 사용할 수 있다.
- 함수는 값과 동일하게 취급한다.
- 변수 할당문
- 객체 프로퍼티 값
- 배열의 요소
- 함수 호출의 인수
- 함수 반환문
번외로 일급 함수라는 단어 또한 존재한다.
프로토타입 기반의 상속
언어가 갖고 있는 프로토타입 체이닝 구조를 통하여 상속이 가능하다.
패러다임 지원
프로그래밍 패러다임은 코드를 작성할 때 어떤 관점을 가지고 짜느냐를 다루는 개발 방법론이다.
- 명령형 프로그래밍(IP; Imperative Programming )
- 함수형 프로그래밍(FP; Functional Programming )
- 객체지향 프로그래밍(OOP; Object-Oriented Programming)
절차지향, 반응형 등 이외의 패러다임도 존재한다.
자바스크립트 표준화
가까운 옛날, 자사 소프트웨어 사용의 점유율을 높이기 위해 개발사들은 브라우저마다 동작하는 기능을 경쟁적으로 집어넣었었다.
이러한 일의 대표적인 주자는 윈도우에 인터넷 익스플로러를 끼워 넣던 MS의 JScript(JavaScript lookalike), 모자이크에서 이어지는 브라우저인 넷스케이프 측의 JavaScript(LiveScript)가 있었다.
그리고 너무나 당연하게도 두 개발사의 과잉 경쟁 과정에서 같은 파일인데, 서로 다른 브라우저에서는 작동을 안 하는 현상(크로스 브라우징 이슈)가 발생하기 시작했다.
두 개발사의 경쟁이 MS에게 기우는 가운데.
결국, 1996년 모든 브라우저에서 자바스크립트에 대한 표준화가 진행되었다.
1997년 ECMA 총회 당시 표준화 기술 규격 ECMA-262가 채택되면서.
이후, 해당 기술 규격으로 정의된 스크립트 언어를 ECMAScript라고 부르게 된다.
이러한 표준 기술 규격은 TC39 Committee가 관리한다.
참고로 자바스크립트 버전을 보통 ECMAScript 2015, ES2011, ES6 등으로 부르는 경우가 많은데, 여기서 ES가 바로 ECMAScript의 약어이다.
ECMAScript의 버전 표기법은 다음과 같다.
- ECMAScript 연도 - ECMAScript2015
- ES연도 - ES2022
- ES판 - ES6
참고로 ES4 버전은 제안은 되었는데 정치적인 차이로 인해 버려졌다.
언어가 어마어마하게 복잡해질 정도의 급진적인 개선이 있었고, 이후 일부만 수용된 채 ES5가 나오게 된다.
ECMAScript2015 (6판)
현재 근간이 되는 ECMAScript2015. 즉, ES6판은 ES5와는 달라진 내용을 보여준다.
이러한 5판은 2009년부터 개발이 진행되었다.
목표는 대규모 어플리케이션, 라이브러리 생성, 다른 언어의 컴파일 등에 사용할 수 있도록 토대를 제공하는 것이었다.
그리고 개선 사항으로 모듈, 클래스 선언, 블록레벨 스코프, iterator와 generator, 비동기 프로그래밍, promise, 구조분해 패턴 등의 개선이 이뤄졌다.
브라우저 버전
브라우저는 브라우저의 버전마다 지원하는 자바스크립트 스펙이 다르다.
이는 기능이 정체된 구형 브라우저와 새로이 업데이트되는 신형 브라우저의 차이라고 할 수 있다.
특정 브라우저에서 지원을 하지 않는 경우를 확인하기 위해 Caniuse 서비스를 사용한다.
그리고 이러한 서비스에서 버전 간 기능 차이가 확인된 경우, 조금 다른 수단을 통해 구형 브라우저에서 해당 기능을 지원한다. 대표적으로는 polyfill과 Babel이 있다.
polyfill
지원하지 않는 브라우저에서 최신 기능을 제공하기 위해 필요한 코드이다.
폴리필은 브라우저가 다른 방식으로 동일한 기능을 구현하는 문제를 해결하는 데 사용한다.
Babel
이전 버전의 브라우저에서 ES6 이전 버전의 JavaScript로 변환하는 데 사용되는 도구이다.
문법을 번역 및 변환해 주며, 폴리필 기능을 제공한다.
사족
분명 따라 쓰는 것에 가깝고 내가 조사한 내용은 그리 많지 않은데, 정작 다음 날 새벽 3시 30분이 되서야 끝났다. 생각보다 오래 걸린 느낌이다. 일단 오늘 내로 9일 차 분량까지 쓰는 게 목적이었는데... 이러면 9일 차는 내일 중으로 올라가지 않을까 싶다.
그래도 시간 소모가 크지만, 이런 식으로 적어둬야 덜 잊어먹고, 추후 찾기에 편하다. 이런 식으로 TIL을 쓰는 것이 시간이 걸려도 무의미하거나 학습 효과가 덜한 것 같지는 않다. 아마 이 기조는 앞으로도 계속 유지되지 않을까 싶다.
아무튼 이번 주말에는 아직 쓰지 못한 9일 차와 그리드를 작성할 생각이다.
제발 이번 주에 다 끝내야 다음 주가 편해질 텐데, 주말이라고 놀지 말고 열심히 해야 할 것... 😵 같다... 🔥🔥🔥
'💻 종합 개발 주제 > 📚 웹앱 데브코스' 카테고리의 다른 글
| 10일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (4) | 2024.01.09 |
|---|---|
| 9일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (6) | 2024.01.09 |
| 7일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.05 |
| 6일차 데브코스 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.04 |
| 5일차 데브코스 pt.2 - 클라우딩 어플리케이션 엔지니어링 TIL (2) | 2024.01.03 |
