WhiteHat Security

구름 IDE를 활용해서 firebase hosting을 해보려 합니다. react로 프론트, nodejs, express를 백엔드로 사용할 예정입니다. 저는 개발자가 아니라 많이 서툴지만 삽질하면서 해볼 예정이고, 삽질하는 과정도 올려보려고 합니다. node를 사용하려면 google cloud function을 사용해야하고, google cloud function은 nodejs 8 버전을 지원 합니다. 하지만 구름 IDE에서 node프로젝트를 선택하면 기본 10버전으로 설치되어 있습니다. 따라서, google cloud function을 사용하기 위해서는 nodejs 버전을 8로 낮춰줘야 합니다. node를 설치한 후 firebase에서 hosting을 어떻게 할 수 있는지, 구름 위에서 설정 후 실행 ..

지인과 협업할 일이 생겨서 어떻게 할지 많은 고민을 하다가 구름 IDE를 선택하게 되었습니다. 구름 IDE는 웹상에서 다양한 언어의 프로그래밍을 할 수 있고, 결과를 실시간 확인 할 수 있습니다. 또한 바로 URL을 통해 개발한 결과물에 접근 할 수 있으며 SSH, 포트 포워딩등을 지원합니다. 이 모든것들을 현재 무료로 사용할 수 있으며, 유료 결재시 더 높은 컴퓨팅 파워와 저장공간을 제공합니다. 그리고 더욱 놀라운건 문의 사항이 있을때 거의 실시간으로 채팅을 통해 어려움을 해결할 수 있었습니다. 그럼 하나씩 살펴보도록 하겠습니다. 회원가입 저는 회원가입이 복잡한 서비스를 아주 싫어합니다. (다들 그렇겠지만...) 역시 개발 도구 답게 다양한 종류의 SNS로그인을 지원합니다. 따라서 회원가입이 아주 쉽습..

nodejs는 기본적으로 비동기 처리를 한다. 전통적인 프로그래밍 언어만 다뤄봤던 나는 비동기 처리를 이해하는 것이 쉽지 않아 많은 삽질을 했다. 그러던 중 여러개의 api를 호출해서 동기식으로 처리해야되는 문제에 봉착했는데, 그 문제를 해결하기 위해 검색하던중 async.waterfall 을 만나게 됬다. 컴퓨터 공학을 전공한사람이라면 이름도 낯이 익을것이다. 왠지 내 문제를 해결해 줄것 같아 적용했더니 깔끔하게 해결됫다. 1. 설치npm install async 2. 사용법 사용법은 간단하다. waterfall 안에 함수들을 실행할 함수들을 순서대로 정의해주고 마지막에, 최종적으로 처리될 함수에서 결과와 에러처리를 해주면 된다. var async = require('async'); async.wate..

1. 컴포넌트 초기 생성 constructor : 컴포넌트 생성자 함수 componentWillMount: 컴포넌트가 화면에 나가기 직전에 호출 componentDidMount: 컴포넌트가 화면에 나타나게 됐을 때 호출 2. 컴포넌트 업데이트 componentWillReceiveProps - 컴포넌트가 새로운 props 를 받게 됐을 때 호출 - getDerivedStateFromProps()로 대체 getDerivedStateFromProps() - props로 받아온 값을 state로 동기화 하는 작업을 해줘야 하는 경우에 사용 shouldComponentUpdate - 컴포넌트가 업데이트 되어야할때 true / false 를 설정하여 render 함수를 호출할지 결정 componentWillUpda..

1. Node.js 설치 curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.8/install.sh | bash nvm install --lts npm --version 6.4.1 2. Yarn 설치 brew install yarn 3. Visual Studio Code 설치(IDE) https://code.visualstudio.com/ 4. create-react-app 설치 및 사용 리액트 프로젝트를 쉽게 만들어 주는 도구 - 설치 yarn global add create-react-app yarn global v1.12.1 [1/4] 🔍 Resolving packages... [2/4] 🚚 Fetching packages... [3/4..