본문 바로가기

분류 전체보기49

[웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성 2024.04.12 - [PROJECT] - [웹 포트폴리오 만들기] 1편 - 디자인 구상하기2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기2024.05.07 - [PROJECT] - [웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기2024.05.08 - [PROJECT] - [웹 포트폴리오 만들기] 4편 - fullpage 구현하기2024.05.21 - [PROJECT] - [웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기 앙드디어 포트폴리오 사이트 만들기 마지막 단계임. 거의 막바지여서 여러 해상도로 보며 테스트 중이었는데...모바일 반응형을 염두하지않고 만들어서 그런지 모바일로 봤을때 배치가 완전 엉망이 됨 미디어 쿼리를 이용.. 2024. 5. 31.
Next.js에서 "use client"과 메타데이터 오류 해결하기 문제상황Error: × You are attempting to export "metadata" from a component marked with "use client", which is disallowed. Either remove the export, or the "use client" directive. layoyt.tsx파일에서 "use client" 지시문 사용하다가 메타데이터 내보내기를 하면 오류가 난다.진짜 짜증남. 근데 해결 방법은 간단하다. 메타데이터는 서버 컴포넌트에서 내보내고, 클라이언트 컴포넌트는 따로 파일로 분리하면 됨.   해결법1.서버 컴포넌트에서 메타데이터 내보내기// layout.tsx - 서버 컴포넌트import { Metadata } from 'next'import Ex.. 2024. 5. 31.
리액트에서 줄바꿈 처리하는 방법 - CSS white-space 속성 쓰기 리액트에서 줄바꿈 처리하는 방법 - CSS `white-space` 속성 쓰기리액트로 개발하다 보면 텍스트 부분에서 줄바꿈이 제대로 안 돼서 열받잖슴?줄 바꿈 넣겠다고 \n넣고 해도 적용이 안됨...근데 해결법 간단함. 그거 `white-space` 속성 하나면 됨. 문제 상황 예를 들어, 우리 데이터가 이렇게 있다고 치자:const projectslist = [ { id: 1, type: "team", title: "GROW UP", description: "화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 사이트입니다.", descriptionDetail: `GROWUP은 화면이나 캠을 공유하며 다른 사람과 함께 공부할 수 있는 웹 커뮤니티 사이트입니다.\n .. 2024. 5. 27.
[웹 포트폴리오 만들기] 5편 - next로 모달 라우팅 구현하기 2024.04.12 - [PROJECT] - [웹 포트폴리오 만들기] 1편 - 디자인 구상하기2024.04.23 - [PROJECT] - [웹 포트폴리오 만들기] 2편 - NEXT 로딩화면 구현하기2024.05.07 - [PROJECT] - [웹 포트폴리오 만들기] 3편 - 디자인 갈아엎기2024.05.08 - [PROJECT] - [웹 포트폴리오 만들기] 4편 - fullpage 구현하기2024.05.31 - [PROJECT] - [웹 포트폴리오 만들기] 6편 - 모바일 반응형 구현과 ..최종 완성Intercepting Routes와 Parallel Routes을 이용해서 모달창 만들기웹앱에서 모달창 만들 때 Intercepting Routes랑 Parallel Routes 쓰면 사용자 경험도 상승하고.. 2024. 5. 21.

티스토리툴바