분류 전체보기 235

[디자인 패턴] MVC, MVP, MVVM이란?

1. 개요 디자인 패턴은 설계자로 하여금 재사용이 가능한 설계는 선택하고, 재사용을 방해하는 설계는 배제하도록 도와준다. 또한 패턴을 쓰면 이미 만든 시스템의 유지보수나 문서화도 개선할 수 있고, 클래스의 명세도 정확하게 할 수 있으며, 객체 간의 상호작용 또는 설계 의도까지 명확하게 정의할 수 있다. 간단히 말해, 디자인 패턴은 설계자들이 올바른 설계를 빨리 만들 수 있도록 도와준다. 2. MVC MVC패턴은 Model + View + Controller를 합친 용어이다. Model과 View는 MVC패턴과 동일하고, Controller 대신 Presenter가 존재한다. MVP 패턴의 구조, 동작, 특징, 장점, 단점을 살펴보자. 2.1 구조 Model: 어플리케이션에서 사용되는 데이터와 그 데이터를..

[Node.js] socket.io를 이용한 실시간 채팅방 기능 구현하기

1. 개요 본 포스팅을 읽기 위한 기본 전제 사항은 다음과 같다. socket.io 라이브러리에 대한 기초 지식이 있다.(socket.io 기본 사용법은 이 포스팅 참고 ) 클라이언트 측 채팅방 UI구현은 NodeJS + React로 구현하였다. 본 포스팅은 socket.io 라이브러리를 중점적으로 살피기 위한 포스팅이므로, UI 구현 코드는 다루지 않는다. 채팅방 기능 구현에 정답은 없지만, 기능 구현을 위해 내가 사용했던 방법을 공유하고자 한다. 2. 서버 설정 2.1 socket key 상수 선언 const SOCKET_KEY_CHAT_FROM_CLIENT = "SOCKET_KEY_CHAT_FROM_CLIENT"; const SOCKET_KEY_CHAT_FROM_SERVER = "SOCKET_KEY..

Network/WebSocket 2022.06.21

직렬화(Serialization)에 대해

1. 직렬화(Serialization)란 무엇인가? 객체의 직렬화(Serialization)는 객체의 내용을 Byte 단위로 변환하여 파일 또는 네크워크를 통해서 스트림(송수신)이 가능하도록 하는 것을 의미한다. 반대로 Byte로 변환된 데이터를 다시 객체가 저장되었던 상태로 재 변환하는 기술을 역직렬화(Deserialization)라고 한다. [객체 전송의 단계] 직렬화된 객체를 바이트 단위로 분해한다. (이를 Marshalling이라고도 한다.) 직렬화 되어 분해된 데이터를 순서에 따라 전송한다. 전송 받은 데이터를 원래대로 복구한다. (이를 Unmarshalling이라고도 한다.) 2. 직렬화 & 역직렬화를 하는 이유? 자바의 I/O 처리는 정수, 문자열 바이트 단위의 처리만 지원했었다. 따라서 복..

HackerRank 문제풀이 - 3 (Repeated String)

1. 문제 하나의 문자열(s)이 주어지고, 길이(n)가 주어질 때, 해당 문자열을 해당 길이까지 동안 반복하였을때, "a" 개수를 찾는 문제이다. 최대 길이는 1부터 10^12까지 주어질 수 있어, 계산 성능의 최적화가 필요하다. 2. 1차 풀이 2.1 풀이 과정 'use strict'; import { WriteStream, createWriteStream } from "fs"; process.stdin.resume(); process.stdin.setEncoding('utf-8'); let inputString: string = ''; let inputLines: string[] = []; let currentLine: number = 0; process.stdin.on('data', function..

[PostgreSQL] Port 변경 방법

1. 개요 지난번 사건 그 이후, 아직도 DB에 침입을 시도하는 로그들이 보였다. 그래서 Postgresql의 기본 포트(5432)를 사용하고있는 것이 공격의 대상이 된다고 판단하여, 바꿔주기로 했다. 2. Port 변경 방법 2.1 Postgresql 설정파일 열기(시스템 마다 다를수 있음) $sudo vi /etc/postgresql/14/main/postgresql.conf 해당 파일을 열어 port 설정 부분을 보면 되고, 주석 처리 되어 있는 경우에는 주석을 풀고, 원하는 Port 번호로 수정해주면 된다. [설정 완료 후 Postgresql 재시작] $systemctl restart postgresql [혹은 재기동 없이 Config Reload] $su - postgres $psql postg..

DataBase/PostgreSQL 2022.06.04

[PostgreSQL] pg_hba.conf / DB의 보안설정의 필요성

1. 개요 익명의 호스트가 내 PostgreSQL DB에 인증을 시도하기 시작했다. 그것도 1초 주기로.. 로그를 보아하니 postgres라는 Database에 postgres라는 User로 접근을 하려고 하는데, password인증에 실패하고 있다. 기존에는 모든 타입에 모든 Database, 모든 Host의 연결을 md5방식으로 접근을 하도록 설정해두었는데, 오늘은 이 보안 취약점을 보완하고자 PostgreSQL 의 보안 설정 파일인 pg_hba.conf 파일에 대해 알아보자. (해당 포스팅은 postgresql 공식 가이드를 따라 번역 및 작성하였습니다. 자세한 내용은 해당사이트를 참고해 주세요.) 2. pg_hba.conf 파일이란? PostgreSQL에서 클아이언트 인증은 일반적으로 pg_hba..

DataBase/PostgreSQL 2022.05.31

[Javascript] Optional chaning (?.)

1. Optional chaning이란? Optional chaning연산자(?.)는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고, 연결된 객체 체인 내에 깊숙히 위치한 속성 값을 읽을 수 있게 해준다. ?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만, 만약 참조가 nullish(null 또는 undefined)이라면, 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다. 함수 호출에서 사용될 때, 만약 주어진 함수가 존재하지 않는다면, undefined를 리턴한다. 따라서 참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다. 어떤 속성이 필요한 지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 ..

[Bash] 실행중인 서비스 죽이기 & 해당 스크립트 만들기

1. 실행중인 서비스를 죽이기 1.1 서비스 kill 일반적으로 실행중인 서비스를 죽이기 위해서는 다음 명령어를 사용한다. $kill -9 [PID] [사용법] PID는 process의 id를 뜻하며, -9 옵션은 프로세스를 강제 종료한다는 의미이다. (default는 -15이며, 정상종료를 뜻함) 실행중인 서비스를 죽이기 위해서는, 서비스의 PID를 알아야 하는데, 이를 위해선 다음 명령어를 사용한다. 1.2 서비스 PID 검색 $ps -ef | grep [regex] [사용법] 실행 중인 모든 프로세스 중 regex가 포함된 프로세스를 찾아서 목록으로 출력한다. 2. 실행중인 서비스를 죽이는 스크립트 생성 해당 스크립트를 작성하기 위해서는 다음과 같은 명령어를 .sh파일에 작성한다. $ps -ef |..

Server/Linux 2022.05.16

CORS에러를 서버 우회 방법을 통해 해결

1. 개요 때는 웹사이트를 개발할 때의 일이였다. Tistory 블로그에 작성한 글을 크롤링하여서 웹사이트에 뿌려주고 싶은데, CORS에러가 발생하게 되었다. (CORS에 대해 알고자 한다면, 지난포스팅 참조) 웹사이트 상에서 직접적으로 axios 라이브러리를 통해 Tistory 게시글을 fetch하려고 하니, 당연하게도 origin이 달라서 브라우저에서 막는 것이었다. 그래서 해결하기 위한 방법 중 일종의 우회 서버를 두는 방식으로 해결을 하고자 하였고, 이에대해 오늘 포스팅 할 예정이다. 2. 서버 우회 환경 구축 아래 그림 중 서버 우회 환경을 구축하기 전의 흐름도는 아래의 좌측과 같고, 우회 서버를 거치는 방식은 우측과 같다. 좌측 방식은 Tistory글을 직접적으로 가져오려고 했지만, 우측 방식..

Network 2022.05.16

[React] App 기본 실행 포트 설정하기

1. 개요 create-react-app을 통해 만든 React App의 경우 기본으로 3000번 포트를 사용해서 구동된다. 그러나 해당 3000번 포트가 겹치는 등의 사유로 따로 포트를 지정해줘야 할 상황이 생길 수 있다. 이와 같은 경우 포트를 변경해서 사용하는 대표적인 방법 세 가지를 정리해보고자 한다. (아래 내용들은 3001 포트로 변경한다고 가정한다.) 2. 포트 변경 방법 2.1 명령어로 포트 설정하기 - React 프로젝트 폴더에서 아래와 같은 명령어를 사용해 React 앱을 실행시킨다. (명령어를 통해 구동 시 한 번만 적용된다.) PORT=3001 npm start 2.2 package.json파일 설정 수정하기 - React 프로젝트 폴더에 ".package.json" 파일을 찾아 아..

SPA Framework/React 2022.05.16
반응형