V0 페이지

들어가기 전에..

본격적인 사용기를 쓰기 앞서서, 사용한 이유를 적으려고 합니다.
저와 비슷한 이유를 가지고 쓰시는 분들이 이 글(대충의 사용방법)을 읽으시면 좋을 것 같습니다.

저는 백엔드 쪽으로 취업하려고 하고 있고, 이전엔 파이썬 + 장고 + postgresql + AWS로 배포를 해서 프론트엔드 쪽 프레임워크를 다룰 일이 없었습니다. 그 때는 html,css,js를 그냥 장고에서 작성해서 넣었기 때문입니다.

그래서 이번엔 한 번 어디선가 주워들은 next.js를 써보고 싶어서 next.js + spring boot 구조로 써보려고 했습니다.
마침 이전에 코딩애플님이 올려주신 영상에서 나온 자동으로 페이지를 만들어주는 이 사이트도 생각이 나서 이참에 써보게 되었습니다.

하지만 쓰려고 시도해보면서 이것저것 오류를 많이 만나고 처음 써보는 것이라 많이 헤맨 결과 이것저것 설치 포함 1시간정도 걸려서 해결하고 다른 분들 헤매는 시간을 없애드리기 위해서 글을 씁니다.

요약하자면, 저처럼 프론트 쪽 지식이 전무한 사람들이거나 한 번 저 사이트를 써보고 싶으신 분들이 읽으시면 좋을 것 같습니다.

들어가기 전에 환경 설명을 하자면, 저는 vscode에서 진행했고 윈도우 환경입니다.
하기 전에 Node.js 18.17 이후 버전이 필요합니다. 이 부분은 검색하셔서 찾아보시면 쉽게 정보 찾으실 수 있을 거에요.

이미 설치하신 분들 node.js 버전 확인은 cmd창에서 node -v를 입력하시면 할 수 있습니다.

사용방법

사용방법은 간단합니다.

아까 위에 올려드린 페이지 주소를 클릭해서 들어가면

이런 식으로 나옵니다. 로그인은 전 github로 로그인 했습니다.
아래는 다른 사람들이 사용해서 만든 페이지들이 있습니다.

아래에서 괜찮은 것들이 존재하는지 미리 보시고, 없다면 검은색 입력칸에 원하는 것을 작성합니다. 굳이 작성을 안해도 이미지 업로드도 가능합니다.

전 그림판에 네모를 대충대충 그려서 이미지 업로드로 만들어봤습니다.

만들면 이런 식으로 3가지를 만들어 주고, 원하는 것을 하나 선택하면 됩니다. 수정하고 싶다면 아래 입력칸과 마우스 클릭으로 수정할 수 있다고 하는데, 저는 써보니까 오류가 계속 나서 자세한 방법은 모르겠습니다.

이렇게 만들어진 페이지는 옆에 보시면 Code로 검은 버튼이 있는데 해당 버튼을 누르면 프로젝트에 넣으라고 아래 사진처럼 나옵니다.

react와 html로 복사할 수 있고, 코드를 보시면 tailwind css를 쓰고 있다는 것을 알 수 있습니다.

잘하시는 분들은 여기까지만 보시고 저 코드를 복사해서 사용하시면 됩니다.

이제 저 코드를 넣고 싶은데 어떻게 프로젝트에 넣는지 모르겠다, 오류가 난다 하시는 분들은 아래를 계속 봐주시면 됩니다.
(저 같은 초보자를 위한 설명)

이 shadcn 공식문서를 참조했습니다.

1. 프로젝트 생성

npx create-next-app@latest my-app --typescript --tailwind --eslint

2. my-app폴더로 이동 후 터미널에 아래 명령어 입력

npx shadcn-ui@latest init

이렇게 하고 나머지 설치 관련은 전 기본으로만 일단 설치했습니다.

여기까지 설치가 다 되었다면 위 사진같은 구조일 겁니다.

이제부터가 중요한데, 여기서 저 같은 초짜들은 react 코드를 어디다가 복사해야할지 막막하실 분들도 있을 거라고 생각합니다.

index 페이지, 즉, 사이트 들어가자마자 보이는 화면이라면 app/page.tsx 내용을 다 지우고 거기다가 복사하시면 됩니다.

만약 다른 페이지에 넣고 싶으시다면 지금 app router 방식을 사용하고 있기 때문에 app에 디렉터리를 생성하고 아래 page.tsx를 만들어서 사용하면 됩니다.

app router의 설명은 여기를 참조하시면 됩니다.

즉, localhost:3000/login 주소로 가고 싶다면
app/login/page.tsx 파일을 생성하시면 됩니다.

파일을 생성하고 복사한 코드의 맨 위에 보시면 import가 몇 개 되어있을 텐데, 공식문서 여기 들어가셔서 보시면 Installation이 있습니다.

복사하셔서 터미널에 입력하면 설치가 되고 다른 import들도 필요하다면 동일하게 설치하셔서 사용하면 됩니다.

npm run dev 하시면 실행됩니다.

마치며

정말 처음 다뤄보는 것들이라 어떻게 검색해야 해결할 수 있는지도 몰라서 상당히 복잡했는데 어찌저찌 공식문서와 감과 느낌으로 어떻게 해결하면서 어느정도 감이 잡힌 느낌입니다.

혹시 하시다가 에러가 나거나, 잘 모르겠다 하시는 것들은 댓글 달아주시면 최대한 도와드리겠습니다.(저도 공부할 수 있으니..) 혹은 잘하시는 분이 보시고 수정해야하는 부분이 있다면 알려주시면 감사하겠습니다.