본문 바로가기
  • 삽질하는 자의 블로그
11. DEPLOY... 가장 어려웠던, 답이 안 나오던 배포... 성공! 행복하다. URL 주소가 보인다. 하하하하핫 끝이 .COM이라니! 1. 배포시 사용 : MONGODB ATALS, HEROKU 3일 동안... 40시간이 넘도록... 배포에 실패하고 이리저리 굴려다니다... 드디어 알아내고... 배포에 성공했따 정말로 큰 벽에 막혀서 오도가도 못하는 상황에 아무도 내 오류와 같은 오류를 물어본사람(은 있긴 했지만) 대답해주는 사람 단한명도(정말로) 없던 커뮤니티와 스택 오버플로우, 몽고db홈페이지, heroku 홈페이지도 아무도 답이 없었던 상황을 드디어 해결하고 하... 했다 하여튼 진짜... https://fast-retreat-13963.herokuapp.com/ All Products fast-retreat-13963.herokuapp.com 와... 보인다.. .. 2022. 10. 11.
10. 검색기능을 넣어보았다. + URL에 넣으면 안되는 특정키워드가 있나보다. URL 오류 검색기능을 넣어보자 find 같은거 말고 한글자만 쳐도 검색이 되게! 나의 방법은 1. INPUT으로 값을 받아 2. JAVASCRIPT 에서 그 값을 가지고 모든 PRODUCT DATA에 관하여 FILTER처리 (NODE에서 하고싶지만 그런 방법은 못찾았다) 3. FILTER 처리된 값을, 서버로 넘겨서, SESSION 으로 저장한 후, 4. SESSION에 저장된 값을 통해, 새로운 데이터로 VIEW를 RENDER 5. 짜자잔- 일단 서버에서 값을 가져오고 filtering 함수를 통해, view에서 값을 받은 searchKeyword 값으로 걸러낸다. search 버튼을 누르면, 서버에 그 값들을 보내고, 서버(컨트롤러)에서는 그 값을 받아 세션에 저장 후 redirect 를 통해 URL을 보내고 .. 2022. 10. 7.
9. 간단한 페이지네이션(페이지 표시)을 추가해보았다. 뭔가 비어보인다 했더니 아래, 페이지 표시(페이지네이션)가 없었다. 바로 만들어보겠다. VIEW에 페이지네이션이 들어갈 UL을 아래 살짝쿵 만들어준다. 1. li를 만드는 함수를 만들고, (각 페이지 숫자의 앵커태그는 쿼리 스트링(query string)을 사용하여, 페이지를 넘길것이다.) 2. 서버에서 물건 데이터를 전부 받아와 3. 전체 물건갯수 / 8 (8개씩표시할거니까) 를 올림처리해서, 총 페이지네이션의 숫자갯수를 만든다. 4. 서버에서는 allProducts 라는 빈 배열을 만들어 8개씩 끊어서 로드될때마다 넣어준다. (저 시작과 끝 수 계산하는, 수학이 살짝쿵 막혀서 혼자 자조함) 시작수는 당연히 0, 7, 13... 으로가니까 pagenumber*8 - 8 끝수는 7,13... 으로 하면 .. 2022. 10. 7.
8. 완성!? 직전!? 나의 git repository https://github.com/mysungsik/ShopingmallProject GitHub - mysungsik/ShopingmallProject: for my first project. make shopping website. for my first project. make shopping website. . Contribute to mysungsik/ShopingmallProject development by creating an account on GitHub. github.com 완성했다. 열심히 오류 수정해가면서, 새로운 지식 구글링하면서, 강의도 찾아보면서 내 첫 두주짜리 미니 프로젝트가 끝났다. HTML,CSS, EJS,NODE, MEDIA QUERY,.. 2022. 10. 6.
7. 첫 API, 결제시스템을 대신해주는 Stripe API , 그리고 MAP의 재활용! 결제 시스템을 갖추어본다. 우선 API 라는것을 사용해야한다. API 란 Application Programming Interface 의 약자로 " 서로 다른 두 애플리캐이션의 대화방식" 정도로 말할 수 있겠다. API 는 " 요청과 응답을 통하여, 통신하는 방법을 정의하고 있으며", 클라이언트(나) 가 상대 쪽으로 요청을 하면 서버(제공자) 가 요청을 받아들여, 응답함으로써, 데이터를 주고받으며 API는 이러한 요청와 응답에 대한 방법을 정의하고 있는것이다. 우리 모두가, 어플리케이션에 필요한 모든 기능을 스스로 만든다면, 정말로 비효율적이고, 고난의 시간이 될것이다. 음식점을 찾아주는 어플을 만들때, 필요한 지도를 만들겠다고 너무나 커다랗고 방대한, 구글맵을 스스로 만든다고 생각하면, 일단 가능하지도.. 2022. 10. 6.
extra) fetch의 Post Method 를 사용하면 redirect가 되지 않아! 어떻게하지! (ajax 요청의 redirect) 전에, fetch 를 사용한 요놈 요 post요청에 redirect가 도~무지 먹히지 않아서, 결국 a 태그로 넘겼었다. 문제는 그렇게 넘기게되면 DB delete => middleware의 locals.cartQunatity => view의 span 업데이트 => cart 옆 숫자표기 변경 보다, a태그가 먼저 발동되어, ORDER창으로 넘겨졌음에도, cart 옆의 숫자표기가 아직 바뀌지않는 현상 이 발생해버린다. 그래서 결국 ajax를 하고도 redirect를 강제로 넘기는(?) 방법을 찾아야 했는데 찾았다! 바로 요렇게! fetch 안에 redirect 속성을 주고 (사실 이건 안줘두 된다. 똑같다 결국! 안먹혀 으씨) response 안에 담긴 redirected 속성이 true 라면 window.. 2022. 9. 30.
extra) 무한히 증식하는 FORM(혹은, 그 어떤 것이라도)에 관하여 [그 안의 element 선택하기] 여기, 댓글처럼, 무한히 증식하는 FORM 양식이 있다고 가정하자. 대충 일단 3개만 만들어보았다. 이 친구들에게 button을 누르면, log와 함께 p의 값이 바뀌는 코드를 만들고싶다. 예전같았으면, form을 querySelctorAll() 로 전부 잡아 for of 를 돌려서, 전부 eventListener 달아서, submit 연결하고 event.preventDefault() 를 사용해 form을 멈춰서 다시 전부 [ FORM 안에있는 p태그들의 class를 querySelctorAll() 로 전부 잡아 ], let i = form.dataset.xx 하고 뭐 if 써서, p[i] 해서 뭐시기 저시기 하거나 했을텐데... 아니! 이젠 더 스마트해졌지! 1. FORM을 전부 잡아, Listener.. 2022. 9. 29.
6. 카트에 물품담고 오더창으로! 개요! 상품설명창에서, 카트에 물건을 담고, 카트에서 수량을 결정짓고 오더로 넘긴다. 유저의 이름으로 정렬된 CART DB 에서는 담은 물품을 볼 수 있고, 삭제도 가능하다! ORDER를 누르면, CART DB의 물품들은 삭제되고, ORDER로 넘어가게된다. CART ajax 만들기 view에 DELETE를 위한 form을 추가하고 조금 진화시켰다. - 수량이 변경될때마다, 자바스크립트를 사용하여, 실시간으로 가격이 노출되게 하였다. - 화면에 보이는 값을 나타낼때는 '원', '+' 등을 사용하여, 시각적으로 효과를 높이고 (따로 div를 만들어서 각각 넣어도 봤지만 생각보다 더러워보였다.) - ORDER 버튼을 통해, ORDER DB로 넘길때에는, "가격 값(num)"의 정확한 형태를 위해, 숫자를 추.. 2022. 9. 29.
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.

티스토리툴바