본문 바로가기

전체 글438

[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 1(0. 기본타입의 정의, 1.원시타입과 리터럴타입, 2.배열과 튜플) chapter 2. 타입스크립트 기본 0. 기본 타입(Basic Types) 이란? TS가 자체적으로 제공하는 타입, 내장 타입 TS에서만 제공하는 타입: any, void, never, unknown 타입 계층도: TS가 제공하는 기본 타입들을 계층에 따라 분류한 그림 chapter 2. 실습 환경 설정 { "compilerOptions": { "target": "ESNext", "module": "ESNext", "outDir": "dist", "strict": true, "moduleDetection": "force" }, "include": ["./"] } tsc//컴파일 tsx index.ts//실행 1. 원시타입과 리터럴 타입 원시타입 동시에 한 개의 값만 저장할 수 있는 타입들 number,.. 2024. 4. 5.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) 이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) 이전에 이어서 이번에는 Transactions 페이지와 관련한 컴포넌트 마이그레이션을 진행해 볼 예정이다. Transactions 페이지 파일 형식을 jsx에서 tsx로 바꾼 뒤에 에러가 뜨는 코드를 확인하고 수정해 주었다. // Transactions.tsx import React, { useEffect, useState } from "react"; ... import { UserInfo } from "../interfa.. 2024. 4. 4.
[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 2(2. TS 동작원리, 3. 설치와 실습, 4. 컴파일러 옵션 설정하기) 2. 타입스크립트의 동작 원리 컴파일: 사람이 작성한 코드를 컴퓨터가 이해할 수 있는 기계어로 변환하는 과정 AST(추상 문법 트리): 코드 공백, 주석 등 코드 실행에 관계없는 요소를 전부 제거하고 트리 형태의 자료구조에 코드를 저장해 놓은 형태의 트리 타입스크립트의 동작 과정 타입스크립트 코드를 AST로 변환 AST를 확인하면서 코드 상 타입오류가 없는지 점검 타입에 오류가 있었다면 타입 검사 실패 및 컴파일 중단 타입에 오류가 없다면 타입 검사 통과 AST를 자바스크립트 코드로 변환 컴파일 종료 타입에 오류가 있는 경우 컴파일 시 타입 검사를 통과할 수 없음 👉 컴파일로 변환된 자바스크립트는 타입 관련한 에러가 없는 안전한 코드 타입스크립트의 타입 관련 코드는 자바스크립트로 변환될 때 사라짐 👉 실.. 2024. 4. 3.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) TS 마이그레이션 1편 [React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 1(세 마이그레이션 이유 기존에 프로젝트를 개발하면서 타입 때문에 발생한 에러를 잡느라 오랫동안 헤맸던 경험이 있다. (몽고DB의 ObjectId와 string으로 된 id를 비교해서, 게시글을 작성한 유저임에도 florescene.tistory.com 지난 마이그레이션 1편에 이어서 오늘은 대시보드 관련 컴포넌트를 마이그레이션 해보았다. 다른 컴포넌트는 이전에 했던 것처럼 useSelector의 타입만 지정해 주면 되는 거라 간단히 끝났다. 그런데 한 컴포넌트에서 기존 빈 배열([])로 state값을 초기화한 부분에서 never typ.. 2024. 4. 3.
[한 입 크기로 잘라먹는 TypeScript] CH1. 타입스크립트 개론 1(0. 타입스크립트 소개, 1. JS 단점/TS 장점) 0. 타입스크립트를 소개합니다. 🎨 타입스크립트 = 자바스크립트의 확장판 원래 사용하던 자바스크립트 코드에서 타입을 정의하는 문법만 추가하면 타입스크립트 코드가 된다. 🎨 타입스크립트 사용 이유? 자바스크립트는 웹 브라우저에서만 동작하도록 만들어졌으며, 아주 간단한 사용자 상호작용을 처리하도록 만들어진 언어이다.(ex. 웹사이트에서 버튼 클릭 시 경고창 띄워주기 정도의 간단한 작업) 따라서 자바스크립트는 굳이 엄격한 문법을 갖출 필요 없이 유연하게 설계되었다. 그런데 `Node.js`(자바스크립트의 런타임/실행환경)가 등장하면서 웹 브라우저에서만 실행 가능했던 자바스크립트를 어디서든 실행할 수 있게 된다. 이렇게 자바스크립트의 활용성이 늘어나고 자바스크립트를 사용하는 애플리케이션의 규모도 커지게 되었다... 2024. 4. 2.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 개인정보, 토큰 저장 방식 변경2 (redux-persist 보안: redux-persist-transform-encrypt) ctyptoJS crypto-js JavaScript library of crypto standards.. Latest version: 4.2.0, last published: 5 months ago. Start using crypto-js in your project by running `npm i crypto-js`. There are 11736 other projects in the npm registry using crypto-js. www.npmjs.com `ctyptoJS`는 암호화 표준을 제공하는 자바스크립트 라이브러리이다. 원래는 `redux-persist`를 이용해 저장한 Local Storage 데이터를 암호화하기 위해 crptoJS 라이브러리를 사용해 보려고 했다. 그런데 라이브러리 .. 2024. 3. 31.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: 개인정보, 토큰 저장 방식 변경1 (LocalStorage → redux-persist) 기존의 프로젝트에서, 사용자의 토큰값과 토큰 유효기간, 사용자 정보를 브라우저에 저장하기 위한 저장소로 Local Storage를 택했다. 그러나 이런 식으로 개인정보를 저장하면 보안에 취약하다는 말을 듣고 다른 방식으로 유저 데이터를 저장할 수 있는 방법을 찾아 구현해 보기로 했다. 기존 프로젝트의 구조 살펴보기 우선 현재 소셜 가계부 프로젝트의 구조는 다음과 같다. //Auth.jsx const handleAuthSubmit = async (e) => { e.preventDefault(); setIsLoading(true); let responseData; try { if (isLoginMode) { responseData = await loginAPI(form); } else { responseDa.. 2024. 3. 31.
[모던 자바스크립트 Deep Dive] 12장. 함수1 (12.1. 함수란? ~ 12.4. 함수 정의) 12.1. 함수란? 함수 일련의 과정을 문(statement)으로 구현학 코드 블록으로 감싸서 하나의 실행 단위로 정의한 것 매개변수: 함수 내부로 입력을 전달 인수: 입력. 함수 호출 시 사용됨 반환값: 출력 함수는 값이며, 여러 개 존재할 수 있다. 12.2. 함수를 사용하는 이유 함수의 재사용성 유지보수성 편의성 코드의 신뢰성 높임 코드 가독성 향상 12.3. 함수 리터럴 리터럴: 사람이 이해할 수 있는 문자 또는 약속된 기호를 사용해 값을 생성하는 표기 방식 5.2절 파트 자바스크립트의 함수는 객체타입의 값이다. 따라서 숫자 값을 숫자 리터럴로 생성하고 객체를 객체 리터럴로 생성하는 것처럼 함수도 함수 리터럴로 생성할 수 있다. 함수는 일반 객체와 다르다. 일반 객체는 호출할 수 없지만 함수는 호.. 2024. 3. 29.
[모던 자바스크립트 Deep Dive] 11장. 원시 값과 객체의 비교 11.1. 원시 값 자바스크립트가 제공하는 7가지 데이터 타입 → 원시 타입 / 객체 타입으로 구분 원시타입의 값(=원시값) 변경 불가능한 값. 원시값을 변수에 할당하면 변수(확보된 메모리 공간)에는 실제 값이 저장됨 값에 의한 전달(pass by value): 원시 값을 갖는 변수를 다른 변수에게 할당하면 원본의 원시 값이 복사되어 전달된다. 객체(참조) 타입의 값 (=객체) 변경 가능한 값 객체를 변수에 할당하면 변수(확보된 메모리 공간)에는 참조 값이 저장됨 참조에 의한 전달(pass by reference): 객체를 가리키는 변수를 다른 변수에게 할당하면 원본의 참조 값이 복사되어 전달된다. 11.1.1. 변경 불가능한 값 한번 생성된 원시 값은 읽기 전용으로서, 변경이 불가능하다.(=데이터의 신.. 2024. 3. 27.
[모던 자바스크립트 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.
반응형

티스토리툴바