전체 글

BFF Pattern이란?

MSA 환경에서는 아래와 같은 일들이 비일비재하다.여러 플랫폼(Web, Android, iOS, Desktop... )을 지원하게 되고, 각각이 필요로 하는 데이터가 다름원하는 데이터를 얻기 위해 여러 API의 응답을 받아와서 가공함이런 상황들이 겹쳐 프론트엔드에서 복잡한 계산이나 비즈니스 로직을 작성하게 됨시스템에 따라 다르긴 하겠지만, 이론적으로만 바라본다면 이상적인 형태는 아닐 것이다.모바일에서는 PC 환경에 비해 네트워크 속도가 느리고 메모리와 같은 하드웨어 이슈로 동일한 화면을 구성하더라도 늦게 렌더링될 수 있다.한 번의 API 호출만으로 화면에 필요한 모든 데이터를 다 받아올 수 있다면 그만큼 렌더링이 빨라지지 않을까?BFF는 그러한 요구를 만족하기 위해 각 플랫폼에 맞게 백엔드 서버를 구성하..

GraphQL이란?

클라이언트(Web, App 등)에서 화면을 그리기 위해서는 서버가 만들어놓은 API를 호출해서 데이터를 가져와야 한다.하나의 화면을 그리기 위해서 여러 API를 호출해 데이터를 조합하여 사용하는 경우가 많은데, 페이지가 복잡해 질수록 데이터 조합도 복잡해질 것이다.GraphQL에서 해결하고자 하는 문제는 크게 두 개로 볼 수 있다.Over-Fetchingover fetching은 필요하지 않은 데이터까지 받아오는 것을 의미한다.유저의 닉네임만을 가져와야 할 때, API에서는 닉네임 뿐만 아니라 다른 정보까지도 주는 경우가 많을 것이다.{ user : { id : 1, nickname : "daengdaeng", name : "cream", age :..

Node.js(express) koyeb에 배포하기

토이 프로젝트로 진행하던 Subway Tour가 이런저런 일들로 개발이 딜레이 되고 있었다. [React] SubwayTour - 1. Firebase 연동 여자친구와 데이트를 하던 중, 서울의 지하철 역을 모두 한번씩 놀러가자는 얘기가 나왔다. 가봤던 역들을 일일히 설정하기도 어렵고, 새로운 역을 정하는 것도 어렵다고 생각해 개발자의 장점 velog.io 원래 년초에 완성해서 배포까지 마무리하려고 했지만 4월이 1/3이나 지나간 지금도 구현해야 할 것들이 산더미이다. 일단은 MVP(Minimum Viable Product)라고 부를 정도는 구현이 완료되었기에 일단은 배포를 해보고자 한다. 위의 블로그 글에서는 React와 Firebase만 사용해서 서버리스한 어플리케이션을 만들었지만, 회사에서 Node..

개발자의 글쓰기

학교 전공 수업 중에 "과학과 기술 글쓰기"라는 글쓰기 수업이 있었다. 글쓰기를 좋아하지 않아 이과를 선택했던 나에게 또다시 글쓰기를 해야 한다는 사실은 달갑지 않은 소식이었다. 수업을 나름 열심히 들었지만 성적이 좋지 않았고, 결국 재이수를 하게 되었다. 그 후로 글쓰기는 앞으로 인생에 없을거라 생각했는데, 남들 다 하는 기술 블로그를 하게 되면서 글쓰기 능력을 기를 필요가 있었다. 회사에 출근한 어느 날, 동기가 개발자의 글쓰기라는 책을 가지고 있길래 이걸 보고 기술 블로그를 좀 더 체계적으로 써보자! 하는 마음으로 훔쳐가듯 빌려왔다. 책을 읽고 나서 가장 충격받았던 사실은 개발자에게 글쓰기는 숨 쉬는 것과 같다는 것이었다. 코드를 작성하는 것도 글쓰기, 코드 리뷰도 글쓰기, 주석, 제안서, 릴리즈 ..

JavaScript Immutability

다른 언어와 마찬가지로, 자바스크립트에도 불변성(Immutability)라는 것이 존재한다. 불변성은 함수형 프로그래밍을 만드는 기초적이면서도 핵심적인 원리이며, 불변성을 통해 의도하지 않았던 side effect를 줄일 수 있다. 이름에 대한 불변함 // 기존 코드 var a = 1; console.log(a); // 1 위와 같은 코드가 있다고 가정해보자. 실제로 일을 할 때는 여러 사람이 하나의 파일에서 작업을 할 가능성이 굉장히 많다. // 누군가의 손을 거친 코드 var a = 1; ... // 무수히 많은 코드 a = 2; console.log(a); // 2 중간에 누군가 a에 2를 할당함으로써 원래 a라는 변수를 선언한 사람의 의도와는 다른 값이 출력되고 있다. 이를 방지하기 위해 JS에서..

Next.js에서 dotenv 사용하기

서버 주소, API key 등과 같은 중요한 정보는 드러내지 않는 것이 가장 중요하다. 그럴 때 사용하는 것이 환경변수 파일(dotenv, .env)이다. Next.js에서 dotenv를 사용하기 위해서는 dotenv-webpack 라이브러리를 설치하면 된다. $ npm i dotenv-webpack 이후 next.config.js 파일에서 dotenv를 webpack에 연결해주면 된다. // next.config.js const Dotenv = require("dotenv-webpack"); const nextConfig = { ..., webpack: (config) => { config.plugins.push(new Dotenv({ silent: true })); return config; }, }..

백준 2589번 보물섬 // Java

문제 보물섬 보물섬 지도를 발견한 후크 선장은 보물을 찾아나섰다. 보물섬 지도는 아래 그림과 같이 직사각형 모양이며 여러 칸으로 나뉘어져 있다. 각 칸은 육지(L)나 바다(W)로 표시되어 있다. 이 지도에서 이동은 상하좌우로 이웃한 육지로만 가능하며, 한 칸 이동하는데 한 시간이 걸린다. 보물은 서로 간에 최단 거리로 이동하는데 있어 가장 긴 시간이 걸리는 육지 두 곳에 나뉘어 묻혀있다. 육지를 나타내는 두 곳 사이를 최단 거리로 이동하려면 같은 곳을 두 번 이상 지나가거나, 멀리 돌아가서는 안 된다. 예를 들어 위와 같이 지도가 주어졌다면 보물은 아래 표시된 두 곳에 묻혀 있게 되고, 이 둘 사이의 최단 거리로 이동하는 시간은 8시간이 된다. 보물 지도가 주어질 때, 보물이 묻혀 있는 두 곳 간의 최단..

백준 3649번 로봇 프로젝트 // JAVA

문제 로봇 프로젝트 상근이와 선영이는 학교 숙제로 로봇을 만들고 있다. 로봇을 만들던 중에 구멍을 막을 두 레고 조각이 필요하다는 것을 깨달았다. 구멍의 너비는 x 센티미터이고, 구멍에 넣을 두 조각의 길이의 합은 구멍의 너비와 정확하게 일치해야 한다. 정확하게 일치하지 않으면, 프로젝트 시연을 할 때 로봇은 부수어질 것이고 상근이와 선영이는 F를 받게 된다. 구멍은 항상 두 조각으로 막아야 한다. 지난밤, 상근이와 선영이는 물리 실험실에 들어가서 레고 조각의 크기를 모두 정확하게 재고 돌아왔다. 구멍을 완벽하게 막을 수 있는 두 조각을 구하는 프로그램을 작성하시오. 입력 입력은 여러 개의 테스트 케이스로 이루어져 있다. 각 테스트 케이스의 첫째 줄에는 구멍의 너비 x (1 ≤ x ≤ 20, x는 정수)..