로니의 개발 이야기

🛴 고객(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..

🎈 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 값으로 유지하고, 퍼블릭 엑세스..

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 = {..

🏎 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 형식이..

Node.js exress 서버 개발 환경 구축 0️⃣ Server (root directory) : package.json 파일 만들기 (1) 프로젝트의 이름, 어떻게 실행할 것인지, 어떤 버전을 이용할 것인지에 대한 부분을 작성한다. (2) 아래의 코드에서 주목해야 할 부분은 dev이다. dev를 통해서 client와 sever의 서버를 동시에 구동할 수 있다. (3) 또한 dependencies에 있는 항목들은 npm install을 통해서 설치해 줄 수 있다. { "name": "management_product", "version": "1.0.0", "private": true, "scripts": { "client": "cd client && yarn start", "server": "node..

1️⃣ 비동기 처리란 무엇일까? 비동기 처리의 가장 흔한 사례는 jquery의 ajax이다. 이 ajax를 통신을 통해 데이터를 서버로부터 가져올 수 있기 때문이다. 👀 아래의 ajax 코드를 한편 살펴보자. function getData(){ var dongleData; $.get('https://domain.com/product/1', function(response){ dongleData = response; }); return dongleData; } console.log(getData()); // undefined ▫ $. get()이 ajax 통신을 하는 부분 ▫ https://domain.com에 HTTP GET 요청을 해서 product 1번을 요청 ▫ 서버에서 받아온 데이터는 respon..

💡 URL? 1️⃣ Protocol (통신 규약) 사용자가 서버에 접속할 때 어떠한 방식으로 통신할 것인가에 대한 부분 2️⃣ HTTP(Hyper Text Transfer Protocol) 클라이언트와 서버가 데이터를 주고받을 때 고려하는 통신 규약 3️⃣ Host(domain) 인터넷에 접속되어있는 각각의 컴퓨터 Domain Name System 를 참고하면 domain에 대해서 알 수 있다. 4️⃣ Port 클라이언트가 접속했을 때 어떤 서버와 통신할지를 나타냄 5️⃣ Path 어떤 directory의 어떤 file인지를 나타냄 6️⃣ Query string 내가 읽고 싶은 정보

💡 Template literal 자바스크립트를 좀 더 편하게 사용하기 위해 Template literal을 간단하게 사용해보기로 했다. var nick_name = 'dongle'; var letter = 'Dear' + nick_name + '\n\n Hello, my name is dongri.'; console.log(letter); 위의 코드는 아래와 같이 실행될 수 있다. +라던가 \n 등을 사용하지 않고 좀 더 편하게 사용할 수 있게 template literal을 적용해볼 수 있다. literal이 시작되는 부분에 grave accent( ` ) 를 입력 ${선언된 변수} 입력 literal이 끝나는 부분에 grave accent( ` ) 를 입력 var letter = `Dear ${ni..

1️⃣ 디자인 패턴? 개발 과정에서 공통으로 발생하는 문제를 해결하기 위해 사용되는 패턴이다. 2️⃣ MVVM 디자인 패턴? 목적 비즈니스 로직과 프레젠테이션 로직을 UI로부터 분리하는 것이다. 이를 이용하게 되면 테스트, 유지보수, 재사용이 쉬워진다. 구성 요소 모델(Model) 비즈니스 로직과 데이터를 다룬다. 뷰(View) UI와 UI 로직을 다룬다. 뷰 모델(View Model) 프레젠테이션 로직과 뷰를 위한 상태를 다룬다. 3️⃣ MVVM 디자인 패턴의 장점과 단점 장점 모델과 뷰 모델을 독립적으로 개발할 수 있다. 개발자와 디자이너가 동시에 독립적으로 또는 병렬적으로 작업할 수 있다. 테스트에 용이하다. 단점 작은 프로젝트에서 사용시 오버헤드가 커진다. 프로젝트가 너무 커지면 데이터 바인딩 때..

1️⃣ CSS의 한계? CSS를 통해서 홈페이지를 꾸미던 중 한 가지 문제가 발생하였는데, 바로 CSS의 양이 한도 끝도 없이 많아지는 것이었다. 이 문제를 해결하기 위해서 열심히 찾아보던 중 CSS 전처리기(Pre-Processor)에 대해서 접하게 되었다. 💡 CSS 전처리기(Pre-Processor)란? CSS 문서 작성에 도움을 주는 도구로, 작업을 하며 발생하는 다양한 문제들을 programmatically 한 방식으로 해결해주는 도구이다. 2️⃣ CSS 전처리기 종류? CSS 전처리기에는 다양한 모듈이 존재하는데 가장 많이 사용되는 전처리기에는 Sass, Less, Stylus 3가지가 있다. 3️⃣ CSS 전처리기 사용을 하면 뭐가 좋을까? Sass를 사용하기에 앞서, 이 전처리기를 사용하게..