윤제니

💡 고유한 ID를 생성하는 방법 자동으로 고유한 ID를 추가해주는 UUID 사용하기 https://www.npmjs.com/package/uuid?activeTab=readme uuid RFC4122 (v1, v4, and v5) UUIDs. Latest version: 9.0.1, last published: 5 months ago. Start using uuid in your project by running `npm i uuid`. There are 59072 other projects in the npm registry using uuid. www.npmjs.com 테스트 DB를 생성하여 사용할때 고유한 ID가 필요한 경우 위 사이트에 접속하여 UUID를 사용하면 좋을것 같다. 아래의 순서는 위의..

📖 노마드 개발자 북클럽 챌린지 "IT 5분 잡학사전" 2주 동안 완독하기 기간: 24.02.09 금 - 24.02.22 목 1) 읽기: 그날의 할당치를 읽고, 미션 및 퀴즈 수행 2) 쓰기: 독서기록을 쓰기 3) 공유: 작성한 독서기록 링크 제출 ⭐️ 다짐 ⭐️ 3년차 개발자이지만 누군가에게 설명을 버벅거리는 것은 스스로 제대로 모르고 있기 때문이라고 생각한다. 초심으로 돌아가서 2주 동안 완독하고 학습을 해보기로 결심했다. 이 책을 완독한 후에 어떤 모습으로 변해있을지 기대된다. 하루도 빠짐없이 게으르지 않게 완독하기! 책 구매: "예스24 eBook"

React 컴포넌트 LifeCycle React Hooks - useEffect() 컴포넌트 내부에서 발생하는 네트워크 요청, 데이터 가져오기,타이머, UI 업데이트 등의 작업을 다루기 위한 Hook 컴포넌트의 렌더링이 완료된 후에 실행됨 매 렌더링마다 자동으로 호출됨 useEffect(() => { 인자A // TODO, Callback 함수 }, [인자B]); useEffect의 인자 첫 번째(인자A) : Callback 함수, 컴포넌트 내부에서 발생하는 작업 두 번째(인자 B): Dependency Array, 의존성 배열에 포함된 값들이 변경될 때마다 useEffect 가 다시 실행됨 만약, 의존성 배열이 비어있는 경우 => useEffect은 컴포넌트가 처음 마운트 될 때만 실행되고 언마운트 될..

useState 사용 시 주의할 점 App.js import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ) } 위의 "+3" 버튼을 클릭하면 호출 횟수에 관계없이 이벤트 핸들러 내부 number 값은 항상 0 setNumber(1)이 계속 호출이 되는것이다. => 리액트는 이벤트를 일괄 처리하지 않으며 별도로 처리된다. "+3"버튼을 클릭할 때마다 number 값은 1,2,3... 이렇게 1씩 숫..

Component component 생성 및 사용 방법 - NewComponent.js 생성 const MyComponent = () => { return 컴포넌트 }; export default MyComponent; 위의 컴포넌트를 App 컴포넌트에서 불러와 사용 (import를 사용하여 모듈 불러오기) import NewComponent from './NewComponent'; const App = () => { return ; }; export default App; Props : properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 가능. - JSX 내부에서 props 렌더링 const NewComp..

React 자바스크립트 라이브러리 오직 V(view)만 신경 쓰는 라이브러리 Component 기반의 UI 라이브러리 선언형 프로그래밍 Virtual DOM 사용 초기 렌더링 render() {...} 맨 처음 어떻게 보일지를 정하는 초기 렌더링이 필요한데 리액트에서는 render 함수 사용 - 컴포넌트가 어떻게 생겼는지 정의 - 뷰가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환 - HTML 마크업 후 실제 페이지의 DOM 요소 안에 주입 컴포넌트 특정 부분이 어떻게 생길지 정하는 선언체 => 데이터를 업데이트했을 때 단순히 업데이트한 값을 수정하는 것이 아니라, 새로운 데이터를 가지고 render 함수를 호출한다. render 함수가 반환하는 결과를 곧바로 DOM에 반영하지 않고, ..