Gomja.dev.log

💻 Software Developer

@emotion + nextjs + typescript에서 Theme 타입 선언 하기

emotion.d.ts를 활용한 Theme 선언

Emotion Typescript문서를 참고하여 작성되었습니다. emotion을 활용하면서 타입스크립트를 활용하다보면 ThemeProvider를 사용하게 되는데 이 때, Theme 객체는 emotion에서 제공하는 일반 타입을 따라가게 된다. 이렇게 되면 테마에서 제공하고자 하는 요소를 타이핑할 수 없게되는데, 이를 override하기 위해...

Posted by yoogomja on May 11, 2023

nx를 활용한 nextjs MonoRepo 구성하기 [2]

nx 활용하기

nx를 활용하면서 단순히 코드를 재사용하는 뿐만 아니라, cli에서 제공하는 다양한 기능을 사용할 수 있다. 특히 cli 부분은 굉장히 유용한데, nestjs의 cli와 비슷한 느낌이었던 것 같다. NX cli generate @nwrl에서 제공하는 패키지들에서 다양한 자동화 코드를 제공하고 있다. 예시로서 @nwrl/next는 app, lib,...

Posted by yoogomja on May 10, 2023

nx를 활용한 nextjs MonoRepo 구성하기 [1]

nx로 반복되는 코드를 제거하기

최근 진행했던 프로젝트에서 비슷한 UI를 가지나, 각각 독립적으로 배포되어야 웹 사이트를 제작하게 되었다. 기획을 듣고나서 설계하는 과정에서 느낀 개발 요구사항은 다음과 같았다. 디자인 요구 사항이 반영된 UI 컴포넌트, 스타일들을 공유 해야한다. 몇 가지 비즈니스 로직들을 공유해야 한다. 타입을 공유해야한다. 위 요구 사항을 충족하...

Posted by yoogomja on May 4, 2023

yup으로 유효성 검증하기

yup으로 매번 작성하는 유효성 코드 지워버리기

클라이언트 개발에 정말 필수적인 요소가 유효성 검증이다. 매번 regex로 복잡한 유효성 코드를 짜두었지만, 결국에는 에러 분기를 나누는 과정에서 코드가 적잖이 지저분해지고는 했었다. 매번 비슷한 유효성 체크 함수를 만드는 것도 좋지 않고 말이다. 그래서 유효성 체크 라이브러리를 찾게 되었는데, 나의 요구 사항은 다음과 같았다. input 마...

Posted by yoogomja on May 3, 2023

NextJS에서 typescript와 함께 i18next으로 다국어 지원 적용하기[1]

Vercel로 배포한 NextJS 13버전과 typescript, i18next으로 다국어 지원 실패와 성공

NextJS에서 typescript와 함께 i18next으로 다국어 지원 적용하기[1] NextJS에서 typescript와 함께 i18next으로 다국어 지원 적용하기[2] NextJS 13+ 지난 해 app directory, 서버 컴포넌트 등의 기능을 포함하는 NextJS 13 버전이 배포되었다. 신규로 시작한 외주 프로젝트에서 N...

Posted by yoogomja on May 2, 2023

NextJS에서 typescript와 함께 i18next으로 다국어 지원 적용하기[2]

Vercel로 배포한 NextJS 13버전과 typescript, i18next으로 다국어 지원 실패와 성공

이 글은 next-i18next,next-i18next/examples/simple 문서를 참고하여 작성되었습니다. 기본 설정하기 1 yarn add next-i18next react-i18next i18next 설치는 Installation의 내용을 따라 위의 항목들을 모두 설치한다. 실제 언어 파일...

Posted by yoogomja on May 2, 2023

Express에서 Jimp로 이미지 리사이징과 GCP Storage에 업로드하기

GCP에 이미지를 업로드, Jimp를 이용해 리사이징도 해보자

임시로 만드는 프로젝트에서 express + typescript를 이용해 이미지 처리를 해야할 상황이 생겼다. 이는 유저 프로필 이미지를 위해서인데, 몇 가지 고려할 사항들이 있었다. api 서버와 이미지를 같은 위치에 두지 않아야 한다 이미지 업로드 시 이미지의 사이즈를 줄일 필요가 있다 원형으로 사용되므로 이미지를 크롭해야한다 1...

Posted by yoogomja on November 12, 2020

Docker 볼륨에 mongodb dump와 restore하기

Docker Volume의 mongodb를 관리해보자

1. docker 에서 dump하기 1.1. 볼륨 확인하기 docker volume ls 위 명령어로 저장된 볼륨의 목록을 확인할 수 있다. 그 후에는 해당 볼륨에 shell에 접근해야한다. 1.2. 볼륨 접근하기 docker exec -ti 볼륨_이름 sh 해당 볼륨의 shell로 접근한다. 여기서 mongo 키워드를 입력해서 mongod...

Posted by yoogomja on August 31, 2020

React에서 Highchart 사용하기

React에서 쓸 수 있는 강력한 차트 라이브러리

몇 년 전, 회사에서 화면 작업에 차트를 그려야할 일이 있어서 찾아보다가 highchart라는 라이브러리를 찾게 되었다. 굉장히 많은 종류의 차트를 만들 수 있었고, 무엇보다 구현이 굉장히 쉬운 편이었다. 옵션들도 다양하지만 문서를 참고한다면 어렵지 않게 구현할 수 있는 차트였다. 상업적인 용도로 사용한다면, 별도의 비용을 지불해야하지만 개인 사용자...

Posted by yoogomja on June 24, 2020

[정원사 프로젝트] 6. 프로젝트 마무리하기

정원사 프로젝트 회고, 프로젝트 문서화와 정리하기

프로젝트 회고 글타래 1. 토이 프로젝트 기획과 기술 정하기 2. 개발 환경 구성과 백엔드 개발하기(1) : mongoose + github API 3. 백엔드 개발하기 (2) : crawling + scheduler 4. 프론트 개발하기 5. 테스트와 리팩토링하기 6. 프로젝트 마무리하기 1. 문서화 1차 완성 직후, ...

Posted by yoogomja on June 23, 2020

FEATURED TAGS
django nodejs react project study express mongodb nextjs docker gcp deploy javascript nx typescript framework github i18n i18next monorepo redux sass tools vercel windows
ABOUT ME

빠르게 실패하고
빠르게 회복하자

FRIENDS