안녕하세요 스터디 3기 수강생입니다. 최근 ChatGPT를 개발에 활용해보기 위한 시도들을 많이 해보고 있는데요 오늘은 Instagram 같은 웹페이지 만들어보기에 도전을 해보았습니다.
참고로 아래와 같은 웹페이지가 만들어졌습니다.
ChatGPT프롬프트는 아래 순 서로 진행을 해보았고 프롬프트와 결과도 정리해보았습니다.
1. 전체 레이아웃 코드 작성
I'm going to develop a simple instagram like webapp with next.js. Tab Bar layout, modern ui/ux style. give me step by step guide with code example.
2. 주요 Tab별 기능 확인
I also want to add following tabs with simple features. suggest each tab and it's feature list.
3. 각 Tab별 기능 구현
I'll implement each simple tab pages and switch tab page with next.js routing system. give me the code example
그리고 아래와 같이 각각 페이지들을 작성해달라고 했습니다.
1) Home Tab 구현
Write a home.js for Home tab with modern ui/ux style.
2) Explore Tab 구현
Write a explore.js for Explore tab with modern ui/ux style. remember following features: - Display a grid of photos and videos from various users. - Implement an infinite scroll to load more content as the user scrolls. - Add a search bar to search for specific users or hashtags. - Show trending tags and user recommendations.
토큰 제한 때문에 위에서 징리한 기능 구현을 잘 못하는거 같아 기능을 프롬프트에 넣어주었습니다.
일단 간단한 코딩 작성은 해보다가 조금더 복잡한걸 시도 해보았는데 생각 보다 작성을 잘해줘서 놀랐습니다. gpt3.5로 해보다가 gpt4.0으로 해봤는데 확실히 4.0이 코드는 더 잘 써주네요
