export default function SidebarPage({ $target, initalState }) { this.state = initalState const $page = document.createElement('div') $page.innerHTML = 'sidebar' $target.appendChild($page)} 저번 시간에 이어서 상태를  this.state = initalState 로 만들어서 사용합니다. 이를 통해 컴포넌트 내부에서 상태를 일관되게 관리할 수 있습니다. map함수를 통해 state의 제목과 번호를 을 추출해서 를 통해 화면에 띄우겠습니다.export default function SidebarPage({ $target, initalStat..

main.js 코드는 DOM요소를 진입하기위한 대문역할을 하기 때문에  123  여기 html 코드에서 DOM요소는   이 부분이기 때문에 여기에서 요소들이 만들어지고 삭제되고 합니다. 그래서 이요소를 메인으로 잡고 들어가야합니다. main.js 파일에const $app = document.querySelector('#app')console.log($app) 이렇게 하고 서버를 돌려보면 예를들어 main.js에 이렇게 적고const $app = document.querySelector('#app')const $h1 = document.createElement('h1')$h1.innerHTML = '안녕하세요'$app.appendChild($h1..

오늘은 노션 클론 코딩을 하면서 자바스크립트의 crud를 이용해서 만들어보는 과정을 해보겠습니다.순수하게 바닐라 자바스크립트를 통해서 개발하기 때문에 확실하게 도움이 많이 될것 같아서 블로그를 작성하면서 만들어보겠습니다. 우선 만들기 전에 기본 세팅을 하는 과정을 하겠습니다.vscode를 실행하고 index.html파일과 src폴더를 만들고 그안에 main.js파일을 만들고styles 폴더안에 style파일을 만들고 index.html 파일에 경로를 설정하는 과정을 하겠습니다.또한 확장 프로그램중에 prettier를 설치하고 .prettierrc파일을 만들어주고 이렇게 설정을 하면 기본 설정은 된것 같습니다.  확장 프로그램중에 Live Server은 설치하면 Go Live를 클릭하면 바로 서버를 실행하..

React에서 useState, useEffect, useMemo는 각각 상태 관리, 컴포넌트의 라이프사이클 그리고 성능 최적화를 위해 사용되는 중요한 Hooks입니다.이 세 Hook은 서로 다른 목적을 가지고 있지만, 함께 사용하면 React 앱의 기능과 성능을 크게 향상시킬 수 있습니다. 1. useStateuseState는 함수형 컴포넌트에서 상태를 관리하기 위해 사용되는 Hook입니다. 상태는 컴포넌트가 사용자와 상호작용하며 변경해야 할 데이터, 예를 들어 사용자의 입력, 클릭 상태, 선택한 항목 등을 나타냅니다.사용 방법useState는 상태의 초기값을 인자로 받으며, 상태 값과 그 값을 업데이트할 함수를 반환합니다.import React, { useState } from 'react';func..

자바스크립트(그리고 타입스크립트)에서 개발자들이 보다 효율적이고 간결하게 코드를 작성할 수 있도록 돕는 몇 가지 중요한 문법이 있습니다.rest 파라미터, spread 연산자, 그리고 destructuring 문법을 설명하겠습니다. 1. Rest 파라미터 (Rest Parameter)함수를 작성할 때, 입력되는 파라미터의 개수가 유동적이라면 어떻게 해야 될까?함수에 전달되는 파라미터의 수를 미리 알 수 없는 경우,자바스크립트에서는 rest 파라미터를 사용하여 이러한 상황을 처리할 수 있습니다.rest 파라미터는 함수 선언에서 파라미터 이름 앞에 세 개의 점(...)을 붙여 정의합니다. function 전부더하기(...a) { console.log(a);}전부더하기(1, 2, 3, 4, 5); // 출력..

1. interface를 사용하여 객체 타입 정의하기 interface 키워드는 객체의 구조를 미리 정의할 때 사용됩니다. 예를 들어, 특정 속성을 가진 객체를 정의하고 싶다면, 아래와 같이 interface를 사용하여 타입을 정의할 수 있습니다.interface Square { color: string; width: number;}let 네모: Square = { color: 'red', width: 100 }; interface는 객체와 비슷한 형태로 작성되며, 객체의 속성 타입을 미리 지정할 수 있습니다.type alias와 유사한 기능을 제공하지만, 주로 객체의 타입을 정의하는 데 자주 사용됩니다.한 줄의 끝에는 콤마(,) 대신 세미콜론(;)을 사용할 수 있습니다. 2. interface의 확..