[adv-1단계] 송혜정 미션 제출합니다. #2
Conversation
There was a problem hiding this comment.
안녕하세요 혜정님!
self-paced-react의 step5를 그대로 들고 온 후 styled-components를 적용하셨네요.
음... 처음에 저는 step5를 완료한 상태에서 styled-components를 적용해야 하는 건지 그냥 index.html을 App.jsx에 복사한 뒤 styled-components를 적용하는 건지 몰라서 고민하다가 후자를 택했는데 전자가 맞았나 보네요...😂
혜정님은 평소에 styled-components를 사용하셨어서 이번 미션은 금방 하셨을 것 같아요👍
그리고 스타일을 다른 파일로 분리하지 않고 jsx 파일 안에 작성하셨던데 혜정님은 원래 스타일링도 같은 파일에 두는 편이신지 궁금합니다!
이번 미션도 수고많으셨습니다!
src/App.css
Outdated
There was a problem hiding this comment.
README에서 App.css는 다음과 동일해야 한다고 했는데
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
ul,
li {
list-style: none;
}
html,
body {
font-family: sans-serif;
font-size: 16px;
}
/* Colors *****************************************/
:root {
--primary-color: #ec4a0a;
--lighten-color: #f6a88a;
--grey-100: #ffffff;
--grey-200: #d0d5dd;
--grey-300: #667085;
--grey-400: #344054;
--grey-500: #000000;
}App.css에서 Typography 부분을 없애면서 폰트를 적용할 수 있게 하는게 좋지 않을까요?!
| input[name='name'], | ||
| input[name='link'] { |
There was a problem hiding this comment.
오 저도 styled-components를 사용해왔는데 이건 처음 보는 것 같아요. 이렇게도 할 수 있네요.
| import WesternIcon from '../../../assets/category/category-western.png'; | ||
|
|
||
| const getCategoryIcon = (alt) => { | ||
| switch (alt) { |
|
예은님 안녕하세요 리뷰 감사합니다 👍
저는 원래 styled-component를 사용할 때 같은 파일에 두는 편인데 협업할 때는 대부분 파일을 따로 두더라고요! 그럴 때는 맞춰서 합니다! |
There was a problem hiding this comment.
안녕하세요 혜정님 코드리뷰를 마쳤습니다! 금요일 저녁에 리뷰요청을 받았는데 그 때 백준을 열심히 풀고 있던 때라 토요일 쉬고 오늘 되어서야 리뷰를 하게 되었네요😢 평소에 styled-components 를 써오셔서 그런지 자연스럽고 편하게 코드를 작성해주신 것이 인상깊었어요. styled-components가 어떻게 작동하는지 저도 얕게만 파봐서 몰랐는데 이 메시지를 보고 확인해보는 시간을 가지면 좋을 것 같네요. 저는 그럼 README에 적혀있던 브라우저가 웹 페이지를 렌더링하는 구조와 과정에 대해서 적어보도록 할게요!
브라우저의 웹 페이지 렌더링
DOM
<!DOCTYPE html>
<html lang="en">
<head>
<title>Simple Page</title>
<style>body { background-color: blue; }</style>
</head>
<body>
<header>
<h1 style="display:flex;">Hello, World!</h1>
</header>
<main>
<p>안녕하세요?</p>
</main>
</body>
</html>html은 웹페이지를 구성하는 뼈대라는 것을 아실거에요. 이 코드를 그대로 메모장에 넣어서 .txt 확장자로 열어보면…? 그냥 텍스트일 뿐입니다. 이 텍스트를 브라우저가 HTML로서 읽어내었을 때 DOM이라는 실체를 만들어내게 돼요. 이 과정을 parsing이라고 합니다.
CSSOM(CSS Object Model)
HTML로부터 DOM이 만들어지듯 CSS로부터는 CSSOM이 만들어지는데요. 위의 코드를 CSSOM Tree는 아래처럼 만듭니다.
CSSStyleSheet (style.css)
└── CSSRuleList
├── CSSRule (h1)
│ └── CSSStyleDeclaration
│ └── (whatever you styled) props: value
└── CSSRule (section)
└── CSSStyleDeclaration
├── (whatever you styled) props: value
└── (whatever you styled) props: value
CSSStyleSheet (internal styles)
└── CSSRuleList
└── CSSRule (body)
└── CSSStyleDeclaration
└── background-color: blue
CSSStyleSheet (inline styles)
└── CSSRuleList
└── CSSRule (h1)
└── CSSStyleDeclaration
└── style=display:flex
실제로 document.styleSheets 를 브라우저에서 동작시키면 css파일과 내부스타일로 작성된 CSSOM의 객체들을 볼 수 있어요. (시간이 되시면 vanila로 아무거나 html만들어서 동작시켜보세요!)
document.styleSheets
따라서 우리가 보는 브라우저의 화면은 DOM + CSSOM이 결합된 결과라고 볼 수 있어요. 이 결합을 통해 Render Tree를 만들어냅니다. DOM의 각 노드가 CSSOM에서 계산한 값들을 기반으로 각 요소의 style을 포함하는 Render Object를 만들어 Render Tree에 붙이게 되는거죠.
Render Tree
│
├── body (background-color: blue)
│ ├── header
│ │ └── h1 (display: flex, text: "Hello, World!")
│ └── main
│ └── p (text: "안녕하세요?")
물론 DOM에 모든 요소들이 포함되지는 않아요. 화면에 나타내야 할 것만 들어갑니다. 즉, h1 → display:none 이라면 제외됩니다.
브라우저의 동작
DOM과 CSSOM은 브라우저들이 제공하기로 표준화 되어있는 기능중 일부인데요. 이 “표준화 되어있는 기능”을 WebAPI라고 불러요. WebAPI는 즉, 브라우저가 오류없이 기능하다면 사용자가 JS를 통해 사용할 수 있도록 제공해야하는 기능을 의미합니다!
대표적으로는 event,timer,webStorage,Canvas,AJAX등이 있어요.
이렇게 DOM과 CSSOM 그리고 브라우저가 Composing 되기까지의 과정을 적어봤어요! 😄 이번주 미션도 수고하셨고 저는 Approve로 남긴채 @wzrabbit 님에게 바통 넘기도록 하겠습니다! 리뷰에 대한 답변은 꼭 달아주세요! 고생하셨습니다!
| /* Colors *****************************************/ | ||
| :root { | ||
| --primary-color: #ec4a0a; | ||
| --lighten-color: #f6a88a; | ||
| --grey-100: #ffffff; | ||
| --grey-200: #d0d5dd; | ||
| --grey-300: #667085; | ||
| --grey-400: #344054; | ||
| --grey-500: #000000; | ||
| } |
There was a problem hiding this comment.
요구사항 명세에 아래처럼 나와있었어요. 그대로 잘 적용해주셨네요!
:root 에서 color styling선언을 통해 전역으로 색 해시값을 문자로 나타내게 할 수 있었는데요. 만약 이것을 styled-components 의 기능 중 하나를 사용해서 전역으로 선언할 수 있다면 어떤 기능을 사용하면 될까요? 🤔
Note
힌트는 저희 스터디 시간에 공유했던 내용중에 있습니다! 답을 찾으신 후 시간이 괜찮으시다면 그걸 토대로 리팩토링해주셔도 되고 다음미션과 현생이슈로 할일이 너무 많다면 이대로 해주셔도 무방해요😆
| const RestaurantDescription = styled.p` | ||
| display: -webkit-box; | ||
| padding-top: 8px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| -webkit-line-clamp: 2; | ||
| -webkit-box-orient: vertical; | ||
| font-size: 16px; | ||
| line-height: 24px; | ||
| font-weight: 400; | ||
| margin-bottom: 20px; | ||
| `; |
There was a problem hiding this comment.
webkit을 사용해서 설명 글을 구성하셨군요. 모든 Description에 같은 룰을 부여한다는 점에서 좋은 코드인 것 같습니다. 다만 한가지 우려되는 점이 있는데요! -webkit 접두사는 소위말해 잘나가는(?) 브라우저에서는 전부 사용가능해요. 왜냐하면 -webkit- 접두사가 붙은 CSS 속성은 주로 Webkit 기반 브라우저(예: Chrome, Safari)에서 동작하도록 설계된 속성이기 때문인데요.
브라우저 중 Firefox라던지 Internet Explorer (IE) 등 브라우저에서는 webkit을 지원하지 않아 혜정님이 원하시는 동작을 브라우저에서 제대로 수행할 수 없는 경우도 생길 수 있어요. 만약 임의의 사용자가 이러한 문제에 대해 리포트를 했을 때 혜정님이라면 어떻게 대처하실 건가요? 🤔
자유롭게 혜정님의 의견을 들려주세요!😄
| & > select { | ||
| height: 44px; | ||
| min-width: 125px; | ||
| border: 1px solid #d0d5dd; | ||
| border-radius: 8px; | ||
| background: transparent; | ||
| font-size: 16px; | ||
| padding: 8px; | ||
| } |
There was a problem hiding this comment.
🇶🇦 질문입니다!
&는 뭘까요?&순수 CSS에서 작동할 수 있을까요?
순수 CSS란CSS 전처리기(preprocessor)나 도구의 도움 없이 작성된 기본 CSS 코드를 의미합니다.- 이 코드를 순수 CSS코드로 바꾸면 어떻게 될까요? 프로젝트 코드엔 적용하지 마시구 이 코드에 대해서 답변에 코드블럭으로 적어주세요!
| display: -webkit-box; | ||
| padding-top: 8px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; |
| const newRestaurant = { | ||
| id: Date.now(), | ||
| category: category, | ||
| name: name, | ||
| description: description, | ||
| }; |
There was a problem hiding this comment.
이건 이번 미션과 관련없는 이야기입니다만!
Note
새로운 음식점 객체의 Date.now()를 id값으로..
라는 이전미션에서의 구현 요구사항이 있었습니다!
일반적인 상황에서 그럴일은 없겠지만 Date.now() 가 겹칠 확률이 아주 작게나마 "존재"합니다. 0과 0.0000001이 확률에서 시사하는 바가 완전히 다르듯이 더욱 엄격한 key값을 정의하는데는 uuid 라이브러리를 사용해보는 것을 추천드려요. 다른 프로젝트할 때 유용하게 쓰시면 좋을 것 같네요! 이미 쓰시고 있을지 모르겠지만요..ㅎ
👨🏻💻 Code
npm install uuidimport { v4 as uuidv4 } from 'uuid';
const newRestaurant = {
id: uuidv4(),
category: category,
name: name,
description: description,
};Warning
이 리뷰를 프로젝트 코드엔 반영하지 않으셔도 됩니다.
| &::after { | ||
| padding-left: 4px; | ||
| color: var(--primary-color); | ||
| content: '*'; | ||
| } |
안녕하세요 리뷰어님! 이번에는 css에 대해서 미션을 진행 했는데
평소에 styled-components를 사용했어서 비교적 익숙한 미션이었습니다!
리뷰 잘 부탁드립니다!
진행 사항
기존의 css module 방식에서 styled-components 적용
styled-components를 왜 사용하는지, 별도의 css파일로 분리한 방법과의 trade-off
styled-components 사용 이유
별도의 css파일로 분리한 방법과의 trade-off
파일 구조
이미지