TypeScript란? JS 기반의 정적 타입 문법을 추가한 언어 TS는 상위 확장자 (슈퍼셋) JS 엔진을 사용 자신이 원하는 변수의 타입을 직접 정의하고 프로그래밍하면 JS로 컴파일되며 실행 컴파일? 쉽게 말해 사람의 언어를 컴퓨터가 이해할 수 있는 언어로 바꿔주는 과정 TS는 JS와 달리 브라우저에서 실행하기 위해 이런 변환 과정이 필요 TypeScript 동작 과정 TS 언어로 코드를 작성 작성한 코드는 타입 스크립트 컴파일러인 tsc를 통해 파싱 과정을 거쳐 타입 스크립트 AST 코드로 변환 파싱 된 코드에서 타입을 체크하는 과정을 거침 TS AST 코드를 JS 코드로 변환 JS 코드를 JS AST 코드로 파싱 JS AST를 바이트 코드로 변환 런타임 실행 환경에서 바이트 코드 실행 이 떄, 1..

JWT란? Json Web Token Json 포맷을 이용하여 사용자에 대한 정보를 저장하는 웹 토큰 토큰 자체를 정보로 사용하는 방식 주로 회원 인증이나 정보 전달에 사용 [ 구조 ] 1) Header (헤더) typ : 토큰의 타입 (ex. JWT) alg : 해싱하기 위한 알고리즘 방식 (ex. SHA256, HS256 등) 2) PayLoad (페이로드) 토큰에서 사용할 정보들인 Claim (클레임)이 담겨있음 Registered Claim (등록된 클레임) 토큰 정보를 표현하기 위해 이미 정해져 있는 종류의 데이터 선택적 작성이 가능 issuer 토큰 발급자 subject 토큰 제목 audience 토큰 대상자 expiration 토큰 만료 시간 not before 토큰 활성 날짜 issued ..

0. Mongoose란 Mongoose를 간단하게만 소개하자면, Mongo DB ODM 중 가장 유명하고 많이 쓰이는 자바스크립트 객체 지향 프로그래밍 라이브러리라고 한다. ODM Object Document Mapping 객체와 문서를 1대 1 매칭한다는 의미 Object - 자바스크립트의 객체 / Document - 몽고 DB의 문서 즉, 문서를 DB에서 조회할 때 자바스크립트 객체로 바꿔주는 역할을 하는 것 1. 오류 발생 배경 Node.js 교과서를 보고 공부하던 도중 서버를 실행시켜보려 했는데 에러가 떴다. 오류 메세지를 읽어보면 connect 함수가 더 이상 콜백을 지원하지 않는다는 것이었다. OwO... 2. 원인 및 해결 찾아보니 이전에는 connect 함수와 콜백 함수를 사용했지만, Mo..

0. Node.js란? 서버 측 자바스크립트 런타임 환경 확장성 있는 네트워크 애플리케이션 (특히 서버 사이드) 개발에 사용되늰 소프트웨어 플랫폼 브라우저 밖에서도 자바스크립트 사용 가능 자바스크립트 실행 엔진으로 구글 크롬에서 사용하는 V8 엔진 탑재 ▶ 실행 속도 빠름 단일 스레드 이벤트 루프, 비동기 I/O 모델 사용 ▶ 가볍고 효율적 + 높은 처리 성능 내장 HTTP 서버 라이브러리 포함 ▶ 웹 서버에서 별도 소프트웨어(ex. 아파치 등) 없이 동작 가능 NPM 패키지 매니저 : 세계에서 가장 큰 오픈 소스 라이브러리 ★ 런타임 runtime = 실행시간 컴퓨터 프로그램이 실행되고 있는 동안의 동작을 의미 컴퓨터 언어 안에 쓰인 프로그램을 관히라기 위해 특정 컴파일러 혹은 가상 머신이 사용하는 기..

0. JQuery란? 웹사이트에 자바스크립트를 쉽게 활용할 수 있도록 도와주는 오픈소스 기반의 자바스크립트 라이브러리 거의 모든 웹 브라우저에 적용이 될 정도로 여러 브라우저에 대한 호환성이 있음 물론 JS 만으로도 충분히 구현이 가능하지만, 코드를 쉽고 간결하게 작성할 수 있도록 도움을 줌 CDN을 불러와야 하기 때문에, 코드가 길어지고 무거워지면 JS와 비교하였을 때 시간이 조금 더 걸릴 수 있다는 특징 사실 JQuery는 점점 입지가 줄어들고 있다고 한다. React나 Vue와 같은 자바스크립트 라이브러리가 많이 사용되며 그만큼 JQuery에 대한 관심도가 줄어드는 것 같다고 생각한다. 실제로 google trend 사이트에 들어가 해당 검색어에 대한 작년 5년간의 관심도 변화를 확인할 수 있는데,..

0. DOM이란? Document Object Model XML / HTML 문서에 접근하기 위한 일종의 인터페이스 문서 내의 모든 요소 정의 각각의 요소에 접근하는 방법 제공 1. DOM의 구조 DOM은 그림에서 확인할 수 있듯이, 트리 형식으로 이루어져 있다. ★ tree란? 방향성이 있으며, 순환하지 않는 그래프의 한 종류 정점(node)와 간선(edge)를 활용해 데이터의 배치 형태를 추상화한 자료구조 노드가 N개인 트리는 항상 N-1개의 간선을 가짐 노드들이 나무 가지처럼 연결되었으며, 나무를 거꾸로 뒤집어 둔 형태와 유사 위쪽의 노드를 부모(parent) 노드라고 하며, 아래쪽 노드를 자식(child) 노드라고 한다. root node : 최상단에 있는 노드, parent node가 존재하지 ..

0. 자바스크립트에서 함수란? 득정 작업을 수행하기 위해 독립적으로 설계된 코드들의 집합 명령어의 묶음 재사용 가능한 영역을 정의 코드를 캡슐화하는 데에 도움이 됨 일반적으로 '입력(input) → 함수 → return문 → 출력(output)' 순으로 구성 함수 정의 : 함수를 "생성" 함수 호출 : 함수를 "사용" [ 특징 ] 함수 = 객체 function이라는 키워드로 정의 / 생성하며 출력이 가능 객체이기 때문에 함수를 변수나 배열에 저장 가능 다른 함수 호출 시 인자를 넘겨줄 수 있음 동일한 작업을 반복 (반복 작업을 줄이며 코드 재사용성 ↑) 유지보수 편리 1. 함수의 종류 1.1 내장 함수 이미 언어에서 자주 쓰이는 기능을 만들어 놓은 함수 ex. alert ( ), confirm ( ), ..

WebPack 여러 개의 파일을 하나의 파일로 묶어주는 모듈 번들러 (Module Bundler) [ 장점 ] 웹 애플리케이션의 로딩속도를 줄이기 위한 방법 : 클라이언트 (브라우저) 에서 서버로 요청하는 개수를 줄이는 것 여러 파일의 자바스크립트 코드를 압축 -> 최적화 할 수 있음 -> 로딩에 대한 네트워크 비용 절감 모듈 단위의 개발이 가능 -> 가독성과 유지보수가 쉬움 최신 자바스크립트 문법을 지원하지 않는 브라우저에서 사용할 수 있는 코드로 쉽게 변환