post-thumbnail

[React] react-query 사용해보기

다음과 같은 코드를 react-query 를 사용하여 fetch 로직을 따로 분리하도록 하겠다.src/api.ts이렇게 fetch 로직을 api.ts 파일에 따로 분리해둔다. 이 때 async await 형식이 아닌 오래된 방식인 fetch 방식을 사용하였다.src/r

2022년 1월 20일
·
0개의 댓글
post-thumbnail

[BB:PSP 개발기] 프로젝트를 시작하기까지

내가 어느새 4학년... 졸업을 앞두고 있다. 우리과는 졸업 요건으로 졸업프로젝트를 제출해야 하는데 3학년 2학기에 시작해두면 취준할 때 편한다는 소리를 들어서 3학년 2학기에 졸업프로젝트 과목을 수강하게 되었다. 졸업프로젝트 과목은 1년짜리 커리큘럼으로 이루어져있는데

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

[Next.js] Static Generation and Server-side Rendering

Static Generation 은 데이터를 가져와도 되고 없어도 된다. 살짝 말이 이상한데... 어떤 페이지들은 외부 데이터를 fetching 해오지 않으면 HTML을 렌더링할 수 없다. 이를 위해 파일 시스템이나 외부 API, 아니면 데이터베이스 등에 빌드 타임에

2022년 1월 12일
·
0개의 댓글

[Next.js] Navigate Between Pages

Client-Side Navigation Next.js의 컴포넌트는 같은 앱 상의 페이지 간의 을 가능하게 해준다. 은 자바스크립트에 의해 일어나는 페이지 이동으로 브라우저의 기본 네비게이션보다 빠르다. 태그와 를 사용해보면 차이점을 확연하게 느낄 수 있다.

2022년 1월 9일
·
0개의 댓글
post-thumbnail

[Next.js] Pre-rendering

기본적으로 Next.js는 모든 페이지를 pre-renders한다. 이 말은 무슨 말이냐면 client-side JavaScript가 페이지의 HTML을 다 그리게 놔두는 것이 아니라 미리 각 페이지를 위한 HTML을 생성한다는 뜻이다.각각의 생성된 HTML은 최소한의

2022년 1월 8일
·
0개의 댓글

[TypeScript] 제네릭 타입

우리가 타입을 작성하다보면 아 이 타입은 어떻게 작성해야 되지 라는 상황들이 생기기 마련이다. 그럴 때 사용할 수 있는 방법 중 하나로 제네릭이라는 기법이 있는데, 사실 타입스크립트에서만 지원되는 기능이 아니고 고급 언어라고 하면 제공되는 고급 기능 중의 하나이다.여

2022년 1월 8일
·
0개의 댓글
post-thumbnail

[JavaScript] JSON에 대하여

자바스크립트나 타입스크립트의 입장에서 데이터를 주고 받을 때 객체를 주고받을 수 있으면 가장 효과적일 것이다. 하지만 객체는 자바스크립트의 실행하는 시간에 메모리 상에만 존재하는 구조이기 때문에, 데이터로써 주고 받기가 어렵다.이를 해결하기 위해 데이터를 주고받기 위해

2022년 1월 7일
·
0개의 댓글

[React] 스켈레톤 컴포넌트

웹 페이지에서 로드 시간이 짧은 것처럼 보이게 하는 몇 가지 방법 중 하나!데이터가 로드되기 전에 콘텐츠의 자리비움(placeholder)를 표시해서 사용자가 기다리는 시간을 좀 덜 지루하게 느끼게끔 하는 UI장점 : 유저들이 로딩 시간을 조금 덜 지루하게 느낌단점 :

2022년 1월 2일
·
0개의 댓글

[React] react-query를 이용한 포켓몬 도감 만들기 3

이제 정말 본격적으로 포켓몬을 클릭했을 때 나오는 상세 페이지를 작성해보도록 한다.components/About.tsx다음으로 포켓몬의 특성과 능력을 나타내는 Abilities.tsx 컴포넌트를 작성후 About.tsx 컴포넌트 하위에 넣어주도록 하겠다.componen

2021년 12월 31일
·
0개의 댓글

[React] react-query를 이용한 포켓몬 도감 만들기 2

이제 포켓몬 도감 API를 가져오도록 하겠다. PokeAPI DOCtypes/index.ts

2021년 12월 30일
·
0개의 댓글

[React] react-query를 이용해 포켓몬 도감 만들기 1

react-query는 React Application에서 서버 상태를 가져오고, 캐싱하고, 동기화하고, 업데이트하는 작업을 한다.기본적으로 React Application에서는 서버로부터 데이터를 가져오거나 업데이트하는 방법을 제공하지 않는다.개발자는 자체적으로 이

2021년 12월 30일
·
0개의 댓글
post-thumbnail

[Typescript + React] 나만의 책장 만들기 2

본격적으로 페이지 작업을 시작한다.Container-Presenter 구조를 사용할 것이다. 따라서 Signin 같은 경우는 다음과 같이 구성한다.pages/Signin.tsxcomponents/Signin.tsxconatiners/SigninContainer.tsx

2021년 12월 29일
·
1개의 댓글

[Typescript + React] 나만의 책장 만들기 1

TypeScript 기본 문법을 숙지하고 간단한 리액트 프로젝트를 진행하면서 타입스크립트 사용법을 익히기 위함프로젝트 개발 과정을 순서대로 정리하여 리액트 프로젝트를 진행하는 로직을 이해하도록 함해당 프로젝트는 우리가 책을 읽고 그에 대한 느낀점 등을 적어놓는 일종의

2021년 12월 29일
·
0개의 댓글
post-thumbnail

[Next.js] Data Fetching

Next.js는 기본적으로 pre-rendering 이다.이번에는 Next.js의 데이터 페칭에 관련된 유니크한 함수들에 대해 공부해도록 한다.우선 크게 정리해보자면getStaticProps (Static Generation): Fetch Data at build ti

2021년 12월 27일
·
0개의 댓글

[React] 예제로 마스터해보는 Redux

structure프로젝트의 구조는 위와 같다. 기존에 mws를 공부하던 프로젝트에 그대로 진행하였다.npm install @reduxjs/toolkit react-redux우선 npm을 통해 리덕스와 리덕스 툴킷 모두를 다운받는다.src아래 app이라는 폴더 안에 st

2021년 12월 22일
·
0개의 댓글

[React] Memoization

메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술이다. (캐시같은 느낌?)예제 코드를 통해서 이해해보도록 하겠다.

2021년 12월 17일
·
0개의 댓글

[React] Ref로 DOM 다루기

input박스가 있는데 페이지를 로드할 때마다 자동으로 input박스에 포커싱이 되게 하고싶다. 그렇다면 일단 단순하게 다음과 같은 방법을 생각할 수 있을 것이다.하지만 id를 직접 주는 방법은 주로 쓰지 않는다. 대신에 useRef라는 React Hook을 주로 사용

2021년 12월 12일
·
0개의 댓글

[React] Hook Flow 이해하기

useState로 만들어진 set함수는 애초에 인자로 이전값이 들어간다. 따라서 위 코드의 handleClick함수에서 setShow((prev) => !prev)라 작성하여 굳이 if else구문을 사용하지 않아도 되는 것이다.이번엔 useEffect를 살펴보겠다.위

2021년 12월 12일
·
0개의 댓글

[React] 리액트의 리렌더링 알아보기 (2)

개발에 있어서 모든 것은 trade-off 이다.얻는 것이 있으면 잃는 것도 있을 것이다.바뀐 부분만 리렌더링하고 나머지는 그대로... 듣기만 하면 상당히 효율적이고 장점만 보인다. 하지만 개발에 있어서 모든것은 trade-off이다. 분명히 단점도 존재한다. 리액트는

2021년 12월 11일
·
0개의 댓글

[React] 리액트의 리렌더링 알아보기 (1)

리액트와 바닐라 JS의 리렌더링에 있어서의 차이점을 뭐라고 설명하면 가장 알맞을까? 흔히 리액트의 가장 큰 장점은 리렌더링에 있다고 말한다. 바닐라 JS는 변경으로 인해 Element를 다시 그리지만 리액트는 변경된 부분만 다시 그린다.위와 같은 평범한 html 코드를

2021년 12월 10일
·
0개의 댓글