미니는 밍기적

여러분들은 혹시 플젝의 시작과 끝의 선에서 회고를 하시나요? 나는 3학년 시작과 동시에 여러 프로젝트를 진행하게 되며 하루에 회의를 최대는 3-4번 할 정도로 팀플이 굉장히 많아졌고, 그런 과정에서 실제로 겪는 고충들이 분명히 있었다. 나 자신에게든 프로젝트에게든 타인에 의해서든 나아가서는 시기적으로도 말이다. 내가 2023년에 전공 관련해서 진행했던 프로젝트는 아래와 같았다. 주최 명 프로젝트 명 기간 팀원 수 연구실 [kisti와의 공동연구과제] 기계학습 기반 기술수요 추출 알고리즘 개발 약 6-7개월 4명 한이음 ICT GAN을 활용한 사용자 입력 기반의 대량 이미지 생성 및 거래 플랫폼 'GANerate' -> 수료증 약 7개월 4명 FARM 크리에이터와 팬 간의 래플 기반 소통 플랫폼, Clos..

vscode의 확장에서 'Flutter'를 설치해준다 이후 커맨드 창에서 flutter를 검색하면 flutter를 사용할 수 있는 건들이 뜬다 요기서 frun flutter doctor 클릭해서 sdk 설치 되어있는지 한 번 더 확인해주고! 나는 안 설치되어있어서 이 창에서 다운로드를 시행했다 이후에 new project를 열고 내가 진행할 프로젝트 이름인 closeup을 설정해주면 디렉터리 구조를 어떻게 설정할지에 대해 고민해보며 초기 설정이 굉장히 중요했다고 생각했던 저번 프로젝트를 떠올렸다. 초반에 각 프로젝트 마자의 디렉터리 구조를 탄탄하게 짜놓아야만 다양한 코드가 통용되고 알아보기 쉽다고 생각했고 ! 초기 설정을 잘 못하면 프젝 중간마다 주기적으로 수정해조야한다 ㅠ ㅅ ㅠ 그렇기에 요번 프로젝트..

프론트 측에서는 이렇게 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개 정도의 컨테이너가 필요하다 피그마를 몰랐던 나는 미리캔버스로 열심히 도..