프로젝트/오심테(오늘의 심리테스트) (24) 썸네일형 리스트형 [NextJS & Firestore] NextJS에 Firestore 연동해보기 오늘은 더미데이터를 Firestore로 이동해주는 작업을 했다. Firestore를 이용한 이유는 쉽게 데이터베이스를 구축할 수 있기 때문이다. Firebase 8버전을 써봤다가 9버전을 써봤다가.. 계속 에러를 만났다. 결국 가장 최신 버전을 사용하는데 성공했고, 연동함에 있어 버벅임이 조금 있었지만 연동 후 데이터 자체를 받아오는 작업은 그리 어렵지 않았다. 먼저, Firebase 사이트에 들어가 Firestore Database를 만들고, 데이터를 임시로 하나만 입력해놓았다. 이제 나의 리액트 프로젝트와 이 데이터베이스를 연동해야 한다. 프로젝트에 FirebaseConfig.js(이름은 아무거나 하면 됨)라는 파일을 하나 만들고, 다음과 같은 코드를 삽입해준다. 아래 코드는 프로젝트 설정에 들어가.. [Tailwind CSS] 테스트 상세/결과 컴포넌트(feat. SweetAlert2 & MUI Icon) 오늘은 테스트 상세 페이지 & 결과 컴포넌트를 다듬었다. 가운데로 정렬해주고, 텍스트를 감싸는 div에도 width를 설정해주어 글자가 넘치면 줄바꿈 되도록 하였다. 그래도 몇 일 tailwind를 썼다고 처음보다는 덜 뚝딱대는 모습을 보여 뿌듯했다. 익숙해지기만한다면 tailwind처럼 편한 방법이 또 있을까 싶다. 참고로 아이콘은 Mui Icon을 사용해서 빠르게 넣어주었다. 공유하기 기능에 적용시킬 예쁜 alert창 라이브러리를 찾았다. 공유하기 버튼을 누르면 url이 클립보드로 복사되도록 구현했다. const handleCopyURL = () => { const currentURL = window.location.href; navigator.clipboard .writeText(currentURL.. [Nextjs] 공통 컴포넌트(헤더, 네비게이션 바) 적용 및 동적 라우팅 오늘은 헤더와 네비게이션 바를 공통 컴포넌트로 만들고, 심리테스트 목록에서 각 아이템을 클릭하면 아이템의 id에 따른 동적 라우팅이 될 수 있도록 구현하였다. 먼저 헤더와 네비게이션 바를 공통 컴포넌트로 만들기 위해 Components라는 폴더에 layout.js라는 새로운 파일을 추가해주었다. import Header from "./header"; import NavBar from "./navbar"; export default function Layout(props) { return ( {props.children} ); } 그런 다음 index.js 파일과 testId의 index.js 파일에서 보여주고 싶은 컴포넌트를 Layout 컴포넌트로 감싸주었다. export default function .. [Tailwind CSS] 전체 화면 스크롤 바 없애기(Header 고정) 전체 화면의 스크롤 바를 없애고 싶었다. 스크롤 바가 보이면 영 별로인 것 같아 예전부터 스크롤바는 무조건 hidden 시켰다. 참고로, Styled-Components를 사용할 때는 다음의 코드를 사용했었다. overflow-y: scroll; &::-webkit-scrollbar { display: none; } Tailwind을 사용할 때는 스크롤 기능을 어떻게 만져줘야하는지, 스크롤바는 어떻게 없애는지 살펴보자. 헤더 위치는 고정시켜줄 것이다. 먼저 전체 화면이 아닌 특정 컴포넌트에서 스크롤 바를 없애는 방법은 아래와 같다. 가장 먼저, 추가적인 Tailwind의 플러그인 설치를 해야한다. npm import tailwind-scrollbar-hide 이를 통해 tailwind-scrollbar-.. [Tailwind CSS] nextjs is missing required "width" property & Error: Invalid src prop "" on `next/image` 오늘은 Tailwind CSS를 사용해 이미지를 삽입하며 만난 두 가지 에러와 해결 방법을 살펴보자. 심리 테스트 item에 썸네일 이미지를 넣었고, 이미지는 외부에서 가져온 것을 사용하였다. Tailwind의 image를 삽입할 때 태그가 아닌 nextjs에서 제공하는 'Image'를 사용한다. 처음에는 Styled-Componenents를 사용했던 때와 같이 태그를 사용하여 코드를 짰더니, VSCode에서 nextjs에서 제공하는 'Image'를 사용하라고 warning이 떴다. 참고) Image 컴포넌트는 사용자 경험을 향상 시켜주고 이미지 형식 최적화, 외부에 저장되어 있는 이미지 리사이징까지 다양한 장점을 가지고 있다고 한다. 그래서 오키 알겠다~ 하고 바꿔주었더니, 이런 에러를 만나게 되었다... [NextJS & Tailwind CSS] 헤더 & 네비게이션 바 만들기 오늘은 오심테의 헤더와 네비게이션 바를 만들었다. NextJS도 처음~ Tailwind도 처음~ 뚝딱이 대잔치였다. NextJs는 리액트와 구조가 거의 비슷하다. pages라는 폴더 안에 파일 기반 라우팅을 적용시키기 위한 페이지들을 넣어주면 되는데, 오늘은 일단 헤더만 만들어보았다. CSS는 Tailwind CSS를 선택하였다. 아래의 공식 홈페이지에서 원하는 속성을 검색해 사용하면 된다. Styled-Components에 익숙하다보니 처음에는 뚝딱거리면서 헤맸는데, 몇 번 해보니 그래도 좀 익숙해진 것 같다. 평소 쓰던 속성을 검색해서 적용시켜야해 시간은 오래걸리지만 사용법이 까다롭지 않아서 적응하면 쓰기 편할 것 같다. https://tailwindcss.com/docs/installation In.. Nextjs 12버전으로 프로젝트 시작하기(feat. npm run dev 에러) 기획도 대략적으로 마쳤으니 이제 Nextjs를 사용해 프로젝트를 만들어보자. 타입스크립트를 사용할까 했지만, Nextjs를 배우는 것이 목표이기 때문에 타입스크립트는 나중에 확실히 공부하기로 하고 이번 토이프로젝트는 자바스크립트로 진행하기로 하였다. https://velog.io/@arenacast/Next.JS-Typescript-%EC%8B%9C%EC%9E%91%ED%95%98%EA%B8%B0 Next.js + TypeScript 시작하기 본 내용은 nextJS 와 nextJS + typescript 를 비교하기 위해 학습용 으로 작성되었습니다. 아래 내용대로 따라하시면 기본적인 세팅방법과 개발을 배우실 수 있습니다. 작업환경 OS : win10 Tool : vscode 기본 velog.io 현재 1.. [토이 프로젝트] 오심테(오늘의 심리테스트) 기획기 6월에 본격적인 프로젝트를 시작하기 전, 손 풀기 겸 새로운 스택 공부 겸 토이 프로젝트를 하기로 결심했다. 내가 선정한 토이 프로젝트 주제는 심리 테스트 모음집 애플리케이션이다! 평소 동생과 심리 테스트를 매우 즐겨했었고, 매번 네이버에 심리 테스트를 검색하고 원하는 심리테스트가 있는 블로그에 들어갔다 나왔다하며 심리테스트를 하는 것이 불편해서 재밌는 심리테스트 들을 모아놓은 사이트가 있으면 좋겠다는 생각에 선정하게 되었다. 특히 이번 프로젝트의 꽃은 Nextjs와 Vercel인데, 한 번도 사용해보지 않은 스택을 공부해보고 사용해보고자 한다! 아직 결정하지는 못했지만 Nextjs와 TailwindCSS가 함께 쓰이는 경우가 많고, TailwindCSS가 꽤 간단하다고 하니, TailwindCSS도 가.. 이전 1 2 3 다음
