개발130 React와 React Hooks의 상태와 생명주기 React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리입니다. “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 돕습니다. -react 한국 공식 홈페이지 중 자습서- 이런 component들이 코드의 재사용성을 높여준다 그리고, 이런 component들은 자신만의 state를 가지고, 이 state에 따라 다르게 rendering 될 수 있다. 상태(State) State는 props와 유사하지만, 비공개이며 컴포넌트에 의해 완전히 제어됩니다 props는 component 랜더링 시 전달하는 전달 인자이고, state는 component 자신이 가지고 있는 비공개된 정보이다. state를 통해 함수는 캡슐.. 2021. 3. 23. Material-ui의 DataGrid에 button 추가하기 material-ui의 DataGrid에 button을 추가하는 법 Table의 경우 Material-ui의 Table의 경우는, 아래와 같이. map 할 때 그냥 TableCell의 content로 button을 적으면 된다. import React from 'react'; import { makeStyles } from '@material-ui/core/styles'; import Table from '@material-ui/core/Table'; import TableBody from '@material-ui/core/TableBody'; import TableCell from '@material-ui/core/TableCell'; import TableContainer from '@material.. 2021. 3. 23. React 전역 상태(state) 관리 라이브러리 Recoil 전역 상태(state) 관리 라이브러리인 Recoil을 소개하고자 한다. 필요성 React는 자체적으로 component마다 state라는 변수를 활용해 자신의 상태를 관리한다. 특히, React hooks에서는 useState라는 함수를 사용하여 state를 관리한다. 한 component에서 보면 이런 state 관리가 완벽한 것 같지만, 우리는 여러 component로 web application을 만든다. 즉, component 간의 state 공유가 필요하다는 것이다. 그런데, React의 component 구조 특성상, 부모 component가 자식 component에게 state 및 정보를 전달하는 건 아래와 같이 매우 쉽다. const 부모 = (props)=>{ const [state, .. 2021. 3. 21. Mongoose 개념 및 사용법 정리 MongoDB는 전통적인 관계형 DB인 Mysql, Mssql, Oracle 등 과 달리, 비 관계형 DB이며, json과 같은 document 기반의 구조를 가진다. 관계형 DB에 비해 MongoDB는 데이터 저장 및 검색에 대해 덜 제한적이다. 이런 MongoDB를 더 편리하게 사용할 수 있는 Mongoose라는 npm 패키지를 소개하고자 한다. MongoDB와 Mongoose 기본 개념(구조) 우선, 가장 작은 단위부터 보자. MongoDB Document document는 mongoDB의 가장 작은 데이터 저장 단위이다. 이 document는 그냥 하나의 json object라고 보면 된다. key:value를 저장하고 있는 text라는 의미이다. Collection Collection은 여러 D.. 2021. 3. 19. express에서 get, post 파라미터 가져오기 express에서 GET Method와 POST Method에 대해 어떻게 파라미터를 가져오는지(받는지) 포스팅하겠다. GET Method : Parameter(파라미터)로 받기 const express = require("express") const app = express() app.use(express.json()) app.get("/api/persons/:id", (request, response, next) => { const params = request.params const id = request.params.id console.log(params.id) response.send(id) }) 위 방법은 client가 보낸 request에 있는 params로 파라미터를 받는 방법이다. "/a.. 2021. 3. 19. HTTP method 정리 HTTP method 란? HTTP는 요청 메서드를 정의하여, 주어진 리소스에 수행하길 원하는 행동을 나타냅니다. 간혹 요청 메서드를 "HTTP 동사"라고 부르기도 합니다. -공식 mozilla 문서- 쓰는 이유 즉, 같은 경로(e.g. /api/users)로 request가 들어온다고 해도, method에 따라 다른 행동을 하기 위해 쓴다. 예를 들면, 같은 /api/users로 request가 들어와도, GET 이면 user를 read 하도록 POST 면 user를 create 하도록 ... 처럼 구현할 수 있다. url을 더 난잡하게 /api/users/read, /api/users/create처럼 하지 않아도 된다는 장점이 있다. 자주 쓰이는 method GET : 특정 리소스의 표시를 요청. 데.. 2021. 3. 16. 이전 1 ··· 17 18 19 20 21 22 다음
