[tablemin03] 프론트엔드 2주차 미션 제출합니다. #5
Conversation
| import {Link} from 'react-router-dom'; | ||
|
|
||
| const Button = (props) => ( | ||
| <header> |
There was a problem hiding this comment.
혹시 전체를 header태그로 감싼 이유가 있을까요? 여기서 Button은 페이지의 기능을 하고 있는데 왜 쓰셧는지 궁금합니다!
| css={css` | ||
| text-align: center; | ||
| background: linear-gradient(180deg,black,yellow); | ||
| padding: 13% 10%; | ||
|
|
||
|
|
||
| h1{ | ||
| font-size: 100px; | ||
| color: black; | ||
| } | ||
|
|
||
| button{ | ||
| border: solid; | ||
| border-radius: 10px; | ||
| background: yellow; | ||
| width: 100px; | ||
| height: 50px; | ||
| font-size: 20px; | ||
| } | ||
| `}> |
There was a problem hiding this comment.
emotion을 깔끔하게 잘 쓰셧군여 이 방식말고도 객체를 통해서 어떻게 css를 적용할 수 있는지, styled component가 무엇인지 알아보고 사용하면 더 좋을거 같아요!
+) 아마 리터럴 형태로 CSS 작성하느라 자동완성이 안되어 불편하셧을텐데, emotion-auto-css라는 익스텐션이 VS Code에 있어서 이거 이용하면 더 편리할 거예요
태그 식별자 뒤에 중괄호가 띄어쓰기가 안되어있는걸로 봐서, 포맷팅이 자동으로 되지 않는거 같은데 prettier에 대해서도 공부하면 좋을거 같습니당
| function App() { | ||
| return ( | ||
| <div> | ||
| <BrowserRouter> |
There was a problem hiding this comment.
BrowserRouter를 여기에 감싸도 되지만, index.js에서 App 컴포넌트를 감싸는 식으로 할수도 있답니당
| fetch("https://jsonplaceholder.typicode.com/posts/") | ||
| .then((res) => res.json()) | ||
| .then((data) => { | ||
| let posts = data; | ||
|
|
||
| posts.map((post) =>{ | ||
| console.log(post.title); | ||
| }) | ||
| }) |
There was a problem hiding this comment.
fetch를 이용한 코드는 잘 작성하셨는데, 만약 이 코드 뒤에 다른 코드가 들어오게 된다면 원치 않은 결과가 나올 수도 있어요! async await을 이용해서 좀더 좋은 코드를 작성할 수 잇을거 같아여
마지막에 map으로 순회하셨는데, map의 경우는 반환하는 배열이 존재해요. 틀린건 아니지만 의도에 맞게 실행하려면 forEach를 사용하는게 더 나을거 같습니당
No description provided.