본문 바로가기
  • 삽질하는 자의 블로그
2. 메인 페이지 만들기 메인페이지는 한 눈에 보기 쉽고, 딱! 커다랗게! 만들어서, 원하는 기능을 모두 담았으면 좋겠다고 생각했습니다. 그래서, 평소에 예쁘다고 생각했던, 뱅글뱅글 돌아가는 Cube 형태의 슬라이더를 사용해보았습니다. Swiper : https://swiperjs.com/react#usage Swiper React Components Swiper is the most modern free mobile touch slider with hardware accelerated transitions and amazing native behavior. swiperjs.com 정말 따라쓰기 편하게, 설명이 너무 잘 되어있어서 최고! 추천추천! import { Swiper, SwiperSlide } from "swiper/r.. 2022. 12. 2.
1. project 를 해석해 봅시다. 사용언어 Next.js, React, CSS3 사용 API Swiper, Next-auth 목적 매일 무얼 먹을지 고민하는 시간이 아까워서, 만들어 본 어플리케이션 주요기능 전체 음식 보기 음식 칼로리와, 영양성분 확인 음식 랜덤선택기 로그인 기능 자 시작합니다! 별거는 없어요. 열심히는 해봤어요 2022. 12. 2.
이론 용어정리(2) [44~75] - 자바 스크립트 되짚기 [INDEX]===================================================================================== 44. 제어문 45. 객체 46. 인스턴스 47. 객체 리터럴 48. 프로퍼티의 키 와 "" 의 관계 49. 함수 50. 매개변수(parameter), 인수(argument) 51. 함수와 식별자 와의 관계 with "정의" 52. "함수 선언문"과 "호이스팅" 53. 함수 호이스팅, 변수 호이스팅 54. 함수에서, 객체를 호출, 변경 할때에도, "참조에 의한 전달" 이 되기 때문에, 객체의 원본은 훼손된다. 55. 재귀함수 56. 중첩함수 (nested function) *** 57. 콜백함수 (callback function) *** 5.. 2022. 12. 1.
이론 용어정리(1) [1~43] - 자바 스크립트 되짚기 [INDEX]===================================================================================== 1. 프로그래밍 언어 2. 컴파일러 OR 인터프리터 3. 구문(syntax) 과 의미(semantics) 4. 프로그래밍이란 5. 렌더링 6. AJAX 7. V8 자바스크립트 엔진 8. UX (user experience) 9. Node.js 10. 비동기 I/O 11. 힙(Heap) 12. 콜스택 (call stack) 13. 스레드 14. WebAPI 15. 콜스택 큐(Queue) 14. Nodejs 의 구성과 "이벤트루프" 15. 컴포넌트 = 모듈(module) 16. CBD(Component Based Development) 방법론 .. 2022. 11. 30.
다시 돌아왔다! REACT와 NEXTJS 를 핥아보고, 내가 만들고 싶었던 사이트 배포를 끝냈다. 이제 다시 자바스크립트를 딥하게 한번 파볼까한다. 기반지식이 너무 모자라고, 앞으로 할것도 많다. 기반지식을 조금씩 더 쌓아가면서, 튼튼한 코딩을 위해 노력해봐야겠다. 앞으로는 자바스크립트를 다시 공부한다! 오늘뭐먹지. V1 https://nextjs-personal-project-4kjfncu9j-mysungsik.vercel.app/ 2022. 11. 29.
[배포 오류] 내 최악의 오류 40시간을 날려버린 [배포 오류]Error: Error connecting to db: connect ECONNREFUSED 127.0.0.1:27017 0. 들어가기에 앞서 사용한 DB : MongoDB 사용한 DB Hosting : Atlas MongoDB 사용한 Hosting Provider : HEROKU 사용한 API : Stripe API (결제용) 오류의 원인코드 : connect-mongodb-session 패키지 1. 오류처리 실패원인 [몰랐던 사실] 오류코드는 아래부터 위로 읽는것이다. 헤로쿠는 그저 박스일뿐, 실행은 헤로쿠 안의 '코드'가 하는것이다. 127.0.0.1 은 LoopBack IP이다. IP주소가 아니다. 환경변수는 헤로쿠 안의 코드가 실행될때, 헤로쿠가 변수 안으로 넣어주는 용도로 쓰이는 변수이다. 기본적으로 PORT는 넣어주지만, 나머지 환경변수는 직접지정해야 넣어진다. MONGODB ATLAS는 그저 새로운 DB일 뿐.. 2022. 10. 11.
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.
STRIPE API, 왜! 대체 왜! redirect가 이상한 곳으로 먹히나? [고치긴 했는데 답 없음 주의] 어제 stripe api 를 사용하다가, 한시간을 날려보았다. 왜? URL 주소로 접속을 했고, 라우트도 올바르게 설정했고, 컨트롤러도 잘 설정했는데? 결제 성공을 하면 나와야 하는 페이지가 나오지 않고 그~냥 딴페이지가 나와버린다!!!!!! 이렇게 연결해두면? 성공페이지 대신에 뭔 이상한, CLIENT ORDER 페이지가 나온다. 내가 만들어놓은 ORDER PAGE가!! 나는 그것을 RENDER한적 없다고 이놈아... 정말로 한참을 고민하고, 한참을 찾다가, 잠깐 머리를 비우고, 그냥 URL을 바꾸어보았다. 잘된다. 왜? 모른다. 일단 해결됐다. 하... 왜... 2022. 10. 6.
7. 첫 API, 결제시스템을 대신해주는 Stripe API , 그리고 MAP의 재활용! 결제 시스템을 갖추어본다. 우선 API 라는것을 사용해야한다. API 란 Application Programming Interface 의 약자로 " 서로 다른 두 애플리캐이션의 대화방식" 정도로 말할 수 있겠다. API 는 " 요청과 응답을 통하여, 통신하는 방법을 정의하고 있으며", 클라이언트(나) 가 상대 쪽으로 요청을 하면 서버(제공자) 가 요청을 받아들여, 응답함으로써, 데이터를 주고받으며 API는 이러한 요청와 응답에 대한 방법을 정의하고 있는것이다. 우리 모두가, 어플리케이션에 필요한 모든 기능을 스스로 만든다면, 정말로 비효율적이고, 고난의 시간이 될것이다. 음식점을 찾아주는 어플을 만들때, 필요한 지도를 만들겠다고 너무나 커다랗고 방대한, 구글맵을 스스로 만든다고 생각하면, 일단 가능하지도.. 2022. 10. 6.

티스토리툴바