일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | |||
5 | 6 | 7 | 8 | 9 | 10 | 11 |
12 | 13 | 14 | 15 | 16 | 17 | 18 |
19 | 20 | 21 | 22 | 23 | 24 | 25 |
26 | 27 | 28 | 29 | 30 | 31 |
- NonNullable
- javascript
- 누구나 자료구조와 알고리즘
- Chart.js
- reactjs
- react
- typescript
- 폰트적용하기
- 개발콘텐츠
- returnType
- TSDoc
- 타입스크립트
- React.js
- 티스토리꾸미기
- 타입선언
- CSS
- utilty type
- 제네릭
- click and drag
- 성능최적화
- 커스텀
- 레이아웃쪼개기
- JS console
- 공통컴포넌트
- 2022
- const 단언문
- vue.js
- 타입좁히기
- 리액트
- 반복줄이기
- Today
- Total
목록Development/React.js · Next.js (37)
몽땅뚝딱 개발자
1. APP KEY를 발급한다. 🔗 https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 2. 어플리케이션을 등록한다. 그냥 스터디용으로 등록해줬고, 클릭해서 Javascript key를 가져오면 된다. 3. 도메인을 등록한다. 4. index.html에 넣어준다. 5. 코드를 작성한다. 📄 Map.txs import React, { useEffect } from 'react' import styled from 'styled-components' declare global { interface Wi..
◽ ThemeProvider를 사용하는 이유 자주 사용하는 css를 변수로 설정할 수 있다. 📄 styled.d.ts import { ColorTypes, FontSizeTypes } from './theme' import 'styled-component' // d.ts // - 구현부가 아닌 선언부만을 작성하는 용도의 파일로 js 코드로 컴파일 되지 않는다. declare module 'styled-components' { export interface DefaultTheme { colors: ColorTypes fontSize: FontSizeTypes } } 📄 index.tsx import App from './App' import React from 'react' import ReactDOM f..
◽ Redux란? 자바스크립트 상태관리 라이브러리이다. Vue에는 Vuex가 있다면 React에는 Redux가 있다. 리덕스의 본질은 node.js이다. 컴포넌트 간 state 공유가 쉬워진다. ◽ 설치하기 리덕스는 리액트에서만 사용하는 상태관리 기술이 아니므로, react-redux를 설치해야한다. npm install @reduxjs/toolkit react-redux ◽ Redux의 3가지 원칙 1. Single source of truth 동일한 데이터는 항상 같은 곳(store)에서 가지고 온다. 2. State is read-only 리액트는 setState 메소드를 활용해야만 상태변경이 가능하고, 리덕스에서도 action이라는 객체를 통해서만 상태를 변경할 수 있다. 리덕스는 읽기전용으로, ..
◽ 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 ◽ 클래스형 컴포넌트..
◽ lazy import 함수형으로 사용한다. // before import Detail from './routes/Detail.js' // after import {lazy, Suspense, useEffect, useState} from 'react' const Detail = lazy( () => import('./routes/Detail.js') ) 이때 함수형으로 선언한 컴포넌트에 지연이 발생할 수 있는데, 로 감싸주면 로딩도 구현할 수 있다. 필요하다면 자체를 감싸도 된다. ◽ memo 컴포넌트가 재랜더링이 되면 안에있는 자식컴포넌트도 함께 재렌더링되어 성능이 저하될 수 있다. 그래서 꼭 필요한 경우, 특정 상황에만 재렌더링 될 수 있도록 하는 것이 memo()이며 props가 변할 때만 재렌..