기먕로기의 로깅

JS는 프로토타입 기반의 다중(멀티) 패러다임 언어이다. -mdn- 패러다임이란? 프로그래밍 언어의 패러다임이란 아래로 정리할 수 있다. 프로그래밍 언어를 사용하여 문제를 해결하는 접근 방식이거나 접근 방식에 따라 사용할 수 있는 도구와 기술을 사용하여 문제를 해결하는 방법 간단하게 프로그래밍 기법이라고 생각해도 좋을 것 같다. 프로그래밍 패러다임에 종류로는 - 명령형 프로그래밍 - 절차적 프로그래밍 - 객체지향 프로그래밍 - 함수형 프로그래밍 - 선언적 프로그래밍 위 뿐만 아니라 많은 패러다임들이 존재한다. 다중 패러다임? 단어 그대로 프로그래밍 언어가 여러 패러다임을 지원한다는 뜻이다. 이런 언어들의 설계 목표는 모든 문제를 가장 쉽고 효율적으로 풀 수 있는 하나의 패러다임은 없다는 것을 인정하고, ..

기술 2023. 1. 18. 16:27

yarn berry? (yarn 2) 기존 node_modules의 문제점을 개선하기 위해 출시된 yarn의 상위 버전이다. next.js 애플리케이션 생성 yarn create next-app ${project name} yarn version 확인 생성한 애플리케이션으로 이동하여 프로젝트의 yarn 버전을 확인한다. yarn -v // 1.22.19 간혹 가다 yarn berry를 적용도 전에 2.xx.xx 이상의 버전 (Major version이 2 이상일 경우 yarn berry에 해당된다.) 으로 확인되는 경우가 있는데, 이 경우는 상위 디렉토리에서 yarn 관련 설정이 되어있을 확률이 크다. 해결 방법은 프로젝트의 상위 디렉토리에 존재하는 .yarnrc.yml 파일을 삭제하면 된다. 버전 변경..

기술 2023. 1. 17. 00:00

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