콘솔 게임들 중에 게임 플레이어들이 `모드`라는 것을 설치해 게임 자체를 커스텀 마이징하여 즐길 수 있는 컨텐츠가 있다. 이러한 게임은 모드가 하나도 설치가 되어 있지 않은 원본을 `바닐라` 혹은 `바닐라 모드`라고 한다. 문득 자바스크립트도 리액트와 같은 라이브러리 뷰 앵글러와 같은 프레임워크를 제외한 오리지날 자바스크립트를 바닐라 자바스크립트라고 하는데 왜 `바닐라`일까 궁금해졌다. 그래서 한 포스트의 글에서 유래를 알게 되었다. 왜 바닐라라고 사용하는지 굳이 알지 않아도 대충 original 또는 default의 뜻임을 짐작할 수 있다. 바닐라하면 떠오르는게 바닐라 아이스크림이다. 바닐라의 유래는 바닐라 아이스크림과 연관이 있다고 한다. 보통 사람들은 아이스크림의 기본 맛을 "바닐라"라고 생각하기 ..
💫오늘의 깨달음 이번 리액트에 대해 복습하던 중 SPA에 대해 미처 알지 못했던 단점들과 JSX에 대해 기록해보고자 한다. SPA의 단점 1. 자바스크립트 파일의 크기가 크다. 애플리케이션의 규모가 커지면 초기에 로딩해야 하는 자바스크립트나 CSS 번들 파일의 용량이 증가한다. 번들 파일의 용량 증가는 애플리케이션의 초기 로딩 성능 저하의 원인이 된다. 이러한 단점을 보완하기 위해 `트리 쉐이킹`, `코드 스플리팅`과 같은 기법을 사용해 번들 파일 용량을 줄일 수 있다고 한다.나의 경우에는 리액트에서 css를 정의할 때 `styled-component`보다 `CSS in CSS` 방식인 `CSS module` 방식을 더 선호했다. 개인적으로 css는 css 파일에 정리되어 있어야 뭔가 마음이 편하고 가독..
💫오늘의 깨달음 1. 자바스크립트 sort() 자바스크립트의 sort() 메서드는 "퀵 정렬"로 구현되어 있는줄 알았는데, V8 엔진에서는 "삽입 정렬"과 "합병 정렬"을 결합하여 만든 정렬 알고리즘인 "Tim sort"로 구현되어 있다고 한다. 그리고 브라우저마다 sort() 구현의 알고리즘이 다르다고 한다. 파이어폭스의 경우 "합병 정렬"을 사용한다고 한다. sort() 메서드를 사용할 때 전달인자인 compareFunc()을 제공해도 되고 안해도 되는데, 비교함수를 제공하지 않을 경우 요소를 자동으로 ASCII 문자를 기준으로 오름차순 정렬한다. 즉, "[1, 4, 3, 10, 2, 5]"의 배열을 오름차순으로 정렬할 때 비교함수를 제공하지 않을 경우 "[1, 10, 2, 3, 4, 5]" 순으로 ..
일반적으로 한글은 동일한 높이와 크기를 갖는다. 하지만 알파벳의 경우 가로의 폭이 다르고 높낮이가 다른 글자로 이뤄져 있다. 워드 프로세서에서 보면 과 가 있는데, 전자의 경우 가변길이 폰트이고 후자의 경우 고정길이의 폰트이다. 일반적으로 폰트는 가변길이여야 가독성에 좋다고 한다. 반면 프로그래밍 작업에서 고정길이 폰트를 사용하는 것이 코드의 가독성을 높여준다. 그 이유는 터미널에서 고정폭 폰트로 코딩을 하던 관습의 영향과 들여쓰기를 자주하는 코딩 작업의 특성 상 고정폭 길이의 폰트가 가독성을 높여준다고 한다. 대표적인 폰트 Noto Mono Roboto Consolas D2 Coding Font 등 [참고 사이트] https://m.blog.naver.com/PostView.naver?isHttpsRe..
💫오늘의 깨달음 1. 윈도우와 맥 협업하면서 생기는 문제 운영체제마다 에디터에서 개행을 할 때 들어가는 문자열이 다르다는 것을 알게 되었다. 이러한 문제 때문에 jest에서 테스트 케이스가 통과되지 않았다... 윈도우의 경우 text \r\\n carrage return과 line feed가 동시에 들어간다. (CRLF) 반면, 맥의 경우 text \\n line feed 하나만 들어간다.(LF) 이러한 차이점 때문에 jest에서의 테스트 환경 혹은 git에서 협업할 때 문제가 발생할 수 있다. [참고 사이트] https://velog.io/@yeonnex/git-%EC%9C%88%EB%8F%84%EC%9A%B0%EC%99%80-%EB%A7%A5%EC%9D%98-%EA%B0%9C%ED%96%89%EB%A..
💫오늘의 깨달음 1.addEventListener vs onclick 브라우저 호환성 addEventListener는 IE 6,7,8 에서는 호환되지 않는다. addEventListener 호환성 확인 버블링, 캡쳐링 설정 가능 여부 addEventListener는 3번 째 파라미터로 버블링, 캡쳐링 동작 여부를 설정할 수 있다. 3번째 파라미터 type을 true로 설정하면 버블링, false로 설정하면 캡쳐링 (default는 false) 이벤트 중첩 onclick 등과 같은 메서드의 경우 하나의 이벤트만 등록이 가능하다. 반대로 addEventListener의 경우 여러 이벤트를 등록 가능하다. 참고사이트 2. localStorage와 sessionStorage 웹 스토리지 객체 localStora..
💫오늘의 깨달음 오늘 git에 대해 몰랐던 부분이 있었다. 1. git remote add git remote add origin 을 사용하며 원격 레포지토리의 주소를 등록했다. origin이 무엇을 의미하는지 크게 신경쓰지 않고 그냥 외우듯 사용해 왔는데 여기서 origin은 을 대신할 이름을 뜻하는 거였다. 코드로 치면 alias 개념. 2. 최근 commit 1개만 취소 git reset HEAD^ 3. git remote -v 연결된 리모트의 주소 목록과 주소를 보여준다. 4. git pull / git fetch pull 명령어는 원격 저장소의 정보를 가져오면서 자동으로 로컬 브랜치에 병합(Merge)까지 수행해주는 명령어이다. 반대로 fetch는 원격 저장소의 메타 정보를 확인 후 변경된 내용..
💫오늘의 깨달음 div 엘리먼트를 생성하였지만 변수에 할당하지 않았을 때? HTML DOM을 다루는 부분에서 div 엘리먼트를 생성했지만 변수에 할당하지 않은 경우 append 하기 전 메모리에 저장되어 있다가 append 하는 순간 부모 요소의 자식 요소로 추가된다. append를 통해 DOM Tree 요소에 추가되지 않았다면 가비지 컬렉터에 의해 삭제된다. 내가 모르는 this this를 단지 실행하는 주체를 가리킨다고 생각해왔다. 코어 자바스크립트 책에서 this에 대해 생각보다 알지 못한 내용들이 많았다. 우선, 자바스크립트 엔진은 '전역변수를 선언하면 이를 전역객체의 프로퍼티로 할당한다'전역 공간에서는 var로 변수를 선언하는 대신 window의 프로퍼티에 직접 할당하더라도 결과적..