얼마전 toast-ui editor에서 이미지를 blob으로 변환해 s3에 업로드 했었다. 왜 변환해서 저장하는지 더 알아보고 추가적인 기록을 하고자 한다. 2023.05.22 - [JavaScript/Vue] - toast-ui/vue-editor 사용 시, 파일을 S3에 업로드하기 🤔 Base64 -> Blob으로 변환하는 이유 Base64 를 Blob으로 변환하여 저장하는 방법은 데이터 전송, 데이터 저장, 웹에서의 이미지 표시 등에 유용하다. 데이터 전송: Base64는 이진 데이터를 텍스트로 변환하여 전송할 수 있으므로, 텍스트 기반 시스템에서 이진 데이터를 처리할 수 있게 한다. 데이터 저장: 일부 시스템은 텍스트 형식으로 데이터를 저장하는 것을 선호하며, Base64를 사용하여 이진 데이터를..
처음 배울 때 나를 괴롭혔던ㄴ 비동기... 동기? 함수를 호출하면 그 함수가 끝날 때까지 다음 코드로 X 비동기? 함수를 호출하면 일단 OK하고 실행 결과 나오면 나중에 알려줌 ⇒ 다했을 때 알려줄 콜백 함수를 파라미터로 미리 받아둠 ⇒ 콜백지옥🤯 ⇒ 콜백의 사용을 줄이는 방법 등장 👉 Promise Pending 객체가 생성되었지만 동작은 완료되지 않은 상태 파라미터 resolve, reject 함수 Fulfilled 작업 완료 resolve() ⇒ then() Reject 실패 reject() ⇒ catch() function test(value) { return new Promise((resolve, reject) => { if(value>=0) resolve('ok'); else r..
📌 모듈 모듈? 함수, 변수, 클래스 등으로 이루어진 파일이나 라이브러리 개발하는 애플리케이션의 크기가 커지면 언젠간 파일을 여러 개로 분리해야 하는 시점이 옵니다. 이때 분리된 파일 각각을 '모듈(module)'이라고 부르는데, 모듈은 대개 클래스 하나 혹은 특정한 목적을 가진 복수의 함수로 구성된 라이브러리 하나로 구성됩니다. 출처: 모던자바스크립트 1. CommonJS Node.js 의 default require 키워드 사용 내보내기 - module.exports 사용하기 - require('모듈') 2. ES6 Module ES6(ES2015)에서 새롭게 도입된 키워드 내보내기 - export 사용하기 import 이름 from 파일 일부만 : import { 항목 } from 모듈 서버에서 돌..
실제 개발할 때 제일 많이 쓰이는 부분 📌 함수 함수형 언어의 특징? 함수랑 클래스를 동급으로 취급함 함수 안에 함수 가능 1. 선언문 function function square(n){ return n*n; } return이 생략되면 undefined! Hoisting 적용 자바 클래스에서 함수 선언할때 위에 있는 애가 밑에 있는 함수 불러쓸 수 있는 거랑 똑같음 Hoisting? 함수의 '선언'을 스코프의 제일 앞으로 끌어 올리는 동작 var, function 키워드 console.log(cat); // undefined var cat = 'cat'; var cat = 'new cat'; console.log(cat); // new cat console.log(hello()); // Hello fun..
ECMAScript European Computer Manufacturer's Association 정보와 통신 시스템을 위한 국제적 표준화 기구 JavaScript와 같은 스크립트 언어의 표준 📌JavaScript 객체(object) 기반의 스크립트 언어 ECMA - 262의 규칙을 준수하는 언어 ECMA 2015(ECMA6) : V8 Engine의 기본 버전, 현재 버전 브라우저 별 지원 문법이 다름 사이트에서 확인 (작성 날짜 기준 크롬은 올그린) 👉기본 문법 파일 확장자 js 파일의 첫 줄부터 실행 문장 끝에 세미콜론을 생략하면 자동으로 삽입(ASI, Automatic Semicolon Insertion) 특정한 경우에 추가되므로 적어주는 게 좋음 👉 변수 선언과 할당은 분리해서 기억할 것..
📌 웹 브라우저 특성 HTTP는 file로 응답하는데 text는 구체적인 종류를 알아야 하기 때문에 content type을 알려주고, 서버에서 Content-Type을 text/html로 전송하면 렌더링을 진행 jsp 파일 같은 경우엔 톰캣이 자동으로 렌더링함 제일 윗 줄부터 해석 css, js 등 있으면 다운로드해서 사용 해석하면서 메모리에 쌓아두는 데 이게 DOM (DOM Tree) DOM 문서 객체 모델(The Document Object Model, 이하 DOM) 은 HTML, XML 문서의 프로그래밍 interface 이다. DOM은 문서의 구조화된 표현(structured representation)을 제공하며 프로그래밍 언어가 DOM 구조에 접근할 수 있는 방법을 제공하여 그들이 문서 구조..
2022.12.16 - [JavaScript] - 1. 결제 api - 토스(tosspayments) 가상계좌, 일반결제 등 1. 결제 api - 토스(tosspayments) 가상계좌, 일반결제 등 jsp 쇼핑몰 과제를 하던 중 결제 api를 찾아보다가 두가지를 발견했다. 토스 결제 api https://docs.tosspayments.com/guides/overview 카카오페이 api 먼저 토스 결제에 대해 작성해보겠다. 신용/체크 카드 1. SDK wonny.kim 이번 게시글에서는 아임포트를 이용해 카카오페이를 구현해보겠다! 1. 먼저 아임포트에 회원가입을 해야한다. https://www.iamport.kr/ 온라인 비즈니스의 모든 결제를 한곳에서, 아임포트 결제의 시작부터 비즈니스의 성장까지 ..
jsp 쇼핑몰 과제를 하던 중 결제 api를 찾아보다가 두가지를 발견했다. 토스 결제 api https://docs.tosspayments.com/guides/overview 카카오페이 api 먼저 토스 결제에 대해 작성해보겠다. 신용/체크 카드 1. SDK를 준비한다. 2. 결제창 띄우기 tossPayments.requestPayment('카드', { // 결제 수단 파라미터 // 결제 정보 파라미터 amount: 15000, orderId: 'TxpT2fUjl8FrkJR1SKjNJ', orderName: '토스 티셔츠 외 2건', customerName: '박토스', successUrl: 'http://localhost:8080/success', failUrl: 'http://localhost:808..
