전체 글
-
express개발/nodejs 2020. 12. 24. 21:29
nodejs로 서버를 만들 때 유용한 웹 애플리케이션 프레임 워크. 사실상 nodejs의 표준 서버 프레임워크라 봐도 무방하다. 몇몇 함수에 대해서 알아보자. listen 첫번째 인자로 포트 번호를 받고 두번째는 콜백 함수다. 몇번 포트에 서버를 만들 것인지 정하는 함수다. const express = require("express") const app = express() ... app.listen(3000, () => { console.log('Server is up on port 3000') }) get, post 외부로부터 http GET, POST 요청을 처리 할 수 있다. 콜백함수에서는 요청 인자와 응답 인자를 받으며 응답 인자를 이용해 값을 전달 할 수 있다. app.get('', (req,..
-
debugger개발/nodejs 2020. 12. 24. 20:58
nodejs 도 android studio 나 jetbrain 처럼 강력한 디버깅 툴을 지원한다. 이번 포스트에서는 간단한 사용법을 정리해본다. 1. 코드 내에 중단점 넣기 작업을 중단하고 싶은 특정 위치에 debugger 라는 코드를 끼워 넣는다. nodejs 기본 라이브러리기 때문에 별도의 module 추가는 필요 없다. const fs = require('fs') const chalk = require('chalk') const addNote = (title, body) => { const notes = loadNotes() const duplicateNote = notes.find((note) => note.title === title) debugger if (!duplicateNote) { no..
-
useContext개발/react 2020. 12. 22. 21:09
useContext를 사용하면 하위 컴포넌트에서도 상위 컴포넌트에서 전달하는 값을 공유 받을 수 있다. props를 통해서 전달하지 않고 동일한 Context를 넘겨 받은 인자를 통해서 공유가 가능하다. 이 함수를 이용해 state 값과 이를 업데이트 하는 dispatch 함수를 컴포넌트끼리 공유 할 수 있다. 1. Context 만들기 하위 컴포넌트에서 공통적으로 공유할 수 있는 React Context를 만든다. import React from 'react'; const NotesContext = React.createContext() export { NotesContext as default } 2. Context 공유하기 공유를 시작하려는 가장 상위 컴포넌트에서 태그를 씌워준다. value 안에 ..
-
useReducer개발/react 2020. 12. 22. 20:59
useReducer는 useState랑 비슷하나 state 업데이트 작업을 담당하는 reducer를 직접 넣어 줄 수 있다는 점이 다르다. 아래 코드에서 주석으로 처리된 useState 코드는 두번째 인자로 state 값을 업데이트 하는 작업을 일괄 담당했는데, useReducer를 사용하면 커스텀 reducer를 추가할 수 있어 action의 타입에 따라서 다른 행동을 취하도록 할 수 있다. useReducer도 useState처럼 리턴 값은 배열이며 첫번째 인자는 state 값이고 두번째 인자는 reducer에 액션을 보낼 수 있는 dispatch 함수다. 값을 업데이트 할 때는 dispatch 함수에 action 을 설정해서 업데이트 한다. import React, { useEffect, useRe..
-
useEffect개발/react 2020. 12. 21. 20:27
리액트의 useEffect 라이브러리는 컴포넌트나 state에 변화가 생길 때 호출되는 함수다. 두개의 인자를 받는데 첫째 인자는 변경시 호출할 콜백함수고 두번째 인자는 상태를 변경을 감지할 state를 설정한다. state를 별도로 설정하지 않으면 componentDidUpdate, componentDidMount랑 동일한 역할을 하게 된다. const NoteApp = () => { const [notes, setNotes] = useState([]) const [title, setTitle] = useState('') const [body, setBody] = useState('') useEffect(() => { console.log('load data') const notesData = JSON..
-
useState개발/react 2020. 12. 21. 20:14
useState는 react 에서 비교적 최근에 나온 state 관리 라이브러리다. 기존에는 컴포넌트 생성할 때 state로 두고 싶은 변수들을 하나의 오브젝트로 관리했다면 useState 라이브러리를 사용해서 변수 별로 나눠서 선언할 수 있다. const NoteApp = () => { const [notes, setNotes] = useState([]) const [title, setTitle] = useState('') const [body, setBody] = useState('') useState 인자로 object를 받는데 이 값은 state의 초기 값이다. 배열, 정수형 인자, 문자열 모두 가능하다. 리턴 값으로는 길이가 2인 배열을 내놓는데 첫번째는 state 변수 값이고 두번째 값은 st..
-
connect개발/react 2020. 12. 20. 11:08
connect 함수는 리액트 앱의 하위 컴포넌트에서 redux store를 접근하는 것을 가능하게 해주는 역할을 한다. 이 함수를 이용해서 컴포넌트 단에서 redux store에 접근하고 액션을 호출 할 수 있게 된다. 이번 포스트에서는 간단한 예제로 connect 함수를 통해 redux store를 사용하는 방법을 다뤄보려고 한다. 0. 준비작업 connect 함수 소개를 위해 예제와 텍스트와 숫자를 담당하는 redux를 만들었다. BlogStore.js import { createStore, combineReducers } from 'redux'; const textReducerState = { text: '', name: 'textReducer' }; const textReducer = (state..
-
react router개발/react 2020. 12. 17. 19:52
react 에서는 react-router-dom 라이브러리를 통해 들어 오는 주소 별로 별도의 페이지를 보여줄 수 있는 라우팅 기능을 제공한다. 리액트의 특성에 맞게 이 라이브러리는 어떤 페이지로 진입 했을 때 어떤 페이지를 보여 줄 것인지를 컴포넌트 단위로 뽑을 수 있다. 1. 라이브러리 임포트 리액트와 필요한 라이브러리를 임포트 한다. import React from 'react'; import { BrowserRouter, Route, Switch, Link, NavLink } from 'react-router-dom'; 2. Route const AppRouterExample = () => ( (This is DashboardPage)} exact={true} /> (This is Create P..