본문 바로가기

crud

 (11)
GraphQL, Sequelize, MySql, React (apollo server, apollo client) - CRUD 구현 우선 내가 생각하는 GraphQL의 장점은 1. rest api로 작성할때 각 url 마다 api 를 만들어줄 필요없이 하나의 end-point로 데이터를 주고받는 것이 가능하는 것이다. 2. 내가 만들어 놓은 query나 mutation을 이용하여 필요한 값들만 정확하게 가져와 데이터 낭비를 줄일 수 있다. 더 많은 장점들이 있지만 우선 생각나는 것들이 이것들 뿐이다. 그리고 단점은 file전송 같은 것을 할 때 복잡하다. 이 포스팅을 하는 이유는 주로 Sequelize와 MySQL을 같이 쓰는데 이렇게 GraphQL, Sequelize, MySQL 세 가지를 같이 활용해서 만든 예제들이 충분하지 않아, 만들기 어려웠기 때문이다. 그리고 서버는 아폴로 서버를 이용하여 만들 것이고 프론트는 리액트에 아폴..
[React] (12) Delete 기능 구현 (CRUD) - CRUD 구현된 github 이제 CRUD의 마지막 기능인 Delete 기능이 남았다. 우리는 이미 Control.js에 delete버튼을 만들어 놓았다. Control.js import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에서 Control 태그 부분을 이렇게 고치면 된다. 전체 App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import ReadContent..
[React] (11) Update 기능 구현 (CRUD) Update기능은 Create기능과 Read기능이 결합된 형태라고 볼 수 있다. 그래서 우선 components폴더 안에 UpdateContent.js를 만든다. UpdateContent.js import React, { Component } from 'react'; class UpdateContent extends Component { render() { console.log('UpdateContents render') return ( Update ); } } export default UpdateContent; 위 코드는 CreateContent.js에서 가지고 왔다. 그리고 App.js에 Import 시켜준다. refactoring (필수아님) getContent라는 함수를 만들어 조금 정리해준다...
[React] (10) Create 기능 구현 (CRUD) - shouldComponentUpdate 설명 1. 누르면 mode가 변하는 작업 미리 진행되어 있는 작업에 components를 추가하려고 한다. components 파일의 하부에 Control.js를 만들어서 아래 코드를 삽입한다. import React, { Component } from 'react'; class Control extends Component { render() { console.log('Control render') return ( create update ); } } export default Control; 그리고 App.js에 아래처럼 Control을 넣어준다. {/* 자식 */} 코드를 적용하게 되면 아래 그림처럼 create와 update 그리고 delete가 생길 것이다. 각 버튼을 클릭하게 되면 mode가 바뀌는..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, Fetch API, Node.js) - Mysql, express, fetch api crud example (1) 2020/10/08 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example [자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 �� ukcasso.tistory.com 지난 시간엔 ejs를 활용해서 ejs 문법을 넣고 crud를 구현해보았다. 이번에는 fet..
[Express] express와 사용방법 Express란? Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크이다. 웹 서버를 만들 때 손쉽게 만들 수 있어서 사용하려고 한다. Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크이다. 그러한 컴포넌트를 미들웨어(middleware)라고 한다. 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 유연함과 수준 높은 맞춤식 구성을 보장한다. Express의 작동방식 1. 컨트롤러, 유틸리티, 도우미, 모델과 같은 자체적인 모듈을 비롯한 서드파티 의존 모듈을 포함한다. 2. 템플릿 엔진과 해당 템플릿 엔진의 파일 확장자와 같은 Express.js 앱 설정을 구성한다. 3. 오류 핸들러, 정적 파일 폴더, 쿠키 및 기타..
[자바스크립트] 작은 도서관 프로그램 만들기 (MySQL, Express, ejs, Node.js) - Mysql, express, ejs crud example 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) 회사에서 내준 작은 프로젝트 과제이다. 힘들었던 부분은 외부 라이브러리를 일절 사용하지 않아야 한다는 점이었다. 아래는 개발 제약 사항과 화면 요구 사항이다. // 개발 제약 사항 // 책의 추 ukcasso.tistory.com 지난번에 만들었던 작은 도서관 프로그램이다. 그 당시에는 LocalStorage라는 것을 이용해 데이터를 해당 ip주소에 맞게 저장하는 개념을 사용하였다. 하지만 이번에는 조금더 제대로 된 사이트를 만들어보고자 MySQL과 ejs그리고 Node.js를 활용하..
[axios] axios와 사용법 axios란? HTTP Cilent 라이브러리로써, 비동기 방식으로 HTTP 데이터 요청을 할 수 있다. 또한 내부적으로는 직접적인 XMLHttpRequest를 다루지 않고 'Ajax 호출'을 할 수 있다. Ajax란? Asynchronous Javascript And XML의 약자로 jQuery의 비동기적인 웹 애플리케이션을 제작할때 사용하는 기법이다. 비동기식 자바스크립트 XML이라고 할 수있다. axios 설치방법 npm install --save axios axios 사용방법 설치 후 서버 파일이 될 js파일 상단에 선언해준다. const axios = require("axios"); GET API 호출 const axios = require('axios'); // Make a request fo..
[WEB API] Web API란? (REST, RESTful, URL, URI, HTTP 응답 코드) 1. API란? API는 Application Programming Interface의 약자로 응용 프로그램에서 사용할수 있도록, 운영체제나 프로그래밍 언어가 제공하는 기능을 제어할 수 있게 만드는 인터페이스를 뜻한다. 주로 파일 제어, 창 제어, 화상 처리, 문자 제어 등 자신이 원하는 기능을 제어할 수 있도록 하는 인터페이스를 제공한다. 따라서 원하는 기능을 제어하는 API를 직접 만들 수도 있다. 2. WEB API란? 웹 서버 또는 웹 브라우저를 위한 애플리케이션 프로그래밍 인터페이스이다. HTTP 서비스이고 다양한 클라이언트에서 접근이 가능하도록 설계되어있다. Web 환경을 통해 제공되는 데이터 CRUD인터페이스를 제공한다. HTTP 표준 접근 방식을 이용하며 플랫폼 환경, 클라이언트 환경의 제..
[MySQL] MySQL Workbench 사용방법 우선 이 명령어에서 -h다음에 오는 것은 해당 데이터베이스의 주소라는 것을 알아야 한다. 우리는 그동안 localhost에 넣었다. -hlocalhost는 생략이 가능해서 없어도 실행되었던 것이다. 1. MySQL Workbench를 실행 후 +버튼을 누른다. 2. 누르면 기본 서버 정보를 입력할 수 있는 창이 뜬다. 3. 서버 이름을 입력하고 Test Connection을 통해서 적용이 되는지 안되는지 실제 적용 전에 확인할 수 있다. 4. 실제 적용시키면 저렇게 server를 만들 수 있다. 5. 서버를 입력하고 들어온다. 7. 우리가 원래 만들어놓았던 database_1이 왼쪽 SCHEMAS에 있는 것을 확인할 수 있다. Tables 클릭 후 Query 1 칸에 SQL문을 적고 번개모양을 누르면 아..
[MySQL] CRUD Create(생성), Read(읽기), Update(수정), Delete(삭제)이 네 가지는 어떤 데이터베이스이던 꼭 필요한 것들이다. 커뮤니티 사이트를 제작한다거나 어떠한 글을 쓰는 사이트를 제작할 때 무조건 이 네 가지는 필수로 들어가야한다. 2020/09/03 - [토이 프로젝트] - [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) [자바스크립트] 작은 도서관 프로그램 만들기 (쿠키, 로컬, 세션 스토리지의 개념 포함) 회사에서 내준 작은 프로젝트 과제이다. 힘들었던 부분은 외부 라이브러리를 일절 사용하지 않아야 한다는 점이었다. 아래는 개발 제약 사항과 화면 요구 사항이다. // 개발 제약 사항 // 책의 추 ukcasso.tistory.com 단적인 예로..

티스토리툴바