세줄코딩

맥북프로 m2 13인치 구입기 사양은 아래와 같다. CPU : M2 칩 8코어 RAM: 16GB HDD: 1TB DISPLAY: 레티나 디스플레이 13.3" 없는 살림에 나름 거금을 들여 구입했다. 그렇다고 막무가내로 지를 수는 없었고 쿠팡을 통해 구입했다. ( 절대 쿠팡 홍보아님 쿠팡에서 구매한거는 전자담배밖에...) 공홈보다 45만정도 할인은 받은 듯 했다. 여튼 카드할인에 쿠팡와우에 어쩌구 저쩌구 할인 쿠폰 모든 것을 동원해 고급 스킬을 구사해준 우리 와이프에게 깊은 감사의 말을 전하고 싶다. ㅎㅎ 여튼 박스부터 개봉까지 사진을 공개해 본다. 우왓 9년만에 구입하는 맥북프로~ 자자 조심스럽게 뜯어보자 와 드뎌~ 아오 살떨린다..... 살살 잘 뜯어야지..... 두둥 드뎌 오픈이닷!!!! 와 생각보다..

mac m2 환경에서 nvm 설치 1. brew 로 nvm 설치 brew install nvm 2. 설치 되었는지 버전 확인 nvm --version - 설치가 안되고 nvm not found라는 에러 나오면 환경설정 수정해야 한다. 1. z shell 을 연다. ( 기본 쉘 (Shell) 이 bash 에서 zsh (Z shell)로 변경 되었음을 OS, 즉 노트북을 바꾸고 알았다 ㅠㅠ ) vi ~/.zshrc 2. 쉘스크립트가 열리면 아래 코드를 입력한다 ( vi 로 열었을때 i 를 누르면 insert 즉 입력가능해진다 ) export NVM_DIR="$HOME/.nvm" [ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm export ..

storybook 에 @emotion/babel-preset-css-prop 설정 ( storybook + ts + emotion 환경 ) storybook 에서 컴포넌트를 추가하고 작업하는데 흠 잘 되긴 하는데 소스에 emotion 의 style컴포넌트 명이 입력이 되지를 않고 심지어 실행도 제대로 되지 않는 모양새가 펼쳐지고 있었다. styled 컴포넌트 명이 입력된 상태. styled 컴포넌트 명이 입력이 되지 않고 emotion 의 css 및 styled 가 실행되지 않은 상태. 참고로 span 태그에 입력된 영어를 해석해 보면 `css` 함수에서 반환된 개체를 문자열화하려고 했습니다. 직접 사용해서는 안되며(예: `className` prop의 값으로), emotion 에 전달되어 처리할 수 있..

[ESLintError: [eslint] src/stories/Page.tsx Line 39:13: `"` can be escaped with `"`, `“`, `"`, `”` react/no-unescaped-entities eslint 에서 error 나는 거니 해당 부분을 일단 꺼두면 될거 같아 해보니 잘 된다. .eslintrc.json 의 rules 부분에 아래 react/no-unescaped-entities 부분을 추가해 주면 된다. { "rules": { .......중략............. "react/no-unescaped-entities": 0 } }

storybook + ts+ emotion + storybook 설정 - SassError: SassError: expected "{". storybook 설정하는데 있어서 엄청 삽질을 해서 기록해 두려한다. -------------- 설치된 환경 - 기타 다른 패키지도 많이 설치 되었지만 필수적으로 필요한 것만 나열했다. @craco/craco ( Create-React-App Configuration Override ) - CRA에 config 설정 덮어쓰기 위한 패키지 craco-alias ( 경로 축약을 위한 즉 alias 설정 ../ 를 @ 같은 것으로~) craco-sass-resources-loader ( craco 패키지에 scss 파일 로드를 위한 로더 ) @emotion/react @e..

inter 키워드 Typescript 에서 inter 키워드라는 게 있다. 이게 생각보다 명확하게 이해가 안가서 꽤나 오랫동안 살펴보기도 했다. 요지는 inter 키워드는 조건부 타입이라는 것이다. 아래 URL 에서 해당 내용에 대한 설명을 볼 수 있다. https://typescript-kr.github.io/pages/advanced-types.html TypeScript 한글 문서 TypeScript 한글 번역 문서입니다 typescript-kr.github.io 내용을 보면 조건부 타입의 타입 추론 (Type inference in conditional types) 조건부 타입의 extends 절 안에서, 이제 추론 될 타입 변수를 도입하는 infer 선언을 가지는 것이 가능합니다. 이렇게 추론된..

JSX.IntrinsicElements 이란 React + TS. 형태로 코딩 중에 있는데 간혹 IntrinsicElements & 어쩌구 에러가 발생하곤 했다. 대부분 컴포넌트 네임의 첫문자를 대문자로 하지 않거나 Props 부분에 없는 속성 값을 호출 하거나 하면 발생하는 게 대부분이였다. 근데 IntrinsicElements 얘는 대체 머지???? 나도 좀 헷갈리는 부분이긴 하지만 머 어찌되었건 웹스톰에서 cmd+클릭하면 해당 부분 클래스나 인터페이스 선언된 부분으로 찾아들어가 볼 수 있다. 해서 바로 들어가 봤더니 두둥!!! 아래와 같이 선언되어 있었다. declare namespace JSX { interface IntrinsicElements { ......중략....... a: React.D..

forwardRef 관련 Component definition is missing display name(react/display-name) 에러 React.forwardRef((props, ref) ... ) forwardRef 역활 React.forwardRef 는 렌더링에 사용될 함수를 인자로 받는데 React는 이 함수를 두 개 인자 props와 ref를 사용하여 호출하고, 이 함수는 React 노드를 반환. 하는 게 주요 맹점이다. React 를 사용하다보면 ref 를 자식 컴포넌트에 넘겨서, 그 내부 HTML 엘리먼트에 접근할 수 있게 해줘야하는 경우가 발생. 이때 사용하게 되는 것이 React.forwardRef 타입스크립트를 사용하지 않는 경우 위 방법은 정상적으로 동작. 하지만, 타입스크..