[2주차] 권가은 미션 제출합니다. #5
Conversation
public/favicon.png
Outdated
There was a problem hiding this comment.
약속의 파비콘ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
이분꺼 업데이트된 (님들이) 만들어 쓰는 개발진스입니당
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋ 파비콘 보자마자 리뷰하러 왔는데 역씨... 😸
public/index.html
Outdated
| @@ -2,42 +2,19 @@ | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | |||
| <link rel="icon" href="%PUBLIC_URL%/favicon.png" /> | |||
There was a problem hiding this comment.
파비콘을 쓸 때는 png를 넣는것보다 확장자 변경 사이트에서 ico 확장자로 변경해서 넣는게 좋다고합니다!!
링크
There was a problem hiding this comment.
오 ico 확장자를 사용해서 여러개 사이즈를 정해두면 해상도 문제 없이 사용할 수 있겠네요!
자료 첨부까지 감사합니다 👍👍
| }); | ||
| setTodoList(tempList); | ||
|
|
||
| localStorage.setItem(TODOKEY, JSON.stringify(tempList)); |
There was a problem hiding this comment.
옹... TODOKEY로 localStorage에 넣어주는 방법 되게 좋은 것 같아요..!
There was a problem hiding this comment.
string value는 최대한 변수로 만들어두고 사용하는 게 오류 사전 방지, 유지보수 측면에서 좋은 것 같아 이렇게 사용하고 있습니다! ㅎㅎ
There was a problem hiding this comment.
저도 string으로 사용했었는데 변수로 만들어 두는 것이 더 좋겠네요!! 이렇게 또 배워갑니다ㅠㅠ👏🏻👏🏻👏🏻
| ListContainer.propTypes = { | ||
| title: PropTypes.string, | ||
| todoList: PropTypes.array, | ||
| setTodoList: PropTypes.func, | ||
| isDone: PropTypes.bool, | ||
| setIsVisibleModal: PropTypes.func, | ||
| setSelectedTodo: PropTypes.func, | ||
| }; |
There was a problem hiding this comment.
propTypes를 쓰는 건 처음 봤네요. typesciprt에서만 사용하는 줄 알았는데 js에서도 사용할 수 있다는걸 알아갑니다!
There was a problem hiding this comment.
TS를 사용하다가 이번 과제를 하며 JS로 하려니 역체감을 느꼈어요..
그래서 기존에 JS로 React 사용 시에는 propTypes 사용을 빼먹기도 했는데 이번에는 감사하며(?) 사용했습니다. 😂
타입 체크는 협업과 유지보수에도 특히 도움이 될 것 같습니다. ㅎㅎ
There was a problem hiding this comment.
타입 체크까지... 짱~~ 앞으로 진행될 타입스크립트 과제들이 기대가 되네요 🥰
src/pages/TodoList.js
Outdated
| <SectionInput> | ||
| <input | ||
| type="text" | ||
| placeholder="type here ..." | ||
| value={inputText} | ||
| onChange={handleInputChange} | ||
| onKeyDown={handleInputKeyDown} | ||
| ></input> | ||
| <span onClick={submitInput}>+</span> | ||
| </SectionInput> |
There was a problem hiding this comment.
이 부분은 <SectionInput>을 styled.form으로 선언하고, <span> 부분을 <button type = 'submit'>(따로 type을 지정하지 않으면 default값이 submit으로 됩니다) 으로 지정하면 onSubmit함수 하나로 handling할 수 있을 것 같아요!
| <SectionInput> | |
| <input | |
| type="text" | |
| placeholder="type here ..." | |
| value={inputText} | |
| onChange={handleInputChange} | |
| onKeyDown={handleInputKeyDown} | |
| ></input> | |
| <span onClick={submitInput}>+</span> | |
| </SectionInput> | |
| <SectionInput> //styled.form으로 정의 | |
| <input | |
| type="text" | |
| placeholder="type here ..." | |
| value={inputText} | |
| onChange={handleInputChange} | |
| onSubmit={handleSubmit} | |
| /> | |
| <button type="submit">+</button> | |
| </SectionInput> |
There was a problem hiding this comment.
이 방법이 더 좋네요! 이렇게 수정해보겠습니다
용도에 맞는 태그를 적절히 활용하는 것으로 코드를 줄일 수 있다는 것 👍👍 앞으로 작업하면서 이 부분도 신경써야겠어요
src/pages/TodoList.js
Outdated
| const handleInputKeyDown = (e) => { | ||
| if (e.key === 'Enter') { | ||
| submitInput(); | ||
| } | ||
| }; | ||
|
|
||
| const submitInput = () => { | ||
| if (inputText.trim()) { | ||
| const todoObj = { | ||
| text: inputText, // string | ||
| time: String(Date.now()), // string, | ||
| isDone: false, // boolean | ||
| }; | ||
| setTodoList([...todoList, todoObj]); | ||
| setInputText(''); | ||
|
|
||
| localStorage.setItem(TODOKEY, JSON.stringify([...todoList, todoObj])); | ||
| } | ||
| }; |
There was a problem hiding this comment.
아래 comment와 연결되는 수정사항입니다! (웹에서 수정해서 제대로 돌아갈지는 모르겠어요ㅠ)
| const handleInputKeyDown = (e) => { | |
| if (e.key === 'Enter') { | |
| submitInput(); | |
| } | |
| }; | |
| const submitInput = () => { | |
| if (inputText.trim()) { | |
| const todoObj = { | |
| text: inputText, // string | |
| time: String(Date.now()), // string, | |
| isDone: false, // boolean | |
| }; | |
| setTodoList([...todoList, todoObj]); | |
| setInputText(''); | |
| localStorage.setItem(TODOKEY, JSON.stringify([...todoList, todoObj])); | |
| } | |
| }; | |
| const handleSubmit = () => { | |
| if (inputText.trim()) { | |
| const todoObj = { | |
| text: inputText, // string | |
| time: String(Date.now()), // string, | |
| isDone: false, // boolean | |
| }; | |
| setTodoList([...todoList, todoObj]); | |
| setInputText(''); | |
| localStorage.setItem(TODOKEY, JSON.stringify([...todoList, todoObj])); | |
| } | |
| }; |
src/components/ListContainer.js
Outdated
| setIsVisibleModal, // 컴포넌트 재사용성이 낮아지는 것 같은데.. 우짜지 | ||
| setSelectedTodo, // 컴포넌트 재사용성이 낮아지는 것 같은데.. 우짜지 |
There was a problem hiding this comment.
재사용성이 낮아진다는것...이 뭔지 저도 잘 모르겠어서 이번주 스터디까지 한번 공부해보고 얘기 해보면 좋을 것 같습니다...ㅎㅎ 댓글로 다른분들이 알려주시면 공부 해가도록 할게요 😄
| {isVisibleModal && ( | ||
| <ModalWrapper> | ||
| <Modal> | ||
| <span>이 할 일을 지울까요?</span> | ||
| <div> | ||
| <button onClick={removeTodo}>네</button> | ||
| <button onClick={() => setIsVisibleModal(false)}>취소</button> | ||
| </div> | ||
| </Modal> | ||
| </ModalWrapper> | ||
| )} | ||
| </Wrapper> | ||
| ); |
There was a problem hiding this comment.
저어는.... 이거 왜 안되는지 모르겠어서 if문을 막 덕지덕지 발라놨는데 이렇게 쓰는게 훨씬 깔끔한 것 같아요
There was a problem hiding this comment.
boolean 타입의 변수를 적절히 활용하면 코드가 깔끔하면서 논리도 간단해지는 것 같아요.
저도 더 잘 사용하는 방법 꾸준히 배우고 공유하겠습니다~!
| `; | ||
|
|
||
| let Modal = styled.div` | ||
| width: 15rem; |
There was a problem hiding this comment.
rem을 쓰는게 UX적으로 좋다고 하는데 전 익숙하지가 않아서 쓰기 어려운 것 같아요 ㅠㅠ 혹시 쓰실 때 편한 팁이 있다면 알려주시면 공부 많이 해보겠습니다!!
There was a problem hiding this comment.
사실 저도 아직 px 단위에 익숙해서 ceos 과제 하면서 rem을 최대한 사용해보고 있습니다 ㅠㅠ ㅎㅎ
괜찮은 자료 찾아보고 스터디때 들고 가겠습니닷
public/favicon.png
Outdated
There was a problem hiding this comment.
ㅋㅋㅋㅋㅋㅋ 파비콘 보자마자 리뷰하러 왔는데 역씨... 😸
src/constants/TODOKEY.js
Outdated
| ListContainer.propTypes = { | ||
| title: PropTypes.string, | ||
| todoList: PropTypes.array, | ||
| setTodoList: PropTypes.func, | ||
| isDone: PropTypes.bool, | ||
| setIsVisibleModal: PropTypes.func, | ||
| setSelectedTodo: PropTypes.func, | ||
| }; |
There was a problem hiding this comment.
타입 체크까지... 짱~~ 앞으로 진행될 타입스크립트 과제들이 기대가 되네요 🥰
src/components/ListContainer.js
Outdated
| setIsVisibleModal, // 컴포넌트 재사용성이 낮아지는 것 같은데.. 우짜지 | ||
| setSelectedTodo, // 컴포넌트 재사용성이 낮아지는 것 같은데.. 우짜지 |
There was a problem hiding this comment.
좋은 방법인진 모르겠지만... setIsVisibleModal, setSelectedTodo 등의 함수를 사용하는 Listcontainer 컴포넌트의 부모 컴포넌트를 따로 만들고, ListContainer 컴포넌트에 prop으로 내려 주는 방법도 있을 것 같아요!
const ListContainer = ({ title, todoList, isDone, onToggleIsDone, onDeleteTodo }) => {
...
const ParentComponent = () => {
const [isVisibleModal, setIsVisibleModal] = useState(false);
const [selectedTodo, setSelectedTodo] = useState(null);
const [todoList, setTodoList] = useState([]);
const onToggleIsDone = (todo) => {
...
There was a problem hiding this comment.
여러 페이지에서 재사용이 많이 되는 컴포넌트의 경우 이런식으로 분리해보면 좋을 것 같아요! 👍👍
public/index.html
Outdated
| @@ -2,42 +2,19 @@ | |||
| <html lang="en"> | |||
| <head> | |||
| <meta charset="utf-8" /> | |||
| <link rel="icon" href="%PUBLIC_URL%/favicon.ico" /> | |||
| <link rel="icon" href="%PUBLIC_URL%/favicon.png" /> | |||
| }); | ||
| setTodoList(tempList); | ||
|
|
||
| localStorage.setItem(TODOKEY, JSON.stringify(tempList)); |
There was a problem hiding this comment.
저도 string으로 사용했었는데 변수로 만들어 두는 것이 더 좋겠네요!! 이렇게 또 배워갑니다ㅠㅠ👏🏻👏🏻👏🏻
| body { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| margin: 0; | ||
| background-color: lavender; | ||
|
|
||
| font-family: 'Pretendard-Regular'; | ||
| font-weight: 400; | ||
| font-style: normal; | ||
| font-size: 1rem; | ||
| } |
There was a problem hiding this comment.
가은님은 css 단위를 항상 잘 쓰시는 것 같아요!! vw부터 vh, rem 등등.. 저는 px, % 등의 익숙한 단위들만 사용하다 보니 종종 불편할 때가 있더라구요ㅠㅠ 가은님처럼 상황에 맞는 적절한 단위를 사용하는 것이 더 효율적일 것 같네요!!!👏🏻👏🏻
src/index.js
Outdated
| import ReactDOM from 'react-dom/client'; | ||
| import App from './App'; | ||
|
|
||
| ReactDOM.render( | ||
| import './index.css'; | ||
|
|
||
| ReactDOM.createRoot(document.getElementById('root')).render( | ||
| <React.StrictMode> | ||
| <App /> | ||
| </React.StrictMode>, | ||
| document.getElementById('root') | ||
| ); No newline at end of file | ||
| </React.StrictMode> | ||
| ); |
There was a problem hiding this comment.
저는 StrictMode를 사용하니까 렌더링이 2번씩(console.log()가 2번씩) 되더라구요!! 혹시 가은님은 이렇게 해도 괜찮으셨나요??
StrictMode는 잠재적인 여러 문제들을 알려주는 장점이 있지만 개발 모드에서만 활성화되고 빌드가 된 후의 프로젝트에서는 비활성화 된다고 해요!!
그래서 빌드할 때 StrictMode를 남겨두는 것이 좋을지, 지우는 것이 좋을지 고민되던데...
혹시 가은님은 어떤 방법이 효율적인지 알고 계시다면 알려주시면 감사하겠습니다!!
이건 제가 참고했던 자료들입니다!!ㅎㅎㅎ 참고자료1 참고자료2
src/pages/TodoList.js
Outdated
| const handleInputChange = (e) => { | ||
| setInputText(e.target.value); | ||
| }; | ||
|
|
||
| const handleInputKeyDown = (e) => { | ||
| if (e.key === 'Enter') { | ||
| submitInput(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
저는 이번 코드 리뷰하면서 이벤트 핸들러의 이름을 보통 handle + 대상 + 동작의 형식으로 짓는다는 것을 처음 알게 되었는데 가은님은 역시 잘 지키면서 해주셨군요!!! 최고최고!!😆
src/pages/TodoList.js
Outdated
| const todoObj = { | ||
| text: inputText, // string | ||
| time: String(Date.now()), // string, | ||
| isDone: false, // boolean | ||
| }; |
There was a problem hiding this comment.
Date.now()를 string type으로 해주신 이유가 궁금합니당!!!
There was a problem hiding this comment.
Time 정보를 각 리스트의 id로 사용하고, 이 id값(->string) 을 다시 가져와 비교하는 경우가 있어 타입을 변경해주었습니다!
그런데 지금 답변드리다보니 그냥 == 을 사용하는 게 나았겠다는 생각이 드네요,, 이 부분 수정해봐야겠어요 감사합니다!
| {isVisibleModal && ( | ||
| <ModalWrapper> | ||
| <Modal> | ||
| <span>이 할 일을 지울까요?</span> | ||
| <div> | ||
| <button onClick={removeTodo}>네</button> | ||
| <button onClick={() => setIsVisibleModal(false)}>취소</button> | ||
| </div> | ||
| </Modal> | ||
| </ModalWrapper> | ||
| )} |
There was a problem hiding this comment.
우와 이렇게 지우기 전에 확인 창을 띄워주는 아이디어 너무 좋은 것 같아요!!!👏🏻👏🏻👏🏻
🦔 배포 링크
2주차 미션 결과 화면
🦔 Overview
CSS Module에 더 익숙한 편이라, 이번 과제를 하면서 오랜만에Styled-Components를 사용해봤습니다!CSS 방법론에 대해 블로그에 정리도 해보았어요.
삭제 Modal도 별도의 컴포넌트로 두면 좋을 것 같습니다🦔 미션
미션 목표
Key Questions
1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
DOM 조작이 일어나면, 렌더트리 생성과 레이아웃 계산을 다시하며 리렌더링이 발생합니다.
따라서 모든 변경사항에 대해 매번 DOM을 변경하는 것은 비효율적입니다. 특히나 DOM 조작이 자주 일어나는 SPA에서는 더더욱..
따라서 우리는 Virtual DOM을 사용합니다.
가상DOM은 DOM 노드 트리를 복제한 자바스크립트 객체입니다. class, style 등의 속성은 있지만, DOM의 API 메서드는 갖고 있지 않습니다.
실제 DOM을 간략한 JavaScript object 바꾼 다음, 이것을 가지고 시뮬레이션을 해 보다가, 그 중 가장 경제적으로 DOM에 변화를 가하는 방법을 적용하는 방법을 사용합니다. 즉, 실제 DOM 에 적용되기 전에 Virtual-DOM에 먼저 적용시키고 그 최종적인 결과를 실제 DOM 으로 전달해줍니다.
이를 통해 브라우저 내에서 발생하는 연산의 양을 줄이면서 성능이 개선되는 효과를 누리게 됩니다. 😄
하지만 Virtual-DOM 을 사용하는 것이 무조건적인 해결책은 아닙니다.
DOM을 직접 제어하는 것과 비교 시 적은 비용이 들 뿐, 최적화를 제대로 해주지 않는다면 반복된 렌더링으로 인한 성능 저하를 겪을 수 밖에 없습니다.
2. 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
이번 과제를 하며 바닐라JS에 비해 React를 사용하며 느낀 장점은 다음과 같습니다.
또한, 평소 React를 사용하며 느낀 다른 장점들도 있습니다:
3. React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
state는 컴포넌트 안에서 관리 되고 시간이 지나면서 바뀌는 동적인 데이터(객체)입니다.state가 바뀔때마다 컴포넌트가 리렌더 됩니다.컴포넌트들 사이에서는
props형태로 state를 공유합니다.React는
단방향데이터 흐름을 가지기 때문에, 부모 -> 자식 컴포넌트의 방향으로 props를 전달하는Props Drilling과정이 일어납니다.이때, 컴포넌트 계층이 많아지면 props 추적과 코드 이해가 어려워지고, 중간 단계에 있는 컴포넌트들이 불필요한 props를 들고 있어야 하는 문제가 발생합니다.
때문에 React의 상태 관리가 필요해집니다.
1. React Hooks
함수형 컴포넌트에서, state와 리액트의 생명주기 기능을 연결(hook into)할 수 있게 해주는 함수.
대표적으로
useState,useEffect가 있습니다.2. Redux
JavaScript(자바스트립트) 상태관리 라이브러리.
a. 구조
flux패턴을 사용, 데이터가 단방향으로 흐르는 구조를 갖는다.
Store: state가 저장, 관리되는 유일한 하나의 공간Action: type과 전송할 데이터(payload)로 이루어진 JS 객체 형태 데이터. 앱에서 스토어에 운반할 데이터.Dispatcher 함수: action을 전달Reducer: state 조작. 현재(이전)의 state와 받은 action에 따라 그 state를 변화시킨 다음 새로운 state를 반환.b. 특징
3. Recoil
React 전용 상태관리 라이브러리. Facebook의 Recoil 소개 영상 참고
a. 구조
atom → selector → view의 data-flowAtom: 컴포넌트가 구독할 수 있는 리액트 state. 우리가 전역적으로 사용하길 원하는 state를 atom이라는 걸로 띄워서(페북은 비눗방울이라고 표현) 어디서든지 사용할 수 있도록 함.Selector: atoms나 다른 selectors를 입력으로 받는 순수 함수(pure function). atom을 활용해 개발자가 원하는 대로 값을 뽑아서 사용할 수 있는 API.b. 특징
4. Styled-Components 사용 후기 (CSS와 비교)
Styled-Components 는 대표적인
CSS-in-JS라이브러리입니다.Facebook 개발자 Vjeux의 2014년 발표에서 소개된 개념인
CSS-in-JS는,전통적인 CSS와 비교했을때 다음과 같은 장점이 있습니다.CSS-in-CSS 방법인
CSS Module을 주로 사용하던 저에게는,정도가 가장 크게 체감되었습니다.
앞으로
Styled-Components사용에 좀 더 익숙해진다면 간편한 작업이 가능하다는 장점도 느낄 수 있을 것 같아요.이와 관련해 추가로 알아보며 작성한 블로그 글
필수 요건
(이번주는 Redux, MobX, Recoil, SWR등의 외부 상태관리 라이브러리를 사용하지 않아도 미션 수행에 지장이 없습니다.)
선택 요건