npm install high serverity vulnerabilities : nth-check

#1. 오류 발생 1년전에 작업한 react 프로젝트를 간만에 다시 띄우려고 로컬에서 npm install 해보니 235 packages are looking for funding run `npm fund` for details 6 high severity vulnerabilities To address all issues (including breaking changes), run: npm audit fix --force Run `npm audit` for details. 위처럼 오류가 발생했다. 시키는 대로 npm audit을 날려보자 PS C:\02.DEV\QUIZ\fe-cl> npm audit # npm audit report nth-check @svgr/plugin-svgo > svgo > cs..

• format_list_bulleted Frontend/React
• · 2023. 4. 20.
• textsms

[React] Tree형 Sidebar 만들기 - 2

이전글 - [React] Tree형 Sidebar 만들기 - 1 (tistory.com) [React] Tree형 Sidebar 만들기 - 1 #1. Sidebar 제작 필요성 React로 웹사이트를 만들기로 마음먹고 많은 템플릿과 컴포넌트를 살펴보았지만 딱 이거다 하는게 없었다. 구글링을 해봐도 샘플은 강제로 컴포넌트를 병렬로 붙여 놓고 확 garve32.tistory.com #1. 최하위 노드(leaf)와 상위 노드(root) 분리 실제 화면 url을 가지고 있는 최하위 노드(leaf)와 상위 노드(root)를 분리해서 그려보자. 최하위 노드는 link를 연결해서 해당 메뉴로 이동할 수 있어야 하고, 상위 노드는 가지고 있는 하위 노드를 접었다 폈다 할 수 있어야 한다. 일단 메뉴를 열고 닫을 때 상..

• format_list_bulleted Frontend/React
• · 2022. 4. 9.
• textsms

[React] Tree형 Sidebar 만들기 - 1

#1. Sidebar 제작 필요성 React로 웹사이트를 만들기로 마음먹고 많은 템플릿과 컴포넌트를 살펴보았지만 딱 이거다 하는게 없었다. 구글링을 해봐도 샘플은 강제로 컴포넌트를 병렬로 붙여 놓고 확장하기가 힘들다던지 아니면 제한적인 props를 제공해서 커스터마이징 하기가 힘들다던지.. 아니면 그냥 ui가 맘에 안든다던지..(react-pro-sidebar가 제일 괜찮긴 하더라) 사실 그냥 남이 만들어 놓은것을 가져다 쓰는게 제일 편하긴 하다. 굳이 편한 방법이 있는데 새로 만드는 것 자체가 시간낭비와 노력낭비지만 만드는 과정속에 배우는게 있지 않을까? 하는 마음에 굳이굳이 직접 만들어보기로 한다. #2. 기본 골격 생성 Depth가 존재하는 Tree구조의 핵심은 재귀호출이다. 일단 자기 자신과 하위..

• format_list_bulleted Frontend/React
• · 2022. 4. 8.
• textsms

[React] useState의 비동기 처리와 함수형 업데이트

#1. setState는 비동기로 동작한다 아래와 같이 동작하는 코드를 보자. 하나는 숫자를 1씩 증가시키는 버튼이고, 하나는 숫자를 1씩 감소시키는 버튼이다. import React, { useState } from "react" function App() { const [num, setNum] = useState(1) async function plus() { setNum(num + 1) } async function minus() { setNum(num - 1) } return ( {num} PLUS MINUS ); } export default App; 아직까지는 잘 작동하고 있지만, 요건이 바뀌어서 1씩 증가하던것을 3씩 증가시키기 위해 아래처럼 변경했다고 치자. import React, { u..

• format_list_bulleted Frontend/React
• · 2021. 7. 11.
• textsms