개발자의 낙원

동기: 나는 자바 -> 파이썬-> 자바스크립트 순서로 언어를 배웠다. 코딩테스트 연습은 파이썬으로 하고 웹개발은 자바스크립트로 진행하다 보니 두 언어의 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..

미리 보는 결론: 만약 사용하는 패키지 오브젝트의 메서드나 속성이 해당 공식 문서에 없다면, 그 오브젝트를 정의할 때 상속받은 오브젝트가 존재하나 확인하고 관련 문서를 찾아봅시다. on.. 어디서 온 녀석이지? 노마드코더의 zoom 무료 클론코딩 강의를 수강하던 중이었다. 이 강좌에선 메시지를 주고받기 위해 ws라는 패키지를 이용해 웹소켓 서버를 구축한다. 웹소켓 서버는 on 이벤트리스너를 통해 유저의 접속을 감지한다. 나는 이on에대해 조금 더 자세히 알고 싶었다. 메서드의 반환값이나 감지할 수 있는 이벤트종류등등을 이해한다면 더 다양한 기능을 구현할 수 있기 때문이다. chat gpt에게 webSocket의 on에 대한 질의를 작성하였으나, 서버문제로 먹통이었다. 그래서 웹소켓 서버와 관련된 인터넷 ..

이 글은 먼저 자바스크립트 코드를 통해 글의 동기를 서술하고, 밑부분에 새로고침이 발생하는 이유를 보여주는 구성을 가지고 있습니다. 이유바로 보기 Form(폼) 태그를 다루는 자바스크립트 코드 밑의 코드는 자바스크립트를 통해 폼의 이벤트를 감지하는 예제의 템플릿이다 코드의 구성은 다음과 같다. 1. 변수: DOM document 오브젝트의 메서드를 통해 폼 태그가 저장되어 있다. 2. 콜백함수: "submit"이벤트가 폼태그에서 발생했을 때 호출된다 3. 이벤트리스너: 1번의 변수에 저장한 폼의 "submit" 이벤트를 감지하는 비동기함수이다. const myForm = document.querySelecotr("form") /**Event Listener는 콜백함수의 첫 인자로 * event 오브젝트를..

Mdn문서 설명: getMonth() 메서드는 지역시간에 근거한 달력을 0-기반 값으로 반환합니다. (숫자 0은 그 해의 첫 달을 의미합니다.) *이글의 작성일자: 2023/03/14 getFullYear은 2023을 잘 반환한다. 다른 메서드 getDate도 오늘이 14일임을 정확히 알려준다. 그런데 getMonth만 시작 숫자가 0을 기반으로 설정되어 있어서 현재 달에 해당하는 숫자보다 1 낮춰서 반환한다. 즉, 2를 반환한다. 당장 콘솔창을 열어서 아래의 코드를 입력해보면 2023/2/14를 얻을 수 있다. const today =new Date(); today.getFullYear() today.getMonth() today.getDate() 비슷한 zero-base 메서드를 찾아보면 getDay..

일반적으로 하나의 웹페이지를 개발할 때, html, css, 그리고 javascript 세 종류의 파일에 코드를 분리해서 저장한다. html 문서의 구조 사실 스타일을 지정하거나, 브라우저의 동작을 지정할 코드들도 html 문서 내부에 충분히 작성할 수 있다. 그렇다면 대체 왜 개발자들은 css파일과 javascript파일을 따로 분리해서 html 파일에 연결해 주는 방식을 택한 것일까? html 파일 하나에 모두 작성하지 않는 이유! 를 CSS와 javascript 를 통한 html 태그의 조작을 간단히 소개하면서 살펴보겠다. 기술적 이유: 사실은 이렇습니다. CSS (Cascading Style Sheets)? CSS는 HTML와 같은 웹페이지 구성요소의 스타일을 지정하는 언어이다. CSS코드를 HT..

자바스크립트에선 놀랍게도 랜덤정수를 출력하는 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 ..

자바스크립트에는 원하는 길이만큼 문자열을 늘려주는 메서드가 있다. 바로 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 메서드 함수를..