어제 보다 나은 나

API를 요청할 때 보면, 404, 502등 요청 자체의 에러가 나는 경우라면, try-catch문이나 .catch 메소드에서 처리할 수 있다. 하지만 서버에서 요청을 실패했다는 정보를 가지고 오는 값이 라면, 200이기 때문에 에러를 명시적으로 throw해주지 않으면 분기처리하기가 손이 간다. 간단히 예를 보면try { const 서버값 = await API요청() } catch (err) { console.log(err); } 이런 코드인 경우 서버값이 우리가 원하는 값을 가지고 있는 지, 아니면 서버가 미안하다면서 보낸 message가 들어있을지 아무도 모른다. 각 상태의 타입을 다음과 같다고 한다면export interface 정상리턴 { data: []}export..

내 개인 홈페이지는 next14버전에 styled-component를 사용한 스타일링을 하고 있다. nextjs 14v에서 컴포넌트에서 fetch하는 기능을 공부할 겸 내 게임 캐릭터를 보여주는 페이지를 만들고 있었다. 그런데... 분명 서버에서 해당 데이터를 fetch해서 완성된 html로 내려준다면, 클라이언트 측에서 해당 fetch가 network에 보여서는 안되는데 자꾸 보이는 것이다. 그래서 뭐가 문제인가 gpt와 토론하고 구글링도 해본 결과, ssr이 아닌 csr인 경우라는 것이 잠정적인 원인으로 부각되었다. nextjs에서 'use client'를 사용한 컴포넌트는 클라이언트 사이드로 동작고, nextjs에서 styled-component를 사용하려면 컴포넌트 상단에 'use client'를..

내 개인 페이지에서 뭘 더 할 수 있을지 고민하다가, 내가 지금까지 키웠던 게임 캐릭터들을 모아볼 수 있는 페이지를 만들어볼까 했다. 먼저 로스트아크부터 시작했다. 개발자 페이지에서 API 키 요청해서 받고 해당 API에서 내 캐릭터의 이미지를 가져오는 URL을 next.config.js에 추가해줬다.// next.config.js images: { remotePatterns: [ { protocol: 'https', hostname: 'img.lostark.co.kr', port: '', pathname: '/armory/**' } ] }, next14버전을 사용하고 있는데, 이렇게 외부 URL을 추가해주지 않으면 해당 ..

nextjs가 14버전이 되면서 서버컴포넌트는 서버에서 데이터를 fetch해서 fetch해온 결과물을 client로 보내줄 수 있게 되었다. import Image from 'next/image';import { get_loa_info } from 'src/api/game';export const GameChar = async () => { const loa_character = await get_loa_info.get_character(); return ( {loa_character.ArmoryProfile.CharacterName} );}; 이렇게 컴포넌트안에서 http request를 바로 때리고 await을 사용하여 동기적인 코딩이 가능해 졌는데.. 문제는 ..

최근 면접을 자주 보면서 받았던 질문에 Promise객체에 대한 질문이 종종 있었다. 그 중에 Promise객체에 async/await문법을 적용하지 않으면, try/catch문에서 에러를 처리할수 있을 까요? 없을까요? 이런 질문이 있었다. 물론 제대로 대답 못했다. 했으면 이 글을 안썼겠지 그럼 알아보자 먼저 Promise이다. 기존의 비동기 코드는 콜백함수의 향연이었다. 자바스크립트의 동작방식을 보면, 비동기 코드는 실행되면 콜 스택에 들어갔다가, 이벤트 루프에 의해서 콜백함수가 태스크 큐에 들어가고 응답에 따라 혹은 타이머에 따라 이벤트 루프가 콜 스택이 비었을 때 콜백함수를 콜 스택에 넣어준다. Promise객체가 없을 때엔, 비동기 요청의 상태를 알 수 가 없으니 콜백함수에서 각 상태에 따라 ..

stale-while-revalidateSWR의 유래부터 알아보자. 웹에서 리소스를 요청하게 되면 서버에서 리소스를 가져온다. 근데 이 가져온다는 행위 자체가 돈이 든다. 하지만 그럼에도 불구하고 우리는 최신 데이터를 유지하고 싶어한다.  이를 해소하기 위해서 캐싱을 한다. 한번 가져온 데이터를 key-value형식이든 특정 데이터로 저장하고 있다가, 동일한 요청을 하면 다시 요청하는 것이 아닌 가지고 있던 캐시 데이터에서 값을 넘겨주는 것이다. 물론 너무 오랜시간 저장된 데이터는 최신화가 되지않았을 것이기에 일정 시간을 주기로 캐시 데이터를 최신 데이터로 바꿔준다. 이런 전략을 HTTP에서 활용한 것이 HTTP Cache-Control의 stale-while-revalidate이다.  그렇다면, 이 전..

react에서 사용하는 useEffect와 useLayoutEffect의 차이점이 뭘까. 일단 둘다 컴포넌트가 mount될 때 무언가 작업하기 위해서 사용하는 hook이다.  그럼 차이점은? 바로 실행되는 타이밍이다. 브라우저의 동작으로 알아보자. 브라우저에서 도메인을 쳐서 html을 요청한다.요청받은 서버는 도메인의 html을 내려준다.브라우저는 전달 받은 html을 한 줄 씩 읽어서 DOM을 생성하기 시작한다.이때 CSS를 만나면 CSSOM을 생성하고, link나 script태그를 만나면 DOM생성을 잠시 멈추고 해당 리소스를 요청한다.DOM과 CSSOM을 완성하면, 이를 하나로 합쳐서 Render tree로 만든다. Render tree에는 DOM element중에서도 실제 브라우저에 그려지는 요소..

웹 개발을 하다보면, 스크롤 되는 요소들을 스타일링 하게 되고 스크롤이벤트가 아닌 자바스크립트를 활용하여 스크롤되는 것 처럼 보이게 해야하는 경우도 생기게 되기 마련이다. 그렇다면 그 요소를 스크롤에서 보이게 하는 함수가 있을까? Element.scrollIntoView(); 이런 함수가 있다. 엘리먼트에서 저 함수를 호출하면, 스크롤 되는 박스 안에서 해당 요소가 화면에 보이게 되는데, 보이는 기준도 option을 통해서 컨트롤 할 수 있다. element.scrollIntoView({ block: 수직 정렬 inline: 수평 정렬 behavior: 움직임 설정 }) 만약 block이 top이라면 스크롤되는 부모의 상단에 정렬되고, bottom이라면 해당 부모의 하단에 정렬된다.

웹에서 눈이나 꽃이 내리는 이펙트를 본 적이 있다. 이게 참 낭만이 있다 느껴져서 직접 구현해보기로 했다. 환경은 Next.js 에서 js와 css만을 가지고 만들어 본다. 필요한 데이터 단순하게 "눈이 내린다 > 와 이쁘다" 이렇게 눈과 마음으로 즐기면 안된다. "눈이 내린다 > 눈이 내리는 속도, 바람에 의해서 흔들리는 것" 등등 우리는 이런 것을 계산해야한다. 기본적으로 눈의 좌표를 가지고 있어야한다. 우리의 세상은 3d이지만 브라우저는 기본적으로 2d니까 x,y좌표만 있으면 된다. 그 다음 눈이 내리는 속도 이다. 정리하면 x,y좌표와 눈의 속도 가 되겠다. 구현 먼저 눈의 초기값을 만들어준다. const makeDefaultFaillingData = (count: number = 10) => {..

나는 트수다. 트위치에 하스스톤 밖에 볼게 없던 시절부터 트위치를 시청하는 나는 트위치의 시한부 선고에 통탄을 금치 못하였지만, 어쩌겠는가. 피하지 못하면 즐기라고 나는 트위치 마지막 자낳대를 최대한 즐기려 한다. 멀티 뷰어 먼저 자낳대는 리그 오브 레전드라는 게임을 스트리머들 끼리 진행하는 대회이다. 5명이 한 팀이 되고, 코치와 감독이 스트리머들과 함께 한다. 롤은 게임 안에서 동시 다발적으로 여러 이벤트가 일어나기 때문에, 한번에 한 명의 스트리머의 화면만 보면 아쉬운 부분이 있다. 그래서 한번에 5개의 화면을 볼 수 있게 개발할 것이다. 기술 스택 Next.js, SWR, styled-components 구조 내가 팔로우한 스트리머 목록을 가져오기 위해 트위치 로그인이 필요하기에 localstor..