개발자의 낙원

많은 프로그래밍 언어들이 snake_case, camelCase, PasckalCase 등 저마다의 명명규칙을 가지고 있는 것처럼 HTML 에도 명명규칙이 있다. 왜? html 태그도 id와 class를 통해 관리하니까 쉽고 직관적인 네이밍이 중요하기 때문이다. 가장 대중적인 html 클래스 명명법, BEM에 대해 알아보자. BEM: Block Element Modifier BEM, 뱀은 블록 엘리멘트 모디파이어의 축약어로 HTML 요소들을 block과 그에 포함된 element로 구분하고 거기에 적용시킬 개별적 디자인 특성을 modifier로 구분해서 클래스명을 지어주는 규칙이다. BEM 표기법을 사용하는 유저들은 html의 id속성은 사용하지 않는다. 오로지 class만을 사용한다. 왜? select..

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

최근 노마드 코더의 줌 클론코딩 강의를 들으며 express 와 socket.io 등 다양한 서버 관련 툴을 사용해 보았다. nodejs의 대표적인 모듈인 만큼 정리하고 넘어갈 필요가 있어 본 게시글을 작성하게 되었다. Express란? Node.js에서 기본적으로 제공하는 웹 애플리케이션 *프레임워크 (web application framework)이다. 각종 웹 프로그램과 API를 만드는데 유용한 도구를 제공한다. 빠르고, 심플한 특징 덕분에 학습 및 사용이 용이해 많은 개발자들에게 사랑받고 있는 모듈이다. 요즘 급속도로 성장하고 있는 당근마켓의 푸시 알림도 Express를 사용하고 있다. 당근마켓의 푸시알림을 지탱하고 있는 Node.js 서비스 푸시알림은 당근마켓 서비스에서 채팅, ‘키워드 알림’,..

실시간 화상채팅을 하기 위한 예시 영상을 업로드하기 위한 예시 This browser doesn't support video 이 브라우저는 동영상 재생을 지원하지 않습니다. Attribute (속성) autoplay: 자동재생 비디오가 페이지에 로드되자마자 자동으로 재생되게 하는 속성 요즈음에는 마우스 커서를 올렸을 때, 임시 재생화면을 따로 제공하는 게 유행이라 웹페이지에서는 잘 쓰이지 않는다. 하지만 web으로 구동되는 실시간 영상통화 어플에는 여전히 유용하다. controls: 조작패널 유저와 상호작용하기 위한 기본 조작 ui를 추가하는 속성. 재생, 정지, 볼륨조절, 재생장면 이동 등의 기능을 제공한다. loop: 루프 영상재생이 끝났을때 다시 처음부터 재생하게 하는 속성 muted: 침묵 영상의..

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..

공부동기 지난주부터 자바스크립트를통해 DOM등을 이용해 HTML요소를 조작하는방법을 공부하고 있다. 이중에 자바스크립트가 querySelector를 통해 HTML에 접근할때, 인자를 CSS 선택자로 받아들이는것을 보고 한번쯤은 CSS 선택자를 정리할 필요를 느껴 포스팅을 작성한다. 이 글의 목차 1. CSS개념: HTML요소 스타일링하기 2. 기본 CSS 선택자 3. CSS 선택자 우선순위 4. CSS 선택자 결합하기 1. CSS개념: HTML요소 스타일링하기 목차로 돌아가기 CSS (Cascading Style Sheets)란? CSS는 HTML과 같은 웹페이지 문서의 디자인에 사용되는 언어이다. Cascading은 상하식, 계단식이란 뜻이다. CSS를 사용하여 디자인을 지정하는 HTML, XML, X..