![]()
NodeJS는 가장 널리 쓰이는 백엔드 환경이다. 그만큼 보안 이슈도 많고 보안 관련 프레임워크도 다양하다. 이 포스트에서는 NodeJS의 보안을 향상할 수 있는 기초적인 방법을 소개할 예정이다. 1. NPM audit npm 모듈의 보안 취약점을 자동으로 진단해주고 모듈을 최신 버전으로 업데이트해주는 기능이다. 프로젝트 디렉터리에서 요청하면 된다. npm audit 2. ngnix 사용 nodejs를 80, 443포트로 바로 노출시키면 여러 보안 이슈에 직면할 수 있다. 포트는 3000으로 해놓고 ngnix proxy 기능을 사용해서 뒤에 숨겨주자. 또한 letsencrypt를 사용해서 인증서를 발급받기에도 수월해진다. 3. Helmet 보안 모듈 적용 express 프레임워크 사용시 헤더 설정으로 알..
![]()
클린 아키텍처 클린 아키텍처는 프로젝트가 확장될 때 그 위력을 발휘한다. 프로젝트가 확장됨에 따라 로직이 여러 차례 바뀌게 되고 데이터 의존성은 뒤죽박죽 되기 십상이다. 이를 사전에 방지하기 위해서는 처음부터 견고하게 프로젝트 구조를 잡아야 한다. 클린 아키텍처는 객체 지향 설계를 원칙으로 한다. 이 원칙은 SOLID 원칙이라고도 불리는데 의존성 분리가 핵심이다. 예를 들어 로그인을 위해 아이디와 패스워드를 입력하는 유저가 있다고 해보자. 로그인 시 해당 정보는 사전에 정의된 api경로로 요청을 보낸다. 이후 API 서버에서는 해당 경로의 컨트롤러로 정보를 보내주고 컨트롤러는 해당하는 정보가 있는지 모델에서 알맞은 정보를 가져온다. 알맞은 정보가 있다면 로그인 성공이라는 메시지를 사용자에게 반환해준다. ..
![]()
간혹가다 별도의 익스텐션을 설치하다 보면 이미 CSS 자동완성이 적용되어 있음에도 CSS 파일에 자동완성이 뜨지 않을 때가 있다. 이를 해결하기 위해서는 오른쪽 하단에 있는 언어 모드를 CSS로 변경해주면 된다. 아래 화면처럼 정상적으로 자동완성이 뜨게 된다.
![]()
* 짧은 글 시리즈 6 나는 삽질을 좋아한다. (땅 파는 삽질 말고) 먼저 삽질이라는 단어를 이해하기 위해서는 노가다와의 차이를 알아야 한다. 흔히 노가다는 반복된 노동을 의미하고 삽질은 쓸모없는 일이란 뜻의 관용어로써 사용된다. 쉽게 설명하자면, 쉬운 문제를 많이 푸는 건 노가다에 해당하고 어려운 문제를 10시간 넘게 풀고 있는 건 삽질에 해당한다. 분명 좋은 해결방법이 있는데 굳이 어려운 방법으로 해결하는 사람들을 보고 '삽질하네' 라는 표현을 쓴다. 그런데도 내가 삽질하는 이유는 무엇일까 반문할 수 있다. 삽질을 좋아하는 행위를 풀어쓰면 어려운 문제를 해결하는데서 오는 희열 정도로 축약 가능하다. 문제를 푸는 게 목적이 아닌, 문제를 어렵게 해결하는 과정에서 오는 즐거움이란 말이다.
![]()
이전 글 1편은 맥미니를 사게 된 결정적인 이유와, 홈서버의 목적이 기록된 글이다. 이 포스트는 지금까지 어떤 조건에서 홈서버를 운영해왔고, 대략 4년간 홈서버 3대를 돌려본 사람으로서 홈서버의 선정기준을 공유하려고 한다. https://devent.tistory.com/174 Mac mini로 홈서버를 구축해보며 #1 사건의 발단 지난 3년간 LG 14인치 그램과 HP 노트북 2대로 홈서버를 구성했었다. 그러던 중 오랜 기간 플러그가 꽂힌 채로 배터리 과열이 생기게 되었고 결국 배터리가 부풀어 오르는 현상이 발 devent.tistory.com 맥 미니 서버를 구축하기 까지 LG 그램 14인치로는 간단한 웹서버를 구축하는데 문제가 없었다. 그러나 동시접속자가 늘고 사이트의 트래픽이 무거워지면서 점차 부..
![]()
SASS 기존 웹페이지에 스타일을 적용하기 위해서는 CSS로 하나하나 변경해주어야 하는 번거로움이 있다. 이 같은 CSS의 개발 편의성을 높이기 위해 등장한 SASS, 프리프로세서 스크립트 언어이다. CSS의 경우 HTML환경에 style 태그만 지정해주면 바로 로드가 되는데 이 SASS란 녀석은 그렇지가 않다. 사용하기 전에 CSS로 컴파일하는 과정이 필수다. 그래서 보통 웹팩과 함께 사용된다. 1. 필요 라이브러리 설치 npm i webpack webpack-cli sass sass-loader style-loader mini-css-extract-plugin css-loader 설치를 완료해주면 웹팩 설정파일을 만들어준다. 2. webpack.config.js import MiniCssExtract..
![]()
사건의 발단 지난 3년간 LG 14인치 그램과 HP 노트북 2대로 홈서버를 구성했었다. 그러던 중 오랜 기간 플러그가 꽂힌 채로 배터리 과열이 생기게 되었고 결국 배터리가 부풀어 오르는 현상이 발생하게 된다. 사실 조만간 노트북 서버에서 미니 PC 서버로 갈아탈 예정이었기 때문에 곧바로 폐기 처분했다. 이후 고대하던 맥미니를 영접하며 별다른 고민 없이 24시간 상시 고문실(?)로 들어가게 되었다. (사..사알... 살려줘ㅓㅓ...) 참고로 24시간 켜져있는 서버용이라 초기에 세팅할 때 제외하고는 모니터 연결도 제외해놓았다. 그러면 서버 관리가 힘들어지기에 VNC 기능을 사용해서 원격 접속으로 관리한다. 기존에 맥북이 있었기 때문에 크롬으로 vnc:// 주소를 입력하기만 하면 된다. 노트북 서버 vs 맥미..
![]()
😎 디자인 시스템을 구상하기로 마음먹었다 그동안 개발했던 서비스마다 디자인이 재각각이었다. 버튼 색은 모두 달랐고 내비게이션 바 디자인은 페이지마다 달랐다. 새로운 서비스를 만들거나 개선할 때마다 이전 디자인을 참고해서 새로 만들어야 했고 표준 없이 만들다 보니 걸리는 시간은 배로 늘어났다. 이토록 통일되지 않는 디자인 요소들을 개발 효율을 위해 디자인 시스템으로 묶을 필요가 생겼다. 디자인 시스템이란 디자인 원칙, 컴포넌트, UI 패턴 등을 포함한 디자인 세트라고 보면 된다. 디자인 시스템의 장점으로는 각각의 서비스마다 디자인을 통일시켜주며 서비스의 정체성을 확고하게 할 수 있다. 동시에 디자인 코드의 반복을 줄여주고 빠른 프론트엔드 개발이 가능하게끔 한다. 즉, 디자인 시스템을 적용한다면 빠르고, 확..
