오늘은 ChatGPT와 함께 Next.js를 사용하여 웹 애플리케이션을 불과 3시간 만에 개발하고 배포한 과정을 공유하고자 합니다.
이 프로젝트는 김주환 교수의 저서 "회복 탄력성"이라는 책을 읽다가 영감을 받아서 즉흥적으로 시작하게 되었습니다.
사이드 프로젝트라고 부르기에도 민망하지만, 개발자가 ChatGPT 를 사용하는 방법을 알려줄 수 있는 적합한 튜토리얼이라 생각해서 공유하고자 합니다.
최종 결과물은 다음 링크에서 확인해보실 수 있습니다: https://daisy-happy-test.vercel.app/
아래 링크에서 저와 ChatGPT 간의 대화 전문을 볼 수 있는 방법을 소개합니다. 관심 있으신 분들은 아래 링크에서 확인하세요. https://litt.ly/hustlecoding
본 글에서는 다음 세 가지 주제에 집중하겠습니다:
- ChatGPT가 개발생산성을 어떻게 향상시키는지
- 구체적인 개발 환경과 코드
- 실천적 책 읽기 경험
1. ChatGPT와 생산성 향상
ChatGPT는 문제 해결부터 코드 스니펫 제공까지, 개발 과정에서 큰 도움을 줍니다. 프로젝트 설정부터 컴포넌트 디자인까지 ChatGPT의 지원을 받았습니다. 개발자가 해야하는 역할은 '프로젝트 제시', '사용해야하는 기술 스택 제시', '데이터 제공'이 전부였습니다. GPT-4 가 이정도인데, 추후 GPT-5 가 개발되면, 중간중간 코드 수정 없이 한번에 이 정도의 코드를 생성해낼 수 있겠구나 하는 생각이 들었습니다.
2. 구체적인 개발 환경 및 구현
개발 환경은 다음과 같습니다.
IDE: VS Code
AI: GPT-4 (Grimoire GPTs 이용)
Stack: NextJS, DaisyUI
먼저, ChatGPT 에서 Grimoire 를 GPT Store 에서 찾습니다.
Grimoire는 코딩에 특화된 GPT 입니다. 확실히 일반 GPT 보다는 코딩을 더 잘해주는 느낌이 듭니다.
제가 지시한 첫번째 프롬프트는 다음과 같습니다.
당신은 20년차 소프트웨어 엔지니어입니다. 다양한 경험을 바탕으로, 저에게 최고의 조언을 심호흡을 들이마시고 천천히 순차적으로 대답해주세요.
저는 인프라 없이, 클라이언트단에서 실행되는 웹앱을 구현하길 원합니다. 모바일 반응형 디자인으로 개발하고 싶고, DaisyUI 컴포넌트를 사용해서 개발하고 싶어요.
개발하고자하는 것은 '회복탄력성'을 측정하는 테스트입니다.
문항은 총 53개로 이루어져있고, 각 문항은 1~5까지로 응답할 수 있게 합니다.
각 문항에서 응답하는 값에 따라 최종적으로 집계되는 점수가 달라지며, 테스트 결과는 static 하게 작성된 몇가지 진단의 내용을 점수에 따라 렌더링해주면 됩니다.
응답은 이렇게 왔습니다.
당신의 요구 사항에 근거하여, 클라이언트 측에서 실행되는 모바일 반응형 웹앱을 개발하는 과정을 천천히 순차적으로 설명하겠습니다. 이 웹앱은 '회복탄력성'을 측정하는 테스트 기능을 포함하며, 총 53개의 문항으로 구성되어 있고, 사용자가 각 문항에 대해 1부터 5까지의 값을 선택할 수 있게 합니다. 최종 점수는 사용자의 응답에 따라 달라지며, 점수에 따라 정적으로 작성된 진단 결과를 렌더링합니다. DaisyUI 컴포넌트를 사용하여 개발할 예정입니다.
1단계: 프로젝트 계획 및 설계
목표 정의: 회복탄력성을 측정하는 테스트 웹앱 개발
기술 스택 결정: HTML, CSS (Tailwind CSS + DaisyUI), JavaScript
레이아웃 설계: 모바일 반응형 디자인을 고려한 UI/UX 설계
2단계: 개발 환경 설정
Tailwind CSS 및 DaisyUI 설치: Tailwind CSS를 프로젝트에 추가하고, DaisyUI 컴포넌트를 활용할 준비를 합니다.
개발 서버 설정: 로컬 개발 환경에서 실시간으로 변경 사항을 볼 수 있게 설정합니다.
3단계: 웹앱 구현
A. HTML 구조 작성
<form> 태그를 사용하여 테스트 질문 목록을 구성합니다.
각 문항에 대해 <input type="radio">를 사용하여 1부터 5까지 응답할 수 있게 합니다.
B. CSS 스타일링
Tailwind CSS와 DaisyUI를 사용하여 모바일 반응형 디자인을 적용합니다.
각 컴포넌트와 요소에 클래스를 추가하여 스타일링합니다.
C. JavaScript 로직 구현
폼 제출 시, 사용자의 응답을 집계하여 최종 점수를 계산하는 함수를 작성합니다.
점수에 따라 해당하는 진단 결과를 렌더링하는 로직을 구현합니다.
4단계: 테스트 및 디버깅
다양한 디바이스와 브라우저에서 웹앱의 반응형 디자인과 기능을 테스트합니다.
사용자 입력 및 폼 제출 로직에 대한 유닛 테스트를 수행합니다.
5단계: 배포
클라이언트 측에서만 실행되므로, GitHub Pages, Netlify, Vercel 등의 정적 사이트 호스팅 서비스를 사용하여 배포할 수 있습니다.
여기서 처음 프롬프트에서 실수한 부분이 드러납니다.
처음부터 NextJS 를 사용하라고 지시했어야 했는데, 웹앱이라고 말하는 바람에 프레임워크를 사용하지 않고 코딩하기 시작합니다.
그래서 다시 지시했습니다.
HTML 을 하나의 페이지로 구성하지 않고, 한 문항을 선택할 때마다 state 를 저장하고, 다음 문항으로 넘어갈 수 있습니까? 그리고 nextJS 14 버전을 이용해서 구성하고 싶습니다.
이렇게 지시하니 이제야 좀 제대로된 응답이 오기 시작합니다.
Next.js 14을 사용하여 각 문항을 선택할 때마다 상태를 저장하고 다음 문항으로 넘어가는 방식으로 회복탄력성 테스트 웹앱을 구현하는 것은 좋은 접근 방법입니다. 이를 통해 사용자 경험을 개선하고, 애플리케이션의 성능을 최적화할 수 있습니다. 아래는 이러한 기능을 구현하기 위한 기본 단계와 코드 예시입니다.
1단계: Next.js 프로젝트 생성
Next.js 프로젝트를 시작하기 위해 먼저 새 프로젝트를 생성합니다.
npx create-next-app@latest my-resilience-test
cd my-resilience-test
2단계: 상태 관리 설정
문항의 상태를 관리하기 위해 React의 useState와 useEffect 훅을 사용합니다. 이를 통해 사용자의 선택을 저장하고, 다음 문항으로 넘어갈 수 있도록 합니다.
3단계: 페이지 구성
단일 문항을 보여주는 컴포넌트와, 문항을 순회할 수 있게 하는 로직을 구현합니다. 각 문항은 상태(state)에 따라 동적으로 렌더링됩니다.
pages/index.js (또는 pages/index.tsx)
Next.js를 사용하면 각 페이지가 자체 경로와 연결됩니다. 본 예시에서는 단일 페이지 애플리케이션(SPA) 형태로 구현할 것이기 때문에, 상태 관리를 통해 다음 문항으로 넘어가는 로직을 구현합니다.
import { useState } from 'react';
export default function Home() {
const totalQuestions = 53; // 총 문항 수
const [currentQuestion, setCurrentQuestion] = useState(1);
const [answers, setAnswers] = useState({});
const handleSelectOption = (value) => {
setAnswers({
...answers,
[currentQuestion]: value,
});
// 다음 문항으로 넘어가거나 결과 페이지로 리디렉션
if (currentQuestion < totalQuestions) {
setCurrentQuestion(currentQuestion + 1);
} else {
// 모든 응답이 완료되었습니다. 결과 처리 로직을 추가하세요.
console.log('모든 응답 완료:', answers);
}
};
return (
<div>
<h1>문항 {currentQuestion} / {totalQuestions}</h1>
{/* 현재 문항에 대한 컨텐츠를 렌더링합니다. */}
{/* 예시로, 1~5까지의 선택지를 렌더링하는 버튼입니다. */}
<div>
{[1, 2, 3, 4, 5].map(value => (
<button key={value} onClick={() => handleSelectOption(value)}>
{value}
</button>
))}
</div>
</div>
);
}
4단계: 결과 페이지 구성
모든 문항에 대한 응답이 완료되면, 사용자가 선택한 옵션에 기반한 결과를 계산하고 보여주는 결과 페이지를 구성합니다. 결과 페이지는 사용자의 총점수를 계산하고, 해당 점수에 따른 피드백을 제공할 수 있습니다.
5단계: 스타일링
Tailwind CSS를 Next.js 프로젝트에 추가하여 스타일링합니다. Tailwind CSS는 유틸리티-퍼스트 CSS 프레임워크로, 빠르게 반응형 디자인을 구현할 수 있게 도와줍니다.
npm install -D tailwindcss postcss autoprefixer
npx tailwindcss init -p
tailwind.config.js 파일과 postcss.config.js 파일이 프로젝트 루트에 생성됩니다. 이후, globals.css 파일에 Tailwind 디렉티브를 추가하여 Tailwind CSS를 사용할 수 있도록 합니다.
이 방식으로 각 문항을 순차적으로 보여주면서 사용자의 응답을 저장하고, 최종적으로 사용자의 회복탄력성 점수를 계산하여 결과를 보여주는 웹앱을 구현할 수 있습니다. Next.js와 React의 상태 관리 기능을 활용하여 사용자 경험을 향상시키고, 성능을 최적화하는 동시에 개발 프로세스를 간소화할 수 있습니다.
W: 계속 진행하기
E: 구현 계획 세분화하기
S: 각 코드 라인 설명하기
D: 설계 개선하기
이렇게 하고 나니, 프로젝트의 골격이 너무 쉽게 완성되었습니다.
가장 하단의 W,E,S,D 는 다음 명령어를 저렇게만 입력하라는 뜻입니다. 예를 들어, W라고 입력하면 계획에 맞게 다음 단계를 알아서 진행합니다.
타입스크립트를 사용할 거라고 얘기를 안했더니 자바스크립트 결과물을 내놓고 있네요.
그래서 다음과 같이 지시했습니다.
우린 typescript 를 사용할 것입니다. 이를 참고해서 다음단계를 진행해주세요
놀랍게도 에러가 없이 한번에 실행되는 Typescript 기반의 코드를 제공합니다.
이후에 몇가지 의도대로 구현되지 않은 부분에 대해 코멘트를 하니, 몇번의 시도 끝에 원하는 컴포넌트를 생성해냅니다.
(이 부분은 글이 너무 길어져서 생략합니다.)
이 과정에서 디자인 관련된 부분은 아쉬운 점이 꽤 많은데, 결과물을 말로 설명하기도 어렵고, 스크린샷을 넣고 수정을 요청해본 적도 있지만, 효과적이지는 않았습니다. Custom Slider (설문 응답 선택 컴포넌트) 를 구현할 때, 디자인이 깨지는 문제를 해결하기 위해 가장 시간이 많이 들었던 기억이 납니다.
그리고 처음부터 모든 프로젝트 결과물을 얻으려고 하면 안됩니다.
GPT가 컨텍스트를 저장하는 데에 한계가 있기 때문에, 여러가지 작업을 한꺼번에 시키면 잘 못하는 경우가 있습니다.
이 프로젝트의 경우, Question.tsx 컴포넌트에서 응답을 받는 것까지 먼저 구현하도록 한 후에
53개의 설문 문항을 data/questions.ts 에 채워넣고, 그 후에 ResultPage.tsx 컴포넌트를 구현하도록 시켰습니다.
결과 페이지를 구현하는 과정에서는 장단점이 있었습니다.
장점은 정말 추상적으로 대충 지시를 내렸음에도 그럴싸한 차트를 구현했다는 점이고,
단점은 역시 구체적으로 지시하지 않으니 디테일한 지시는 빼먹고 할 수 있는 만큼만 구현한다는 점입니다.
만약 기획을 확실하게 해서 디테일하게 지시했다면 아주 훌륭한 결과 페이지를 얻을 수 있었을거라 예상합니다.
그래도 3시간 만에 만든 결과물 치고는 만족스럽게 나와서, 굳이 더 수정을 요구하지는 않았습니다.
처음 계획은 ChatGPT 와의 대화를 하나하나 짚어가며 의도를 설명하려고 했으나, 막상 적다보니 분량이 너무 길어지고, ChatGPT 의 응답을 다시 여기에 적는 것도 큰 의미는 없겠다 싶어 대화 전문을 공개합니다. 대화 전문을 보고 싶으신 분들은 아래 링크에서 이메일을 입력해서 전문을 읽어보세요: https://litt.ly/hustlecoding
ChatGPT 로 코딩을 하다보면 코드 작성은 쉬운데, 종종 프로젝트 구조를 잃어버리는 경우가 있습니다. 이런 경우에는 아래와 같이 지시하면 길을 다시 찾을 수 있습니다.
현재 구현된 파일들을 어떻게 배치해야하는지, 프로젝트의 구조를 설명해주세요.
응답은 아래와 같이 옵니다.
GPT 로 코드를 짤 때 발생할 수 있는 에러는 크게 두가지 타입인데, 코드 자체의 에러와 내 의도와 다르게 구현된 코드일 경우입니다.
GPT-3.5 를 사용할 때는 확실히 코드 자체의 에러가 많아서 자체적으로 디버깅해야할 일이 많았는데, GPT-4 (혹은 Grimoire) 를 사용할 때는 코드 자체의 에러가 나는 경우가 현저히 줄어들었습니다. 그래서 대부분의 경우 돌아는 가지만 내 의도와 다르게 구현된 코드인 경우가 많은데, 이럴 때는 아래와 같이 지시를 내려볼 수 있습니다.
현재 제공된 디자인은 마음에 듭니다. 다만, ResultPage 에서 클립보드에 복사된 링크를 그대로 접근했을때, 결과페이지로 가는 것이 아닌 1번 문항 페이지로 가고 있습니다.
이 문제를 해결해주세요.
그러면 앞에서 대화했던 컨텍스트가 남아있기 때문에, 잘 알아듣고 그 전에 제공했던 코드 중 변경해야하는 내용을 적용해서 다시 코드를 제공해줍니다.
대화 중에 2번, 3번 이상을 동일한 질문을 해도 고치지 못하는 경우가 있습니다. 이 경우에는 다르게 질문을 하거나 새 창을 열어서 질문을 해도 잘 모르는 경우가 많습니다. 그래서 이런 경우에는 직접 디버깅을 하거나 구글링을 해서 찾아보는게 좋습니다. 학습 데이터가 부족하거나, 2023년 이후에 새로 업데이트 되면서 패키지 자체의 에러가 해결됐거나 하는 경우들입니다.
이 대화에서는 react-toastify 패키지의 경우가 그랬는데, Toast 메시지를 띄우지 못하고, 컴포넌트에 텍스트만 렌더링하는 현상이 반복되었습니다. 대화에는 나오지 않지만 결국엔 간단하게 alert 함수를 띄우는 것으로 마무리 하게 되었습니다.
이건 개인적인 느낌인데, 지시할 때 2개를 동시에 지시하면 temperature (높으면 창의적인 답변) 가 높아지는 듯한 느낌이 있었습니다.
가장 마지막에 Toast 메시지 해결과 Question 컴포넌트의 디자인 문제를 동시에 물어보니 아래와 같이 답변이 왔습니다. (물론 Toast 메시지는 결국 끝까지 해결이 되지 않았네요)
좋습니다.
'공유하기'버튼을 눌렀을때, Toast 메시지가뜨지 않습니다. 클립보드에 텍스트가 복사되는 것은 정상적으로 복사가 되고 있습니다.
그리고 Question 응답을 받을 때, Question 컴포넌트의 텍스트 길이에 따라 height 가 변경되어서 option 의 위치가 변동되는 문제가 있습니다.
Question 컴포넌트의 height 가 텍스트 길이와 상관없이 변하지 않도록 해서 디자인의 통일성을 유지시켜 주세요.
답변:
Toast 메시지 미표시 문제 해결
'공유하기' 버튼 클릭 시 Toast 메시지가 표시되지 않는 문제는 toast 함수 호출 방식에 문제가 있을 수 있습니다. 이를 해결하기 위해, 먼저 react-toastify 라이브러리가 올바르게 설치되었고, 애플리케이션의 최상위 컴포넌트(예: App.tsx 또는 index.tsx)에 <ToastContainer /> 컴포넌트가 포함되어 있는지 확인해야 합니다.
// App.tsx 또는 index.tsx에 ToastContainer 추가
import { ToastContainer } from 'react-toastify';
import 'react-toastify/dist/ReactToastify.css';
function App() {
return (
<>
<ToastContainer />
{/* 나머지 앱 컴포넌트 */}
</>
);
}
그런 다음, 공유하기 버튼의 이벤트 핸들러에서 toast 함수를 호출할 때 정상적으로 메시지가 전달되고 있는지 확인합니다.
const shareResults = () => {
navigator.clipboard.writeText(window.location.href).then(() => {
toast("결과 링크가 복사되었습니다.", { position: "top-center", autoClose: 5000 });
}).catch(err => {
console.error('클립보드 복사 실패:', err);
toast.error("링크 복사에 실패했습니다.");
});
};
Question 컴포넌트 높이 고정 문제 해결
Question 컴포넌트의 높이가 텍스트 길이에 따라 변하지 않도록 CSS를 사용하여 높이를 고정시킬 수 있습니다. 이는 CSS 클래스를 정의하여 적용하거나, 인라인 스타일로 직접 적용할 수 있습니다. 예를 들어, 최소 높이를 설정하여 텍스트 길이에 관계없이 일정한 높이를 유지할 수 있습니다.
/* styles.css */
.question-container {
min-height: 150px; /* 예시 높이, 실제 콘텐츠에 맞게 조정 필요 */
display: flex;
flex-direction: column;
justify-content: center;
}
CSS 클래스를 Question 컴포넌트에 적용합니다.
// Question.tsx
function Question({ questionText }) {
return (
<div className="question-container">
<h2>{questionText}</h2>
{/* 질문 옵션 렌더링 */}
</div>
);
}
또는 인라인 스타일로 직접 적용할 수 있습니다.
// Question.tsx
function Question({ questionText }) {
return (
<div style={{ minHeight: '150px', display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
<h2>{questionText}</h2>
{/* 질문 옵션 렌더링 */}
</div>
);
}
이렇게 하면 Question 컴포넌트의 높이가 텍스트 길이와 상관없이 일정하게 유지되어, 옵션의 위치 변동 없이 디자인의 통일성을 유지할 수 있습니다.
이렇게 ChatGPT와 페어코딩을 할 때, ChatGPT 가 제공하는 코드를 무지성으로 복사해서 넣을 수 있는데 넣기 전에 확인을 꼭 해야합니다. 가끔 변수명이나 기존에 건드리지 말아야할 로직 부분을 변경하는 일도 있기 때문입니다.
3. 실천적 책 읽기
"회복 탄력성"이라는 책을 읽고 이를 기반으로 한 웹사이트를 개발하는 과정은 매우 즐겁고 의미 있는 경험이었습니다.
기술적으로 대단한 내용을 배워서라기보다는, 만들고 싶었던 기획을 직접 구현해내는 과정이 즐거웠던 것 같습니다.
주말에 심심한데 개발할 거리가 없나 찾으시는 분들은 책을 읽고 책에서 제시하는 아이디어들을 이렇게 코드로 구현해내는 '실천적 책 읽기'를 해보시는 걸 추천합니다. 항상 책을 읽고 아무 행동의 변화도 없이 끝나는 습관을 고치고 싶었는데, 이번 프로젝트를 하며 하나의 돌파구를 마련한 것 같아 기분이 좋습니다.
ChatGPT와의 채팅 전문을 읽고자 하시는 분들은 아래 링크에서 이메일로 구독하시면 전문이 포함된 링크를 전달드립니다.
혹시, 개발자로 취업을 준비하고 계신 분이라면 아래 글도 읽어주세요!
취업이 될 때까지 멱살 잡고 끌어주는 ️항해99 개발자 취업 리부트 코스
항해99 개발자 취업 리부트 코스
10주 최단기간 내에 반드시 취업시켜드리겠습니다.
hh-devcareer.oopy.io
'Developer > Hustle Coding' 카테고리의 다른 글
| 파이썬의 'filter()' 함수: 이터러블을 조건에 따라 필터링하는 최적의 도구 (0) | 2023.10.11 |
|---|---|
| 파이썬의 collections 모듈: defaultdict 함수를 활용한 딕셔너리 기본값 설정 (0) | 2023.10.08 |
| 파이썬의 'map()' 함수: 데이터 변환의 최적화된 도구 (0) | 2023.10.07 |
| Python의 collections 모듈: Counter 함수를 활용한 요소 카운팅 (0) | 2023.10.06 |
| 파이썬의 'sorted()' 함수: 정렬을 위한 완벽한 도구 (0) | 2023.10.05 |