top of page

그린 레이디 Shopify 2.0

이 포트폴리오 프로젝트에서 나는 백엔드 로직을 위한 Shopify Liquid, 스타일링을 위한 Tailwind CSS, 상호 작용을 위한 JavaScript/jQuery의 조합을 사용하여 역동적이고 시각적으로 매력적인 스킨케어 매장 웹사이트를 만들었습니다. 이 프로젝트는 프론트엔드 및 백엔드 기술에 대한 나의 숙련도와 매력적이고 기능적인 전자 상거래 웹 사이트를 만드는 능력을 보여주는 것을 목표로 합니다.

데모 웹사이트

그림 물감

Technologies Used

  • 프론트엔드 프레임워크: Next.js

  • 백엔드: Next.js, GoogleAuth

  • 데이터베이스: MongoDB

  • 기타 도구: Tailwind CSS

9.png

Project Features

  • Text Prompt 생성: 사용자는 특정 주제 또는 키워드로 텍스트를 생성할 수 있습니다.

  • Text Prompt 조회: 생성된 텍스트 목록을 보여주고, 다른사람들과 함께 생성된 Prompt 를 공유할 수 있습니다.

  • Text Prompt 수정: 텍스트 작성자는 본인의 페이지에서 기존의 Text Prompt를 수정할 수 있습니다.

  • Text Prompt 삭제: 더 이상 필요하지 않은 Text Prompt를 삭제할 수 있습니다.

  • 보안 및 데이터 저장: 사용자의 Text Prompt 데이터를 안전하게 저장하기 위해 데이터베이스 및 보안 프로토콜을 구현했습니다.

  • 응답성 및 성능: Next.js의 장점을 활용하여 빠르고 반응성 있는 웹 애플리케이션을 구축했습니다.

  • 태그 기능: 태그를 클릭하면 자동으로 필더링 되며 태그를 통한 검색도 가능합니다.

11.png

Challenges & Results

  1. 상태 관리: 최신 Next.js 로 'use client' 구성요소가 추가됨으로써 서버와 클라이언트 구성 요소 모듈 간의 경계를 선언하는 데 사용됩니다. 이러한 기능을 통해 FullStack 개발이 더욱 빠르고 간편해졌습니다.

  2. 백엔드 연동: Google 로그인 인증과, Mongo DB에 데이터를 통해 Collection 창에 정보를 띄우는데 조금 헷갈리고 힘이드는 부분이 있었습니다. 본인이 Google Login API 를 처음 이용했을 뿐더러 Next.js 백앤드 활용이 조금 미숙한 점도 있었습니다.

  3. 성공적인 CRUD 기능 구현: 사용자는 Text Prompt를 생성, 조회, 수정, 삭제하는 기능을 성공적으로 사용할 수 있습니다. 뿐만 아니라 키워드를 통해여 간편한 검색기능도 추가하였습니다.

  4. 간편한 구글 로그인 기능: Google OAuth을 Next.js 백앤드에 적용시키는것을 성공하였으며 각자 다른사용자들이 로그인을 하여 text prompt 사용이 가능해졌습니다.

12.png

Conclusion

이 프로젝트는 Next.js를 사용하여 Text Prompt의 CRUD 기능을 제공함으로써 사용자가 효과적으로 텍스트를 관리하고 작성할 수 있는 웹 애플리케이션을 제공했습니다. 또한 조금 더 신뢰성과 안정성을 위해 Google OAuth API 를 이용하여 꼭 구글에서 로그인을 해야 사용자들이 text Prompt 를 공유하도록 만들었습니다. 사용자 중심의 기능과 간결한 디자인으로 사용자들이 다른사람들이 공유한 요리동영상을 간편하게 검색을 하고 키워드를 통해서 조금 더 직감적으로 디자인하였습니다.

bottom of page