안드로이드 & 지멘스 프로그래밍

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

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

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

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

안녕하세요. 훈츠입니다. CSS 를 이용하여, Layout 을 손쉽게 구현 하는데 도움을 주는 FLEX 에 대해 소개 드리겠습니다. 언젠가 정리 해야지 하는 마음을 가지고만 있었는데 이제서야 정리하게 되네요. 목 차 FLEX 소개 FLEX 콘테이너 속성과 Item 속성 FLEX 예제 FLEX 소개 CSS FLEX 는 반응형 디자인을 도와주는 모듈 입니다. 사용법이 그렇게 어렵지는 않은데 정리 해서 해보지 않으면 헷갈려요. 다른 모듈들과 마찬가지로 브라우저 버전에 따라 지원하지 않는경우도 있으니, 내가 어디 모듈을 타켓으로 작업할지 정해 두는것도 좋을것 같습니다. FLEX 관련해서 정리나 설명해놓은 많은 블로그가 있지만 개인적으로는 W3C 사이트를 참고하고 부족한경우 다른 블로그 글을 찾아보는 방법이 좋은..

훈츠의 블로그 안녕하세요. 훈츠입니다. 기억 이라는것이 무섭네요. ㅎㅎ Create-React-App 프로젝트 시작 하는 방법 입니다. 목 차 npm install create-react-app -g 프로젝트 폴더 만들기 프로젝트 폴더에 create-react-app 폴더 만들기 npm start or yarn start 로 확인 create-react-app -g 설치 create-react-app 프로젝트를 시작 하기 위해서, 저 모듈을 설치 해야 합니다. 설치를 위해서는 당연이 node.js 와 npm이 설치가 되어 있어야 겠죠? 아래와 같이 어느 폴더 에서도 실행 가능하도록 -g 옵션을 줍니다. 실행법 c:> npm install create-react-app -g 위와 같이 입력하면 create..

몽고 DB 를 활용한 몽구스 설치 부터 구현까지 설명드리겠습니다. 몽고 DB 까지 연결을 완료 해보고 바로 몽구스로 넘어왔습니다. 몽고 DB는 구조적으로 램에다가 일단 적고, 비동기 처리를 하여 SQL 보다 약 3배 빠르고, 관계형 DB처럼 스키마가 없기 때문에 자유롭지만 이 자유도가 데이터의 일관성을 떨어뜨리는 문제를 야기 한다고 합니다. 그래서 나온게 '몽구스' 는 몽구스는 몽고 DB에 적거나 읽어올때 스키마를 적용시킬수 있는 라이브러리 입니다. 그럼 시작 해보시죠. 목차 몽구스 설명 및 설치 방법 몽구스 이용한 스키마 및 스키마 옵션 소개 몽구스 이용한 CRUD 구현 몽구스 설명 및 설치 방법 mongoose 는 mongo DB와 함께 사용되어 집니다. 실제로 노드 JS 에서 mongoose 를 설..

몽고 DB 기초 정리 대해 설명드립니다. 앱 개발 하면서 SQLITE 관계형 데이터베이스를 다뤄본 경험은 있지만, NoSQL Not only SQL 즉 관계형 DB가 아닌 Document 타입의 몽고DB 에 관심이 생겨 공부해보고 기록 및 공유를 위하여 글을 적습니다. 목차 몽고 DB 설치 및 세팅 몽고 DB Local 에서 Running Test 몽고 DB 관리 툴 : MongoDBCompassCommunity AND ROBO Mongo 몽고 DB AND Node JS Express 통신 해보기 몽고 DB 설치 및 세팅 먼저 몽고 DB를 사용하기 위해서는 몽고DB 를 설치 하셔야 합니다. 물론 웹 클라우드 버전을 이용하시면 설치가 필요하진 않지만, 서버 설치형으로 몽고 DB를 돌리기 위해서는 몽고 DB..

안녕하세요. 훈츠입니다. 금일은 NodeJS Express 에서 REST API에 대해 쉽게 정리 해보겠습니다. 글 목록 서버와 클라이언트의 역활 REST API 란 ? POST 맨을 이용해서 손쉽게 REST API 테스트 CRUD 구현 GET POST UPDATE DELETE 코드 공유 서버와 클라이언트의 역활 Node JS 와 리액트를 같이 공부하면서 항상 의구심이 들었던 부분은 리액트에 저장 영역을 만들어놓고 사용 하면 되지 않을까? 혹은 Node JS Express 로 구성하든 백앤드단 구성할때도 View 영역을 만들어서 클라이언트에게 보여주면 굳이 Front 단이 필요할까? 라는 의구심이 들었는데 둘의 명확한 역활 분담은 다음 두가지 인것 같습니다. 클라이언트 : 즉 VIEW UI 혹은 조작에 ..

Node js express 정리하면서 배워봅시다. 안녕하세요. 훈츠입니다. 노드JS Express 정리해 봅니다. 글 목록 노드 JS express 간단 소개 및 설치방법 [ 윈도우, 리눅스 ] 노드 JS express 기본 시작 페이지 [ 원리 파악 ] 시작 페이지 전환 Node js VS Express 컨버터시 차이점 CRUD 샘플 구현 Node JS -> Node JS Express Express 미들웨어 소개 및 만들어서 사용해보기 에러 처리 정적 파일 처리 Express 라우터 프로젝트 보안 처리 (헬멧 적용) 프로젝트 압축 처리 (콤프레션 적용) Express Generator pug 라이브러리 for HTML Coding 노드 JS express 간단 소개 및 설치방법 [ 윈도우 ] 노드 ..