개발자의 낙원

스택 요약정리 부분 바로가기 파이썬 코드부분 바로가기 자료구조 Stack(스택)에 대한 이해 Stack(스택) motivation: 스택 공부 동기 스택은 데이터를 저장하는 자료구조입니다. 한 번에 하나의 정보를 입력하거나 출력할 수 있어요. 정보의 저장 및 제거는 항상 스택 성분의 마지막위치(최상단)에서 일어나요. 만약 스택을 직접 사용하지 않더라도 구조와 동작을 잘 알아두는 것이 좋습니다. 컴퓨터나 프로그램에서 함수의 실행에 대한 이해에 많은 도움이 되거든요. 대부분의 프로그래밍 언어에서 중첩된 함수를 구현할때, 스택 구조를 이용하고 있어요. 함수가 호출되면 콜 스택에 저장하고, 실행이 완료되면 다시 제거하는 방식입니다.. 이러한 스택의 크기는 정해져있어서, 일정 개수 이상의 함수를 중첩하면 스택이 ..

2000줄가까이 되던 글이 800줄로 변했다. 자동저장이 임시저장된 글을 훼손시켰다. 그냥 리액트공부나해야겠다

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

많은 프로그래밍 언어들이 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 메서드 함수를..