Moostock(4) - Next.js module css (scss)

오늘은 Next에서 스타일 작성하는 방법에 대해 알아보겠다

 

노마드 선생님의 강의를 참고했다

 

리액트에서 css를 작성하는 방법은 여러가지가 있다

 

당연히 인라인 방식이 있고

 

styled component 방식이 있고

 

module 방식이 있다

 

styled component 도 리액트 하는 사람들이 많이 쓰는거 같은데

 

나는 옛날 리액트 프로젝트에 모듈방식을 쓰기도했고,

내 개인적 취향도 css파일은 따로 관리하는게 보기 좋기도하고

노마드 선생님도 모듈 방식으로 알려줘서

모듈 방식을 설명해보겠다

 

일단 나는 scss 사용할거라서

 

npm i scss 를 터미널에서 입력해서 scss를 설치해준다

 

일단 global.scss를 적용시켜 주겠다

 

styles 폴더에 global.scss 파일을 만들어주고

 

app폴더에 가장 바깥에 있는 layout.tsx에 import 해준다

 

그리고 이제 home 페이지에 css를 적용시켜 줄텐데

 

이때는 scss 파일명을 home.module.scss 이런식으로 중간에 module이 꼭 들어가야 하는거 같다

 

그렇게 한뒤에 page.tsx에서

 

이런식으로 import를 해준뒤 className에 styles.클래스명

 

이런식으로 적용시키면 된다

 

이때 import styles ~

이렇게 했는데 아마 이 styles는 이름을 바꿔도 될거다

 

근데 통상적으로 styles라고 많이 쓰는거 같다

 

아무튼 저런식으로 하면 모듈방식으로 scss작성하고 적용할 수 있다

 

css 적용이 가능해 졌으니

 

일단 메인페이지의 껍데기만 만들었다

ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ

 

좀 민망하긴 하지만

저 이미지는 AI로 만들었고 뭐 어차피 내 사이트니까 내 멋대로 만들었다

 

이제 다음 step은 차트페이지에 테슬라 주가를 받아와서 그래프로 보여주는게 필요하다

 

여러가지로 쉽지 않을거같다

 

일단 백엔드 서버가 없으니 api키나 여러가지를 저장하는 방법이 로컬스토리지나 쿠키같은거 밖에 없는데

 

api키를 저장하기엔 찝찝해서 일단 다 코드에 때려넣고 

 

다음에 node든 뭐든 api 만들수 있는거를 배워서 저장하는 식으로 해보겠다

 

아무튼 다음엔 멋진 차트를 들고 돌아오겠다! (제발)