코딩하는 고릴라

Jest, React-testing-library와 같은 테스트가 아닌, REST API 통신을 위한 간단한 테스트 베드를 작성했습니다.인풋, 버튼만을 간단히 띄워두고 fetch의 결과를 즉각적으로 확인하고자 테스트용 페이지를 따로 작성했습니다.postman과 같은 툴을 사용하면 용이하겠지만, 이런 테스트 환경을 직접 구축해보고자 하는 개인적인 욕심이 있어 간단하지만 직접 구현하고자 했습니다.  npm run dev를 활용해 개발 환경에서 리액트 어플리케이션을 실행시키는 것처럼, npm run test 명령어를 통해 테스트 베드를 띄울 수 있도록 했습니다.## package.json"scripts": { "dev": "vite dev --open", "test": "vite --mode tes..

공통 컴포넌트들을 조합해, 데이터의 형태별로 특화된 위젯 컴포넌트를 작성합니다. - 데이터의 형태(타입) 에는 캐릭터, 길드, 랭킹 등이 존재 서버로부터 가져온 데이터는 각각의 데이터 형태 별로 작성된 스토어에 저장됩니다. - 해당 스토어에 저장된 값은 데이터 형태별로 특화된 위젯 컴포넌트에서 가져다 사용합니다. 제공하려는 서비스의 특성상, 하나의 위젯 컴포넌트 내부에 다른 형태를 가진 데이터들이 뒤섞여있지 않을 것으로 예상돼 위와 같은 상태 관리 패턴을 활용하고자 합니다. 작성한 위젯 컴포넌트와 스토어 간 강한 의존성이 나타날 수 있으나, 시각적으로 보여질 UI의 형태는 데이터의 종류에 따라 공통분모 없이 분명히 다르게 나타날 것으로 구상하고 있어 개발상 오히려 이점을 가질 수 있으리라 생각됩니다. 상..

import { memo, MouseEvent, ReactNode, useCallback } from 'react';import { BaseComponentProps } from '../../type';export interface ButtonProps extends BaseComponentProps { className?: string; children?: ReactNode; onClick?: (e: MouseEvent) => void;}export const Button = memo(function Button(props: ButtonProps) { const { className, children } = props; const onClick = useCallback( (e: MouseEvent) ..

1. 서버로부터 받아오는 데이터 흐름- UI는 서버로 데이터 요청- 응답으로 받은 데이터 저장- 받은 데이터는 UI 렌더링을 위해 적합한 구조 혹은 값으로의 형태 변환이 필요- 형태가 변환된 데이터를 바탕으로 UI 그리기UI를 출력하는 부분은 전적으로 가공된 데이터에만 의존해, 다른 흐름으로부터의 개입이 없어 복잡도를 낮출 수 있습니다.  2. 유저 인터랙션에 의한 데이터 수정과 리렌더링  - UI는 유저 인터랙션에 의해 데이터를 수정 - 데이터 값의 변경에 따라 출력을 위해 가공된 데이터의 형태도 따라 변경 - 변경된 가공된 데이터를 통해 UI의 리렌더링 발생서버 요청/응답에서와 마찬가지로, 단방향 데이터 흐름을 유지할 수 있습니다. 3. 데이터를 활용한 서버 요청 (검색 등) - 인풋에 값을 입력하는..

https://openapi.nexon.com/ko/game/maplestory/?id=14 NEXON Open API | gameThis is a list of the games provided by NEXON Open API.openapi.nexon.com 메이플스토리에서 제공하는 open API를 활용한 프로젝트를 시작했습니다. Vite + Ts + Swc로 프로젝트를 구성했으며, [1] 디렉토리는 우선적으로 도메인 단위로 구분한 후, 세분화된 내용(component, hook, etc..)을 그 내부에 담는 방식을 활용했습니다.[2] 막상 해보려니 각각의 도메인에 특화된 컴포넌트들이 잘 떠오르지 않아 component, hook등을 우선적으로 나누는 방식을 활용하기로 변경했습니다.[3] 도메인처럼..

기존에 Map 객체를 활용해 API 응답 데이터 캐싱 로직을 구현했었습니다.const cacheData = API_CACCHE_DATA.get('http://localhost:8080/api/team'); if (!cacheData || cacheData.exp { // 캐시 데이터 설정 {data, exp} API_CACHE_DATA.set('http://localhost:8080/api/team', { data: res.data, exp: new Date().getTime + 1000 * 60 * 10, }) // 응답 데이터 활용 console.log..