목록분류 전체보기 (110)
기술 블로그
문제 타입 스크립트를 사용할 때 금기시 되는 것들이 있다. 타입 단언 as any 사용 Typescript에서 as 키워드는 타입 단언(type assertion)을 사용하여 특정 변수 또는 객체가 특정 타입임을 명시적으로 지정할 때 사용됩니다. 그러나 이를 남용하면 런타임 오류를 초래할 수 있으므로 권장되지 않습니다. 어떠한 런타임 오류를 발생할 수 있을까? 주로 발생하는 에러는 개발자가 타입을 잘못 단언하여 발생한다. 이에 런타임에는 js로 변환되어 타입 정보가 없어지고 예기치 않은 오류가 발생한다. 1.프로퍼티 접근 오류 const obj: any = { name: "Alice" }; const age: number = (obj as { age: number }).age; console.log(ag..
.작성중 map의 key 속성을 사용하는 것이 비권장인 주된 이유들은 다음과 같습니다: 성능 이슈: 매번 렌더링할 때마다 변경되는 key를 사용하면, React는 해당 요소와 그 자식들을 매번 새로 생성하고 파괴해야 합니다. 이로 인해 불필요한 리렌더링이 발생하며 성능 저하를 초래할 수 있습니다. 컴포넌트 상태 유지 문제: key가 변경되면, React는 해당 컴포넌트의 상태를 잃어버립니다. 따라서 상태를 유지하려면 안정적인 key를 사용해야 합니다. 인덱스 사용 문제: 배열의 인덱스를 key로 사용하는 것은 안티패턴으로 간주됩니다. 배열에 항목이 추가되거나 제거될 때 인덱스가 변경되므로, 이러한 변경이 컴포넌트의 상태와 관련된 버그를 유발할 수 있습니다. 키 충돌: 유니크하지 않은 key를 사용하면 키..
![](http://i1.daumcdn.net/thumb/C150x150/?fname=https://blog.kakaocdn.net/dn/bucl0V/btsueKO8HTr/fdpuJu8uOuHWEi5jAAJlBK/img.png)
문제 getServerSideProps를 이용하여 api를 요청했을 때 페이지 요청이 너무 오래 걸리는 문제(4~10s) 가 발생했다. 정확히는 api 요청이 아니라 페이지의 로드 자체가 오래 걸렸다. 일반적으로는 api 최적화, 로딩스피너 추가, 이미지 최적화 등을 고려해 볼 수 있으나 내 페이지에 이미지는 없었고 api 요청만 존재 했다. 그러나 비제한적인 호출을 위해 크롤링 api 를 활용했고 고질적인 시간 지연 문제가 발생했다. api를 최적화 할 순 없나? 유투브 써드파티 라이브러리를 사용하기로 한 이상 속도는 타협해야 했다. 크롤링 후 재가공 결과를 반환하는 api임을 감안하면 현실적인 속도이다. 로딩 스피너를 달거나 UI만 미리 불러올 순 없나? 가장 큰 문제는 써드파티 유투브 api는 클라..
문제 Recoil : Duplicate atom key In development, when a file is changed, Next.js re-builds the relevant page entry file.Because it's the same Node.js process, the atom has already been declared.The same thing can happen with HMR when the file change triggers a rebuild of the whole file, or even when the atom is declared inside a component lifecycle/hook and only that is being hot-replaced. 일반적으론 같..
구조분해 할당 :키워드로 별칭 지정 가능 {data: videos} = something recoil 사용법 // 기본 세팅 이후 //해당 atom 불러옴 그 후 훅에 넣음 import { videoListState } from '@/atoms/videoListState'; const [videos, setVideos] = useRecoilState(videoListState);//조회 수정 const v = useRecoilValue(videoListState); // 조회 //혹은 selector 훅을 활용해 기존 atom에서 파생된 데이터를 사용할 수 있음 프로미스를 반환하는 여러개의 콜백함수를 다룰땐 Promise.all을 사용한다. 문제 //코파일럿의 추천 코드 const videoLists =..
서론 서드파티 라이브러리인 'scrape-youtube'를 사용하면서 에러에 부딪혔다 Module not found: Can't resolve 'dns' // access mongodb 위 라이브러리가 리액트를 위한 라이브러리가 아니고 기능적으로 유투브를 크롤링 해 파싱 후 데이터를 재가공하여 넘겨주는 라이브러리라 진행 도중 몽고db에 접근하는 것으로 보인다. 즉 서버 사이드단에서 처리가 필요해 보인다. 해결 export const getServerSideProps = async () => { const { videos } = await youtube.search('김재관'); const videosJson = JSON.stringify(videos); return { props: { videosJson..
Next.js에서의 서버 컴포넌트와 getServersideProps 그리고 not found dns 동적 스크롤 애니메이션 next.js 공식문서 해설 (13)
import axios from 'axios'; import { useQuery } from 'react-query'; const fetchSuperHero = (heroId) => { return axios.get(`http://localhost:4000/superheroes/${heroId}`); }; export function useSuperHeroesData(heroId) { return useQuery(['super-hero', heroId], () => fetchSuperHero(heroId)); } const { refetch } = useQuery( 'super-heroes', fetchSuperHeroes, { enabled: false, }, ); return ( RQ Super H..
yarn add react-query import axios from 'axios'; import React from 'react'; import { useQuery } from 'react-query'; function RQSuperHeroes() { useQuery('super-heroes', () => { return axios.get('http://localhost:4000/superheroes'); }); return RQSuperHeroes; } export default RQSuperHeroes; useQuery(쿼리키, 프로미스를 리턴하는 콜백함수,{옵션}) 와 같이 기본 구조를 가진다. 인자값 중 쿼리키와 프로미스를 리턴하는 콜백함수는 v4에서 옵션 객체의 queryKey와 queryFn..
프로토타입 기반 상속 js에서 모든 객체는 다른 객체를 프로토타입으로 가진다. // 부모 생성자 함수 function Parent(name) { this.name = name; } // 부모 메서드 추가 Parent.prototype.sayHello = function() { console.log(`Hello, I'm ${this.name}`); }; // 자식 생성자 함수 function Child(name, age) { Parent.call(this, name); // 부모 생성자 호출 this.age = age; } // 프로토타입 체인 설정 Child.prototype = Object.create(Parent.prototype); Child.prototype.constructor = Chi..