1. 정적 이미지 파일 사용하기 프로젝트 안에서 고정된 파일명을 가지고 있는 파일을 사용하려면 우선 프로젝트 경로에서 ./public 폴더에 파일을 넣어줍니다. import Image from 'next/image' function Avatar() { return } export default Avatar 이미지를 예로들어 ./public/me.png 경로에 파일이 존재하면 아래처럼 src 속성에 알맞게 파일명을 넣어주면 해당 경로의 파일에 접근할 수 있습니다. 공식 문서에 여러 주의사항있어 참고하면 좋겠습니다. 2. 주의사항 Next/image를 사용하려면 10 버전 이상만 사용 가능 public 폴더 명은 동적 파일 사용을 위한 유일한 폴더이므로 이름을 변경하면 안된다. pages 폴더에 있는 파일 ..
2021.12.31 2
이전 리액트로 SPA(Single-Page-Application) 형태의 간단한 텍스트 게시판을 만들어 봤었다. CSR(Client Side Rendering)은 서버로부터 첫 로드 시 모든 자원을 다운로드하여 브라우저에서 랜더링을 진행하는 방식이기 때문에 초기 로드 시간을 제외하고는 사용자는 부드럽게 이용할 수 있다. 직접 만들어본 간단한 게시판이다. 처음 접속 했을 때, 잠깐의 로딩 애니메이션이 보이고 첫 페이지가 랜더링 된다. 로딩 중에는 자바스크립트 파일과 게시판 데이터가 브라우저에 다운로드된다. 로딩이 완료됐다면 이때부터 서버와의 연결은 필요 없다. 페이지에서 게시판 글을 모두 읽을 수 있을뿐더러 인터넷 접속이 끊기더라도 글 읽기도 가능했다. Simple Forum This website is ..
2021.08.30
새로운 블로그로 이사했습니다. 😆
Home | 꾸생 블로그
프론트엔드 개발 블로그입니다. 사소한 것도 기록합니다 :)
kku.dev