본문 바로가기

전체 글82

1. 백엔드 연결 리액트와 Node.js를 연결해서 백엔드에 데이터 가져오기 CORS : 교차 출처 리소스 공유를 뜻하며, 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 -백엔드- controllers - (...) //Get all contact, /contact const getAllContact = asynchHandler(async (req, res) => { const contact = await Contact.find(); const users = [ //임시 데이터 { name: "John", email: "john@aaa.bbb", phone: "123456789" }, { name: "Jane", email: "jane@aaa.bbb.. 2024. 3. 14.
15. EJS 정적인 콘텐츠 : 내용이 바뀌지 않는 콘텐츠 동적인 콘텐츠 : 내용이 바뀌는 콘텐츠 템플릿 파일 : 데이터베이스에서 가져온 데이터 중 어떤 값을 어느 위치에 넣을지 미리 틀을 만들어 놓은 것 템플릿 엔진 : 데이터베이스에서 가져온 동적인 데이터를 템플릿 파일에 연결해 주는 것 EJS : 템플릿 파일 안에서 동적인 콘텐츠 부분을 자바스크립트로 처리하는 템플릿 엔진 -view engine : 뷰에서 사용할 템플릿 엔진을 설정 -views : 템플릿 엔진이 템플릿 파일을 어디에서 찾을 지 경로를 설정 //ejs 설치 >> npm install ejs : 다른 곳에서 받은 값을 넣을 때 사용 : 자바스크립트를 추가 : HTML 코드를 넣음 , controllers - , views - : 템플릿 파일을 이용한 .. 2024. 3. 13.
14. CRUD CRUD : Create(POST), Read(GET), Update(PUT), Delete(DELETE) controllers - : 데이터 추가 ※create() : 데이터베이스에 새로운 도큐먼트를 추가 const asynchHandler = require("express-async-handler"); const Contact = require("../models/contactModel"); //contactModel.js 모델을 가져옴 (...) //Post all contact, /contact const createContect = asynchHandler(async (req, res) => { console.log(req.body); const { name, email, phone } = re.. 2024. 3. 12.
13. RESTful API 애플리케이션 : 특정 기능을 제공하는 프로그램 API : 둘 이상이 컴퓨터, 애플리케이션 간에 자료를 어떻게 주고받는 지를 지정 RESTful API : REST를 명심해서 개발한 API -REST : HTTP 프로토콜을 활용해서 자료의 현재 상태를 주고 받는 것 디자인 아키텍처 : 코드를 읽기 쉽고 관리하기 편하도록 기능이나 역할에 따라 여러 파일로 나눈 뒤 연결해서 사용하는 것 MVC : 모델(Model), 뷰(Vue), 컨트롤러(Controller) 세 영역으로 나누어 애플리케이션을 구성 -모델 : 애플리케이션을 처리할 대상으로, 자료를 저장/검색/수정하는 함수 -뷰 : 처리 결과를 화면을 통해 시각적으로 보여줌 -컨트롤러 : 모델과 뷰 중간에 위치하면서 요청에 따라 모델이나 뷰를 수정하는 역할, .. 2024. 3. 11.
12. 몽고DB, 스키마 데이터베이스 : 여러 사람이 공유하여 사용할 목적으로 체계화해서 통합, 관리하는 데이터의 집합 -관계형 데이터베이스 : 자료의 구조를 행과 열로 구분해서 표 형태로 관리, SQL 데이터베이스라고도 함 -NoSQL 데이터베이스 : SQL을 사용하지 않고, 자료를 문서 형태로 저장하는 JSON 형식 데이터베이스 몽고DB : NoSQL 데이터베이스 -도큐먼트 : 자료를 저장한 문서, 컬렉션들의 집합 -아틀라스 : 클라우드에 몽고DB를 올려놓고 사용하는 서비스 -클러스터 : 여러 데이터베이스 서버를 연결해 놓은 서버 그룹 MongoDB for VS Code : Visual Code Studio에서 몽고DB를 사용할 수 있는 확장 몽구스 : MongoDB를 Node.js로 사용할 수 있도록 하는 확장 모듈 dot.. 2024. 3. 8.
11. 미들웨어 미들웨어 : 요청과 응답 중간에서 요청을 처리하거나 응답을 수정하는 함수 -요청 객체나 응답 객체의 속성을 가져오거나 수정하고, 함수 내에서 종료할 수 있음 -함수 안에서 응답이 종료되지 않고 다음 함수로 넘길 수 있음 -작성하는 순서가 중요 바디파서 : 요청 본문에 내용을 프로그램에서 사용할 수 있는 형식으로 변환 , routes - : 라우터 객체 생성, 라우터를 외부 파일로 관리하기 ※.Router() : 라우터 객체 ※.route() : 라우터 지정 ※.use([경로], 미들웨어) : 실행할 미들웨어를 등록 //app.js const express = require("express"); const app = express(); app.get("/", (req, res) => { res.status.. 2024. 3. 6.
10. Express Express : 노드에 기반한 백엔드 프레임워크 nodemon : 코드 변경 시 서버를 종료하고 재시작하지 않아도 새로고침으로 변경 사항이 적용되는 패키지 -package-lock.json : 애플리케이션에서 사용하는 여러 패키지 간의 의존성을 기록 선더 클라이언트 : VS Code 안에서 서버 실행 결과를 확인하는 확장 : nodemon으로 서버를 실행 ※.get() : GET 메소드 지정하는 함수 ※res.status() : 응답 상태 코드를 지정하는 함수 ※res.send() : 괄호 안에 내용을 화면에 표시하는 함수 const express = require("express"); //express 패키지를 가져옴 const app = express(); //app 변수로 express 기능 사용.. 2024. 3. 3.
9. Node 비동기 처리 스레드 : 하나의 작업이 실행되는 최소 단위 -자바스크립트, 노드는 싱글 스레드 언어 -자바를 비롯한 대부분의 백엔드 프로그래밍 언어는 멀티 스레드 언어 블로킹 I/O : 코드 실행을 중간에 막는 것으로, 동기 처리 했을 시 발생 논블로킹 I/O : 비동기 처리를 했을 시 코드 실행이 중간에 막힘 없이 처리하는 것 -I/O : Input(입력) / Output(출력)을 나타냄 이벤트 루프 : 비동기 처리 작업을 콜백 큐에 저장했다가 콜 스택이 비면 하나씩 꺼내 처리하는 방식 -콜 : 바로 실행하려는 함수들 -콜 스택 : 콜이 스택 형식으로 모여 있는 것, 비동기 처리는 할 수 없음 -콜백 큐 : 콜백 함수가 큐 형태로 저장되는 공간, 비동기 처리를 실행 libuv : V8 엔진에서 비동기 처리를 할 수 .. 2024. 3. 1.

티스토리툴바