본문 바로가기

분류 전체보기441

[한 입 크기로 잘라먹는 TypeScript] CH2. 타입스크립트 기본 2(3.객체, 4.타입 별칭과 인덱스 시그니쳐, 5.열거형 타입) chapter 2. 타입스크립트 기본 3. 객체 ✅ 객체 타입을 정의하는 방법 1️⃣ object로 정의하기 let user: object = { id: 1, name: "kim", }; user.id; //오류 발생 객체 생성과 타입 정의를 잘해주었는데도 `user.id`를 이용해 객체의 프로퍼티에 접근하려 하면 오류가 발생한다. 👉 원인: 타입스크립트의 object 타입은 객체의 프로퍼티에 대한 어떤 정보도 가지고 있지 않기 때문 🤔 변수 user에 저장된 객체의 구조를 그대로 타입으로 만들려면 어떻게 해야 할까? 2️⃣ 객체 리터럴 타입 중괄호를 열고 객체가 갖는 프로퍼티를 직접 내열해 만드는 타입 let user: { id: number; name: string; } = { id: 1, name:.. 2024. 4. 10.
[React/Node.js/Express/MongoDB] 소셜 가계부 프로젝트 구현 일지: JavaScript → TypeScript 마이그레이션 4(가계부 페이지 관련 컴포넌트: TransactionList, Modal) 이전 마이그레이션 관련 포스팅 JavaScript → TypeScript 마이그레이션 1(세팅, App, AppRouter) JavaScript → TypeScript 마이그레이션 2(대시보드 페이지, 대시보드 관련 컴포넌트: state 빈 배열 초기화 never type 에러 해결) JavaScript → TypeScript 마이그레이션 3(가계부 페이지, Button 컴포넌트: onClick 함수 타입 지정, 자잘한 오류들 해결) 저번 포스팅에 이어 이번에도 가계부 관련 페이지 코드를 TypeScript로 변경해 볼 예정이다. 기존 코드 확장자를 jsx → tsx로 변경한 뒤 오류가 생기는 부분이나 흰 점선이 나타나며 타입 지정하라고 지정해 주는 부분 위주로 변경해 보겠다. 변경 전 코드는 아래와 같.. 2024. 4. 8.
[프론트 CI/CD 스터디 1주차] Github Action 환경에서의 AWS CF, S3 배포 설정 및 배포자동화(React CSR) 이론 CI/CD란 무엇인가? → [링크] GitHub Flow 전략에 대한 이해 → [링크] GitHub Action에 대한 이해 → [링크] 실습 CloudFront, S3 원클릭 배포하기 → [링크] GitHub Action 지속적 전달 구현하기 → [링크] 최근 프론트엔드 취업을 위해 공고를 살펴보다 보면 CI/CD와 AWS라는 키워드가 눈에 띈다. 공부해 보면 좋겠다는 생각은 했지만 솔직히 자바스크립트, 리액트, 타입스크립트 등 더 우선순위에 있는 공부할 거리들이 널려 있기에 엄두도 못 냈었다. 그러던 차에 마침 인프런에서 강의형 스터디를 진행한다고 해서 얼른 신청해 보았다. 사전 과제대로 가비아 도메인도 구매하고(.shop 도메인은 1년에 부가세 포함 550원... 개인 플젝 배포할 도메인도 그.. 2024. 4. 7.
[한 입 크기로 잘라먹는 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.
반응형

티스토리툴바