Ryong Note

[ Web Audio API ] Introduction

🔴 Web Audio API 자바스크립트로 오디오 소스에 변화를 줄 수 있는 시스템이다. 기본적인 음원 로딩, 재생, 정리 뿐만 아니라 패닝, 디스토션, 딜레이 등 여러 가지 음향 효과를 추가할 수 있고, 파형 막대를 그리는 등 음원 데이터의 시각화도 손쉽게 가능하다. 🟠 동작 과정 Web Audio API의 모든 기능은 AudioContext 객체를 생성하면서 시작된다. AudioContext 객체는 내부에 여러 개의 Audio Node들을 가질 수 있다. 여기서 Audio Node들은 각각 하나의 역할을 수행하는 모듈들이다. 예를 들어 아래와 같은 노드들이 있다고 하자. GainNode : 음원의 볼륨 크기를 조절 PannerNode : 음원에 패닝 효과를 적용하고 조절 AnalyserNode : 음..

[ 1단계 ] 같은 숫자는 싫어

🔴 문제 설명 배열 arr가 주어집니다. 배열 arr의 각 원소는 숫자 0부터 9까지로 이루어져 있습니다. 이때, 배열 arr에서 연속적으로 나타나는 숫자는 하나만 남기고 전부 제거하려고 합니다. 단, 제거된 후 남은 수들을 반환할 때는 배열 arr의 원소들의 순서를 유지해야 합니다. 예를 들면, arr = [1, 1, 3, 3, 0, 1, 1] 이면 [1, 3, 0, 1] 을 return 합니다. arr = [4, 4, 4, 3, 3] 이면 [4, 3] 을 return 합니다. 배열 arr에서 연속적으로 나타나는 숫자는 제거하고 남은 수들을 return 하는 solution 함수를 완성해 주세요. 🟠 제한 사항 배열 arr의 크기 : 1,000,000 이하의 자연수 배열 arr의 원소의 크기 : 0보다..

[ NodeJS ] MongoDB

🔴 Mongoose [NODE] 📚 몽고디비 - 몽구스(Mongoose) 사용법 총정리 Mongoose 모듈 몽구스(mongoose)는 시퀄라이즈와는 달리 릴레이션이 아닌 도큐멘트를 사용하므로 ORM이 아니라 ODM (Object Document Mapping) 이라고 불린다. 몽구스는 노드 프로젝트에서 몽고디비를 다루기 inpa.tistory.com 🟠 몽고디비란? [MONGO] 📚 몽고디비 특징 & 비교 & 구조 (NoSQL) MongoDB 란? MongoDB는 문서 지향 데이터 모델(Document DB)을 사용하는 데이터베이스 이다. 이러한 유형의 모델을 사용하면 정형 및 비정형 데이터를 보다 쉽고 빠르게 통합할 수 있다는 장점이 있다. RD inpa.tistory.com

[ NodeJS ] express

🔴 미들웨어란 무엇인가? [EXPRESS] 📚 미들웨어 이론 & 실용 💯 정리 미들웨어 작성 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간(middle, 미들)에 위치하여 미들웨어 라고 부른다. 미들웨어는 요청과 응답을 조작하여 기능을 추가하기도 하고, 나쁜 요청 inpa.tistory.com 🟠 morgan 미들웨어 [EXPRESS] 📚 morgan 미들웨어 💯 사용법 정리 morgan 모듈 morgan에 연결 후 포트에 접속하면 기존 로그 외에 추가적인 로그를 볼 수 있다. 위 코드를 실행하여 3000번 포트에 들어간 후 콘솔을 보면 아래와 같은 로그가 찍혀있는 것을 볼 수 있다. inpa.tistory.com 🟡 bodyParser / cookieParse 미들웨어 [EXPRESS] 📚 bo..

[ NodeJS ] 파일

🔴 파일 제어 [NODE] 📚 fs 모듈 - 파일 제어 명령어 💯 정리 Node File System 모듈 파일시스템 모듈이란, 파일 처리와 관련된 작업을 하는 모듈로 보통 FileSystem을 줄여서 fs 모듈이라고 줄여 부릅니다. 노드에서 가장 많이 쓰이고 중요한 모듈 중 하나입니다. fs inpa.tistory.com 🟠 버퍼 / 스트림 / 파이프 [NODE] 📚 버퍼 / 스트림 / 파이프 문법 💯 정리 버퍼 (Buffer) 기본적으로 자바스크립트는 이진 데이터(binary data)를 다룰 수 없다. 그런데 서버로 활용하는 노드에서는 TCP streams 이나 파일을 읽고 쓸 수 있어야 한다. 그래서 등장한 것이 buffer이 inpa.tistory.com

[ NodeJS ] 소개

🔴 Introduction [NODE] 📚 노드 듀토리얼 Introduction Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경(Runtime Environment)으로 주로 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. Node.js는 브라 inpa.tistory.com 📌 Node.js는 Chrome V8 자바스크립트 엔진으로 빌드된 자바스크립트 런타임 환경으로 주로 서버 사이드 애플리케이션 개발에 사용되는 소프트웨어 플랫폼이다. 📌 Node.js는 모든 API는 비동기 방식으로 동작하여 Non-blocking I/O가 가능하고 단일 스레드 이벤트 루프 모델을 사용하여 보다 가벼운 환경에서도 높은 Reqeust 처리 성능을 가지고 있다. 📌 N..

Web 관련 링크

🔴 웹 동작 과정과 React의 탄생 [React] 웹 동작 과정과 React의 탄생 React가 탄생하게된 배경과 어떻게 동작하는지 넓고 얕게 알아봐요 😆 velog.io 🟠 Web Server와 WAS 차이 [WEB] 🌐 웹 서비스 구조 (Web서버 / 웹컨테이너 / WAS) 정리 Static vs Dynamic 페이지 Static Pages 정적 페이지 데이터베이스에서 정보를 가져오거나 등 별도의 서버에서의 처리가 없어도, 사용자들에게 보여줄 수 있는 페이지. 어떠한 사용자가 오던간에 동일한 inpa.tistory.com 🟡 WebSocket이란? [WEB] 🌐 웹 소켓 (Socket) 정리 (역사부터 차근차근) ​ 웹 개발을 처음 배우기 시작했다면 서버와 클라이언트의 통신은 모두 HTTP 프로토콜..

Webpack

웹팩(Webpack) 밑바닥부터 설정하기 최근 웹팩을 설정해서 과제를 제출했다. 웹팩을 '활용'했다고 하기에는 사용한 기능이 빙산에 일각에 불과한데, 이마저도 대부분을 페어로부터 배웠다,,, 혼자 해보면 정말 못할 것 같아서, 다시 365kim.tistory.com 모듈이란, import/export 등으로 재사용이 가능한 코드 조각으로 JS 파일 등을 일컫는다. 번들러란, JS, CSS, 이미지 등의 파일을 묶어주는 작업으로, Webpack은 묶어주는 역할을 하기 때문에 Bundler라고 한다. Bundling 작업이 끝나면 기존 스크립트에서 import/export가 사라지기 떄문에 일반 스크립트로 취급된다. Webpack의 특징 여러 개의 파일을 하나로 Bundling하기 때문에 HTTP 요청 횟수..

[ Hook ] useScroll

🔴 Introduction ⚪ 현재 스크롤의 y 좌표 값을 구해서 리턴해주는 Hook 🟠 Hook import { useState, useEffect } from "react"; export const useScroll = () => { const [state, setState] = useState({ x: 0, y: 0, }); const onScroll = () => { setState({ y: window.scrollY, x: window.scrollX }); }; useEffect(() => { window.addEventListener("scroll", onScroll); return () => window.removeEventListener("scroll", onScroll); }, []); ..

[ Hook ] usePreventLeave

🔴 Introduction ⚪ 현재 페이지를 종료하려고 할 때, 경고 메시지를 띄울지 말지를 결정하는 함수를 리턴해주는 Hook 🟠 Hook export const usePreventLeave = () => { const listener = (event) => { event.preventDefault(); event.returnValue = ""; }; const enablePrevent = () => window.addEventListener("beforeunload", listener); const disablePrevent = () => window.removeEventListener("beforeunload", listener); return [enablePrevent, disablePrevent..