'Javascript' 카테고리의 글 목록 (2 Page)

[React] 리액트 라우터와 관련 Hooks 정리

2022.12.14

- 라우터 개념이해 + Link 개념 - restful route 개념 이해 - react hook 중에서 useNavigate, useParams, useSearchParams이해 Route는 경로란 뜻이다. 웹페이지를 여러개 만들고, 이 각각의 웹페이지를 가기 위한 경로가 필요하다. 설치 명령어 npm install react-router-dom BrowserRouter 다른 창의 URL에 대한 변경 사항을 추적하는 데 사용할 수도 있다 import * as React from "react"; import * as ReactDOM from "react-dom"; import { BrowserRouter } from "react-router-dom"; ReactDOM.render( , root ); R..

Javascript/Node.js

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

2022.12.13

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 ..

Javascript/Node.js

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

2022.12.13

포스팅 (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; ..

Javascript/next.js

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

2022.12.12

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

Javascript/Node.js

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

2022.12.12

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

Javascript/React와 Node 같이 때려잡기

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

2022.12.10

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..

Javascript/next.js

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

2022.12.10

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 ..

Javascript/Node.js

[Node.js] (6) Single Thread, Event Loop & Blocking Code

2022.12.09

싱글스레드 (Single JavaScript Thread ) NodeJs는 하나의 JavaScript 스레드만 사용한다. 스레드는 쉽게 말해 운영 체제에서의 프로세스로 하나의 스레드만 사용한다면 어떻게 여러 요청을 다루는지의 궁금해진다. 각 요청마다 스레드를 지정할 수 없으니, 결국 모두 하나의 스레드에서 실행될 것. 이벤트루프 ( Event Loop ) 이벤트 루프는 Node.js 가 시작하면 프로그램에 의해 자동으로 시작된다. 이벤트 루프는 이벤트 콜백을 다룬다. 특정 이벤트가 일어났을 때 바로 이벤트 루프가 해당 코드를 실행하는 것이다. 모든 콜백을 파악하고 있어서 코드를 실행한다. 빨리 끝낼 수 있는 코드를 포함한 콜백만을 다룬다. 뭐니뭐니해도 원본 도큐먼트가 최고 아니겠는가 : https://n..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (5) react one-way data flow + 위치 도시 기반 날씨 앱 계속 making

2022.12.09

포스팅 위치 도시기반 날씨앱(4)에 이은 마무리 작업 App.js가 모든 로직을 다 갖고 있고, 컴포넌트에 보내주는 식으로 작업을 진행해보도록 한다. react one-way data flow 때문이다. 컴포넌트 형제끼리 데이터를 주고 받기가 상당히 어렵다. 리액트 특징 one-way reactive data flow https://tkssharma.gitbook.io/react-training/day-01/react-js-3-principles/one-way-data- The foundation of understanding component relationships in React and parent component hierarchy… Props stands for properties. It is ..

Javascript/React와 Node 같이 때려잡기

[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 )

2022.12.07

1. 기능 명세서 //1. 앱이 실행되자마자 현재 위치 기반의 날씨가 보인다. //2. 날씨 정보에는 도시, 섭씨, 화씨 날씨 상태 //3. 5개의 버튼이 있다 (1개는 현재 위치, 4개는 다른 도시) //4. 로딩 스피너 기능 추가 2. weather api https://openweathermap.org/api Weather API - OpenWeatherMap Please, sign up to use our fast and easy-to-work weather APIs. As a start to use OpenWeather products, we recommend our One Call API 3.0. For more functionality, please consider our products, ..

내 블로그 - 관리자 홈 전환	`Q` `Q`
새 글 쓰기	`W` `W`

글 수정 (권한 있는 경우)	`E` `E`
댓글 영역으로 이동	`C` `C`

이 페이지의 URL 복사	`S` `S`
맨 위로 이동	`T` `T`
티스토리 홈 이동	`H` `H`
단축키 안내	`Shift` + `/` `⇧` + `/`

Javascript

[React] 리액트 라우터와 관련 Hooks 정리

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

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

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

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

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

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

[Node.js] (6) Single Thread, Event Loop & Blocking Code

[React + Node 같이 때려잡기] (5) react one-way data flow + 위치 도시 기반 날씨 앱 계속 making

[React + Node 같이 때려잡기] (4) 위치 도시 기반 날씨 앱 (api 연결 기초작업, UI작업 )

티스토리툴바

단축키

내 블로그

블로그 게시글

모든 영역