Record

... const [items, setItems] = useState(["A", "B", "C"]); ... if(items.includes("A") { console.log("중복"); }

1. Code highlighter Library Highlight.js Syntaxhighlighter Rainbow Prismjs 등 2. Prismjs 설치 npm install Prismjs 3. 사용법 // _app.tsx에 추가 import "prismjs/themes/prism-tomorrow.css"; ... import Prism from 'prismjs'; import { useEffect } from 'react'; const code = ` Lorem Ipsum is simply dummy text ... Example ... \ printing and typesetting industry. Lorem Ipsum is simply dummy \ printing and typesett..

tsconfig.json 파일에 baseUrl: "." 추가

1. CSS-in-JS 간단하게 말하자면 Javascript 코드에서 CSS를 작성하는 방식 2. CSS-in-JS 라이브러리 중, styled-components 설치 npm i styled-components - emotion 등등.. 2-1) styled-components용 babel 플러그인 및 preset 설치 npm i --save-dev babel-plugin-styled-components npm i babel-preset-next 2-2) 프로젝트 루트 폴더 바로 밑에 .babelrc 파일 생성하여 플러그인 활성화 { "presets": ["next/babel"], "plugins": [["styled-components", { "ssr": true }]] } https://github..

import css from "styled-jsx/css"; import { NextPage } from 'next' interface Props { data: object } const Table:NextPage = (data) => { const style = css` // 스타일 객체 생성 .table_wrap { width: 100%; max-width: 800px; height: auto; max-height: 500px; overflow-y: auto; margin-bottom: 50px; } .table_wrap::-webkit-scrollbar { width: 8px; } .table_wrap::-webkit-scrollbar-thumb { background-color: #dee2e6; ..

eject는 아직 git에 commit이 되지 않은 변화가 있다면 진행되지 않기 때문에 먼저 변경 사항을 커밋한 후, eject을 실행해주어야한다. git add . git commit -m "Commit before npm run eject" npm run eject Are you sure you want to eject? This action is permanent. » (y/N) y customizing 등 가능 webpack.config.js sassRegex 수정하면 @import 'utils.scss'; 이런식으로 사용 가능 https://xtring-dev.tistory.com/55 https://stackoverflow.com/questions/48854585/error-with-run-n..

1. 설치 1. node 설치 후 확인 node -v npm -v 2. npm을 이용해 sass 설치 npm install -g sass 3. sass 설치 확인 npm show sass version 2. 사용법 // example.scss // 1. 변수 선언, 변수 사용 가능 $white: #fffffff; $colors: ( red: #e03131, orange: #ff922b, yellow: #ffd43b, green: #69db7c, blue: #74c0fc, indigo: #3b5bdb, purple: #7048e8, gray: #ced4da ); .example-btn { background-color: $white; } // 2. 중첩 기능을 이용하여 편리하게 사용 가능 .btn { pa..

여러 사람과 협업할 때 코드 스타일 통일 프로젝트 루트 디렉터리(src, public)에 .prettierrc 파일 추가 { "singleQuote": true, "semi": true, "useTabs": false, "tabWidth": 2, "trailingComma": "all", "printWidth": 80 } 수동 코드 정리 단축키 VsCode F1 - format - prettier 자동 코드 정리 VsCode 설정 - format on save 체크

1. map이란 Javascript 배열 객체 내장 함수인 map을 사용하여 반복되는 컴포넌트를 렌더링할 수 있습니다. map 함수는 파라미터로 전달된 함수를 사용하여 배열 내 각 요소를 원하는 규칙에 따라 변환한 후 그 결과로 새로운 배열을 생성합니다. 2. map 사용법 var numbers = [1, 2, 3, 4, 5]; var processed = numbers.map(function(num) { return num * num; }); 1) 실제로 적용 const Example = () => { const imgSrc = ["images/example.png", "images/example2.png"]; const imgAlt = ["example.png", "example2.png"]; ret..

1. i18next란 JavaScript로 작성된 국제화 프레임 워크로 여러 국가의 언어를 처리할 수 있도록 하는 것이다. 2. i18next 설치 npm install react-i18next --save 3. i18next을 사용한 다국어 처리 1) 3개의 파일 생성 src/config/lang/i18n.js src/config/lang/translation.ko.json src/config/lang/translation.en.json 첫 번째 사이트를 참고하여 만들었습니다. 2) translation.ko.json, translation.en.json 파일 작성 i18n.js 파일을 작성하기 전, 한국어와 영어, 두 가지 버전을 보여주기 위한 json 파일을 만들고 데이터들을 넣어줍시다. { "he..