JavaScript 63

[드림코딩 by 엘리] 바닐라JS로 쇼핑몰 미니게임 만들기

// Fetch the items from the JSON file function loadItems() { return fetch("data/data.json") .then((response) => response.json()) //json으로 변환 .then((json) => json.items); //json 안의 items를 return } // 받아온 아이템들로 리스트를 업데이트 function displayItems(items) { const container = document.querySelector(".items"); container.innerHTML = items.map((item) => createHTMLString(item)).join(""); //join -> 문자열의 배열을 하..

FRONT/JAVASCRIPT 2021.07.11

[백준/ node.js] 배열 - 1546번 평균

https://www.acmicpc.net/problem/1546 1546번: 평균 첫째 줄에 시험 본 과목의 개수 N이 주어진다. 이 값은 1000보다 작거나 같다. 둘째 줄에 세준이의 현재 성적이 주어진다. 이 값은 100보다 작거나 같은 음이 아닌 정수이고, 적어도 하나의 값은 0보 www.acmicpc.net 문제 세준이는 기말고사를 망쳤다. 세준이는 점수를 조작해서 집에 가져가기로 했다. 일단 세준이는 자기 점수 중에 최댓값을 골랐다. 이 값을 M이라고 한다. 그리고 나서 모든 점수를 점수/M*100으로 고쳤다. 예를 들어, 세준이의 최고점이 70이고, 수학점수가 50이었으면 수학점수는 50/70*100이 되어 71.43점이 된다. 세준이의 성적을 위의 방법대로 새로 계산했을 때, 새로운 평균을..

FRONT/JAVASCRIPT 2021.07.02

백준 node.js로 여러 줄의 값 입력받을 때 주의해야 할 점

백준 문제를 풀 때 여러 줄의 값을 입력 받는 경우 의문을 가지게 했던 점이 있었다. const input = require('fs').readFileSync('/dev/stdin').toString().split('\n').map(Number); 이렇게 개행문자('\n')로 나눠 값들을 입력 받아 배열을 반환할 때 입력 값의 마지막에 개행문자가 포함된 경우 값 하나를 더 갖는다는 것이다. 예를 들어 1부터 10까지를 입력받았을 때, //[1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 0] 이렇게 0이라는 하나의 값을 더 갖는 배열을 반환한다. 이를 막기 위해선 trim()을 사용한다. const input = require('fs').readFileSync('/dev/stdin').toStri..

ALGORITHM 2021.07.01

[백준/ node.js] 배열 - 3052번 나머지

https://www.acmicpc.net/problem/3052 3052번: 나머지 각 수를 42로 나눈 나머지는 39, 40, 41, 0, 1, 2, 40, 41, 0, 1이다. 서로 다른 값은 6개가 있다. www.acmicpc.net 문제 두 자연수 A와 B가 있을 때, A%B는 A를 B로 나눈 나머지 이다. 예를 들어, 7, 14, 27, 38을 3으로 나눈 나머지는 1, 2, 0, 2이다. 수 10개를 입력받은 뒤, 이를 42로 나눈 나머지를 구한다. 그 다음 서로 다른 값이 몇 개 있는지 출력하는 프로그램을 작성하시오. 입력 첫째 줄부터 열번째 줄 까지 숫자가 한 줄에 하나씩 주어진다. 이 숫자는 1,000보다 작거나 같고, 음이 아닌 정수이다. 출력 첫째 줄에, 42로 나누었을 때, 서로 ..

ALGORITHM 2021.06.30

[javascript] 실행 컨텍스트

실행 컨텍스트 자바스크립트의 동작 원리의 핵심 개념이다. 4가지 타입의 소스코드는 실행 컨텍스트를 생성한다. 전역 코드 함수 코드 eval 코드 모듈 코드 소스코드의 평가와 실행 평가 실행 컨텍스트를 생성하고 선언문만 먼저 실행하여 생성된 변수나 함수 식별자를 스코프에 등록한다. 실행 선언문을 제외한 소스코드가 순차적으로 실행된다. 소스코드 실행에 필요한 정보는 실행 컨텍스트가 관리하는 스코프에서 검색하여 취득하고, 소스코드의 실행결과는 다시 스코프에 등록된다. 실행 컨텍스트의 역할 전역 코드 평가 전역 코드 실행 함수 코드 평가 함수 코드 실행 이러한 순서로 소스코드를 실행하고, 실행 컨텍스트는 이를 위해 필요한 환경을 제공하고 코드의 실행 결과를 실제로 관리하는 내부 메커니즘이다. 모든 코드는 실행 ..

FRONT/JAVASCRIPT 2021.06.29

[백준/ node.js] 배열 - 10818번 최소, 최대

10818번 최소, 최대 문제 N개의 정수가 주어진다. 이때, 최솟값과 최댓값을 구하는 프로그램을 작성하시오. 입력 첫째 줄에 정수의 개수 N (1 ≤ N ≤ 1,000,000)이 주어진다. 둘째 줄에는 N개의 정수를 공백으로 구분해서 주어진다. 모든 정수는 -1,000,000보다 크거나 같고, 1,000,000보다 작거나 같은 정수이다. 출력 첫째 줄에 주어진 정수 N개의 최솟값과 최댓값을 공백으로 구분해 출력한다. const input = require('fs').readFileSync('/dev/stdin').toString().split('\n'); const count = input[0]; const nums = input[1].split(' ').map(Number); let max = num..

ALGORITHM 2021.06.27

[javascript] this

this this는 자신이 속한 객체 또는 자신이 생성할 인스턴스를 가리키는 자기참조 변수다. this를 통해 자신이 속한 객체 또는 자신이 생성할 인스턴스의 프로퍼티나 메서드를 참조할 수 있다. this가 가리키는 값, 즉 this 바인딩은 함수 호출 방식에 의해 동적으로 결정된다. *this 바인딩: this(식별자 역할)와 this가 가리킬 객체를 연결하는 과정 // this는 어디서든지 참조 가능하다. // 전역에서 this는 전역 객체 window를 가리킨다. console.log(this); // window function square(number) { // 일반 함수 내부에서 this는 전역 객체 window를 가리킨다. console.log(this); // window return nu..

FRONT/JAVASCRIPT 2021.06.26

[javascript] 빌트인 객체

자바스크립트 객체의 분류 표준 빌트인 객체: ECMAScript 사양에 정의된 객체. 실행환경과 관계없이 항상 사용 가능 호스트 객체: 실행 환경에서 추가적으로 제공하는 객체 사용자 정의 객체: 기본 제공되는 객체가 아닌 사용자가 직접 정의한 객체 표준 빌트인 객체 생성자 함수 객체: String, Number, Boolean, Function, Array, Date 생성자 함수가 아닌 객체: Math, Reflect, JSON 래퍼 객체 원시 값이 있는데도 객체를 생성하는 표준 빌트인 생성자 함수가 존재하는 이유는? 원시 값을 객체처럼 사용하면 자바스크립트 엔진은 암묵적으로 연관된 객체로 변환해준 다음 다시 원시 값으로 되돌리기 때문이다. 이처럼 문자열, 숫자, 불리언 값에 대해 객체처럼 접근하면 생성..

FRONT/JAVASCRIPT 2021.06.26

[백준/ node.js] while문 - 1110번 더하기 사이클

1110번 더하기 사이클 문제 0보다 크거나 같고, 99보다 작거나 같은 정수가 주어질 때 다음과 같은 연산을 할 수 있다. 먼저 주어진 수가 10보다 작다면 앞에 0을 붙여 두 자리 수로 만들고, 각 자리의 숫자를 더한다. 그 다음, 주어진 수의 가장 오른쪽 자리 수와 앞에서 구한 합의 가장 오른쪽 자리 수를 이어 붙이면 새로운 수를 만들 수 있다. 다음 예를 보자. 26부터 시작한다. 2+6 = 8이다. 새로운 수는 68이다. 6+8 = 14이다. 새로운 수는 84이다. 8+4 = 12이다. 새로운 수는 42이다. 4+2 = 6이다. 새로운 수는 26이다. 위의 예는 4번만에 원래 수로 돌아올 수 있다. 따라서 26의 사이클의 길이는 4이다. N이 주어졌을 때, N의 사이클의 길이를 구하는 프로그램을..

ALGORITHM 2021.06.26

[javascript] strict mode란?

strict mode란? function foo(){ x= 10; } foo(); console.log(x); // 10 foo 함수 내에 선언하지 않은 x 변수에 값 10을 할당했다. 자바스크립트 엔진은 먼저 foo 함수의 스코프에서 x변수의 선언을 검색하는데 실패할 것이고, 상위 스코프(전역 스코프)에서 검색한다. 이 때 자바스크립트 엔진은 암묵적으로 전역 객체에 x 프로퍼티를 동적 생성한다. 이러한 현상을 암묵적 전역이라 한다. 이는 오류를 발생시키는 원인이 될 수 있다. 오류를 발생시키기 어려운 개발 환경을 지원하기 위해 strict mode(엄격 모드)가 추가되었다. 적용 전역의 선두 또는 함수 몸체의 선두에 'use strict';를 추가한다. 'use strict'; function foo(..

FRONT/JAVASCRIPT 2021.06.25