본문 바로가기

전체 글438

[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가1 (타입 변환) 9.1. 타입 변환이란? 개발자의 의도대로 값의 타입을 변환하는 것을 명시적 타입 변환 또는 타입 캐스팅이라고 한다. // 명시적 타입 변환 // 숫자를 문자열로 타입 캐스팅한다. var str = x.toString(); console.log(typeof str, str); //string 10 // x 변수의 값이 변경된 것은 아니다. console.log(typeof x, x);//number 10 반면 개발자의 의도와는 상관없이 표현식을 평가하는 도중에 자바스립트 엔진에 의해 암묵적으로 타입이 변환되기도 하는데, 이를 암묵적 타입 변환 또는 타입 강제 변환이라 한다. 암묵적 타입 변환은 기존 변수 값을 재할당하여 변경하지 않으며, 새로운 타입의 값을 만들어 단 한 번 사용하고 버린다. // 암묵적.. 2024. 3. 22.
[모던 자바스크립트 Deep Dive] 8장. 제어문 제어문 제어문은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다. 그러나 코드의 실행 순서 변경 시 코드의 흐름을 직관적으로 이해하는 데 방해가 되고 가독성을 해칠 수도 있다. 가독성이 좋지 않은 코드는 오류를 발생시키는 원인이 된다. 👉 forEach, map, filter, reduce와 같은 고차함수는 제어문의 사용을 억제해 복잡성을 해결할 수 있다. 8.1. 블록문 블록문 0개 이상의 문을 중괄호로 묶은 것으로, 코드 블록 또는 블록이라고 부르기도 한다. js는 블록문을 하나의 실행 단위로 취급한다. 8.2. 조건문 8.2.2. switch문 if ... else문은 논리적 참, 거짓으로 실행할 코드 .. 2024. 3. 22.
[모던 자바스크립트 Deep Dive] 7장. 연산자 7.1. 산술 연산자 산술 연산이 불가능한 경우, NaN을 반환한다. 7.1.2 단항 산술 연산자 숫자가 아닌 피연산자에 + 단항 연산자를 사용하면 피연산자를 숫자 타입으로 변환하여 반환한다. 이때 피연산자를 변경하는 것은 아니고 숫자 타입으로 변환한 값을 생성해 반환한다. 따라서 부수효과는 존재하지 않는다 (=다른 코드에 영향을 주지 않는다) . var x = "1"; console.log(+x); //1 console.log(typeof +x); //number console.log(x); //"1" var x = false; console.log(+x); //0 console.log(typeof +x); //number var x = "Hello"; console.log(+x); //NaN cons.. 2024. 3. 21.
[모던 자바스크립트 Deep Dive] 6장. 데이터 타입 자바스크립트 데이터 타입 7가지 원시타입 숫자 타입 문자열 타입 불리언 타입 undefined 타입: var 키워드로 선언된 변수에 암묵적으로 할당되는 값 null 타입: 값이 없다는 것을 의도적으로 명시할 때 사용하는 값 심벌 타입: ES6에서 추가된 7번째 타입 객체 타입: 객체, 함수, 배열 등 6.1. 숫자타입 C언어나 자바와 달리 자바스크립트는 하나의 숫자 타입만 존재한다. 숫자 타입의 값은 64비트 부동소수점 형식을 따르며, 모든 수를 실수로 처리한다. 👉 정수끼리 나눠도 실수값이 나올 수 있다. 자바스크립트는 2진수, 8진수, 16진수를 표현하기 위한 데이터 타입을 제공하지 않기 때문에 이들 값을 참조할 시 모두 10진수로 해석된다. 추가적으로 세 가지 특별한 값도 표현가능하다. Infini.. 2024. 3. 21.
[모던 자바스크립트 Deep Dive] 5장. 표현식과 문 5.1. 값 👾 값 식(표현식)이 평가되어 생성된 결과. 평가: 식을 해석해 값을 생성하거나 참조하는 것 모든 값은 데이터 타입을 가지며 메모리에 2진수(비트)의 나열로 저장된다. 🐱‍🏍 변수: 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 메모리 공간을 식별하기 위해 붙인 이름 → 변수에 할당되는 것은 값이다. 5.2. 리터럴 리터럴: 사람이 이해할 수 있는 문자(아라비아 숫자, 알파벳, 한글 등) 또는 약속된 기호('', "", [], {}, // 등)를 사용해 값을 생성하는 표기법 5.3. 표현식 표현식 값으로 평가될 수 있는 문(statement). 표현식이 평가되면 새로운 값을 생성하거나 기존 값을 참조한다. 5.2.의 리터럴은 값으로 평가되므로, 리터럴도 표현식이라고 할 수 있다. .. 2024. 3. 20.
리액트 공식문서 읽기 - 주요개념(State) State `state`: 리액트 컴포넌트에서 동적으로 변화하는 값을 관리하기 위해 사용되는 객체 State를 올바르게 사용하기 `setState()`: 컴포넌트의 state 객체에 대한 업데이트를 실행하는 함수. state가 변경되면 컴포넌트는 리렌더링 된다. setState()에 대해 알아야 할 것 1. 직접 State 수정 금지 //❌ this.state.comment = 'Hello'; //⭕ this.setState({comment: 'Hello'}); `setState()`를 이용해 state 값을 변경해야 한다. `this.state`는 constructor에서만 지정할 수 있다. 2. State 업데이트는 비동기적일 수 있다. React는 성능을 위해 `setState()` 호출을 단일 업.. 2024. 3. 19.
리액트 공식문서 읽기 - 주요개념(Lifecycle) Lifecycle const root = ReactDOM.createRoot( document.getElementById('root') ); function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); root.render(element); } setInterval(tick, 1000); 이전 섹션(엘리먼트 렌더링)에서 다루었던 시계 코드는 렌더링 된 출력값을 변경하기 위해 `root.render()`를 호출한다. 위 코드를 재사용 및 캡슐화 하면 아래와 같다. const root = ReactDOM.createRoot(document.getElementById("root")); function C.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(Components와 Props) Components와 Props 컴포넌트 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눌 수 있다. 개념적으로 컴포넌트는 JS 함수와 유사하다. 👉 `props`라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환한다. //함수형 function Welcome(props) { return Hello, {props.name}; } //클래스형 class Welcome extends React.Component{ render(){ return Hello, {this.props.name} } } 👉 객체 인자를 받은 후 React 엘리먼트를 반환하는 유효한 React 컴포넌트 컴포넌트 렌더링 React는 사용자 정의 컴포넌트로 작성한 엘리먼트를 발.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(엘리먼트 렌더링) 엘리먼트 렌더링 엘리먼트 (!== 컴포넌트) React 앱의 가장 작은 단위, 리액트 앱을 구성하는 요소 화면에 표시할 내용을 기술한다. const element = Hello, world!; 브라우저 DOM 엘리먼트(브라우저 환경에서 웹 페이지의 구성요소를 나타내는 특수 객체)와 달리 React 엘리먼트는 일반 객체(plain Object)이며 쉽게 생성할 수 있다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트한다. DOM에 엘리먼트 렌더링하기 루트(root) DOM 노드: root 안에 들어가는 모든 엘리먼트는 React DOM에서 관리한다. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 존재한다. React 엘리먼트를 렌더링하기 위해서는 우선 DOM.. 2024. 3. 18.
리액트 공식문서 읽기 - 주요개념(Hello World, JSX 소개) Hello World 가장 단순한 React 예시 JS(Babel) const root = ReactDOM.createRoot(document.getElementById('root')); root.render(Hello, world!); html JSX 소개 React의 특성 렌더링 로직이 UI로직(이벤트 처리 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등)과 연결된다는 사실을 받아들임. 별도의 파일에 마크업과 로직을 넣어 기술을 분리하는 대신, 둘 다 포함하는 `컴포넌트`라는 느슨하게 연결된 유닛으로 관심사를 분리한다. JSX가 필수는 아니다. JSX cost element = Hello, world!; JavaScript를 확장한 문법 js 코드 내에서.. 2024. 3. 18.
[땅콩코딩] 타입스크립트 강좌 내용정리(함수의 타이핑, 선택적 매개 변수와 기본 매개변수 / 클래스와 오브젝트 ) 보호되어 있는 글 입니다. 2024. 3. 14.
[땅콩코딩] 타입스크립트 강좌 내용정리(열거형과 리터럴 타입) 보호되어 있는 글 입니다. 2024. 3. 14.
반응형

티스토리툴바