server (11) 썸네일형 리스트형 How to send a request body with a DELETE request (axios) axios를 이용하여 서버와 프론트에서 데이터를 주고 받는데 get이나 put을 이용하면 body로 request를 받아올수 있지만 delete는 못받온다. 하지만 delete를 이용해서 받아오는 방법을 찾아내서 적어본다. front 측 const deletePost = (id) => { const posts = { token: localStorage.getItem("company-auth-token") }; Axios.delete(`/posts/${id}`, {data:{posts: posts}}) .then((req) => alert("삭제완료")) setPost(post.filter((elem) => elem.id !== id)); }; 프론트측에서 이런 식으로 url 다음 파라미터에 {data: .. [React Hook] React Hooks란?, Lifecycle의 개념 React Hooks란? 간단하게 설명하자면 기존 React의 Class 활용한 Component 설정 방법을 개선한 것이다. 기존의 단점은 세 가지 정도로 꼽을 수 있다. 1. 계층이 너무 많아진다. 2. Component가 너무 복잡해진다. 3. Class를 Component로 쓰면 bind, this를 쓰는데 이 방식은 컴퓨터에게는 복잡한 작업을 수행하게 하고 사람에게는 혼란을 발생시킨다. 위 세 가지 단점을 종합해서 말하자면 가독성이 떨어진다고 할 수 있다. 따라서 react hook은 Class 형태였던 Component를 function을 통해 만들 수 있게 해주는 API이다. React Hook를 사용할 때에는 실질적으로 두 가지만 사용한다. useState()와 useEffect()가 바로.. [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] (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가 바뀌는.. [React] (8) Key - Warning: Each child in a list should have a unique "key" prop. 오늘은 State를 반복문으로 자동생성할 때 주어져야하는 key값이라는 것에 대하여 알아보겠다. 우선 아래 코드는 key값을 주지 않고 만든 반복문 데이터이다. this.state에 contents를 넣어주고 TOC에 data라는 값으로 this.state.contents를 넣어주었다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저.. [React] (7) State 사용 앞에 State란 무엇인지 알아보았다. 이제 State를 사용하는 방법에 대해서 알아보자. 지금까지 만들었던 파일들 중에 App.js가 있을 것이다. 이곳에 state를 만들고 사용할 것인데 코드로 보면 알기 쉬울 것이다. App.js import React, { Component } from 'react'; import TOC from "./components/TOC" import Content from "./components/Content" import Subject from "./components/Subject" import './App.css'; class App extends Component { // render 함수보다 먼저 실행이되면서 초기화시켜주고 싶은 것은 constructor안에다.. [React] (6) State란 (props 와 state의 차이) State란? state를 이해하기 위해선 props와 비교해보는 것이 좋다. props state 사용자가 Component를 사용하는 입장에서 중요 props의 값에 따라 내부 구현에 필요한 데이터 (사용자가 알필요도 없고 알아서도 안된다.) 사용자가 조작하는 버튼 외부 조작버튼이 사용되기 위해 내부에서 조작되는 장치들 Props와 State는 철저하게 분리되어 있어야 한다. 양쪽의 편의성을 각자 도모하는 것이 좋다. props vs state [Express] express와 사용방법 Express란? Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크이다. 웹 서버를 만들 때 손쉽게 만들 수 있어서 사용하려고 한다. Node.js의 핵심 모듈인 http와 Connect 컴포넌트를 기반으로 하는 웹 프레임워크이다. 그러한 컴포넌트를 미들웨어(middleware)라고 한다. 개발자들은 특정 프로젝트에 필요한 라이브러리를 어떤 것이든 자유롭게 선택할 수 있으며, 유연함과 수준 높은 맞춤식 구성을 보장한다. Express의 작동방식 1. 컨트롤러, 유틸리티, 도우미, 모델과 같은 자체적인 모듈을 비롯한 서드파티 의존 모듈을 포함한다. 2. 템플릿 엔진과 해당 템플릿 엔진의 파일 확장자와 같은 Express.js 앱 설정을 구성한다. 3. 오류 핸들러, 정적 파일 폴더, 쿠키 및 기타.. [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.. [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] MySQL 설치 (Windows Version) - Bitnami WAMP 1. MySQL의 특징 관계형 데이터베이스이며 무료이고 오픈소스라는 것이 특징이다. 2. 관계형 데이터베이스란? 키(Key)와 값(Value)들의 간단한 관계를 테이블화 시킨 매우 간단한 원칙의 전산정보 데이터베이스이다. 3. Bitnami란? 가상 어플라이언스 및 웹 애플리케이션, 개발 스택용 소프트웨어 패키지 및 설치 라이브러리이다. 4. WAMP란? Windows Apache MySQL PHP의 약자이다. 따라서 Apache, MySQL, PHP를 한 번에 통합 설치할 수 있는 모듈이다. 5. Bitnami WAMP 설치 방법 1) google 검색 창에 bitnami wamp 검색 후 첫 번째 링크 클릭 2) 홈페이지에서 자신의 운영체제에 맞는 버전 다운로드 3) 운영체제 설정 후 가운데 보이는 .. 이전 1 다음
