전체 글

[ JS ] Strings

🔴 Using BackQuote ⚪ ` `를 사용하여 문자열과 변수를 + 연산자 없이 표현할 수 있다. const add = (a, b) => a + b; console.log(`hello how are you ${add(6, 6)}`); 🟠 HTML Fragments const wrapper = document.querySelector(".wrapper"); const addWelcome = () => { const div = ` Hello `; wrapper.innerHTML = div; }; const wrapper = document.querySelector(".wrapper"); const friends = ["me", "lin", "hyun", "hun"]; const list = ` Peop..

[ JS ] Functions

🔴 Arrow Functions const names = ["Jeong", "Seung", "Ryong"]; // using normal function const array = names.map(function(item) { return item + " ❗"; }); // using array function const array = names.map(item => { return item + " ❗"; }); // using implicit return // 🔑 { }를 사용하면 안 됨. const array = names.map(item => item + " ❗"); 🟠 'this' in Arrow Functions ⚪ this를 사용하여 스코프 범위에 해당하는 객체를 얻어올 때는 Arrow fun..

[ JS ] Variables and Operator

🔴 Dead Zone ⚪ 자바스크립트는 var, let 계열의 변수가 선언되었을 경우, 스크립트의 최상단으로 끌어올리는 호이스팅을 진행한다. console.log(myName); var myName = "ryong"; 위와 같은 코드를 실행시키면 자바스크립트 내부에서는 호이스팅으로 인해 아래와 같이 해석한다. var myName; console.log(myName); // undefined myName = "ryong"; 하지만 var 대신 let을 사용할 경우 아래와 같이 에러를 발생시킨다. console.log(myName); // error let myName = "ryong"; ⚪ var는 앞으로 절대 사용하지 말자. 🟠 Block Scope ⚪ const와 let은 블록 스코프로 적용되는 변수다..

[ VSCode ] 유용한 단축키

단축키 🔴 Ctrl + K + F 코드 정렬 🟠 Ctrl + , 환경 설정 🟡 Ctrl + ` 터미널 🟢 Alt + ⬆️⬇️ 코드 라인 이동 🔵 Shift + Tab 내어쓰기 🟣 F1 커맨드 팔레트 🟤 Ctrl + P 파일 이름 검색하여 열기 🔴 Ctrl + B 슬라이더 바 여닫기 🟠 HOME / END 해당 코드 줄 가장 앞 / 끝 줄으로 이동 🟡 Ctrl + HOME / END 해당 파일 가장 앞 / 끝 부분으로 이동 🟢 Ctrl + ⬅️➡️ 단어 단위 이동 🔵 Ctrl + Shift + ⬅️➡️ 단어 단위 선택 🟣 Ctrl + Enter 코드 작성 중 다음 줄로 내려가기 🟤 Ctrl + D 같은 단어 선택 🔴 Alt + Click 다중 커서 삽입 명령어 🔴 touch [파일명] 파일 생성 🟠 mv ..

[ React ] 웹 소켓 통신 + Web Audio API

🔴 TTS ⚪ 시나리오 🔔 TTS 테스트를 진행하고 싶은 텍스트를 입력한 후 서버로 전송한다. 🔔 서버에서 일정 chunk 단위로 나눠서 입력한 텍스트에 맞는 음성 Raw 데이터가 웹 소켓 통신으로 도착한다. 🔔 음성 데이터를 버퍼에 저장한 후 오디오로 재생시킨다. ⚪ 코드 const TtsScreen = () => { const inputText = useSelector(state => state.tts.inputText); const isPlaying = useSelector(state => state.tts.isPlaying); const dispatch = useDispatch(); // recorder const [player] = useState(() => new Player()); const..

[ Node.js ] 맛보기

⚪ app.js import express from "express"; import cors from "cors"; import bodyParser from "body-parser"; import "dotenv/config"; import favicon from "serve-favicon"; import path from "path"; import defaultRouter from "./router/index.js"; import userRouter from "./router/user.js"; import tokenRouter from "./router/token.js"; const app = express(); // favicon const __dirname = path.resolve(); // 현재 ..

[ React ] Hook

🔴 useState const [ state, setState ] = useState(0); // 변수 선언 // setState 함수의 첫 번째 argument는 현재 state 값이다. setState((current) => current + 1); // 값 변경(비동기) + 렌더링 state = state + 1; // 값 변경(비동기) // 🔍 state 값을 변경하는 방법 const [fruit, setFruit] = useState({ color: "red", name: "apple" }); // 1️⃣ 새로운 객체 만들기 setFruit({ color: "red", name: "strawberry" }); // 2️⃣ prevState 값을 이용하여 이전 state를 사용하기 setFruit..

[ CSS ] CSS 고급 선택자

연결 선택자 하위 요소에 스타일을 적용하는 하위 선택자와 자식 선택자 하위 선택자 ◻️ 부모 요소에 포함된 하위 요소를 모두 선택한다. ◻️ 즉, 자식 요소뿐만 아니라 손자 요소, 손자의 손자 요소 등 모든 하위 요소까지 적용된다. section p { ... } 자식 선택자 ◻️ 하위 선택자와 다르게 자식 요소에만 스타일을 적용한다. section > p { ... } 형제 요소에 스타일을 적용하는 인접 형제 선택자와 형제 선택자 인접 형제 선택자 ◻️ 형제 요소 중에서 첫 번째 동생 요소만 선택한다. h1 + p { coloir: blue; } ◻️ 즉, 무수히 많은 p 중에서 첫 번쨰로 나오는 p만 적용한다. 형제 선택자 ◻️ 인접 형제 선택자와 달리 모든 형제 요소에 적용된다. h1 ~ p { c..

[ Voice ] PCM

아날로그 신호와 디지털 신호 💬 우리가 귀로 듣는 소리는 기본적으로 공기를 타고 전파되는 아날로그 파형이다. 아날로그 신호는 시간에 따라 변화하는 모양이 끈임없이 자연스럽게 이어지게 된다. 💬 이를 디지털 신호로 바꿀 때에는 매시간 변하는 신호의 모양을 순간적으로 포착해서 저장하게 된다. 디지털로 저장되는 동영상과 음성은 그렇게 찰나의 순간을 포착한 상태의 연속으로 이루어져 있다. 💬 이에 따라 디지털로 저장된 사운드를 그대로 재생하면 파형에 계단 현상이 생기게 된다. 그래서 적절한 필터를 거친 디지털 소스의 파형은 원래의 아날로그 신호처럼 매끈하다. PCM이란? 💬 PCM = Pulse-code modulation = 펄스 부호 변조 💬 아날로그 음성 신호를 0과 1의 펄스 신호로 바꾸어 기록하는 방식..