로니의 개발 이야기

이번에는 React 공식 문서에서도 실험 단계? 인 Suspense와 react-router-dom에서 사용하는 내장 함수들을 사용해보았다. 각각의 특징들을 예시를 통해서 간단하게 정리해보았다. 사용 예시 import(`import할 PATH`))} /> Route : Route는 컴포넌트의 속성에 설정된 URL과 현재 경로가 일치하면 해당하는 컴포넌트, 함수를 렌더링 해주는 역할을 한다. 여기에 사용된 lazy 함수는 동적 import를 사용해서 컴포넌트를 렌더링 하는 기능을 담당한다. lazy는 Suspense 하위 컴포넌트에서 렌더링 되어야 한다. 그렇다면 Suspense는 뭘까? Suspense : Suspense는 데이터를 불러오기 위해서 사용된다. 공식 문서에 따르면 선언적으로 데이터를 비롯한..

0️⃣ 대칭키와 비대칭키? 대칭키 암호화 방식은 암호화와 복호화에 사용하는 키가 동일한 암호화 방식이다. 비대칭키 암호화 방식은 암복호화에 사용하는 키가 서로 다른 방식이다. 따라서 대칭키(공개키) 암호화에서는 송수신자 모두 한쌍의 키(개인키, 공개키)를 갖고 있게 된다. 1️⃣ 대칭키의 장단점 대칭키는 공개키 암호화 방식에 비해 속도가 빠르지만 키를 교환 해야한다는 문제가 발생한다. 또한 사람이 증가할수록 따로따로 키 교환을 해야 하기 때문에 관리해야 할 키가 많아진다. 장점 : 수행 시간이 짧음 단점 : 키를 교환해야 하기 때문에 보안상 문제 발생, 사람이 많아질 수록 키 관리 어려움 2️⃣ 비대칭키(공개키)의 장단점 키를 교환할 필요가 없는 장점을 갖고 있고, 개인키를 갖고 있는 수신자만이 암호화된..

git-bash shell을 사용하다가 hyper 의 존재에 대해서 알게 되었다. hyper 는 shell script를 다루는 tool 중에 하나인데, windows에서 사용할 수 있는 유용한 툴이다. 0️⃣ hyper 설치하기 hyper는 간단하게 해당 링크에서 설치할 수 있다. https://hyper.is/ 1️⃣ hyper 실행 후 세팅하기 hyper를 실행해보면 초기 세팅은 cmd(명령 프롬프트)로 되어있는데 나의 목적은 bash shell을 사용하는 것이기 때문에 설정을 변경해주어야 한다. 좌측 상단의 Edit 에서 Preferences... 를 클릭하거나 Ctrl + , 를 누르면 .hyper.js 라는 파일이 실행된다. .hyper.js 파일은 사람마다 다를 수 있는데 나의 경우 C:\U..

Generator 함수와 일반 함수 일반 함수를 정의하고 return 값을 지정해줬을 때 아래와 같이 보통 하나의 return 값을 지정해주게 된다. function sayHi(){ return 'hi' } const result = sayHi() console.log(result); // hi를 출력 만약 여기서 return 값을 두개를 주었을 때는 어떻게 될까? hi 와 hello 두개의 값을 리턴해주면 좋겠지만 결과는 hi 만 출력된다. function sayHi(){ return 'hi' return 'hello' } const result = sayHi() console.log(result); // hi를 출력 이와 달리 generator 함수를 이용했을 때는 Object [Generator] ..

❔ 화살표 함수와 일반 함수는 어떻게 다를까 문법 차이 - 함수를 표현 방식 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; ..

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

➖ 고객 정보 삭제 기능 구현하기 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..

🛹 부모 컴포넌트의 상태 변경을 통한 고객 정보 갱신 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 = ()..

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 폴더로 맵핑이 되..

🍕 고객 추가 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..