기먕로기의 로깅

create next app yarn create next-app ${project name} --typescript TypeScript 기반으로 next.js 애플리케이션을 생성한다. yarn 버전 변경 아래 글을 참고해주시면 감사하겠습니다. (yarn berry 미 사용시 skip 하셔도 됩니다.) https://kimyanglogging.tistory.com/8 [Next.js] yarn berry 적용 방법 (with vscode setting) yarn berry? (yarn 2) 기존 node_modules의 문제점을 개선하기 위해 출시된 yarn의 상위 버전이다. next.js 애플리케이션 생성 yarn create next-app ${project name} yarn version 확인 생..

기술 2023. 1. 16. 16:57

truthy 값은 '참 같은 값', falsy 값은 '거짓 같은 값'이다. 무슨 뜻 이냐면, boolean을 기대하는 문맥 (if, && 연산자, 삼항 연산자 등)에서 truthy 값은 true, falsy 값은 false로 평가가 되는 값이다. falsy 값의 예로는 0, -0, 0n, "", null, undefined, NaN 이 존재한다. trythy 값은 거짓 같은 값을 제외한 값이다. 예시를 보자 if(0) { console.log('true'); } else { console.log('false'); } // false null && console.log('true'); // not working "" ? console.log('true') : console.log('false'); // f..

기술 2023. 1. 8. 02:32

무한 스크롤이란? 사용자가 페이지의 하단에 도달했을 때, api를 호출하여 끊임없이 컨텐츠를 로드하는 사용자 경험 구현 방식 1. target 엘리면트를 만든다. 2. IntersectionObserver를 이용하여 target 엘리먼트가 화면에 보여졌는지를 추적한다. 3. target 엘리먼트가 화면에 보여졌다면 api 호출을 하여 기존의 데이터에 받아온 데이터를 덧붙인다. 구현 내용 0. 가정 - 백에서 데이터는 10개씩 받아온다. 1. target 엘리먼트를 만든다 옵저버 인스턴스의 observe 메서드에 target 엘리먼트를 넘겨주기 위해 ref를 만든다. 만약 모든 데이터를 가져왔을 경우를 대비하여 조건부 렌더링을 적용시킨다. (page의 끝을 가져오지 않았다면 target 엘리먼트를 계속 유..

기술 2023. 1. 4. 23:48

문제 상황 const asyncFunc = async (id: number): Promise => { try { // get data with id const {data} = await axios.get(`https://example.com?id=${id}`); return data.name; } catch (e) { // catch... } } id를 parameter로 받아와, string을 반환해주는 비동기 함수 asyncFunc가 있다. const arr = [1, 2, 3, 4, 5, 6, 7, 8] 위의 배열의 값으로 asyncFunc에서 값을 받아와 배열을 만드려고 한다. const brr = arr.map((id) => asyncFunc(id)); console.log(brr); 하지만 위..

기술 2022. 12. 13. 20:13

Google Analytics(GA) 란? 구글 애널리틱스는 현재 구글 마케팅 플랫폼 브랜드 내의 플랫폼으로서, 웹사이트 트래픽을 추적하고 보고하는 구글이 제공하는 웹 애널리틱스 서비스이다. 간략하게 말하자면 구글에서 제공하는 분석 도구이다. 내가 제작 중인 서비스에 적용하여 트래픽이나 사용자 수를 파악하기 위하여 이 도구를 사용하기로 했다. 적용 방법 Next.js + TypeScript 환경에서 개발을 하였으므로 참고바랍니다. 파일 구조 src │── lib └──── gtag.ts │── pages └──── App.tsx 코드 아래의 명령어를 터미널에 입력해 타입을 설치해주고 yarn add -D @types/gtag.js tsconfig.json에 아래와 같이 타입을 추가한다. { "compil..

기술 2022. 9. 26. 23:58