본문 바로가기

전체 글

 (286)
Promise 이해하기 function getData(data) { return new Promise((resolve, reject) => { // 새로 생성된 Promise는 pending(대기) 상태가 된다. // .. resolve(data); // 여러 작업이 이뤄진 후 resolve나 reject를 만나면 각각 fulfilled(성공)이나 rejected(실패) 상태가 된다. }); } getData(1) // resolve나 reject로 settled 상태가 되면 then으로 넘어간다. // data로 resolve된 데이터를 받을 수 있다. .then(data => { // then에서 새로운 Promise를 자동을 생성하게 되고 return 값이 곧 위의 resolve와 같다. return data; }) //..
Redux 기본 사용 방법 redux는 크게 action, store, reducer로 구분된다. store를 중심으로 돌아간다고 생각하면 쉽다. npm i redux 명령어로 redux를 설치한 뒤 먼저 store 모듈부터 만들자. const { createStore } = require('redux'); const reducer = require('./reducer'); const store = createStore(reducer); module.exports = store; // store.js로 저장 store를 만들 때 reducer라는 함수를 넣는 것을 볼 수 있다. store에 저장된 값인 state를 변경할 때 이 함수를 사용하기 때문이다. 이를 위해 reducer 모듈도 만들자. let lastId = 0; // ..
immutable하게 데이터를 수정하기 위한 라이브러리 - immer 사용법 리덕스는 데이터를 immutable 하게 수정한다. 때문에 데이터를 수정하려면 Object.assign이나 spread operator를 사용해야 한다. 그러나 객체 안의 객체까지 deep copy를 하려면 코드가 지저분해질 수밖에 없다. const person = { name: 'socratone', address: { country: 'korea', city: 'seoul' } }; const updated = { ...person, address: { ...person.address, // 윗줄의 address가 같은 객체를 가리키지 않도록 city: 'nonsan' // city를 nonsan으로만 바꿨다. } }; deep copy를 하기 위해 객체를 거의 새로 쓰다시피했다. 이런 복잡함을 줄이..
node.js에서 크롬 디버거와 콘솔 사용하기 node index.js를 실행할 때 다음처럼 --inspect-brk를 추가해준 뒤 node --inspect-brk index.js 크롬에서 F12 키를 눌러 콘솔창을 열고 못 보던 노드 아이콘을 클릭하면 시작부터 break가 걸린 채로 디버거가 작동되고 있음을 볼 수 있다. 여기서 원하는 곳에 break point를 설정해서 버그를 고칠 수 있다. 추가적으로 서버를 가동할 경우 --inspect를 써서 서버를 실행하면 node --inspect server.js 서버에서 사용한 콘솔 로그 등을 위와 마찬가지 방법으로 크롬에서 확인할 수 있다.
리액트를 위한 비쥬얼 스튜디오 익스텐션 - Simple React Snippets 비쥬얼 스튜디오에서 Simple React Snippets라는 익스텐션을 깔면 리액트 작업 중 js 파일에서 간단하게 컴포넌트 프리셋을 불러올 수 있다. imrc를 입력하면 아래처럼 react를 import하고 import React, { Component } from 'react'; cc는 class 컴포넌트를, sfc는 function 컴포넌트 초기 코드를 불러 온다.
express에서 get, post 메소드와 use 메소드 이해하기 express로 구현한 서버를 실행한 뒤 서버에 요청이 들어오면 요청이 들어올 때마다 위에서부터 코드 하나씩을 거치고 요청에 따른 응답이 완료됐을 때 사이클을 마친다. var express = require('express'); var app = express(); app.get('/', function(req, res) { res.send('hello world'); }); 위의 코드로 구현된 서버에서 기본 url로 get 요청을 받으면 4번째 줄의 get으로 들어와 클라이언트에 응답으로 hello world를 반환한다. 이렇듯 get 메소드는 GET 요청이면서 요청 url이 첫 번째 인자에 해당할 경우 두 번째 인자의 함수를 실행하고 res.send와 같은 응답 메소드로 사이클을 마친다. 다만 응답으..
리액트 라우터를 이용한 리액트 프로젝트 기본 설정 방법 1. 다음을 입력하면 리액트 개발 환경에 필요한 기본적인 것들이 갖춰진 프로젝트 폴더가 생성된다. npx create-react-app 폴더이름 https://create-react-app.dev/docs/getting-started 2. 다음을 입력해서 리액트 라우터를 설치한다. npm install --save react-router-dom 이제 라우터를 이용해 리액트에서 작성한 결과물을 우리가 만들 서버에서 불러올 수 있다. https://create-react-app.dev/docs/installing-a-dependency 3. src/App.js의 내용을 아래 페이지의 Basic Example 링크의 코드로 바꾸는 게 시작하기 좋다고 한다. https://create-react-app.dev/..
express에서 POST 사용하는 방법 const express = require('express'); const app = express(); app.use(express.json()); // 미들웨어가 들어온 데이터를 json으로 바꿔준다. const datas = []; app.post('/api/datas', (req, res) => { const data = { id: datas.length + 1, name: req.body.name // { name: 'socratone' } }; datas.push(data); // { id: 1, name: 'socratone' } res.send(data); // 보통 보낸 데이터가 어떤 것인지를 클라이언트에 알려준다. }); app.listen(3000, () => console.log('..

티스토리툴바