Dev Diary

개인 MacOS에 다른 용도(ex. 회사 계정)로 사용할 Github 계정을 생성해야 했습니다.global로 사용할 계정은 그대로 놔두고 싶었기 때문에 다른 계정에는 SSH를 설정하고, 접근하는 방식을 사용하기로 결정했습니다. 1. SSH 키 생성ssh-keygen -t rsa -C 사용할 깃허브 이메일 -f ~/.ssh/key파일명 키가 성공적으로 생성되면 ~/.ssh/key파일명과 ~/.ssh/key파일명.pub가 생성됩니다. 2. 생성한 Public Key 등록cat ~/.ssh/key파일명.pub 1. 다음 명령어로 공개 키를 복사합니다.2. SSH를 연결할 Github 계정으로 로그인 합니다.3. Settings -> SSH and GPG Keys -> New SSH key 를 선택하여 해당 공..

1. ./src 폴더와 하위에 index.html과 Index.js 파일 생성 index.html  크로스 브라우징에서 동일한 폰트가 Pretendard 웹 폰트를 적용했다. 2. package.json 생성npm init 프로젝트에 사용할 패키지 매니저를 이용해 init 명령어를 사용한다. npm install -D 사용할 패키지 매니저를 이용해 필요한 패키지들을 다운로드한다. 나는 아래와 같은 패키지들을 설치했다.-D를 붙이면 devDependencies에 패키지들이 설치되고, 이는 배포가 아닌개발 중에 사용할 패키지들임을 의미한다.webpack webpack-cli webpack-dev-server @babel/cli @babel/core @babel/preset-env babel-load..

드디어 회원가입의 마지막인 소셜 회원가입을 구현해보았다. 사실 소셜 회원가입은 구현해두면 로그인에도 같이 써먹을 수 있기 때문에 register 폴더 하위에 넣지 않고 따로 분리해주었다. 1. 카카오톡 간편 가입하기 버튼 클릭 시 카카오 로그인 화면 호출하기아래 이미지에서 카카오톡 간편 가입하기 버튼을 누르면 handleKakaoLogin() 함수를 통해 카카오 로그인 페이지를 호출할 수 있도록 해주었다. const handleKakaoLogin = () => { if (KAKAO_API_KEY && KAKAO_REDIRECT_URI) { const kakaoAuthUrl = `https://kauth.kakao.com/oauth/authorize?client_id=${KAKAO_API_..

* 여기서 구현한 RegisterAlarmDialog는 후에 SimpleAlarmDialog 라는 더 큰 범위의 공통 컴포넌트로 교체되었다. 진행중인 프로젝트에서 Dialog(모달창)를 사용할 일이 많았다. 그래서 useDialog()라는 hook을 만들어 여러 곳에서 재사용 할 수 있도록 하려고 했다. 그래서 아래와 같은 코드를 구현했는데...import { useState, useCallback } from "react";const useDialog = () => { const [isDialogOpen, setIsDialogOpen] = useState(false); const open = useCallback(() => setIsDialogOpen(true), []); const close =..

이전에 만든 회원가입 정보 입력 폼에 이어 실제로 회원가입 버튼 클릭 시 기입한 이메일로 인증 메일을 전송하고, 메일 안에 있는 인증 링크를 클릭하면 가입이 완료되는 플로우를 완성해보았다. register 폴더 안에 container 라는 폴더를 생성 후 회원가입 플로우에 필요한 화면을 추가해주었다.registerOption: 카카오, 네이버, 구글, 이메일 가입 중 어떤 방식으로 가입할지 버튼을 통해 선택하는 화면register: 회원가입에 필요한 닉네임, 이메일, 전화번호 등을 기입하는 화면registerVerify: 이메일로 인증 메일을 전송하고, 인증 완료를 대기하는 화면registerResult: 회원가입 완료 시 redirect 되는 화면직관적인 파일명을 짓는 것은 항상 어렵다. 결과적으로 저..

사이드 프로젝트에서 회원가입을 만들며 서버에 회원가입 요청 시 에러가 발생하면 Dialog(모달창)를 통해 알려주기 위해 이전에 만들어둔 디자인 시스템 중 Dialog를 사용해서 RegisterAlarmDialog 라는 컴포넌트를 추가했다. 1. 기존 RegisterAlarmDialog 컴포넌트import { Button, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle,} from "@/components/_shared/ui";import { useDialogContext } from "@/providers";import React from "react";interfa..

드디어 길었던 디자인 시스템 작업이 끝났다. 자기소개서도 써보고 이력서랑 포트폴리오도 다듬느라 더 오래 걸렸다. 이제 슬슬 프로젝트를 완성하는데 집중해보려고 한다. 회원가입부터 만들어볼건데 진행중인 프로젝트에는 크게 2종류의 회원가입을 구현할 것이다.1. 자체 회원가입: 사용자의 이메일을 직접 기입해 회원가입한다.2. 소셜 회원가입: 네이버, 카카오, 구글 계정을 이용해 회원가입한다. 이번 게시글에서는 자체 회원가입을 구현해 볼 것이고, 핵심 기술로는 zod와 react-hook-form을 사용할 것이다.zod 왜 써?기존에는 입력 값의 검증을 하나하나 했었다. 만약 비밀번호를 입력받는데 영어, 숫자, 특수문자가 섞여있어야 한다는 조건이 있으면 useState로 password 상태를 하나 만들고 use..

진행중인 프로젝트와 Github Action을 연결해두었는데, main 브랜치에 push 후 Action이 돌아가며 Storybook을 배포하는 과정에서 계속 failed가 발생했다. failed 오류의 원인을 읽어보니 다음과 같았다. 자꾸 ./profileIcon을 찾지 못하고 있었다. 하지만, 프로젝트를 아무리 쳐다보아도 profileIcon은 존재했다. 30분간 이유를 찾다가 문득 이 Github Action은 내 로컬을 기반으로 하는게 아니라 원격 Github 레포지토리를 기반으로 한다는 것을 깨달았다. 진짜 Github를 확인해보니 profileIcon 대신 대문자로 작성된 ProfileIcon이란 파일이 있었다. (멍청멍청...) 이전에 icon이름은 Camel Case 컨벤션을 적용했는데 ..