이론/Frontend73 자바스크립트로 비동기 처리하기 : 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. Next.js 13에서 Kakao 로그인 처리하기 with Firebase (2) 들어가며 지난 글에서는 카카오 API를 이용하기 위해 프로젝트에 환경 설정을 하고, 카카오 서버와 통신까지 진행해보았습니다. 이번 포스팅에서는 받아온 데이터를 토대로 Firebase와 연동하여 저장하는 과정을 알아보겠습니다. Firebase 연동 Firebase를 이용하기 위해서는 먼저 프로젝트를 등록하는 절차가 필요합니다. Firebase Console에 접속합니다. 최근 프로젝트의 "프로젝트 추가" 버튼을 눌러 새 프로젝트를 만듭니다. 구글 애널리틱스는 반드시 설정할 필요는 없습니다. 그냥 넘어가셔도 구현에 문제는 없으니 구성하지 않으셔도 좋습니다. 프로젝트가 생성되면 위와 같은 화면으로 들어올 수 있습니다. 바로 우리 서비스에 Firebase를 추가해봅시다. 우리는 웹 서비스이므로, 버튼을 눌러 다.. 2023. 11. 2. 자바스크립트로 비동기 처리하기 : Callback과 Promise 들어가며 자바스크립트는 한 번에 하나의 작업만 처리할 수 있는 싱글 쓰레드 언어입니다. 따라서 모든 작업은 동기적으로 처리되는것을 기본으로 합니다. 그러나 실제로는 네트워크 통신 등 비동기적인 처리가 꼭 필요한 상황들이 많기 때문에, 자바스크립트는 런타임의 도움을 받아 이러한 비동기 처리를 지원해왔습니다. 여기서의 런타임은 브라우저나 Node.js와 같은 실행 환경을 의미하는데, 브라우저의 경우 Web API라는 인터페이스를 지원하여 이러한 기능들을 수행할 수 있는 런타임에 접근할 수 있습니다. 정확히 어떤 과정을 거쳐 비동기 작업이 진행되는지는 아래 포스팅에 정리해두었으니, 아래 내용을 읽기 전 확인해보시면 이해에 도움이 될 것 같습니다. 싱글 쓰레드 Javascript의 비동기적 동작 오늘 살펴볼 것.. 2023. 10. 24. Next.js 13에서 Kakao 로그인 처리하기 with Firebase (1) 들어가며 오늘은 Next.js 13에서 Firebase와의 연동을 이용해 Kakao 로그인을 구현하는 방법을 알아보겠습니다. 비교적 공식 문서가 자세히 설명되어있고, 각종 정보가 많은 편이라 어렵지 않게 구현할 수 있습니다. 먼저 로그인을 적용하는 과정을 크게 한 번 살펴보겠습니다. 크게 보면 카카오 로그인, 회원 확인 및 가입, 서비스 로그인의 세 단계로 나뉘어집니다. 이 포스트에서 알아볼 것은 step1의 카카오 로그인 부분입니다. 서비스 등록 카카오 API를 사용하기 위해서는 먼저 사용할 서비스를 등록해야 합니다. Kakao Developers에서 "애플리케이션 추가하기" 를 통해 서비스를 등록해줍니다. 환경 설정 서비스가 등록되었다면, [요약 정보] 메뉴의 [앱 키] 에서 서비스 인증에 사용될 키.. 2023. 10. 16. Next.js Page Router와 App Router Next.js 13 버전에서 새롭게 공개된 App Router 방식은 몇 번의 업데이트를 거쳐 현재(포스팅 작성 시점 기준 13.5) 는 꽤 높은 수준의 안정성을 가지게 되었습니다. 저도 작은 프로젝트들에서 App Router 방식의 Next.js 프로젝트를 새로 시작하거나 마이그레이션 해보며 직접 사용해 보았는데, Emotion 호환 정도를 제외하곤 안정성 면에서 큰 문제를 느끼지 못했습니다. (MSW에 대한 문제도 있다고는 들었지만 직접 확인해보지는 못했습니다.) 위처럼 몇 가지 단점들이 존재하더라도 App Router는 그것을 감수하고 사용할만큼 충분히 매력적인 선택지입니다. 이번 포스팅에서는 App Router가 등장하게 된 배경과 이유, Page Router와는 어떤 부분들이 달라졌는지에 대해 .. 2023. 10. 8. 이전 1 2 3 4 5 ··· 13 다음
