※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. react를 실습하기 좋은 online IDE는 codesandbox이다. 복잡한 세팅 없이 코드로 실습할 수 있고, 모듈들을 까는 것도 간단하다. github에 코드를 업로드하거나 친구들에게 공유하는 것도 가능하다. 코드 샌드박스에 들어가서 새프로젝트를 만든 후, 왼쪽에 있는 패널에 있는 add dependency에서 react와 react-dom을 설치해준다. 그 후, index.js에 react와 react-dom을 require 해준다. var React = require("react"); var ReactDOM = require("react-d..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. react는 전세계의 개발자들 사이에서 가장 많이 사용되는 웹 프레임워크 중 하나이다. react는 반복되는 요소들을 만드는 것을 수월하게 해준다. airbnb에서 파란색으로 표시된 부분들 각각은 다른 정보를 가지고 있다. 하지만 주황색처럼 한개의 타일로 묶일 수 있고 이렇게 만든 후, 각각을 커스터마이징하는 것이 훨씬 단순할 것이다. 매우 복잡해보이는 UI도 위와 같이 컴포넌트 트리로 나누어주면, 훨씬 이해하기 쉬워진다. react는 바로 이 원리를 이용한다. 아무리 프로그램이 커진다하더라도 우리는 이를 구성요소의 재료 하나하나로 쪼갤 수 있다. 그렇..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. 지난번 포스트에 OAuth에 대해 설명하였다. 이번에는 google OAuth를 사용하는 법을 알아볼 것이다. 쿠키와 세션이 미리 셋팅되어 있어야 한다. 가장 먼저 사용하고 있는 프로젝트에 passport-google-oauth20을 npm을 사용하여 설치하였다. http://www.passportjs.org/packages/passport-google-oauth20/ 이후, 위 홈페이지의 문서에 나와있는 사용법을 따라가면 된다. 1. 구글 개발자 콘솔에 들어간다. 2. 새로운 프로젝트를 생성한다. 3. OAuth 동의 화면에 들어가서 애플리케이션 이름..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. OAuth란 Open Authorisation의 약자이다. OAuth를 이해하기 위해서 한가지 예를 들어보겠다. 만약 내가 인스타그램을 오마주한 먹스타그램이라는 SNS를 만든다고 하자. 인스타그램을 즐겨하던 유저가 로그인을 했지만, 가지고 있던 친구 한명도 없이 시작한다면 막막할 것이다. 이때, 우리는 유저가 자신의 인스타그램 계정에 접근할 권한을 요청하도록 할 수 있다. 그렇게 해서 친구 추천이 뜨게 되고 이들을 추가할 수 있게 된다. OAuth를 이용하여 우리는 제3의 사이트에 있는 계정과 연동된 정보를 가져올 수 있다. 또 어떤 상황에 OAuth를..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. Hash| 내가 만든 사이트에 사용자들이 가입을 할 것이고, 그들의 비밀번호가 지정된 데이터베이스에 저장될 것이다. 만일 이것이 암호화되지 않은 평문 그대로 저장된다면 보안상 정말 위험할 것이다. 이를 더 안전하게 하기위해 다양한 방법의 암호화 기법이 사용되는데 해시도 이 중의 하나이다. hash는 단방향 암호화 기법으로 평문을 고정된 길이의 암호화된 문장으로 만들어준다. 그렇다면 단방향 기법이라는 것은 무엇일까? 139*3 = a 위의 식에서 a를 찾는 것은 쉽지만 139를 나누어떨어지게 하는 수 b를 찾는 것은 수를 하나하나 대입해봐야하는 어려운 일..

※이글의 예시들은 Udemy의 Angela Yu의 "The-Complete-Web-Development-Bootcamp" 강의의 내용을 정리한 것입니다. REST란 무엇인가? REST란 REpresentational State Transfer의 줄임말이다. 이를 이해하기 위해서 우리는 인터넷의 구조를 봐야한다. 클라이언트는 서버에 요청을 한다. 여기서 클라이언트는 식당에서의 손님과 같고, 서버는 웨이터와 같다. 이러한 손님의 요청은 서버가 알아들을 수 있는 언어인 HTTP(Hypertext transfer protocol) request를 통하여 행해진다. app.get(function(req,res)); 그리고 이것은 위에서 req에 해당한다. 레스토랑이 가지고 있는 메뉴를 요청한다면, 웨이터가 가져다..