코딩하는 김딸기

body>    button id="btn">click mebutton>  body>  script>    const button = document.getElementById("btn"); //id가 "btn"인 button 요소 생성    function handleClick() {      //함수생성      console.log("you clicked me");    }    button.addEventListener("click", handleClick); // button 요소에 클릭 이벤트 리스너를 추가->사용자가 버튼을 클릭할 때마다 handleClick 함수가 호출  script> addEventListener 메서드를 사용하여 button 요소에 클릭 이벤트 리스너를 추가->사용자가 ..

리액트 요소를 생성하는 createElement문법을 대체하기=>JSX   JSX – 자바스크립트를 확장한 문법보통의 HTML과 비슷. 그러나 property를 HTML 태그의 속성처럼 적으면 됨const Title = (console.log("mouse enter")}>Hello I'm a span);style={{ backgroundColor: "tomato" }} -> 스타일은 {} 2개임JSX를 브라우저가 온전히 이해하지 못하므로 이해할 수 있게https://unpkg.com/@babel/standalone/babel.min.js 를 설치해야함-> JSX로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔줌바벨을 가져온 뒤 script type="text/babel"로 적어줘야 인식함 사전작업 ..

body>    div id="root">div>  body>  script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js">script>  script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js">script>  -react js는 element를 생성하고 이벤트 리스너를 더하는 것을 도와줌->interactive 파워를 가짐 -react dom 을 사용하는 이유 : react element 들을 html 요소로 바꾸기 위해비어있는 div는 reactDom이 react element를 가져다 놓을 장소 -id가 root인 div를 가져온 후 react..

리액트란?페이스북에서 만든 웹 UI를 작성하기 위한 자바스크립트 라이브러리React의 특징SPA의 단점을 보완하는 몇가지 기술을 도입SPA의 단점모든 기능을 한 페이지에서 다 구현하다 보니 상태(데이터) 관리가 어려움자바스크립트에서 HTML 코드를 생성해야 하므로 개발 생산성 저하브라우저의 DOM을 자주 갱신하다보면 성능 저하 발생 (처음부터 렌더링하는걸 반복하면 성능저하)SPA의 단점을 보완하는 React의 특징컴포넌트 별로 상태 관리가 가능하고 전역 수준의 상태 관리를 지원하는 서드파티 라이브러리가 많음JSX를 이용해서 HTML 생산성이 높음가상 DOM을 이용해서 성능 저하 최소컴포넌트 기반 개발화면의 일부 UI를 만드는 컴포넌트 단위로 개발컴포넌트는 자바스크립트로 개발하며 재사용성이 뛰어남상태 관리..

'use strict';// import axios from 'axios';// export default function api(method, url, data) {//   return axios({//     method,//     url: "https://11.fesp.shop/${url}",//     data,//     headers: {//       'Content-Type': 'application/json',//       'client-id': 'vanilla01',//     },//   });// }let cart = {  items: [    {      id: 1,      name: '나이키 줌 보메로 5',      option: '남성 신발',      descripti..

기본 스타일body {  margin: 0;  background-color: #fff;  color: #111;}h1,h2 {  font-size: 32px;  font-style: normal;  font-weight: 500;}body: 전체 페이지의 기본 스타일을 설정합니다. 기본 여백을 없애고 배경색을 흰색, 글자색을 어두운 회색으로 설정합니다.h1, h2: 제목의 폰트 크기, 스타일, 두께를 설정합니다. 제목은 크고 눈에 띄게 표시됩니다.레이아웃 설정.main-layout {  max-width: 1100px;  margin: 40px auto;}.main-layout: 최대 너비를 1100px로 제한하고, 페이지 중앙에 위치하도록 여백을 설정합니다.장바구니 컨테이너.cart-container..

이 코드는 장바구니와 위시리스트 기능을 구현하는 JavaScript 코드입니다. 주요 기능은 사용자 로그인 상태에 따라 장바구니 정보를 가져오고, 장바구니에 상품을 추가, 삭제, 수량 변경 등을 관리합니다. 각 파트를 기능별로 나누어 자세히 설명하겠습니다.1. 초기 설정import axios from 'axios';let cart = {  items: [],  total: 0,};let wishlist = [];// 이 ID로 로그인하고 있다고 가정하고 TEST 시도중// let accessToken =//   'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJfaWQiOjUsInR5cGUiOiJ1c2VyIiwibmFtZSI6IkdEIiwiZW1haWwiOiJhcGlAbWFya2V..

1. Storage목적: 애플리케이션에서 데이터를 영속적으로 저장하고 불러오는 것은 기본적이고 빈번하게 수행되는 작업입니다.백엔드: 데이터베이스를 통해 데이터를 영속적으로 저장하며, 다양한 데이터베이스(예: Oracle, MySQL, 클라우드 데이터베이스)를 사용할 수 있습니다.프론트엔드: 웹 애플리케이션에서 데이터를 영속적으로 저장할 수 있는 방법을 제공해야 하며, JavaScript에서 Web API를 통해 이를 구현합니다.2. 스토리지 종류로컬스토리지: 동일 오리진의 모든 세션에서 공유되는 스토리지입니다. 데이터는 브라우저가 종료되어도 유지됩니다.세션스토리지: 세션 단위로 이용되는 스토리지로, 특정 브라우저 창에서만 사용되며, 브라우저가 종료되면 데이터가 사라집니다.3. sessionStorage정..