728x90
오늘 내가 배운 것 1. Router객체를 이용한 라우팅 분리하기 2. Controller 분리하기 Router객체를 이용한 라우팅 분리하기 익스프레스(Express)를 사용하는 이유 중 하나는 라우팅을 깔끔하게 관리할 수 있기 때문이다. 라우터를 많이 연결하게 되면 server.js 코드가 길어지므로 익스프레스에서는 라우터를 분리할 수 있는 방법을 제공한다. router.get/ router.post //등록형태 router.get('/board/list',(req, res)=>{ res.send('/ page') }) //실행 영역 app.use(router) 실행 가능한가? 실행 가능하다. 여기서 주의할 점은 router는 실행하는 부분이 아니다. router는 등록만 하는 것이고, 실제로 실행이 ..
오늘 내가 배운 것 1. Express를 이용한 CRUD Express 통신을 이용한 CRUD의 C, U영역 만들기 전체적인 흐름은 위에 사진과 같은 흐름으로 진행된다. 작성 시 주의사항 1. a태그를 이동시 경로를 잘 확인해서 적어야 한다. 기존엔 파일을 이동하는 것이었는데, 지금은 경로를 지정해 경로에 해당하는 라우터를 읽고 요청과 응답 메시지에 의해 파일을 보여주는 것이다. 2. view페이지에 선택한 게시글로 가기 위해서 고유 index를 querystring에 같이 담아서 확인할 수 있도록 한다. 완성 확인하기 코드 확인하기 더보기 index.html {{name}} Hello, world@@@ 리스트 바로가기 list.html 게시판 리스트 입니다. 번호 제목 작성자 작성일 조회수 {% for..
최근 github 개인 페이지를 만들면서 가장 기억에 남는 CSS효과였던 애니메이션 속성에 대해서 활용도가 많을 것 같아서 정리해봤다. 쉽게 애니메이션 효과를 줄 수 있기 때문에 알아두면 좋을 것 같다. CSS3 애니메이션 애니메이션을 나타내는 CSS와 중간 상태를 나타내는 키프레임으로 이루어져 있다. CSS 애니메이션의 장점 자바스크립트를 모르더라도 간단하게 애니메이션을 만들 수 있다. CSS 애니메이션은 frame-skipping 같은 여러 기술을 이용하여 최대한 부드럽게 렌더링 된다. 보이지 않는 엘리먼트에 대한 애니메이션은 업데이트를 줄여 부하를 최소화할 수 있다. 애니메이션 적용하기 animation 속성과 이 속성의 하위 속성을 지정해야 한다. 애니메이션의 총 시간과 반복 여부를 지정할 수 있..
최초에 '127.0.0.1:3000/'로 진입한다. 화면에 회원가입 버튼을 누르면 버튼의 클릭이벤트로 인해 join페이지로 넘어간다. join페이지에 진입하면서 form-input 태그를 이용한 폼이 나온다. 값을 입력하고 전송 버튼을 누르면 Request message를 POST로 요청하고 서버에서는 리다이렉트로 welcome 페이지를 보이게 한다. 리다이렉트를 하면 response message head영역에 location 속성으로 확인이 가능하다. 마지막 welcome 페이지에서 확인 버튼을 누르면 post를 이용하여 최초의 index 화면으로 넘어간다. express를 연습, 통신방식을 확인하기 위해 요청, 응답 메시지를 이용한 구현을 했다. 이벤트 리스너를 이용한 버튼 이벤트랑 server.j..
오늘 내가 배운 것 1. req, res 2. bodyParser 3. static 4. template engine 5. request method POST 6. redirect 이것을 express로!!! #package.json 생성 npm init -y # template engine 이 많이 있는데, 그중에 nunjucks 를 이용할 예정이다. # node modules 생성됨 npm install express nunjucks git을 사용하게 되면 .gitignore에 node_modules를 넣어준다. npm으로 설치할 수 있는 쉽게 설치할 수 있기 때문에 굳이 이 폴더 자체를 같이 올릴 필요는 없다. 서버 열기 const express = require('express') const ap..
오늘 내가 배운 것 1.HTTP 통신 - Request message 구현 - Response message 구현 HTTP 통신하기 통신을 하기 위해서 서버(server)랑 클라이언트(client)가 있어야 한다. HTTP통신에서는 브라우저가 클라이언트의 역할을 한다. 오늘은 HTTP통신을 하는 과정이기 때문에 클라이언트 대신 브라우저라고 한다. 기본적으로 통신을 위해서는 서버와 브라우저의 연결이 필요하기 때문에 3 way Handshake를 이용해서 연결이 되고, 데이터를 요청 후 응답이 오면 통신을 끊기 위해 4 way Handshake로 연결이 끊는데 이 부분은 이전 글에서 했으니 이전 글을 참고하기 바랍니다. https://baekspace.tistory.com/82 221208 - TCP/UDP..