본문 바로가기

programming/Javascript

 (21)
Javascript ?? (null 병합 연산자) 와 || (OR 연산자) 의 차이 || : OR 연산자 (MDN)Logical OR 논리 OR 계산용둘 중 하나이상 참이면 👉 참 true || false ⇒ truetrue || true ⇒ truefalse || false ⇒ false  ?? : null 병합 연산자 (MDN)왼쪽이 null 또는 undefined 이면 오른쪽을 반환, 아니면 왼쪽값 사용  UseCaseform 의 default 값을 지정하려한다store 에 저장해둔 값이 있다면 사용하고,없다면 기본값을 수동으로 지정하려 한다. [Incorrect] defaultValues: { setBillingAddressAsShippingAddress: paymentForm?.setBillingAddressAsShippingAddress || true, i..
Fetch try-catch : 400 은 response, 401은 catch error 로 빠진다면? [현상황]jwt accessToken / refreshToken 을 사용하여 로그인 검증을 진행하고 있음API 요청시 400 Bad Request 와 같은 응답은 response 로 잘 받아지고 있으나, accessToken 이 만료된 후, API 요청을 했을 때 401 Unauthorized 응답, 근데 response 에 접근하지 못하고 try-catch 에서 catch 에러로 빠지며, 스크립트로, status code, error message 에 접근하지 못함.그냥 "failed to Fetch" 메시지로 찍힘  [기대상황]API 요청시 400 / 401 모두 백엔드 서버에서 응답하는 response 객체로, HTTP status code 와 에러메시지로 접근하여 에러를 핸들링하고,네트워크 레벨 ..
[JS] List of Json 객체로 이루어진 리스트에서 최솟값/최댓값 또는 해당 객체의 index 찾기 흔하게 많이 사용되는 간단한 알고리즘(?)을 정리하려한다 다음과 같이 객체로 이루어진 리스트가 있다 const transactionList = [ { id: 1, transactionId: 99, sellDate: "20220801", price: 300, }, { id: 2, transactionId: 99, sellDate: "20220701", price: -200, }, { id: 3, transactionId: 99, sellDate: "20221001", price: 400, }, { id: 4, transactionId: 99, sellDate: "20221101", price: -100, }, ]; [Case1] 여기서 sellDate 가 가장 빠른 날짜를 찾고 싶다 1. 리스트 안의 Ob..
Node-Sequelize-Mysql (4) Model 생성 & migrations 파일 생성 1. migrations 파일 & model 생성 sequelize model:generate --name Member --attributes name:string, password:string DBMS에 적용하기 위한 migrations 파일이 만들어지고, ORM에서 객체로 사용할 memer.js 파일이 만들어진다 2. 생성된 migrations 파일에 필요한 컬럼 추가 "use strict"; module.exports = { async up(queryInterface, Sequelize) { await queryInterface.createTable( "members", { id: { allowNull: false, autoIncrement: true, primaryKey: true, type: S..
Node-Sequelize-Mysql (3) Mysql 로컬 db docker 띄우기 1. MYSQL workbench 다운로드 https://dev.mysql.com/downloads/workbench/ MySQL :: Download MySQL Workbench Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Red Hat Enterprise Linux / Oracle Linux Fedora macOS Source Code Select OS Version: All Windows (x86, 64-bit) Recommended Download: Other Downloads: Windows (x86, 64-bit), M dev.mysql.com 2. docker desktop 설치 docker ..
Node-Sequelize-Mysql (2) Sequelize 설치 1. mysql, sequelize, sequelize-cli 모듈 설치 $ npm i --save sequelize mysql2 // 모듈 설치 $ npm i -g sequelize-cli // 콘솔에서 sequelize 명령 가능하게 하는 모듈 $ sequelize init // 필요한 파일과 디렉토리를 자동 설치 초기 세팅 폴더 및 파일 생성됨 폴더 및 파일들의 간략한 설명만 하고 실제 세팅은 뒤에서 진행 config.json sequelize 모듈을 DB 환경과 연결 시키는 용도 편의상 js로 변경하여 사용한다 export default { development: { username: "root", password: "hello1234!", database: "DEV-HELLO-WEB", host..
Node-Sequelize-Mysql (1) ORM 개념 orm 사용해 봅시다 ORM 개념 ORM 이란 Object Relational Mapping : 객체-관계 매핑 객체와 관계형 데이터베이스(RDB) 데이터를 자동으로 매핑해주는 툴 mysql로 tb_member이라는 테이블을 만들어서 데이터 관리를 한다 orm으로 Member 객체를 만들어서 sql 쿼리 없이 테이블을 객체처럼 관리한다 객체지향 프로그래밍은 클래스(Class) 개념을 사용하는데, 중간중간 RDB의 테이블 개념이 이질적인 현상을 해소할 수 있다. → 전체적으로 객체지향(Class)로 프로그래밍이 가능 장점 객체 지향적인 코드로 전체적으로 직관적이고, 비즈니스 로직에 집중할 수 있게 해준다 재사용 및 유지보수의 편리성이 증가한다 DBMS에 대한 종속성이 줄어든다 (DB 솔루션과 상관없다) 단..
[JS] 비동기 프로그래밍 Callback -> Promise -> Async-await 비동기 프로그래밍에 대해서 정확하게 알지 못하고 늘 주변만 뱅뱅 돌면서 의미도 모르는 채로 기계처럼 사용해왔다. 회사에서 코드리뷰도 하고, 다른사람이 하던 작업을 넘겨 받아 리팩토링도 하면서 내가 그동안 얼마나 빈약한 개념을 가지고 있었는지 새삼 깨닫게 되었다. 당장 움직이지 않는 손가락이 너무 답답해서 이번에야 말로 비동기 프로그래밍을 이해해보자는 생각으로 정리를 해보았다. Sync & Async Sync JS 는 Sync → 동기적으로 작동 hoisting이 된 이후부터 코드가 작성된 순서대로 실행된다 async 비동기, 언제 코드가 끝날 지 모른다 끝날 때까지 기다리지 않음 ex) setTimeout - callback 함수 Callback Sync callback console.log('1') f..
얕은복사 & 깊은복사 데이터타입 원시값 String, Number, Boolean, Null, Undefined -> 자동 깊은 복사, 다른 메모리에 값 자체를 할당 참조값 Object, Symbol -> 얕은 복사, 가리키는 주소를 복사 얕은 복사 객체를 가리키는 주소를 같이쓰는것 바꾸면 같이 따라서 바뀌어 버린다 깊은 복사 spread 연산자 사용 (1 depth 까지만) Object.assign() 메소드 사용 (1 depth 까지만) 완벽한 깊은 복사 방법 재귀적으로 깊은 복사 수행 Lodash의 cloneDeep 함수 사용 (라이브러리) JSON.parse()와 JSON.Stringify() 함수 사용 JSON.stringify()는 객체를 json문자열로 변환한다. 이 과정에서 원본객체와 참조가 모두 끊어진다. J..
자바스크립트 프로토타입 Javascript 에서는 객체를 상속하기 위해 프로토타입이라는 방식을 사용한다. 이미 존재하는 생성자에게 메소드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아보자 자바스크립트는 프로토타입기반 언어라고도 불리운다 모든 객체들이 그들의 프로토타입으로 부터 메소드와 속성들을 상속받는다. 모든 객체들은 최소한 하나 이상의 다른 객체로부터 상속을 받는데, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. 동작 순서 : 프로토타입 체인 person 객체가 자체적으로 valueOf() 메소드를 가지고 있는지 체크 person의 프로토타입 객체 Person()의 생성자의 프로토타입에 valueOf() 메소드가 있는지 체크 여전히 없으므로 Person()의 생성자의 프로토타입 객체의 프로토타입 Obj..

티스토리툴바