본문 바로가기
  • 삽질하는 자의 블로그
4. Context 에서 "카트"의 "삭제" 로직을 추가해보자 with Array.splice() 사용 useReducer javascript Array.findIndex() Array.splice() Array.filter() "제거" 방법에, splice() 를 사용했지만, "제거"를 위해,전체 배열을 바꿔서 업데이트해도 된다. Array.filter() 를 사용하여, 해당 id 와 "같지 않은" Element 들만 남겨서 삭제하는 방법도 있다. Add 로직은 추가했다. reducer function 의 "REMOVE_ITEM" 타입에, 제거 함수를 추가해보자. 제거로직 with "Array.splice()" 0. context에서 action 의 페이로드 로, id 를 받아, 해당 INDEX 를 찾는다. 1. 카트에서 - 를 누르면, 해당 id에 대한 amount 에 -1 을 시킨다. 2. 카트.. 2022. 12. 12.
3. 카트 내에서 context를 조작해보자. WITH function.bind() 사용 : function.bind() 카트 안에도 추가 삭제 버튼이 있다. + 와 - 버튼을 누르면, context를 조작하여, 변경된 값을 받아보도록 하자. 우선 Array.map() 을 상요한 무한히 증식하는 버튼의 함수를 하나씩 타겟할때, 바닐라 자바스크립트의 경우는, DOM 에 접근해, querySelectorAll() 을 사용할 것이다. 하지만 React에서는, "선언형 뷰" 를 사용하고, Virtual DOM 에 접근 하는 것이 유리하기 때문에, 그렇게 하지 않는다. 대신 function.bind() 를 사용할 것이다. 모르겠다면, https://dive-into-frontend.tistory.com/69 참조하도록 하자 프로세스 1. 전체 ItemInfo 을 useContext 를 통해 가져.. 2022. 12. 12.
2. Context, useReducer 를 사용하여, 카트에 물건을 담아보자. 사용 Hook useContext, createContext, useReducer , useState javascript 메서드 findIndex, concat reduce function.bind() 본문 카트는, "카트 내부" 뿐 아니라, "메인에 있는 음식 선택창", "음식 선택창의 +, - 버튼" 등 "어디에서나 접근 가능해야한다." 나는 아직 Redux 를 잘 모른다. (현재 진행중이다) 그래서 상태관리가 미흡하다. 그러므로 Context 를 사용하여, 카트에 모든 값들을 접근시켜보자. 총 프로세스 1. context 를 만든다. 2. context 안에는 useReducer 를 만들어, 추가하고 삭제하는 로직을 만든다. 3. cart 안에서 필요한 상태는, "총가격", "카트 안에 담긴 정보".. 2022. 12. 12.
1. Cart와 Modal, 그리고 Portal 카트를 누르면, Modal 이 나오는 화면을 구축하고 싶다. 프로세스를 생각해본다. 1. "카트" 를 만든다. 2. "카트 버튼"을 누르면, "카트" 가 "모달" 형태로 만들어져 렌더되게 만든다. 3. 그러므로 "카트 모달"은 "포털"을 이용하여, "index.html 에 연결한다." 4. "카트 모달이 실제로 렌더되는 곳은 index.html"이다. 5. "카트가 직접 실행되는 곳은, Header의 카트 버튼"이다. 6. "카트 버튼"에서 "카트 모달"을 렌더하면, "카트 모달"은 "최상위 포지션의 형제 컴포넌트로 렌더된다." 7. "실행되는 곳"에서는 State 를 통해, 끄고, 켜고를 만든다. 8. 또한, "끄고 켜는 함수" 를 "카트 모달"로 props 드릴리으로 넘겨 "모달에서도 끄고 닫기를 사.. 2022. 12. 12.
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.

티스토리툴바