본문 바로가기

전체 글441

[모던 자바스크립트 Deep Dive] 10장. 객체 리터럴 10.1. 객체란? js를 구성하는 거의 모든 것 원시 값(=단 하나의 값만 나타냄, 변경 불가능한 값)을 제외한 나머지 값 함수, 배열, 정규 표현식 등 객체 타입: 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조 변경 가능한 값 0개 이상의 프로퍼티로 구성된 집합. (프로퍼티: key-value로 구성됨) 프로퍼티 값이 함수인 경우 메서드라고 부른다. var person = { name: "A", //프로퍼티 age: 20, //프로퍼티 //메서드 getName: function () { console.log(this.name); }, }; //프로퍼티 키: name, age //프로퍼티 값: "A", 20 프로퍼티: 객체의 상태를 나타내는 값(data) 메서드:.. 2024. 3. 27.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) 마이그레이션 이유 기존에 프로젝트를 개발하면서 타입 때문에 발생한 에러를 잡느라 오랫동안 헤맸던 경험이 있다. (몽고DB의 ObjectId와 string으로 된 id를 비교해서, 게시글을 작성한 유저임에도 불구하고 게시글 수정, 삭제를 하지 못했다...) 이때의 경험을 토대로 요즘 뜨고 있는 타입스크립트를 프로젝트에 적용해 보자는 생각을 하고, 본격적으로 JS -> TS 마이그레이션에 들어갔다. 필요한 환경설정 설치 (+ tsconfig.json 설정) npm i -D typescript @types/node @types/react @types/react-dom @babel/preset-typescript npm install typescript tsc --init 여기까지 입력하면 `tsconfig.j.. 2024. 3. 27.
[모던 자바스크립트 Deep Dive] 9장. 타입 변환과 단축 평가2 (단축 평가) 9.4. 단축 평가 9.4.1. 논리 연산자를 사용한 단축 평가 논리합(||) 또는 논리곱(&&) 연산자 표현식의 평가 결과는 불리언 값이 아닐 수도 있다. 논리합(||) 또는 논리곱(&&) 연산자 표현식은 언제나 2개의 피연산자 중 어느 한쪽으로 평가된다. -7.5. 논리연산자 파트- 논리곱 연산자 'Cat' && 'Dog' //'Dog' 논리곱 연산자는 두 개의 피연산자가 모두 true로 평가될 때 true를 반환한다. 또한 논리곱 연산자의 평가 진행 방향은 왼쪽에서 오른쪽이다. 위 예제의 경우 첫번재 피연산자 'Cat'은 Truthy 값이므로 true로 평가된다. 따라서 최종 평가 결과를 내리기 위해서는 두 번째 피연산자까지 평가해 보아야 한다. (=두 번째 피연산자가 위 예제의 평가 결과를 결정한.. 2024. 3. 25.
[모던 자바스크립트 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.
반응형

티스토리툴바