My Boundary As Much As I Experienced

타입스크립트 is란 무엇인가? API를 짜면서 try-catch문으로 에러처리를 할때 catch(error) { ... } 에서 error의 타입은 보통 unknown이다.이럴 땐 unknown 타입인 error객체에 제대로 된 타입을 찾아줘야한다.그런데 이런 상황에서 isAxiosError라는 함수를 만들어 타입 검사를 하는 예시 하나를 발견했다.import axios, { AxiosError } from 'axios';import { Alert } from 'react-native';// 타입 가드 함수function isAxiosError(error: any): error is AxiosError { return error.isAxiosError === true;}async function fet..

React Navigation이란? (+세팅법)React Navigation은 React Router Dom의 RN버전이다. (웹환경과의 차이가 좀 있긴하다.)세팅법은 공식문서에 보면 나와있다. React Native CLI 기준으로 세팅하고 싶은 분들은 아래 명령어를 치신 뒤npm install @react-navigation/native NavigationContainer를 App.tsx에 import하여 당신의 앱을 두르면 된다.import * as React from 'react';import { NavigationContainer } from '@react-navigation/native';export default function App() { return ( {/* Rest of yo..

펄린 노이즈(Perlin Noise)란?펄린 노이즈(Perlin Noise)는 컴퓨터 그래픽스와 애니메이션에서 자연스러운 텍스처와 패턴을 생성하기 위해 사용되는 알고리즘이다. 켄 펄린(Ken Perlin)이 개발한 이 기법은 랜덤한 값을 기반으로 하지만, 부드럽고 연속적인 변화를 가지도록 설계되어 구름, 산맥, 물결 등의 자연 현상을 시뮬레이션하는 데 유용하다. 펄린 노이즈는 각기 다른 해상도의 노이즈를 합성하여 복잡하고 디테일한 결과를 얻는 프랙탈 노이즈 생성에도 자주 사용된다. p5.js에서의 펄린 노이즈p5.js에선 noise함수를 이용하여 펄린 노이즈를 만들 수 있다. 안에 좌표가 될 숫자값을 하나 넣어줘야한다. 그리고 p5.js의 기본적인 사용성 중 하나인데, draw함수는 1초에 60프레임으로..

내가 요새 듣는 강의인 Nature of Code는 자바스크립트로 인터랙티브 코딩을 배우는 강의이다. 이 NoC는 20년 전에 먼저 책으로 나왔는데, Java의 Processing을 기반으로 되어있는 책이었다고 한다.그러나 감사하게도 2020년대에 The Coding Train이란 유튜버가 자바스크립트의 p5.js로 강의를 리뉴얼하였고,덕분에 내가 편하게 들을 수 있는 것이다. 인터랙티브한 프로덕트들, 특히 게임을 만들기 위한 첫걸음이라고 생각한다. 홧팅~ https://thecodingtrain.com/tracks/the-nature-of-code-2 The Coding TrainAll aboard the Coding Train with Daniel Shiffman, a YouTube channel d..

ReactComponent를 찾을 수 없다는 에러 해결법예전 사이드 프로젝트 진행 도중 UX디자이너 분이 네비게이션 바를 바꾸셨다.react-icons에 있는 기성 아이콘이 아닌 커스텀 svg아이콘을 쓰게 되어 svgr을 쓰게 됐다.그런데 아래 에러가 뜨는 것이다. Module '"*.svg"' has no exported member 'ReactComponent'.Did you mean to use 'import ReactComponent from "*.svg"' instead?  챗지피티에게 물어본 결과, 헛소리밖에 듣지 못했다.아무래도 SVGR의 최신버전을 쓰면서 뭔가 다른 문법으로 바뀐 것으로 의심되었다.찾아보니 SVGR을 4버전 이상으로 이용할 때 svg를 import하는 방식이 달라졌다. 아래..

🧞‍♂️ 혹여 틀린 부분이 있다면 댓글로 알려주시면 감사드리겠습니다. 퀴즈. 부모가 재렌더되면 자식들은 재렌더될까 안 될까?기본적으로 재렌더 된다. 재렌더를 막기 위해 'useCallback' 혹은 'React.memo'를 쓰게 되는 것이다.부모가 자식한테 prop을 아무것도 안 내려주고 있고 자식은 그저 부모에게 마운트만 되어있다고 치자.부모의 state들은 사실 자식에게 하등 상관없지만 부모의 state가 바뀌어 재렌더되면 자식도 재렌더된다. 컴포넌트 재렌더를 막기위한 대표수단 React.memo이걸 막기 위해 쓰는 것이 React.memo이다. 리액트 컴포넌트를 메모이제이션해놓는 방법 중 하나이다.쉽게 말해 캐싱해두고 변하지 않게 하는 방법이다.아래 예시는 이전에 설명한 것처럼 아무런 prop도 ..

공부하게 된 계기사수님의 코드도 그렇고 지금 듣는 RN강의도 그렇고 핸들러를 만들 때 useCallback을 많이 쓴다. 기존에 내가 알고있던 상식으론 useCallback은 컴포넌트가 재렌더되어도함수들이 재생성 되지 않게 도와주는 훅으로 알고있다. 뭐.. 쓰면 좋겠지. 그러나 웹개발에서 굳이 모든 핸들러에다가 useCallback을 두르진 않는다.렌더가 너무 빈번한게 아니라면 함수를 메모이제이션 해놓는 메모리가 더 손해라고 보기도 하니까. 그런데 왜 React Native 앱개발에선 useCallback을 되게 많이 쓸까?그게 궁금해서 찾아보게 되었다.일단 useCallback을 일반적으로 왜 쓰는지부터 알아보자. useCallback을 쓰는 경우컴포넌트 리렌더링 최적화: 콜백 함수를 useCallb..

공부하게 된 계기타입스크립트에는 constant 관리에 2가지 선택지가 있다. as const와 enum이다.나는 보통 as const를 쓰는 편이었는데 (그냥.. const가 친숙해서 썼었다. enum은 넘 생소해..)회사에선 enum을 쓰더라. 왜 enum을 쓰는지 궁금해서 사수님께 물어보기 전에채찍피티와 오픈채팅방에 as const vs enum에 대해 물어보고 기록한 내용이다. 대강 정리하자면... 보통 자바스크립트에 친숙한 개발자는 enum보단 as const를 선호하는 경향이 크나, 개발팀 리더가 자바 경력이 긴 사람이면 enum으로 통일하는 경우도 있다고 한다. 그리고 enum은 참조되지 않아도 트리쉐이킹의 대상이 되지 않기도 하며, 컴파일 시 즉시실행함수 IIFE로 변환되어 흔적이 남는다고..

https://www.acmicpc.net/problem/18111  문제 수준:실버2 문제 요약:lvalue는 세로 N, 가로 M 크기의 집터를 골랐다. 집터 맨 왼쪽 위의 좌표는 (0, 0)이다. 우리의 목적은 이 집터 내의 땅의 높이를 일정하게 바꾸는 것이다. 우리는 다음과 같은 두 종류의 작업을 할 수 있다.좌표 (i, j)의 가장 위에 있는 블록을 제거하여 인벤토리에 넣는다.인벤토리에서 블록 하나를 꺼내어 좌표 (i, j)의 가장 위에 있는 블록 위에 놓는다.1번 작업은 2초가 걸리며, 2번 작업은 1초가 걸린다. 밤에는 무서운 몬스터들이 나오기 때문에 최대한 빨리 땅 고르기 작업을 마쳐야 한다. ‘땅 고르기’ 작업에 걸리는 최소 시간과 그 경우 땅의 높이를 출력하시오. 문제 풀이 전략:이런 문..

unknown 타입이란?타입스크립트에서 unknown 타입은 any 타입보다 좀 더 안전한 대안이다.어떤 타입의 값이든 받을 수 있지만, 실제 어떤 값인지 명확하게 확인한 다음에야 사용할 수 있다. unknown 타입을 사용하는 상황API응답 / 동적 콘텐츠 처리: 외부에서 입력받은 데이터나 다른 라이브러리로부터 오는 컨텐츠를 처리할 때, 해당 데이터의 타입이 불명확하거나 잘 모르겠을 때 unknown을 사용할 수 있다. 이렇게 하면 코드 내에서 추후 해당 값에 대한 타입 검사를 강제하고, 더 안전하게 데이터를 다룰 수 있다.타입 가드 사용 강제: unknown 타입의 변수는 직접적인 연산이나 메소드 호출이 제한된다. 타입 가드(type guards)를 사용하여 이 변수의 실제 타입을 좁혀 나가며 필요한..