서스포PAR_개발블로그

저번에 API에 대해서 알아봤습니다. 자바스크립트에서 HTTP Requests를 위한 방법이 두가지가 존재하는데 🎁 오늘은 어떤것이 존재하고 어떤 차이점이 존재하는지 알아보겠습니다. 🎁 💖 Fetch ES6부터 들어온 JavaScript 내장 라이브러리입니다. Promise 기반으로 만들어졌기 때문에 axios와 마찬가지로 데이터 다루기가 쉽고, 내장 라이브러리라는 장점으로 상당히 편리합니다. fetch("https://localhost:3000/user/post", { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ id: "asd123", description: "hello world", }..

API를 사용하는데 이것이 어떤 내용인지 처음엔 자세히 몰랐다. 하지만 알아야겠다는 마음을 먹고 기본 개념부터 정리하자고 마음먹었다 🎁 기본이론부터 호출방법까지 차차 알아보도록 하자 🎁 💖 API (Application Programming Interface) API(Application Programming Interface, 응용 프로그램 프로그래밍 인터페이스)는 응용 프로그램에서 사용할 수 있도록, 운영 체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등을 위한 인터페이스를 제공한다. 구글에 API가 뭔지 쳐보자. 위키백과에는 다음과 같은 설명이 있다. 🔊 위 이미지를 통해 간단하게 설명하자면, API는 손님(프..

Todo list를 만들때 값을 저장하기 위해 localstorage를 사용하는데 사용하는 방법은 알아도 정확한 이론은 한번쯤 정리해야겠다는 생각을 하였다. ✨loclastorage에 대해서 알아보도록 하자! ✨ 💖 localstorage 1. localstorage는 HTML5에서 추가된 저장소로 브라우저에 위치한다. 2. localstorage는 window 객체 안에 들어있고, 'Storage'객체를 상속받기 때문에 메소드를 사용할 수 있다. 3. 간단한 키와 값을 저장할 수 있고, 로컬 스토리지에 저장된 데이터는 사용자가 지우지 않는 이상 계속 브라우저에 남아있다. 영구적으로 값이 저장되는 메모리 공간(비휘발성 메모리) -자바스크립트 변수는 프로그램이 실행되는 기간에만 존재한다. 그래서프로그램이 ..

promise에 대해 알아봤으나 promise을 활용한 asyns/await 비동기 방식에 대해서 알아볼 생각입니다. asyns/await는 왜 나왔는지 어떻게 사용하는지에 대하여... 💖 async/await 비동기 프로그래밍에서 콜백함수를 반드시 사용해야하는데 콜백함수가 깊어지면 코드가 복잡해지는(가독성이 안좋아지는) 콜백지옥을 맛보았죠? 그것을 해결하기 위해 ES6에서 Promise를 도입하였습니다. 하지만 아래처럼 Peomise를 사용해도 여전히 복잡합니다. 콜백지옥과 또다른 가독성 난관에 부딪히게 되죠... //Promise가동성 예시 function increase(number) { const promise = new Promise((resolve, reject)=>{ setTimeout(()..

콜백지옥을 벗어나기 위해 promise를 사용하는데 promise가 무엇인지 더 자세히 알아보기로 마음먹었다. 💖 Promise “A promise is an object that may produce a single value some time in the future” - 프로미스는 자바스크립트 비동기 처리에 사용되는 객체입니다. 여기서 자바스크립트의 비동기 처리란 ‘특정 코드의 실행이 완료될 때까지 기다리지 않고 다음 코드를 먼저 수행하는 자바스크립트의 특성’을 의미합니다. https://tlsdnjs12.tistory.com/12 동기식 (Synchronous) / 비동기식 (Asynchronous) 이란? 자바스크립트의 처리방식과 동기식, 비동기에 대해서 천천히 알아보자! 출처 - https:/..

자바스크립트 지식을 공부하면서 "콜백"이라는 단어를 많이 보았는데, 정확한 의미를 알려주는 책은 찾기 힘들었다. 그래서 이번기회에 블로그를 정리하면서 모르는 내용들을 하나하나 파악하기로 결심하였다. 💖 콜백 함수(Callback Function) 콜백함수는 간단하게 다른 함수에 매개변수로 넘겨준 함수를 말한다. 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다. callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다. 그렇기 때문에 non-block이며, 비동기 방식의 함수를 사용합니다. /* 1. 기본예제 */ function a(ca..

자바스크립트의 처리방식과 동기식, 비동기에 대해서 천천히 알아보자! 출처 - https://learnjs.vlpt.us/async/ 📑 동기식(Synchronous) VS 비동기식(Asynchronous) 동기와 비동기를 나누는 가장 큰 차이점을 어떻게 실행 순서를 가지는 지에 있다. Syncronous 동기는 요청을 보낸 후 해당 요청의 응답을 받아야 다음 동작을 실행하는 방식을, Asynchronous 비동기는 요청을 보낸 후 응답과 관계없이 다음 동작을 실행할 수 있는 방식을 의미한다. 👏 동기식 (Synchronous) 먼저 시작된 하나의 작업이 끝날 때까지 다른 작업을 시작하지 않고 기다렸다가 다 끝나면 새로운 작업을 시작하는 방식이다. 위 그림 Synchronous와 같이 작업이 직렬로 배치되..

todolist를 만들다 스쳐지나간 JSON이라는 개념. 한번해보는 것도 좋지만 정확히 이론을 잡는것도 중요하다 생각하였다. 그래서 자료들을 수집해 나의 블로그에 정리해보았다. ✨JSON에 대해서 알아보자.✨ 💖 JSON(JavaScript Object Notation) 1. JSON은 자바스크립트 기반으로 만들어졌습니다. 또한 자바스크립트의 객체 표기법을 따릅니다. 2. JSON은 사람과 기계 모두다 읽을 수 있는 텍스트 기반의 데이터 교환 표준으로 최근에는 JSON이 XML을 대체해서 데이터 전송 등에 많이 사용합니다. 3. 데이터를 저장하거나 전송할 때 많이 사용되는 경량의 DATA 교환 형식 입니다. 4. JSON은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를..