이론113 자바스크립트로 비동기 처리하기 : 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. Next.js로 metadata 구성하기 얼마 전 작은 규모의 신규 프로젝트에 프론트엔드로 참여할 기회가 생겼습니다. 프로젝트 특성상 외부에 노출되는 빈도 수가 매출에 큰 영향을 끼치기때문에 SEO(Search Engine Optimization, 검색 엔진 최적화)가 굉장히 중요한 요소가 되었습니다. 그 중에서도 페이지가 갖고 있는 메타데이터(Metadata)는 SEO에 있어 가장 중요한, 빼놓을 수 없는 요소입니다. 그러나 우리가 주로 사용하던 React.js의 일반적인 CSR 방식으로는 이러한 수요를 만족하는데 한계가 있었습니다. 그러한 이유로 SEO에 유리한 Next.js를 선택하게 되었는데, 오늘 포스팅에서는 Metadata에 대해 알아보고 이를 통하여 어떻게 SEO를 향상시킬 수 있는지 알아보겠습니다. SEO SEO 수준을 결정하는 .. 2023. 9. 24. 인터넷 프로토콜 HTTP와 HTTPS 오늘은 네트워크 기본 지식이자 면접 단골 질문 주제이기도 한 HTTP와 HTTPS에 대해 정리해보겠습니다. TCP/IP란? HTTP와 HTTPS에 대해 알기 위해서는, TCP/IP의 개념부터 알아야합니다. 컴퓨터가 네트워크 장비나 다른 컴퓨터와 통신하기 위해서는 반드시 서로 같은 방법을 사용하여 통신해야 합니다. 사람끼리의 의사소통에서도 서로 같은 언어를 사용해야 제대로 된 의미를 전달할 수 있겠죠? 사는 지역이 다르고, 성별이나 나이가 달라도, 심지어 국적이 다르더라도 같은 언어를 사용하는 사람들끼리는 소통이 가능합니다. 이는 컴퓨터도 마찬가지입니다. 지금 주위를 둘러보면 데스크톱이나 노트북, 스마트폰처럼 일반적으로 많이 사용하는 개인용 컴퓨터나, 스위치 장비나 게이트웨이 같은 네트워크 장비끼리들도 통.. 2023. 9. 3. 리액트에서 DOM Node를 찾는 방법 들어가며 오늘은 React에서 DOM Node를 선택하는 방법에 대해 짧게 적어보려합니다. 함수 컴포넌트가 주류가 된지 꽤 오랜 시간이 지난 지금이야 당연하게도 useRef를 사용하지만, 과거 클래스 컴포넌트가 주로 사용되었을때는 이러한 훅 대신, react-dom에 포함된 findDOMNode라는 메서드를 사용하여 브라우저의 DOM Node를 선택하였습니다. 이번 포스팅에서는 해당 메서드가 어떻게 사용되었는지, 이 방식이 어떤 문제점을 가지고 있었으며 현재의 모습으로 바뀌면서 어떻게 문제를 해결했는지에 대해 알아봅니다. findDOMNode findDOMNode는 리액트에서 노드를 찾는 가장 원시적인 방법으로, 클래스 컴포넌트의 생명 주기 메서드 내에서 사용합니다. 찾고싶은 DOM Node를 findD.. 2023. 8. 5. 이전 1 2 3 4 5 6 ··· 19 다음
