https://jsisweird.com/ JS is weirdA fun and tricky JavaScript quizjsisweird.com 자바스크립트만의 매력이라고 할 수 있는 요상한 문법들을 다룬 사이트가 있다JS is weird 라는 사이트는'연산'과 '타입 변환'을 중심으로 자바스크립트 문제 25개를 풀 수 있는 곳이다 평소에 생각하지 못했던 문법들이 나와서 심심할 때 재미 삼아 풀어볼 만하다! 오늘은 그 중에서 생각해 볼 만한 문제 8개를 풀이해보려고 한다  1. true + false 👉 1 "+" 연산시 boolean 은 number 타입으로 변환된다.그러면 1 + 0 이 되니까, 결과는 1이다.  2. [,,,].length 👉 3 빈 공간에는 undefined 가 들어간다.마지막의..

Javascript에서 숫자는 64비트 부동소수점 형식으로 저장된다. 64비트 부동소수점이 어떤 건지 알아야0.1 + 0.2 === 0.3 이 오류라는 것을 이해할 수 있다! 64비트 부동소수점이 어떤건지 각각의 단어를 먼저 나눠서 살펴보자 🧐  64비트 자바의 경우, int, char, float 등 숫자 하나에도 여러 타입을 지닌다.자바스크립트는 다른 언어와 다르게 숫자는 number 타입 하나로만 다루고 있다.number 타입은 64비트의 고정된 크기 공간을 가지고 있다. 사람은 숫자를 10진법, 컴퓨터는 2진법으로 표현한다.컴퓨터는 모든 데이터를 0, 1로 이루어진 이진수로 처리한다. 그래서 하나의 비트(bit)는 0 또는 1의 값을 지닌다.  부동소수점 뜰 부, 움직일 동 (浮動)Floatin..

컴포넌트를 Pure, 즉 순수하게 작성하면 프로젝트의 코드 베이스가 커지더라도 사이드 이펙트를 피할 수 있다.자세한 이유와 방법을 알아보자. why?1. 컴포넌트는 서버와 같은 다른 환경에서 실행 가능하다. 동일 입력 - 동일 결과에 따라, 하나의 컴포넌트는 수많은 유저의 요청을 처리할 수 있다.2. input이 변경되지 않았을 때에는 캐싱된 것을 가져오기에 렌더링을 하지 않아 성능을 향상할 수 있다.3. 렌더링을 하다가 값이 중간에 바뀌었을 때 렌더링이 다시 시작되는 비효율이 발생한다. 이는 특히 컴포넌트 트리가 깊을 때 문제인데, 순수 함수는 이를 막을 수 있다. 순수 상태를 깨트리지 않기 위해 주의할 것1. same input 그리고 same output수학 공식처럼 y=2x 일 때, x가 3이면 ..

🔎 모듈이란? 자바스크립트에서 모듈이란 일반적으로 '파일' 각각을 말한다. 기존에는 모듈이라는 개념이 없었지만, 점점 자바스크립트 세계가 커지면서 모듈을 불러오고 내보낼 수 있도록 하였다. ECMAScript 2015(=ES 6)에서 공식적으로 모듈 시스템이 도입되었다. 각 모듈은 독립적으로 자체 스코프를 가진다. 모듈 내에서 선언한 변수, 함수 등을 해당 모듈 내에서만 사용 가능하다. 이에 따라 모듈 간에 공유하기 위해서는 export, import 구문을 사용할 수 있다. 필요한 모듈만 로드하여 사용 가능하며, 모듈화를 통해 코드를 작고 큰 단위로 나누어 관리할 수 있다. 💡 모듈 시스템 공식적으로 ESM이 도입되기 전까지는 AMD, CommonJS, UMD가 사용되었다. - AMD Asynchron..

input tag의 event 중 onKeyDown, onKeyPress, onKeyUp, onInput, onChange에 대해 정리를 하려고 한다. 이번에 몰랐던 사실들을 많이 알게 되었다 🤔 🤔 그럼 각 이벤트에 대해 먼저 알아보자! onKeyDown 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 onKeyDown만 눌렀을 때, 계속 실행이 된다는 것이다. onKeyPress onKeyDown과 마찬가지로 키보드에서 키가 눌렸을 때의 그 시점이다. 다른 이벤트와의 차이점은 KeyCode 값이 아닌 ASCII 값이기에 한글을 포함해 shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다는 것이다. 아래의 사진을 보면, 한글을 입력했을 때 해당 이벤트..

변수는 총 선언, 초기화, 할당의 3가지 과정을 거친다. var 키워드로 선언한 변수는 let, const와 다르게 선언과 초기화를 동시에 한다. 초기화 단계에서 변수의 값은 암묵적으로 undefined가 된다. 왜 여기에서 '암묵적'이라는 단어가 들어가는 것일까? 모던 딥다이브 자바스크립트책을 다시 한번 읽다가 이 키워드가 눈에 들어오기 시작했다. 암묵적 사실 변수는 undefined로 초기화되지 않는다. 메모리 공간에 이전에 다른 애플리케이션에서 사용하던 쓰레기 값이 남아있을 수 있다. 값을 할당하지 않은 상태에서 참조하게 되면 쓰레기 값이 나오는 것이다. 이러한 오류를 방지하기 위해 자바스크립트는 undefined로 한번 더 할당한다. 즉, 최초로 값을 할당하는 초기화 단계에서 var 키워드로 선언..

자바스크립트로 동적인 페이지를 만들 때 페이지 이동에 대한 여러 작성 방법이 있다. 각 코드의 사용법과 기능을 알아보겠다. location.href = '링크' location 객체에 있는 href 프로퍼티가 있다. 이를 활용하는 방법이다. 현재 페이지 상태에서 새로운 링크로 이동한다. 새 창이 띄어지지 않고 단순히 url이 변경된다. 히스토리에 남기 때문에 뒤로 가기를 해도 이전 페이지로 이동이 가능하다. - location.href 현재 페이지 경로를 반환 - location.href = '링크' 다른 페이지(링크)로 이동 hello console.log(location.href); // https://realzzu.tistory.com/ location.replace('링크') replace는 위와..

SPA(Single Page Application)인 리액트는 webpack과 같은 번들러를 통해 모든 코드가 하나의 javascript 파일로 번들링 되어 로딩된다. 이에 따라 사용자가 첫 페이지 진입 시 불필요한 코드로 인해 로딩이 느리게 될 수 있다. 브라우저에서는 javascript 파일을 모두 불러올 때까지 렌더링을 멈추기 때문이다. 렌더링 속도를 높이기 위한 방법으로는 코드 스플리팅(코드 분할)이 있다. 필요한 시점에 필요한 코드를 불러옴으로써 첫 렌더링을 빠르게 할 수 있다. 코드 분할의 방법으로 dynamic import, 즉 동적 import에 대해 알아보겠다. 기본 Import 기본적으로 import 한다면, 불러온 라이브러리는 빌드 시 함께 번들링이 된다. import { minus ..

svelte 프로젝트에서 tailwind css를 적용하는 과정에서 애를 먹었다. 결과적으로 간단했던 것인데 처음 세팅해 보는 거라 어려웠다 🥲 필수 패키지 설치 npm i -D tailwindcss postcss autoprefixer npx tailwindcss init -p 로 tailwind 초기화해주고나서 추가로, webpack을 위해 npm i -D style-loader css-loader postcss-loader 까지 설치해 준다. tailwind.config.js content에 하위 내용을 입력해 준다. /** @type {import('tailwindcss').Config} */ module.exports = { content: ["./src/**/*.{html,js,svelte,t..