study/javascript 8

백준 JS로 문제 풀기

프로그래머스나 다른 알고리즘 사이트는 JavaScript의 input을 제공해주지만 백준은 JavaScript로 제출하는 조건이 없다. 그래서 node.js를 이용해 입출력을 관리하여 문제를 제출하여야 한다. node.js: JavaSript 엔진으로 빌드된 JavaScript 런타임 환경 따라서 node.js를 통한 입출력 관리 방법을 알아보자. 1. 입력이 한 줄인 경우 // 입력 예 => 3 1 const fs = require('fs'); let input = fs.readFileSync('/dev/stdin').toString(); // 문자 하나만 입력받을 경우 input = input.split(' '); // 한칸 띄어쓰기로 구분 input[0], input[1] 배열형식으로 꺼내쓰면 된다..

study/javascript 2023.09.17

[HTML/CSS/JS] 브라우저 렌더링 과정

브라우저 렌더링 과정 1. HTML 파싱 -> DOM 트리 생성 - 브라우저의 브라우저의 서버가 html 파일을 우리 브라우저로 전송하게 되는데, - 이때 전송받는 html파일은 8비트 data 형태로 전송된다. ( 바이트 스트림 ) - 이후 우리 브라우저는 이를 문자형태로 변환한 후, - 문자를 토큰과 비교해 html 코드인지 확인한다. (토큰화) 🤔토큰이란? 브라우저에 저장되어있는 시작 혹은, 종료태그를 말한다. 또, 속성이나 속성 값을 확인한다. 즉, 문자가 html 코드인지 확인한다. 일종의 설명서 개념이다. - 토큰화 과정을통해 노드가 생성되게 된다. 노드는 거대한 DOM 트리를 구성하는 하나의 단위이다. 이런 작은 노드들이 모여 하나의 거대한 DOM 트리 구조가 완성되게 된다. - 위 예시 이..

study/javascript 2023.09.10

실행 컨텍스트

실행 컨텍스트 실행 컨텍스트는 자바스크립트의 동작 원리를 담고 있는 핵심 개념이다. 실행 컨텍스트가 중요한 이유 : 스코프, 호이스팅 발생 이유, 클로저 동작 방식, 태스크 큐, 비동기 처리 방식을 이해할 수 있다. 소스 코드의 타입 1. 전역 코드 전역에 존재하는 소스코드를 말한다. 전역에 정의된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 2. 함수 코드 함수 내부에 존재하는 소스코드 함수 내부에 중첩된 함수, 클래스 등의 내부 코드는 포함되지 않는다. 3. eval 코드 빌트인 전역 함수인 eval 함수에 인수로 전달되어 실행되는 소스코드 strict mode에서 자신만의 독자적인 스코프를 생성한다. 4. 모듈 코드 모듈 내부에 존재하는 소스코드 모듈 내부의 함수, 클래스 등의 내부 코드는 포..

study/javascript 2023.09.04

논리 연산자를 이용한 단축평가

- 논리 연산자를 이용한 단축평가 'Cat' && 'Dog' // 'Dog' // 논리 연산을 결정하는 두번째 피연산자를 반환한다. 'Cat'||'Dog' // 'Cat' // 논리 연산을 결정하는 첫번째 피연산자를 반환한다. ⇒ 논리곱(&&) 연산자와 논리합(||)연산자는 논리 연산의 결과를 결정하는 피연산자를 그대로 반환함. - 단축평가 ⇒ 표현식을 평가하는 도중에 평가 결과가 확정된 경우 나머지 평가 과정을 생략함. - 단축평가를 사용하면 좋은 상황들 1. 조건부 변수값 할당 어떤 조건이 Truthy 값일때 실행되야 한다면 논리곱 (&&) 을 사용할 수 있다. let done = true; let message = ''; if(done) message = "완료"; // if 문으로 작성한 코드 m..

study/javascript 2023.08.20

7장 정리

7-11 연산자의 부수 효과 일부 연산자는 다른 코드에 영향을 주는 부수 효과가 있다. 부수 효과가 있는 연산자 → 할당 연산자(=), 증가/감소 연산자(++,--), delete 연산자 var x; // 할당연산자 - 변수 값이 변함 x = 1; console.log(x); // 1 // 증가 / 감소 연산자 - 피연산자의 값이 재할당되어 변경됨. x++; console.log(x); // 2 var o = {a : 1}; //delete 연산자는 객체의 프로퍼티를 삭제한다. 이는 o를 사용하는 다른 코드에 영향을 준다. delete o.a; console.log(o); // {} 💡 delete 연산자? JavaScript에서 delete 연산자는 객체의 속성을 삭제합니다. 실제로 속성을 삭제한 후에..

study/javascript 2023.08.06

[자바스크립트 Deep Dive] 4장 ) 변수 && 5장) 표현식과 문

04. 변수 - 변수란? 💡 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 혹은 식별하기 위해 붙인 이름. 변수의 쉬운 네이밍은 코드를 이해하기 쉽게 만들며, 이는 협업과 품질 향상에 도움을 준다. - 변수를 선언할 때는 var, let, const 를 사용함. - var 키워드의 단점 💡 var 키워드는 단점이 있는데, 블록 레벨 스코프를 지원하지 않고 함수 레벨 스코프를 지원한다. 이로 인해 의도치 않은 전역변수가 선언되는 단점이 있다. (자세한 것은 15.1절 참고) - 변수에 값을 할당하지 않으면 undefined로 초기화 된다. - 호이스팅(hoisting)? 💡 인터프리터가 변수와 함수의 메모리 공간을 선언 전에 미리 할당하는 것을 의미 - 상수(const)는 재할당이 안됨. 05. 표현..

study/javascript 2023.07.27

[프로그래머스] 예산

https://school.programmers.co.kr/learn/courses/30/lessons/12982 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr • 문제 설명 S사에서는 각 부서에 필요한 물품을 지원해 주기 위해 부서별로 물품을 구매하는데 필요한 금액을 조사했습니다. 그러나, 전체 예산이 정해져 있기 때문에 모든 부서의 물품을 구매해 줄 수는 없습니다. 그래서 최대한 많은 부서의 물품을 구매해 줄 수 있도록 하려고 합니다. 물품을 구매해 줄 때는 각 부서가 신청한 금액만큼을 모두 지원해 줘야 합니다. 예를 들어 1,000원을 신청한 부서에..

study/javascript 2023.07.10

[프로그래머스] 3진법 뒤집기

https://school.programmers.co.kr/learn/courses/30/lessons/68935 프로그래머스 코드 중심의 개발자 채용. 스택 기반의 포지션 매칭. 프로그래머스의 개발자 맞춤형 프로필을 등록하고, 나와 기술 궁합이 잘 맞는 기업들을 매칭 받으세요. programmers.co.kr 문제 설명 자연수 n이 매개변수로 주어집니다. n을 3진법 상에서 앞뒤로 뒤집은 후, 이를 다시 10진법으로 표현한 수를 return 하도록 solution 함수를 완성해주세요. 풀이 1. 자연수 n을 3진법으로 변경 - toString( ) 함수 특정 객체를 문자열로 반환해줄때 사용하지만 원하는 10진수를 특정 진수로 변환하고 싶을때 사용할 수도 있다. 자연수n.toString(몇진수로 변환하고..

study/javascript 2023.07.06