Today 요약
- styled-components
- tailwind
- LightHouse
- prettier
1. What I did?
1.1 과제
styled-components 사용해보기
실제로 사용해보는 부분은 공식문서를 참고하면 되기 때문에 오늘 시도한 방법으로 간략하게만 정리해보자.
styled-components를 사용하려면 일단 npm으로 설치하고
npm install styled-components스타일 변수를 관리할 js파일을 하나 만든다. 그리고
import styled from 'styled-components'styled를 import해온다. 이때 styled를 다른 이름으로 선언해도 상관없는 것 같다. 그냥 styled-components를 가지고 와서 변수에 담는다고 생각하면 될 것 같다.
그렇게 한 뒤에 스타일 컴포넌트를 입히고 싶은 부분을 원하는 태그를 통해 정의하고 그걸 export해서 다른 컴포넌트에서 해당 스타일을 import해서 사용할 수 있도록 한다.
import style from 'styled-components'
export const OptionWrap = style.div`
width: 25%;
`
export const Button = style.button`
width: 90%;
color: white;
background-color: gray;
border-radius: 5px;
margin-top: 30px;
`
export const OptionItem = style.div`
padding: 10px;
margin-top: 10px;
`import { DescriptionWrap } from './styles/DescriptionStyles'스타일을 정의할 때 중첩적으로 정의할 수도 있는데, 오늘은 간단하게 사용해보는 부분이니까 이 정도에 마무리했다.
tailwind 사용해보기
원하는 프로젝트에서 taiwindcss 를 설치한다.
npm install -D tailwindcss그리고 init으로 초기화하면서 tailwind.config.js 파일 생성한다. 그리고 tailwind.config.js 파일을 아래와 같이 작성한다. content 부분에 tailwind를 사용할 파일 확장자를 등록한다.
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ['./src/**/*.{html,js,jsx}'],
theme: {
extend: {}
},
plugins: []
}그리고 리액트의 경우 가장 상위 컴포넌트의 css 파일인 index.css 파일에 아래 코드를 작성한다.
@tailwind base;
@tailwind components;
@tailwind utilities;이렇게 세팅하고 나면 리액트 컴포넌트 내부에서나 html 코드 내부에서 tailwindcss 코드를 작성해서 스타일링 할 수 있다. 태그의 클래스 안에 대략 아래와 같이 tailwindcss의 규칙을 사용해서 스타일링 하면 된다.
const Option = () => {
return (
<div className="w-1/3 ml-20">
<h1 className="text-3xl">2,000</h1>
<div className="mt-4">
<span>평점</span>
<span>...........</span>
</div>
<div className="mt-6">
<div>color</div>
<div>칼라 이미지</div>
</div>
<div className="mt-6">
<div>
<div>Size</div>
<div>...</div>
</div>
</div>
<button className="mt-10 w-72 text-2xl text-center text-white bg-zinc-500 rounded-md">
Add to buy
</button>
</div>
)
}
export default OptionLightHouse 성능 측정하고 부족한 점수 올려보기
dice-game 프로젝트를 완성하고 나서 LightHouse로 성능 측정을 해보라고 하는 과제가 주어졌다. 그래서 최근에 완성된 프로젝트이기도 해서 dice-game으로 LightHouse를 돌려봤는데 간단한 프로젝트여서 그런지 전체적으로 괜찮은 점수가 나왔다. 그래도 그 중에 검색엔진 최적화 부분이 조금 적게 나와서 해당 부분을 어떻게 올리면 좋을지 검색해봤고, meta태그의 정보를 좀 더 자세하게 작성하면 좋을 것 같아서 아래와 같이 작성했다.
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta
name="description"
content="주사위 게임 프로젝트: 두 명의 플레이어가 차례로 주사위를 굴리고 스코어를 얻는 게임입니다."
/>
<meta name="keywords" content="주사위 게임, 다이스 게임, 게임 프로젝트" />
<link rel="stylesheet" href="style.css" />
<title>주사위 게임 - Dice-Game</title>
</head>그렇게 하고 다시 LightHouse를 돌려보니 검색엔진 최적화 부분의 점수가 확연하게 좋아졌다. 리액트를 다루거나 Next를 다루다보면 라우팅 처리를 하면서 페이지가 여러개가 될 수 있는데, 그럴 때 검색엔진 최적화를 하려면 페이지마다 meta의 정보가 페이지에 맞게 적절하게 제공되어야 하는 걸로 알고 있다. 그 부분은 그때가서 알아보고 시도해보자. 지금은 이 정도로 인지하고 있기만 하자.
prettier 설정
이제 조만간 팀 프로젝트를 진행하는 데 그전에 적어도 프론트끼리 컨벤션 맞추는 부분은 나 혼자라도 환경 설정을 해보면서 미리 해봐야겠다. 물론 Lint도 해야하지만 오늘은 prettier 부분만 설정해보았다. 예전에 물론 prettier 설정을 했었지만, 한 동안 안 해서 그런지 뭔가 새로운 느낌이었다. 내가 미리 알고 있어야 팀 프로젝트를 할 때 다른 팀원들한테 주도적으로 설명을 잘할 수 있을 것 같다. 그리고 물론 나중에 프로젝트에 대해서 발표할 때도 이런 경험들이 도움이 될 거라 생각한다.
그래서 내가 이번에 설정한 prettier 규칙들은 아래와 같다. 일단 보통 많이 사용하는 것들보다 더 많이 시도해봤다.
{
"printWidth": 120,
"tabWidth": 2,
"useTabs": true,
"semi": true,
"singleQuote": true,
"quoteProps": "consistent",
"bracketSpacing": true,
"endOfLine": "auto",
"arrowParens": "always",
"trailingComma": "all",
"jsxBracketSameLine": "true"
}간단하게 요약하자면 한 줄에 120글자가 넘어가지 않게 하고 탭 간격은 2로 설정하고 간격을 띄울 때 탭 사용가능하면 자바스크립트 코드의 끝에 세미콜론을 사용하고 문자열은 싱글 쿼트로 감싸고 화살표 함수 사용할 때 인자가 하나면 괄호를 사용한다. 그 외에도 추가적으로 quoteProps, endOfLine, jsxBracketSameLine 옵션을 사용했지만 크게 중요한 부분은 아니라고 생각해서 일단 설명은 생략한다.
