🧱 프론트엔드 주제

서론자바스크립트는 7가지 데이터 타입을 제공하며, 이는 크게 원시 타입과 객체 타입으로 구분할 수 있다. 원시 타입에는 숫자, 문자열, 불리언, null, undefined, 심벌이 있으며, 나머지는 객체 타입에 속한다. 이 두 타입은 세 가지 주요 측면에서 차이를 보인다. 변경 가능성: 원시 값은 변경 불가능한(immutable) 값이다. 반면, 객체는 변경 가능한(mutable) 값이다. 변수 할당: 원시 값을 변수에 할당하면 변수에는 실제 값이 저장된다. 객체를 변수에 할당하면 참조 값이 저장된다. 값의 전달: 원시 값을 갖는 변수를 다른 변수에 할당하면 값에 의한 전달(pass by value)이 일어난다. 객체를 가리키는 변수를 다른 변수에 할당하면 참조에 의한 전달(pass by referen..

객체란?자바스크립트는 객체 기반의 프로그래밍 언어다. 자바스크립트를 구성하는 거의 모든 것이 객체이며, 원시 값을 제외한 나머지 값(함수, 배열, 정규 표현식 등)은 모두 객체에 속한다. 객체 타입의 특징복합적인 자료구조: 객체 타입은 다양한 타입의 값(원시 값 또는 다른 객체)을 하나의 단위로 구성한 복합적인 자료구조다.변경 가능성: 원시 타입의 값은 변경 불가능한 값이지만, 객체 타입의 값은 변경 가능한 값이다. 객체의 구조var person = { name: 'Lee', // 프로퍼티 age: 20 // 프로퍼티};객체는 0개 이상의 프로퍼티로 구성된 집합이다. 프로퍼티는 키(key)와 값(value)으로 구성된다. var counter = { num: 0, ..

타입 변환과 단축 평가타입 변환이란?자바스크립트의 모든 값은 타입을 가진다. 값의 타입은 개발자의 의도에 따라 다른 타입으로 변환할 수 있다.  var x = 10;// 명시적 타입 변환// 숫자를 문자열로 타입 캐스팅한다.var str = x.toString();console.log(typeof str, str); // string 10// x 변수의 값이 변경된 것은 아니다.console.log(typeof x, x); // number 10개발자가 의도적으로 값의 타입을 변환하는 것을 명시적 타입 변환(explicit coercion) 또는 타입 캐스팅(type casting)이라고 한다. var x = 10;// 암묵적 타입 변환// 문자열 연결 연산자는 숫자 타입 x의 값을 바탕으로 새로운 문자..

서론제어문(control flow statement)은 조건에 따라 코드 블록을 실행(조건문)하거나 반복 실행(반복문)할 때 사용한다. 일반적으로 코드는 위에서 아래 방향으로 순차적으로 실행되지만, 제어문을 사용하면 코드의 실행 흐름을 인위적으로 제어할 수 있다.// 제어문 예시var answer = 5;for (let i = 0 ; i 하지만 실행 순서가 변경되는 것은 코드의 흐름을 이해하기 어렵게 만들어 가독성을 해치는 단점이 있다. forEach, map, filter, reduce와 같은 고차 함수를 사용한 함수형 프로그래밍 기법에서는 제어문의 사용을 억제하여 복잡성을 해결하려고 한다. 블록문블록문(block statement/compound statement)은 0개 이상의 문을 중괄호로 묶은 ..

서론연산자는 하나 이상의 표현식을 대상으로 산술, 할당, 비교, 논리, 타입, 지수 연산 등을 수행해 하나의 값을 만든다. 이때 연산의 대상을 피연산자라고 한다.피연산자는 값으로 평가될 수 있는 표현식이어야 한다. 그리고 피연산자와 연산자의 조합으로 이뤄진 연산자 표현식도 값으로 평가될 수 있는 표현식이다.연산자는 "피연산자를 연산하여 새로운 값을 만든다"는 동사의 역할을 하고, 피연산자는 "값"이라는 명사의 역할을 한다고 볼 수 있다. // 산술 연산자 5 * 4 // -> 20// 문자열 연결 연산자'My name is ' + 'Lee' // -> 'My name is Lee'// 할당 연산자color = 'red' // -> 'red'// 비교 연산자 3 > 5 // -> false// 논리 연산자..

서론데이터 타입(Data Type)은 값의 종류를 말한다. 자바스크립트의 모든 값은 데이터 타입을 갖는다. ES6에서는 7개의 데이터 타입을 제공하며, 이는 원시 타입(Primitive Type)과 객체 타입(Object/Reference Type)으로 분류할 수 있다.원시 타입에는 다음과 같은 6가지 타입이 있다.숫자(Number) 타입: 숫자, 정수와 실수를 구분하지 않고 하나의 숫자 타입만 존재한다. 모든 숫자는 실수로 처리된다.문자열(String) 타입: 문자열을 나타낸다.불리언(Boolean) 타입: 논리적 참(true)과 거짓(false)을 나타낸다.undefined 타입: var 키워드로 선언된 변수에 암묵적으로 할당되는 값이다.null 타입: 값이 없음을 의도적으로 명시할 때 사용하는 값이..

값값(value)은 식(표현식, expression)이 평가(evaluate)되어 생성된 결과를 말한다. 평가란 식을 해석해서 값을 생성하거나 참조하는 것을 의미한다. 예를 들어 '10 + 20'이라는 식은 평가되어 숫자 값 30을 생성한다.모든 값은 데이터 타입을 가지며, 메모리에 2진수 즉 비트(bit)의 나열로 저장된다. 메모리에 저장된 값은 데이터 타입에 따라 다르게 해석될 수 있다. 예를 들어 메모리에 저장된 값 '0100 0001'을 숫자로 해석하면 65지만, 문자로 해석하면 'A'이다. 변수는 하나의 값을 저장하기 위해 확보한 메모리 공간 자체 또는 그 메모리 공간을 식별하기 위해 붙인 이름이다. 따라서 변수에 할당되는 것은 값이다.var sum = 10 + 20; // 변수에는 10 + ..

변수란 무엇인가? 왜 필요한가?변수는 프로그래밍에서 데이터를 저장하고 참조하는 기본적이고 핵심적인 개념이다. 변수를 사용하면 값을 메모리에 저장하고, 필요할 때 해당 값을 참조할 수 있다.변수의 중요 개념변수 선언: 변수를 사용하기 위해 컴파일러에게 변수의 존재를 알리는 작업. 변수의 이름과 데이터 타입을 명시한다.변수명: 메모리에 저장된 값을 참조하기 위해 개발자가 붙인 이름. 의미 있고 명확한 변수명은 코드의 가독성을 높인다.값 할당: 변수에 특정 값을 저장하는 작업. 할당 연산자(=)를 사용한다.값 참조: 변수에 저장된 값을 읽어오는 작업. 변수명을 통해 값에 접근한다.컴퓨터는 CPU를 통해 연산을 수행하고, 메모리를 통해 데이터를 저장하고 읽어온다. 예를 들어 '10 + 20'이라는 연산을 수행할..

서론FFmpeg은 오디오 및 비디오를 다루는 라이브러리로, 다양한 멀티미디어 형식의 인코딩, 디코딩, 변환, 스트리밍 등의 작업을 수행할 수 있도록 도와준다. 그리고 FFmpeg WASM은 FFmpeg(FFmpeg)을 웹 어셈블리(WebAssembly) 형식으로 컴파일한 라이브러리이다. 즉, 오디오 및 비디오와 관련된 라이브러리를 웹 클라이언트에서도 나름 자유롭게 쓸 수 있게 만든 것이다. 나는 최근 프로젝트가 이것과 관련되어 있어서 이리저리 만지던 참이었다.그러다가 FFmpeg WASM의 디코딩/인코딩 속도를 과연 높일 수 있을지에 대한 의문이 문뜩 들었다. FFmpeg WASM의 디코딩/인코딩 속도가 워낙 CPU를 학대하는데다가, 워낙 느리기 때문이었다.그렇기에 트랜스코드(특정 형식의 파일을 다른 형..

서론 Flexible Box module. 일명 flexbox라고 불리는 모델은 인터페이스 내의 요소 간 공간 배분과 각종 정렬 기능을 제공하기 위한 레이아웃 모델로 설계되었다. 쉽게 말하자면 요소들을 자유 자재로 옮겨 놓는, 그냥 레이아웃 배치 전용 속성이다. 개인적으로는 레이아웃 정렬 옵션 정도로 생각하고 있다. 첫 번째 div 두 번째 div 세 번째 div 네 번째 div 다섯 번째 div 여섯 번째 div 일곱 번째 div .mains { background-color : orange; border : solid 5px brown; margin : 15px; padding : 15px; display: flex; } .box1 { /* 다른 박스 번호들도 동일 */ background-color..