서문
온보딩 1주차
조금 두꺼운 책을 2주만에 끝내는 일정이고, 기본부터 다시 잡고 간다는 느낌
책이 오자마자 조금 훑어봤는데 생각보다 내용이 알차서 좋았다
인터넷 강의를 보면서 무언가를 만들면서 코딩을 익히는 것도 물론 정말 좋은 방법이지만
세부적인 내용이나 좀 더 이론적인 내용을 공부할 때는 아무래도
책이나 원서가 좋은 것 같다는 생각을 한다
다른 라이브러리들을 조금이나마 다뤄보면서 느낀게
그냥 자바스크립트를 잘 하면 다 잘할 수 있을 것 같다는점 ?
이번에 공부할 때는 기존에 알고있던 내용이 뼈대가 되어
뼈에 살을 붙혀가는 식으로 궁금했던 내용이나 햇갈렸던 내용을 깊게 알아보려고 한다.
챕터 1 : 자바스크립트의 개요와 환경설정
자바스크립트는 웹 브라우저에서 사용하는 유일한 프로그래밍 언어이다.
이 언어가 웹 브라우저 시장을 장악한 이래로, 대체할 그 어떤 수단도 나오지 못했다.
네이밍을 그 당시 유행하던 자바를 벤치마킹 했지만
자바와 자바스크립트는 인도와 인도네시아 정도의 유사성을 갖고 있다.
이름이 비슷한 전혀 다른 존재라는 뜻.
자바스크립트로는 많은 것을 할 수 있다
초창기의 웹은 하이퍼링크로 서로의 경로를 연결해주는 정도에 불과했다.
자바스크립트가 출시되면서 웹 문서내의 내용을 동적으로 바꾸거나 이벤트의 유기적인 처리가 가능해졌는데,
점점 인터넷 속도가 빨라지면서 더 많은 데이터를 주고받을 수 있게 되어
점점 애플리케이션의 모습을 갖추게 되었다.
현재는 웹 애플리케이션 자체를 만들 수 있다.
MS의 웹 문서작성도구나 크롬 웹 스토어를 떠올리면 되겠다.
웹 서버 애플리케이션조차 만들 수 있다.
초기의 웹은 클라이언트 파트를 자바스크립트로 개발하고
서버 파트를 C, JAVA 등의 언어로 개발했지만
2009년 자바스크립트 엔진 크롬 V8 엔진을 똑 떼와서 만든 Node.js 의 등장으로
서버까지 개발할 수 있게 되었다.
심지어는 모바일 애플리케이션도 만들 수 있다.
안드로이드 앱과 아이폰 앱은 각각 자바/코틀린 혹은 스위프트로만 개발해야 했다.
같은 앱을 플랫폼에 맞추어 전혀 다른 언어로 개발을 해야한다는건 끔찍하다.
자바스크립트로 모바일 애플리케이션을 개발하게 된다면
그러한 손실을 줄일 수 있다. 자바스크립트로 네이티브 애플리케이션을 개발할 수 있는 툴은
리액트 네이티브가 대표적인데 페이스북, 인스타그램 등이 대표적인 리액트 네이티브로
만든 애플리케이션이다.
이제 심지어는 데스크톱 애플리케이션도 만들 수 있다.
개발자들은 한걸음 더 나아가서 데스크톱 애플리케이션도 자바스크립트로 만들기에 이르렀다.
NW.js 모듈 등으로 조금씩 데스크톱 애플리케이션 개발에 활용이 되다가
일렉트론(Electron) 이라는 툴이 개발됐다.
일렉트론을 이용하면 JS, CSS, HTML 로 크로스 플랫폼 데스크톱 앱을 만들 수 있다.
이를 이용한 프로그램에는 디스코드, VScode 등이 있다.
자바스크립트 표준 스타일
자바스크립트 표준 코딩 스타일 혹은 코딩 컨벤션에 정답은 없지만
‘정답에 가깝다’ 라는 식의 스타일은 있으니 가끔 상기시키면 좋을 것 같다.
기본적인 용어
값을 만들어내는 간단한 코드를 ‘표현식’ 이라고 한다.
그 표현식이 둘 이상 모이면 ‘문장’ 이 된다. 문장끼리는 세미콜론으로 구분한다.
이러한 문장들이 모여 하나의 ‘프로그램’을 이룬다.
'문장'의 사전적 의미와는 조금 다른데
프로그래밍에서의 문장은 Statement. 선언이라는 의미를 가진다.
말 그대로
코드의 표현들을 모아 하나의 선언을 이루고, 그 선언들을 모아 하나의 프로그램을 만드는
마법같은 과정이라고 할 수 있겠다.
식별자
변수명, 함수명을 일컬어 식별자라고 한다.
자바스크립트의 식별자는 4가지 금기 조건이 있다.
키워드의 사용, 숫자 시작 금지, 특수문자 불허용(_, $ 예외), 공백 미포함 의 조건이다.
키워드는 자바스크립트 자체에서 정해놓은 특별한 의미가 있는 단어들인데
for, do, await 같은 것이 대표적이다.
식별자의 이름을 짓는건 모든 프로그래밍을 하는 사람들의 공통적인 고충이 아닐 수 없다.
좋은 식별자명은 클린한 코드의 초석이 되고 클린한 코드는 널리 개발자를 이롭게한다.
클린한 코드란 읽기만 해도 무엇인지 이해가 될 뿐만아니라,
이 코드가 어떤 기능을 하는지 누구에게 물어보지 않아도 알 수 있는 코드이다.
이러한 코드가 작동이 잘 되는건 너무나 당연하다.
닌자 코드
절대 하지 말아야 할 코딩습관과
깨끗한 코드를 위한 5가지 팁
가급적 지켜주면 좋은 코딩습관에 관한 내용
요점이라고 한다면
검색이 용이하도록
함수명은 동사로
너무 많은 argument 를 사용하지 않는 것
함수는 단 한가지의 기능만을 직관적으로 수행해야 하는 것
당신만 알아보는 짧은, 축약어를 쓰지 않는 것
처음부터 클린한 코드를 쓰면 좋지만 우선 작동에 신경쓰고 리펙토링으로 깔끔하게 만들 것
주석을 조금 더 맛있게 다는 방법
JSDoc
/**
* 함수의 기능/
* @param {*} name 파라미터
* @returns 어떤 값을 리턴하는지
* @see 해당 코드의 부가정보(참고)
* @version 버전
*/VScode 등의 에디터에서 함수에 주석을 넣을 떄
/** 를 입력하면 사용할 수 있다.
이 함수가 어떤 기능을 하는지 어떤 파라미터를 넣어야하고 어떤 값을 출력하는지
세세하게 종용 해줄 수 있는 기능. 말 그대로 종용이기 때문에 강제성은 없다.
타입스크립트 처럼 엄격하지는 않지만 변수의 타입도 종용해줄 수 있다.
개발 초기에는 수정이 잦기 때문에 타입스크립트의 엄격함이 조금 무겁게 느껴질 수 있어서
JSDoc을 이용하여 개발을 하는 개발자도 있다고 한다.
챕터 2: 자료와 변수
기본 자료형
데이터의 형태
자바스크립트의 primitive 자료형에는
숫자형(number), 문자형(string), 불(boolean) 자료형이 있다.
원시타입이라고도 하는 이 자료형의 특징은 불변의 속성에 있다.
복사할 때 값 그 자체를 복사한다.
오브젝트나 배열과 가장 대비되는 속성.
숫자(number)
숫자형 변환의 방식으로는 두가지 방법이 있는데,
parseInt()
Number()메소드가 대표적이다.
이 둘의 차이는 간단하게 이야기 하자면 유형변환(parseInt)과 구문분석(Number) 이라고 볼 수 있는데,
조금 더 권고되는 숫자형 변환은 parseInt() 이다.
특히 parseInt() 의 두번째 매개변수는 숫자변환 대상이 몇진법으로 이루어졌는지도 명시할 수 있다.
예를들어,
parseInt('32px') // 32
Number('32px') // NaNparseInt 로 32px 같은 문자열을 숫자형변환하면 뒤의 문자열을 버리고 숫자만 출력해준다.
다만 변환하려는 대상의 첫번째 글자가 문자형일경우 NaN 을 리턴한다.
또한 소수부분은 버림하며 0x 로 시작하면 16진법으로 처리한다.
Number.parseInt() 같은 전역 객체 메소드를 사용할 수도 있지만
정말 특수한 경우에나 간혹 사용한다고 한다.
문자형(String)
말 그대로 문자.
String() 키워드로 문자형으로 변환시킬 수 있다.
문자열에 관련된 재미있는 메소드들이 많은데
length 로 문자열의 길이를 측정한다던가,
indexOf, lastIndexOf 메소드로 첫번째 혹은 마지막 인덱스를 반환한다던가 하는 기능들이 있다.
인덱스 라는 단어가 굉장히 재밌는데 문자열은 배열도 아닌데 인덱싱을 할 수 있다.
불 자료형 (Boolean)
참과 거짓을 뜻하는 자료형
주로 참은 1, 거짓은 0에 대응하기도 한다.
여담이지만 불리언 이라는 말은 영국의 수학자 조지 불(George Boole) 에서 유래됐다고 한다.
불 자료형의 표현은 True, False 의 참/거짓 뿐이지만
불 자료형을 만드는 방법에는 정말 수많은 방법이 있다.
그중 대표적인 방법이 비교연산자.
양쪽을 비교하는 방법이다.
그 중 자바스크립트가 타 언어와 가장 다른점은
느슨한 비교와 엄격한 비교의 차이이다.
아래의 예시를 보자
console.log(undefined === null) // false
console.log(undefined == null) // true자바스크립트에서 ===는 비교할 대상의 ‘타입’ 까지 고려해준다.
== 는 대상의 ‘값’ 만 비교해주므로
undefiend와 null 은 값이 ‘비어있다’ 는 사실은 같지만
‘타입 그 자체’ 는 다르므로 false 를 출력해준다.
후기
언제나 기록할 때,
실제로 누군가에게 무언가를 가르친다는 느낌으로 기록한다.
누군가에게 가르친다는건 그 내용을 아주 깊게 이해했다는 반증이 되어주기 때문이다.
그래서 뭘 배워도 풀어서 설명할 수 없다면 기록하지 못하는데,
오늘 일정에 TIL 작성 요령 강의 같은 것을 듣고 조금 더 깊게 생각하게 됐다.
Til 을 어떤 객체로 표현한다면
const 배운 것 = {
내가 에러를 해결한 코드,
문법,
처음 알게 된 기능,
개념 이해,
강의 내용,
새로운 것,
기술적인 부분,
회고
}이런식으로 표현할 수 있을까 ?
사실 TIL, WIL 을 작성하는 것, 그 자체의 의미보다도
매일, 순간을 돌아보는 것. 그리고 그것을 개선하는 것. 그리고 어떻게 바꿀지를 생각해보는 것.
이런게 더 중요한데. 어찌보면 일기와 유사하다.
그런데 언젠가부터는 너무 형식에 얽메이지 않았나 하고 생각이 됐다.
좀 더 얕게 혹은 깊게. 진중하게도, 장난스럽게도 쓸 수 있을 것 같다.
🥰
