웹 공부일지

1 단계 : [PCCP 기출문제] 1번 / 붕대 감기 코딩테스트 연습 > PCCP 기출문제 > [PCCP 기출문제] 1번 / 붕대 감기 문제 설명 어떤 게임에는 붕대 감기라는 기술이 있습니다. 붕대 감기는 t초 동안 붕대를 감으면서 1초마다 x만큼의 체력을 회복합니다. t초 연속으로 붕대를 감는 데 성공한다면 y만큼의 체력을 추가로 회복합니다. 게임 캐릭터에는 최대 체력이 존재해 현재 체력이 최대 체력보다 커지는 것은 불가능합니다. 기술을 쓰는 도중 몬스터에게 공격을 당하면 기술이 취소되고, 공격을 당하는 순간에는 체력을 회복할 수 없습니다. 몬스터에게 공격당해 기술이 취소당하거나 기술이 끝나면 그 즉시 붕대 감기를 다시 사용하며, 연속 성공 시간이 0으로 초기화됩니다. 몬스터의 공격을 받으면 정해진 피..

React 배너 슬라이더 만들기 + touch evnet 기능 설정한 INTERVAL 마다 다음 화면으로 넘어감 touch event를 구현하여 오른쪽이나 왼쪽으로 밀 때 마다, 화면이 넘어감 코드 import React, { useEffect, useLayoutEffect, useRef, useState } from 'react'; const dummyBannerList = ['tomato', 'violet', 'skyblue', 'teal', 'orange']; const INVERVAL = 2500; const Banner = () => { const divRef = useRef(null); const [start..

'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009) 상황 new 키워드를 사용해서 Image 객체를 만들려고 했더니.. 'new' expression, whose target lacks a construct signature, implicitly has an 'any' type.ts(7009) 라는 typescript 오류 해결 우선 원인은 찾아보니, Image가 생성자 함수로 만들어져 있기 때문인 것 같습니다. export default function Image({ src, sizes, unoptimized, priority, loading, lazyBoundary, classN..

Axios 요청 취소하기 (cancel token) 상황 http 요청을 보냈을 때, 혹여나 취소할 수 있는 방법이 없을까? 하다가 axios 공식문서에 cancel token이 있어서 사용해보기로 했습니다. "react": "18.2.0", "next": "13.3.4" https://axios-http.com/kr/docs/cancellation 사용법 const CancelToken = axios.CancelToken; const source = CancelToken.source(); axios.get('/user/12345', { cancelToken: source.token }).catch(function (thrown) { if (axios.isCancel(thrown)) { console.l..

React Hook useCallback received a function whose dependencies are unknown. Pass an inline function instead. (lint error) 상황 lodash의 debounce와 useCallback을 같이 사용하려고 할 때, 위와같은 lint error를 마주하게 되었습니다. const handleRequest = useCallback(debounce(() => { setLoading(true); setTimeout(() => { axios.get('https://jsonplaceholder.typicode.com/todos/1', { cancelToken: source.token, }) .then((res) => { conso..

* cannot be used as a jsx component 상황 nextjs 에서 npm으로 패키지 관리를 하다가 yarn add 로 라이브러리 하나를 설치했는데 발생 검색을 해보니 @types/react가 없어서 문제가 되는 것 같다. 해결 yarn.lock file 삭제 하거나 그대로 둔 후, npm i @types/react 설치해줍니다. 혹은 그냥 npm으로 설치해주면 오류가 사라졌습니다. 혹은 그냥 yarn.lock 파일 지우고 다시 yarn 실행하면 해결되는 것 같습니다.

IOS / Android 앱 이름 변경하기 상황 AppStore / PlayStore 에 보여지는 앱 이름 변경하기 IOS 변경하기 App Store Connect에 접속 후 새버전을 생성해줍니다. (새버전을 생성하면서 앱이름도 같이 바꿔줘야 합니다.) 후에 App Information 탭에 들어갑니다. 변경하고 싶은 이름으로 변경합니다. 후에 App을 제출하면 검토 후 반영됩니다. 안드로이드 변경하기 구글 플레이 콘솔에 접속해서 ‘앱정보’ 탭에서 → 기본 스토어 등록정보 탭에 들어갑니다. 밑으로 내려보면 등록정보 애셋 항목이 있는데, 앱 이름을 수정해줍니다. 저장하고 검토받으면 완료됩니다.

2 단계 : [3차] 압축 코딩테스트 연습 > 2018 KAKAO BLIND RECRUITMENT > [3차] 압축 문제 설명 압축 신입사원 어피치는 카카오톡으로 전송되는 메시지를 압축하여 전송 효율을 높이는 업무를 맡게 되었다. 메시지를 압축하더라도 전달되는 정보가 바뀌어서는 안 되므로, 압축 전의 정보를 완벽하게 복원 가능한 무손실 압축 알고리즘을 구현하기로 했다. 어피치는 여러 압축 알고리즘 중에서 성능이 좋고 구현이 간단한 LZW(Lempel–Ziv–Welch) 압축을 구현하기로 했다. LZW 압축은 1983년 발표된 알고리즘으로, 이미지 파일 포맷인 GIF 등 다양한 응용에서 사용되었다. LZW 압축은 다음 과정을 거친다. 길이가 1인 모든 단어를 포함하도록 사전을 초기화한다. 사전에서 현재 입..

useDefferedValue 개념 및 사용법 useDeferredValue는 UI 일부의 업데이트를 지연시킬 수 있는 React 훅입니다. 컴포넌트의 최상위 레벨에서 useDeferredValue를 호출하여 지연된 버전의 값을 가져옵니다. import { useState, useDeferredValue } from 'react'; function SearchPage() { const [query, setQuery] = useState(''); // query: 지연시키려는 값입니다. 어떤 타입이든 가질 수 있습니다. // defferdQuery : 초기 렌더링 중에는, 반환된 ‘지연된 값’은 사용자가 제공한 값과 동일합니다. // 업데이트가 발생하면 React는 먼저 이전 값으로 리렌더링을 시도(반환값..

useTransition 개념 및 사용법 useTransition은 UI를 차단하지 않고 state를 업데이트할 수 있는 React 훅입니다. useTransition은 정확히 두 개의 항목이 있는 배열을 반환합니다: 보류 중인 트랜지션이 있는지 여부를 알려주는 isPending 플래그 state 업데이트를 트랜지션으로 표시할 수 있는 [startTransition 함수] (아무것도 return 하지 않음) 사용법 function TabContainer() { const [isPending, startTransition] = useTransition(); const [tab, setTab] = useState('about'); function selectTab(nextTab) { startTransiti..