📖 들어가며 최근 다양한 웹 서비스를 접해보면 간편한 SNS 로그인으로 쉽게 서비스를 이용할 수 있습니다. 이런 간편한 SNS 로그인이 바로 OAuth2.0 프로토콜을 통해 진행됩니다. 그럼, OAuth가 어떤 배경에서 등장하였고, 현재는 어떻게 표준화되어 OAuth2.0이라는 이름으로 사용되고 있는지, 그 흐름에 대한 개념을 함께 알아보겠습니다. 🧐 OAuth 등장배경 웹 서비스의 다양성이 증가하면서, 안전하게 정보를 공유하는 방법에 대한 필요성이 생겼습니다. 이로 인해 OAuth(Open Authorization)라는 개념이 탄생하게 되었습니다. 이를 설명하기 위해서 한 가지 예를 들어 볼게요. 우리의 서비스가 사용자에게 사용자의 구글에 대한 정보를 제공하려면 어떻게 해야 할까요? 사용자가 구글에 대..

📖 들어가며이번 포스팅은 웹 소켓(Web Scoket)에 대한 포스팅을 하려고 합니다. 이 글을 읽으시는 분들은 아마 웹 소켓이 무엇인지 정도는 알고 있을 것이라고 생각합니다. 맞습니다. 실시간 통신이 필요할 때 적극적으로 사용되는 기술입니다. 그럼 왜 실시간 통신을 할 때 웹 소켓을 사용하는지, 기존에는 어떤 방식을 사용했고, 어떤 문제를 해결해 주는지, 어떻게 동작하는지 등등 알아보겠습니다.웹 소켓의 등장 배경초기의 인터넷 통신 방식은 주로 HTTP를 이용한 클라이언트(요청) - 서버(응답) 모델을 통해 진행되었습니다.즉, 클라이언트가 서버에 요청(Request)을 보내고, 서버가 이에 응답(Response)하는 반이중 통신 방식을 따릅니다. 이 방식이 페이지를 요청하는 등의 간단한 작업에는 효과적..

들어가며 📖 자바스크립트를 이해하는 데 있어서 실행 컨텍스트(Execution Context)의 개념에 대해서 숙지하는 것은 중요합니다. 자바스크립트의 핵심 개념 중 하나로, 자바스크립트의 코드의 실행 순서와 방식을 결정하게 되죠. 실행 컨텍스트(Excution Context)란❓ 실행할 코드에 제공할 환경 정보들을 모아놓은 객체입니다. 자바스크립트의 동적 언어로서의 성격을 가장 잘 파악할 수 있는 개념입니다. 그래서 자바스크립트는 실행 컨텍스트가 활성화되는 시점에 아래와 같은 동작을 수행합니다. 호이스팅(hoisting) 외부 환경 정보 구성 this 값 설정 등등 이로 인해 다른 언어에서는 발견할 수 없는 특이한 형상들이 발생합니다. 동작 과정 동일한 환경에 있는 코드들을 실행할 때 필요한 환경 정보..

📖 들어가며 비동기 처리 패턴을 알아보기 앞서, 비동기 처리란 무엇일까요? 비동기 처리란? 특정 코드의 연산이 완료될 때까지 전체 코드의 실행을 중단하지 않고, 다음 코드를 우선적으로 실행하는 방식을 말합니다. 이렇게 동작하는 함수를 자바스크립트에서는 '비동기 함수'라고 합니다. 비동기 처리의 한계점은 작업 완료 시점을 예측하기 어렵다는 점입니다. 하지만 이것은 비동기 처리의 본질적인 특성이며, 이를 효과적으로 관리하는 것이 중요합니다. 자바스크립트는 기본적으로 싱글 스레드(single-threaded) 기반의 언어로, 한 번에 하나의 작업만 처리할 수 있습니다. 즉, 자바스크립트는 코드가 작성된 순서대로, 위에서 아래로, 동기적으로 처리된다는 것을 의미합니다. 그렇다면 어떻게 자바스크립트가 비동기적인 ..

📖 들어가며 Next.js 13 버전 이후에는 Rust 언어로 개발된 Turbopack이 도입되었습니다. Next 14 버전으로 마이그레이션을 진행하고 Turbopack으로 개발 환경을 실행했을 때 맞이한 문제에 대해서 정리해보려 합니다. 문제 발생 ❗ Turbopack으로 개발 환경을 실행하자 아래와 같이 오류가 발생했습니다. 이 오류에 대해 검색해 보니 "컴포넌트의 이름이 잘못되었거나, import 경로가 잘못 입력되었을 때 발생한다"는 설명을 찾을 수 있었습니다. 이에 따라 import 된 부분을 잘 확인해 보라는 조언이 있었습니다. 그러나, 제 코드에서는 import가 정상적으로 이루어졌기 때문에 수정할 부분이 없었습니다. 따라서 에러 메시지를 다시 확인해 본 결과 'DarkModeBtn' 컴포넌..

📖 들어가며 먼저, 웹 렌더링(Web Rendering)이란 웹 페이지를 사용자에게 보여주는 과정을 의미합니다. 이 렌더링 방식에 따라서 로딩 속도, 검색 엔진 최적화(SEO), 사용자 경험 등이 달라집니다. 이 과정을 간단히 비유하자면, 레스토랑에서 요리를 주문한다고 가정해 보겠습니다. 레스토랑에서 손님(사용자)이 메뉴(웹 페이지)를 주문하고, 요리사(서버)가 요리(웹페이지)를 준비하고, 웨이터(브라우저)가 요리를 손님에게 가져다주는 과정과 비슷합니다. 여기서 요리사가 요리를 준비하는 과정이 바로 렌더링(Rendering)입니다. 이렇게 중요한 웹 렌더링에는 여러 가지 방식이 있습니다. 오늘 알아볼 렌더링 방식들은 아래와 같습니다. 클라이언트 사이드 렌더링(Client Side Rendering, CS..

📖 들어가며 최근 Next.14 버전 app router로 마이그레이션을 진행하면서 카카오톡 공유하기 기능을 구현하는 데 있어서 변경된 부분과 여러 오류를 맞이하여 새롭게 포스팅합니다. 이전 포스팅에서 1번 ~ 1-3번까지는 방법이 동일합니다. 이전 포스팅을 참고해서 플랫폼 등록까지 하고 읽어주시면 감사하겠습니다. app router에서는 _document.tsx와 _app.tsx가 사라지고 이전에 해당 파일에서 작성되었던 코드는 layout.tsx에서 작성해주어야 합니다. 스크립트 컴포넌트 작성 카카오 디벨로퍼에서 플랫폼 등록을 완료했다면 이제 프로젝트로 돌아와서 적용을 해봅시다. 먼저 KakaoScript.tsx 파일을 생성하고 아래 코드를 생성합니다. 파일 위치는 프로젝트 구조에 맞게 생성하시면 됩..

📖들어가며 약 2년 전 Next.js(SSG) + TypeScript로 제작한 롤 MBTI 프로젝트를 14 버전으로 마이그레이션 한 과정 및 후기를 작성해보려 한다. 해당 글은 마이그레이션을 어떻게 하는 가에 대한 글이 아닙니다. 제목 그대로 마이그레이션을 하는 과정을 기록하는 글입니다. 마이그레이션을 왜 해야 했는가? 사실 서비스 자체로는 문제없이 잘 돌아가고 있었다. 대신에 Next.js로 직접 A - Z까지 해본 프로젝트는 롤 MBTI 프로젝트밖에 없었다. Next.js가 11버전에 비해 14 버전까지(특히 13 버전에서) 많은 부분이 변경이 되고, 어떻게 활용할 수 있는지 직접 부딪히며 깨달으며 학습하는 방식으로 지식을 흡수하는 나의 성향인 이유와 최신 버전으로 마이그레이션 하면서 기존 코드와는 ..

this 키워드의 정의 자바스크립트에서 this는 현재 실행 컨텍스트를 참조하는 특별한 키워드입니다. 기본적으로 실행 컨텍스트가 생성될 때 함께 결정이 되는데요. 즉, this의 값은 함수가 어떻게 호출되었는지에 따라 변하며, 일반적으로는 함수를 호출한 객체를 참조합니다. 일반 함수에서의 this 일반함수에서 this는 '전역 객체'를 가리킵니다. 전역 객체란? 브라우저 환경에서는 window, Node.js 환경에서는 global 객체를 가리킵니다. function main() { console.log(this); } main(); // window 객체 또는 global 객체 출력 위와 같이 이렇게 전역적으로 함수를 호출하는 것은 function main() { console.log(this); } ..