nextjs4 [NextJS] Ubuntu Docker(도커) 이미지 빌드·컨테이너 실행 하기 간단 설명 목록 설명 Dockerfile Dockerfile은 도커 이미지를 빌드하기 위한 빌드 지시사항들을 포함한 텍스트 파일입니다. Dockerfile은 컨테이너 이미지를 구성하는 데 필요한 모든 단계와 명령을 정의합니다. .dockerignore 도커 빌드 과정에서 제외할 파일과 디렉토리를 지정하는 파일입니다. Dockerfile을 작성할 때 모든 파일이나 디렉토리를 이미지에 포함시키는 것은 필요하지 않을 수 있습니다. 특정 파일이나 디렉토리를 이미지 빌드 과정에서 제외할 수 있습니다. docker-compose 여러 컨테이너로 구성된 멀티 컨테이너 애플리케이션을 정의하고 구성하기 위해 사용되는 도구입니다. 애플리케이션의 서비스, 네트워크, 볼륨, 환경 변수 등을 정의할 수 있습니다. Docker .. 2023. 6. 1. [NextJS] Isotope-layout `window is not define` 오류 해결하기 `NextJS`에서 `isotope-layout`를 사용하려고 하면, `SSR` 환경에서는 `window is not define` 오류가 발생할 수 있습니다. 그래서 `Isotope`를 사용하는 곳을 `SSR을 풀어주고 다이내믹 링크를 통하여 해결`해볼 수 있습니다. 예제 `Home.tsx` const DynamicPortfolio = dynamic( () => import('src/components/Portfolio/portfolio'), { ssr: false, }, ) export default function Home() { return ( {/* */} {/* ... 등등 */} ) } `Portfolio.tsx` declare module Portfolio { interface Data {.. 2023. 1. 1. [NextJS] Swiper `swiper.params.navigation undefined` 해결하기 스와이퍼(Swiper)를 쓰다 보면, Init 과정에서 문제가 생기는 경우 간혹 발생이 됩니다. 인입되는 시점을 변경해 준다면, swiper를 쓰는데 크게 문제는 발생되지 않을 겁니다. 아래의 예제를 통해서 확인하여 수정하면 정상적으로 작동될 겁니다. 원래는 타입스크립트(Typescript)로 사용하지만, 예제는 자바스크립트(Javascript)이니 타입만 추가로 넣어주시면 될 것 같습니다. 변경 전 현재 스와이퍼(Swiper) 기준으로 최신 버전이 8.4.5입니다. 참고하여 수정하시면 될 것 같습니다. import { Swiper, SwiperSlide } from "swiper/react"; import SwiperCore, { Autoplay, Pagination, Navigation } from .. 2022. 12. 17. [Remix] 리엑트 리믹스 프레임워크 알아보기 리엑트(React) 리믹스(Remix)는 리엑트 라우터(React-Router)를 만든 개발자가 만들었습니다. Remix는 원래 라이선스 비용을 지불하는 유료 프레임워크였는데, 최근에 무료로 변경되었습니다. Remix 프레임워크 특징 Remix는 프로젝트를 시작할 때 어떤 종류의 서버에서 배포할 건지 선택하게 됩니다. 그 이유는 서버 측에서 렌더링(HTML) 하여 페이지를 보여주기 때문입니다. 즉, 프론트 서버에서 "JS" 코드를 읽고 "HTML"으로 렌더링 해서 보여줍니다. 이 결과로 유저는 하얀 화면(인터넷 속도가 느린 경우 포함), 로딩 중 화면을 볼일이 없습니다. (서버사이드 렌더링) 다만, 데이터를 불러오고 보여주는 과정이 조금 다릅니다. "loader"라는 함수를 통하여 "API"를.. 2022. 12. 5. 이전 1 다음
