본문 바로가기
  • 삽질하는 자의 블로그
5. 물품 상세 // 물품 (유저별로 다르게) 장바구니에 담기 // (유저별로 다르게) 장바구니 구현하기! With Ajax 개요(동작원리) 로그인 ==>> 세션에는 로그인한 req.session.authUserId 가 저장됌 ==>> 물품 상세정보창에서 카트에 담기, 카트에 담을때는, userid와 productid를 비롯한 값을 AJAX로 보냄 ==>> 카트에 진입하는 순간 cart/authUserId 로 동적인 URL 생성 ==>> DB에서는 authUserId 받아서, UserId와 맞는 정보만 DB에서 빼와 render 물품상세 크게 별거 없는 상세페이지 * AJAX를 위해, 버튼에 csrf data, userid data, productid data를 넣어두었다. 카트에 담기 WITH AJAX ajax로 post 요청을 보낸후, 답을 받아온다. 답이 오지 않을 경우는, 미리 다 쳐내고 auth session을 받지 .. 2022. 9. 27.
extra) 자바스크립트 내장 클래스 URL 클래스로, 섬네일 편하게 만들기 전에 섬네일을 아주 힘들게 만들었다. 그럴 필요가 없었다. 예.... input type= "file" 내의 값의 URL을 가져오는 내장 클래스가 있었다. 그렇다면.... URL을 가져와, 미리 만들어둔 image파일의 src를 바꾸면 간단하게 해결될 문제였따... 예... 끝입니다... 2022. 9. 25.
extra) input type = "file" 을 사용할 때, CsrfToken의 제출방법! csrf Attack 에 대하여 배운 이후로, 공격을 방지하기 위한 csrfToken을 항상 사이트에 적용시켜 놓는다. 1. csruf 패키지로, csrf token을 활성화 시키고 2. csrf 패키지를 불러온 후, app.use( csrf() ) 를 통해, 작동시킨다. 3. middelware 혹은, Constroller에서, render할 페이지에 csrf token을 '나의 HTML'에 보낸 후 4. '나의' 브라우저에만 있는 csrf token을 접속시, 서버에 제출함으로써, '나의페이지가 맞음을 확인받는다' 중요한것은 브라우저에서 서버로 제출 시 방법이다. 즉, 쿼리매개변수로 제출되는 형태이다. 제출을 하게되면 URL에는 domain/login?_csrf=" csrfToken" 의 식으로 제출.. 2022. 9. 25.
4. 물품 올리기! 업데이트! 삭제까지! 시작에 앞서, MVC 패턴 작업으로 VIEW의 정보를 // 라우터에서 받아 // 라우터에 연결된 기능은 Controller에 // Contoroller에 입력된 코드들 중, 데이터베이스에 접근하는 모든 항목들은 Model에 코딩되어있다. 물품을 올리기 위해서는 VIEW에 있는 [ 파일을 비롯한 모든 정보를 받아와야한다] ROUTE 에서 [ 서버로 연결시키고 ] CONTROLLER 에서 [ 처리 과정을 담는다] MODEL 에서는 [ CONTROLLER에서 DB 로 접근하는 것들을 담는다] 1. VIEW 여기서 가장 유의할 점은 1. Multer의 설치, 미들웨어 설정 2. enctype의 설정 3. csrfToken을 쿼리 매개변수로 보내기 2. ROUTER ROUTER에서, 브라우저의 요청을 받아, 실행.. 2022. 9. 25.
3. 섬네일을 만들어볼까나? (수정) 파일 선택기를 누르면 나오는 섬네일을 만들어보자! 특징1. 자바스크립트코드는 한번 딱! 생성되면 다시 원래대로 돌아가버린다. [무한한 요청을 해야한다] 특징2. FileReader() 객체를 생성하여, onload 되었을경우 발생되는 상황을 함수로 만든다. * FileReader 객체는 웹 애플리케이션이 비동기적으로 데이터를 읽기 위하여 읽을 파일을 가리키는File 혹은 Blob 객체를 이용해 파일의 내용을(혹은 raw data버퍼로) 읽고 사용자의 컴퓨터에 저장하는 것을 가능하게 해줍니다. /출처 MDN *onload 는 , 이벤트 읽기동작이 성공적으로 완료될때마다 발생한다. 1. img element를 만들어, setAttribute로 src에 event.target.result 로 [파일탐색기에 들.. 2022. 9. 23.
2. 로그인페이지, 검증과 오류처리, 세션, 물건 업데이트 페이지 생성 하루동안 만들어본것들 하루동안 나름 공부하면서 꽤나 많은 것들을 해보았다! 전체적인 리팩토링 로그인 기능 구현, 검증, 세션을 통한, 관리자 생성, 검증, 가입실패시 다시적는것을 방지하는 데이터세션 등! 나름 한건 많은데 정리하자니 복잡하다. 아직 중구난방이기도 하고... 무엇보다 오늘 AJAX 요청을 하느라 2시간을 날려버렸는데 원인을 찾고 찾다보니 결국 구현이 불가능하게 코드를 짰다는 사실을 알아버렸다!! 제대로된 첫 타격이 아닌가 싶다. 으윽 내머리 화이팅 2022. 9. 21.
1. 구상하기, 세팅하기, 기본 가입페이지만들어보기 나만의 작은 쇼핑몰을 만들어보자. 하핫. 물론 로컬이다 하핫. [ 구상 ] 0. 공통 : 로그인, 회원가입, 로그아웃 ... 1. 사용자 : 상품보기, 상품 정보보기, 카트담기, 결제하기, 완료페이지 ... 2. 관리자 : 상품 등록, 상품 정보 등록, 모든 사용자 결제완료페이지 보기 ... MVC 패턴을 기반으로 하여 시작해보았다! [ 서버 생성, 데이터베이스연결, 필요한 패키지 연결] 1. 서버를 열고, mongoDB기반의 데이터베이스를 연결하고, ejs view engine을 설치하여, VIEW를 깔고가자 npm init 을 통해, 패키지 설치 기반을 다지는 것을 잊지 말자! 컨트롤러에는 route들의 필요한 function db 에는 db middleware 에는사용자 지정 middleware가 .. 2022. 9. 19.

티스토리툴바