sm 기술 블로그

리액트 새기능 (18버전 이후) 1. batch 기능 -> state1 변경 -> 재렌더링 -> state2 변경 -> 재렌더링 이 것을 -> state1 변경 -> state2 변경 -> 재렌더링 2. useTransition 느린 컴포넌트 성능향상 (조금 더 빨라진거임. 미치도록 엄청난 향상은 아님) let [A, B] = useTransition() [늦게처리]B는 함수로 성능저하 되는 부분을 감싸줌 -> 브라우저는 여러가지 행동을 동시에 못함 성능저하 하는부분의 코드 시작을 늦게 처리하여 성능개선 A는 변수로 startTrasition이 처리중일 때 true로 변함. 3. useDeferredValue 늦게 처리하여 성능개선 (useTransition과 비슷) https://youtu.be/wZi..

UI 찾기 https://nextui.org/ [UI를 다루는 사이트 -> 버튼 모양, 로딩중등 다양한 UI가 있으니 나중에 꾸밀때 쓰면 좋을 듯] 위사이트에 들어가면, 특정 버튼을 눌렀을 때 발생하는 이벤트 내용이 있다. import React from 'react'; import { Button } from '@nextui-org/react'; import confetti from 'canvas-confetti'; const CustomButton = () => { const handleConfetti = () => { confetti({...}); }; /*생략*/ export default CustomButton; 여기서 내용이 중요한것이 아닌 canvas-confetti 라는 npm이 중요하다...

flex 플렉서블 박스(flexible box)는 플렉스 박스(flex box)라고도 불리며, CSS3에서 처음 소개된 레이아웃 모델이다. 플렉스 박스(flex box)을 위해 제공되는 속성은 다음과 같다. display flex-direction justify-content align-items flex-wrap flex-flow align-content 또한, 플렉스 요소(flex item)를 위해 제공되는 속성은 다음과 같다. order align-self flex 각 쓰임새 : http://www.tcpschool.com/css/css3_expand_flexbox className className [jsx문법] 은 레이아웃을 위해사용한다고 생각하자. 다시말하면 CSS에 정의된 것을 가져오는것이라..

1. VScode(js) import express from "express"; import mysql from "mysql2/promise"; import cors from "cors"; const pool = mysql.createPool({ host: "localhost", user: "", password: "", database: "a10", waitForConnections: true, connectionLimit: 10, queueLimit: 0, }); const app = express(); const port = 3000; app.use(express.json()); const corsOptions = { origin: "https://cdpn.io", optionsSuccessStat..