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

✔️ 필요성 Next.js에서 Emotion을 쓸 때 css를 쓰고 싶은 데 css 속성이 없다고 나온다 아래와 같이 사용중! import styled from "@emotion/styled"; import React from "react"; import { css } from "@emotion/css"; ✔️ tsconfig.json 수정 tsconfig.json 파일을 열로 아래와 같이 types 를 추가해주면 된다! { "compilerOptions": { "types": ["@emotion/react/types/css-prop"], ... } }

✔️ React 기존에 react를 쓸 때에는 react-router-dom의 Link를 사용하고 Link에 직접적으로 className을 줄 수 있었다 import { Link } from "react-router-dom"; ✔️ Next Next에서는 우선 next/link에서 제공하는 Link를 사용해야 하고 to 대신에 href를 사용해야 한다. 또 직접적으로 className을 줄 수 없어 Link 밑에 하나 tag를 더 넣고 a 태그에 className으로 스타일링을 했다. import Link from "next/link";

✔️ 필요성 Next.js 프로젝트에서 CSS module인 sass/scss를 사용해보겠다 ✔️ 방법 npm i sass next.config.js를 아래와 같이 수정해준다 //next.config.js const path = require('path') module.exports = { sassOptions: { includePaths: [path.join(__dirname, 'styles')], }, } 루트프로젝트에 있는 styles 폴더 내의 global.css와 Home.module.css 이름을 global.scss와 Home.module.scss로 바꾸고 해당 파일을 import 해주는 곳에서도 이름을 바꾼다 원하는 CSS를 입력한 뒤 사용한다 /* Home.module.scss */ .t..

✔️ 요소 다음에 꾸밈요소 추가하기 가끔씩 특정 요소 다음에 무조건 밑줄이 나오는 등 분리요소 등을 매번 추가하고 싶을 때가 있다. ::after와 ::before를 통해 요소(태그) 앞뒤로 꾸밈 요소를 추가할 수 있다. footer-text라는 className을 가진 요소의 마지막 뒤에는 항상 gray 색상의 bar가 등장한다 .footer-text { position: relative; display: inline-block; margin-right: 17px; margin-bottom: 4px; text-decoration: none; font-size: 14px; line-height: 20px; &::after { content: ''; display: block; position: absol..

✔️ 인접형제 선택자란? 인접형제 선택자란 CSS 선택자(Selector) 중에서 같은 부모 아래에 있는 태그 두개가 인접해서 나타날 때 두번째 태그를 선택하기 위한 CSS 선택자이다. 즉, E + F 라고 하면 E 다음에 바로 나오는 F 요소를 의미한다 더 자세한 CSS 선택자(Selector)에 대한 글은 아래에! CSS: 선택자(Selector) 이해 웹 표준은 이제 더 이상 무시할 수 없는 키워드입니다. World Wide Web(WWW)의 의미대로 가능한 많은 사람이 웹을 이용하기 위해서는, 모든 브라우저에서 ‘똑같이 보이는 것’이 아니라 ‘각 브라우 www.nextree.co.kr ✔️ SCSS에서 & SCSS에서 &은 무조건 위의 부모 요소를 의미한다 ✔️ & + & .a-file { ove..

✔️ useRef가 필요한 상황 JavaScript를 사용할 때에 화면 상에서 특정 대상을 선택해야할 때가 있다. 이것을 특정 DOM을 선택한다고 얘기한다. 리액트가 아니라 Vanilla JavaScript를 쓸 때는 getElementById, querySelector 같은 selector 함수를 활용해서 선택한다. 리액트를 사용할 때에도 아주 드물게 DOM을 직접 선택해야하는 경우가 있다. focus를 선택해주거나 두 개 컴포넌트의 싱크를 맞출 때 (pagination 등) 필요하다. 그 때 ref를 사용하고, useRef는 ref를 설정해주는 역할을 한다. ✔️ 예시 useRef()를 통해서 inputSpace라는 ref 객체를 만들었고, 이 객체를 선택하고 싶은 태그에 ref 값으로 넣어줬다. 이..

✔️ 필요성 서로 다른 효과를 가진 css 코드를 하나의 컴포넌트에 병합해서 적용할 때 사용한다. array[ ] 로도 병합이 가능하지만 true/false boolean을 이용해서 특정 효과를 적용할 지 적용하지 않을 지 선택하는 것이 가능하다. ✔️ 설치 아래처럼 Dimensions를 활용해서 스크린의 너비를 가져오거나, 혹은 다른 어떤 value 값으로 지정해놓고 참조할 때 px를 까먹는 경우가 생길 수 있다. 나처럼... // 둘 중에 하나 yarn add classnames npm install classnames ✔️ 사용 예시 (1) 아래 예시를 잘 보면 생각보다 사용하는 방법은 쉽다 className={classnames('box-info', 'mg-10')} // 'box-info mg-..

✔️ 필요성 차트를 그릴 때 데이터 value를 그대로 표시하고 싶은 경우도 있지만 비율을 표시하고 싶을 때도 있다 { valueFontSize: '15', valueAlpha: '80', showValues: '1', } ✔️ 문제 해결 showPercentValues를 활성화해준 뒤, decimals를 통해 소숫점을 조정하고 numberSuffix를 통해 %를 붙여준다 { valueFontSize: '15', valueAlpha: '80', showValues: '1', showPercentValues: '1', decimals: 0, numberSuffix: '%', }

✔️ 필요성 코딩을 하다보면 숫자를 다룰 때 꼭 소숫점 아래 2번째나 3번째 자리에서 반올림해서 표현하는 등의 표현 규칙을 지킬 때가 많다. 이런 것을 조정해주지 않으면 화면에 23.1212435294869 이렇게 나타날 수도... 그런데 React - Javascript에서는 소숫점 아래에서 반올림을 직접 해주는 기능은 없고 정수로 만들어주는 Math.round()를 활용해서 custom 해야한다. 그래서 나는 소숫점 아래에서 반올림 함수를 만들어두고 그 때 그 때 사용하려 한다 // 소숫점 아래 반올림 export const rounds = (num: number, digit: number) => { const pow = Math.pow(10, digit) return Math.round(num * ..

✔️ 설치 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..