프로젝트 (42) 썸네일형 리스트형 [NextJS] Image 컴포넌트 warning Image 관련하여 다음과 같은 warning이 떴다. 나는 분명 Image에 width와 heigth를 잘 지정해준 것 같은데도 저런 경고가 뜨니 의아했다. Next Image has either width or height modified, but not the other. If you use CSS to change the size of your image, also include the styles 'width: "auto"' or 'height: "auto"' to maintain the aspect ratio. 별거 별거 다 해봐도 해결이 안됐는데, 다음 글에 있는 답변을 보고 해결했다. https://github.com/vercel/next.js/issues/40762 [NEXT-649] n.. [NextJS & Firestore] getStaticPaths() 사용하여 동적 라우팅해주기 오늘은 각 테스트를 클릭 시 그 테스트의 세부사항을 가져올 수 있도록 동적 라우팅을 처리해줄 것이다! 물론 파이어스토어를 사용하여 데이터를 받아올 예정이다. 코드는 어제와 비슷하다. 다른 점은 딱 하나, getStaticPaths라는 메서드를 하나 더 썼다는 것이다. getStaticPaths 또한 NextJS에서 SSG를 위해 제공하는 메서드이다. 동적 페이지에 필요한 메서드이며 NextJS에게 어떤 동적 파라미터 value의 어떤 페이지가 pre-generate 되어야할지 알려준다. paths 프로퍼티의 값이 되는 배열의 요소인 객체의 params의 값에 해당하는 페이지를 미리 생성해둔다. 각각의 값 params은 페이지 이름에 사용된 파라미터와 일치해야 한다. fallback(필수)은 특정 path.. [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.. 이전 1 2 3 4 5 6 다음
