나의 코딩일지

임시  리액트BrowserRouter 대신 HashRouter를 사용한다.Next output: "export"Next.js를 Static Generation 배포할 때, 빌드된 파일들을 보면 각 페이지가 index.html과 페이지명.html로 구성된 것을 확인할 수 있다. trailingSlash: true를 추가해주면 된다./** @type {import('next').NextConfig} */const nextConfig = { output: "export", exportTrailingSlash: true };export default nextConfig; next.config.js Options: trailingSlash | Next.js next.config.js Options: trailin..

임시저장으로 놔둘땐 그냥 룰루랄라 빨리 끝나고 자야지 였는데 6시간동안 못잤다카페인보다 효과 좋은 에러파티.. DB도 쓰지 않는 회사 소개 페이지였기 때문에 SEO가 가장 중요했다. 그래서 처음에 리액트로 진행하다가 SSG 시도해보고 바로 Next.js로 갈아탔다. 그러고 순조롭게 진행되나 했더니 배포에서 6시간 걸렸다..^^ 반응형이나 호환성은 진짜 홍보 페이지다보니 신경쓸 수 밖에 없었고, 신경쓰다보니 결과물이 맘에 들어서 배포도 만만하게 봤던듯하다.. 배포 왜 하는지 흥미안생겨서 모른척 했던 과거를 너무 원망함..가비아 컨테이너호스팅도메인은 이미 구입하신 상황이어서 호스팅도 가비아 업체로 희망하셨다. 알아보면 알아볼수록 웹페이지 유지비용 너무 크다. 모든게 다 구독경제.. 찾아보면서 워드프레스나 아..

처음에 스크롤 난리였지만,, 특정 너비에서는 적용이 안되니까 일단 마크업부터 진행을 했다.그러다가 이정도면 괜찮지~라고 정신승리하고 그냥 냅다 overflow:hidden이랑 스크롤 없앴다.body { overflow-x: hidden; overflow-y: auto;}이러면 묘하게 센터는 아니지만 그래도 불편하지 않게 마크업을 진행할 수 있다. 하지만,,모바일에서 보면,,엉망진창!애꿏은 패딩과 마진만 찾아다니다가 너비를 지정해보면서 찾아낼 수 있었다.스크롤 단위의 문제였다.. width: 100%width: 100vw 100%는 스크롤을 제외한 너비를 의미한다.100vw는 스크롤을 포함한 너비를 의미한다.  {children}  :root { --vh: 100vh; /* 전체..

영어로 쓰면 어휘력이 실종된다. 원래없었던거같기도 ~_~ /* 사실상 결과물이 같은데 굳이 고집할 이유가 없어서 Next로 이동했슴니다 next.config.js에 output: export만 추가하면 SSG가,,*/CSR(Client Side Rendering)Think about Single Page Application(SPA) and Client Side Rendering(CSR). They provide an empty HTML file to the client. In this HTML file, JavaScript files are called. CSR means that, by using this empty HTML, the web page loads quickly, and the con..