📝 학습 목표
- CSS-in-JS에 대해 이해하고 기존의 CSS를 해당 방식으로 수정할 수 있다.
- esLint와 Prettier에 대해 이해하고 활용할 수 있다.
CSS-in-JS
🌸 CSS-in-JS에 대해 설명해주세요
CSS-in-JS는 문구가 뜻하는 그대로, JavaScript 코드 내에서 CSS 스타일을 정의하고 관리하는 접근 방식입니다.
이 방식은 React 및 다른 JavaScript 기반 웹 프레임워크 및 라이브러리와 함께 사용되며,
CSS 스타일을 Component와 결합하여 모듈화하고 scope 지역화된 스타일을 생성하는 데 도움을 줍니다.
🌸 Styled-Components에 대해 설명해주세요
Styled-Components는 기존 DOM을 만드는 방식인 CSS 파일을 밖에 두고, 태그나 id, class이름으로 가져와 쓰지 않습니다.
동일한 Component에서 Component 이름을 쓰듯, 스타일을 지정하는 것을 Styled-Component라고 부릅니다.
CSS 파일을 밖에 두지 않고, Component 내부에 넣기 때문에, CSS가 전역으로 중첩되지 않도록 만들어주는 장점이 있습니다.
Styled-Component를 사용하기 위해선 설치를 해줘야합니다.
yarn add styled-components
기존에는 class 이름에 CSS 스타일을 작성해줬다면, Styled-Components에서는 작성한 이름으로 바로 JSX에서 사용할 수 있습니다.
🌸 기존에 CSS로 작성한 파일을 Styled-Components 파일로 수정해주세요 (어떤 파일이든 상관없습니다)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<script src="./index.js"></script>
<style>
.Circle {
width: 5rem;
height: 5rem;
background: black;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="Circle"></div>
</body>
</html>기존 HTML 파일
import styled from 'styled-components';
const Circle = styled.div`
width: 5rem;
height: 5rem;
background: black;
border-radius: 50%;
`;
function App() {
return <Circle />;
}
export default App;Circle.jsx
Styled-Components로 수정한 파일
Styled-Components의 작성 방법은 다음과 같습니다.
const 컴포넌트명 = styled.태그명`
... 스타일 넣기 ...
`
만들고자 하는 Component의 render 함수 밖에서 작성하며, … 부분에 원하는 스타일을 작성하면 됩니다.
참고로 스타일을 묶을 때는 ‘…‘(작은 따옴표)나 “…”(큰 따옴표)가 아니라 ...(백틱)으로 묶어줍니다.
백틱은 ~ 자리에 있는 문자를 뜻합니다.
🌸 Styled-Components를 분리해서 사용하는 방법을 설명해주세요.
우선, Styled-Component를 분리하는 이유는 프로젝트를 진행하다 보면 같은 내용의 style을 여러 곳에서 똑같이 사용하는 경우가 있기 때문입니다.
이때 Styled-Components의 분리를 통해 중복을 방지하고 재사용성을 높여 좀 더 효율적으로 사용할 수 있습니다.
export
Styled-Components를 분리하는 방법은 다음과 같습니다.
먼저 컴포넌트와 분리된 Styled-Components를 모아둘 파일을 만듭니다.
각각의 컴포넌트에 export를 붙여 다른 파일에서도 사용할 수 있도록 만들어줍니다.
import styled from 'styled-components';
export const Circle = styled.div`
width: 5rem;
height: 5rem;
background: black;
border-radius: 50%;
`;Circle.style.jsx
import
위에서 만든 파일을 사용하고 싶은 곳에 가져와야 합니다. import를 통해 해당 파일을 불러옵니다.
import { Circle } from './Circle.style';
function App() {
return <Circle />;
}
export default App;Circle.jsx
import해서 사용할 때, 컴포넌트를 하나씩 가져오는 방식이 아니라, 별칭을 사용하는 방법도 있습니다.
import * as S from './Circle.style';
function App() {
return <S.Circle />;
}
export default App;
이번 예시에서는 컴포넌트가 하나 밖에 없어서 크게 와 닿지 않지만, 컴포넌트의 갯수가 늘어나는 프로젝트에서는 별칭을 사용하면 많은 수의 컴포넌트를 모두 호출할 필요가 없이 쉽게 사용할 수 있습니다.
🌸 [심화]Styled-Components에 props를 적용하는 방법을 설명해주세요.
Styled-Components를 사용하는 장점 중 하나가 변수에 의해 스타일을 바꿀 수 있다는 점입니다.
import React, { useState } from "react";
import styled from "styled-components";
function Example() {
const [email, setEmail] = useState("");
return (
<ExampleWrap active={email.length}>
<Button>Hello</Button>
<NewButton color="blue">Im new Button</NewButton>
</ExampleWrap>
);
}
const ExampleWrap = styled.div`
background: ${({ active }) => {
if (active) {
return "white";
}
return "#eee";
}};
color: black;
`;
const Button = styled.button`
width: 200px;
padding: 30px;
`;
// Button 컴포넌트 상속
const NewButton = styled.Button`
// NewButton 컴포넌트에 color가는 props가 있으면 그 값 사용, 없으면 'red' 사용
color: ${props => props.color || "red"};
`;
export default Example;
위의 예시를 보면, email이라는 state 값에 따라 ExampleWrap에 prop으로 내려준 active라는 값이 true of false로 바뀌게 됩니다.
Styled-Components는 내부적으로 props를 받을 수 있고, 그 props에 따라 스타일을 변경할 수 있습니다.
반응형 웹 페이지
🌸 반응형 디자인에 대해 설명해주세요
반응형 디자인은 웹 페이지가 모든 화면 크기와 해상도에서 잘 렌더링되도록 하면서 사용성을 보장하는 디자인 방식입니다. 멀티 디바이스 웹을 위한 디자인 방식입니다.
즉, 핸드폰이나 데스크탑 등 어떤 기기로 접속해도 화면 구성이 잘 나타나도록 디자인 하는 것을 뜻합니다.
🌸 미디어 쿼리에 대해 설명해주세요
미디어 쿼리는 반응형 디자인을 작성할 때 많이 사용하는 방법입니다.
media라는 키워드로 사용하며, 예시는 다음과 같습니다.
.title {
font-size: 40px;
}
@media (max-width: 550px) {
.title {
font-size: 20px;
}
}
타이틀의 텍스트 크기를 40px로 하되, 550px보다 작은 화면에서는 20px로 줄인다는 내용입니다.
미디어 쿼리는 대부분 CSS 파일 내에 직접 작성합니다.
🌸 CSS 단위들에 무엇이 있는지 조사해보고, 각각의 단위에 대해 설명해주세요
CSS의 단위에는 px, em, rem, vw, vh, % 등이 있습니다.
px
px은 절대 길이 단위에 속하며, 다른 요소들의 크기와 상관없이 항상 동일한 값으로 간주됩니다.
한 번 16px이라는 값이 주어졌다면, 주변의 어떤 요소와도 상관없이 고정된 값을 가집니다.
em, rem
em과 rem은 비슷하지만, 어디를 기준으로 하는지가 다릅니다.
em은 자기 자신의 font-size를 기준으로 하고, rem은 root 요소인 <html>의 font-size를 기준으로 합니다.
1em과 1rem의 크기는 기준으로 하는 font-size에 따라 정해집니다.
em의 경우 자기 자신의 font-size가 16px이라면, 1em또한 16px이 됩니다.
rem 또한 root의 font-size가 16px이라면 1rem은 16px이 됩니다.
만약 1.5em이라고 작성한다면 16*1.5=24px이 됩니다.
%
%는 항목에 따라 기준이 다릅니다.
font-size에 %를 줄 경우, 상위 요소의 font-size를 기준으로 합니다.
따라서 test1의 font-size를 20px이라고 설정하고, 하위 요소인 test2의 font-size를 200%라고 하면 20px의 2배인 40px이 되는 것을 확인할 수 있습니다.
padding과 margin의 경우는 상위 요소의 width를 기준으로 합니다.
그래서 test2 클래스의 padding 사이즈를 10%로 해놓으면, 상위 요소인 test1 클래스의 width의 10%만큼 패딩 값이 주어지는 것을 볼 수 있습니다.
vw, vh
vw와 vh는 vertical width, vertical height의 약자입니다.
vw와 vh는 뷰포트 크기의 100분의 1에 해당하는 단위입니다.
예를 들어 브라우저 창의 넓이가 500px일 때 1vw는 5000.01을 한 값인 5px이 됩니다.
vh 또한 브라우저 창의 높이가 500px이라면 1vh는 5000.01을 한 5px이 됩니다.
각각의 단위들이 주로 쓰이는 상황은 어떤 상황일까요?
반응형을 디자인 할 때는 주로 rem을 사용합니다.
px같은 경우는 border나 shadow 값에 얇게 표현할 때, 그리고 positoin:absolute/fixed와 같이 특수한 그림을 표현할 때 쓰입니다.
vw, vh의 경우엔 특수한 디스플레이를 지정해줄 때 사용합니다.
%는 높이와 너비를 특정 비율만큼 채울 때에 사용합니다.
여러가지 단위가 있지만, 우선은 미디어 쿼리를 통해 화면을 정의하여 CSS가 섞이지 않게 격리해둡니다.
그런 다음 화면의 특성에 따라 단위를 적용하면 됩니다!
ESLint
ESLint와 Prettier에 대해 설명해주세요
ESLint와 Prettier 모두 코드 컨벤션을 잡아주는 역할을 합니다.
ESLint는 코드 퀄리티를 보장하도록 해주고, Prettier는 코드 스타일을 깔끔하게 혹은 통일되게 도와줍니다.
특히, 많은 사람들과 협업할 때 에러와 코딩 스타일을 잡아주기 때문에 한 사람이 코딩한 것처럼 합칠 수 있어 많이 쓰입니다.
ESLint
개발 중 특정 기능을 구현할 때, 그 기능을 구현하기 위한 많은 방식이 있습니다.
// function 키워드 사용
function foo() {
...
}
// arrow function 사용
const foo = () => {
...
}const Temps = [1,2,3,4,5];
// for문 사용
for(let i = 0; i < Temps.length; i++){
...
}
// Array 내장 함수 사용
Temps.forEach((temp) => {
...
})
예를 들어 함수를 정의할 때, 일반 function 키워드의 함수로 정의할 수도 있고, arrow function을 쓸 수도 있습니다.
또 배열의 반복문을 돌릴 때 일반 for문을 돌릴 수도 있지만, forEach, map 등 Array 내장 함수를 사용할 수도 있습니다.
이처럼 여러 방식의 코드 작성법이 있는데, 이러한 방식을 일관성있는 방식으로 구현할 수 있도록 잡아주는 것이 ESLint가 하는 역할입니다.
Prettier
Prettier는 ESLint처럼 ‘코드 구현 방식’이 아닌, 줄 바꿈, 공백, 들여쓰기 등 에디터에서 ‘텍스트’를 일관되게 작성되도록 도와줍니다.
const foo = () => {
const a = [1, 2, 3]; // 스코프 내부 작성 시 두 공백 들여쓰기
}
// <= 빈 줄이 한 줄 이상 안됨.
foo();
ESLint로 소스 코드에 숨어있는 문제 찾기
Engineering Blog by Dale Seo
www.daleseo.com
ESLint 설정 살펴보기
ESLint 설정을 위한 config에 대해서 살펴봅니다. ESLint Configuration은 eslintrc.* 파일 또는 package.json의eslintConfig 필드에 작성할 수 있습니다. ESLint의 핵심 구성 정보는 세가지 영역으로 나누어져 구성
velog.io
3. styled-components · GitBook
03. styled-components 이번에 배워볼 기술은 CSS in JS 라는 기술입니다. 이 문구가 뜻하는 그대로, 이 기술은 JS 안에 CSS 를 작성하는 것을 의미하는데요, 우리는 이번 튜토리얼에서 해당 기술을 사용하
react.vlpt.us
'WEB 개발 공부' 카테고리의 다른 글
| Chapter 6. LifeCycle & Hook (0) | 2024.04.09 |
|---|---|
| Chapter 5. Handling Event & Conditional Rendering (0) | 2024.04.09 |
| Chapter 3. 리액트 기초 및 기본 요소 (0) | 2024.03.31 |
| Chapter 2-2. 리액트 환경 구축 (0) | 2024.03.31 |
| Chapter 2. 퍼블리싱 심화 및 자바스크립트 기초 (0) | 2024.03.31 |