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를 입력한다. 그런..

https://www.daleseo.com/react-forward-ref/ - 참고 //상위 컴포넌트 function Upload() { return ( ); } export default Upload; 에서 불러온 이미지 파일들이 background로 보여야 했기 때문에 컴포넌트에서 ref를 사용하여 background 속성을 부모 컴포넌트에서 내려주려했다. import { useRef } from "react"; import "./PhotoList.scss"; function PhotoList(ref) { const previewImg = useRef(); return ( ); } export default PhotoList; 단순하게 생각해서 원래 하던대로.. 위처럼 했더니 에러가 났다. 일반 p..

CSS Sprite 기법을 배우면서 또 하나 같이 배운 것은 '레티나 디스플레이' 대응법이다. 레티나 디스플레이는 애플에서 제조하는 아이패드나 아이폰, 맥에서 쓰는 LCD 디스플레이인데 이 디스플레이들은 좀 특별(?)해서, 화면에 이미지를 보여줄 때 약간의 노력이 필요하다. 왜냐하면 같은 이미지 파일이 레티나 디스플레이에선 아래와 같이 흐릿하게 나올 수도 있기 때문이다. 이렇게 레티나 디스플레이에서는 이미지가 다르게 보이는 이유는 바로 "논리픽셀"(우리가 알고 있는 CSS에서 자주쓰는 그 px)과 "물리픽셀"(디바이스에서의 px)이 다르기 때문이다. 즉, 브라우저는 CSS나 html 태그에 표기한 우리가 알고있는 그 px대로 렌더링을 하지만, 브라우저를 보고 있는 디바이스에서의 px값은 우리가 표기한 p..