[2주차] 이희원 미션 제출합니다. #8
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| /* http://meyerweb.com/eric/tools/css/reset/ | ||
|
There was a problem hiding this comment. 웹 브라우저의 기본 스타일링을 초기화해 일관된 스타일을 제공하기 위한 CSS 리셋 스타일시트를 사용하셨네요...!!!! 브라우저마다 기본적으로 제공하는 스타일이 달라 이를 통일하고 브라우저 차이로 인한 예기치 않은 디자인 문제를 방지해 원하는 디자인을 안정적으로 적용할 수 있겠네요!! 이런 개념을 희원 님의 코드 리뷰를 하며 얻어 갈 수 있어 기쁩니다... 🤩 |
||
| v2.0 | 20110126 | ||
| License: none (public domain) | ||
| */ | ||
|
|
||
| html, | ||
| body, | ||
| div, | ||
| span, | ||
| applet, | ||
| object, | ||
| iframe, | ||
| h1, | ||
| h2, | ||
| h3, | ||
| h4, | ||
| h5, | ||
| h6, | ||
| p, | ||
| blockquote, | ||
| pre, | ||
| a, | ||
| abbr, | ||
| acronym, | ||
| address, | ||
| big, | ||
| cite, | ||
| code, | ||
| del, | ||
| dfn, | ||
| em, | ||
| img, | ||
| ins, | ||
| kbd, | ||
| q, | ||
| s, | ||
| samp, | ||
| small, | ||
| strike, | ||
| strong, | ||
| sub, | ||
| sup, | ||
| tt, | ||
| var, | ||
| b, | ||
| u, | ||
| i, | ||
| center, | ||
| dl, | ||
| dt, | ||
| dd, | ||
| ol, | ||
| ul, | ||
| li, | ||
| fieldset, | ||
| form, | ||
| label, | ||
| legend, | ||
| table, | ||
| caption, | ||
| tbody, | ||
| tfoot, | ||
| thead, | ||
| tr, | ||
| th, | ||
| td, | ||
| article, | ||
| aside, | ||
| canvas, | ||
| details, | ||
| embed, | ||
| figure, | ||
| figcaption, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| output, | ||
| ruby, | ||
| section, | ||
| summary, | ||
| time, | ||
| mark, | ||
| audio, | ||
| video { | ||
| margin: 0; | ||
| padding: 0; | ||
| border: 0; | ||
| font-size: 100%; | ||
| font: inherit; | ||
| vertical-align: baseline; | ||
| } | ||
| /* HTML5 display-role reset for older browsers */ | ||
| article, | ||
| aside, | ||
| details, | ||
| figcaption, | ||
| figure, | ||
| footer, | ||
| header, | ||
| hgroup, | ||
| menu, | ||
| nav, | ||
| section { | ||
| display: block; | ||
| } | ||
| body { | ||
| line-height: 1; | ||
| background-color: #252423; | ||
| color: whitesmoke; | ||
| } | ||
| ol, | ||
| ul { | ||
| list-style: none; | ||
| } | ||
| blockquote, | ||
| q { | ||
| quotes: none; | ||
| } | ||
| blockquote:before, | ||
| blockquote:after, | ||
| q:before, | ||
| q:after { | ||
| content: ''; | ||
| content: none; | ||
| } | ||
| table { | ||
| border-collapse: collapse; | ||
| border-spacing: 0; | ||
| } | ||
| button { | ||
| all: unset; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| :root { | ||
| --main-color: #788bff; | ||
| --sub-color: #484644; | ||
| --bg-primary: #252525; | ||
| } | ||
|
|
||
| nav { | ||
| display: flex; | ||
| padding: 0.7rem 2.5rem; | ||
| background-color: #1b1a19; | ||
| font-size: 1.2rem; | ||
| gap: 0.5rem; | ||
| border-bottom: 1px solid var(--sub-color); | ||
|
There was a problem hiding this comment. var(변수명) 형식을 사용하셨네요! 저는 이것을 지난번 코드리뷰에서 알게 되었는데, 스타일 변경 등의 유지 보수에 있어 정말 유용한 개념인 것 같습니다 👍🏻👍🏻 |
||
| } | ||
|
|
||
| main { | ||
| width: 820px; | ||
| min-height: 100vh; | ||
| margin: 0 auto; | ||
| text-align: center; | ||
| background-color: rgb(25, 25, 25); | ||
| padding: 2rem; | ||
| } | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import styled from 'styled-components'; | ||
|
|
||
| export function Button({ type, children, onClick }) { | ||
|
There was a problem hiding this comment. props로 {children}을 받아오셨네요! 이 특수한 props는 잘 사용을 안 했어서 몰랐는데 정말 유용한 것 같습니다. 해당 컴포넌트의 태그 사이에 넣은 내용이 모두 children으로 전달 되니 필요할 때 Button 태그를 사용한 후 버튼의 기능에 맞게 태그 안에 텍스트나 아이콘을 넣기만 하면 props로 전달 되어 렌더링 되니 버튼의 유연성이 증가하는 것 같아요! 이건 저도 꼭 사용해 봐야겠습니다 👍🏻👍🏻
Author
There was a problem hiding this comment. 이게 버튼에 있었군요..ㅋㅋ |
||
| return ( | ||
| <MainButton | ||
| onClick={onClick} | ||
| type={type} | ||
| > | ||
| {children} {/* children을 버튼 내부의 텍스트로 표시 */} | ||
| </MainButton> | ||
| ); | ||
| } | ||
|
|
||
| // MainButton : 메인 버튼 | ||
| const MainButton = styled.button` | ||
| font-size: 1em; | ||
| margin: 0.5em; | ||
| padding: 0.5em; | ||
| border-radius: 3px; | ||
| cursor: pointer; | ||
| background-color: transparent; | ||
| color: var(--main-color); | ||
| border: 2px solid var(--main-color); | ||
| align-items: center; | ||
| text-wrap: nowrap; | ||
| `; | ||
|
|
||
| // DeleteButton : 삭제 버튼 | ||
| export const DeleteButton = styled(MainButton)` | ||
|
There was a problem hiding this comment. MainButton에서 기본 스타일을 상속 받아 추가 스타일을 적용하고 계시네요!! 코드의 중복을 줄이고 스타일을 일관 되게 유지하는 데 좋은 것 같습니다 👍🏻 저는 버튼을 사용하는 컴포넌트에서 각각 스타일링 해주었는데 희원 님의 방식을 배워야할 것 같네요! 🔥🔥 |
||
| border-radius: 1rem; | ||
| color: var(--main-color); | ||
| border-color: var(--main-color); | ||
| `; | ||
|
|
||
| // IsCompletedButton : 완료 토글 버튼 | ||
| export const IsCompletedButton = styled(MainButton)` | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| border-radius: 50%; | ||
| font-size: 1.5em; | ||
| ${(props) => | ||
| props.$isCompleted === 'true' && | ||
| `padding: 0; /* 아이콘이 들어가려면 패딩 값이 없어야 함 */ | ||
| `} | ||
| `; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,46 @@ | ||
| import { useState, useEffect } from 'react'; | ||
| import styled from 'styled-components'; | ||
|
|
||
| // 날짜 | ||
| const days = [ | ||
| '일요일', | ||
| '월요일', | ||
| '화요일', | ||
| '수요일', | ||
| '목요일', | ||
| '금요일', | ||
| '토요일', | ||
| ]; | ||
| const date = new Date(); | ||
| const month = date.getMonth() + 1; | ||
| const day = date.getDate(); | ||
| const getDay = days[date.getDay()]; | ||
|
|
||
| // Clock : 날짜 + 시간 | ||
| export default function Clock() { | ||
| const [time, setTime] = useState(() => new Date()); | ||
|
|
||
| useEffect(() => { | ||
| const id = setInterval(() => { | ||
| setTime(new Date()); | ||
| }, 1000); | ||
| return () => clearInterval(id); | ||
|
There was a problem hiding this comment. 컴포넌트가 언마운트될 때 setInterval이 계속 실행되면 메모리 누수가 발생할 수 있음을 방지하기 위해 clearInterval을 호출하는 것은 좋은 습관인 것 같습니다!!!! 저도 시간을 업데이트하는 로직을 짤 때 참고해야겠어요 👍🏻🔥
Author
There was a problem hiding this comment. 민재님의 리액트 생애주기 발표를 듣고 저는 더 깊게 이해할 수 있었습니다 ㅎㅎㅎㅎㅎ |
||
| }, []); | ||
|
|
||
| return ( | ||
| <StyledClock> | ||
| <p className="date"> | ||
| {month}월 {day}일 {getDay} | ||
| </p> | ||
| <p>{time.toLocaleTimeString()}</p> | ||
| </StyledClock> | ||
| ); | ||
| } | ||
|
|
||
| const StyledClock = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 0.5rem; | ||
| font-size: 0.7rem; | ||
| color: rgb(220, 220, 220); | ||
| `; | ||
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
아이콘 사용 라이브러리를 사용하셨네요! 저는 svg 파일을 따로 다운 받아서 하나하나 스타일링 했는데 이런 간편한 방법이 있다는 걸 하나 배워갑니다!! 👍🏻👍🏻
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
혹시 왜 모든 아이콘 파일을 한 번에 가져오는 라이브러리도 함께 사용하신 것일까요?-? 제가 몰랐던 라이브러리라 방금 찾아보니 @react-icons만으로도 각 아이콘 세트에서 필요한 것만 가져와서 사용할 수 있다고 나와있어 두 라이브러리 모두 설치하신 이유가 무엇인지 알고 싶습니다!!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
음 사실 처음 라이브러리 설치할 때에 실수한 부분이었는데 그게 그대로 남아있게 된 것 같아요ㅠㅠ
사실 저도 두 개의 차이점을 명확하게 알지 못했는데 이번 기회에 다시 찾아보게 되었습니다. 감사합니다 ㅎㅎ
react-icons: 필요한 아이콘만 개별적으로 가져오는 방식, 더 가볍고 효율적인 사용이 가능.@react-icons/all-files: 모든 아이콘 파일을 한 번에 로드, 더 많은 리소스를 사용하게 됨.관련 사이트 : react-icons
설치 명령어 :