챕터 1 타입 Type = 자바스크립트 엔진, 개발자가 모두에게 어떤 값을 다른 값과 구별할 수 있는, 고유한 내부 특성의 집합 1.1 타입의 실체를 이해하자 타입별 내재된 특성을 알고 있어야 값을 다른 타입으로 변활하는 방법을 정확히 이해가능하다. 어떤 형태로든 강제변환(coercion)이 이러나므로 인지하고 사용하는 것이 중요하다. 1.2 내장타입 ◽null ◽undefined ◽boolean ◽number ◽string ◽object🔰 ◽symbol object를 제외한 나머지 타입은 "원시타입" 이다. typeof 연산자를 이용해 반환값의 타입을 알 수 있다. ex ◽typeof undefined === "undefined" // true ◽typeof true === "boolean" // tr..
JavaScript/You Don't know JS
//tip 50 빌드 도구를 이용해 컴포넌트를 결합하라 //이번에는 자바스크립트 코드와 자산을 빌드 도구를 이용해 컴파일하는 방법을 배워보자 //이전에 컴포넌트 아키텍처의 이점을 살펴 보았고 컴포넌트 아키텍처의 대표적인 문제점인 브라우저의 내장 기능만으로 지원되지 않는 점을 알았다. //프로젝트의 컴파일과 실행을 위해 create-react-app이 제공하는 도구를 사용했다. 처음에는 항상 미리 설계된 빌드 도구가 가져다주는 이점을 챙기는 것이 좋다. //리액트뿐만 아니라 다른 프래임워크들도 자체 빌드 도구가 있다. 공식적인 빌드 도구가 없다면 깃허브에서 스타터팩을 찾아보는 것도 좋다. //하지만 결국에 빌드 도구를 직접 다뤄야 하는 순간이 온다. //이번에는 기본적인 빌드 프로세스를 구추해보자. //빌..
//tip 49 컴포넌트 아키텍처를 이용해 애플리케이션을 만들자 //컴포넌트 아키텍처로 흩어져있는 HTML, CSS, 자바스크립트를 모으는 방법을 알아보자 //HTML, CSS, 자바스크립트와 같은 프론트엔드 언어들은 서로 다른 //언어와 파일 형식을 만들어 지기에 파일을 구조화 하는데에 어려움이 있다. //오래동안 개발자들은 서로 다른 디렉터리에 비슷한 파일 형식 끼리 보관을 했다. //하지만 분리해둔 파일들 중 마크업에 작동하기 위해 작성되었던 파일들이 //마크업 파일들이 없어졌을때 같이 없어지지 않고 사용되지 않은채 자리만 차지할 뿐이다. //개발자 도구가 발전함에 따라 새로운 패턴이 생겼다. //바로 컴포넌트 아키택쳐라는 패턴이다. //컴포넌트는 관련있는 모든 코드를 조합해 하나의 디렉터리에 담은..
//npm으로 외부 코드를 가져오자 //몇 년 전만 해도 오픈 소스 라이브러리를 사용하려면 코드를 복사해서 내부에 붙여넣거나, 프로젝트에 라이프러리 코드를 내려받거나, //프로젝터에 라이브러리 코드를 내려받거나, 외부의 의존성을 태그를 이용해 포함시키는 방법밖에 없었다. //원하는 코드를 사용할 수 있지만 //의존성을 최신으로 유지하는 것과 프로젝트 내부에 저장하는 경우 문제가 되었다. //유지보수가 어렵고, 라이브러리 코드가 있다고 가정한 코드를 작성해야되고, 코드를 읽고 테스트를 장성하기도 어려웠다. //하지만 이제는 라이브러리 코드를 직접 프로젝트에 내려받고, 버젼을 관리하고, 익숙한 규칙에 따라 개별 파일에서 코드를 가져와 사용할 수 있다. //npm(node package manager)이라는 ..
//tip 46 localStorage를 이용해 상태를 장기간 유지하자 //사용자 데이터를 localStorage에 저장하는 방법을 알아보자 //사용자 데이터를 localStorage에 저장하는 방법을알아 볼 것이다. //많은 사용자들은 페이지 방문할 때마다 데이터 입력을 하는 것을 꺼려한다. //그렇다 해서 로그인 기능을 만들자니 그것도 꺼려한다고 한다. //참 어떻게 해야할지 애매하다. //그래서 사용자 데이터를 브라우저에 저장해서 특정 기기의 특정 브라우저에 정보를 유지하게 할 수 있다. //하지만 사용자는 여러 기기를 이용하기에 큰 도움은 되지 않지만 계정 생성보다는 접근성이 좋을 것이다. //localStorage는 브라우저의 작은 데이터베이스(DB)와 같다. //localStorage에 정보를..
//tip 44 aync/await로 함수를 명료하게 하자 //프라미스는 인터페이스가 여전히 투박하다. //하지만 여전히 메서드에서는 콜백을 다룬다. //하지만 비동기 프라미스 데이터를 단일 함수 함수의 변수에 추가해 콜백함수 사용을 피하게 됬다. //async와 await는 서로 분리된 동작을 한다. //async는 선언한 함수는 비동기 데이터를 사용한다는 것이다 //await는 비동기 함수의 내부에서 값이 반환될 때까지 함수의 실행을 중지시킬 수 있다. //주의해야 할 점이 있다. //1️⃣ async와 await는 프라미스를 대채하지 않고 더 나은 문법으로 감싸는 것에 불과하다. //2️⃣ 최신 브라우저는 대부분 지원하지만 안되는 브라우저도 있으니 주의하자 //이제 사용 예제를 보자 function..
