Map Map 객체는 key와 value의 쌍으로 이루어진 collection이다. 사용법 - Map 객체 생성하기 Map 생성자 함수로 만들 수 있다. 이터러블을 인수로 전달받으며, 키와 값으로 이루어진 요소여야 한다. 인수를 전달하지 않으면 빈 Map 객체가 생성된다. const map = new Map(['key1', 'value1'], ['key2', 'value2']); Map 객체는 중복 Key를 가지지 않는다. key가 중복될 경우, 마지막 값으로 입력된다. - 요소 개수 확인하기 size 프로퍼티로 요소의 개수를 받아온다. const count = map.size; // 2 위에서 생성한 map의 개수는 2개이므로 2가 반환된다. - 요소 추가하기 set 메서드를 사용해 Map 객체에 요소..
10진수 -> n진수 변환 `number` 는 10진수 값 let number = 1023; let binary = number.toString(2); // 2진수 let octal = number.toString(8); // 8진수 let hex = number.toString(16); // 16진수 n진수 -> 10진수 변환 let decimal; let binary = "1111"; decimal = parseInt(binary, 2); // 2진수 -> 10진수 let octal = "177"; decimal = parseInt(octal, 8); // 8진수 -> 10진수 let hex = "3ff"; decimal = parseInt(hex, 16); // 16진수 -> 10진수 n진수에서 n..
화살표 함수를 제외한 모든 함수에서 arguments 객체를 사용할 수 있다. arguments arguments 객체를 통해 함수 호출 시 전달한 인자들을 참조할 수 있다. 유사 배열 객체이기 때문에 인덱스 프로퍼티와 length 프로퍼티 등을 가지고 있다. 사용 방법 arguments로 입력해주면 바로 사용할 수 있다. 배열처럼 index 프로퍼티로 값에 접근할 수 있으며 인자로 받은 값의 갯수를 length 프로퍼티로 받을 수 있다. function sum(x, y, z) { console.log(arguments[0], arguments[1], arguments[2]); // 1, 5, undefined console.log(arguments.length); // 2 arguments[1] = 3..
매개변수와 인자는 동일한 의미 같지만 다르다. 프로그래밍 전반에서 자주 쓰이는 만큼 두 차이를 정확하게 알아보자! function message(name){ // name -> 매개변수 return `Hi, ${name}`; } console.log(message('John'))'; // 'John' -> 파라미터 // 'Hi, John' 인자(argument)란? 인자는 함수를 호출할 때 전달되는 값을 의미한다. 매개변수(parameter)란? 매개변수는 함수에서 전달된 인자를 받아들이는 변수를 의미한다. 함수 내에서 지역변수로 사용된다. 매개변수와 인자 자바스크립트 특성상 느슨하기 때문에 함수를 호출할 때 인자 값, 개수 등을 정확하게 검사하지 않는다. function message(name){ re..
NaN NaN은 Not a Number의 약자로, 숫자가 아니라는 의미이다. 숫자로 변환할 수 없는 값을 변환하려고 할 때나 결과가 숫자가 아니면 NaN을 반환한다. NaN 사용하기 let str = "123"; typeof(str) // string let num = Number(str) // 123 typeof(num) // number Number("abc") // NaN 먼저 NaN을 사용하는 방법을 알아보겠다. 문자열로 감싸진 123의 경우, 숫자로 변환 가능하다. 하지만 abc는 숫자로 변환할 수 없는 값이기에 NaN이라는 결과가 반환된다. NaN === NaN NaN === NaN // false Number("abc") === NaN // false NaN !== NaN // true Na..
Github 저장소를 Clone해서 사용하는 방법을 알아보겠다! Github 저장소 복제 복제하려는 저장소에 들어가서 'Code' 버튼을 누른 후 해당 주소를 카피한다. // HTTPS 형식 https://github.com/[USER_NAME]/[REPOSITORY_NAME].git USER_NAME: 깃허브 사용자명 REPOSITORY_NAME: 깃허브 저장소명 git clone 명령어 $ git clone [REPOSITORY_URL] [DIRECTORY] [REPOSITORY_URL]: 클론할 저장소 주소 [DIRECTORY]: 저장소를 복제할 위치 - 특정 브랜치만 복제 $ git clone --branch [TAG] [REPOSITORY_URL] [TAG]: 특정 브랜치명 명령어 실행하기 이제..
인코딩 / 디코딩 인코딩 (encoding) 사람이 읽을 수 있는 데이터를 컴퓨터가 읽을 수 있는 부호로 변환 디코딩 (decoding) 컴퓨터가 읽을 수 있는 데이터를 사람이 읽을 수 있도록 변환 Charset (문자셋) 아스키코드 가장 처음 생성된 문자셋 128개의 문자 조합을 제공하는 7비트 부호 한글은 지원하지 않음 유니코드 기존에 아스키코드에서 담을 수 없는 문자를 정의하기 위해 탄생 2byte 한글도 가능 UTF-8 가변 길이 유니코드 인코딩 시스템 메모리 낭비 방지 영어권: 0 ~ 127 사이의 코드 포인트들은 1byte로 저장 (기존의 유니코드는 2byte로 저장함) 이 외: 128 이상은 모두 2byte or 3byte로 저장 (한글은 3byte) 메타 태그 사용 는 meta 태그의 ch..
Why? Javascript로 AWS S3 버킷에 파일을 업로드하는 기능을 개발하는 과정에서 CORS 에러가 생겼다. 알아본 결과, 버킷 설정을 통해 문제를 해결할 수 있었다. 해결 방법 1. AWS 웹 콘솔에서 해결하고자 하는 S3 버킷에 들어간다. 2. 권한 탭을 눌러 CORS 정책을 용도에 맞게 편집한다. [ { "AllowedHeaders": [ "*" ], "AllowedMethods": [ "HEAD", "GET", "PUT", "POST", "DELETE" ], "AllowedOrigins": [ "https://www.서비스도메인.com" ], "ExposeHeaders": [ "ETag", "x-amz-server-side-encryption", "x-amz-request-id", "x-..
NextJS에서 환경변수(env)는 서버에서만 참조할 수 있다. 서버와 브라우저에서 모두 환경변수를 사용하기 위해서는 prefix가 필요하다. Prefix prefix는 사용할 환경변수명 앞에 NEXT\_PUBLIC\_ 을 붙여준다. NEXT_PUBLIC_ 이란? Next.js 에는 두 가지가 있다. 1. React 컴포넌트를 사용해 빌드된 후 클라이언트에게 보이는 UI 부분과 2. Next.js 애플리케이션으로 서버에서 실행되는 부분이다. 후자의 경우, /pages/api : 라우팅 getServerSideProps(): 서버사이드 props 가져올 때 getStaticProps(): 빌드시 한 번만 props 가져올 때 3가지의 케이스가 있다. 클라이언트에 직접 전송되지 않기에 결제 정보와 같은 민감..
