전체 150

[Node.js] jwt토큰 발급과 인증 (jsonwebtoken 라이브러리)

jwt로 토큰을 발급해 사용함으로써 사용자 인증을 할 수 있습니다. 여기서는 발급과 인증을 하는 방법을 알아보겠습니다. 토큰 발급 jwt.sign(토큰화할 것, 토큰키, 옵션, 콜백 함수 ) 이제 1분동안 유효한 id 값을 가진 토큰을 생성해 보겠습니다. const jwt = require('jsonwebtoken'); cosnt tokenKey = '임의의 키 설정' // 물론 실제 개발시에는 따로 숨겨놔야합니다. const id = 'example_id' const token = jwt.sign({ id : id }, tokenKey, { {id:id}면 {id}로 축약 가능 expiresIn: 60, // 1분 유효한 토큰 발급(초 단위) }); 이제 이 token을 응답으로 넘겨주고 사용하면 됩니..

개발/Web 2022.01.12

[Mac] 맥 잠자기에서 배터리 소모가 심할때

맥북을 사고 잠자기 모드를 해놓고 자고 일어나니 배터리가 80%가 되어 있었습니다. 구글링을 열심해 해보니.. 잠자기할땐 방해금지 모드 설정이나 커맨드 라인으로 잠자기 시간 수정이 있던데 둘다 맥os가 업데이트 되어서 그런지 쓸 수가 없었습니다. 결국 며칠동안 설정을 바꿔보며 관찰한 결과 원인을 찾았습니다. 집에서는 외장모니터를 사용하는데 자기 전에는 노트북 충전기, 모니터가 연결된 멀티탭 전원을 내립니다. 이러면 클램쉘 모드가 비활성화 되어 잠자기로 되는줄 알았습니다. 사실 잠자기가 되긴 하는데 로그를 보니 몇시간에 한번씩 일어나더라구요? 결국 hdmi 선을 뽑아두고 자니 배터리가 아침에 100% 인것을 확인할 수 있었습니다. 이게 어떤 영향인지는 모르겠는데 왜 그런걸까요..? 결론 : 자기전에 HDM..

기타 2022.01.11

[Node.js] express .Router( ) / 라우터로 파일 정리하기

node로 url을 받아 데이터를 보내줄때 한 파일에 모두 작성하면 파일이 보기 힘들고 관리가 어려워집니다. 그래서 url을 보고 정리할 수 있도록 도와주는게 router인데 미 모듈을 사용해 보도록 하겠습니다. 파일 구성 다음과 같이 메인 server.js 파일이 있고 routing할 것은 routes 폴더를 만들어 test.js 파일로 관리해 보겠습니다. 최대한 간단하게 다음으로 파일을 구성합니다. 서버가 localhost:5000 이라고 가정하겠습니다. 우리가 http://localhost:5000/test/test1 , http://localhost:5000/test/test2 라는 요청을 한다고 할 때 다음의 파일을 보고 설명하겠습니다. server.js const express = requir..

개발/Web 2022.01.11

[React] (Proxy) 리액트와 노드 다른 포트 통신 설정

프론트는 localhost:3000에서 서버는 localhost:5000에서 개발하는데 설정을 해주지 않으면 통신 오류가 납니다. 3가지 방법을 소개해 드리도록 하겠습니다. 1. proxy 1 (개인적으로 추천) 2. proxy 2 3. cors 사용 3. 수동 Proxy 설정 ⭐️ 가장 귀찮지만 확실하게 사용자가 정의해 줄 수 있는 방법입니다. 먼저 라이브러리를 설치해 줍니다. # yarn add http-proxy-middleware 리액트 프로젝트의 src 폴더 안에 setupProxy.js 파일을 추가합니다. 파일의 내용은 다음과 같습니다. const { createProxyMiddleware } = require('http-proxy-middleware'); module.exports = (ap..

개발/Web 2022.01.10

[React] 리액트, 노드 연동하기 (프론트, 서버)

React와 nodejs를 이용해 클라이언트와 서버를 같이 실행시키고 통신하는 것을 해보겠습니다. 1. 라이브러리 소개 2. 클라이언트, 서버 주요 코드 3. 실행 전 준비 4. 실행 1. 라이브러리 사용한 라이브러리 #-- 클라이언트에서 사용 -- # Ajax 통신 라이브러리 yarn add axios # 서로 다른 포트에서 클라이언트와 서버가 통신 가능하게 함 #-- root에서 사용 -- #리액트와 노드를 함께 실행시켜 사용 가능 yarn add concurrently # 변경사항 저장시 반영 yarn add nodemon # express yarn add express 2. 클라이언트, 서버 주요 코드 파일 구성 client에 yarn create react-app으로 만든 리액트 패키지가 들어있..

개발/Web 2022.01.10

[React] 조건에 따라 요소를 보이게 하거나 숨기기 (&&, || 연산자)

함수형 컴포넌트를 기준으로 return한다고 할 때 요소를 때로는 보이게 때로는 숨겨서 할 수 있습니다. check라는 변수가 있다고 할때 True이면 보이고 False이면 숨겨보는 코드를 작성해 보겠습니다. import React, {useState} from 'react'; const hello = (props) =>{ const [check,setCheck] = useState(true) return ( {check && World} ); } 이처럼 return을 할때 자바스크립트 코드를 작성하고 싶다면 { } 안에 작성하면 되고 && 는 앞이 True이면 뒤의 것 실행, 반대로 || 앞이 False이면 뒤의 것 실행의 뜻을 담고 있습니다. 꼭 이러한 용도 뿐만이 아니라 더 다채롭게 사용 가능합니다..

개발/Web 2022.01.09

[Mac] oh-my-zsh 아이콘 수정하기(Theme : af-magic)

테마를 적용해서 쓰는데 깃을 사용할때 아이콘이 조금 거슬려 없애거나 바꾸는 방법을 알려드리겠습니다. 기존 (master *) -> 수정(master) 터미널을 열고 다음 커맨드를 입력해 테마 설정에 들어가 줍니다. ~ » cd ~/.oh-my-zsh ~/.oh-my-zsh (master) » cd themes # 자신의 테마에 따라 파일이 달라짐 ~/.oh-my-zsh/themes (master) » vi af-magic.zsh-theme 이제 테마 설정에서 setting을 찾습니다. # git settings ZSH_THEME_GIT_PROMPT_PREFIX=" ${FG[075]}(${FG[078]}" ZSH_THEME_GIT_PROMPT_CLEAN="" ZSH_THEME_GIT_PROMPT_DIRTY..

기타 2022.01.08