My Boundary As Much As I Experienced

게임을 구현한다는건 언제나 복잡한 과제인거 같다.모든 task를 절차적으로 하기보단 모듈화하여 적재적소에 활용하는 능력이 매우 중요하다는 것을 느꼈고,이를 p5.js에서 어떻게 사용하는지를 알 수 있는 좋은 튜토리얼이었다. let cols; let rows;let size = 25;let board = [];let food; let head; let dir; // head의 진행방향let length = 1;let gameOver = false;function setup() { createCanvas(400, 400); frameRate(5); // 너무 빠르지 않게 프레임을 낮춰줌 cols = width/size; rows = height/size; for (let i=0; i cols-1 |..

이제 그냥 관습적으로 쓰게 된 Axios Instance의 Interceptor..주로 토큰 만료되면 재요청 해주는 기능을 위해 쓴다. Axios Interceptor에 의존하느라전통 방식으로 '토큰 만료 시 재발급 받아 재요청'을 어떻게 구현하는지 고민해보지 않았다.그런데 이번에 듣던 강의에서 위 로직을 전통방식으로 어떻게 구현하는지 경험해봤는데,이참에 둘이 비교해보기로 하였다.   일단 AxiosInstance Interceptor란?Axios 인스턴스는 axios.create()로 생성한, 기본 설정과 인터셉터를 공유하는 Axios 객체이다.이를 통해 애플리케이션 전역에서 일관된 요청 설정을 관리할 수 있다. (모듈화)특히 특정 경로에 대해 토큰을 자동으로 추가하는 등이 대표적인 쓰임새이다.이러한 ..

문제점아래처럼 특정 에러 시 에러 메시지를 표출해주려 했는데타입스크립트가 errorResponse.data의 타입을 추론해내지 못했다. let errorResponse = (error as AxiosError).response; if (errorResponse?.status === 400) { // 'errorResponse.data' is of type 'unknown'.ts(18046) Alert.alert("알림", errorResponse.data.message); dispatch(orderSlice.actions.rejectOrder(item.orderId)); } '뭐 대강 최종 속성인 message는 string이겠지?' 싶어서..

정리해야지 해야지 하면서 안 하고 있던 flex 단축 표기법 공부를 해봤다. 단축 표기되는 속성 목록CSS의 flex 속성은 플렉스 컨테이너에서 플렉스 아이템의 크기와 분포를 정의하는 단축 속성이다.이 속성은 다음과 같은 세 가지 구성 요소를 포함한다. flex-grow: 플렉스 아이템이 컨테이너의 남은 공간을 얼마나 많이 차지할지 결정.flex-shrink: 플렉스 아이템이 컨테이너가 줄어들 때 얼마나 줄어들지 결정.flex-basis: 플렉스 아이템의 기본 크기를 설정.아래처럼 표기된다.flex: [flex-grow] [flex-shrink] [flex-basis];   단축 예시기본값:flex: 0 1 auto;  플렉스 아이템이 남은 모든 공간을 균등하게 차지하게 하려면:flex: 1;이는 fle..

궁금해진 계기어제 백엔드 개발자 분이 주신 데이터를 보고 status, data 부분이 계속 반복된다는걸 깨닫고 ResponseType이란걸 만들어서 재사용하려고 했다.type ResponseType = { status: T, data: ...}  그리고 여느때와 마찬가지로 API함수 안에서 AxiosInstance를 사용해서 호출한 값을 반환하려 했다.그리고 Promise>를 타입지정해주려 했는데res에는 data라는 컬럼이 없다는 에러가 나왔다. export const getAbuserData = async (id: string): Promise> => { if (!id) return false const res = await API.get(`/abuser/${id}`); ..

스타일 객체 props 활용하는 방법React Native에서는 스타일을 정의하고 이를 컴포넌트에 전달하는 방법이 여러 가지 있다. 스타일을 정의할 때, StyleSheet.create를 사용하여 스타일 객체를 생성하는 방법이 대표적인데, 이를 단순히 선언한 페이지에서만 쓰는게 아니라, prop으로 하위 컴포넌트에 내려줄수도 있다. 이때 Props의 타입으로서 StyleProp를 많이 쓰게 된다.StyleProps, StyleProps, StyleProps 등등. style들을 여러 개 담아 배열로 prop화할 수 있는데 이땐 StyleProps 이런 식으로도 활용 가능하다.. 사용 예시:import React from 'react';import { View, Text, StyleSheet, ViewSt..

스크롤이 있는 화면을 만들 때 무엇을 써야하는가?아래처럼 리엑트 네이티브로 스크롤 뷰를 만들 때 어떤 컴포넌트를 써야될까?물론 처음 생각나는 건 ScrollView이다. 그러나 스크롤뷰의 큰 단점이 있는데, 뷰포트에 안 보이는 것까지 모두 다 렌더링 하는 컴포넌트라는 것이다.그래서 서버에서 데이터를 몇십개를 가져오거나, 무한 스크롤로 계속 추가된다면 성능 상으로 매우 안 좋아진다.   FlatList가 더 나은 점이를 보완하는게 FlatList이다. flatList를 쓰면 뷰포트 내에 있는 컴포넌트만 보이게 된다.React Windowing 기법이 적용되었다고 보면 되려나..? 최적화가 더욱 잘 된 느낌이다.  FlatList 사용법을 알아보기 전에 일단 ScrollView로 구현한 것을 보고가자.일반적..

크리에이티브 코딩 모임인 137.5에서 pendulum을 주제로 작업물을 만들어야하는데 "어쩌지.." 하다가기술적으로 어려운 것을 구현하기보다 특이한 컨셉으로 승부하자! 라는 느낌으로 작업물을 만들었다.Truth in Pendulum이라고 해야되나? 마법 진자 거울로 어떤 사람을 비추면 그 사람의 실제 마음 속을 비출 수 있다...라는 요상한 컨셉의 작업을 만드려고 한다. 이제1. 렌즈를 떨어뜨리고 가속도를 붙이는 과정도 보여주기2. 실제 마법렌즈같이 꾸미기3. 렌즈가 감속하여 정중앙에 멈췄을 때 렌즈에 클로즈업되면서 렌즈 속 세계로 들어가기?4. 들어간 세계에서 또 다시 마법렌즈를 사용하여 다른 감정을 보기 등을 구현하려 한다.... 설명이 잘 전달될지 모르겠다. 상상을 위해 아래 그렸던 컨셉 아트들도..

블러가 있는 이미지에서 선명해지는 것을 구현한 함수를 만들었다. preload의 사용법, 만든 이미지의 width/height값을 사용하는 법, filter함수를 사용하는 법 등을 배웠다. 이제 선명한 이미지가 어느정도 blur된 채로 유지할 수 있는 함수도 만들어놔야겠다.이런 필터 함수들은 최종적으로 만들고 싶은 결과물에 쓰기 위해서 만들고 있다.// IMAGESlet img;let blurAmount = 20; // 초기 블러 강도 (0에서 20까지)function preload() { img = loadImage("asset/mayoiga.jpg"); // 이미지 파일 경로}function setup() { createCanvas(img.width, img.height); imageMode(C..

ios 시뮬레이터를 킬 때 위와 같은 에러가 난다면 십중팔구 Xcode에 뭔가 에러가 있는 것이다.왠지는 모르겠지만 이럴 땐 캐시만 비워주면 다시 잘 실행된다. (왜지..) 구글링 결과, 바탕화면 좌측 상단부 애플 아이콘을 클릭하고 이 Mac에 관하여 > 저장 공간 > 관리 > 개발자 > xcode 프로젝트 빌드 파일 > xcode 캐시 삭제를 하면 된다고 한다. 그러나 터미널에서 그냥 아래 코드를 치면 Xcode경로에 있는 캐시를 삭제해줘서 해결되니 간편하다. rm -rf ~/Library/Developer/Xcode/DerivedData/*rm -rf ~/Library/Caches/com.apple.dt.Xcode/*