진행 예정일을 선택하지 않더라도, 아래의 '번쩍 개설하기' 버튼이 활성화되기를 바랐습니다.  해당 프로젝트에서는 react-hook-form 과 유효성 검사를 위한 zod 및 zodResolver를 사용하고 있기에, 정의해둔 스키마를 살펴봐야 했어요. 정의한 스키마는 아래와 같았습니다.  export const flashSchema = z.object({ title: z .string() .max(30, { message: '30자 까지 입력할 수 있습니다.' }) .min(1, { message: '모임 제목을 입력해주세요.' }), desc: z .string() .min(1, { message: '번쩍 설명을 입력해주세요.', }) .max(500,..

버셀을 통해 배포하려는 도중, 맞닥뜨린 이슈와 해결과정입니다. 저만의 PAT를 만들어두고, 이 토큰을 통해 배포 workflow를 구성하려 했습니다.  하지만 실행해보니 위와 같이, workflow 생성 후 원격 레포지토리에 넣으려고 했는데 refuse 되었어요.  제 로컬에 등록해둔 환경변수가 문제인지 확인하기 위해 github.com에 제 PAT를 등록해두었습니다. 그러나 여전히 위의 refuse 상황은 지속되었어요. 이때부터 저는 토큰 자체의 권한 문제가 있지 않을까 의심했습니다.   역시, 제 PAT 토큰은 workflow 권한이 체크되어있지 않았어요. 해당 workflow 권한에 check를 하고 난 뒤, 제 local에서 remote로 push 하니 정상적으로 push가 실행되었습니다.

버셀로 간단하게 배포는 여러번 해봤지만, 그럴 때마다 도메인에 .vercel.app 이 붙곤 합니다.하지만 실제로 사업 혹은 창업을 준비하는 사이트의 경우 .verel.app 이라는 도메인을 그대로 사용하면... 보기 좋진 않죠. 동물 병원 리뷰를 중심으로 하는 반려인 커뮤니티 프로젝트를 진행하며, 도메인을 구매하고 연결한 과정을 정리해보고자 합니다.  1. 도메인 구매하기우선 도메인을 구매해야 합니다. 도메인별로 가격은 다르며, 한번 사면 영구적으로 유지할 수 있는게 아니라 특정 기간동안 해당 도메인을 대여해서 사용하는 개념으로 이해하시면 됩니다. 그래서 사용 기한에 따른 도메인 견적서 비용이 달라집니다.도메인은 도메인 구매 대행 사이트를 통해 구매하시면 되는데, 크게 2가지 방식이 있습니다.1. 1 ..

성능 최적화를 위해 사용되는 방법들은 다양합니다. React.memo는 리액트 컴포넌트의 불필요한 리렌더링을 방지하여 최적화를 이루는데 사용되고, useMemo는 복잡한 연산 결과를 메모이제이션하여 의존성안에 있는 값이 변하지 않았을 경우 다시 계산을 하지 않는데 사용됩니다. useCallback은 함수의 참조를 유지함으로써 컴포넌트의 리렌더링에 마다 내부의 함수들이 재생성되는 것을 방지합니다.말만 들었을 때는 React.memo든 useMemo든 useCallback이든 많이 사용해두면 좋을 것 같지만 그렇게 된다면 불필요한 메모이제이션으로 오버헤드가 커져 오히려 비효율성이 더욱 커질 수 있습니다. 그래서 아주 현명하게 최적화를 사용해야하는데, 오늘은 그 중에서 useCallback의 적절한 사용시기..

패키지 매니저를 어떤 걸 선택할까 고민하는 시간이 있었습니다. 그래서 오늘은 패키지 매니저의 특성들을 간단하게 정리하고, 제가 선택한 pnpm의 구조에 대해 좀 더 이야기해보는 시간을 갖고자 합니다.참고로, 패키지 매니저가 존재하기에 간단하게 import 하는 형식이 가능했습니다.특정 라이브러리를 import 해오기 위해서는 반드시 절대 경로가 필요한데, 그동안 import React from 'react'; 와 같은 방식이 가능했던건 패키지 매니저가 버전과 위치를 명확히 가르쳐주고 있기 때문입니다. package.json으로 패키지의 버전에 대한 범위를 지정하고, package-lock.json 혹은 yarn.lock 파일로 하나의 버전으로 고정해버립니다. npm vs yarn classic vs ya..

얼마전에 소켓을 도입하여 프로젝트를 진행하는데, 생각보다 많은 트러블 슈팅을 겪었습니다.프론트엔드 개발자 입장에서 소켓 도입은 큰 어려움이 아니라고 생각했는데, 역시 항상 실제 적용하는 건 다르더라구요. 오늘은 그 트러블 슈팅들을 정리해보고자 합니다. 1. 소켓이 제대로 연결되지 않는 문제점저는 socket-io.client 라이브러리를 사용하는 것을 선택했는데요, 이 라이브러리에 문제점이 발생했습니다. 아무리 WebSocket을 연결하려고 해도, 아래와 같은 경고 문구가 뜨면서 연결이 되지 않았습니다. 받은 소켓 메세지는 아래와 같았고요. 원인은 간단했습니다. (알고나니 간단) 그냥 라이브러리 문제였어요.4.8.1 버전은 제대로 동작하지 않고, 2.4.0은 제대로 동작하더라구요.그래서 2.4.0 버전으..

안녕하세요, 오늘은 소켓에 대해 다뤄보도록 하겠습니다. 그 전에 필요한 대략적인 내용들도 다뤄보고자 합니다. 인터넷 계층 ( Internet Layer, Protocol Layer )인터넷은 기본적으로 계층 구조로 이루어진 프로토콜로 구성되어 있으며, 윗 계층이 아래 계층의 서비스를 이용한다. OSI  7 Layer ? TCP/IP 5 Layer ?학술적으로 주로 인용되는 layer는 OSI 7 Layer가 맞습니다. (네트워크 프로토콜을 이해하고 설명하는 데 유용)하지만, 실제로 네트워크 환경에 구현된 레이어는 TCP/IP 5 Layer 입니다.  제가 설명할 HTTP는 어디에 구현된 프로토콜일까요?정답은 Application Layer 입니다. (즉, 어플리케이션 레이어 프로토콜입니다.) 참고로, H..

카카오맵을 구현해보려고 하는데,  아래의 사진과 같은 에러가 뜨면서 렌더링이 되지 않았다!콘솔에 찍힌 내용들을 차근 차근 읽어보고 검색해보아도, 별다른 해결책을 찾지 못했다. 코드는 아래와 같다.import React, { useEffect, useState } from "react";const KakaoMap = () => { const { kakao } = window; const [isLoaded, setIsLoaded] = useState(false); useEffect(() => { if (!kakao.maps) { return; } // 카카오 지도 객체 생성 예제 const container = document.getElementById("map"); //..

scpt라는 축약어를 써서 theme을 분명히 올바른 방법으로 사용하려고 하는데, 아래와 같은 문제점이 발생했습니다.  theme 자체를 제대로 정의해두지 않은 것이 원인인가 싶어 파일들을 잘 살펴보았습니다.  하지만 전 theme 속성들을 잘 설정해두었고, ThemeProvider를 사용해 제대로 넘겨주기도 했습니다. 그래서 원인은 다른 곳에 있다고 판단하고, 해결 방법을 다방면으로 찾아봤습니다.  우선 늘 그렇듯이 타입스크립트를 사용 중이기 때문에, 타입스크립트와 엮인 문제인 것 같아 Emotion theme TypeScript 라는 세가지 키워드를 통해 이곳저곳 검색해봤지만, 대부분 비슷하지만 styled-components에서 적용되는 해결 방법을 소개하고 있었습니다. 그 해결방법을 정리하면 다음..