Slowly, Step by Step

arr.reduce(callback[, initialValue]) : 원하는 값들을 하나씩 더하기 값 만드는 것 배열을 축소하거나 새로운 객체를 생성하거나 수정하는 작업에 적합 일차원 배열을 원하는 조건에 따라 이차원 배열로 만들고자 할 때. const array1 = [1,2,3,4]; // reduce(콜백함수, 초기인자) // 리듀서의 결과값은 하나의 value const initial = 0; //초기인자 const result = array1.reduce((arr, cur) => arr+cur, 0) console.log(result) // 10 const arr = [1, 2, 3, 4, 5, 6, 7, 8, 9]; const result = arr.reduce((acc, cur) => { i..

Execution Context 자바스크립트 코드가 실행되고 연산되는 범위를 나타내는 추상적인 개념이다. - 코드 작성 실행하는 것은 실행 컨텍스트 내부에서 실행되는 것이다. 즉 코드들이 실행되기 위한 환경이자 하나의 박스이자 컨테이너라 볼 수 있다. 자바스크립트 코드 실행에 필요한 정보 1. 변수 2. 함수 선언 3. 변수의 유효범위 4. this 실행 컨텍스트의 3가지 유형 1. Global - 기본 실행 컨텍스트. 전역 컨텍스트에서 실행 - 두가지 작업 수행 (1) window 전역 컨텍스트 생성 (2) this를 전역 객체로 설정 2. Functional - 함수가 호출될 때마다 해당 함수에 대한 새로운 실행 컨텍스트가 생성 - 실행 컨텍스트는 함수가 호출될 때 만들어진다. 3. Eval Func..

Array.prototype.reduce() reduce() 메서드는 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다. const array1 = [1,2,3,4]; const initialValue = 0; const sumWithInitial = array1.reduce( (previousValue, currentValue) => previousValue + currentValue, initialValue ); console.log(sumWithInitial); 기대되는 결과값은 array1의 값을 모두 더한 값이 된다. 처음 더해지는 값은 두번째 인자 initialValue이고 그 다음부터 previousValue + currentValue가 더해진다. ini..

용어 정리 Assertion 에러가 없는 프로그램을 작성하기 위한 하나의 수법 Mocha 기반 테스트 코드 테스트 러너를 지원하는 자바스크립트 기반의 테스트 프레임워크 자체 assertion 지원 x, 필요한 assertion 라이브러리를 가져와 사용. node에서 지원하는 assert 모듈, chai, should.js 같은 BDD TDD 방식의 다양한 assertion 라이브러리 있다. mocha는 모듈별도 호출x , 사용한 assertion만 require()로 호출 BDD, TDD TDD : Test 주도 기반 개발 즉, 테스트 먼저 작성하고 나서 테스트가 정상적으로 돌아갈 때까지 테스트를 하면서 코드를 작성하는 것. 원하는 작업이 제대로 돌아갈 때까지 테스트 코드 작성을 무한대로 반복하며 개발 ..

OAuth 2.0 이란? Open Authorization 의 약자이며, 인증을 위한 개방형 표준 프로토콜이다. 이 프로토콜에서는 Third-Party 프로그램에 리소스 소유자를 대신해서 리소스 서버에서 제공하는 자원에 대한 접근 권한을 위임하는 방식으로 작동된다. 구글, 페이스북 등 외부 소셜 계정을 기반으로 간편하게 인증하는 기능이다. 용어 정리 Authentication(인증) : 인증, 접근 자격이 있는지 검증하는 단계 Authorization(인가) : 자원에 접근할 권할을 부여하고 리소스 접근 권한이 있는 Acess Token을 제공 client 우리가 개발한 서비스(service), 어플리케이션(Application)을 뜻함. Resource Owner 리소스 소유자이며, 자격을 승인하는 주..

multer를 사용해 이미지를 업로드 및 폼데이터를 처리할 수 있다. 기본적인 multer 사용법 정리 1. router 사용법 콜백함수 (req, res) 전에, upload.single('img') 미들웨어를 사용한다. router.post('/', upload_resize.single('img'), async (req, res) => { user_id = req.body.user_id; imgpath = req.file.location; }); 2. 이미지 저장 : 디스크가 아닌 S3에 저장하기 디스크에 있는 파일을 업로드하거나 파일 버퍼(메모리에 저장)하는 두가지 방법이 있다. 디스크 방식은 번거롭기 때문에, 메모리에 파일을 버퍼형식으로 저장하고, 그것을 업로드한다. const upload = m..

이미지 처리에 좋은 패키지 : sharp! 1. 이미지 리사이즈 resize 함수를 사용하면 간단한 리사이징이 가능하다. 여러 옵션이 존재한다. 옵션에 따라 이미지 일부를 crop 하면서 리사이징 또는 원본 비율을 무시한채 찌그러진 이미지로 리사이즈 가능하다. //비율을 유지하며 리사이즈 한다. width가 변경되는 비율만큼 height도 변경된다. sharp(imagePath).resize({width:400}) .toFile("sharp_resize1.jpg"); //비율을 유지하며 리사이즈 한다. left top을 기준으로 비율에 맞지 않는 부분은 잘라낸다. sharp(imagePath).resize({width:400, height:1000, position:"left top"}) .toFile(..

앱 동아리 활동 중, 이미지 저장시 필요한 파일해상도 별로 서버에 저장하라는 요청을 받았다. 나는 원본파일만 서버에 저장하고 GET 요청에 따라 클라이언트가 이미지를 resizing 하면 편리하다고 생각했는데, 서버가 필요한 이미지크기마다 저장해야 한다고 깨달았다. 정리해보자! 1. EC2 2. S3 3. Lambda 4. CDN (Cloud Front) , Lambda@edge 1. EC2 "가상 컴퓨터" 라고 이해하면 된다. 너가 만든 프로그램이 가상컴퓨터가 대신 실행시켜주는거야! 2. S3 정의 : S3란 인터넷 스토리지 서비스로 용량에 관계없이 파일을 저장할 수 있고 웹에서 파일에 접근할 수 있다. 사용이유 : 1. 보통 이미지 저장할 때 S3에 저장한다. 2. 저장 용량이 무한대이고, 파일 저장..

Q. var, let, const 의 차이점은? 우선 변수 선언방식인데요, 재선언 재할당할 시 차이점이 존재합니다. 먼저 var는 유연한 선언방식입니다. 같은 변수명으로 var로 선언한 뒤, 출력하면 재선언한 값이 출력됩니다. 하지만 코드가 길어지면 변수값을 알아보기 힘든 단점이 있습니다. var 만든 이후, 만들어진 let 변수선언은 재선언함이 불가능합니다. 하지만 재할당은 가능합니다 let name = 'bathingape' console.log(name) // bathingape let name = 'javascript' console.log(name) // Uncaught SyntaxError: Identifier 'name' has already been declared name = 'react..

🎯 Amazon S3 Amazon S3란, Simple Storage Service의 약자로 인터넷용 스토리지 입니다. Amazon S3는 웹상에서, 언제 어디든지 원하는 양의 데이터를 저장하고 검색하는데 사용할 수 있는 간단한 웹 서비스 인터페이스가 있습니다. Amazon S3의 특징은 다음과 같습니다. REST 인터페이스를 통해 저장 / 삭제 / 조회가 가능합니다. 주로 이미지 파일, 정적 리소스 등을 S3에 올려놓고 사용합니다. 내구성이 좋습니다.(데이터 유실 가능성의 거의 존재하지 않습니다) AWS S3 버킷 생성하기 1. 버킷 등록하기 2. 권한설정 변경하기 3. s3를 이용해 이미지 업로드하기 (MYSQL) multer 모듈 사용하기 multer 메소드 사용하기 - multer.single(f..