분류 전체보기211 주소창에 google.com을 입력하면 들어가며 "브라우저 주소창에 google.com을 입력하면 어떤 일이 일어날까요?" 위 질문은 기술 면접에 종종 나오는 단골 주제로 굉장히 유명합니다. "개발자 신입 기술 면접 대비" 와 같은 주제의 글에서는 빠지지 않고 등장하는 편인데, 브라우저 렌더링에 대해서만 정리되어 있거나, 해당 서버에 접근하는 과정만 있는 글이 많길래 이번 포스트에서는 두 내용을 한 번에 담아보았습니다. 과연 브라우저에 페이지 주소를 입력하면 어떤 일이 일어나는지 시간 순서에 따라 알아보겠습니다. 데이터 받아오기 브라우저에 특정 사이트의 주소를 입력하게 되면 잠깐의 시간 뒤에 해당 사이트가 나타납니다. 우리는 이 과정을 두 가지로 분리해 볼 수 있습니다. 데이터를 받아오는 과정 받아온 데이터를 띄워주는 과정 먼저 데이터를 받아.. 2023. 12. 30. Zustand로 전역 상태 관리하기 들어가며 React에서 전역 상태를 관리하는 방법에는 대표적으로 Context API가 있습니다. 단방향의 데이터 흐름을 해치지 않으면서도, Provider를 통해 각 컴포넌트에서 상태를 사용할 수 있게 해주는 기능입니다. React에서 공식적으로 지원하는 기능이기에 공식 문서에서도 이 방법을 추천하고 있습니다. 아직 Context API에 대해 잘 모른다면 아래 포스트를 참고해주세요. Context API 개념 잡기 그러나 Context API를 직접 사용하지 않고 서드 파티 라이브러리를 이용해 전역 상태를 관리하는 방법도 있습니다. 대표적으로 Zustand, Recoil, Jotai 등이 있는데요, 오늘은 Zustand를 사용하는 방법과 주의할 점들을 알아보도록 하겠습니다. 구성 먼저 사용하는 패키지.. 2023. 12. 20. 자바스크립트로 비동기 처리하기 : Generator 들어가며 지난 시간까지 자바스크립트에서 효과적인 비동기 작업을 위해 사용하는 Promise 와 Async / Await 키워드에 대해 알아보았는데, 여기에 이어 오늘은 Generator 까지 한 번 공부해보겠습니다. Generator는 흐름상 async / await 과 함께 소개되는 것이 자연스러웠으나, 이전 글은 Promise에서 async / await으로 이어지는 흐름에 집중했던 글이라 간단히만 짚고 넘어가게 되었습니다. 거기에 따로 담고 싶은 내용도 있었던터라 이렇게 포스팅 하나를 할애하게 되었네요. 바로 시작하겠습니다. Generator란? Generator는 실행 중 일시 정지와 재개가 가능한 함수로, 순서에 따른 동작들을 담기에 용이한 데이터 구조를 갖고 있습니다. function* gen.. 2023. 11. 28. 우아콘 2023 후기 우아한형제들의 기술 공유 컨퍼런스인 우아콘 2023이 11월 15일 삼성역 그랜드 인터컨티넨탈 서울 파르나스 5층에서 열렸습니다. 그동안 유튜브 생중계를 통해 진행되었던 우아콘의 첫 오프라인 컨퍼런스였는데, 그래서인지 당일 현장에서도 엄청나게 많은 사람들이 모인 풍경을 볼 수 있었습니다. 특히 컨퍼런스 시작 시간인 10시가 지나서도 입장 대기 줄이 길게 늘어졌었는데, 얼마나 많은 분들이 참여해주셨는지 가늠할 수 있었던 장면이 아닐까 싶습니다. 요즘 핫하게 쓰이고 있는 개발 기술들이나 배달이라는 도메인, 나아가 우아한형제들이라는 회사 자체에 관심 있으신 분들이라면 그냥 놓치기 아까운 빅 이벤트인만큼 더욱 뜨거운 관심을 보여주신것 같습니다. 이번 우아콘에 대한 더 자세한 소개는 배민다움에서 확인하실 수 있습.. 2023. 11. 17. 자바스크립트로 비동기 처리하기 : 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. 이전 1 2 3 4 5 ··· 36 다음
