본문 바로가기

Javascript

 (32)
브라우저 저장소(Web Storage), Cookie 1. Web Storage (1) HTML5부터 제공하는 기능으로 , 특정 데이터를 서버가 아니라 클라이언트 브라우저에 저장 할 수 있도록 제공하는 기능 (2) 키/값 쌍으로 데이터를 저장, 키를 기반으로 데이터를 조회 (3) 사이트의 도메인 단위로 접근이 제한 2. Web Storage Type (1) LocalStorage 브라우저를 닫았다가 다시 열어도 계속 유지 저장한 데이터를 명시적으로 지우지 않는 이상 영구적으로 보관이 가능 도메인마다 별로도 LocalStorage가 생성 도메인만 같으면 전역으로 공유가 가능 Windows 전역 객체의 LocalStorage라는 컬렉션을 통해 저장과 조회 됨 (2) SessionStorage 브라우저가 열려있는 한 페이지를 Reload 해도 계속 유지 하지만 ..
JWT(JSON Web Token) 1.JWT(JSON Web Token) (1) 유저의 정보를 담은 객체를 암호화하여 문자열로 만들어 암호화된 키(accessToken)를 브라우저로 전달해 줌 (2) 브라우저 저장소에 저장해두었다가 유저 정보가 필요한 API를 사용할 때 API 요청과 함께 보내주면, 이를 백엔드에서 복호화해서 사용자를 식별한 후 접근이 가능하게 함 (3) 발급 받아온 서버에서 정상적으로 발급을 받았다는 증명하는 signature를 가지고 있음 (4) 사용자 정보를 DB를 열어보지 않고도 식별 할 수 있게 됨 2. JWT 토큰의 구성 (1) header: 토큰의 타입, 암호화 시 사용한 알고리즘 정보 (2) payload: 토큰 발행정보(발행자, 발행일, 만료일) (3) signature : 토큰의 비밀번호 3. JWT ..
DB Schema / ERD 1. DB Schema (1) 데이터 베이스 자료의 구조, 자료의 표현 방법, 자료 간의 관계를 형식 언어로 정의한 구조 (2) 데이터 관리 시스템(DBMS)이 주어진 설정에 따라 데이터베이스 스키마를 생성 (3) 데이터베이스 사용자가 자료를 저장, 조회, 삭제 변경 할 때 데이터베이스 스키마를 참조하여 명령을 수행 (4) 스키마의 3층 구조 외부 스키마(External Schema) : 프로그래머나 사용자의 입장에서 데이터베이스의 모습으로 조직의 일부분을 정의한 것 개념 스키마(Conceptual Schema) : 모든 응용 시스템과 사용자들이 필요로하는 데이터를 통합한 조직 전체의 데이터베이스 구조를 논리적으로 정의한 것 내부 스키마(Internal Schema) : 전체 데이터베이스의 물리적 저장 ..
TypeORM 1. TypeORM (1) TypeORM은 NodeJS, Browser, Cordova, PhoneGap, Ionic, React Native, NativeScript, Expo, TypeScript, JavaScript (ES5, ES6, ES7, ES8) 등등에서 지원되는 ORM (2) ORM은 객체지향프로그래밍을 사용하는 타입 시스템들 사이에서 데이터를 변환하기위한 프로그래밍 기술 2. Active Record pattern (1) 소프트웨어 엔지니어링에서 활성 레코드 패턴은 아키텍처 패턴 (2) 메모리 내 개체 데이터를 관계형 데이터베이스에 저장하는 소프트웨어에서 찾을 수 있음 (3) model 안의 모든 요청 방식을 정의할 수 있음 (4) model 방식을 통하여 저장, 삭제,객체 불러오기를 할..
Typescript 1. Typescript (1) Typescript는 자바스크립트에 타입을 부여한 언어 (2) 자바스크립트의 확장된 어넝 (3) 자바스크립와 달리 브라우저에서 실행하려면 컴파일을 거쳐야 함 2. Typescript 사용 이유 (1) 에러의 사전 방지 function sumJs(a, b) { return a + b; } sum(10, 20); // 30 sum('10', '20'); // 1020 typescript는 다음과 같이 의도치 않은 코드의 동작을 예방 할수 있음 function sumTs(a: number, b: number) { return a + b; } (2) 코드 가이드 및 자동 완성(개발 생산성 향상) function sumTs(a: number, b: number): number { ..
NestJS 1. NestJS (1) NestJS는 TypeScript를 지원하는 Node.js의 서버 어플리케이션 프레임워크 (2) 효율적이고 확장 가능 (3) OOP(Object Oriented Programming) 객체지향 프로그래밍, FP(Functional Programming) 함수형 프로그래밍, FRP(Functional Reactive Programming) 비동기 함수 프로그래밍 (4) Node.js, Javascript 를 위한 모듈, 라이브러리들이 존재 했었지만 구조적(Architecture) 문제를 해결하지 못하여 등장 (5) Java의 Spring과 Python의 장고 같은 프레임워크 들이 있는데 Java의 Spring과 유사함 (6) Architecture를 통일하고 소통 비용을 절감함으로..
깊은 복사와 얕은 복사 1. Deep Copying (1) 깊은 복사는 개체 값의 복사본을 저장 (2) 깊은 복사는 원본 개체의 복사된 개체에 대한 변경 사항을 반영하지 않음 (3) 깊은 복사는 원본 객체의 복사본을 저장하고 객체도 재귀적으로 복사 (4) 얕은 복사에 비해 상대적으로 느림 2. Shallo Copying (1) 얕은 복사는 객체의 참조를 원래 메모리 주소에 저장 (2) 얕은 복사는 원본 개체의 복사된 개체에 대한 변경 사항을 반영 (3) 얕은 복사는 원본 개체의 복사본을 저장하고 개체에 대한 참조를 기다림 (4) 깊은 복사에 비해 상대적으로 빠름 참고 https://www.geeksforgeeks.org/difference-between-shallow-and-deep-copy-of-a-class/
package.json 1. package.json (1) package.json 파일은 JSON 파일의 형태이지만 자바스크립트 객체는 아님 (2) 패캐지 묶음의 이름과 버전, 설명 등등 다양한 것들을 관리해주는 파일 2. package.json 파일의 구성 (1) name (2) version (3) description (4) keywords (5) homepage (6) bugs (7) licencse (8) people fields : author, contributors (9) files (10) main (11) bin (12) directories (13) repository (14) scripts (15) config (16) dependencies (17) devDependencies (18) peerDepen..
async / await 1. async funtion async function name([param[, param[, ... param]]]) { statements } name : 함수 이름, param : 인자, statements 본문 (1) AsyncFunction 객체를 반환하는 하나의 비동기 함수 (2) 비동기 함수는 이벤트 루프를 통해 비동기적으로 작동하는 함수, Promise를 사용하여 결과를 반환 (3) async 함수에는 await식이 포함 될 수 있음 => async 함수 본문 외부에서 await를 사용하게 된다면 SyntaxError 발생 2. async/await 함수의 목적 (1) promise의 동작을 동기와 비슷하게 사용 (2) 어떠한 동작을 여러 promise 그룹에서 간단하게 동작하게 시킴 참..
Callback 함수와 Promise 1. Callback function (1) 콜백함수는 다른 함수에 인자로 들어가는 함수로 어떤 특정한 명령이나 행동을 실행하기 위한 명령을 마치기 위해 밖의 함수에서 안으로 호출 됨 (2) 연결리스트가 있을 때 하나의 방법으로 리스트의 반복자로 각 객체 처리 가능 2. Promise (1) 생성된 시점에는 알려지지 않았을 수도 있는 값을 위한 대리자 (2) 비동기 연산이 실패 할 시에 실패 처리를 위한 처리기를 연결(비동기메서드에서 마치 동기 메서드 처럼 값을 반환) => 미래의 어떤 시점에 결과를 제공하겠다는 '약속'을 반환 (3) Promise의 상태 대기(pending): 이행하지도, 거부하지도 않은 초기 상태 이행(fulfilled): 연산이 성공적으로 완료됨 거부(rejected): 연산이 실..

티스토리툴바