잡다한 사전

이번 장에서 useState를 사용해서 회원가입을 하는 것을 만들어보겠다. useState를 이용해서 동적으로 데이터 받기 function Register() { const [name, setName] = useState(""); return ( {e.target.setName}} /> 회원가입 ) 위 코드에서 name 값을 useState로 받아서 입력된 값을 동적으로 바꾸는 것을 사용해서 회원가입을 할 때 입력값을 받아올 수 있다. 이외에 이를 이용해서 이름,이메일,비밀번호를 받아서 데이터 베이스로 보내서 저장하는 것이 가능하다. 회원가입 버튼을 클릭시 ajax를 이용해서 데이터를 api로 보내는 코드를 확인해보겠다. ( 본 코드에서 사용하는 api 코드는 포함하지 않았기 때문에 실제 코드 사용에서 ..

1. Props 부모 컴포넌트로부터 자식컴포넌트가 물려받는 속성, 다시 말해서 Props를 이용해서 데이터를 전달하는 것을 말합니다. Props는 자식에서 수정이 불가능합니다. 그 이유는 단방향 데이터 흐름을 지키기 위해서이다. ex) src/App.js app.js에서 자식 컴포넌트에게 보낼 속성을 정의합니다. # src/App.js render() { return ( //정의 ); } } src/hello.js hello.js에서 부모컴포넌트에서 받은 props를 호출합니다. render() { return ( Hello {this.props.text} //정의 된 props호출 ); } 2. State 컴포넌트 내에서 동적으로 변동되는 데이터를 관리할 수 있으며, 기본값을 미리 설정해서 사용이 가능..

이번 장에서는 React에 대해서 알아보도록 하겠습니다. 1. React를 알아보려는 이유 이번 프로젝트에서는 API 구현을 하면서 화면에 보이는 UI를 만들기 위해서 React를 사용하는 것이 좋겠다라는 생각이 들어서 이번 장에서는 React가 무엇인지에 대해서 알아보도록 하겠습니다. 1-1. React란 React는 메타에서 개발한 오픈 소스 자바스크립트 라이브러리입니다. ● 2013년 페이스북에서 개발한 라이브러리 입니다. ● React는 오픈소스 프로젝트로 누구나 코드를 보고 수정이 가능하다. ● 지속적인 업데이트로 관리가 잘 되고 있다. 1-2. React의 특징 ● 속성과의 단방향 데이터 바인딩 ● 스테이트풀 컴포넌트 ● 가상 DOM ● 라이프사이클 메서드 ● JSX ( JSX는 XML같은 문..

nodemon이란... nodemon은 node monitor의 약자로, 노드가 실행하는 동안 변경된 파일이 있을 때 자동으로 노드 애플리케이션을 재시작하는 모듈입니다. nodemon을 이용하면 파일이 변경되었을 때 수작업으로 재시작 없이 자동적으로 반영이 되어 수월하게 작업을 할 수 있습니다. 1. nodemon 설치 일반 npm install nodemon npm i nodemon nodemon을 일반적으로 설치하면 해당 프로젝트의 개발 종속성으로 설치가 됩니다. 이 경우, 프로젝트 내에서만 사용이 가능하며, 다른 프로젝트나 전역에서 사용할 수는 없습니다. ( 프로젝트 내부에서 "npm run" 스크립트를 통해 실행이 가능합니다.) 개발용 npm install nodemon --save-dev npm..

ES6 모듈이란.. ? ● ES6에 도입된 모듈 시스템을 말합니다. ● ES6 Module은 import와 export를 사용해서 분리된 자바스크립트 파일을 접근 가능하게 할 수 있습니다. 기존 CommonJS 방식을 사용한 예제 모듈을 먼저 확인해보고, ES6 모듈을 적용했을 때 코드를 확인하면서 차이점을 알아보도록 하겠습니다. 기존 CommonJs 사용 const express = require("express"); const app = express(); app.get("/", (req, res) => { res.send("test"); }); express 모듈을 불러올 때 CommonJS는 패키지를 불러와서 express 모듈을 사용하는 것을 확인할 수 있습니다. 2-1. 파일 단위로 ES 모듈..

이번에는 Sequelize를 이용해서 사용하는 프로젝트에서 연결하는 방법에 대해서 알아보도록 하겠습니다. ( 사진 설명이 없는 부분에 대해서 나중에 업데이트 하도록 하겠습니다.) 1. 데이터베이스 설치 npm i mysql2 sequelize npm install mysql2 sequelize 2. sequelize 연결 npx sequelize init sequelize init으로 연결을 해주면 config파일과 migrations, models, seeders 폴더가 생성 되는 것을 확인 할 수 있습니다. 이 때 config 파일을 수정해주어서 데이터 베이스에 연결을 해주도록 하겠습니다. 3. DB 생성 및 연결 확인 npx sequelize db:create config.js 파일에서 입력된 아..

이번에는 로그인에서 이메일 형식과 비밀번호 형식을 확인하기 위해서 사용하는 정규표현식에 대해서 알아보도록 하겠습니다. 기본 정규표현식 문법 문자 기능 설명 . 문자 1개의 문자와 일치한다. [ ] 문자 클래스 [ 와 ] 사이의 문자 중 하나를 선택한다. [ a-z ] 는 a부터 z까지 중 하나를 의미합니다. ^ 처음 문자열의 처음을 의미합니다. $ 끝 문자열의 끝을 의미합니다. [^ ] 부정 문자 클래스 안의 문자를 제외한 나머지를 선택합니다. ( ) 하위식 여러 식을 하나로 묶을 수 있습니다. /n 일치하는 n번째 패턴 일치하는 패턴들 중 n번째를 선택합니다. /* 0회 이상 0개 이상 문자를 포함합니다. {m, n} m회 이상n회 이하 a[1,3]b는 ab, aab, aaab를 포함하지만 b, aaa..

환경 변수 관리하기 환경 변수는 개발을 할 때 DB 연결 주소, 포트 등 관련된 부분을 매번 수정하면서 배포하기가 힘들며, 또한 유출이 되면 안되는 secret key는 배포과 되었을 때 다른 사람이 확인을 할 수 있으면 안되기 때문에 이를 해결하기 위해서 환경변수를 사용하는 것이 좋다. 1. npm install dotenv Node.js에서는 proccess.env라는 내장 자바스크립트 객체를 사용해서 환경변수에 접근이 가능하다. 이때 .env라는 파일에 환경 변수를 설정을 한 후 이를 읽어오기 위해서는 dotenv라는 모듈이 필요하기 때문에 설치를 해주어야한다. npm install dotenv npm i dotenv 2. .env 파일 만들기 .env 파일에는 설정하고 싶은 환경 변수를 입력한 후..