Next.js에서 Clerk.js 사용하여 구글 연동 로그인 만들기

Clerk | Authentication and User Management The easiest way to add authentication and user management to your application. Purpose-built for React, Next.js, Remix, and “The Modern Web”. clerk.com ✨Clerk.js ? clerk.js 라이브러리는 로그인 구현을 도와주는 무료 JS라이브러리입니다. clerk.com 홈페이지의 메인 화면에는 인증 뿐만 아니라, 유저 매니징까지 할 수 있는 라이브러리라고 소개하는데요, React, Next.js 뿐만 아니라 다양한 프레임워크, 바닐라 JS에서도 사용할 수 있는 도구라고 합니다! clerk.js는 정말 간단하게 ..

• format_list_bulleted Front End/Next
• · 2023. 11. 16.
• textsms

[우아한 테크코스 6기 프리코스] 4주차 회고록

4주 차도 어느덧 끝이 났네요. 이번 주는 지난 3주간 배운 내용들을 최대한 미션에 적용해 보고자 노력했던 한 주였습니다. TDD에 대한 이해도 역시 높아진 것 같아 자신감 있게 미션을 진행했습니다! 특히 지난 코수타에서 준 코치님께서 말씀하신 부분에 대해서 많이 고민을 했어요. ‘서비스의 핵심을 파악하고, 이를 위한 코드를 먼저 구현해보아라’라는 것인데요, 사실 지난 3주간 배웠던 TDD 개발 방법과는 상반되는 말씀이라고 생각했습니다. 테스트 코드를 작성하기 이전 실제 코드를 작성하라는 것처럼 들렸거든요. 그래서 그 의미를 정확히 짚어보고자 노력했습니다. 🌱시스템의 핵심을 파악하라? 준 코치님께서 말씀하신 핵심을 파악하고 빠르게 로직을 작성해 보라는 것의 의미가 무엇인지 고민했습니다. 저는 다른 분들이..

• format_list_bulleted 우아한 테크코스 6기/우아한 테크코스 6기 프리코스
• · 2023. 11. 16.
• textsms

[디자인 패턴] 복합체(Composite) 패턴

❓복합체 패턴? 복합체 패턴은 구조 패턴의 하나로, 여러 개의 객체를 묶어 단일 객체처럼 동작하도록 하는 패턴입니다. 이 방식은 트리 구조를 형성하며, 복합 객체와 개별 객체가 동일한 인터페이스로 다뤄지기 때문에, 클라이언트 코드가 단순해진다는 특징이 있습니다! 복합체 패턴은 크게 4개의 구성 요소로 이루어 져 있습니다. Componet Composite Leaf Client 예시를 통해 알아보겠습니다! ❗복합체 패턴의 예시 (JS) // 1. Component (구성요소) 인터페이스 class FileSystemComponent { constructor(name) { this.name = name; } display() { throw new Error("이 메서드는 하위 클래스에서 구현되어야 합니다."..

• format_list_bulleted 개발 상식/디자인 패턴
• · 2023. 11. 15.
• textsms

[디자인 패턴] 브릿지(Bridge) 패턴

❓브릿지 패턴? 브릿지 패턴은 구조 패턴의 하나로, 다른 용어로 핸들(Handle) 패턴, 구현부 패턴이라고 합니다. 객체의 확장성을 향상시키기 위한 패턴으로, 객체에서 동작을 처리하는 구현부와 확장을 위한 추상부로 분리하는 패턴을 말합니다. 구현부, 추상부로 분리하는 예시를 통해 확인해 봅시다. ❗브릿지 패턴의 예시 (JS) // 구현부 인터페이스 class Implementor { sendData(data) { throw new Error("오바리이딩 되지 않았습니다."); } } // 하위 구현부 클래스A class ConcreteImplementorA extends Implementor { sendData(data) { console.log("A 데이터를 보냅니다.", data); } } // 하..

• format_list_bulleted 개발 상식/디자인 패턴
• · 2023. 11. 14.
• textsms

[디자인 패턴] 어댑터(Adapter) 패턴

❓어댑터 패턴? 어댑터 패턴은 구조 패턴으로, 다른 말로 래퍼(Wrapper) 패턴이라고도 합니다. 연관성 없는 2개의 객체를 묶어서 인터페이스를 만들어 주는 패턴을 말하는데요, 이를 통해 서로 연관 없는 두 객체의 호환성을 이루어줄 수 있습니다! ❓어댑터 패턴의 종류 어댑터 패턴은 두 가지 방식이 있는데요, 클래스를 이용한 클래스 어댑터 패턴(Class Adapter Pattern), 그리고 객체를 이용한 객체 어댑터 패턴(Object Adapter Pattern)이 있습니다! ❗클래스 어댑터 패턴 클래스의 상속을 이용한 어댑터 패턴입니다. // 기존에 사용하던 클래스 class OldDate { constructor(dateString) { this.dateString = dateString; } g..

• format_list_bulleted 개발 상식/디자인 패턴
• · 2023. 11. 14.
• textsms

[디자인 패턴] 프로토타입(Prototype) 패턴

❓프로토타입 패턴이 무엇일까? 프로토타입 패턴은 생성패턴의 하나로, 프로토타입(원형)을 사용하여 객체를 생성하는 것을 말합니다. ❓프로토타입(원형)을 사용하는 이유? 프로토타입에서는 기존에 있는 객체가 있다면, 새로 생성하는 것이 아닌, 기존의 객체를 복제하여 사용합니다. 이는 새로 객체를 만드는 것 보다 자원을 절약할 수 있습니다. 즉 인스턴스화 과정을 생략함으로써 생성 로직에 소모되는 시간과 자원을 절약할 수 있다는 것! 이러한 특성 때문에 대량 생산을 할 때 적은 자원으로 많은 객체를 만들 수 있다는 장점이 있습니다! ❓자바스크립트의 예시? 사실 자바스크립트의 예시라고 할 것이 없는 것이, 프로토타입은 자바스크립트에 내장 되어 있는, JS의 특징이라 할 수 있습니다. const Person = (f..

• format_list_bulleted 개발 상식/디자인 패턴
• · 2023. 11. 11.
• textsms