전체 글

[Node.js] (8) 개발 편의 올려! npm start에 nodemon 적용하여 저장시 자동서버 재시작 설정하기!

package.json "start":"node app.js" 로 설정해주어 npm start만 해도 앱이 구동됨을 알려줌 + 시작점 js가 무엇인지 알려줄 수 있음 { "name": "node-test", "version": "1.0.0", "description": "", "main": "app.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "start":"node app.js" }, "author": "", "license": "ISC" } "start-server":"node app.js" 식으로 명명하는 것은 가능한데 start는 특수한 명령어이고 start-server는 사용자 정의 명령어이므로 npm run ..

[Node.js] (7) Node 모듈 시스템 사용

포스팅 (6)까지 완성했던 프로젝트는 app.js 안에서 코드가 길게 나열되어 있는 형식이었다. 노드의 모듈 시스템을 활용해서 requestHandler를 만들어달고, app.js를 가볍게 바꾸어본다. app.js : 단 4줄! const http = require('http'); const routes = require('./routes'); const server = http.createServer(routes); server.listen(3000); routes.js : app.js에 주렁주렁 달려있던 응답, 요청, 파일시스템 로직을 전부 옮겨주었다. module.exports = requestHandler; { const url = req.url; const method = req.method; ..

[Next.js] Next.js는 무엇이고, 왜 사용하는가?

홈페이지 대문에는 프로덕션용 React 프레임워크 라고 써져있는 Next.js React 개발자에게, NextJS의 사용이 어떻게 도움이 되는지 알아보자 React는 사용자 인터페이스 구축을 위한 JavaScript 라이브러리이다. ReactJS는 서드 파티 패키지로 프론트엔드 프로젝트에 추가되는 라이브러리이다. React를 사용해 상호 작용이 가능한(개발자 입장에서 복잡한) 사용자 인터페이스를 만들 수 있다. 서버사이드 렌더링 : 클라이언트 측이 아닌 서버 측의 페이지 상에 렌더링되는 콘텐츠 처리를 의미함 해당 페이지가 서버에서 미리 렌더링이 되는 즉, 요청이 서버로 도달할 때 데이터 페칭이 서버 측에서 처리된다면 모든 내용을 포함한 페이지가 사용자와 검색 엔진 사용자들에게 제공될 수 있다. 그러면 사..

[Postman] Rest APIs 개발을 위한 포스트맨 셋업

Get 요청 은 위와 같이 작성한다. 작성해둔 변수 base는 {{base}}

[React + Node 같이 때려잡기] (6) npm 리액트 로딩스피너 + 위치 도시 기반 날씨 앱 완성

npm 리액트 로딩스피너 https://www.npmjs.com/package/react-spinners react-spinners A collection of react loading spinners. Latest version: 0.13.7, last published: 7 days ago. Start using react-spinners in your project by running `npm i react-spinners`. There are 714 other projects in the npm registry using react-spinners. www.npmjs.com npm install --save react-spinners Example import { useState, CSSPrope..

[Next.js] 프로젝트 만들어서 실행해보기

npm init npm i next@9 npm i react react-dom package.json을 아래와 같이 변경 { "name": "nodebird", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "next", "build": "next build" }, "author": "", "license": "ISC", "dependencies": { "next": "^9.5.5", "react": "^16.14.0", "react-dom": "^16.14.0" } } 폴더 pages 만들어주고 그 안에 파일 index.js 만들기 index.js const Home = () = { return( Hello ..

[클린코드] 2장 의미 있는 이름

의도를 분명하게 밝혀라 문제는 코드의 단순성이 아니라 코드의 함축성이다. public List getThen() { List list1 = new ArrayList(); for(int[] x : theList) if(x[0] == 4) lisst1.add(x); return list; } 위 코드의 맥락이 코드 자체에 명시적으로 드러나지 않는다. 1. theList에 무엇이 들었는가? 2. theList에서 0번째 값이 어째서 중요한가? 3. 값 4는 무슨 의미인가? 4. 함수가 반환하는 리스트 list1은 어떻게 사용하는가? 지뢰찾기 게임이었다면, 1. 게임판의 각 칸은 단순 배열 2. 칸 상태 3. 깃발이 꽂힌 상태 이렇게 각 개념에 이름만 붙여도, 코드의 단순성은 변하지 않았고 함수가 하는 일을 이..