결정장애라 메뉴선정시에 항상 어려움을 겪곤 한다. 학원 수강 중 메뉴 선정에 대한 고민을 하였고, 결국 오픈소스를 활용하여 돌림판 제작을 시작했다. See the Pen Untitled by magic (@mag11c) on CodePen. 자주가는 식당들을 product 배열에 미리 추가한 뒤, 해당 배열의 길이와 동일하게 색상 배열을 만들어 색상을 미리 추가시켰다. 그리고 새로운 메뉴를 추가할 수 있다. const $c = document.querySelector("canvas"); const ctx = $c.getContext(`2d`); const menuAdd = document.querySelector('#menuAdd'); const product = ["햄버거", "순대국", "정식당", ..

HTML todos Left click to toggle completed. Right click to delete todo input에서 입력된 값을 ul의 li에다가 담을 것이며, 스토리지를 이용해 새로고침해도 리스트가 남아있게 할 예정이다. 자바스크립트 공부를 위함이니 css는 맨 아래에다가 작성 해 두겠다. JS 새로고침 이후에도 유지되기 위해 스토리지를 활용할 것이다. localStorage에 데이터를 넘겨주기 위해 배열을 JSON.stringify() 메서드로 포맷팅한 뒤 넘겨주었다. const form = document.querySelector('form'); const input = document.querySelector('input'); const ul = document.queryS..

웹 스토리지 ( Web Storage ) 기존 쿠키의 문제점을 보완하기 위해 사용한다. https://mag1c.tistory.com/187 쿠키와 세션 (Cookie & Session) HTTP 프로토콜의 특징 비연결성 ( Connectionless ) 클라이언트가 서버에 요청(Request)할 때, 그에 대한 응답(Response)을 한 후, 연결을 끊는다. 비상태성 ( Stateless ) 클라이언트의 상태 정보를 가지지 않는 mag1c.tistory.com 웹 스토리지의 특징 1. 브라우저 내부에 Key, Value 쌍을 저장하는 공간이다. 2. 네트워크 요청 시 서버로 전송되지 쿠키에 비해 않아 많은 자료보관이 가능하다. (2MB이상) 3. 서버가 HTTP 헤더를 통해 스토리지 객체를 조작할 수..

쿠키에 대한 자세한 설명은 아래에 https://mag1c.tistory.com/187 쿠키와 세션 (Cookie & Session) HTTP 프로토콜의 특징 비연결성 ( Connectionless ) 클라이언트가 서버에 요청(Request)할 때, 그에 대한 응답(Response)을 한 후, 연결을 끊는다. 비상태성 ( Stateless ) 클라이언트의 상태 정보를 가지지 않는 mag1c.tistory.com 자바스크립트에서의 Cookie 사용하기 document.cookie 프로퍼티를 이용하여 생성, 삭제 및 조회가 가능하다. document.cookie는 name=value 쌍으로 구성되어 있고, 각 쌍은 ; 로 구분한다. 쌍 하나는 하나의 독립된 쿠키를 나타내며, ; 을 기준으로 document...

Promise사용 시 불편한 점들 1. then()을 연속적으로 호출하여 문제 발생 시 혼란을 겪을 수 있다. 2. 복잡한 구조의 비동기처리 코드 작성 시 코드의 가독성이 저하된다. 3. 동기코드와 비동기코드가 섞여있을 때 예외처리 하기가 난해하다. async / await Promise의 불편한 점들을 해결하기 위해 ES7에서 async/await가 추가되었다. async function f() { return 1; } f().then(alert); // 1 async는 function 앞에 위치하며, async가 붙은 함수는 항상 Promise를 반환한다. Promise객체를 생성하지 않더라도 Promise 객체가 리턴되는 것에 주의하자. await는 async함수 내부에서만 동작한다. async f..

프로미스(Promise) 비동기 처리를 위해 사용되는 객체이며, 콜백 패턴의 한계를 보완하기 위해 사용한다. 장점 비동기 처리 시점을 명확하게 표현 가능 연속된 비동기 처리 작업을 수행하기 편하며, 작업 상태를 쉽게 확인 가능 코드의 유지보수성이 증가. const promise = () => new Promise((resolve, reject) => { let sum = 1 + 1 if(sum == 2) { resolve('correct') } else { reject('incorrect') } }) promise().then((message) => { console.log(message) }).catch((message) => { console.log(message) }) resolve와 reject ..

콜백 함수 ( Callback Function ) 함수 안에 실행하는 또 다른 함수이며 파라미터로 함수를 전달하는 함수이다. 또한 함수 이름없이 익명으로 전달이 가능한 함수를 말한다. function introduce (lastName, firstName, callback) { var fullName = lastName + firstName; callback(fullName); } function hello (name) { console.log("제 이름은 " + name + "입니다"); } function bye (name) { console.log("지금까지 " + name + "이었습니다."); } introduce("나", "지만", hello); //제 이름은 나지만입니다 introduce("..

AJAX ( Asynchronous JavaScript And XML ) 자바스크립트를 이용하여 비동기적으로 서버와 브라우저가 데이터를 교환할 수 있는 통신방식이다. 서버와 통신하기 위해 XMLHttpRequest 객체를 사용한다. JSON, XML, HTML, 일반 텍스트 형식 등을 포함한 다양한 포맷을 주고 받을 수 있다. 비동기 전송방식(비동기식 처리모델) 병렬적인 테스크를 수행한다. 화면이 종료되지 않더라도 대기하지 않고 다음 작업을 수행한다. (이벤트핸들러, Timer, Ajax) 사용자의 이벤트가 있으면 전체 페이지의 새로고침이 아닌 일부분만 갱신할 수 있게 해준다. XMLHttpRequest ( XHR ) 서버와 상호작용할 때 사용하며, XHR을 사용하면 페이지의 새로고침 없이도 URL에서 ..