Node.js, React, TypeScript 등을 사용하여 Todo List 애플리케이션을 개발한 방법
초보 개발자가 된다는 것은 나에게 어려운 일이었지만 믿을 수 없을 만큼 보람도 있었습니다. 최근에는 그 이후로 연구해 온 일부 기술을 사용하여 데이터베이스에 데이터를 저장하는 작업 목록 애플리케이션을 개발했습니다. 이번 글에서는 제가 겪은 여정과 사용했던 도구, 그리고 그 과정에서 겪었던 어려움을 공유하겠습니다.
사용된 기술
내 프로젝트에 사용된 기술은 다음과 같습니다.
프런트엔드: React, TypeScript, TailwindCSS
백엔드: Node.js, Fastify
데이터베이스: PostgreSQL
호스팅: 백엔드를 위한 렌더링
Neon.tech: 데이터베이스용
Vercel: 프론트엔드 코드 호스팅용
나의 여행
시작
제가 시작했을 때 웹 개발에 대한 지식은 제한되어 있었습니다. 이미 JavaScript와 HTML의 기본 사항을 배웠지만 완전한 애플리케이션을 구축하는 것은 큰 도전처럼 보였습니다. 초보자를 위한 고전적인 프로젝트이고 아내가 시장에서 살 제품을 아직도 종이에 적어두기 때문에 작업 목록을 만들기로 선택했습니다. 제가 직접 개발한 데이터베이스와 백엔드입니다.
도전과제
환경설정
제가 직면한 첫 번째 어려움 중 하나는 개발 환경을 설정하는 것이었습니다. Node.js 사용법을 배우고 TypeScript를 설정하는 것은 처음에는 쉽지 않았습니다. 특히 TypeScript를 사용하려면 정적 유형의 개념을 이해해야 했고 이로 인해 코드가 더욱 복잡해졌습니다.
백엔드 통합
나는 성능과 단순성 때문에 Fastify를 백엔드 프레임워크로 선택했습니다. SQL 쿼리를 작성하고 데이터베이스와의 연결을 관리하는 방법을 이해할 수 있었습니다. 또한 JavaScript에서 비동기 응답과 약속을 처리하려면 인내심, 연습, 웹에서의 많은 상담이 필요했으며 예를 들어 ChatGPT를 사용했습니다.
TailwindCSS를 사용한 스타일링
TailwindCSS는 강력한 스타일링 도구이지만 초보자로서 유틸리티 우선 접근 방식에 익숙해지는 데 시간이 걸렸습니다. 반응성이 뛰어나고 미학적으로 만족스러운 디자인을 만드는 것은 학습 과정이었지만 시간이 지나면서 Tailwind가 제공하는 유연성과 코드 전반에 걸쳐 Tailwind의 표준화를 사용할 수 있는 방법에 대해 감사하게 되었습니다.
호스팅 및 배포
개발을 마치고 호스팅으로 넘어갔습니다. 백엔드에 Render를 사용하는 것은 상대적으로 간단했지만 프로덕션에서 애플리케이션이 올바르게 작동하는지 확인하는 데에는 어려움이 있었습니다. Neon.tech를 통해 PostgreSQL 데이터베이스 관리 과정이 더욱 쉬워졌고, 환경 변수 설정 방법과 데이터 보안 보장 방법을 배울 수 있었습니다.
난관극복
이러한 어려움을 극복하는 열쇠는 끈기와 배우려는 의지였습니다. ChatGPT를 사용하여 솔루션을 연구하고 다양한 테스트, 커밋, 테스트 및 상담을 수행한 덕분에 인디 개발자 매니아로서 프런트엔드에서 백엔드까지 첫 번째 애플리케이션을 개발할 수 있었습니다!
결론
백엔드와 데이터베이스를 사용하여 작업 목록 애플리케이션을 개발하는 것은 교육적이고 보람 있는 경험이었습니다. 어려움을 극복할 때마다 저는 더욱 자신감 있고 숙련된 개발자가 되었습니다. 시작하는 경우, 제가 조언하는 것은 도전을 받아들이고 도움을 요청하는 것을 두려워하지 말라는 것입니다. 시간과 노력을 기울이면 개발 목표를 달성할 수도 있습니다.
이 기사가 다른 초보 개발자가 프로젝트를 처음부터 끝까지 만드는 데 따른 어려움과 보상을 이해하는 데 도움이 되기를 바랍니다. 질문이 있거나 경험을 공유하고 싶다면 언제든지 댓글을 남겨주세요!
위 내용은 데이터베이스 스토리지를 활용한 내 작업 목록 애플리케이션 개발!의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!