개발자의 낙원

구조분해 할당: destructuring assignment? 오브젝트의 속성값으로 여러 변수를 초기화 할 때 해당 객체의 구조를 보여주면서, 변수들을 한 번에 선언하는 문법이다. 말로 하면 이해가 안간다. 바로 코드를 보자. const { sockets: { adapter: { sids, rooms}, }, } = wsServer; 위의 코드는 wsServer 객체의 속성인 sockets, 그리고 그 객체의 속성인 adapter의 성분을 sids, rooms 두 변수에 저장하고있다. 아래의 코드와 정확히 같은 기능을 한다. const sids = wsServer.sockets.adapter.sids; const rooms = wsServer.sockets.adapter.rooms; bing gpt에 따..

동기: 나는 자바 -> 파이썬-> 자바스크립트 순서로 언어를 배웠다. 코딩테스트 연습은 파이썬으로 하고 웹개발은 자바스크립트로 진행하다 보니 두 언어의 for in구문이 다른 의미를 가지고 있다는 것을 인지하지 못했다. 또 자바스크립트의 for in과 같은 기능을 하는 구문은 파이썬에 없다. 헷갈리기도 하고 신기하기도 해서 글을 포스팅하기로 했다. 두 언어 간 for 구문비교 파이썬의 for in은 반복자의 성분을 차례대로 실행문에 전달한다. 즉 자바스크립트의 for of와 같은 기능을 한다. 자바스크립트의 for in은 오브젝트의 키 값을 문자열로 차례대로 반환한다. 이런 기능을 하는 함수는 파이썬에 없다. 파이썬의 for in과 자바스크립트의 for of: 반복자 iterable의 성분을 순서대로 가..

false로 평가되는 값 바로 보기 동기: if와 while 조건문을 유연하게 작성하고자, 조건식이 false로 판단되는 값들을 정리하였습니다. *false가 아닌 값들은 전부 true로 판별됩니다. 조건문의 괄호 안에는 부울리언(boolean)타입이 아닌 여러가지 타입의 데이터가 입력될 수 있습니다. if (바로여기) {} while( 여기){} 그러한 데이터들은 모두 true, 혹은 false로 평가됩니다. 예시 truthy "hello" 나 1은 각각 문자열(string)과 숫자(number) 타입을 갖습니다. 하지만 이 값들이 들어간 조건식은 true로 평가됩니다. 이러한 값들을 truthy 라고 합니다 falsy undefined나 null 은 실제로 false가 아니지만, 조건식에선 false..

package.json Node.js환경으로 자바스크립트 프로그래밍을 할 때, 개발 프로젝트의 메타적인 정보가 저장되는 파일이다. *이름, 사용된 패키지 버전정보 등 어디에 쓰이는가? 파악: package.json의 정보를 살펴봄으로써 프로젝트사용된 기술스택의 종류와 버전을 알 수 있다. 관리: 또 작성되어 있는 값들은 터미널의 여러 명령어에 연동되므로 패키지설치 및 관리, 테스트 케이스 실행 등 전체 프로젝트를 손쉽게 관리하는 데에 쓰인다. package.json 생성하기 보통은 개발사작과정에서 다음 명령어를 터미널에 입력하여 프로젝트 초기화를 진행할 때 자동으로 생성된다. npm init 생성된 package.json { "name": "test", : 패키지를 npm에 퍼블리싱할 이름 "versio..

자바스크립트에선 놀랍게도 랜덤정수를 출력하는 built-in(내장) 함수가 없다. 단지 0과 1 사이에서 랜덤 유리수를 출력해 주는 메서드 Math.random() 만이 있을 뿐이다. 하지만 이를 잘 응용하면 원하는 랜덤정수를 출력하는 함수를 만들 수 있다. 목차 1. 최댓값만 설정하기: 0부터 n 사이의 랜덤정수 구하기 2. 최솟값과 최댓값 모두 설정하기: min부터 max사이의 랜덤정수 구하기 간략한 설명 Math.random() ; : 0 이상 1 미만의 랜덤 유리수를 반환한다. Math.random() * X ; : 0 이상 X 미만의 랜덤 한 양수가 반환된다. 위에 만들어진 숫자에 Math.floor함수로 소수점에 해당하는 숫자를 버려주면, Math.floor(Math.random() * (X ..

filter filter 메서드란? : array(배열)의 성분을 필터링하여 새로운 배열을 만드는 메서드. 인자는 콜백함수, 반환값은 배열이다. 기억할 것: 기존의 배열성분을 수정하는 메서드가 아니다. 필터링된 새로운 배열을 반환하는 메서드이다. 문법 // 코드의 형태 array.filter(callback함수); //새로 만들어진 배열을 저장할때 const newArray = array.filter(callback함수); filter 메서드의 인자 1. 인자는 callback 함수이다. 이미 정의되어 있는 함수명이나, 익명함수(arrow function)가 filter 메서드의 인자가 될 수 있다. 2. 콜백함수는 boolean값을 반환해야 한다. true or false를 반환하는 함수가 사용되어야 ..

자바스크립트에는 원하는 길이만큼 문자열을 늘려주는 메서드가 있다. 바로 padStart와 padEnd가 그것이다. 코드형태 padStart(목표길이, pad) padEnd(목표길이, pad) pad(패드)란? pad는 빈 공간을 채우는 물질로, 일상생활에서도 널리 쓰이고 있는 용어이다. 오리털 패딩도 오리털이라는 pad가 채워져 있다는 뜻이다. CSS의 padding에 쓰인 pad도 같은 단어이다. 바로 HTML이 담고 있는 요소의 내용과 border(경계) 사이의 빈 공간에 존재하는 것이 패딩이다. 자바스크립트 예제코드 자바스크립트의 padStart와 padEnd의 첫 번째 인자는 목표 길이이고, 두 번째 인자는 pad로 사용될 문자열이다. 대상 string오브젝트에 입력된 숫자가 문자열의 길이가 될 ..

프로그래밍을 하다 보면 특정 이벤트에 딜레이를 걸어줘야 하는 일이 종종 있다. 자바스크립트에서 자주 사용되는 딜레이 메서드인 setInterval과 setTimeout에 대해 알아보자. 이 두 메서드를 사용할 때 주의할 점은, 딜레이 측정이 동시에 진행된다는 점이다. 간단한 소개 이후 실제 예제를 통해 살펴보자. setTimeout 메서드 함수실행까지 일정 딜레이를 부여하는 기능을 가진 메서드이다. Timeout은 시간초과를 뜻한다. 메서드 코드형태 setTimeout(함수이름, 지연시간); 이때, 지연시간의 단위는 millisecond(밀리세컨드, 천분의 1초)이다. 만약 함수실행까지 10초의 딜레이를 주고 싶다면 두 번째 인자로 숫자 10,000을 집어넣으면 된다. setInterval 메서드 함수를..

타입체크는 타입스크립트의 가장 강력한 기능이다. 하지만 모든 자바스크립트 모듈에 자동적으로 적용되지 않는다. 타입체크가 수행되기 위해선, 사전에 체크할 타입에 대한 정보를 담고 있는 선언 파일 을 등록해 주어야 한다. 타입체크를 지원받을 기본 모듈은 다음위치에 입력되어 있다. tsconfig.json / complierOption 오브젝트 / "lib" 성분 위의 "lib" 성분이 ES6과 DOM을 포함하기에, 우리는 ES6 자바스크립트와 DOM에 대한 타입체크를 지원받을 수 있다. *예시 타입스크립트가 제공하는 정보: DOM의 querySelector 위의 사진을 보면 querySelector가 입력받는 인자의 타입 그리고 메서드에 대한 설명을 살펴볼 수 있다. * Returns the first el..

Access 접근제어자, abstract 제어자, static 제어자, 에 이어서 readonly 제어자에 대해 공부해 보자. 목차 1. readonly 제어자 소개 오브젝트 속성을 "읽기 전용"으로 설정하는 readonly 제어자를 소개한다. 2. 타입스크립트 예제코드 readonly 제어자로 선언가능한 속성들을 다루는 간단한 예제코드를 다룬다. 3. const와 readonly const로 선언한 변수 또한 "읽기 전용" 변수가 된다. 하지만 readonly와 const는 전혀 다른 쓰임새를 가지고 있다. 4. 자바스크립트에서 "읽기 전용" 속성 만들기 많은 타입스크립트 고유 코드들은 컴파일된 자바스크립트 코드에선 자취를 감춘다. 또 코드만 사라지는 것이 아니라 그 기능도 함께 사라진다. readon..