어리둥절 분석가 그리고 개발자

✔️ 설치 yarn add babel-plugin-inline-react-svg ✔️ .babelrc "plugin"에 "inline-react-svg"를 추가한다 { "presets": ["next/babel"], "plugins": [ "inline-react-svg", [ "styled-components", { "ssr": true } ] ] } ✔️ types/index.d.ts typescript 때문에 아래와 같은 설정을 해주는 것이다. 위치와 파일 이름은 아무래도 상관없다! declare module "*.svg" ✔️ 에러 위의 내용을 잘 설치했는데도 에러가 난다. TypeError: Cannot read properties of undefined (reading 'uid') 이건 Nex..

✔️ 설치 yarn add styled-components babel-plugin-styled-components yarn add @types/styled-components -D ✔️ pages/_document.tsx import Document, { Html, Head, Main, NextScript, DocumentContext, } from "next/document"; import { ServerStyleSheet } from "styled-components"; class MyDocument extends Document { static async getInitialProps(ctx: DocumentContext) { const sheet = new ServerStyleSheet(); con..

✔️ eslint 설치 npx eslint --init ? How would you like to use ESLint? ❯ To checkt syntax, find problems, and enforce code style ? what type of modules does your project use? ❯ JavaScript modules (import/export) ? Which framework does your project use? … ❯ React ? Does your project use TypeScript? ❯ Yes ? Where does your code run? ✔ Browser ? How would you like to define a style for your project? … ..

2021년 11월에 react-router-dom이 그간의 v5에서 v6로 업그레이드하였습니다 이에 맞춰서 코드를 변환시키다보니 react에서 현재 url을 가져오는 부분이 바뀌어서 조금 애를 먹었습니다. 기존에는 아래처럼 useRouteMatch()를 사용하고 있었어요 import { Link, useRouteMatch } from 'react-router-dom' import { useHistory } from 'react-router' ... const { path, url } = useRouteMatch() const key = useRecoilValue(keyState) const history = useHistory() const clickHandler = () => { history.push..

✔️ 필요성 react-native로 한동안 개발하다가 다시 react 프로젝트를 만들려고 하니 다음과 같은 에러가 발생했다 npx create-react-app project-name --template typescript You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). We no longer support global installation of Create React App. Please remove any global installs with one of the following commands: - npm uninstall -g create-react-app - yarn global remo..

필요성 변수값이 A일 때는 a라는 스타일링을 보여주고, 변수값이 B일 때는 b라는 스타일링을 보여주는 것 조건문에 따라서 CSS 스타일링을 바꾸고 싶은 건 당연한 거 아니냐구 기본 중의 기본이라고..... 에러 tailwindCSS 공식문서에 가보면 아래와 같이 변수값을 활용해서 conditionally 다른 css를 적용할 수 있다고 나와있다. 그런데 안된다............ 해결 : template string을 사용 ES6의 주요 기능인 템플릿 문자열(template string)을 이용해야 하면 성공이다. 템플릿 문자열이란 문자열안에 변수를 넣을 때 보다 직관적이고 읽기 쉽게 도와주는 기능으로 backtick 사이에 문자열을 넣고, 그 속에 변수를 넣고 싶을 때는 ${} 사이에 변수를 넣을 수..

필요성 Alarm이라는 컴포넌트를 만드는데, Alarm의 props 값을 받아서 Alarm 내의 state 초기값으로 설정하고 싶다. 이렇게 하면 될까? // pushAlarmStatus : props const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); const Alarm = ({ pushAlarmStatus }: Props) => { const [alarmStatus, setAlarmStatus] = useState(pushAlarmStatus); console.log(alarmName, 'status:', alarmStatus); console.log(alarmName, 'status:', pushAlarmStatus); return ..

tailwindCSS에서 배경이미지 사용하기 https://tailwindcss.com/docs/background-image#background-images Background Image - Tailwind CSS Utilities for controlling an element's background image. tailwindcss.com div 태그에서 내가 원하는 이미지로 배경을 만들기 위해서는 tailwindCSS 문서를 읽고 진행하면 된다~ group-hover로 배경이미지 없애기 다른 element와 배경을 group으로 묶은 뒤 hover 효과로 배경이미지를 없애고 다른 요소가 나타나게 하고 싶은데, 이 배경이미지가 안 없어진다. CSS를 뜯어보니, 배경이미지가 !important로 박혀..

타이핑 애니메이션 화면에서 글자를 보여줘야 하는데 타이핑되는 애니메이션이 필요한 경우가 종종 있다. 이 때 쓰기 좋은 라이브러리가 typewriter-effect이다. 아래 npm에 예제도 굉장히 설명이 잘 되어 있어서 쓰기가 쉽다. https://www.npmjs.com/package/typewriter-effect typewriter-effect [](https://circleci.com/gh/tameemsafi/typewriterjs) www.npmjs.com 기본 예제 글씨가 적힌 다음에 잠깐 쉬거나, 다시 글자를 지우거나 하는 효과를 chain 형태로 엮어서 사용할..

Fullpage 란? 요즈음, 스크롤을 한 번 슥슥 내릴 때마다 화면 전체가 슬라이드처럼 내려가는 효과를 입힌 웹사이트를 여러 곳에서 발견할 수 있다. 최근에 개인적으로 가장 인상깊었던 사이트는 티맵모빌리티 웹사이트인데, 동영상과 fullpage를 적절히 잘 사용했다고 생각했다. 리액트 fullpage 에러 모듈 '@fullpage/react-fullpage'에 대한 선언 파일을 찾을 수 없습니다. '[프로젝트명]/node_modules/@fullpage/react-fullpage/dist/react-fullpage.js'에는 암시적으로 'any' 형식이 포함됩니다. 해당 항목이 있는 경우 'npm i --save-dev @types/fullpage__react-fullpage'을(를) 시도하거나, 'd..