Tech 99

[Javascript] 화살표 함수 (Arrow Function)

❔ 화살표 함수와 일반 함수는 어떻게 다를까 문법 차이 - 함수를 표현 방식 1️⃣ function 키워드의 생략 function 키워드를 생략하여 간단하게 표현할 수 있다. const func1 = function() { const num = 3; }; const func1 = () => { const num = 3; }; 2️⃣ 함수의 매개 변수의 괄호 생략 함수의 전달 인자인 매개 변수가 하나인 경우 괄호()를 생략할 수 있다. const func2 = function(num){ for(let i = 0; i { for(let i = 0; i < 10; i++){ num++; return num; ..

Tech/Javascript 2021.04.06

[Redux] Redux에 대해서

0️⃣ Redux가 뭘까? Redux의 공식 문서에 따르면 Redux는 자바스크립트로 만든 애플리케이션을 위한 예측 가능한 상태의 저장소라고 한다. 그렇다면 이 Redux를 왜 사용하는 것일까? 그 이유는 애플리케이션의 복잡성을 낮춰서 우리의 코드가 어떤 결과를 가져올지 예측 가능하게 만들어주기 위해서 이다. 1️⃣ Redux를 왜 사용할까? 1) Redux를 이용하면 애플리케이션에서 필요한 데이터를 중앙 집중적으로 관리할 수 있다. 2) state를 외부로 부터 차단시켜서 데이를 관리한다. 즉, Redux의 기능을 통해서만 데이터 읽기, 수정이 가능한 것이다. 이처럼 데이터를 외부에서 직접적으로 제어할 수 없도록 하는 것을 통해서 의도하지 않게 state 값이 바뀌는 문제를 사전에 차단한다. 이를 통해..

Tech/Redux 2021.04.03

[React] 고객 정보 삭제 기능 구현하기

➖ 고객 정보 삭제 기능 구현하기 DB 테이블에서 완전히 제거하지 않고 DB 테이블 상에서 데이터가 삭제되었다고 체크만 하고 실제로 DB에서 해당 데이터를 완전히 삭제하지 않는 방법으로 개발을 진행해보겠다. 왜냐하면 데이터가 언제 삭제가 되었는지 등에 대한 정보를 기록할 수 있기 때문이다. 0️⃣ 고객 정보가 담긴 CUSTOMER 테이블 수정하기 1) 고객 데이터가 삭제가 되었는지에 대한 데이터를 담을 컬럼 추가 USE management; ALTER TABLE CUSTOMER ADD createDate DATETIME; ALTER TABLE CUSTOMER ADD isDeleted INT; 2) 생성된 컬럼을 NULL로 비워두면 좋지 않기 때문에 데이터를 채워준다. USE management; UPDA..

Tech/React 2021.03.18

[React] 부모 컴포넌트의 상태 변경을 통한 고객 정보 갱신

🛹 부모 컴포넌트의 상태 변경을 통한 고객 정보 갱신 0️⃣ 생성자 함수 만들기 (./client/src/App.js) props에 생성자 처리해주고 그 안에서 state를 갱신할 수 있도록 해주기 constructor(props){ super(props); this.state = { customers : '', completed : 0 } } 1️⃣ state를 초기화해줄 수 있는 함수 만들기 (./client/src/App.js) 1) 'stateRefresh' 함수를 만들고 데이터 초기화 시키기 stateRefresh = () => { this.setState({ customers : '', completed : 0 }); } 2) 고객 데이터 불러오는 부분 넣어주기 stateRefresh = ()..

Tech/React 2021.03.18

[Node] Node.js Express에서 파일 업로드 요청 처리 및 DB에 데이터 삽입하기

Node.js Express에서 파일 업로드 요청 처리 및 DB에 데이터 삽입하기 1️⃣ 고객 데이터 사용 요청 처리하기 (server.js) 1) 파일 처리를 위해서 'npm install --save multer' 명령어를 통해 multer 라이브러리를 설치한다. 2) 필요한 라이브러리를 불러온다. const multer = require('multer'); const upload = multer({dest : './upload'}) // 사용자의 파일이 업로드가 되는 공간으로 설정 3) image 폴더에서 upload 폴더에 접근할 수 있도록해서 사용자가 접근해서 프로필 이미지를 확인할 수 있도록 한다. 사용자 입장에서는 image 폴더에 접근을 하는데 실제 서버에서는 upload 폴더로 맵핑이 되..

Tech/Node.js 2021.03.17

[React] 고객 추가 양식(form) 구현 및 이벤트 핸들링

🍕 고객 추가 form 구현 및 이벤트 핸들링 0️⃣ CustomerAdd.js 컴포넌트 만들기 (./client/src/CustomerAdd.js) 1️⃣ 서버와의 통신 목적 라이브러리인 axios 설치하기 directory를 client로 이동한 뒤 npm install --save axios 명령어를 통해서 axios를 설치한다. 2️⃣ CustomerAdd.js 컴포넌트 작성하기 (./client/src/CustomerAdd.js) 1) React 라이브러리를 불러오고, post방식으로 고객 추가 데이터를 서버로 보낼 수 있도록 axios에서 post 라이브러리를 불러온다. import React from 'react'; import { post } form 'axios'; 2) 필요한 state..

Tech/React 2021.03.17

[Node] 고객(Customer) DB 테이블 구축 및 Express와 연동하기

🛴 고객(Customer) DB 테이블 구축 및 Express와 연동하기 0️⃣ DB 이름 사용하기 DB 이름을 management라고 설정했기 때문에 아래와 같이 써주어야 한다. USE management; 1️⃣ 고객 테이블 만들기 (1) 고객 테이블 만들기 CREATE TABLE CUSTOMER( ) (2) 한글 데이터를 포함하기 위해서 Character 세팅을 UTF 8으로 해준다. CREATE TABLE CUSTOMER( ) DEFAULT CHARACTER SET UTF8 COLLATE utf8_general_ci; (3) 필요한 컬럼들을 추가해준다. CREATE TABLE CUSTOMER( id INT PRIMARY KEY AUTO_INCREMENT, image VARCHAR(1024), na..

Tech/Node.js 2021.03.17

[AWS] AWS RDS를 이용하여 MySQL DB 구축하기

🎈 AWS RDS를 이용하여 MySQL DB 구축하기 이번에는 AWS RDS를 이용하여 MySQL DB를 구축하는 과정을 진행해볼 것이다. 0️⃣ AWS에 RDS를 이용하여 DB 만들기 1. RDS를 검색해서 접속한다. 2. 데이터베이스 생성을 클릭한다. 3. DB 생성을 위한 설정들을 진행한다. (1) 생성 방식을 선택한다. (2) 사용할 DB 종류와 버전을 선택한다. (3) 간단한 테스트를 진행할 것이기 때문에 프리 티어를 이용한다. (4) DB 인스턴스의 이름과 ID, password를 설정한다. (5) 인스턴스의 크기를 설정한다. 테스트용이기 때문에 최소 값으로 진행한다. (6) 스토리지의 유형과 할당 크기도 최소한도로 설정한다. (7) 연결 항목들도 Default 값으로 유지하고, 퍼블릭 엑세스..

Tech/AWS 2021.03.16

[React.js] React.js에서 API 로딩 처리하기

React.js 에서 API 로딩 처리하기 웹 브라우저에 API가 호출되어서 랜더링이 진행되어야 하는데 그렇지 않은 경우에 사용자에게 로딩 화면만 출력이 되도록 구성해보겠다. https://material-ui.com/components/progress/ 를 이용해서 API 로딩 처리를 진행해보겠다. 0️⃣ 필요한 라이브러리 불러오기 필요한 라이브러리를 import 해준다. import CircularProgress from '@material-ui/core/CircularProgress'; 1️⃣ state를 추가하기 progress bar는 0%부터 100%까지 충전이 되듯이 애니메이션이 보여지게 된다. 그렇기 때문에 completed라는 변수를 만들어서 0이라는 값을 넣어 주었다. state = {..

Tech/React 2021.03.16

[Node.js] REST API 구축하기

🏎 React.js & Node.js express에서 REST API 구축하기 0️⃣ REST API? REST API는 웹 프레임워크에서 지원하는 기능으로서 클라이언트가 웹 프로토콜을 기반으로 하여 효과적으로 데이터를 주고받을 수 있도록 해준다. 1️⃣ Server (./server.js) : customers api 만들기 클라이언트가 customer api에 접근하면 반환되는 값을 설정해준다. 아래와 같이 자바스크립트의 배열 데이터를 응답(response) 하겠다고 데이터를 넣어 주기만 하면 json 형태로 변환해서 client에게 보내준다는 특징이 있다. /api/customers로 접속하면 아래의 데이터를 볼 수 있도록 한다. https://jsonlint.com/ 를 이용하면 json 형식이..

Tech/Node.js 2021.03.14