본문 바로가기

웹 프로그래밍168

[한 입 크기로 잘라먹는 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.
[모던 자바스크립트 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.
반응형

티스토리툴바