Age of Discovery

모든 준비는 끝났다! 투두리스트 지금 바로 시작~~~합니다. pages폴더 안에 있는 index.tsx파일에 h1, input, textarea, button 태그들을 이용해 위 모양처럼 만들어주자. ( html과 css는 자유롭게 ^^ ) import { GetServerSideProps } from 'next'; import { ChangeEvent, useEffect, useState } from 'react'; import { prisma } from '../lib/prisma'; import axios from 'axios'; import { useRouter } from 'next/router'; export default function Home() { return ( To-Do-List {..

서버를 따로 구축하지 않고 nextJS만으로 풀스택 투두리스트를 구현해보자..! prisma를 사용해 postgreSQL 데이터베이스를 NextJS의 API router와 연동하는 작업이 필요하다. 가장 먼저 postgreSQL이 설치 된 후 실행되어있어야 한다. 맥OS 기준으로 https://semtax.tistory.com/12 맥 OS 에서 PostgreSQL 설치하기 1. Postgres SQL 설치 아래 명령어를 이용해서 PostgreSQL을 설치한다. brew install postgresql 설치가 완료 되었으면 아래 명령어를 이용해 postgresql 서비스를 시작한다. pg_ctl -D /usr/local/var/postgres start && brew se semtax.tistory.c..

리액트의 프레임워크인 nextJS를 사용해 투두리스트를 만들어보자! nextJS를 이용하면 기존 CSR방식의 문제점들을 보완할 수 있다. ( 애플리케이션의 규모가 커질수록 초기로딩속도가 느리거나 혹은 SEO최적화가 힘든 점 등의 문제들 ) 또한 API router를 통해 서버를 구축하지 않고도 풀스택으로 개발할 수 있다는 점이 매혹적이었다. 이번 기회를 통해 백엔드를 간접적으로 경험해 볼 수 있다고 느꼈고 배우지 않을 이유가 전혀 없었다. 내가 처음 자바스크립트와 리액트를 공부할 때도 투두리스트를 만들었는데 nextJS로도 투두리스트를 만들며 익숙해진 후에 개인프로젝트로 생각하고 있는 개인 블로그를 만들어볼까 한다. nextJS typescript tailwind CSS prisma postgreSQL ..