개발 노트

AJAX(Asynchronous JavaScript And XML) 는 새로고침을 하지 않고도 url을 요청 할 수 있게 하는 비동기 통신이다. XMLHttpRequest 객체를 사용해서 통신을 할 수 있으며 이벤트가 있으면 이벤트 실행 시 데이터를 요청 할 수 있는 형태가 가능하다. ajax에는 new XMLHttpRequest 를 이용하는 방법이 있으며, 좀 더 발전된 fetch()를 이용하는 방법 , axios 를 이용하는 방법이 있다. const xhr = new XMLHttpRequest(); form.addEventListener("submit", (e) => { e.preventDefault(); xhr.open("POST", "http://localhost:3000/ajax"); xhr.s..

페이징 게시글이 여러개일 경우 ex) 999 > 999개 중 10개만 잘라서 server에서 불러와야 한다 server에서 DB로 요청을 할 때 10개만 따로 불러오도록 요청을 보내야 DB에선 게시글 10개만큼의 데이터만 가져 올 수 있기 때문에 부하가 적어진다. 10개만큼의 데이터를 가져오는 방법은 LIMIT를 활용해서 불러 올러올 수 있다 SELECT * FROM board order by idx desc LIMIT ${start}, ${views} start 지점에 시작점을 지정하고 views에 불러올 갯수만큼을 넣어준다. order by idx desc 의 경우 DB에 마지막에 저장된 순서대로 불러온다 ex) 0~ 100 이 있다면 90~100 만 불러오게 된다. 이렇게 10개의 게시글을 불러오게..

server 는 복잡해지면 좋지 않다. server.js에서 쓰는 코드들을 폴더를 분할해서 기능별로 나눌 수 있게되면 깔끔해지고 좋다. 기본적으로. router controller repository service views 로 간단하게 나눌 수 있다. SERVER const express = require("express"); const nunjucks = require("nunjucks"); const router = require("./routes/index"); const app = express(); app.set("view engine", "html"); nunjucks.configure("views", { express: app }); app.use(express.static("public"..

express는 앞서 한 http 의 tcp 통신을 기반으로 만들어진 외부모듈로, 간단히 서버와 html을 통신하게 만드는 좋은 아이이다. 1. 실행 $npm init -y $npm install express nunjucks 인스톨을 통해서 express 와 nunjucks 를 다운받는다. const express = require("express"); const app = express(); const PORT = process.env.SERVER_PORT || 3000; app.listen(PORT, () => { console.log(`server start`); }); 기본적으로 서버를 키는 방식은 비슷하다. express를 불러오고 변수에 express를 담아준다. 서버를 여는 방식은 똑같다,..

HTTP 동작방식 브라우저에서 URI를 입력시 동작 형태 > 브라우저에서 uri를 입력하면 > 3wayhandshake가 한 번 일어나고 http 프로토콜이 일어남. 브라우저에서 request message를 보내면 서버에서 알맞는 response message를 던져줘야 한다. 그것이 서버의 역할이다. (client > server : request 요청을 함 // 이 때 서버는 무조건 response를 준다. 데이터가 없으면 없다라고 쥐어짜서 준다.) 요청 응답은 크게 2가지 형태로 읽어야 한다. 빈칸을 기준으로 head부분 body부분으로 나눠서읽는다. request header + request body Start line GET /user?name=hellow HTTP/1.1 //POST를 쓰면..

목차 1. 3way handshake 작동방식 2. server code 3. client code 3way handshake 작동 방식 1. 서버를 생성 후 , 대기상태를 만들어둔다. net을 사용하면 네트워크 api를 만들고 tcp를 제공해서 통신이 가능하게 만든다. port와 host를 지정해 줘야한다. 이 때 porcess.env.SERVER 값이 없다면 3000, 127.0.0.1 을 부여해준다. port 값은 65355 개정도의 값을 가지고 있다. 이 중 0과 맨 마지막 값과, 1000 자리까진 빼고 쓴다. 포트값과 ip값을 같이 지정을 해줘야 포트값에 겹치지 않고 지정이 되기 때문에 둘 다 지정을 해줘야한다. 2(1). client의 연결시도 net을 써서 tcp 통신이 가능하게 만들고 co..

목차 1. 내장객체 2. 케싱 3. 내장모듈 4. osi7계층 5. network 내장객체 내장객체를 배우는 이유 window 경우 내장 객체, 브라우저에서 window 전역 객체를 만들어 두었기 때문에 우리는 거기에서 가져다 썼을 뿐이다. 모든 프로그램에서 내장객체는 존재한다. 내장 객체는 만든 사람 마음으로 만들기 때문에 알 수 없다. 하지만 개발자들은 공식문서를 작성해 두기 때문에 공식문서를 참조하면 어떤 내장 객체가 있는지 알 수 있게 된다. **node 공식문서 v.18.12 Index | Node.js v18.12.1 Documentation (nodejs.org) node에서 내장객체는 global이다. (global은 window 처럼 생략이 가능하다.) console.dir = 객체의 내..

목차 nodejs - 프로그램 - 프로세스 - node 설치 nodejs의 실행방법 - repl - js 직접실행 thred 모듈 Nodejs 프로그램 동작을 할 코드들의 집합 프로세스 하나의 프로그램을 돌리기 위해 실행되는 모든 것 프로세스는 하나의 PID를 가진다. 브라우저를 통해 js를 실행하면 컴퓨터 조작 x 하지만 노드를 이용하면 컴퓨터 조작이 가능하다. 노드는 JS를 실행시켜주는 "프로그램" 이다 node를 통해서 js를 실행하면 컴퓨터를 조작 할 수 있다. (브라우저는 조작 할 수 없다.) == 하드웨어를 조금 조작 할 수 있다. 노드는 윈도우 객체가 없다. 브라우저에서 시작하는 js와 노드에서 시작하는 js는 내장 객체가 다르다. 그래서 .document 로 이용했던 것들이 없다. 노드 =..