우당탕탕

html 페이지 생성 -views 폴더 생성. 여기에 html파일들을 넣는다. 나중에 동적으로 콘텐츠 추가하는것도 배울예정 const paht 후에 sendFile로 경로로 만든 파일을 보내준다. const path = require('path); app.use((req, res, next) => { res.status(404).sendFile(path.join(__dirname, 'views', '404.html')); }); 상위폴더에 있는경우엔 아래와 같이 '../'를 설정한다. const path = require('path'); router.get('/', (req, res, next) => { res.sendFile(path.join(__dirname, '../', 'views', 'shop...

404 오류페이지 무작위의 주소를 입력하면 일반적으로 404error페이지가 나타난다. app.js 파일로 돌아가서 미들웨어나 또하는 express가 미들웨어를 사용해서 요청을 처리해주면 된다. // (/)로 처리해줘도 되지만 아래 값이 default이기 때문에 생략해도 된다. app.use(/); //get요청 뿐만아니라 모든 http의 요청을 처리한다. use를 사용했으니 app.use((req, res, next) => { res.status.send('Page not found'); }); → res.send 로 404 status 코드를 설정할 수 도 있다. send 이전에 status라는 method를 연결해준다. 다른 파일들에서도 사용이 가능하다. 전송전에 항상 status나 setHeade..

routes 라는 폴더생성. 그안에 admin.js와 shop.js 생성 웹 사이트를 운영한다고 했을때, admin에는 /product를, shop.js에는 기본경로/를 넣는다. //실행하게될 함수 const router = express.Router(); router.get('/add-product', (req, res, next) => { res.send( 'Add Product' ); }); router.post('/product', (req, res, next) => { console.log(req.body); res.redirect('/'); }); //router객체는 위의 get과 post 루트들이 등록되어있다. module.exports = router; const router은 r 도 R..

socket.io를 이용하여 채팅을 만들었다. 그리고 거기서 마주친 문제들이 있었다. 나중에 혹시 같은 문제가 발생하면 참고하기 위해서 작성하는 글. (Github_chat) 문제상황 1. DB 사용하지 않고 프로필사진 선택. 2. 선택한 프로필사진을 내가 선택한 채팅방에 띄워줄수없음. 3. 띄워진 프로필 사진을 어떻게 배치할것인가. 문제해결 1. DB 사용하지 않고 프로필사진 선택. = 일전에 했던 팀 프로젝트랑 같은 방식으로 진행했다. 이미지를 띄워주고, 그걸 선택하는 방식. 스크립트를 이용해서 타겟을 선택하고, 선택한 것들에 border기능을줘서 사용자가 무엇을 선택했는지 알 수 있도록 해주었다. 결과 2. 선택한 프로필사진을 내가 선택한 채팅방에 띄워줄수없음. url에 username, room ..

미들웨어에 대해서 알아보았으니 들어오는 요청을 어떻게 처리하고 데이터를 추출하는지 알아보자 POST app.use('/add-product', (req, res, next) => { console.log('In another middleware!'); res.send('Add Product'); }); (form을 회신하는데, 위는 간결하게 되어있는것을 연습했을뿐이다. 다음에 계속 배워가면서 html과 body와 같은 태그로 둘러쌓인 제대로된 코드로 연습할것이다.) form에는 action이 필요하다. 요청을 보낼 경로인 url이 필요하다. app.use('/add-product', (req, res, next) => { console.log('In another middleware!'); res.sen..

220920 더 잘하고싶어서 하는 공부 Express.js 노드에 3rd party 프레임워크로 세부적인 내용들을 외부에 맡길 수 있도록 해주고, 더깔끔한 코드를 작성 할 수 있게 해준다. 유틸리티 함수도 다수 제공한다. (프레임워크 : 우리가 다루는 도구와 규칙의 모음. Framework: Helper functions, tools & rules that help you build your application) 왜 사용할까? 더 나은 코드를 작성하는 유일한 패키지는 아니다. vanilla Node.js도 사용가능하다. 혹은 충분하기도 하다. Adonis.js, Koa, Sails.js 등등을 대안으로 사용할 수도 있다. 하지만 Express.js가 가장 많이 사용된다. 유연하고, 특별한 기능들을 추가..

슬슬 다른사람들은 일할곳을 찾아보는 시기가 되었다. 나도얼른가고싶은데 많이 부족해서 간단하게 짚고 넘어가는 기초들. 오늘의 부족한 점 어제 소켓하면서 let list = {}; 이걸 왜 선언해주었는지조차 몰랐는데, 새로운 Dictionary 형태의 빈값을 만들어주기 위함이었다. (js 파일에서 저거 만들어준 이유는 내가 갖고있는 list들을 다 내보내기 위함이었음) let list = {}; io.on("connection", function(socket){ console.log("connected : ", socket.id); socket.on("info2", function(data){ list[socket.id] = data.nickname; io.emit("notice", data.nickname..

첫 프로젝트 시작 - 8월 12일 금요일 조원들이랑 어떻게할건지 큰 그림. 예시 홈페이지 :http://mh.tqgame.kr/참고 백월광 - 공식홈페이지 백월광 - 공식홈페이지 mh.tqgame.kr - 스크립트로 슈팅게임 만드는거 알려주는 유튜브 링크공유 - 깃 마일스톤쓰기로 합의 (이슈를 추가하며 서로 얼마나 했는지 확인) - 서로 어느파트를 맡아서 할지 합의 나 : 로그인, 회원가입 구현 (프론트, 백) , 세션, 프로필창 css만들기(프로필 사진까지 넣기), 프로필 수정, 삭제, 아이디/비밀번호찾기 조장 : 게시판 백엔드, 댓글구현 팀원 : 메인과 게시판 프론트엔드 - 우리가 만든 슈팅게임이 갤러그 같아서 90년대 느낌으로 프론트 꾸미자고 결정 프로젝트 중간점검 (8월 3째주) - 8월13~8월..

220812 갓규리쌤의 수업을 바탕으로 작성되었습니다. Cookie 란? 웹 브라우저(클라이언트)에 저장되는 키와 값이 들어있는 작은 데이터 파일이다. 이름, 값, 만료일, 경로 정보로 구성되어있다. 쇼핑몰 등의 사이트에서 팝업으로 뜨는 '오늘 하루동안 보지않기' 등의 창이 우리가 쉽게 볼 수 있는 쿠키라고 생각하면 쉽다. ⇒ console에서 Application으로 가면 cookies를 확인 할 수 있다. Cookie의 동작 방식 클라이언트가 페이지를 요청 → 서버에서 쿠키 생성 → HTTP 헤더에 쿠키를 포함시켜 응답 → 브라우저가 종료되어도 쿠키만료 기간이 있다면 클라이언트에서 보관하고 있음 → 같은 요청을 할 경우 HTTP 헤더에 쿠키를 함께 보냄 → 서버에서 쿠키를 읽어 이전 상태 정보를 변경..

220811 스스로하는 파이썬 공부. 1일차. 기초중의 기초부터 공부한다. https://replit.com/ 를 사용. 콘솔로 바로 확인이 가능하다. 윈도우의 경우 ctrl + enter를 이용하면 콘솔에 바로 띄울 수 있다. Print print("something") - 괄호 안의 것을 출력한다. - " " 로 묶은것은 코드가 아니다. 그냥 텍스트라는것을 나타낸다. 이런 형태의 텍스트를 strings라고 한다. 글자들의 연속적인 집합이라고 생각하면 된다. ""큰따옴표의 역할을 문자의 시작과 끝을 표시하는것이다. - 언제나 ""닫는것을 주의해주는것이 좋다. - 혹시 오류가 생겼고, 그 이유를 모른다면 stackoverflow.com 으로가서 질의응답을 이용한다. \n print("Hello world..