목록개발 (301)
이번 포스팅에서는 docker를 활용하여 컨테이너를 올리고, 서버와 연동시키는 과정에 대해 다룬다. (postgres 마스코트인 코끼리가 귀여워서 언젠가 한번 써보고 싶었음) ORM은 TypeORM을 사용했으며, express 서버를 구현하였다. 먼저 간단한 MySQL과 PostgreSQL을 비교해본다. PostgreSQL MySQL 특징 기능과 표준에 중점 속도에 중점 (단순 CRUD의 경우 빠른 속도) 사용 영역 크고 복잡한 작업에 사용 일반적으로 간단한 작업에 사용 목차 typeorm과 postgres 연결 코드 작성 postgres 실행 코드 작성 docker-compose.yaml 파일 작성 postgres 초기 설정 1. typeORM과 postgres 연결 import { DataSourc..
자바스크립트 내에서 상속 패턴과 전략 패턴은 모두 객체 지향 프로그래밍(OOP)를 지원하는 패턴이다. 둘다 코드의 재사용성을 높이며, 유지보수성을 향상시킨다는 장점이 있다. 두 패턴의 차이점에 대해 간단히 얘기하면, 상속 패턴의 경우, 부모 클래스로부터 다른 클래스가 상속받아 부모 클래스의 메서드나 프로퍼티를 정적으로 재사용하는 패턴이며, 전략 패턴의 경우, 동일한 문제를 해결하기 위해 다양한 알고리즘을 가진 객체들을 정의하고 이를 동적으로 교환하여 사용하는 패턴이다. 상속 패턴 (extends) 상속 패턴의 경우, 부모 클래스(기존 클래스)를 상속해 새로운 클래스를 생성하면 상속받은 부모 클래스의 속성과 메서드를 사용할 수 있다고 위에서 언급했다. 이때, 자식 클래스에서 부모 클래스의 메소드를 재정의 ..
class class란 ES6(2015)부터 추가된 기능 중 하나로 이를 통해 객체를 생성하는 것이 가능하다. 일반적으로 class는 생성자 함수(constructor), 프로퍼티, 메소드 등으로 이루어져 있고, contructor 함수는 객체가 생성될 때 실행되며 객체의 프로퍼티를 초기화하는 역할을 하며, new 연산자를 사용하여 해당 class 객체를 생성할 수 있다. 어떤 면에서 class는 '어떤 것'을 만들기 위한 레시피와 같은데, 갑자기 이삭토스트가 먹고 싶으니 토스트를 기준으로 설명한다. class Toast { constructor(bread, egg) { // 생성자 함수 this.bread = bread // 프로퍼티 this.egg = egg // 프로퍼티 } cook() { // 메..
next.js 환경 / react 환경에서의 환경 변수를 적용하는 방식은 대동소이한데, 같은 점은 앞에 각 환경에 따라 약속된 접두사를 붙여야 한다는 점이며, 다른 점은 next.js 의 경우 NEXT_PUBLIC_ 을 접두사로, react의 경우 REACT_APP_을 접두사로 사용해야 한다는 점이다. 사용 방법 예시는 아래와 같다. // .env // next.js 환경 NEXT_PUBLIC_example=example // react 환경 REACT_APP_example=example 해당 접두사를 정상적으로 입력하지 않았을 경우, undefined로 나타나게 된다. (node.js나 nest.js의 경우에는 위와 같은 규칙이 없었어서, 처음 next.js 환경에서 환경변수를 사용할 때 적용이 되지 ..
URL : https://asst.world 3주 전부터 프론트엔드 공부를 진행했다. 이유로는 두 가지가 있는데, 첫 번째는 취업 후 프론트엔드에 대한 이해가 있다면 협업에 도움이 되지 않을까 하는 생각과, 두 번째로는 혼자 온전한 웹 페이지를 만들고 싶다는 이유 때문이었다. 1. 기획 의도 이후 인프런을 통해 프론트엔드 강의를 들으면서도, 혼자 산책하며 만들어 볼 웹 페이지에 대해 구상했다. 이윽고 결정내린 페이지 주제는, 간단한 테스트와 한국사, 문학에 대한 개인적인 관심을 융합하여 "나와 성향이 비슷한 조선시대 예술가 찾기"로 기획했다. 개인적인 의견으로 인스타그램에 종종 올라오는 "~~테스트 결과"와 같은 게시물의 등장 빈도가 잦다 보니, 이를 활용하여 웹 페이지에 광고를 달아 수익을 얻는 방법도..
이번에 혼자 프론트엔드와 백엔드를 만들어, 하나의 인스턴스로 배포하는 과정에서 사용한 Nginx. 이름부터 "엔-진" 이라, 마치 기계 엔진처럼 복잡하고 정교하게 작동할 줄 알았는데, 생각보다 심플해서 놀랐더랬다. 사실 Nginx를 사용하기 직전 여러 고초를 겪었다. 요약하자면 GCP에서 제공하는 부하분산기에서 경로를 설정하면 그 경로에 맞게 요청이 전달될 줄 알았는데 그렇지 못했다는 것. (내가 제대로 설정하지 않았을 가능성도 크다.) 이를 해결하기 위해 듣기만 했던 결국 Nginx를 사용하게 되었다. - 내가 사용한 방식 1. 먼저 default.conf 파일을 작성해야 하는데 내용은 다음과 같다. // default.conf events {} // 이벤트 규정 http { server { liste..
오버플로우란? 자바에서의 계산 결과가 최댓값을 넘거나 혹은 최솟값보다 작을 경우, 음수는 양수로, 양수는 음수로 바뀌는 문제가 발생한다. 이는 오버플로우라고 하며, 자료형의 범위를 벗어나는 연산 값이나 값 할당이 일어난 경우 야기되는 현상이라고 볼 수 있다. (마치, 500ml 용량의 컵에 1,000ml의 물을 따랐을 때, 넘쳐흐르는 것(overflow)으로 생각하면 쉽다.) 참고로 메모리가 표현할 수 있는 값보다 적은 값을 저장하는 경우는 언더플로우라고 한다. 간단한 코드로 설명하면 다음과 같다. public class NumberOverflow { public static void main(String[] args) { int maxInt = Integer.MAX_VALUE; System.out.pr..
문제는 다음과 같다. 0,1 로 이루어진 이차원 배열에서, 1로 이루어진 가장 정사각형을 만들었을 때 가장 큰 넓이를 구하는 문제다. 그리고 이 문제에 접근하기 위해 동적 계획법(Dynamic Proramming)이라는 개념에 대해 알게 되었는데, 이에 대해 먼저 나눠보기로 한다. 동적 계획법(Dynamic Proramming)이란? 입력 크기가 작은 부분 문제들을 모두 해결한 후, 그 해들을 이용하여 보다 큰 크기의 부분 문제들을 해결하여, 전체 문제를 해결하는 알고리즘 설계기법이다. 따라서 동적 계획법을 사용하기 위해선 큰 문제를 작은 문제로 나눌 수 있어야 하며 작은 문제들의 해결 방법은 모두 동일해야 하고 작은 문제들의 해결 결과는 한 번만 계산하고 저장해 놓을 수 있어야 한다. 피보나치 수열은 ..