서스포PAR_개발블로그

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은 데이터 포맷일 뿐이며 어떠한 통신 방법도, 프로그래밍 문법도 아닌 단순히 데이터를..

Ajax? 어디서 한번쯤 들어봤지만 자세히 알지못했다. 더 나은 개발자가 되기 위한 노력! ✨ Ajax에 대해서 알아보자!! ✨ 💖 AJAX(Asynchronous(비동기식) Javascript And Xml) 1. Ajax는 그 자체가 별도의 새로운 언어는 아닙니다. HTML, CSS, 자바스크립트, DOM, XML 등 기존에 사용되던 여러 기술을 함께 사용하는 새로운 개발 기법입니다. ✨ 자바스크립트를 이용해 서버와 브라우저가 비동기 방식으로 데이터를 교환할 수 있는 통신 기능 ✨ 그러나 실질적으로 XML보다 주로 JSON을 많이 사용하다. 2. Ajax는 웹 페이지 전체를 다시 로딩하지 않고도, 웹 페이지의 일부분만을 갱신할 수 있게 해줍니다. 즉 Ajax를 이용하면 백그라운드 영역에서 서버와 통신..

깃과 깃허브를 사용할때 브런치를 빼 먹을 수 없는데 도대체 브랜치가 무엇이길래...? ✨ 브랜치에 대해 알아보도록 하자 ✨ 💖 브랜치(Branch) 1. 모든 버전 관리 시스템에는 브랜치(Branch)라는 개념이 있습니다. 브랜치는 원래 나뭇가지라는 뜻입니다. 버전 관리 시스템에서는 나무가 가지에서 새 줄기를 뻗듯이 여러 갈래로 퍼지는 데이터 흐름을 가르키는 말로 사용합니다. 2. 브랜치는 독립적으로 어떤 작업을 진행하기 위한 것입니다. 필요에 의해 만들어지는 각각의 브랜치는 다른 브랜치의 영향을 받지 않기때문에, 여러작업을 동시에 진행할 수 있습니다. 즉, 자유롭게 일할 수 있고 협업을 쉽고 편리하게 할 수 있도록 도와줍니다. 📑 브랜치 기능 💬 분기 - 새 브랜치를 만드는 것을 분기(Branch)라 ..