Hgnaseel
[Git] 우분투 환경에서 VSCode로 원격 저장소 연결하기
·
ETC/Tool & Convenience
ros를 사용해서 개발을 진행하다보면, 개발 단위가 커질수록 형상관리의 중요성을 체감하게된다. 하지만 ros가 실행되는 우분투 환경에서는 sourceTree와 같은 다양한 기능을 갖춘 gui를 찾기 힘들다. 그래서 필자는 간편하게 vsCode만을 사용해서 형상관리를 진행하는 것을 선호한다. 1. git 설치 sudo apt-get install git-all git 관련 모든 소프트웨어를 설치한다. 설치 완료 후 git version 명령어를 통해서 git 버전을 확인할 수 있다. 2. 사용자 설정 git config --global user.name hgnaseel git config --global user.email hgnaseel@gmail.com git을 사용하기 위해서는 사용자의 이름과 이메일..
[ MEVN 스택 ] 4. Mongoose DB + Express 연결하기 (2)
·
ETC/Project
1. vsCode에 vue, express 프로젝트를 생성한다. 2. vue와 express를 연동한다. 3. Mongoose DB를 생성한다. (로컬이 아닌 클라우드 서비스 이용할 예정) 4. 웹 프로젝트와 DB를 연동한다. - 현재 포스트 5. Google Cloud Platform에서 원격 컴퓨터를 임대받는다. 6. 임대받은 컴퓨터에 서버환경을 구축한다. 7. 서버에 우리의 프로젝트를 배포한다. 8. localhost가 아닌 실제 서버에 접속해서 만들어진 기능을 시험해본다. 4-1 스키마 생성 User라는 이름으로 스키마를 만든다. back/routes에 mongouser.js라는 이름으로 만들었다. 아주 간단하게 가자. id, password만 string으로 만들어서 넣었다. 4-2 홈 vue ..
[ MEVN 스택 ] 3. Mongoose DB + Express 연결하기 (1)
·
ETC/Project
1. vsCode에 vue, express 프로젝트를 생성한다. 2. vue와 express를 연동한다. 3. Mongoose DB를 생성한다. (로컬이 아닌 클라우드 서비스 이용할 예정) - 현재 포스트 4. 웹 프로젝트와 DB를 연동한다. 5. Google Cloud Platform에서 원격 컴퓨터를 임대받는다. 6. 임대받은 컴퓨터에 서버환경을 구축한다. 7. 서버에 우리의 프로젝트를 배포한다. 8. localhost가 아닌 실제 서버에 접속해서 만들어진 기능을 시험해본다. 3-1 MongoouseDB 생성 생성은 그냥 탁탁하면 되고, connect부분만 설명하면 될 것 같다. cluster - connect 들어가서 그냥 nextnext누르다가 이 부분에서 복사만 해주면 된다. 3-2 Mongoo..
[ MEVN 스택 ] 2. Vue + Express axios로 연동하기
·
ETC/Project
프로젝트 과정 1. vsCode에 vue, express 프로젝트를 생성한다. 2. vue와 express를 연동한다. - 현재 포스트 3. Mongoose DB를 생성한다. (로컬이 아닌 클라우드 서비스 이용할 예정) 4. 웹 프로젝트와 DB를 연동한다. 5. Google Cloud Platform에서 원격 컴퓨터를 임대받는다. 6. 임대받은 컴퓨터에 서버환경을 구축한다. 7. 서버에 우리의 프로젝트를 배포한다. 8. localhost가 아닌 실제 서버에 접속해서 만들어진 기능을 시험해본다. vue와 express를 연동하기 전에 이해를 돕기 위해 전체 구조를 설명해보겠다. 우리는 vue를 express 프로젝트 내부에 빌드하고, 빌드된 vue를 사용해서 작업하는 express를 실제 서버에 배포할 것..
[ MEVN 스택 ] 1. Vue + express프로젝트 생성
·
ETC/Project
MEVN 스택이란? Mongoose DB + Express + Vue.js + Node.js 의 약자이다. 몽구스 DB를 이용하며, Node.js런타임 위에서 동작하는 JS의 Express 프레임워크로 백엔드를 구성하고, 프론트엔드를 Vue.js프레임워크로 구성한다고 이해하면 된다. 유사한 MEAN, MERN스택은 프론트엔드의 Vue만 Angular, React로 바뀐 것이라고 생각하면 된다. 프로젝트 과정 1. vsCode에 vue, express 프로젝트를 생성한다. - 현재 포스트 2. vue와 express를 연동한다. 3. Mongoose DB를 생성한다. (로컬이 아닌 클라우드 서비스 이용할 예정) 4. 웹 프로젝트와 DB를 연동한다. 5. Google Cloud Platform에서 원격 컴퓨..
[web] 동일 출처 정책과 CORS의 존재 이유
·
ETC/Security
동일 출처 정책이란 동일 출처 정책(Same Origin Policy)은 어떤 출처에서 불러온 문서나 스크립트가 다른 출처에서 가져온 리소스와 상호작용 하는것을 제한하는 보안정책이다. XmlHTTPRequest로 다른 서버에 접근할 때 발생하는데, 실제 사례에는 보통 Javascript를 통한 AJAX통신과정에서 보통 발생한다. 이 때 출처는 오리진이라는 개념으로 구분하는데, 쉽게 말하자면 오리진 = 프로토콜 + 도메인 + 포트번호 라고 이해할 수 있다. 즉, 같은 프로토콜, 도메인, 포트번호를 가져야 클라이언트와 서버가 원활하게 통신할 수 있는 것이다. 동일 출처 정책이 왜 필요한가? 기본적으로 자바 스크립트는 자신이 실행된 문서의 서버의 내용만 읽을 수 있다. 만약 다른 서버의 내용까지 읽을 수 있게..