본문 바로가기

Develop75

Mongo DB 사용하기 - window 10 Mongo DB를 설치하고, 사용하는 과정에 대해 알아보자. 1. Mongo DB 설치 먼저, 구글에서 MongoDB Server Download를 검색해준다. www.mongodb.com/try/download/community MongoDB Community Download Download the Community version of MongoDB's non-relational database server from MongoDB's download center. www.mongodb.com 필자는 4.4.5버전을 다운로드 받았다. 이후 next만 눌러주면서 설치하면 된다. (따로 건드릴 것이 없다) 2. 환경 변수 등록하기 이제 cmd에서 mongo를 쉽게 사용할 수 있도록, 환경 변수를 지정해주자... 2021. 4. 26.
React 취소 버튼 컴포넌트 만들기 React는 반복 사용되는 컴포넌트를 만들어두고 어느 곳에서든 재사용 할 수 있다는 장점을 갖고 있습니다. 이번 포스팅에서는 프로젝트를 만들며 빈번하게 사용되는 취소 버튼을 컴포넌트로 만들고 이용하는 방법에 대해 적어보겠습니다. 1. CancelButton.jsx 만들기 import React from "react"; import { css } from "@emotion/css"; export default function CancelButton({cancelAction}) { return ( 취소 ); } 취소 버튼을 컴포넌트로 따로 제작해둡니다. index.jsx를 만들어 해당 컴포넌트를 빼주는 것도 잊지 마세요! 2. 취소 버튼에 동작 넣기 취소 버튼의 행동에는 여러가지가 있을 수 있습니다. 모달 .. 2021. 4. 24.
Putty를 이용하여 Amazon EC2 연결하기 이번 포스팅에서는 AWS의 EC2를 생성 한 이후, Putty를 이용해 연결하는 과정을 다뤄보겠다. 1. 인스턴스의 실행 중인 인스턴스로 들어간다. 2. 연결을 클릭한다. 3. 인스턴스에 연결 페이지에서 SSH 클라이언트 탭 클릭, 퍼블릭 DNS 부분을 복사한다. 4. PuTTY Key Generator(Puttygen)을 실행하고, Load를 클릭한다. 5. 모든 파일 보기로 변경 후, pem파일을 불러온다. 6. Save private key를 통해 putty key를 생성한다. (경고창이 나와도 예를 누르고 저장해준다.) 7. 이제 PuTTY를 실행해준다. 8. Session에 Host Name을 적는 칸이 있다. 이 부분에 3번에서 복사 한 퍼블릭 DNS 주소를 넣어준다. 9. 이후 PuTTY의 .. 2021. 4. 19.
리액트 프로젝트에 구글 로그인 연동하기 리액트를 이용하여 개발할 때, 구글 로그인을 연동하는 방법에 대해 알아보겠습니다. 1. Google Cloud Platform에 프로젝트 만들기 구글 인증을 사용하기 위해는 Google Cloud Platform에 접속하여, 프로젝트를 생성해야 합니다. Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 구글 로그인을 연동하고자 하는 서비스 이름으로 만들어주세요. 2. 사용자 인증 정보 만들기 프로젝트 생성 이후 대시보드에서 다음과 같이 이동해주세요. 좌측 메뉴의 사용자 인증 정보 - OAuth 클라이언트 ID 만들기에 오셔서 해당하는 정보들을 적어주고, URI에는 http.. 2021. 4. 18.
리액트 프로젝트 만들기 create-react-app 0. 준비물 Nodejs - 리액트 관련 라이브러리들하을 손쉽게 설치할 수 있도록 해주는 npm, yarn을 위해 필요하다. VSCode (코드 편집기중 하나인데, 다른 편집기를 사용해도 괜찮다) 1. yarn 설치하기 yarn은 페이스북에서 만든 녀석인데, 프로젝트 의존성 관리를 담당하는 Javascript 기반의 패키지 매니저다. npm이 존재하긴 하나, 이보다 훨씬 빠르고 안전하다. npm의 속도, 성능, 보안 문제들을 해결하기 위해 개발되었다. 설치는 Yarn의 홈페이지에서 할 수 있다. https://yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarn.. 2021. 4. 18.
Javascript - Daum 도로명주소 API 사용하기 javascript를 사용하여 도로명 주소 찾기를 해보자. 참고한 공식 문서는 글 제일 하단에 링크를 걸어두었다. 왜 Daum API인가? 우체국, 도로명주소 API등 많은 주소 관련 API가 있는데 왜 다음 API를 이용하여 개발하는가에 대한 내용이다. 다른 주소 API의 경우 별도로 Key를 발급 받거나, 응답 형태가 XML이라 추가적으로 파싱을 해야 할 필요가 있었다. 이 때문에 구현하는 것에도 진입장벽이 높았고, 유지보수 또한 만만치 않았다. 하지만, Daum API가 등장하고, 10분 만에 도로명 주소 검색을 구현할 수 있게 되었다. 사용 형태 Daum API를 사용하여 주소 검색을 구현하면, 크게 세 가지 형태로 구현이 가능하다. 첫 번째로, 팝업을 띄우는 형태이다. 팝업을 띄우는 것은 PC .. 2021. 4. 6.
반응형

티스토리툴바