목록2024/10 (17)
코딩하는 김딸기
'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정..
Ajax Ajax는 웹 페이지가 서버와 통신할 때 사용하는 기술로, 사용자가 웹 페이지를 이용하면서 서버와 데이터를 주고받을 수 있게 해줍니다. Ajax는 Asynchronous JavaScript and XML의 약자입니다. 여기서 중요한 점은 Ajax가 비동기 통신을 가능하게 해준다는 것입니다.동기 통신과 비동기 통신의 차이동기 통신:웹 페이지에서 서버에 요청(request)을 보내면, 브라우저는 서버의 응답(response)을 받을 때까지 기다립니다.이 동안 사용자는 웹 페이지에서 아무런 동작도 할 수 없습니다.예를 들어, 링크를 클릭하거나 버튼을 누르면 서버에 요청을 보내는데, 서버에서 응답이 올 때까지 웹 페이지가 멈추게 됩니다.응답이 오면 화면 전체가 새로 고쳐집니다. 즉, 페이지가 한 번 깜..
Web APIAPI(Application Programming Interface) 를 한마디로 정리하면 프로그래밍 언어로 만들어진 데이터와 기능의 모음입니다. • 어떤 기능을 구현할 때 “유튜브 API 를 이용해서” 혹은 “카카오 API 를 이용해서” 구현했다는 용어를 많이씁니다.• 이 의미는 유튜브 혹은 카카오와 애플리케이션에서 연동할 때 연동방법을 추상화 시켜서 제공하는 API 를사용한다는 의미입니다.• API 는 변수, 함수 혹은 클래스로 제공됩니다. • Browser APIs : 브라우저에 내장되어 있는 API• Third-Party APIs : 다른 벤더 혹은 플랫폼에서 제공하는 API호출 스케줄링함수 호출을 미리 예약할 때 사용하는 두 가지 방법이 있습니다. 이걸 “호출 스케줄링”이라고 해요...
클로저 (Closure)정의: 클로저는 함수와 그 함수가 선언된 렉시컬 환경의 조합을 의미합니다. 즉, 클로저는 특정 함수가 정의된 위치의 변수를 기억하고, 그 변수를 나중에 사용할 수 있게 해주는 기능입니다.중요성: 클로저는 자바스크립트의 중요한 개념으로, 다양한 프로그래밍 언어에서도 사용됩니다. 클로저는 자바스크립트에서 자동으로 제공되며, 개발자가 특별히 코드를 작성할 필요는 없습니다.이해를 위한 선행 지식:실행 컨텍스트: 함수가 실행될 때, 그 함수의 실행 환경을 포함한 객체입니다. 이는 매개변수, 로컬 변수, 그리고 내부 함수 등을 포함합니다.렉시컬 환경: 함수가 선언된 위치를 의미합니다. 이는 코드 작성 시의 위치를 기반으로 하며, 함수 실행 시의 동적인 환경과는 다릅니다.실행 컨텍스트 (Exe..
1. 생성자 함수 vs. 클래스생성자 함수는 JavaScript 초기부터 사용된 전통적인 객체 생성 방법입니다. 이 방법은 객체를 만들기 위해 함수의 형태로 정의되며, new 키워드를 사용하여 생성자를 호출함으로써 객체를 생성합니다. 클래스는 ECMAScript 2015 (ES6)에서 도입된 객체지향 프로그래밍을 지원하는 방법입니다. 클래스 구조를 사용하여 객체를 생성할 수 있으며, 객체 지향 프로그래밍의 원칙을 보다 쉽게 적용할 수 있습니다. 클래스는 class 예약어로 선언되며, 내부에 프로퍼티와 메서드를 포함할 수 있습니다. 이처럼, 클래스는 객체 생성에 있어 더 명확하고 체계적인 방법을 제공합니다.2. 클래스 선언 및 객체 생성클래스를 선언하면, 동일한 구조를 가진 여러 객체를 쉽게 생성할 수 있..