[TS] enum, keyof, typeof

enum은 변수들을 하나의 그룹으로 묶고싶을 때 사용한다.이넘은 특정 값들의 집합을 의미하는 자료형으로서 타입스크립트에서는 문자형 이넘과 숫자형 이넘을 지원한다.값을 따로 정해주지 않으면 초기 값으로 0부터 시작해 1씩 증가한다.초기 값을 정해주면 초기값으로 부터 1씩

약 9시간 전
·
0개의 댓글
·

[TS] 기본 타입, 타입 명시하는 방법

JS와 마찬가지로 string 타입은 "",''을 사용하고 템플릿 문자열인 \`\`(백틱) 사용도 가능하다.함수에서는 매개변수에 타입을 명시해줄 수 있고 반환값에 대한 타입은 매개변수() 뒤에 :을 붙여서 명시해준다.JavaScript와 마찬가지로, TypeScript

약 17시간 전
·
0개의 댓글
·
post-thumbnail

[React] React Portal이란, React Portal로 modal 구현

왜 새로운 게 끝도 없이 나오는거지...? React Portal은 진짜 생전 첨 들어보는데 인강 듣다가 알게돼서 기록해두기 위해 끄적여본다...공식 문서에 따르면 Portal은 부모 컴포넌트의 DOM 계층 구조 바깥에 있는 DOM 노드로 자식을 렌더링하는 최고의 방법

2023년 1월 19일
·
0개의 댓글
·

[React] 검색기능 구현하기

검색 API 주소 위의 api주소로 데이터 요청을 보내야 하기 때문에 Search 컴포넌트에서 useEffect로 api요청을 보낸다. 검색 api는 데이터가 페이지별로 15개씩 나눠져있기 때문에 데이터 요청을 보낼 때, 어떤 페이지의 데이터를 필요로 하는지 페이지

2023년 1월 12일
·
0개의 댓글
·
post-thumbnail

[React] 검색기능(검색한 단어를 query parameter로 붙여서 queryString url 만들기)

React 프로젝트에서 검색기능을 구현하려고 검색페이지 Router를 생성하던중에 의문이 생겼다. 보통 검색할 단어를 입력하고 그 입력한 단어의 데이터를 보여주는 페이지로 이동하게 되면 url 주소가 그냥 /search 가 아니라 /search?key=value 이런식

2022년 12월 22일
·
0개의 댓글
·
post-thumbnail

[React] Redux에서 navigate 사용해서 데이터 전달해주기

장바구니 아이콘이 평소엔 이렇게 블랙이었다가 장바구니 페이지로 이동하면 밑에처럼 로고 사이트 메인 컬러인 초록색으로 바뀌어야 하는데 이럴 때, 페이지를 이동하면서 얘가 지금 장바구니 페이지구나 하고 알 수 있는 데이터를 보내줘야 했고, usenavigate에서 페이지

2022년 11월 17일
·
0개의 댓글
·
post-thumbnail

[React] paging처리된 api에서 데이터 가져오기

오픈마켓 프로젝트를 진행하던중 장바구니 페이지에서 전체 상품을 가져와야 하는 일이 생겼는데 api가 페이징 처리가 되어 있어서 한번에 데이터를 가져올 방법을 생각해봐야 했다.처음엔 이렇게 코드를 짰는데 무한렌더링이 일어났다. pageNumbers에 배열을 넣어줄 때 i

2022년 11월 4일
·
0개의 댓글
·

[React] Intersection Observer API 활용해서 무한스크롤 기능 구현하기

무한스크롤을 구현하는 방법으로는 scroll이벤트인 onScroll을 사용하는 방법이 있고, Intersection Observer API를 활용하는 방법이 있다.하지만 onScroll을 사용하면 scroll이 일어날때마다 이벤트가 실행돼서 성능 저하의 문제가 생기기

2022년 10월 23일
·
0개의 댓글
·

SPA (Single Page Application)란?

Single Page Application의 약자이고, 의미에 맞게 하나의 페이지로 된 단일 페이지 어플리케이션을 뜻한다. 사용자가 요청한 각각의 페이지를 서버가 생성해서 전달해주는 것이 아니라, 클라이언트가 동적으로 페이지를 다시 적성하는 방식이다. spa의 경우에는

2022년 10월 7일
·
0개의 댓글
·
post-thumbnail

프레임워크와 라이브러리의 차이

프레임워크는 소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합이며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야한다.프레임워크는 어플리케이션 개발 시 필수적인 코드, 알고리즘, 데이터베이스 연동 등과 같은 기능을 위해

2022년 10월 6일
·
0개의 댓글
·
post-thumbnail

[React] DOM과 Virtual DOM의 차이

트리 구조로 되어있는 객체모델.웹페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이다.DOM은 메모리에 값을 가지고있는 표현식이다. HTML DOM은 노드를 탐색하거나 수정할 수 있는 API를 제공한다. (DOM Tree의 노드)DOM은 getElement

2022년 10월 6일
·
0개의 댓글
·

[React] state 변경시 setState로 변경해야 하는 이유

state는 immutble(불변성)을 유지해야 하기 때문이다.state는 컴포넌트 렌더링에 영향을 주는 데이터를 갖고 있는 객체인데, 이것을 업데이트 하기 위해서는 setState,useState가 필요하다. 직접 state를 수정하면 리액트는 render 함수를 호

2022년 10월 5일
·
0개의 댓글
·

[React] props와 state의 차이

둘 다 리액트 컴포넌트에서 다루는 데이터로. React에서 구성 요소가 데이터를 받거나 처리하고 보내기 위해 사용된다.properties의 줄임말불변의 데이터부모 컴포넌트로 부터 상속을 받는다.읽기전용이다.변경이 불가하다.컴포넌트의 상태를 나타낸다.컴포넌트 내부에서 선

2022년 10월 5일
·
0개의 댓글
·

[React] 클래스 컴포넌트, 함수형 컴포넌트 차이

React에서 컴포넌트를 선언하는 방식에는 두 가지 방법이 있다.하나는 크래스형 컴포넌트이고, 또 다른 하나는 함수형 컴포넌트이다. 과거에는 클래스형 컴포넌트를 사용했지만, 2019년 v16.8 부터 함수형 컴포넌트에 리액트 훅(hook)을 지원해 주어서 현재는 공식

2022년 10월 5일
·
0개의 댓글
·

[React] JSX란?

JSX는 (JavaSctipt XML)의 약자이다. Javascript에 XML을 추가한 자바스크립트의 확장 문법이고 XML과 매우 유사하게 생겼다.JSX는 리액트 프로젝트를 개발할 때 사용되므로 공식적인 자바스크림트 문법은 아니지만, 자바스크립트를 기반으로 하고 있다

2022년 10월 4일
·
0개의 댓글
·

[React] Reducx-Thunk , Redux-Saga

redux-thunk와 redux-saga는 둘 다 미들웨어 라이브러리이다.redux의 Flux 패턴에서 맨 처음 액션을 dispatch 하게 되면, 리듀서에서 그 해당 액션에 대한 정보를 바탕으로 스토어의 상태값을 바꾸게 되는데, 이때 미들웨어를 사용하면 액션이 스토

2022년 10월 4일
·
0개의 댓글
·
post-thumbnail

[React] Redux, Recoil

👉 redux와 recoil에 대한 설명과 비교를 하기 전에 이러한 상태관리 라이브러리를 왜 사용하는지에 대한 설명이 먼저 필요하다.react로 개발을 하다보면 상태가 서로 다른 두 컴포넌트에서 필요할 때가 있는데 이때 일반적으로 부모 컴포넌트에 상태를 선언해놓고 필

2022년 10월 4일
·
0개의 댓글
·

여러 작업을 수행하는 애플리케이션

애플리케이션 운영체제를 플랫폼으로 삼아 작업을 수행하는 온갖 종류의 프로그램이나 소프트웨어 시스템을 총칭하는 용어. 조그마할 수도 있고 클수도 있다. 하나의 특정 과제에 집중할 수도 있고 폭넓은 기능을 처리할 수도 있다. 판매될 수도 있고 무료로 배포될 수도 있다.

2022년 10월 4일
·
0개의 댓글
·

나만의 도메인이 갖고 싶다면?

IETF(국제 인터넷 표준화 기구) > 인터넷의 운영, 관리, 개발에 대해 협의하고 프로토콜과 구조적인 사안들을 분석하는 인터넷 표준화 작업기구이다. ICANN(국제 인터넷 주소 관리 기구) > 1988년에 설립된 인터넷의 비즈니스, 기술계, 학계 및 사용자 단체

2022년 10월 4일
·
0개의 댓글
·

[CS] cookie,session,webstorage 차이

첫 번째로 cookie에 대해 설명하기에 앞서 HTTP에 대해서 먼저 알아야 한다. HTTP는 stateless 프로토콜이기 때문에 과거에 교환됐었던 request와 reponse의 상태를 저장하지 않는다. 그렇기 때문에 과거의 상태를 바탕으로 현재의 request를

2022년 10월 3일
·
0개의 댓글
·