Age of Discovery

NextJs14버전 공부할 겸 블로그를 만들려고 하는데 create next app 명령어로 한번에 다 세팅하는 방법도 있겠지만 (공홈에서도 권장) 이왕 공부할거 일일이 필요한 패키지를 설치하고 파일을 직접 생성하는 게 더 도움이 될 것 같다는 생각으로 무작정 시도해봤다. 기술스택 목록 - Next.js14 - typescript - tailwind css - eslint - prettier 블로그를 만들기 위해 추가적으로 설치한 패키지는 생략하겠다. 바로 시작! 1. NextJs14 설치 원하는 레파지토리 명을 생성 한다. mkdir nextjs14-practice 패키지 매니징을 시작한다. npm init -y 여기서 뒤에 -y를 붙인 이유는 모든 질문에 대해 yes라는 뜻으로 추가 구성에 대한 질문..

모든 준비는 끝났다! 투두리스트 지금 바로 시작~~~합니다. 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 ..