You Can Become A
늦게 시작해도 누구든지 노력하면 개발자가 될수 있어요 !
![[NODE] 📚 cross-env 모듈 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FeCDDKy%2FbtrDTjgNZZA%2FfuA3H1LBxP6nSGO7QHOQZ0%2Fimg.png)
[NODE] 📚 cross-env 모듈 사용법
노드 env 환경변수 설정 보통 노드 서비스를 개발(development)하고 배포(production)할 때 env 값을 이용해서 구성한다. 예를들어 배포 모드 일 때에는 파일 캐싱, 에러 메세지 감추기 등 배포에 적합한 환경 설정을 하고, 개발 모드 일 때에는 파일 캐싱 방지, 디버그를 위한 상세한 에러 메세지 보이기 등 개발에 필요한 환경 설정을 한다. 실무 코드를 들자면 대표적으로 노드 서버의 로그를 찍어주는 morgan 미들웨어일 경우 다음과 같이 로그 레벨을 개발일떄는 'dev', 배포일떄는 'combined' 로 설정하여 적용시킨다. // 노드 환경 변수 설정에 따라 morgan 설정을 달리함 if (process.env.NODE_ENV === 'production') { app.use(mo..
![[NODE / 보안] 📚 csurf 모듈 사용법 - CSRF 공격 방지](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FyQacI%2FbtrC9LR621i%2FpCwGl3mbnC4OSEgd26eJnK%2Fimg.webp)
[NODE / 보안] 📚 csurf 모듈 사용법 - CSRF 공격 방지
csurf 모듈 csurf 모듈은 CSRF 공격을 방지하는 보안 모듈이다. csurf 모듈은 CSRF Secret와 CSRF Token을 만들어서 서로 매칭이 되는지 확인하는 기능을 손쉽게 제공하는 식으로, 보통 CSRF Secret는 session/cookie에 저장하고 CSRF Token은 POST body에 저장한다. 따라서 폼 제출을 하면, csurf 모듈은 사용자의 CSRF Secret와 CSRF Token이 일치하는지 검증하여 사용자가 맞는지 확인 하게 된다. (뒤에 코드에서 자세히 설명) CSRF 란? CSRF는 사용자가 의도치 않게 공격자가 의도한 행동을 하게 만드는, 쿠키를 통한 인증방식에서 사용되는 공격기법이다. 예를 들어 특정 페이지에 방문할 때 저절로 로그아웃되거나, 게시글이 써지는..
![[ORM] 📚 시퀄라이즈 - 다중 조인 방법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FDRUVD%2FbtrC2wtCs1v%2Fjl2XX90JEdzGYmKxdWKK30%2Fimg.png)
[ORM] 📚 시퀄라이즈 - 다중 조인 방법
Sequelize 여러 JOIN 시퀄라이즈 ORM의 조인 방법을 정리해본다. 왠만하면 성능을 위해서 하나이상 조인을 하는 것은 피해야 되는 것이 맞지만, 연관된 데이터가 여럿 필요한 경우 어쩔수 없이 다중 조인을 할 필요성이 생긴다. (이를 방지 하기 위해 역정규화를 잘해야 되지만..) 다음 사진은 예제 코드에 쓰인 erd 이다. 관계를 잘보고 조인 예제를 살펴보자. 시퀄라이즈 JOIN join 2 tables const user = await User.findOne({ include: [{ // 시퀄라이즈 조인은 기본 inner join model: Comment, // join할 모델 attributes: ['id'], // select해서 표시할 필드 지정 where: { id: 1, // on C..
![[NODE / 보안] 📚 hpp 모듈 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FGfFRy%2FbtrC7KfQsUI%2F9ZB9YkTQa7431VfaCUcKfK%2Fimg.webp)
[NODE / 보안] 📚 hpp 모듈 사용법
hpp (HTTP Parameter Pollution) 모듈 hpp (HTTP Parameter Pollution) 는 Express의 중복 이름 파라메터 공격을 방어해주는 모듈이다. Express가 동일한 이름을 가진 파라메터들이 있을 경우 Array로 만들어주는데, 이때 의도치 않은 동작을 하도록 외부에서 공격할 수 있는 보안 문제가 될 수 있기 때문이다. (입력 데이터 검증을 회피하거나 앱 크래시를 유발) 만일 다음과 같은 url을 요청한다고 해보자. https://localhost:9876/api/api1?keyName=data1&keyName=data2 url 쿼리스트링에 같은 keyName 키가 두개를 썼다. 이렇게 중복한 키가 있을경우, 위에서 언급했듯이 익스프레스는 배열로 만들어버린다. /..
![[NODE / 보안] 📚 sanitize-html 모듈 사용법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FWY93o%2FbtrC9M4zBFc%2FGMnYSXv9IEQp3GRBDa1BR0%2Fimg.webp)
[NODE / 보안] 📚 sanitize-html 모듈 사용법
sanitize-html 모듈 sanitize(소독) 은 html의 input 또는 textarea 또는 기타등등의 사용자 입력정보에 이란 문자열을 적을시, 웹브라우저에서 문자열이 txt가 아닌 script 기술로 받아들여서 생기는 문제를 방지하는 모듈이다. 사용자가 이를 악용하여 무시될까? h1태그는 링크 무시가 될까?`; const clean = sanitizeHtml(dirty); console.log(clean); 위 처럼 sanitize 를 사용하면 같은 태그는 출력이 안되게하고, 태그같은경우도 태그는 없애 버리게 도니다. (단, 웹에서 실행해보면 글씨포인트는 커진상태로 태그만 사라진다) 이처럼 악성스크립트를 사전에 차단시킬수 있게 되는 원리이다. 태그 허용하기 sanitize-html은 기본적..
![[NODE / 보안] 📚 helmet 모듈 사용법 - 웹 보안은 내가 👮](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2F0Isjg%2FbtrC7IWDNAu%2F0fw6KykXnJ8yiLqVFcaChk%2Fimg.webp)
[NODE / 보안] 📚 helmet 모듈 사용법 - 웹 보안은 내가 👮
helmet 모듈 helmet 모듈은 서버에서 다양한 HTTP 헤더를 자동 설정을 통해 서버 어플리케이션의 보안을 강화해주는 대표적인 노드 보안 모듈이다. 헬멧을 써서 내 머리를 보호하듯이, 내 웹서버를 외부의 공격으로부터 보호해준다. helmet 사용법 사용하는 에디터의 터미널에서 아래와 같이 helmet 모듈을 설치해주고 간단하게 선언만 해주면 된다. (배포용 모듈) helmet help secure Express/Connect apps with various HTTP headers. Latest version: 5.1.0, last published: 7 days ago. Start using helmet in your project by running `npm i helmet`. There are..
![[ORM] 📚 Sequelize - Transaction 문법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FqdgfN%2Fbtrr0rEToa1%2FiM9I7SuvNt56B55JU0BG70%2Fimg.png)
[ORM] 📚 Sequelize - Transaction 문법
선행학습 [MYSQL] 📚 트랜잭션(Transaction) 이란? 💯 정리 트랜잭션(Transaction) 이란? 트랜잭션(Transaction)의 사전적 의미는 거래이고, 컴퓨터 과학 분야에서의 트랜잭션(Transaction)은 "더이상 분할이 불가능한 업무처리의 단위"를 의미한다. 이것은 하나의 inpa.tistory.com Sequelize Transaction Sequelize는 transaction을 사용하기 위해 두 가지 방법을 지원한다. Unmanaged Transactions : Unmanaged transactions는 사용자가 커밋과 롤백을 직접 작성해야 한다. Managed Transactions : Managed transactions는 Sequelize가 에러가 발생했을 때 자동으..
![[NODE] 📚 Server Sent Events 💯 정리 (+사용법)](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbFlOFD%2FbtrrVZtZJI9%2FW8TmXo3FMXQ8QMToivazj0%2Fimg.png)
[NODE] 📚 Server Sent Events 💯 정리 (+사용법)
SSE - Server Sent Events 란? SSE는 서버의 데이터를 실시간으로, 지속적으로 Streaming 하는 기술 이다. SSE는 웹 표준으로써 IE를 제외한 모든 브라우저에서 지원되며, IE역시 polyfill을 통해 지원이 가능하다. 기존에는 서버의 변경된 데이터를 가져오기 위해서 페이지 새로고침, 지속적으로 request를 보내는 ajax 폴링, 외부 플러그인 이용등을 사용해야만 했었다. 이외에도 websocket을 사용할 수 있지만 HTTP 통신을 이용하는 것이 아닌 웹소켓만을 위한 별도의 서버와 프로토콜로 통신하기 때문에 구현하는 비용이 많이 든다는 단점이 있다. 하지만 SSE는 기존 HTTP 웹 서버에서 HTTP API 만으로 동작되며 구현도 간단하기 때문에 서버와 프론트엔드 양측..
![[SOCKET] 📚 소켓 미들웨어 개념 & 사용 문법](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FmAOld%2FbtrrP34g9Cf%2FOlOL4aLxCKgoT9EFnnOzH0%2Fimg.jpg)
[SOCKET] 📚 소켓 미들웨어 개념 & 사용 문법
Socket Middleware 소켓 미들웨어에 대해서는 이전 포스팅에서 소개한 바 있다. 하지만 소켓 미들웨어 문법&기능 에서만 소개를 했고, 왜 이러한 로직이 쓰이는지 자세한 설명을 하기위해 추가적으로 포스팅 해본다. 우리는 이전 포스팅에서, 소켓IO의 io객체 를 외부파일에서 사용하는 방법을 배웠다. const io = req.app.get('io'); // 전역변수로 등록해논 io객체를 가져옴 io.of('/room').emit('newRoom', newRoom); // room네임스페이스에 newRoom 이벤트와 쿼리객체를 보냄 이와 같은 논리로, 소켓 미들웨어는 외부 미들웨어의 데이터를 소켓에서 쓰기 위해 사용하는 기법이라고 보면 된다. express 미들웨어를 예로 들어보자. app.use(..
![[SOCKET] 📚 Namespace & Room 기능 이해하기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FelsHho%2FbtrrDPFKa6q%2FrHjemgCFKLYy76bFKCGKk0%2Fimg.jpg)
[SOCKET] 📚 Namespace & Room 기능 이해하기
Namespace 개념 네임스페이스란 Express의 라우팅처럼 url에 지정된 위치에 따라 신호의 처리를 다르게 하는 기술이다. 서버와 클라이언트가 연결되면 실시간 데이터 공유가 가능한데, socket을 그냥 사용하면 데이터가 모든 socket으로 들어가게 된다. 하지만 특정 페이지에서 소켓이 보내주는 모든 실시간 메세지를 모두 받을 필요는 없다. 불필요하며 낭비이기 때문이다. 그래서 특정 노드끼리만 연결해주는 것이 namespace 이다. 지금까지는 기본 네임스페이스인 / 에 신호를 전송하고 수신했지만, 다른 네임스페이스를 만들어서 신호를 각기 독립적으로 처리할 수도 있는 것이다. 즉, 지정한 Namespace에 있는 소켓 끼리만 통신 한다는 개념이다. Namespace 단어 말 그대로 이름이 붙은 ..
![[SOCKET] 📚 Socket.IO 사용 해보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FdgzW3f%2FbtrrxYPDqsb%2FcpTLi1w6WB3DzEsC8Aci51%2Fimg.jpg)
[SOCKET] 📚 Socket.IO 사용 해보기
Socket.IO node.js에서는 많은 웹 소켓 구현체가 있다. socket.io와 ws가 있다. ws는 기본에 충실한 느낌이고, socket.io는 기본도 기본이지만 뭔가 색다른 기능을 제공한다. 예를 들어 room이라는 기능을 이용해 여러 개의 채팅방을 만들 수 있고 소켓에 연결된 전체 클라이언트에게 broadcast를 보낼 수 있다거나, room 별로 broadcast를 보낼 수 있다. 이런 부분들을 좀 더 쉽고 직관적으로 제공하는 것이 특징이다. 거기다가, HTML5 WebSocket은 매우 유용한 기술이지만 오래된 브라우저의 경우 지원하지 않는 경우가 있다. 브라우저 간 호환이나 이전 버전 호환을 고려하여 Node.js를 위한 강력한 Cross-platform WebSocket API인 So..
![[SOCKET] 📚 WS 웹소켓 사용해보기](https://img1.daumcdn.net/thumb/R750x0/?scode=mtistory2&fname=https%3A%2F%2Fblog.kakaocdn.net%2Fdn%2FbE3Gwf%2FbtrroYpCMJt%2FKzQspEofQyMIOAKby0OcMk%2Fimg.png)
[SOCKET] 📚 WS 웹소켓 사용해보기
WS (Web Socket) [WEB] 🌐 웹 소켓 (Socket) 역사부터 정리 웹 개발을 처음 배우기 시작했다면 서버와 클라이언트의 통신은 모두 HTTP 프로토콜만 이용해서 이루어진다고 생각할 수 있습니다. 하지만 웹 개발을 하면서 채팅, 게임, 주식 차트 등의 실시 inpa.tistory.com 웹 소켓은 실시간 양방향 데이터 전송을 위한 기술로서, ws 프로토콜 사용하여 통신한다. 최신 브라우저는 대부분 웹 소켓을 지원하며, 노드는 ws나 Socket.IO같은 패키지를 통해 웹 소켓 사용 가능하다. 웹 소켓 이전에는 폴링이라는 방식을 사용했었다. HTTP가 클라이언트에서 서버로만 요청이 가기 때문에 주기적으로 서버에 요청을 보내 업데이트가 있는지 확인했었다. 하지만 이렇게 할 경우 서버에 부담..
