0. 들어가기토스 어시스턴트 면접 이후에 애니메이션과 같은 좀더 역동적인 효과들을 공부해봐야겠다고 생각했다.이전에 구름 1기 당시에 결제했던 웹 애니메이션 API 강의를 들으면서 새로 알게 된 것들을 정리해봤다. 1. transitiontransition은 CSS와 JS에서 요소의 상태 변화에 애니메이션 효과를 추가하는 방법이다.웹 개발에서는 주로 부드러운 인터페이스나 UI의 상태 변화를 주기 위해 사용된다.transition: property duration [delay] [timing-function]; transition에는 CSS 속성과 지속 시간, 속도 곡선, 지연 시간 4가지가 있다. CSS 속성과 지속 시간은 필수지만 나머지 2개는 선택이다. .box { width: 100px; heig..
패키지 매니저란?소프트웨어 개발 과정에서 라이브러리나 프레임워크와 같은 외부 패키지 관리를 용이하게 해주는 도구로, 이를 통해 패키지의 설치, 업데이트, 삭제 등을 쉽고 효율적으로 관리할 수 있다. Node.js 환경에서 가장 널리 사용되는 패키지 매니저는 Node.js의 기본 패키지 매니저인 npm(node package manager) 이외에도 yarn, pnpm과 같은 다양한 패키지 매니저가 사용되고 있다. npm, yarn, pnpm 비교하기이들 모두 Node.js 환경에서 사용되는 패키지 매니저지만 각 패키지 매니저는 독자적인 설계 철학과 목표를 가지고 개발되었기 때문에 내부 동작 방식과 제공하는 기능에서 차이가 있다. npm가장 널리 사용되는 패키지 매니저로 커뮤니티와 패키지 수가 아주 많다...
딥다이브를 읽으면서 클래스를 대강 이해하긴 했지만 실제로 사용해본 적은 없었는데, 타입스크립트 강의를 듣던 중 강사님이 자바스크립트의 클래스에 대해서 간단하게 소개해주셨다. 클래스 클래스는 동일한 모양의 객체를 더 쉽게 생성하도록 도와주는 문법이다. 붕어빵 틀이라고 생각하면 된다. let studentA = { name: 'summermong', grade: 'A+', age: 27, study() { console.log('열심 공부'); }, introduce() { console.log('hi'); }, }; 앞으로 studentB, studentC를 만들 때마다 똑같은 구조의 코드를 짜야 하는데, 이러면 번거로워진다. 하나의 틀(클래스)을 만들고 거기에 재료(매개변수)를 넣을 때마다 붕어빵(객체)..
json-server json 파일로 가짜 서버를 구축할 수 있는 라이브러리 프로덕션 전용은 아니며 프로토타입을 만들거나 학습하는 용도로 사용한다. 폴더를 만들고 터미널에서 아래 설치 코드를 입력한다. json-server Get a full fake REST API with zero coding in less than 30 seconds. Latest version: 0.17.3, last published: 4 months ago. Start using json-server in your project by running `npm i json-server`. There are 314 other projects in the npm registry using json-ser www.npmjs.com n..
콜백 함수 다른 함수의 인자로 넘겨지는 함수 (함수가 부른 다른 함수) 콜백 함수를 둘러싼 콜백 수신 함수에 의해서 특정 시점에 실행이 된다. 동기 콜백 함수라면 호출 즉시 실행되지만, 비동기 콜백 함수라면 특정 조건을 만족했을 때 실행된다. 아래 코드처럼 userInput의 인자로 넘겨지고 있는 greeting 함수를 콜백 함수라고 할 수 있다. function greeting(name) { console.log("안녕하세요" + name); } function userInput(callback) { const name = prompt("이름을 입력하세요."); callback(name) } userInput(greeting); 비동기 콜백 함수의 예시로는 크게 아래 3가지를 들 수 있다. 1. se..
원시 데이터 타입(Primitive data types) 컴퓨터 프로그래밍 언어에서 기본적으로 제공되는 데이터 타입 JS에서 원시 데이터 값은 오브젝트가 아니라 '값'이며 함수를 갖고 있지 않다. 원시 데이터 타입으로는 숫자형, 문자형, 불리언, null, undefined, 그리고 심볼이 있다. 참고로 null, undefined는 래퍼 객체가 없다. 그래서 값으로만 쓰이는 것이다. 원시 데이터 타입은 변수에 직접 값을 할당하거나 함수의 매개변수로 전달할 수 있다. 또 값 복사에 의해 전달되며, 변경 불가능해서 값을 직접 변경할 수 없다. 원시 데이터 타입은 메모리의 스택에 저장된다. 예컨대 아래 코드를 보면 num 변수에 100만 할당되었다. 이 100을 원시값이라고 한다. const num = 10..
yield의 반복 이전 게시글에서 next() 메서드로 호출될 때마다 yield 구문의 값을 반환한다고 했다. yield가 반복되면 어떻게 될까? (이런 생각은 해보지도 않았는데 역시 진짜 개발자들은 다르군) 아래 코드는 yield를 반복하는 형태로 구성되었다. let status = true; function* sports() { let count = 0; while (staus) { yield ++count; }; }; const obj = sports(); console.log(obj.next()); // {value: 1, done: false} console.log(obj.next()); // {value: 2, done: false} status = false; console.log(obj.n..
Generator 이터러블을 생성하는 함수 이터레이션 프로토콜을 준수해 이터러블을 생성하는 것보다 간편하게 이터러블을 구현할 수 있다. function* () 형태로 생성 Generator 함수를 호출하면 함수 블록을 실행하지 않고 Generator 오브젝트를 생성해 반환한다. Generator 오브젝트는 이터레이터 오브젝트다. // function* 선언문 function* sports(one) { }; // function* 표현식 const book = function* (one) { }; // Generator Function const music = Object.getPrototypeOf( function* () {}).constructor; const get = new music(); func..
이번 건 웹 개발에서 사용하는 부분이 많지 않다. 그냥 참고 삼아 적어둔다. Math.trunc() : 소수를 제외한 정수를 반환한다. console.log(Math.trunc(12.56), Math.floor(12.56)); // 12, 12 console.log(Math.trunc(-12.56), Math.ceil(-12.56)); // -12, -12 console.log(Math.trunc("12.56"), Math.floor(true)); // 12, 1 Math.sign() : 값의 부호에 해당하는 값을 반환한다. 양수일 경우 1, 음수일 경우 -1, 0은 부호와 관계 없이 0으로 반환한다. console.log(Math.sign(5), Math.sign(-5)); // 1, -1 consol..
Array.prototype.entries() Array 오브젝트를 Array 이터레이터 오브젝트로 생성하고 반환한다. 배열의 엘리먼트를 [key, value] 형태로 변환한다. for-of문으로 전개할 수 있다. 이터레이터는 다시 반복할 수 없다. Array 이터레이터 오브젝트는 [key, value] 형태로, 배열의 인덱스가 key가 되고 엘리먼트 값이 value가 된다. 끝까지 읽은 이터레이터 오브젝트는 다시 읽을 수 없고, 전부 읽고 나면 undefined가 뜬다. 그래서 아래 코드에서 한 번 더 콘솔을 찍으면 undefined가 찍힌다. const iterator = ["A", "B"].entries(); console.log(iterator.next().value); // [0, 'A'] co..
