본문 바로가기

JavaScript48

Cookie와 Web Storage (Local Storage와 Session Storage) 서버에서 유저를 기억하고, 유저의 데이터를 저장하는 방법은 대표적으로 쿠키(Cookie)가 있습니다. 쿠키는 이전부터 전통적으로 사용되어 왔던 방법이고, 현재까지도 많은 웹 서비스에서 쿠키를 이용해 사용자의 데이터를 다루고 있습니다. 현재는 비단 쿠키 뿐 아니라, 로컬 스토리지(Local Storage)와 세션 스토리지(Session Storage)를 비롯한 브라우저의 웹 스토리지 API를 통해 사용자의 데이터를 저장하고, 다루고 있습니다. 오늘은 쿠키와 웹 스토리지들에 대해서 간단히 알아보겠습니다. 쿠키 쿠키는 가장 대중적으로 사용되어온 데이터를 다루는 방법으로, 서버와 웹 브라우저 간의 통신에 포함되어 전송되는 작은 데이터 조각을 의미합니다. 사용자의 정보를 쿠키에 저장하고, 통신시 쿠키를 함께 전송.. 2024. 1. 24.
자바스크립트로 비동기 처리하기 : Generator 들어가며 지난 시간까지 자바스크립트에서 효과적인 비동기 작업을 위해 사용하는 Promise 와 Async / Await 키워드에 대해 알아보았는데, 여기에 이어 오늘은 Generator 까지 한 번 공부해보겠습니다. Generator는 흐름상 async / await 과 함께 소개되는 것이 자연스러웠으나, 이전 글은 Promise에서 async / await으로 이어지는 흐름에 집중했던 글이라 간단히만 짚고 넘어가게 되었습니다. 거기에 따로 담고 싶은 내용도 있었던터라 이렇게 포스팅 하나를 할애하게 되었네요. 바로 시작하겠습니다. Generator란? Generator는 실행 중 일시 정지와 재개가 가능한 함수로, 순서에 따른 동작들을 담기에 용이한 데이터 구조를 갖고 있습니다. function* gen.. 2023. 11. 28.
자바스크립트로 비동기 처리하기 : Async / Await 들어가며 지난 포스트인 자바스크립트로 비동기 처리하기 : Callback 과 Promise 와 이어지는 글입니다. 자바스크립트는 Callback에 이어 Promise라는 객체를 맞이하며 좀 더 편리하고 안전한 방식으로 비동기 작업을 처리할 수 있게 되었습니다. 이번 시간에는 비동기를 처리하는 또 다른 키워드인 async / await 에 대해 알아보겠습니다. async / await async / await은 ES8에 등장한 키워드로, 비동기 작업들을 마치 동기 작업을 처리하는 것과 비슷한 스타일로 보이도록 만들어준다는 특징이 있습니다. 가독성과 사용성을 높이기 위해 고안된 키워드인만큼, 사용 방법도 어렵지 않습니다. 비동기 작업을 감싸고 있는 함수에 async를, 해당 비동기 작업(promise 객체).. 2023. 11. 9.
자바스크립트로 비동기 처리하기 : Callback과 Promise 들어가며 자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 쓰레드 언어입니다. 따라서 모든 작업은 동기적으로 처리되는것을 기본으로 합니다. 그러나 실제로는 네트워크 통신 등 비동기적인 처리가 꼭 필요한 상황들이 많기 때문에, 자바스크립트는 런타임의 도움을 받아 이러한 비동기 처리를 지원해왔습니다. 여기서의 런타임은 브라우저나 Node.js와 같은 실행 환경을 의미하는데, 브라우저의 경우 Web API라는 인터페이스를 지원하여 이러한 기능들을 수행할 수 있는 런타임에 접근할 수 있습니다. 정확히 어떤 과정을 거쳐 비동기 작업이 진행되는지는 아래 포스팅에 정리해두었으니, 아래 내용을 읽기 전 확인해보시면 이해에 도움이 될 것 같습니다. 싱글 쓰레드 Javascript의 비동기적 동작 오늘 살펴볼 것.. 2023. 10. 24.
JavaScript의 모듈 시스템에 대하여 오늘은 자바스크립트의 모듈 시스템에 대해 알아보겠습니다. 자바스크립트에서 어떻게 모듈 시스템이 생기고, 지금의 모습으로 발전해왔는지에 대한 내용을 배경 설명과 함께 작성해보도록 하겠습니다. 최초의 자바스크립트 최초의 자바스크립트에는 모듈 시스템이 없었습니다. 지난 글이었던 웹 표준에 대한 고찰에서 이야기 했던 내용처럼, 원래 HTML은 단순히 HyperText라고 부르는 정보를 전달하기 위한 문서였습니다. 자바스크립트는 이 HTML에 붙어 약간의 상호작용을 더해주는 한정된 역할만을 갖고 있었습니다. 다시 말하면, 그 당시의 자바스크립트 코드는 모듈 시스템을 구성할 필요가 없는 규모의 프로젝트였다는 의미입니다. 하지만 시간이 흘러 자바스크립트는 점점 더 많은 일을 할 수 있게 되었습니다. 단순한 정보 전달.. 2023. 3. 4.
Web과 Ajax에 대하여 오늘은 오랜만에 웹에 관련된 포스팅입니다. 혹시 초창기에 서비스 되던 웹의 모습을 알고 계신가요? 지금 우리가 사용하고 있는 대표적인 포털 사이트인 네이버와 다음의 초창기 모습은 현재의 모습과는 사뭇 달랐습니다. 제가 기억하는 모습보다도 훨씬 이전의 화면들이라 낯설게 느껴지는데, 몇 가지 특징들이 눈에 들어옵니다. 요즘은 어딜가도 쉽게 찾아 볼 수 있는 CSS를 이용한 화려한 스타일들은 보이지 않고, 파란색 밑줄이 그어진 a 태그나 블릿이 찍혀있는 li 태그 등 HTML 태그들이 기본으로 갖고있는 스타일들이 그대로 노출되어 있는 모습입니다. 이제는 거의 사용되지 않는 table 태그도 보이네요. 두 페이지 사이의 시간 간격이 1년(네이버 1998년 12월, 다음 2000년 2월)이 조금 넘게 있는만큼 이.. 2022. 12. 30.