핸들러(handler) HTTP request가 날아오면 자동으로 호출되는 메소드 ( 스프링 : 컨트롤러) Node, app.HTTPMETHOD(path, 핸들러) 상태코드 2** : 성공 조회/수정/삭제 성공 : 200 등록성공 : 201 4** : 클라이언트 잘못 요청한 연산(처리)를 할 때 필요한 데이터(req)가 덜 왔을 때 :400 찾는 페이지(리소스)없음 즉 url에 맞는 api 없음 : 404 5** : 서버 잘못 서버가 죽었을 때(서버가 크리티컬한 오류를 맞았을 때) : 500 예외처리 이번에는 404와 같은 status를 출력해주도록 예외처리 해보겠습니다. 개별조회에서 fruits배열에 없는 id값을 요구하면 404를 출력하도록 하였습니다. res.status(상태코드).send("메시지..
이전시간에 get과 post메소드를 사용해봤었는데 이번에는 Delete,put메소드를 사용해보겠습니다. Delete(개별삭제) 3) 개별유튜버 "삭제" -> DELETE, /youtubers/:id req : params.id res : "channelTITLE님, 아쉽지만 다음에 또 뵙겠습니다." url에서 id를 받아서 id를 이용해 db의 값을 삭제해주었습니다. app.delete('/youtubers/:id',(req,res)=>{ const id = Number(req.params.id); const channelTitle = db.get(id).channelTitle; db.delete(id); res.json({ message:`${channelTitle}님, 안녕` }) }) 결과를 확인해..
이전에 get메소드만만 사용했었는데 이번에 post메소드를 사용 해보겠습니다. 이전포스팅에서 사용했던 get코드에 post를 사용해보겠습니다. const express = require('express') const app = express() const port = 1017 //get메소드 app.get('/', (req, res) => { res.send('Hello World!') }) //post메소드 app.post('/test', (req,res)=>{ res.send('Hello Post!!') }) app.listen(port, () => { console.log(`Example app listening on port ${port}`) }) 그러고나서 /test로 접속해보면 아무런 일이 일..
Express를 이용한 간단한 실습들을 해보면서 한번 사용해봤는데 이번에는 Express의 구조를 알아보겠습니다. https://expressjs.com/ko/ Express - Node.js 웹 애플리케이션 프레임워크 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크 $ npm install express --save expressjs.com Exprees 공식홈페이지에 들어가보면 Express란 Node.js를 위한 빠르고 개방적인 간결한 웹 프레임워크라고 나와있습니다. Web Application : Express는 웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js웹 애플리케이션 프레임워크 입니다. API : 자유롭게 활용할 수 있는 많은 HTT..
화면구성 메인화면 대쉬보드(Carousel) 등록된상품 최근본상품 하단(Footer) 카테고리 로그인화면 회원가입 화면 비밀번호 찾기화면 마이페이지화면 회원정보수정화면 내 게시물 조회 좋아요 대여해주는상품 쪽지함 쪽지상세화면 쪽지함에서 거래하기 화면 상품등록 상품상세화면 상품상세 댓글, 대댓글 상품에 대한 쪽지보내기 검색화면 카테고리 클릭 화면 프로필조회 신고화면 관리자페이지
저번포스팅에서는 req.params을 이용해 / 뒤의 값을 받아서 출력해줬습니다. const express = require('express') const app = express() app.listen(3000) app.get('/products/:id',function(req,res){ res.json({ num:req.params.id }); }) 쿼리스트링 유튜브 링크와 같은 다른 링크들을 살펴 보면 아래처럼 ? 뒤에 어떠한 값들이 있는데 이걸 쿼리라고 부릅니다. https://www.youtube.com/watch?v=ChaOUGzpQqo req.query를 사용하면 ? 뒤에 값을 받아올 수 있습니다. app.get('/watch',function(req,res){ const q = req.qu..
설치 npm install express 출력 기존에 http를 이용하여 웹페이지에 Hello Node.js를 보여주는 코드입니다. let http = require('http'); function onRequest(request,response){ response.writeHead(200,{'Content-Type':'text/html'}); response.write('Hello Node.js'); response.end(); } http.createServer(onRequest).listen(8888); 이번에는 express를 적용하여 출력해보겠습니다. 3000번포트로 접속을 해보면 const express = require('express') const app = express() // GET ..
진행하고 있는 프로젝트에서 react-query를 도입하려고 합니다. 그 이유와 어떻게 적용했는지 살펴보고 최종적으로 사용했을 때와 사용하지 않았을 때의 성능까지 비교해보겠습니다. 먼저 리액트쿼리에 대해 간단하게 알아보겠습니다. react-query? React-Query는 데이터를 불러오고 캐싱하며, 서버 데이터와의 동기화 및 업데이트 하는 작업을 개발자가 쉽고 간단하게 할 수 있도록 도와주는 라이브러리 입니다. 즉 '비동기 로직을 쉽게 다룰 수 있게 해준다'라고 이해하면 될 것 같습니다. 데이터 캐싱기능을 잘 사용하기 위해서는 리패치가 일어나는 조건과 옵션 2가지에 대한 이해가 필요합니다. stale : 사전적의미로 "신선하지 않은" 리액트 쿼리는 기본적으로 캐싱된 데이터를 stale한 상태로 여깁니..
https://myeongsu0257.tistory.com/215#%EC%8B%A4%ED%96%89%ED%99%94%EB%A9%B4-1 React - Carousel설계 ( useRef ) Carousel 도입이유 현재 프로젝트를 진행하면서 페이지가 너무 정적인 경향이 크다고 생각했습니다. 그래서 동적인요소를 추가하고자 했고 그 중에서도 대쉬보드에 Carousel을 도입하여 메인페이지 myeongsu0257.tistory.com 지난번 포스팅에서는 사용자가 버튼을 클릭했을경우에만 슬라이드가 됩니다. Carousel을 사용하는 유명한 웹사이트들을 보면 사용자가 클릭하지 않아도 자동으로 시간간격에 따라 슬라이드 되는걸 볼 수 있습니다. 따라서 이번에는 일정시간이 지날때마다 Slide되게 해주겠습니다. 설계 ..
Carousel 도입이유 현재 프로젝트를 진행하면서 페이지가 너무 정적인 경향이 크다고 생각했습니다. 그래서 동적인요소를 추가하고자 했고 그 중에서도 대쉬보드에 Carousel을 도입하여 메인페이지에 동적인 느낌을 주려고 했습니다. 현재 사이트 모습 현재 메인페이지의 모습입니다. 화면 중앙에 위치한 대시보드에 Carousel을 도입해 자동으로 대쉬보드가 전환되고 또한 사용자가 화살표를 클릭하면 원하는 대쉬보드를 보여줄 수 있게 구현하고 싶습니다. Carousel(캐러셀)이란? 캐러셀은 슬라이드쇼와 같은 방식으로 콘텐츠를 표시하는 UX구성요소입니다. 버튼을 눌러 옆으로 사진이 넘어가며 모션이 마치 회전목마와 비슷하다고 하여 붙여진 이름입니다. 캐러셀은 용도에 따라 자동재생되게 하거나, 사용자가 수동으로 넘..
지난번 포스팅에 이어 이번에는 Mariadb에 데이터를 저장하고 node.js에 db에 저장된 데이터를 출력해주겠습니다. 먼저 저는 docker에 maraidb를 설치하여 아래와 같은 테이블을 만들었습니다. node에 mysql설치 이전에 수행했던 폴더에서 터미널을 열어 npm install mysql --save 를 입력해줍니다. 그리고 설치가 완료되었으면 database라는 폴더를 하나 만들어줍니다. 다음 그 안에 connect폴더를 하나 만들어주고 또 그 안에 mariadb.js라는 파일을 하나 만들어줍니다. 다음으로 Mariadb랑 연결을 해주겠습니다. mariadb.js에 아래의 코드를 입력해줍니다. 여기서는 어떤 db에 접속할건지 정보를 입력해줍니다. const mariadb = require..
Docker가 탄생한 배경 기존, 로컬에서 개발해서 실 서버에 올릴 때 소스파일만 올리는 것으로는 문제가 있었다. js를 예로 든다면, js소스파일을 구동하기 위해서는 npm, node.js, 각종 Dependencies등을 설정해줘야한다. 개발자의 PC마다 서버마다 이 모든것들을 설치하는 것은 번거롭기도 하고, 오류의 발생원인이 되곤 한다. " 내 서버에 node.js가 있고 서버에도 node.js가 있으니 내 서버에서 개발한 js파일을 서버에 배포하면 자동으로 동작하겠지?" -> 배포 -> 에러발생 -> node.js의 버전이 맞지 않아서 에러 발생 즉 이러한 문제점들을 해결하기 위해 Docker가 탄생하였다 Docker란? 도커는 컨테이너 기술을 기반으로 한 일종의 가상화 플랫폼입니다. 가상화란 물..
Node.js란 Node.js는 자바스크립트를 스크립트 언어 이상으로 프로그래밍 언어 역할을 할 수 있도록 지원하는 플랫폼입니다. 다시말해 언어가 아니고 Node.js를 이용해서 자바스크립트로 백엔드를 구현할 수 있습니다. Node.js특징 음식점에 요리사가 한명일때로 비유 싱글 스레드 : 주문이 계속 밀려들어와도, 한명이 어떻게든 해야한다. 이벤트 기반 : 주문이 들어와야만 일을 한다.(주문이 없으면 일을 안함) 논블로킹 I/O : 한명이 일을 하는데, 요리를 순차적으로 x, 중간중간 비는 시간이 있으면, 다른 요리를 한다. HTTP 프로토콜 HTTP(HyperText Transfer Protocol) : 직역하면 파이퍼텍스트 전달 프로토콜이다. 하이퍼텍스트(Hyper Text)는 인터넷 사용자가 필요..
백엔드의 구조 웹서버의 역할 웹 서버(Web Server)는 정적 페이지에 대해 대응합니다. 동적 페이지에 대한 처리는 직접 처리하지 않고, 웹 어플리케이션 서버에게 전달합니다. 정적 페이지 : 화면의 내용/데이터 등의 변동이 없는 페이지( 회사소개, 회사연혁 등등) 동적 페이지 : 데이터 처리/연산을 통해 화면의 내용, 데이터가 변하는 페이지(공지사항 등) 따라서, 웹 서버의 임무는 대표적으로 2가지로 나눌 수 있다. 단순히 저장된 웹 리소스들을 클라이언트로 전달, 클라이언트로부터 콘텐츠를 전달받아 저장하거나 처리 사용자로부터 동적인 요청이 들어왔을 때 해당 요청을 웹 서버 자체적으로 처리하기 어렵기 때문에 해당 요청을 WAS(웹 어플리케이션 서버)에 전달 대표적인 웹 서버의 종류 : Apache, N..
Branch Switching 브랜치를 옮기는데 git checkout이라는 기존의 명령어가 있었습니다. 이 명령어가 너무 많은 기능을 가지고 있어 문제가 있었습니다. 한 명령어가 너무 많은 기능을 가지게 되면 객체지향에서 말하는 GOD Object와 같은 설계가 탄생할 수 있기 때문에 git 시스템은 버전업그레이드를 거치며 git switch라는 명령어를 만들게 되었습니다. checkout 브랜치 전환 : git checkout branch-name을 사용하면 다른 브랜치로 전환가능 커밋으로이동 : git checkout commit-hash을 사용하여 특정 커밋으로 이동가능 파일복원 : git checkout --file-name을 사용하면 특정 파일을 이전 커밋상태로 복원 가능 switch( 브랜치..
