몽땅뚝딱 개발자

◽ react-query란? React에서 상태 관리를 하다보면 클라이언트와 서버 데이터가 공존하면서 생기는 문제들이 있다고 한다. 캐싱이 가능하다. get을 한 데이터에 대해 update를 하면 자동으로 get을 수행한다. 동일 데이터를 여러번 요청하는 경우 한번만 요청한다. ◽ react-query 설치하기 $ npm i react-query ◽ react-query 기본 형태 import { QueryClient, QueryClientProvider, useQuery } from 'react-query' const queryClient = new QueryClient() export default function App() { return ( ) } function Example() { const ..

◽ 스타일린트(Stylelint)란? CSS, SCSS, CSS-in-JS의 코드 스타일을 검사한다. // .stylelintrc.json { "extends": ["stylelint-config-standard", "stylelint-config-prettier"], "overrides": [ { "files": ["**/*.tsx"], "customSyntax": "@stylelint/postcss-css-in-js" } ], "rules": { "function-no-unknown": [true, { "ignoreFunctions": ["/\\${/"] }] } } ◽ eslint란? 코드의 퀄리티를 높여주고 코드 퀄리티를 유지해주는 도구이다. 대부분의 프로그래밍 언어에는 컴파일하는 과정에서 수행되..

책+구글링으로 구현해봤던 레이아웃과 라우터 쪼개기! 이전에 만들어놨던거 기록기록...✍🏻 📄 index.tsx 로 묶어준다. import React from 'react' import ReactDOM from 'react-dom/client' import './index.css' import App from './App' import { BrowserRouter } from 'react-router-dom' const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement) root.render( , ) 📄 App.tsx 컴포넌트를 만들고 작성한다. import React from 'react' import styles from..

테마를 분리해보자.... 해내고나니 뿌듯하다... ^_ ^ㅋ 다만 리팩토링이 필요하다. 1. type으로 선언했는데 interface와 구분이 잘 되지 않는다. 좀 더 알아본 뒤 변경해야 할 것 같다. 2. 좀 더 공통화 할 수 있는 부분이 있을 것 같다. 3. 기본값도 유니온을 사용해서 type으로 만들 수 있을 듯?! 📄 CommonButton.tsx import styled, { css } from 'styled-components' // ... function CommonButton(props: ButtonProps) { return ( {props.label} ) } export default CommonButton ButtonProps는 이렇게 지정해주었다. /** * **label**: 버튼..

◽ useState 초기 렌더링 시에 사용하는 state로, 이후의 렌더링 시에는 이 값은 무시된다. function Counter({initialCount}) { const [count, setCount] = useState(initialCount); return ( Count: {count} setCount(initialCount)}>Reset setCount(prevCount => prevCount - 1)}>- setCount(prevCount => prevCount + 1)}>+ ); } 📄 setter를 사용하여 값 변경하기 // 배열 const [category, setCategory] = useState([ [CategoryType.CHARACTER]: { isOpen: false, }, ..

◽ 클래스형 컴포넌트 vs 함수형 컴포넌트 클래스형 컴포넌트는 생명주기 함수를 갖고, 함수형 컴포넌트는 훅(Hook)을 갖는다. 리액트는 함수형 컴포넌트를 지향하며, class형 컴포넌트 지원을 멈추지는 않겠지만 앞으로는 사용을 지양하라고 한다. ◽ 클래스형 컴포넌트 vs 함수형 컴포넌트의 비교 분류 클래스형 컴포넌트 함수형 컴포넌트 Mounting constructor() 함수형 컴포넌트 내부 Mounting render() return() Mounting ComponentDidMount() useEffect() Updating componentDidUpdate() useEffect() UnMounting componentWillUnmount() useEffect()의 return ◽ 클래스형 컴포넌트..

이렇게 크기가 고정되면 레이블이 잘 보이지 않는 현상이 발생.. ◽ 기존 font: { size: 14, family: 'Pretendard', }, ◽ 변경 font: function (context) { const width = context.chart.width const size = Math.round(width / 32) return { size: size, family: 'Pretendard', } }, 크기에 맞게 가독성있는 크기로 잘 변환되었다. 출처 Limit labels number on Chart.js line chart I want to display all of the points on my chart from the data I get, but I don't want to dis..

Vue는 v-html이라는 디렉티브를 이용하여 깔끔히 구현할 수 있지만 리액트는 없는 것으로 보인다. 방법 1. split 사용 {characterInfo.ka_star_info && characterInfo.ka_star_info.split('\n').map((line) => { return ( {line} ) })} 방법 2. white-space: pre-line; 사용 '\n'만 적용된다. &_desc { white-space: pre-line; } 출처 React에서 줄바꿈을 하는 방법 리액트에서 줄바꿈을 하는 방법 jsx에 의해서 개행문자나 태그는 동작하지 않고 그대로 출력한다. Reference https://developer.mozilla.org/ko/docs/Web/CSS/white-sp..

◽ @ts-check 마이그레이션 과정에서 타입스크립트 전환 시 어떤 문제가 발생하는지 @ts-check를 활용하여 시험해 볼 수 있다. // @ts-check const person = { first: 'Grace', last: 'Hopper' } 2 * person.first // Error! ◽ JSDoc 아래 코드에서 에러가 나는 이유는 더 상위 개념인 HTMLElement 타입을 반환하기 때문이다. // @ts-check const ageEl = document.getElementById('age') ageEl.value = '12' // Error! 'HTMLElement' 유형에 'value' 속성이 없습니다. 확실히 input 엘리먼트라는 것을 알고있다면 단언문을 사용히여 해결할 수 있다...

🌈 목차 1. ECMAScript 모듈 사용하기 2. 프로토타입 대신 클래스 사용하기 3. var 대신 let/const 사용하기 4. for(;;) 대신 for-of 또는 배열 메서드 사용하기 5. 함수 표현식보다 화살표 함수 사용하기 6. 단축 객체 표현과 구조 분해 할당 사용하기 ECMAScript 모듈 사용하기 ◽ 개별로 모듈을 분리했던 과거의 방법들 개별 모듈로 분리하는 방법은 여러개의 사용하기, makefile 기법(뭔지 모르겠음..), NodeJS 스타일의 require 구문, AMD 스타일의 define 콜백까지 매우 다양했다. 📄 CommonJS - required 구문 // a.js const b = require('./b') // b.js const name = require('Mod..