전체 글 238

리액트 & 노드JS 서버 연동 (Http-proxy-middleware)

안녕하세요. 훈츠입니다. 금일은 노드JS 익스프레스 서버와, 리액트와의 통신을 위한 글을 남깁니다. 사실 간단하게 프록시 설정하면 된다고했는데, 안되서 몇일 고생했어요. 외국 개발자분이 소개해주신 블로그 보고 해결했네요. ^^ 아하 모멘트~~~~!! 클라이언트 Json 파일을 이용한 프록시 설정 [노드 JS Express and React] yarn dev 를 이용한 서버와 리액트 프론트 동시실행 안녕하세요. 훈츠입니다. 금일은 노드JS Express 서버와 리액트 클라이언트를 동시에 실행하는 방법에 대해 포스팅 합니다. 목 차 프로젝트 트리 구조 관련 라이브러리 설치 JSON 파일 수정하기 - 서 rain2002kr.tistory.com 위의 방법으로 하였는데, 안되서 아래 미들웨어를 설치 하여 해결했..

리액트 2020.07.09

[다중 사용자] 노드 JS 다중 사용자 + 패스워드 암호화 정리 글

안녕하세요. 훈츠입니다. 이 정리글은 생활코딩 예제를 기반으로 작성하였습니다. 패스포트 JS 다음예제인 다중 사용자를 학습 및 실습해보고 정리한 글입니다. 다시 한번 이고잉님 이하 개발자분들께 감사를 표합니다. 목 차lowdb 데이터 베이스 추가 패스워드 암호화를 위한 bcrypt 미들웨어 추가 회원가입 UI 만들기 회원정보 저장 into 인증정보 저장로그인 구현 접근제어 - 글쓰기 (Create)접근제어 - 글읽기 (Read)접근제어 - 글수정 (Update)접근제어 - 글삭제 (Delete)bcrypt - 비밀번호 암호화 코드 공유lowdb 데이터 베이스 추가 JSON 형태로 데이터를 저장하는 아주아주 가벼운 데이터베이스 lowdb 입니다. 사용해본 경험으로는 그다지 어렵지않고 가볍게 사용하기에 좋은..

노드JS [Express] 2020.07.04

[깃 허브] 리모트 리포지토리 변경하기

깃 리모트 변경 하기 1 2 3 4 5 6 7 8 9 10 11 12 13 14 //Hoons Blog---https://rain2002kr.tistory.com------------------------------------------------------------------코드/// //새 리포지토리 REMOTE 추가후 가져오기 git remote add origin https://github.com/계정/리포지토리 git pull //리포지토리 최초 아이디와 이메일 등록 git config --global user.name "user name" git config --global user.email "user e-mail" //기존 리포지토리 깔끔하게 PULL / PUSH git pull git ..

깃허브 GitHub 2020.07.02

[passport 패스포트] 노드JS passport 정리글

안녕하세요. 훈츠입니다. 금일은 Passport 에 관해 정리 합니다. 세션을 가지고 인증작업을 하였을때보다 좀더 는 보안을 강화 할수있고, 무엇보다 구글로 로그인하기, 페이스북으로 로그인하기 같은 기능을 손쉽게 가능하도록 도와줍니다. 강의 출처는 opentutorials.org/module/3655 WEB5 - Express passport.js 수업소개 이 수업은 Node.js Express의 인증 미들웨어인 Passport.js의 사용법을 알려드리는 수업입니다. 수업대상 로그인/로그아웃/접근제한과 같은 인증 기능을 구현하고 싶은 분에게 필요한 수업�� opentutorials.org 생활 코딩의 이고잉님 강좌를 참조하였습니다. 목 차 패스포트 동작 설명 및 설치 패스포트 인증 관련 순서 전체 코드 ..

노드JS [Express] 2020.07.01

[세션 session] 노드JS Session 정리글

안녕하세요. 훈츠입니다. 금일은 Session 미들웨어에 관해 정리 합니다. Cookie 만 가지고 인증작업을 하였을때는 보안문제가 발생하므로 Session 미들웨어를 이용하여 보통 구성합니다. 어떻게 구성하고 움직이는지 정리 해보도록 하겠습니다. 목 차 세션 미들웨어 동작 설명 및 설치 세션 이용한 기본 동작 구현 테스트 세션 객체의 옵션 코드 전체 코드 공유 세션 미들웨어 동작 설명 및 설치 서버와 클라이언트 간 http 통신 할때, 서버가 쿠키를 발행하고 클라이언트가 쿠키를 저장합니다. 그리고 다시 재접속 할때 서버는 클라이언트의 쿠키를 확인 합니다. 세션을 이용하면, 쿠키에 세션의 sid 값만 저장 합니다. 그러므로 이전 쿠키만 이용해서 내용을 저장할때의 정보가 저장 되는것이 아니라, sid 값을..

노드JS [Express] 2020.07.01

[쿠키 와 인증] 노드JS Cookie 인증 정리글

안녕하세요. 훈츠입니다. 노드 JS에서 쿠키가 기본적으로 동작하는 원리에 대해 정리해 봅니다. 목 차 쿠키 설명 및 특징 쿠키 만들기 쿠키 읽기 쿠키의 활용 Session 쿠키 (휘발성) VS Permanent 쿠키 (비휘발성) 쿠키 옵션 앱 만들기 적용 (쿠키를 이용한 인증 기능 구현) 로그인 쿠키 생성 로그인 상태 체크 로그인 상태를 UI에 반영 로그 아웃 접근 제어 쿠키 설명 및 특징 https://developer.mozilla.org/ko/docs/Web/HTTP/Cookies HTTP 쿠키 HTTP 쿠키(웹 쿠키, 브라우저 쿠키)는 서버가 사용자의 웹 브라우저에 전송하는 작은 데이터 조각입니다. 브라우저는 그 데이터 조각들을 저장해 놓았다가, 동일한 서버에 재 요청 시 저장된 데�� devel..

노드JS [Express] 2020.06.29

[리액트 react] 리액트 기본 실행 포트 변경 하기

안녕하세요. 훈츠입니다. 금일은 리액트 기본포트 3000번 포트를 변경하는 방법에 대해 포스팅 합니다. 실행 포트 변경방법 다음 두가지 방법이 있습니다. 첫번째 방식은 간단 합니다. Package.json 파일에 스크립트 스타트 부분 변경 react-scripts start 파일에 포트 주는 부분을 직접 변경 package.json 파일 수정 위와 같이 간단하게 "set PORT = 3002 "라고 추가 해주면 됩니다. react-scripts start 파일 구조 및 찾아보기 위의 스크립트 파일을 가리키는 곳이 어딘지 몰라 찾아 보았습니다. 그안에서 포트 변경해도 됩니다. 굳이 이곳 까지 들어와서, 변경하는것보다는 첫번째 방식을 선호 합니다.

리액트 2020.06.26

[Node JS Express and React 배우기] yarn dev 를 이용한 서버와 리액트 프론트 동시 실행방법.

Node JS Express 와 React 에서 yarn dev 명령어를 이용해서 서버와 리액트 프론트 동시 실행방법에 대해 배워보자! 노드JS Express 서버와 리액트 클라이언트를 동시에 실행하는 방법에 대해 포스팅 합니다. 목 차 프로젝트 트리 구조 관련 라이브러리 설치 JSON 파일 수정하기 - 서버 사이드 JSON 파일 수정하기 - 클라이언트 사이드 프로젝트 트리 구조 위와 같이 서버가 밖에 있으며, 그곳을 세팅하는 package.json 파일과 create-react-app 으로 프로젝트를 만들게 되면 그안에 client 폴더 안에 package.json 파일이 있습니다. 전자의 package.json은 서버 세팅을 위해 사용되고 후자는 리액트 프로젝트를 위해 사용됩니다. 관련 라이브러리 설..

노드JS [Express] 2020.06.26

[노드 JS Express and React] yarn dev 를 이용한 서버와 리액트 프론트 동시실행

안녕하세요. 훈츠입니다. 금일은 노드JS Express 서버와 리액트 클라이언트를 동시에 실행하는 방법에 대해 포스팅 합니다. 목 차 프로젝트 트리 구조 관련 라이브러리 설치 JSON 파일 수정하기 - 서버 사이드 JSON 파일 수정하기 - 클라이언트 사이드 프로젝트 트리 구조 위와 같이 서버가 밖에 있으며, 그곳을 세팅하는 package.json 파일과 create-react-app 으로 프로젝트를 만들게 되면 그안에 client 폴더 안에 package.json 파일이 있습니다. 전자의 package.json은 서버 세팅을 위해 사용되고 후자는 리액트 프로젝트를 위해 사용됩니다. 관련 라이브러리 설치 다음을 설치하세요. npm install -g yarn npm install -g nodemon np..

노드JS [Express] 2020.06.26