JavaScript, React 🍦

Contents 앞에서는 기존에 있는 웹사이트에 react를 적용하는 방법에 대해 배워보았다 하지만 새로운 웹사이트를 만들 때에는 굳이 그렇게 할 필요가 없다 처음부터 react가 적용되어 있는 상태로 개발을 시작하면 되기 때문 그래서 react로 웹사이트를 개발할 때에는 주로 create-react-app을 사용 create-react-app : react로 웹애플리케이션을 개발하는 데 필요한 모든 설정이 되어 있는 상태. 프로젝트를 생성해주는 도구 (실습) create-react-app 필요한 것 Node.js v14.0.0 이상 npm v6.14.0 이상 VS Code create-react-app은 npx 명령어를 이용하여 실행 npx : npm package를 설치한 이후에 곧바로 실행(exec..

Contents 1. (실습) HTML만으로 간단한 웹사이트 만들기 index.html 작성 소플의 블로그 소플의 블로그에 오신 여러분을 환영합니다! 2. (실습) CSS를 사용하여 웹사이트 스타일링하기 styles.css h1 { color:green; font-style: italic; } index.html에 styles.css 적용 브라우저로 열때는 다음과 같이 마우스 오른쪽 버튼 클릭 > Open with Live Server 3. (실습) 웹사이트에 React.js 추가하기 react와 react-dom ,react component 가져오기 react component 만들기 그냥 react component가 이렇게 생겼구나 하고 넘어가기 // 아주 간단한 react의 함수 컴포넌트 fun..

Contents Windows의 경우 Powershell이라는 프로그램 사용 1. Node.js와 npm 설치 Node.js(JavaScript runtime) : JavaScript로 네트워크 애플리케이션을 개발할 수 있게 해주는 환경 npm(node package manager) : nodejs를 위한 패키지 매니저 패키지 매니저가 하는 역할 : 프로젝트에서 필요로 하는 다양한 외부 패키지들의 버전과 의존성을 관리하고 편하게 설치 및 삭제를 할 수 있게 도움 * 참고로 npm은 node.js를 설치하면 자동으로 함께 설치됨 Node.js 설치 Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.o..

Contents 함수란 입력을 받아서 정해진 출력을 하는 것 입력 : 파라미터(parameters), 인자(arguments) 자바스크립트에서 함수를 정의하는 방법(두 가지) function statement 사용 // function statement를 사용 function sum(a,b) { return a + b; } console.log(sum(10, 20)); // 출력 결과 : 30 arrow function expression 사용 // arrow function expression을 사용 const multiply = (a, b) => { return a * b; } console.log(mutiply(10, 20)); // 출력 결과 : 200 react의 component 중에서 함수 ..

Contents 연산자(Operator) 대입 연산자(Assignment operator) 말 그대로 변수에 값을 대입하기 위해 사용하는 연산자 = 기호 사용 산술 연산자(Arithmetic operators) 덧셈(+), 뺄셈(-), 곱셈(*), 나눗셈(/) 나머지를 구하는 연산자(%) 지수 연산자(**) 산술 연산자와 대입 연산자 같이 사용 증감 연산자 증가 연산자(++) 감소 연산자(--) postfix 방식 (a++) 먼저 증감 전의 값을 반환하고 이후에 변수의 값이 증감 prefix 방식 (++a) 먼저 변수의 값을 증감시키고 이후에 증감된 변수의 값을 반환 관계 연산자 (Relational operators) = 비교 연산자(Comparion operators) 변수들 사이의 값 비교하기 위해..

Contents 만약 웹사이트가 html만으로 구성되어 있다면, 사용자는 버튼을 누르거나 정보를 입력하는 등의 동적인 작업들을 처리할 수 없다. 그래서 이러한 동적인 작업들을 처리하기 위해 javaScript 사용 JavaScript javaScript의 정식 명칭 : ECMAScript 그래서 버전을 매길 때 ECMAScript의 앞 글자를 따서 ES5, ES6 이런 식으로 이름을 지음 HTML과 JavaScript는 성격 자체가 매우 다름 HTML : 웹사이트의 뼈대 구성 JavaScript : 웹사이트가 살아 움직이도록 생명을 불어넣는 역할 우리가 흔히 스크립트 언어라고 부르는 언어들이 있는데 JavaScript는 이름에서도 알 수 있듯이 스크립트 언어의 한 종류. 스크립트 언어의 특징 다른 프로그..

Contents HTML(Hyper Text Markup Language) 마크업 언어의 한 종류 마크업 : 문서나 데이터를 처리하기 위해 문서에 추가되는 정보 마크업 언어 : 마크업 정보를 표현하기 위한 언어 HTML은 이러한 마크업 언어의 한 종류 그 동안 HTML은 주로 웹에서만 사용되었다. 하지만 요즘은 웹브라우저를 이용해서 데스크탑용 앱을 만들 수 있는 기술들도 있기 때문에 그런 곳에도 HTML이 사용됨 정리하면, HTML은 웹사이트의 뼈대를 구성하기 위해 사용하는 마크업 언어 HTML에서는 흔히 Tag(태그)라고 부르는 것을 사용해 웹사이트의 구조를 만들고 웹사이트에 들어갈 내용들을 채워넣음 웹사이트 구조 head 태그에는 웹사이트의 속성이 들어감 웹사이트의 head는 이 웹사이트가 어떤 웹사..

이번에는 Login Router를 만들어보자. 1. index.js에 다음의 코드 추가 2. login router에서는 이렇게 총 세가지 일을 해야 한다. 3. 먼저 요청된 이메일을 데이터베이스에서 있는지 찾는다. 4. 요청된 이메일이 데이터베이스에 있다면 비밀번호가 맞는 비밀번호인지 확인하여야 한다. isMatch를 통해 맞는 비밀번호를 확인해야하므로 isMatch메서드를 User.js에 생성한다. 5. index.js로 다시 온 후 다음과 같이 코드를 추가한다.

현재 데이터베이스에 저장된 비밀번호를 보면 너무 안전하지 않음 -> 그래서 Bcrypt를 이용해 비밀번호 암호화 후 데이터베이스에 저장해야 함! 1. bcrypt 라이브러리 다운 npm install bcrypt --save Bcrypt로 비밀번호 암호화 하는 순서 1. User.js에 bcypt라이브러리를 가져오고 2. usermodel에 정보를 저장하기 전 비밀번호를 암호화 시켜야 하기 때문에 User.js에 다음의 코드 추가 3. bcypt 사용을 위해 사이트 이동 https://www.npmjs.com/package/bcrypt bcrypt A bcrypt library for NodeJS.. Latest version: 5.1.0, last published: 3 months ago. Start..

지금은 index.js에서 나의 mongoURI를 확인할 수 있다. 이는 깃허브에 올렸을 때 개인정보가 그대로 드러나는 문제가 있으므로 gitignore를 통해 비밀 설정 정보를 관리해보겠다. 1. config폴더 안에 dev.js를 생성 후 다음과 같이 코드를 넣어준다. mongoURI의 값으로 index.js에서 가져온 mongoDB URI를 넣어주었다. 개발은 다음과 같은 두 가지 환경에서 할 수가 있다. 하나는 지금처럼 local development 모드에서, 그 이후에는 heroku 또는 클라우드 서비스를 이용해 배포한 후 개발할 수 있다. 이 두가지를 따로 생각해주어야 한다. 2. 배포한 후 개발환경을 만들기 위해 prod.js파일도 config 폴더 안에 만들어준다.key.js 파일도 만든..