🪢node 20

mern 로그인기능(2)(node실습)[라우팅 분해하기]

req.body는 요청 본문에 포함된 데이터를 다루며, 주로 POST 및 PUT 요청에서 사용됩니다. req.params는 URL 경로에 포함된 매개변수 값을 다루며, 동적 라우팅에서 유용하게 사용됩니다. 윗 코드와 주석모양은 같은 결과를 출력하게 된다. avaScript ES6에서는 객체의 속성 이름과 변수 이름이 같을 때, 속성 이름을 생략할 수 있는 단축 속성명(shorthand property names)을 사용할 수 있습니다 // Respond with the note res.json({ note }); //res.json({ note:note }); module.exports = { fetchNotes, fetchNote, createNote, updateNote, deleteNote, }; ..

nodemon을 통해 서버 변경사항 바로 적용가능

예전에 node.js 공부할 때는 코드 바뀔 때마다 다시 서버를 끄고 실행해줫어야 했는데 지금은 안그러네... 왜일까? 그냥 코드 바뀌면 다시 서버가 재실행 되면서 적용된다. 이유는 그저 외국인 코더가 설치하라고 한 라이브러리 Nodemon 덕분이었다. Nodemon?? nodemon은 Node.js 애플리케이션을 개발할 때 사용되는 유틸리티로, 파일 시스템의 변경을 감지하고, 변경이 감지될 때마다 자동으로 Node.js 애플리케이션을 재시작해 줍니다. 이를 통해 개발자는 코드를 변경할 때마다 수동으로 서버를 중지하고 재시작할 필요 없이, 변경사항을 빠르게 테스트하고 반영할 수 있습니다. nodemon은 npm을 통해 쉽게 설치할 수 있으며, 프로젝트의 의존성으로 추가하거나 글로벌로 설치하여 사용할 수 ..

mern 로그인 관리기능(1)(node실습)[rest api, req.body란?]

rest api를 위한 환경 조성 1. 환경조성 express mongoose dotenv nodemon 설치 2. npm run dev로 실행 "dev" : "nodemon server.js", 3. mongoose doc 설명대로 db와 연결후, model 생성. https://mongoosejs.com/docs/index.html Mongoose v8.1.3: Getting Started Getting Started First be sure you have MongoDB and Node.js installed. Next install Mongoose from the command line using npm: npm install mongoose --save Now say we like fuzzy k..

api 가져오는 연습

오늘 데이터 api 가져오기 학교 실습에서 처참히 패배했다. 그래서 절치부심해서 그래도 명색히 프론트엔드 개발자 준비중인데 연습을 해보려한다. 아래 사이트는 fetch 를 통해서 api를 가져오는 코드를 나열한 사이트이다. 그 다음 사이트들은 여러 api와 그 데이터 형식 예시를 만나볼 수 있는 사이트이다. 맨 아래 링크는 async ,await 사용 예시 설명 블로그. 연습해보자. ㅎㅎ 다음 주에 응용해야된다. https://jsonplaceholder.typicode.com/guide/ JSONPlaceholder - Guide Guide Below you'll find examples using Fetch API but you can JSONPlaceholder with any other langu..

그냥 공부하다 궁금해서 찾아봄(csr, ssr)

아래는 챗gpt에 질문하고 얻은 대답을 기록한 글입니다. (아래 링크에 직접 구현해보고 비교해본 글이 있으니 확인.) https://elecch.tistory.com/571 React의 상태관리(데이터 변경)[csr ,ssr 코드 비교를 통한 이해] 결론. csr [ 클라이언트에서 부모 컴포넌트가 상태관리(db관리) / 바뀌는상태 값만 관리 대상이고, html 요소 즉 jsx 들은 안바뀌고 가상돔이 차이나는 상태만 새로 렌더링] ssr[ 서버에서 db관리 , db값 elecch.tistory.com 나의 질문 지금 내가 공부하면서 느낀게 node.js에서 필요해서 react가 나온것 같은데.. 이렇게 느낀이유가 기존에 ssr로 화면딴을 구성하다가 뭔가 html에 js를 끼워넣기가 모종의 이유로 좀 그래서..

Thunder client 사용해보기 [get , post , put, delete]

미들웨어의 bodyParser이용하였다. get : get은 서버의 내용을 조회, 검색하는데에 많이 사용된다. 문제가 있다면 url 상에 그 정보가 노출된다는것. (이건 나중에 다루겠다.) const express = require('express'); const bodyParser = require('body-parser') const app = express(); app.listen(52273, () => { console.log('http://127.0.0.1:52273') }) app.use(bodyParser.urlencoded({extended: false})); let userCounter = 0; const users = []; app.get('/user', (req, res) => { r..

bodyParser 정리하기

const bodyParser = require('body-parser') // 선언 app.use(bodyParser.urlencoded({extended: false})); // URL-encoded 형태의 요청 본문을 파싱할 수 있게 설정 extended : true or false ???? extended: false: querystring 라이브러리를 사용하여 URL-encoded data를 파싱합니다. 단순한 문자열과 배열만 지원합니다. 복잡한 객체 구조를 처리하는 데는 적합하지 않습니다. extended: true: qs 라이브러리를 사용하여 URL-encoded data를 파싱합니다. 복잡한 객체 및 배열 구조도 지원합니다. 보다 복잡한 데이터 구조를 처리하는 데 사용됩니다. 대부분의 경우..

express.js (get, post, nunjuck 이해해보기)

1. get.js express 모듈을 활용하여 get을 구현한 모습니다. const express = require('express') const app = express(); const courses = [ {id: 1, game: '카스', maker: '고대발잡이' }, {id: 2, game: '카스', maker: '채리콥터' }, {id: 3, game: '디지몬rpg', maker: '윤팡구' }, {id: 1, game: 'non', maker: '김계정' }, ] app.get('/', (req, res) => { res.send('Hello park') }) app.get('/course', (req, res) => { res.send('courses') }) app.get('/cou..

라우팅(Routing)

페이지 라우팅은 클라이언트 요청에 적절한 페이지를 제공하는 기술. request는 클라이언트측의 요청내용을 담는 공간 response는 서버가 받아서 다시 전송할 내용을 담는 공간 const express = require('express') const app = express(); app.get('/page/:id', (request, response) => { const id = request.params.id; response.send(`${id}`) }) app.listen(52773, () => { console.log('http://127.0.0.1:52773') }) 원하는 페이지에 원하는 글자가 다시 서버로부터 전송되어 출력된 모습을 확인할 수 있다. :id 는 토근이다. 왜 'page/i..

request

1.request 정의 및 특징 request는 Node.js를 위한 간단한 HTTP 클라이언트 라이브러리입니다. 이 라이브러리를 사용하면 Node.js 애플리케이션 내에서 HTTP 및 HTTPS 요청을 손쉽게 보낼 수 있습니다. request 라이브러리의 주요 특징: 1.간결한 API: URL만 제공해도 기본 GET 요청을 보낼 수 있습니다. 2.다양한 요청 타입 지원: GET, POST, PUT, DELETE 등의 HTTP 메서드를 지원합니다. 2.코드실행 사전작업: npm install request 아래의 코드를 통해 naver의 html 코드정보를 요청해서 불러왔다. const request = require('request'); const url = 'https://naver.com/.html..