미니는 밍기적

프론트 측에서는 이렇게 card 형식으로도 불러올 수 있고, 해당 제품을 클릭하게 될 시, 제품 상세조회도 할 수 있으며 해당 상품을 구매하기 전의 확인 창에서도 이러한 상품 데이터를 서버에서부터 가져올 수 있다 ㅈㅣ금 모기에 물려서 다음에 과정을 쓰도록 하겠다 꼬르륵 ^C

아직 결제 검증 통신은 구현하지 못했지만 결제는 성공했다 ! 결제 화면을 구현하는 데에는 아래의 파일을 활용했다 1. 아임포트 payment.html -> 각종 변수 설정 및 로직 참고 2. index.html -> 아임포트 script 추가 3. PaymentPage.js -> 해당 결제 페이지 구현 창 4. VerifyPage.js -> 결제 검증 페이지 구현 창 5. user_actions.js -> 결제할 상품 통신 코드 & 결제 검증 통신 코드 ---- 6. PaymentPage.css -> 디자인 어떤 것을 중심으로 고려하면서 코드를 짰는 지에 대해서는 바로 이전 게시물을 참고하면 되고, 백엔드와의 소통은 결제 직전 정보 확인 통신과 결제 검증 통신이 있다만 그 외에는 최대한 PaymentPa..

데이터유통플랫폼인만큼 결제가 필수인 플랫폼인지라 PG사 결제포트 연동이 필쑤인 것이다 이에 아임포트에서 일반결제 포트를 연동하기로 했다 이에 결제하기 버튼 연동 전, 초초안 간단하게 PaymentPage.js로 결제 페이지를 개발했다 결제하기 버튼 클릭 시, 현재는 결제 실패 Alert 창이 뜬다 당연하다 아직 access토큰을 담아두지도 않았고, 상품 정보를 담아두지도 않았으니 해당 박스들 칸에 아직 상품 정보와 결제 금액이 뜨지않는 이유는 db에 모셔놓은 상품을 갖고오지않았기때문이고 어제 밤에 api와 http 전달받은지라 이제 통신해서 불러오면 된다 이에 토큰 담기 전에 회원가입과 로그인으로 토큰 담는게 먼저인지라 이를 해결하고 결제 페이지로 넘어갈 예정이다 **맨 아래 하단 : 아임포트 결제하기 ..

디자인은 영상 평가 (2차 평가) 또는 3차 평가가 가까워진다면 더 수정해부도록하고! 이제 통신을 위해 마지막으로 리액트를 얹었는데 마이 개발 순서는 늘 html -> css -> js과 함께 통신 코드 짜기 ~.~ 즉 통신이 가장 마지막 순서였고 이미 짜여진 반듯한 창 내에서 통신 코드를 짜는 게 맘이 편해서 자연스레 이 흐름대로 개발했다 . 어쨌든 가장 골치 아프지만 어떻게 보면 가장 기본 중에 기본인 회원가입 통신 3가지를 오늘부로 막을 내렸던 것 이런 예뿌장한 콘솔창이 뜨기 전까지는 아래와 같이 구질구질한 창만 계속 봐야했었다ㅠ 어찌됐건 백엔드와의 통신 모두 성공 (code=0)했고, 회원가입에서 가입이 정상적으로 완료됐다면 로그인 창으로 랜딩되는 것 까지 import { useNavigate }..

현재 진행중인 GAN:ERATE 플랫폼은 사용자가 업로드한 이미지 파일 기반으로 유사한 이미지를 대량 생성시켜주는 플랫폼이다 !.! 그렇기에 상품 등록 페이지 창은 무엇보다도 필수인데 통신 연결 전에 먼저 html 창을 개발했다 이번에는 카테고리를 html 밖으로 빼서 js의 함수 식으로 먼저 정의를 해주고 함수를 html에 연결해주었다 const Categories = [ { key: 1, value: "100장" }, { key: 2, value: "500장" }, { key: 3, value: "1000장" }, { key: 4, value: "직접입력" } ] const Continents = [ { key: 1, value: "보건/의료" }, { key: 2, value: "동물/식물" }, ..

원래 기존 테마를 템플릿마냥 갖고 와서 메인페이지 개발할 생각이었으나 욕심쟁이,, 나는,, 내가 디자인한대로 웹페이지 구현하고 싶어서 ㅎㅅㅎ 부트스트랩 이용해서 테마 가져오는 법만 익히고 독학으로 웹페이지 하나하나 구현했음니다 테마 가져오는 법부터 보실까융 스타투 사용하려던 테마 이름은 carousel이다. 위 처럼 테마를 다운로드 받아서 사용할 수도 있지만 웹에 있는 테마를 링크만 거는 !cdn 방식! 을 활용할 수도 있다 이렇게 코드를 붙혀서 테마를 가지고 오는 것을 cdn 방식이라고 한다 l container 방식 이렇게 우측 사진과 같이 화면을 구성하게 될 경우, 한 박스를 컨테이너라고 칭한다 즉, 나는 네비바를 포함해서 4개 정도의 컨테이너가 필요하다 피그마를 몰랐던 나는 미리캔버스로 열심히 도..

깃허브 커밋 git add . git commit -m " 커밋 내용 " git push origin master 서버 작동 node ./bin/www.js 일반 서버 종료 컨트롤 c 서버 다른 곳에서 작동 시 종료 lsof -i :4000 (*현재 내가 사용하는 서버가 localhost:4000이라서) kill -9 작동중인 곳 숫자 node ./bin/www.js

브라우저에서 사용자가 입력한 Id , 비밀번호 내역을 백엔드에게 보내주는 통신을 할 것임! 이때 전달할 데이터는 request 라는 데이터고, fetch라는 함수를 통해서 전달을 할 것이며 어떤경로로 전달을 할 것인지 정해줘야함 -> 이러한 경로는 보통 서버 개발자가 설계 프론트는 해당 경로를 요청하고, 해당 경로의 api는 미리 만들어져있어야함 이때 내 파일상 index.js에 해당 api가 만들어져있음 하지만 아직 id, 비번을 받을 api는 아직 정해지지않은 상태 하지만 만들어져있다고 가정하고 데이터를 전달해보는 과정을 구현할 것임 *index.js 이에 /login이라는 경로가 이미 있다고 가정하고 login.js에서 fetch함수를 설계할 예정 -> /Login이라는 경로로 전달 *login.j..