Happy things are always here! ꔷ̑◡ꔷ̑

fetch는 비동기 방식으로 HTTP 요청을 날리고 응답을 받을 수 있는 api입니다. 우리가 fetch 예제를 보면 흔히 다음과 같이 사용할 것입니다. fetch('http://localhost/project/example.php', { method: 'POST', headers: { 'Content-Type': 'application/json', }, body: JSON.stringify({ name: 'olly', age: 20 }) }) 하지만 example.php에서 다음과 같은 코드를 작성했다면 값을 받아올 수 있을까요? echo $_POST['name']; echo $_POST['age']; 결과를 보면 아무것도 출력되지 않습니다. 그 이유는 body에서 데이터를 json 형태로 전송했기 때..

JS 세션 활용법은 아주 간단한데요, 다음과 같습니다. sessionStorage.setItem('name', 'olly'); //key, value sessionStorage.getItem('name'); //olly sessionStorage.length; //1 sessionStorage.key(0); //name sessionStorage.removeItem('name'); // 파라미터 삭제 sessionStorage.claer(); // 세션 초기화 간단하게 세션을 활용할 수 있습니다!

우리가 GET 요청을 날릴 때 파라미터를 추출할 때가 있는데요, new URL() 객체를 사용해 할 수 있습니다. 현재 url 가져오기 window.location.href 현재 url의 파라미터만 가져오기 window.location.search 현재 url의 특정 파라미터를 지정해 값 가져오기 new URL(원하는 url).searchParams.get('파라미터키'); 모든 파라미터의 키 얻기 const keys = new URLSearchParams(url).keys() for(const key of keys) { console.log(key); } 모든 파라미터의 값 얻기 const values = new URLSearchParams(url).values() for(const value of v..

오늘은 다음과 같은 시, 분, 초로 구성되어 있는 시계 기능을 JS로 구현해보겠습니다! function clock(){ var date = new Date(); var h = date.getHours(); var hour = h

이전에는 자바스크립트로 클릭 시 복사되는 기능을 구현하기 위해 execCommand('copy') 메소드를 사용했지만 현재 MDN 문서에서는 deprecated된 메소드로 정의하고 있습니다. 이것을 대체할 수 있는 API와 라이브러리를 소개해보겠습니다. 1. Clipboard API Hi, I'm Olly! copy! Clipboard API는 execCommand를 대체하기 위해 만들어졌습니다. 간단하게 복사 기능을 구현할 수 있지만 꼭 알아야 할 점은 https보안 설정이 되었거나 localhost에만 실행된다는 것입니다. 만약 http라면 두번째 방법을 보시면 됩니다. 2. clipboarad.js Hi, I'm Olly! Copy copy2 cdn을 연결해주어야 하고, 태그로 타겟을 지정하거나 문..

이번에는 async/await를 알아보겠습니다. 비동기 처리, callback 함수와 promise가 낯설다 하시면 아래의 포스팅 먼저 보고 오시면 됩니다😊 동기/비동기, callback 함수👇 https://hiolivia.tistory.com/42 promise란?👇 https://hiolivia.tistory.com/46 지금까지 살펴본 비동기처리 방식은 이러했습니다. //함수선언식&화살표함수 const ex1 = () => new Promise((resolve, reject) => { let name = "olly"; resolve(name); }); ex1().then(console.log); //olly //ex1().then((name)=>console.log(name)) //= ex1()...

이번에 비동기 처리와 콜백 함수의 사용법을 알아보았습니다. 하지만 콜백 함수를 여러 번 반복해서 쓰게 되면 가독성이 너무 떨어지고 콜백 지옥을 경험할 수 있습니다. 그래서 우리를 위해 존재하는 것이 Promise입니다. 기능은 콜백 함수와 같기 때문에 콜백 함수를 이해하셨다면 promise도 쉽게 이해하실 것 같아요! 콜백 함수가 헷갈린다면 콜백 함수 포스팅이 준비되어 있습니다.👇 https://hiolivia.tistory.com/42 우선 promise의 기본 사용법은 아래와 같습니다. const promise = new Promise((resolve, reject) => {}); resolve : 비동기 작업이 성공했을 때 실행시킬 콜백 함수 reject : 비동기 작업이 실패했을 때 실행시킬 콜백..

(엘리님의 강의를 참고했습니다💗) class란? object를 뽑아내기 위한 기계일 뿐, 붕어빵 틀(class)에 팥을 넣으면 팥붕어빵(object)이 나오는 것과 마찬가지입니다. class는 ES6에 추가된 문법입니다 :) object 생성하는 방법 (1) 클래스를 사용하지 않았을 때 : const Olly = { name: Olly, age: 20 }; const Elin = { name: Elin, age: 30 }; 만약 object가 100개라면? 100개의 object를 생성하는 것은 불가능합니다. 그래서 사용하는게 class이죠! 붕어빵 틀만 만들어놓으면 팥이나 크림만 넣으면 붕어빵이 완성되는 것처럼, class만 만들어놓고 파라미터로 값만 넣어주면 object를 한줄로 생성할 수 있습니다...