김승현 씨 블로그

Docker를 이용하여 어플리케이션을 배포하려고 하기 때문에 Docker 컨테이너로 구동하는 다른 서비스들과 연결하는 것이 필요합니다. 이전 글을 읽지 않고 이 글을 읽으신 분들은 여기에서 백엔드의 전체 코드를 확인하실 수 있습니다. Docker…

프로젝트를 시작할 때 평소와 같이 패키지 매니저로 npm을 선택했습니다. 그런데 pnpm이 어떨지 궁금하여 pnpm…

백엔드에서 필자가 원하는 수를 집계하는 메소드를 추가했기 때문에 이제 Nextjs 어플리케이션에 이 숫자들을 가져와서 보여줄 차례입니다. 이전 글을 읽지 않고 이 글을 읽으신 분들은 여기에서 백엔드의 전체 코드를 확인하실 수 있습니다. Toilets…

필자는 개발하고 있는 Nextjs…

가격, 주소와 리뷰를 가지고 화장실 정보를 등록했으니 이 화장실 정보를 수정할 수 있도록 기능을 추가할 필요가 있어보입니다. 특히 화장실 리뷰를 남긴 사람이 리뷰를 수정할 수 있게 만들어 주는 것입니다. 이 특정 화장실 정보가 담긴 page…

이 어플리케이션은 이제 나라, 도시 그리고 길 이름에 따라 동적으로 화장실 정보를 보여주는 페이지를 가지고 있습니다. 하지만 사용자들이 처음에 화장실 주소, 리뷰 등을 적어 화장실 정보를 등록할 수 있어야 합니다. 그래서 화장실 정보를 form…

화장실 정보를 CRUD 작업을 할 수 있는 Nestjs-graphql 백엔드 어플리케이션이 있으니 이 정보들을 다루고 보여주는 Nextjs 어플리케이션을 만들려고 합니다. Nextjs app…

어플리케이션에 예외가 일어난 경우 어떤 예외가 발생했는지 아는 것이 중요합니다. NestJS는 이 예외들을 처리해주는 예외 층(layer)이 내장되어 있습니다. Prisma를 사용하고 있기 때문에 Prisma…

필자는 현재는 어플리케이션에 캐싱을 적용할 필요가 없지만 Nestjs와 Graphql에서 캐싱을 어떻게 적용하는지에 대해 알고 싶었습니다. 그래서 이 글에서는 캐싱에 대해 알아보겠습니다. Nestjs…

nestjs-auth 브랜치에서 전체 코드를 확인하실 수 있습니다. 이전에 Guard를 메소드에 적용하였습니다. 이 기능을 메소드에도 동일하게 적용해서 인증된 사용자들이 자신들의 리뷰를 수정할 수 있게 해야 할 것입니다. 하지만 같은 Guard…

인증이 안된 사용자가 리뷰를 삭제하지 못하도록 resolver에 있는 delete 메소드에 Guard…

지난 글에서 Toilet, Address와 Review에 대해 CRUD 작업을 하는 Graphql…

graphql-prisma-postgresql 브랜치에서 전체 코드를 확인하실 수 있습니다. 지난 글에 언급된 비즈니스 로직을 개발하기 위해 데이터 모델을 정의해야 합니다. Prisma…

이전의 두 글에서 필자는 개인적인 프로젝트를 진행하고 있다고 말했습니다. 프로젝트가 구동이 될 클라우드 서비스를 먼저 알아보고 싶었기 때문에 어떤 프로젝트인지에 대한 설명이 조금 늦어졌습니다. 드디어 그 프로젝트에 대해 설명하려고 합니다! Find…

이전 글에서 개인 프로젝트에 Nestjs를 사용할 것이며 개발 초기에는 Cloud run에 배포를 하기로 결정했다고 했습니다. Cloud run에 기본 Nestjs…

개인 프로젝트를 위한 클라우드 서비스 선택시 고려사항과 이유

Session은 일정한 시간동안 저장되며 클라이언트와 서버 사이에서 소통할 때 사용된다. 오늘은 Next.js에 세션을 적용하는 법에 알아보고자 한다. 세션이 Next.js…

nvm은 Node Version Manager의 약자이다. 작업하고 있는 프로젝트에 따라 여러 Node.js 버전들 중 맞는 버전을 선택할 수 있게 해준다. 사실 nvm은 대부분 MacOS나 Linux를 지원하고 Windows…

Selenium은 브라우저 자동화를 시켜주는 오픈 소스 프로젝트다. 여기서 자동화라는 것은 우리가 브라우저로 할 수 있는 많은 것들을 의미한다. 예를 들면 클릭을 하는 것이나 원하는 요소의 값을 얻는 것 등이다. 하지만 Selenium…

React 개발을 하면서 태그를 활용하거나 라이브러리를 통해 얻은 dropdown…

click-outside 이 글을 읽고 있다면 아마도 과 메뉴 같이 - 적어도 필자의 경우는 그랬다. 과 메뉴는 React 개발에 있어서 자주 쓰이는 UI 요소이기 때문에 React…

소프트웨어 환경을 설정하고 관리하는 리눅스 사용자는 을 통해 스케줄 작업을 합니다. 반복적인 작업에 큰 도움이 됩니다. 필자가 개발하고 관리하는 어플리케이션 서버들 중 VM에 실행되고 한 포트에 2…

서비스중인 어플리케이션에 에러가 발생했을 때 개발자에게 에러를 신속하게 확인하고 알리는 것만큼 중요한 것도 없다. 이 목적으로 사용할 수 있는 많은 플랫폼들이 있는데 그 중 Google Error Reporting + Cloud Monitoring…

사전적 의미로 컴퓨터에서 의미하는 queue는 다음과 같다 a list of data items, commands, etc., stored so as to be retrievable in a definite order, usually the order…

Pandas의 공식 웹페이지 따르면 pandas is a fast, powerful, flexible and easy to use open source data analysis and manipulation tool, built on top of…

Python으로 어플리케이션을 개발할 때, 그 프로젝트의 규모가 작다면 Python 버전 혹은 패키지의 버전에 대해 크게 신경 쓸 일이 없다. 하지만 API…

Google Sheet는 브라우저에서 동작하기 때문에 어디서나 사용할 수 있고 기능이 다양해서 아주 유용한 소프트웨어 상품이다. 이 Google Sheet는 Google이 API…

클라우드 서비스는 인터넷을 통해 사용자나 회사에게 온디맨드 형식으로 제공되는 서비스다. 개발자는 흔히 API…

REST API는 마치 음식점의 메뉴와 같다. 손님이 메뉴를 보면 그 음식점이 어떤 음식들을 요리하는지 알 수 있는 것처럼 개발자가 한 소프트웨어 상품의 API 문서를 보면 무슨 기능을 제공하는지 알 수 있다. API 문서에는 흔히 요청 url…

개발자로 일을 시작한 이후 처음으로 모바일 앱을 개발했을 때, 동일 페이지 안에 Popup 창을 띄워 날짜를 선택할 수 있으며 Popup 창 외의 영역을 눌렀을 때 사라질 수 있도록 구현하고 싶었다. Popup…

React를 배우기 시작하고 실제 웹사이트를 개발할 때, 그림 및 사진을 자주 활용할 기회가 있다. 특히 여러 사진을 한 영역 내에서 보여주는 형식을 흔하게 접할 수 있는데 React Swiper…