개발자의 낙원

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

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

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

WebRTC의 개념 및 용어에 대한 간단한 설명글입니다. WebRTC란? Web Real-Time Communication (웹 실시간 커뮤니케이션)의 약어이다. 이름 그대로 웹을 통해 실시간으로 정보교환을 가능케 하는 코드가 공개된 무료 (오픈소스) 기술이다. 웹 브라우저끼리, 혹은 웹 브라우저와 서버 간 플러그인 없이 통신할 수 있게 해주는 peer-to peer 앱 프로그래밍 인터페이스(API)를 제공한다. *데이터는 오디오, 비디오 및 기타 데이터를 포함하며 webRTC는 통화나 데이터 공유에 사용된다. Peer - to -Peer (P2P) 통신이란? peer: 동료, 혹은 비슷한 개체들을 뜻하는 단어이다. WebRTC의 peer는 "브라우저"를 의미한다. Peer to Peer 통신: 서버등의..