일단 그냥 css 쓰는거니깐 .. --> page.module.css 라고 되어있는데 뭐 따로 임포트할 것은 없다.
그러고보니 그동안 scss 를 쓰면서 nested 장점이 있다고 생각했는데.. 그냥 css 나 잘하자.
프로덕트의 종속성은 최소화해야겠다.
globals css 있던거에 다 지우고 normalize.css 넣어놈
기존 css 소스를 보니 그냥 css 에서도 변수 잘만 사용한다
🎨 CSS 변수(--variable) 사용법 & 응용 정리
CSS 변수 기능 복잡한 웹사이트 같은 경우 엄청난 양의 CSS를 가지고 있는데, 유지보수를 하다 보면 여러 곳에서 사용한 임의의 값을 한꺼번에 바꿔야 할 때가 있다. 그 값들을 하나씩 찾아서 일일
inpa.tistory.com
참고용
이거 기법 좋아서 메모
/* Enable hover only on non-touch devices */
@media (hover: hover) and (pointer: fine) {
.card:hover {
background: rgba(var(--card-rgb), 0.1);
border: 1px solid rgba(var(--card-border-rgb), 0.15);
}
.card:hover span {
transform: translateX(4px);
}
}
prettier는 진짜 만들어야하는게 맞는데, 혼자할꺼면 그냥 system prettier 쓰는게 낫다. -> vscode cmd + shift + p -> code formatting
이제는 그냥 코드도 초등학생이 이해할 수 있는 코드를 짜야겠다는 생각을 많이한다.
왜냐면 쉽고 한심한 코드가 비지니스에서는 훨씬 이득이다 아무리봐도 천재인척 신기술 새로운 플러그인 다 때려밖고 AI generated 똥꼬쇼하는 것보다 훨씬 낫다. - 최진우
아래 처럼 자식들은 다 100% 주고 중간에 wapper두고 가면 쉽게 된다. wapper의 부모는 알아서 저정도 대충..하구
헤더 작업중 . 로고는 어떻게 적용할까 하던찰나에 (import 필요)
https://nextjs.org/docs/pages/api-reference/components/image
Components: <Image> | Next.js
Optimize Images in your Next.js Application using the built-in `next/image` Component.
nextjs.org
다른 프로젝트 보니깐 Image 폴더는 src 하고 동일한 위치에 있는거 참고
https://nextjs.org/docs/app/building-your-application/routing/linking-and-navigating
Routing: Linking and Navigating | Next.js
Learn how navigation works in Next.js, and how to use the Link Component and `useRouter` hook.
nextjs.org
링크 : 참고로 넥스트에서는 기본이 링크 클릭하면 위로 쭉 땡겨준다. -> 이거 하기 싫으면 속성값으로 scroll false주면 된다. (다 자동으로 해주넹)
링크 보다가 dynamic route에 연결하는 방법이 있다고 함 (그것은 dynimic link)를 사용하는 것이라 함
https://nextjs.org/docs/app/building-your-application/routing/dynamic-routes
Routing: Dynamic Routes | Next.js
Dynamic Routes can be used to programmatically generate route segments from dynamic data.
nextjs.org
여기서 다이나믹 루트라는 개념에 대해서 하나 챙겨가구. 걍 다이나믹 하게 생성된 라우트 임(example 보면 이해됨)
https://birdmee.tistory.com/69
Next.js 에서 module import 시 alias 사용하기 (절대경로)
Next.js 공식 문서에서도 소개하고 있다. Advanced Features: Absolute Imports and Module Path Aliases | Next.js Configure module path aliases that allow you to remap certain import paths. nextjs.org 얼마 전 기술면접 과제를 제출했는
birdmee.tistory.com
에셋은 폴더는 만들었는데 읽히지가 않길래 걍 퍼블릭에 넣어뒀다. 위에 링크처럼 절대 경로 별칭 만들어서 써야되낭..
https://reacthustle.com/blog/nextjs-scroll-to-element
How to Scroll to an HTML Element in NextJS (with Typescript) | ReactHustle
In this tutorial, you'll learn how to scroll smoothly to an element in NextJS.
reacthustle.com
스크롤 스무스하게 내려오고 싶으면 이거하고,
이정도면 일단 기획이랑 스타일 작업좀 하고 다시 개발로 돌아와야겠음.
