Frontend Mentor challenge) -nextJS와 styled-components로 Sunnyside agency landing page 만들기
주말 내내 진행하기에 CSS 만한 것이 없다고 생각한다.(그동안 RN만 보며 살다보니 css를 엄청나게 까먹은 것 떄문이기도 하다.)
그래서 그동안 잊고 있었던 CSS도 해볼겸, nextJS에서의 jsx구조도 공부할 겸
https://www.frontendmentor.io/challenges/sunnyside-agency-landing-page-7yVs3B6ef
에서 하나를 잡고 진행해보기로 하였다.
먼저, 위 url에서 static 이미지를 받고 진행해보기로 했다.
기술 스택은 다음과 같다.
"dependencies": {
"next": "12.2.5",
"react": "18.2.0",
"react-dom": "18.2.0",
"styled-components": "^5.3.5"
},
"devDependencies": {
"@types/node": "18.7.13",
"@types/react": "18.0.17",
"@types/react-dom": "18.0.6",
"eslint": "8.23.0",
"eslint-config-next": "12.2.5",
"typescript": "4.8.2"
}
사실을 말하면 CSS는 항상 잘하지 못했다고 생각한다. bootstrap, MUI, styled-components에 tailwindcss까지 (RN까지 합치면 더 많이) 아직도 flex에 대해서나 이것저것 모르는것이 많다고 생각하는데, 이번 기회에 공부가 잘 되면 좋겠다. 솔직히 걱정이 된다. 너무나도 예뻐 보이는 사이트여서..
다 끝나면 스토리북도 다시 붙여볼 생각이다.(아직 경험해보지 않아 모르겠지만, 프론트엔드 개발자가 두명 이상이고 한명이 컴포넌트 jsx만 전담하게 된다면, 스토리북은 jsx를 확인하는데 있어 최고라고 생각한다.)
1. 요구사항 설치하기
yarn create next-app sunny --typescript우선 위 명령어로 프로젝트를 만들어 준 뒤, styled-components를 깔아 주었다.
우선 기본 사양에다가
├── public
│ ├── favicon.ico
│ ├── images
│ │ ├── mobile
│ │ └── pc
│ └── vercel.svg
모바일, pc 버전 이미지를 저장하기 위해 폴더를 만들어 주었다.
사실은 srcset을 사용해서 서버(클라우드단)에서 breakpoints별로 다운받거나, uri 자체를 다르게 하거나 여러 방법이 있겠지만 받은 static images들이 하나씩 뿐이라 그냥 하나씩 넣어주도록 하였다.
그리고 styled.e 를 제작하기 전, babel 세팅이 필요하다고 했으므로 그것도 설정한다.
https://github.com/styled-components/babel-plugin-styled-components
라는 것이 자동으로 설치되었다.
babel 이란 무엇인가?
https://lihano.tistory.com/20
간단하게 내가 알고 있는 바는 서버에서 전송되는 JS 코드를 트랜스파일해서 크로스 브라우징 이슈를 해결하는 방안
compile - 코드를 기계어로 바꾸어 실제로 동작하는 방식
transpile - 작성된 JS 코드를 다른 런타임(브라우저)에서는 읽지 못하는 일이 발생할 수 있기 때문에(typescript나, styled-component나 하는 여러 사유로) 이것을 해당 브라우저에서 읽을 수 있도록 변환시켜 주는 것으로 알고 있다.
This plugin is a highly recommended supplement to the base styled-components library, offering some useful features:
1. consistently hashed component classNames between environments (a must for server-side rendering)
better debugging through automatic annotation of your styled components based on their context in the file system, etc.
various types of minification for styles and the tagged template literals styled-components uses
babel-plugin-styled-components
NextJS를 위한 바벨은 이런 일을 한다.
1. className이 nextJS에서는 해쉬된 값으로 응답이 오기 떄문에, 이를 읽을 수 있도록 한다.
2. 자동 annotation으로 디버깅을 돕는다.(이건 써보면 알듯)
3. styled-components가 사용하는 다양한 리터럴과 타입을 변환한다.
// ./.babelrc
{
"presets": ["next/babel"],
"plugins": [["styled-components", { "ssr": true }]]
}
이런 식으로 넣어주면 된다고 한다.
넥스트 JS에서는 기본적으로 크게 두가지의 CSS 사용법이 있는 것으로 알고 있다.
2. styled-components 세팅하기
위 사진처럼 globals.css는 맨 윗단의 ./pages/app.tsx에 import되어 다른 페이지들에서 해당 css 값을 조회할 수 있게 하고,
아래 Home.module.css는 모듈별로 .module이라는 이름을 붙여서, 해당 components나 page에 종속되게 하여 조회하는 것이다.
더 자세한 것은 역시 검색을 해봐야 알겠지만, nextJS 튜토리얼 역시 언제 전체를 다 읽어볼 예정이다.
쓰던 방법대로 styled.element를 추가하여 실제로 넣어보니,
잘 실행되었다.
그리고 맥북을 새로 구매하였는데, 윈도우에 비해서 스크린샷 찍기가 아주 편해졌다.
가장 저렴한 8gb를 구매하였는데도 역시 체감상 윈도우 노트북보다 작업하기 빠르다.
