분류 전체보기
[Next.js] 딥링크, Next/Link에서 이슈
[Next.js] 딥링크, Next/Link에서 이슈
2022.10.31이슈 import Link from 'next/link'; // 버튼 컴포넌트 지금 바로 쿠폰 확인하기 아래와 같이 // → / 로 바뀌어서, 렌더링되어 링크 동작을 하지 않음. 원인 Next/Link 패키지를 까보자. // node_modules/next/dist/client/link.js: Link 컴포넌트 패키지 const { href , as } = _react.default.useMemo(()=>{ const [resolvedHref, resolvedAs] = (0, _router).resolveHref(router, hrefProp, true); return { href: resolvedHref, as: asProp ? (0, _router).resolveHref(router, asProp) ..
[Next.js] jest로 unit Test 하기
[Next.js] jest로 unit Test 하기
2022.10.311. jest란? 💡 Jest is a delightful JavaScript Testing Framework with a focus on simplicity. It works with projects using: Babel, TypeScript, Node, React, Angular, Vue and more! 출처: jest 공식 홈페이지 코드가 제대로 동작하는지 확인하는 Test case를 만드는 JS Testing Framework(페이스북이 개발)이다. 2. Setting up jest (with Rust Compiler) Next.js 12 버전부터 Next 내부에 Jest를 위한 설정이 built-in 되어 있다. 1. 패키지 설치 Jest를 셋업 하기 위해 jest, jest-environm..
[Emotion] CSS 속성 사용시 타입 에러 해결 방법(with Next.js)
[Emotion] CSS 속성 사용시 타입 에러 해결 방법(with Next.js)
2022.09.07[Emotion] CSS 속성 에러 해결 방법(with Next.js) 이슈 발생 아래와 같이 @emotion/react 모듈의 css 함수를 사용하면 type 에러가 발생한다. import styled from '@emotion/styled'; import { css } from '@emotion/react'; // ... Blog 더보기 에러내용 (ts.2322) Type '{ children: string; css: SerializedStyles; }' is not assignable to type 'DetailedHTMLProps'. Property 'css' does not exist on type 'DetailedHTMLProps'.ts(2322) 원인 @types/react/index.d.t..
[Emotion] emotion(with next v12) 세팅 방법
[Emotion] emotion(with next v12) 세팅 방법
2022.09.07[Emotion] emotion(with next v12) 세팅 방법 emotion 설치 yarn add @emotion/react @emotion/styled 참고: Emotion 공식 Doc SWC 컴파일러 설정 Next 12버전 부터는 Rust 컴파일러 기반의 웹 전용 오픈형 플랫폼 SWC를 사용하게 되면서, 기존 Next(v12 이전)Emotion을 사용하기 위해 필요하던 @emotion/babel-plugin 바벨 플러그인을 대신하여 SWC 컴파일러를 사용할 수 있다. (관련 Next Doc) // 기존 바벨 사용시 .babelrc { "presets": ["next/babel", "@emotion/babel-preset-css-prop"], "plugins": [] } 이를 위해 next.co..
[2022 최신] 🇨🇳 중국 주식 시가총액순위 TOP 100
[2022 최신] 🇨🇳 중국 주식 시가총액순위 TOP 100
2022.06.11[2022 최신] 🇨🇳 중국 주식 시가총액순위 TOP 100 안녕하세요 Nuhends 입니다. 🇨🇳 중국 주식 시가총액 TOP 100개 기업에 대해 알아보겠습니다. (2022/06/11 기준) (📌 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요) 🗒 국가별 주식 순위 관련 포스팅들 - 전세계 주식 시가총액순위 TOP 200 - 🇯🇵 일본 주식 시가총액순위 TOP 100 - 🇩🇪 독일 주식 시가총액순위 TOP 100 - 🇫🇷 프랑스 주식 시가총액순위 TOP 100 - 🇬🇧 영국 주식 시가총액순위 TOP 100 - 🇭🇰 홍콩 주식 시가총액순위 TOP 100 - 🇻🇳 베트남 주식 시가총액순위 TOP 100 - 🇮🇳 인도 주식 시가총액순위 TOP 100 🔥 업데이트 노트 1등인 Tencent의 경우 4..
[이펙티브 타입스크립트] 객체 래퍼 타입 피하기
[이펙티브 타입스크립트] 객체 래퍼 타입 피하기
2022.06.10자바스크립트와 기본형 타입 자바스크립트의 기본형 값들에 대한 7가지 타입(number, boolean, string, undefined, null, symbol, bigint) 기본형들은 불변(immutable)이며 메서드를 가지지 않는다. 하지만 'birdview'.charAt(3) 는 문제없이 실행되며, 이는 기본형 값인 ‘birdview’가 메서드를 가지고 있는 것처럼 보인다. 하지만.. chatAt은 string의 메서드가 아니다. chatAt을 사용할 때 내부동작이 발생 (기본형 string에는 메서드가 없지만, 객체 String 타입이 정의) 래퍼 객체 (Wrapper Object) 레퍼 객체는 총 3가지(Number, String, Boolean)이 있다. let name = 'birdvie..
[VScode] Turbo Console Log 마지막 줄에 찍힐 때 해결 방법
[VScode] Turbo Console Log 마지막 줄에 찍힐 때 해결 방법
2022.06.10이슈 VScode에 Turbo Console Log 유용한 확장 프로그램이 있다. console.log 하고 싶은 키워드를 select하고 control + option + L 입력시 현재 line 넘버를 포함하여 cosnole.log 를 찍어준다. 그런데 문제는 console.log 구문을 현재 파일의 최하단에 생성하는 경우가 있었다. 해결 방법 최신 버전에서 2.1 버전으로 다운그레이드하면 현재 위치에서 log를 찍어준다. 참고 - https://marketplace.visualstudio.com/items?itemName=ChakrounAnas.turbo-console-log - https://github.com/Chakroun-Anas/turbo-console-log/issues/108
[JS] 객체에 조건부 프로퍼티 적용하기
[JS] 객체에 조건부 프로퍼티 적용하기
2022.06.05객체에 조건부 프로퍼티 적용하기 작업 중에 query 객체에 특정 프로퍼티를 조건부로 적용해야하는 경우가 있었다. 예를 들어 page라는 param을 주는 상황에서 특정 값이 있을 때 param을 주고 싶다. const query = {}; if (page) { query.page = page; } 위 코드처럼 if문으로 query 객체에 prop을 추가해줄 수 있다. 하지만 조금 더 간단하게 짤 방법을 알아봄 const query = { ...(page && { page }) }; // 여러 params가 있는 경우 const query = { ...(page && { page }), ...(category && { category }), ...(type && { type ) }; spread 연산자..
[이펙티브 타입스크립트] 타입 공간과 값 공간의 심벌 구분하기
[이펙티브 타입스크립트] 타입 공간과 값 공간의 심벌 구분하기
2022.06.05타입스크립트의 심벌(symbol)은 타입 공간이나 값 공간 중의 한 곳에 존재한다. 심벌은 이름이 같더라도 속하는 공간(타입 or 값)에 따라 다른 것을 나타낼 수 있기 때문 // Cylinder은 타입으로 사용 interface Cylinder { radius: number; height: number; } // Cylinder로 이름은 같지만 값으로 사용 const Cylinder = () => (radius: number, height: number) => ({ radius, height }); // => Cylinder는 상황에 따라 타입 or 값으로 둘다 사용될 수 있음 function calcVolume(shape: unknown) { if(shape instanceof Cylinder) { ..
[이펙티브 타입스크립트] #4 구조적 타이핑에 익숙해지기
[이펙티브 타입스크립트] #4 구조적 타이핑에 익숙해지기
2022.06.05자바스크립트는 덕 타이핑(duck typing) 기반이다. 💡 덕 타이핑이란? 객체가 어떤 타입에 부합하는 변수와 메서드를 가질 경우 객체를 해당 타입에 속하는 것으로 간주하는 방식이다. 이는 덕 테스트(The Duck Test)에서 유래되었는데, “만약 어떤 새가 오리처럼 걷고, 헤엄치고, 꽥꽥거리는 소리를 낸다면 나는 그 새를 오리라고 부를 것이다.” JS 에서 어떤 함수의 매개변수 구성 요소가 요구사항을 만족한다면, 타입이 무엇인지 신경 쓰지 않는 동작을 그대로 모델링합니다. 하지만 Type checker는 타입에 대한 이해도가 사람과 다른 면이 있어 예상치 못한 결과가 생기기도 함 ⇒ 구조적 타이핑을 제대로 이해해야만 오류를 제대로 파악할 수 있고, 견고한 코드를 짤 수 있음 interface V..
[TypeScript] e.target.target 타입 에러가 나는 이유 ts(2339)
[TypeScript] e.target.target 타입 에러가 나는 이유 ts(2339)
2022.06.041. 문제 발생 const handleSearchValue = (e: KeyboardEvent) => { setSearchValue(e.currentTarget.value); setSearchValue(e.target.value); // error 발생 }; e.target과 e.currentTarget의 type alias가 다르다구..? 외 안되?! react/index.d.ts 를 까보면 // @types/react/index.d.ts interface BaseSyntheticEvent { nativeEvent: E; currentTarget: C; target: T; // ... } - KeyboardEvent는 BaseSyntheticEvent 타입을 extends하고 있다. 2. current..
[2022년 최신] 전세계 자동차 회사 TOP 40, 시가총액 순위
[2022년 최신] 전세계 자동차 회사 TOP 40, 시가총액 순위
2022.02.16[2021년 최신] 전세계 자동차 회사 시가총액 순위 최근 전기/수소차가 주목받으면서 자동차 관련 회사들에 관심이 급증하고 있습니다. 이번 포스팅에서는 전세계 자동차 회사 TOP 40개 기업에 대해 알아보겠습니다. (2022/02/16 기준) (📌 주기적으로 업데이트 예정이니 최신으로 생각하고 봐주세요) 🗒 국가별 주식 순위 관련 포스팅들 - 🌏 전세계 주식 시가총액순위 TOP 200 - 🇯🇵 일본 주식 시가총액순위 TOP 100 - 🇩🇪 독일 주식 시가총액순위 TOP 100 - 🇫🇷 프랑스 주식 시가총액순위 TOP 100 - 🇬🇧 영국 주식 시가총액순위 TOP 100 - 🇭🇰 홍콩 주식 시가총액순위 TOP 100 - 🇻🇳 베트남 주식 시가총액순위 TOP 100 - 🇮🇳 인도 주식 시가총액순위 TOP 1..