본문 바로가기

분류 전체보기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.

티스토리툴바