Languages/Javascript

Vue.js란? 웹 개발을 쉽게할 수 있도록 도와주는 프론트엔드 프레임워크 프론트엔드란? [프로그래밍] 프론트엔드와 백엔드란? 프론트엔드 - 사용자에게 나타나는 부분 ( UI, GUI ... ) 백엔드 - 사용자에게 보이지 않는 부분 ( DB, API ... ) defineall.tistory.com 프레임워크란? [프로그래밍] 라이브러리, 모듈과 프레임워크란? 라이브러리 = 모듈 프로그래밍 언어(코드)에서, 자주사용하는 기능을 함수나 클래스로 묶어서 [쉽게 재사용할 수 있게 만들어 놓은 파일]을 라이브러리라고 한다. 프레임워크 프로그래밍 언어( defineall.tistory.com Vue.js의 필요성 기존 웹 개발자뿐만 아니라, 웹 개발 입문자들도 쉽게 배울 수 있다. React, Angular보다..

👉 CJS, AMD, UMD, ESM의 목적 처음 JS는 모듈로 가져오거나 내보내는 방법이 없어, 하나의 파일에 모든 기능을 담아야 했다. JS 프로그램을 모듈로 개발하고, 배포할 수 있게 하기 위하여, CJS, AMD, UMD, ESM을 개발했다. 👉 CJS (CommonJS) javascript를 브라우저에서만 아니라, 다른 곳에서도 사용할 수 있게 해주는 API API란? [프로그래밍] API란? API란? 서로 다른 프로그램끼리 연결해주는 도구 Application Programming Interface 앱 프로그래밍 인터페이스 API 예시 REST API : 서버와 클라이언트를 연결 GraphQL API : 서버와 클라이언트를 연결 defineall.tistory.com CJS 구문 ( 사용법 ..

aws-sdk란? aws에 파일을 쉽게 저장할 수 있게 해주는 Node.js 패키지 AWS에 파일을 저장하는 이유 서버에 파일을 저장하고 있으면, 서버를 재시작할때 백업되지 않은 파일이 지워질 수 도 있다 aws-sdk 설치하기 npm i aws-sdk ws-sdk에서 aws s3 사용하기 (GraphQL 파일 업로드 기능 구현) S3에 접근하기 위한 API 키 입력해주기 import AWS from "aws-sdk"; AWS.config.update({ credentials: { accessKeyId: process.env.AWS_KEY, secretAccessKey: process.env.AWS_SECRET_KEY, }, }); 파일업로드 기능 gql 쿼리 작성하기 // typeDefs.js 에 파일..

정규표현식이란? "/"(슬래시) 사용해서 만들기 - 정규식 리터럴 var re = /ab+c/; 정규식 리터럴의 특징 스크립트가 불러와질때 컴파일 된다. RegExp 객체의 생성자 함수로 만들기 var re = new RegExp("ab+c"); 생성자 함수의 특징 함수가 실행되는 시점에 컴파일 된다. "정규식 패턴이 변경될 수 잇는 경우", 사용자 입력과 같이 "다른 출처로부터 패턴을 가져와야 하는 경우"에 유용

async, await란? 기존의 콜백 함수와 프로미스의 단점을 보완한 비동기 처리 방식 ( 함수가 종료 될때까지 기다려주기 ) async, await의 필요성 // fetchUser()함수의 데이터가 받아질 때까지 기다려야 한다고 가정함 // 기존 콜백 함수 이용한 비동기 방식 function logName(callback){ var user = fetchUser('domain.com/users/1'); callback(user); } logName(function (user){ if (user.id === 1) { console.log(user.name); } }); // 10줄 코드.. // async, await 이용한 비동기 방식 async function logName() { var user ..

콜백이란? 다른 함수가 실행을 마친 뒤, 그 다음에 실행하는 함수 javascript에서 함수는 object(객체)이므로, 다른 함수의 인자나, 함수의 반환값으로 사용할 수 있다. 콜백함수란? 다른 함수의 인자로 사용되는 함수 다른 함수의 반환값으로 사용되는 함수 Javascript에서 콜백함수가 중요한 이유 javascript는 기본적으로 비동기적 방식을 사용하기 때문에, 작업이 순차적으로 실행되어야 하는 경우 함수가 원치않는 순서로 실행되어 결과가 뒤바뀔 수 있다. 함수는 기본적으로 동기 방식을 사용하므로, 이를 콜백형태로 사용해 동기방식으로 프로그래밍 할 수 있다. 콜백함수 만들기 예제 // 일반적인 함수 function doHomework(subject) { alert(`Starting my ${..

crypto-js란? javascript에서 해시 함수를 통한 암호화를 할 수 있도록 해주는 Node.js 패키지 해시함수란? [프로그래밍] 블록체인이란? 블록체인이란? 정보가 담긴 블록을 체인형태로 묶은 것으로, 여러명의 사람들이 하나의 데이터를 나눠서 저장하는 기술 블록체인의 필요성 하나의 컴퓨터가 해킹당해 정보가 조작되었더라도, defineall.tistory.com crypto-js의 필요성 javascript를 이용한 서비스에서, 여러가지 정보(ex:비밀번호)를 안전하게 암호화 할 수 있다. crypto-js 설치 npm i -d crypto-js // Typescript에서 사용시 추가 설치 npm i --save-dev @types/crypto-js crypto-js 암호화 방식 1. 대칭키..

동기 처리 방식, 비동기 처리 방식이란? [프로그래밍] 동기처리, 비동기처리 란? 동기(synchronous) 처리 이전 작업이 끝나야, 다음 작업을 처리하는 방식 비동기(asynchronous) 처리 여러 작업을 동시에 처리하는 방식 // 스트리밍도 비동기 처리 방식중에 하나다. defineall.tistory.com 동기 방식으로 파일 가져오기 (try/catch) try{ var data = fs.readFile('testfile.txt', 'utf8'); }catch(exception){ console.error('ReadFile Error : ', exception); } 비동기 방식으로 파일 가져오기 (매개변수에 함수넣기) fs.readFile('testfile.txt', 'utf8', fun..