[TIL] 코드 이해하기...프젝 시작 전 각종 복습 벼락치기

자ㅎㅎ

 

 

CSS!!!!

1. CSS @media

- CSS에서 분기 처리

예시) 화면크기 줄이면 navbar 위치 바꾸고 이런 거 가능

 

2. CSS @layer

- 우선순위 정해서 속성 적용,, 이런 거 가능

순위 위에다 써놓고 밑에 적용하면 위에 써놓은대로 적용되고, 위에다 안써놓으면 정의한 순서대로 우선순위 적용됨 (밑에쓴게 순위높음)

 

3. tailwind CSS @apply

 

4. CSS --속성

-- (두 개의 대시)는 CSS에서 사용되는 사용자 정의 속성을 나타내는 문법이다. 이를 CSS 변수로도 알려져 있습니다. 이러한 변수는 스타일 시트 내에서 값을 정의하고 참조할 수 있게 해준다.
예를 들어, --background는 사용자가 정의한 이름의 CSS 변수로 특정한 색상 값을 가지며, 나중에 스타일 시트의 다른 부분에서 이 변수를 참조하여 해당 색상을 사용 가능. 변수를 사용함으로써 일관된 디자인을 유지하거나 테마를 변경하기 쉬워짐

 

 

NextJS!!!!!!

: 그냥 리액트보다 신경쓸 게 적음(프레임워크에서 다 해주기때문), 그만큼 프레임워크가 해줄수있게 룰을 지켜야함

 

딴거랑 차이점

리액트: client-side render

브라우저가 js를 가져와서, client-side의 js가 모든 ui를 만듦. 브라우저는 js 코드가 오고나서야 ui를 만들 수 있음. 그래서 인터넷 연결 느린 곳에서 접속하면 js코드 불러오기전까지 흰화면만나올거임...로딩화면조차 코드가 와야 띄울수있으니 참 별로다~

Next.js: 

브라우저한테 html이 그대로 있음!! 그래서 html이 미리 렌더될거다. 또 js가 비활성화돼있어도 html이 보일거다

-> next.js가 리액트를 백엔드에서 동작시켜 페이지를 미리 만드는데 렌더 끝나면 html돼서 페이지 소스코드에 넣어주기 때문

 

그 룰들이 뭐냐

 

1. pages에다가 각 페이지 쓰면 됨

이때 명심할것.

- 파일명이 url에 그대로 들어감

- export default로 컴포넌트 만들어야 파일명을 url에 넣어서 드가는게 적용됨

 

2. jsx를 쓰고있다면 react를 import할 필요가 없음!!

- 걍 js파일에다가 써도 리턴할때 html 리턴시키면 됨

- 대신 useState같이 react의 기능을 써야한다면 import 해야됨

 

3. a태그 말고 Link 쓰자

import Link from 'next/link';

이렇게 불러와서

<Link href='/'>Home</Link>
<Link href='/about'>About</Link>

이렇게 쓰면 됨

 

a태그 쓰면 페이지 옮길때 화면이 refresh되고 느려짐

Link 쓰면 client-side 네이게이션을 제공해줘서 안 느리다

 

4. Router 쓰는법

 

import { usePathname } from 'next/navigation';

이렇게 불러와야됨

const path = usePathname();

이렇게 정의하고

<Link href='/' style={{ color: path === '/' ? 'salmon' : 'blue' }}>
    Home
</Link>

이렇게 쓰면 됨

 

5. CSS 적용

위에다가 한 거처럼 태그에 바로 쓰지는 않을거니까(하하...)

Navbar.module.css 이런 .module.css 형식의 파일에다 nav class의 스타일을 정의한 css를 써놓고, 

import styles from './Navbar.module.css';

이렇게 불러와서,

<nav className={styles.nav}>
    <Link href='/'>Home</Link>
    <Link href='/about'>About</Link>
</nav>

이렇게 사용!!

클래스를 프로퍼티처럼 쓰는거임!!

이렇게하면 브라우저에 올라올 때 클래스이름이 랜덤하게 머가 더 붙는데, 그러면 .btn 이런 흔한 클래스이름 막 써도 겹칠 걱정 안해도됨!!!

 

<Link
    href='/'
    className={`${styles.link} ${path === '/' ? styles.active : ''}`}>
    Home
</Link>
<Link
    href='/about'
    className={[styles.link, path === '/about' ? styles.active : ''].join(
        ' ',
    )}>
    About
</Link>

그래서 위에서 냅다 html에 style 넣은 걸 다시쓰면 이렇게 쓸 수 있다

<style jsx global>{`
    nav {
        background-color: lightpink;
    }
    a {
        text-decoration: none;
    }
`}</style>

그리고 이렇게하면 jsx 안에서 style을 정의할수있게됨.

그냥 태그 하나 추가해서 {}, 백틱 넣고 css 쓰면 됨!!

이게 좋은 점이

1 클래스명 일일이 정의 안해도 된다는점 (진짜 감사합니다)

2 한 컴포넌트 안에만 적용되니까 잘못해서 딴 데 적용될 걱정 안해도 된다는점 (개.쩐.다.)

 

그러면 전역으로 쓰일 CSS는 어케하냐.

_app.js에다가 한다.

index.js를 보기 전에 app.js를 먼저볼거기 때문에, 여기다가 청사진처럼 다 정의해놓으면 되는거임