profile
필기맨
post-thumbnail

Node.js 란?

노드 공식 홈페이지에서 노드를 다음과 같이 정의한다.Node.js는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임즉, 웹 브라우저 없이도 JavaScript 어플리케이션을 실행할 수 있다는 뜻이다. 또 노드는 웹 서버와 같이 확장성이

2022년 6월 16일
·
0개의 댓글
post-thumbnail

Virtual DOM과 브라우저 렌더링 과정

브라우저에서 어떻게 렌더링을 하며 DOM은 무엇이고, Virtual DOM은 무엇인지 알아보자! 먼저, DOM부터 알아보자.DOM은 Document Object Model의 약어로, HTML, XML 문서를 위한 API이다. 하나의 HTML 문서는 div, span등

2022년 6월 16일
·
0개의 댓글

Collection을 사용한 분기 처리

일반적으로 if/else-if나 switch 구문을 통해 분기 처리를 한다.하지만 가짓수 너무 많거나 유사한 패턴으로 반복된다면 자료구조를 통해 if/switch 문을 대체할 수 있다.이 때의 장점으로는 코드가 간략해져 가독성이 높아지고, 시간적 성능이 향상될 수 있다

2022년 6월 15일
·
0개의 댓글

[JavaScript] 비동기 함수 병렬 처리

프로그래밍에서 일반적인 함수는 직렬로 실행된다.즉, 현재 라인의 처리가 끝난 후, 다음 라인으로 넘어간다는 것이다.이를 동기(Synchronous)라고 한다. 하지만 네트워크 작업 등 언제 끝날지 모르거나 오래 걸리는 작업의 경우 동기적으로 진행하면 그 동안 다른 작업

2022년 6월 15일
·
0개의 댓글

MPA과 SPA

MPA 란 SPA와 대조적인 용어로 여러 개의 페이지로 이루어진 어플리케이션을 뜻한다. MPA는 Server Side Rendering 방식으로 뷰를 만든다. 새로운 페이지를 요청할 때마다 서버에서 렌더링된 자원(HTML, CSS, javscript)을 모두 받는다.

2022년 6월 15일
·
0개의 댓글
post-thumbnail

[컴퓨터구조] 논리 게이트

논리 연산을 수행하는 소자로서 주어진 입력에 대하여 정해진 논리 함수를 수행하여 결과값을 출력하는 하드웨어1983년 미궁의 샤논에 의해 스위치로 이진 정보를 표현하거나 논리 연산의 실행을 가능하도록 만든 이론진리표 심볼대수적 표현진리표심볼대수적 표현진리표심볼대수적 표현

2022년 6월 2일
·
0개의 댓글
post-thumbnail

[JavaScript] 나머지 매개변수와 스프레드 문법

자바스크립트의 함수는 인수의 개수의 제약이 없다.함수를 정의할 땐, 인자가 2개로 정했지만 호출할 땐 2개가 아닌 개수를 넣어도 에러가 발생하지 않는다.다만, 결과는 앞의 인자 2개만 활용한다.인자의 개수를 정하지 않을 땐, ...(나머지 매개변수)을 붙여주면 된다.유

2022년 6월 2일
·
0개의 댓글
post-thumbnail

[JavaScript] 구조 분해 할당

객체나 배열을 변수로 분해하는 문법을 구조 분해 할당이라고 한다....로 나머지 혹은 모든 요소를 모두 가져올 수 있다.배열을 분해하여 값을 가져오다보면 변수의 개수가 배열의 길이보다 클 경우, 값을 가져오지 못해 undefined 값을 할당받게 된다.이럴 때, 기본값

2022년 6월 1일
·
0개의 댓글
post-thumbnail

[JavaScript] Object.keys, values, entries

위 메소드들을 통해 일반 객체에서도 key, value, key, value를 순회할 수 있다.Object.keys(obj): 객체의 key만 담은 배열을 반환한다.Object.values(obj): 객체의 value만 담은 배열을 반환한다.Object.entries(

2022년 5월 22일
·
0개의 댓글
post-thumbnail

[Vue.js] 개요

프론트엔드 3대장 중 막내라고 불리운다. (첫째는 Angular, 둘째는 React라고 한다.) Angular를 개발한 분이 개인 프로젝트로 개발하다 탄생되었다고 한다. Vue의 시작이 Angular가 너무 무겁다는 문제점에서부터였다고 하니, 다른 프레임워크보다 쉽게

2022년 5월 18일
·
0개의 댓글
post-thumbnail

[JavaScript] WeakMap과 WeakSet

자바스크립트에선 가비지 컬렉션을 통해 더 이상 사용되지 않는 객체들을 메모리에서 지워나간다.이 때, 자료구조에 속한 객체들은 가비지 컬렉션의 대상에서 제외되는데, WeakMap과 WeakSet을 이용하면 약간 연결 관계를 지속할 수 있다.위 코드에서 data를 null

2022년 5월 18일
·
0개의 댓글
post-thumbnail

[JavaScript] Set

셋은 중복을 허용하지 않는 컬렉션이다.new Set(): 셋 객체를 생성한다.set.add(value): value를 추가하고 셋 자신을 반환한다. (체이닝 가능)set.delete(value): value를 제거하고, 제거 전 해당 value가 셋에 포함되어 있었다면

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[JavaScript] Map

맵은 키가 있는 데이터를 저장하는 점에서 객체와 비슷하다. 하지만 객체와 다른 점은 맵에서의 키에는 문자열 뿐만 아니라 다양한 자료형을 가질 수 있다.new Map(): 맵 객체를 생성한다.map.set(key, value): key 값에 해당하는 value를 저장한다

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[JavaScript] 자료구조-배열2

배열 객체의 메소드 사용법을 알아보자.요소를 자유자재로 추가, 삭제, 교체할 수 있다.start로부터 deleteCount 개수를 삭제할 수 있고, items를 인자로 주면 교체해준다.start 부터 end 이전까지의 배열을 복사해 새로운 배열을 반환한다.기존 배열 요

2022년 5월 17일
·
0개의 댓글
post-thumbnail

[JavaScript] 자료구조-배열

2가지 방법으로 배열을 생성할 수 있다.\[] 로 해당 index의 요소에 접근할 수 있다.length 프로퍼티로 배열의 길이를 알 수 있다.배열을 큐(queue)처럼 사용할 수 있다.push: 맨 끝에 요소를 추가한다.shift: 맨 앞에 요소를 반환하고 제거한 뒤,

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[JavaScript] 자료구조-문자열

length 프로퍼티로 문자열의 길이를 알 수 있다. (함수가 아니다!!)문자열의 특정 index의 문자열을 반환할 때, 사용한다.charAt보다 \[]을 권장한다.차이점은 해당 index에 해당하는 문자열을 반환할 수 없을 때 나타난다.charAt: 빈 문자열 반환\

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[JavaScript] 자료구조-숫자형

자바스크립트에서 숫자는 두 가지 자료형으로 나눌 수 있다.Number (64비트 부동소수점 숫자로 저장, -2^53 <= x <= 2^53)BigInt (길이에 제한 없음)0의 개수가 많을 땐, e를 붙이고 0의 개수를 붙여주면 헷갈리지 않게 표현할 수 있다

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[JavaScript] Optional Chaining `?.`

Optional Chaining ?.을 사용하면 값이 없는 중첩 객체를 안전하게 접근할 수 있다.kotlin, dart에서의 null-safety와 같은 맥락같다.어떤 상황에서 사용하는지 알아보자.위와 같이 어떠한 객체 안에 존재하지 않은 프로퍼티를 참조하면 에러가 발

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[JavaScript] 생성자 함수

생성자 함수는 일반 함수와 차이점이 없지만, 두 관례를 따른다.함수 이름의 첫 글자는 대문자new 키워드를 붙여 실행new Data(...) 함수는 다음과 같이 동작한다.빈 객체를 만들어 this에 할당한다.함수 본문을 실행한다. this에 name 프로퍼티를 추가한다

2022년 5월 16일
·
0개의 댓글
post-thumbnail

[JavaScript] 메소드와 `this`

객체 안에 메서드를 생성해보자.객체 안에 메소드를 생성할 때는 객체 안에 데이터에 사용하기 위함일 것이다.위에 sayName 메소드에서 실제 데이터인 name을 이용해 메소드를 완성시켜보자.다른 언어와 this 동작 방식이 다르다.this의 값이 런타임에 결정된다.화살

2022년 5월 10일
·
0개의 댓글