전체 글

클라우드 타입의 Hobby 요금제클라우드 타입의 Hobby 요금제는 프리티어 1GB 메모리를 제공하고, 누구나 부담없이 서비스를 배포할 수 있게 해줍니다.저 또한 이러한 장점을 얻기 위해서 Hobby 요금제를 사용하고 있는데요. 그러나 Hobby 요금제의 프리티어 메모리를 이용하면 임시 리소스를 사용할 수 있지만,무료 요금제의 특성상 매일 새벽 한 번씩 임시 리소스로 배포된 서비스가 일시적으로 중지됩니다.중지 상태가 되면 다시 수동으로 재배포 하기 전까지 서비스 이용이 불가능해지며,상황에 따라 심각한 문제를 야기할 수 있습니다. 물론 이러한 문제점도 해결 방법이 있습니다. 바로 매일 아침 일찍 일어나 수동으로 중지된 서비스를 재배포 하는 것인데요. 하지만 이러한 해결 방법은 굉장히 비효율적이며, 한 번이..

개발을 하다보면 개체의 식별을 위해 각 개체에 중복되지 않는 고유적인 id를 부여 해줘야 할 상황이 있습니다. 오늘은 uuid를 라이브러리 없이 효율적으로 생성하는 법을 알아보겠습니다.기존의 방식 - uuid원래 uuid를 생성할때는 'uuid'라는 javascript 라이브러리를 사용하여 생성합니다. 이렇게 아주 간단하게 패키지를 다운로드 받아 사용 가능합니다.새로운 방식 - cryptocrypto는 기본적으로 암호화 기법을 제공하는 강력한 난수 생성기입니다.let example = crypto.randomUUID();console.log(example); // "36b8f84d-df4e-4d49-b662-bcde71a8764f"  사용할 때도 위와 같이 매우 간단히 사용할 수 있습니다. 이렇게 cry..

function DummyFunc({isA}) { if (!isA) { return ; // or null } return Hi I am A;} React에서는 아무 것도 렌더링하지 않으려 할 때 이렇게 fragment()나 null을 반환합니다.이번 글에서는 이런 상황에서의 fragment와 null에 차이를 알아보겠습니다.Fragment fragment는 DOM 구조에 어떠한 영향도 주지 않는 DOM 요소를 생성하지 않는 컴포넌트입니다.이런 fragment는 태그는 최상위 태그로 감싸줘야 하는 React에서 요소들을 그룹화 할 때 사용합니다.function DummyFunc() { return ( Hello ? );}Nullnull을 반환하게 되면 아무것..

Github를 통해 개발을 하다보면 종종 100MB를 초과하는 용량의 파일을 Github에 업로드 해야할 때가 있습니다.GitHub에서는 파일 1개 당 용량이 50MB을 넘으면 warning, 100MB를 넘으면 error로 판단하기 때문에,용량이 100MB를 초과하는 파일을 그냥 commit 후 push하게 되면 다음과 같은 error가 발생합니다.this exceeds Github's file size limit of 100.00MBGH001: Large files detected. You may want to try Git Large File Storage - https://git-lfs.github.com. 이런 상황에서는 Git LFS를 사용해야합니다.여기서 LFS는 Git Large File ..

Typescript의 연산자typescript에서 연산자를 이용한 타입 정의는 크게 union type과 intersection type으로 나눌 수 있습니다.오늘은 union type과 intersection type을 사용했을 때 각각 어떻게 type이 정의 되는지 알아보도록 하겠습니다. Union Type이란?union type은 | 를 사용하며 type이 A이거나 B라는 의미를 가집니다.function execute(text: string): void { console.log(text);}function execute(text: number): void { console.log(text);}union type을 사용하면 함수들을 합쳐 여러 개의 타입을 연결 할 수 있습니다.functio..

React-hook-form을 통한 예외처리여러 개의 input tag를 사용하여 컴포넌트를 만들 때에는 보통 react-hook-form을 통해 예외처리를 합니다.import { useForm } from 'react-hook-form';const { register, handleSubmit } = useForm();return ( );위의 코드에서 만약 사용자가 이름을 12자 이상 작성했다면const onValid = (data) => { //do something};const inValid = (e) => { const name = e.name; if (name.type === 'maxLength') { console.log(..

더 나은 폴더 구조 만들기개발을 하다 보면 누구나 한 번쯤은 더 단정된 폴더 구조를 만들기 위해 고민 해보곤 합니다.폴더 구조는 정해진 명확한 개념이 없고 주관적 기준이 많이 반영 되기 때문에 모두의 기준을 충족 시키는 것은 굉장히 어려운 일입니다.때문에 아직도 폴더 구조에는 어떠한 답이랄 것이 없는데요, 오늘은 이렇게 폴더 구조 설계를 고안하는 과정에서 조금이나마 도움을 주고자Atomic Design Pattern이라는 하나의 디자인 패턴을 소개해보려 합니다.Atomic Design Pattern 이란?그렇다면 Atomic Design Pattern은 정확히 어떤 것일까요? 위의 사진은 Atomic Design Pattern을 설명할 때 가장 널리 쓰이는 사진입니다.Atomic Design Patter..

들어가며동작 원리를 파악하기에 앞서 짚고 넘어가야 할 Javascript의 특징을 먼저 알아보려 합니다.바로 Javascript가 싱글쓰레드 언어라는 것 입니다. 이는 Javascript의 메인쓰레드를 담당하는 이벤트루프가 싱글쓰레드이기 때문이고,이에따라 Javascript는 한 번에 한 가지 일만 처리가 가능하다는 사실을 알 수 있습니다.그렇다면 정말 시간을 오래 소요해야 하는 하나의 작업이 있을 때, 이 하나의 작업이 다 끝나기 전까지 브라우저는 아무것도 할 수 없게 될까요?그렇진 않습니다. Javascript는 이러한 문제 상황을 대비해 비동기 콜백을 사용합니다.이번 글에서는 이런 Javascript의 비동기 콜백을 포함한 기본 동작 원리를 아주 간단하게 알아보겠습니다.동작 FlowJavascrip..

Nextjs에서 localStorage를 사용하다 보면 종종 아래와 같은 에러가 발생하곤 합니다.ReferenceError: localStorage is not defined저도 이러한 에러를 마주한 적이 있었는데요.이러한 에러가 야기되는 이유는 Nextjs의 렌더링 순서에서 알아볼 수 있습니다.Nextjs에서는 client-side 렌더를 수행하기 전에 server-side 렌더를 수행합니다.그렇게 server-side에서는 전역 객체(window, document)를 사용할 수 없게 되고이 때문에 server-side에서는 window 객체를 찾지 못하고 위와 같은 에러를 발생 시킵니다.해결하기보통 해결을 할 때에는 대표적으로 두가지 방법이 제시됩니다.1. window 객체의 존재 유무 살피기if (..

Optimistic UI란우선 시작하기에 앞서 Optimistic UI의 개념에 대해 짚고 넘어가겠습니다 Optimistic UI는 서버의 응답을 기다리지 않고 즉시 UI적인 반응을 보이는 것입니다. 쉽게 말해서 서버에 응답이 이미 성공했을 것이라고 가정하고 UI를 그리는 방식을 일컫는 말이라는 것입니다. 어떤 요청이 높은 확률로 성공한다는 보장이 있을 때, 그 요청이 늦지 않은 시간 안에 응답이 온다는 보장이 있을 때 사용할 수 있는 UI라고 생각하시면 됩니다. 이러한 Optimistic UI를 이용하여 댓글 기능을 구현해 보겠습니다. 구현데이터 가져오기댓글 기능을 구현하기 위해선 우선 현재 댓글의 리스트를 조회해야 합니다. 이러한 상황에서는 주로 useQuery를 사용해 data를 fetching 할..