개발 노트

사용자 값을 html 태그에 넣어줄 때 사용 가능한 태그이다. 예를 들어 id값을 주고싶을 때 자체 제공하는 기능이 없다면 id값을 설정하여 data-set = {사용자 값}을 넣어서 사용할 수 있다.

Localstorage에 정보를 저장하기위해선 setitem, getitem, useeffect등을 써서 저장을 해주고, 새로고침해도 변화가 안되게 만들었었는데, zustand의 middleware인 persist를 사용하면 자동으로 Localstorage에 저장하고 유지해준다. 하지만 잘못된 값이 들어간경우 화면이 공백으로 표시되니 Localstorage에 들어가서 데이터를 삭제해줘야한다. export const useStore = create( persist((set) => ({ todos: [], addTodo: (todoText) => set((state) => ({ todos: [ ...state.todos, { text: todoText, id: uuid(), isCompleted: false..

import uuid from "react-uuid"; id: uuid() 이런 식으로 고유한 id값을 할당해줄 수 있는 라이브러리이다. 고유한 키값을 주지만 랜덤값이기 때문에 순서가 없어서 순서를 주기 위해서는 map index로 순서를 주던지 해야 된다. 값은 아래와 같이 할당된다. 비슷한 라이브러리로 uid가 있는데, uid는 인자를 받아서 그 인자로 키값을 준다. 그렇기에 같은 인자를 키값으로 줄 경우 충돌될 수가 있기 때문에 uuid를 쓰는게 요즘 메타다. id : uid(`${todo.text} - ${todo.text.length}`) 위와 같이 쓸 수 있고. console.log("uid()", uid(`나는야 고유한 키값`)); 위와 같이 값을 할당해 준다면 아래와 같이 출력된다.

01. Styled-Component? 모던 자바스크립트 라이브러리(React,Angular,Vue 등)가 인기를 끌면서 여러 개의 컴포넌트로 분리하고, 각 컴포넌트에 HTML, CSS, JavaScript를 몽땅 때려 박는 패턴이 많이 사용되고 있다. React는 JSX를 사용해서 이미 JavaScript가 HTML을 포함하고 있는 형태를 취하고 있는데, 여기에 CSS-in-JS 라이브러리만 사용하면 CSS도 손쉽게 JavaScript에 삽입할 수 있다. styled-component는 css를 js에 쉽게 삽입할 수 있도록 도와주는 CSS-in-JS라이브러리 중 가장 널리 사용되고 있는 라이브러리이다. 02. 사용법 일단 npm 패키지를 설치해야한다. npm i styled-components 기본 ..

01.React Router Create-React-App은 page routing을 포함하지 않고있기때문에, routing 관련 라이브러리가 필요한데 React Router가 그중 가장 많이 쓰인다. React Router를 추가하고 싶다면 "npm i -D react-router-dom"을 터미널 창에 입력한다. 만약 v5에서 v6로 업그레이드 하는 것이라면 위의 코드 마지막에 @latest를 붙힌다. React Router는 사용자가 입력한 주소를 감지하는 역할을 하며, 여러 환경에서 동작할 수 있도록 여러 종유의 라우터 컴포넌트를 제공한다. 이중 가장 많이 사용하는 라우터 컴포넌트는 BrowserRouter와 HashRouter이다. 02. 사용법 아래 예제는 w3schools에 있는 예제이다. ..

01.useRef를 사용하면 렌더링 간에 값을 유지할 수 있다. w3schools는 이렇게 정의한다 - 업데이트 시에 re-rendering이 발생하지 않는 변경 가능한 값을 저장하는 데 사용할 수 있다. 무슨 말인지 잘 모르겠어서 추가로 찾아보았다. function ManualCounter() { const [count, setCount] = useState(0); let intervalId; const startCounter = () => { // 💥 매번 새로운 값 할당 intervalId = setInterval(() => setCount((count) => count + 1), 1000); }; const stopCounter = () => { clearInterval(intervalId); }..