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

안녕하세요. 훈츠입니다. 금일은 노드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 간단 소개 및 설치방법 [ 윈도우 ] 노드 ..

안녕하세요. 훈츠입니다. VS Code에 터미널 창에서 권한 때문에 안될때 설정법 입니다. Window PowerShell 관리자 권한 으로 실행 합니다. 다음 코드를 입력 합니다. 디폴트로 YES 클릭 하면, VS Code 에서 다음 코드 실행 가능합니다.

훈츠의 블로그 입니다. 안녕하세요. 훈츠입니다. 노드JS 정리해 봅니다. 생활코딩에서 1차로 노드 JS 완주하고 적는 완벽한 초심자 입장에서 적는거라, 초심자에게는 도움이 될것 같습니다. 어렵게 설명하고 싶어도, 아는게 없습니다. ㅎㅎ 그래도 전체적인 맥락 파악에는 도움이 되실것 같습니다. 노드 JS 가 무엇인지 알고 싶으시면, 생활코딩의 egoing 님 강좌 추천 드립니다. 글 목록 노드 JS 설치방법 [ 윈도우, 리눅스 ] 노드 JS 기본 시작 페이지 [ 원리 파악 ] 시작 페이지 전환 URL 구조 및 주소 알아내기 콘솔 입력값 받아서 처리하기 [ process.argv ] Not found 404 오류 구현 노드 JS CRUD 샘플 프로그램 설명 파일 이용하여, 글목록 생성하기 노드 JS 동기와 비..

훈츠의 블로그 입니다. 안녕하세요. 훈츠입니다. 요즘 Web 프로젝트를 경험해보고 싶어서 새롭게 공부하고 있는 리액트 리덕스에 대한 정리 글입니다. 저 역시 리덕스를 잘모르는 관계로 정리 형태로 글을 남겨 봅니다. 원래 알고 있는데 기억이 안나시는 분에게는 도움이 될것 같습니다. 사실, 제가 나중에 기억 안날까봐 적는것도 있어서요. ^^ 글 목록 리덕스 설명 및 설치 방법 리덕스 동작 레이아웃 설명 리덕스를 이용한 샘플 프로그램 동작 설명 리덕스를 이용한 샘플 프로그램 코드 설명 리덕스 DEV TOOL : 시간 여행 가능 Log 및 status 샘플 프로그램 코드 공유 리덕스 란? ( 원 스토어 시스템 ) 리덕스 스토어라는 곳에 하나의 저장소를 만들고, 다른 여러곳에서 이 저장소에 있는 내용을 읽고 쓰게..