1. toString() 10 진수 -> 2진수 / 16진수 let num = 10; num.toString(); //"10" num.toString(2); //"1010" ->2진수로 변경 2. Math Math.PI : 원주율 Math.ceil() : 올림 Math.floor() : 내림 Math.round() : 반올림 toFixed() : 숫자를 고정 소수점 표기법으로 표시 let number = 30.1234; //소수점 둘째자리까지 표현(셋째 자리에서 반올림) number.toFixed(2); => "30.12" number.toFixed(0); => "30" number.toFixed(6); => "30.123400" **주의해야할 점! toFixed는 문자형을 반환하기 때문에 다시 숫자형으..

심볼(Symbol)이란? ES6에 새롭게 추가된 7번째 타입으로 변경 불가능한 원시타입의 값이다. 심볼은 주로 이름의 충돌 위험이 없는 유일한 객체의 프로퍼티 키(property key)를 만들기 위해 사용한다. 즉 기존의 객체에서 property key는 문자형이었지만 추가로 더 가능한 형태는 Symbol이다. 심볼은 유일한 식별자를 만들 때 사용한다. 즉, 심볼은 유일성을 보장한다. const a = Symbol(); const b = Symbol(); //new를 붙이지 않는다. console.log(a) => Symbol() console.log(b) => Symbol() a === b; -> false a == b; -> false const a = Symbol('id'); -> 설명을 넣어줄 ..

https://lannex.github.io/blog/2021/3-typescript-tricks/

이번에 오픈마켓 프로젝트를 하면서 무한 스크롤 기능 구현에 도전해보았다. 상품 목록 불러오기 api를 사용하면 한번에 15개 상품씩만 불러와지는데, 스크롤이 최하단으로 이동할 때 마다 다음 상품목록을 api로 불러오게 하고 싶었다. 마침 이번 프로젝트에서는 리액트 쿼리를 쓰고 있었는데, 리액트 쿼리로 무한 스크롤 구현이 가능하다! 이 에는 크게 리액트 쿼리의 두 가지 기술이 쓰이고, 역할은 다음과 같다. 1. useInfiniteQuery - 특정한 조건이 충족되면 계속해서 api 통신으로 데이터를 불러온다. 이 때 한 번 api 통신이 이뤄질 때마다 page에 담긴다. 예를 들어, 상품목록이 15개씩 불러와진다면, 첫 15개는 page1에 담기고, 그 다음 16번째 부터 시작하는 15개 상품목록은 pa..

Computed Property(계산된 프로퍼티) let a = 'age'; const user = { Name : 'Sam', [a] : 30 //age : 30 } const user = { [1 + 4] : 5, ["안녕" + "하세요"] : "hello" //식으로 넣는 것도 가능하다. } 더보기 Computed Property와 점표기법 차이점 Object Methods(객체에서 사용할 수 있는 메소드들) 1. Object.assign() : 객체 복제 let cloneUser = user (x) => 객체가 복사되는 것이 아니라 객체 참조값이 복사된다. 그렇기 때문에 cloneUser의 값을 수정하면 user의 값도 수정이 된다. 원본을 훼손하지 않고 동일하게 복제하려면 메소드를 써야한다. c..

비슷한 객체를 여러 개 만들 때 생성자 함수를 사용하면 된다. 첫글자는 대문자로 New 연산자를 사용하여 호출 new를 붙이는 순간 함수 내부에서 빈 객체를 생성하고 객체 property를 만든 후 return 한다. 그렇기 때문에 굳이 안써줘도 됨. 반대로 new를 붙이지 않으면 아무것도 return되는 것이 없기 때문에 'undefined'가 반환된다. function User(name, age){ //this = {}; this.name = name; this.age = age; //return this; } *this란? 함수가 속해 있는 객체를 가리키는 변수. let user1 = new User('Mike', 30); let user2 = new User('sam', 20); let user3..

리액트를 쓰다보면 state, props 개념을 싫더라도 알게 되고 사용하게 되는데, 이 때 자식 컴포넌트에서 props로 넘긴 값을 상위 컴포넌트에서 state로 props로 값을 정해주게 된다. 쉽게 예를 들어보면 function 부모컴포넌트() { return( ) } function 자식컴포넌트(props) { return( Hello, {props} ) } 자식 컴포넌트의 props는 상위 부모컴포넌트에서 "안녕" 이라는 값을 넘겨주게 되고, 컴포넌트가 렌더링 되면 Hello, 안녕 이렇게 보이는 것이다. 이렇게 state props는 부모 -> 자식 단방향으로 값을 정해주는데, 만약 반대로 자식 -> 부모 방향으로 값을 정해줘야한다면 어떻게 해야할까? 일단, 거두절미하고 결론만을 말하면 "함수..

1.변수 (var/let/const 차이) var는 한번 선언된 변수를 다시 선언할 수 있다. var는 선언하기 전에 사용할 수 있다. (호이스팅) Let과 Const는 TDZ(Temporal Dead Zone) 영향을 받기 때문에 할당하기 전에는 사용할 수 없다. 호이스팅은 스코프 내에서 일어난다. *호이스팅 : 스코프 내부 어디서든 변수 최상위에 선언된 것처럼 행동(var, let, const, function, class 등의 모든 식별자들은 호이스팅 된다.) 변수의 생성과정 Var 1. 선언 및 초기화 단계 2. 할당단계 Let 1. 선언단계 2.초기화 단계 3.할당 단계 Const 1.선언 + 초기화 + 할당 *TDZ(Temporal Dead Zone)이란? 일시적인 사각지대라는 의미로 스코프 ..

이번에 반응형 웹 클론 코딩을 하면서 vite라는 것을 써볼 기회가 생겼다. vite가 무엇인지 여기서는 생략하고 vite 사용 방법과 그 후 github페이지에 배포하는 방법을 글로 정리해보려한다. vite가 무엇인지 간단하게 정리해 둔 참고 사이트 Introduction | Cracking Vue.js Vite 비트(Vite) (opens new window)는 기존의 프런트엔드 개발 경험을 향상시켜줄 새로운 프런트엔드 툴입니다. Vue 창시자 에반 유가 만들었으며 현재 Vue, React, Svelte 등의 주요 프레임워크 커뮤니티에 joshua1988.github.io 1. vite 설치 우선, 프로젝트를 시작할 폴더 디렉토리에서 터미널에 npm create vite@latest를 입력한다. 그런..