[2주차] 송지석 미션 제출합니다. #5
Conversation
| useEffect(() => { | ||
| localStorage.setItem("todos", JSON.stringify(todos)); | ||
| localStorage.setItem("dones", JSON.stringify(dones)); | ||
| }, [todos, dones]); |
There was a problem hiding this comment.
저는 바뀔 때마다 일일이 따로 localStorage를 불러왔었는데, 확실히 이렇게 보니 useEffect로 쓰면 훨씬 간단하고 편리했었겠어요. 이렇게도 활용할 수 있는 점 배워갑니다!
| useEffect(() => { | ||
| const savedTodos = localStorage.getItem("todos"); | ||
| const savedDones = localStorage.getItem("dones"); | ||
| if (savedTodos) setTodos(JSON.parse(savedTodos)); | ||
| if (savedDones) setDones(JSON.parse(savedDones)); | ||
| }, []); |
There was a problem hiding this comment.
저는 todo, done 따로따로 localstorage에서 읽었는데, 이렇게 한방에 읽는 방법도 좋은 것 같아요~!
| const GlobalStyle = createGlobalStyle` | ||
| html{ font-size: 62.5%; } |
There was a problem hiding this comment.
createGlobalStyle을 사용하여 전역 스타일을 정의할 수 있군요!!
또 html{ font-size: 62.5%; } 로 설정하면 1rem이 10px로 설정되는거 배우고 갑니다~!
| width: 9rem; | ||
| padding: 1.3rem; | ||
| margin-left: 2.5rem; |
| const enterKey = (e) => { | ||
| if (e.key === 'Enter') { | ||
| addTodoTrim(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
form태그로 감싸면 엔터 키를 눌렀을때 폼 제출이 발생해서 따로 엔터 키 처리를 하지 않아도 될 것 같아요! 참고해보시면 될것 같습니다~
| &:hover { | ||
| background-color: #FF69B4; | ||
| box-shadow: 0 0.4rem 1rem rgba(255, 105, 180, 0.4); | ||
| } |
There was a problem hiding this comment.
hover에다가 cursor 속성을 추가해서 포인터로 바뀌는 효과 주면 시각적으로 더 좋을것 같아요~!
| height: 17rem; | ||
| overflow-y: auto; | ||
| margin-bottom: 2rem; | ||
| word-break: break-all; |
There was a problem hiding this comment.
요소가 길어지면 자동으로 줄바꾸는데 사용되는 속성이 있었군요! 배우고 갑니다~!
| const list = listName === "todos" ? todos : dones; | ||
| const newList = [...list]; | ||
| newList.splice(index, 1); | ||
| listName === "todos" ? setTodos(newList) : setDones(newList); |
There was a problem hiding this comment.
listName을 통해 삭제나 이동 여부를 판단하는 코드 직관적으로 이해하기 좋은 것 같습니다!
There was a problem hiding this comment.
동의합니다!! listName으로 조건을 주어 삭제, 이동여부를 판단해주셔서 코드 이해가 너무 좋았어요!
| useEffect(() => { | ||
| localStorage.setItem("todos", JSON.stringify(todos)); | ||
| localStorage.setItem("dones", JSON.stringify(dones)); | ||
| }, [todos, dones]); |
There was a problem hiding this comment.
저는 바뀔 때마다 일일이 따로 localStorage를 불러왔었는데, 확실히 이렇게 보니 useEffect로 쓰면 훨씬 간단하고 편리했었겠어요. 이렇게도 활용할 수 있는 점 배워갑니다!
| const newToList = [...toList, itemToMove]; | ||
| setToList(newToList); | ||
| }; | ||
|
|
There was a problem hiding this comment.
boolean 값으로 완료 여부 관리하는 state 하나 설정해주고 그 설정에 따라 특정 값만 출력하는 식으로 하면 코드가 간결해질 것 같아요!
| height: 17rem; | ||
| overflow-y: auto; | ||
| margin-bottom: 2rem; | ||
| word-break: break-all; |
There was a problem hiding this comment.
word-wrap 속성만 알고 있었는데 word-break 속성도 있었군요! 줄바꿈의 기준을 설정해주는 속성을 배워갑니다..
| if (e.key === 'Enter') { | ||
| addTodoTrim(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
조건문 처리를 해준 김에 빈칸으로 제출될 시 alert 창이나 스낵바를 이용해 할 일을 입력해달라는 안내문구가 출력되면 사용자의 서비스 이해도가 올라갈 것 같습니다. trim을 적용하는 함수를 따로 만든 뒤 제출했을 때 적용하는 것도 좋지만, 제출 조건이 충족되는 것을 확인한 trim 조건문 안에 list에 등록되는 함수가 실행되도록 하는 방법도 좋을 것 같아요!
| <TodoItemContainer onClick={switchList}> | ||
| <TodoText>{item}</TodoText> | ||
| <ActionsContainer> | ||
| <DeleteButton onClick={(e) => { e.stopPropagation(); deleteItem(); }}>x</DeleteButton> |
There was a problem hiding this comment.
handleDeleteClick 과 같은 함수를 따로 만들어서 이벤트 발생 시 실행되는 함수를 넣고 onClick 시에는 handleDeleteClick 함수만 불러와도 좋을 것 같아요. 개인적인 선호일 수도 있지만 저는 이 방식이 코드가 더 읽기 쉽고 유지보수하기 편해지더라구요!
| display: flex; | ||
| flex-direction: column; | ||
| height: 170px; | ||
| overflow-y: auto; |
There was a problem hiding this comment.
overflow-y를 auto로 해두었을 때, scroll이 생기기 전과 후에 스크롤 넓이 때문에 버튼의 위치가 달라지는데,
scrollbar-width: none 혹은 width 지정을 통해 scroll이 있을 때와 없을 때 위치 변화가 없게 해주면 좋을 것 같아요!
|
|
||
| &:active { | ||
| box-shadow: 0 4px 10px rgba(255, 105, 180, 0.2); | ||
| } |
There was a problem hiding this comment.
hover일 때와 active일 때 투명도를 다르게 주는 디테일 좋아요~!!
| const list = listName === "todos" ? todos : dones; | ||
| const newList = [...list]; | ||
| newList.splice(index, 1); | ||
| listName === "todos" ? setTodos(newList) : setDones(newList); |
There was a problem hiding this comment.
동의합니다!! listName으로 조건을 주어 삭제, 이동여부를 판단해주셔서 코드 이해가 너무 좋았어요!
[2주차]
commit을 자주하는 것에 대해 익숙하지 않았음을 느꼈고 다시 저의 지식에 대해 무지함을 느꼈습니다. 어떻게 하는 것인지 차근차근 공부하면서 해봤고 여러방면에서 도움을 얻어서 구현했습니다. 저의 성장을 위해서, 부족함에 대해서 아낌없는 회초리를 부탁드립니다. 분명 어제 js랑 처음 친해졌는데 오늘부터 낯선 사람이랑 친구하라고 소개받은 기분이였습니다. 기존 기능만 잘 구현해보자,,, 라는 생각으로 아무것도 추가하거나 바뀐 것은 없습니다..
[배포링크]
송지석 배포
[Key Questions]
Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
Virtual-DOM은 Document Object Model의 가상 버전입니다. 기본적으로, 웹 페이지의 구조나 내용을 수정할 때는 실제 DOM을 직접 조작해야 하지만, 이는 비용이 많이 드는 작업이고, 사용자의 상호 작용이나 데이터 변경에 따라 빈번히 발생하면 페이지의 성능에 부담이 됩니다.
DOM 업데이트가 필요할 때마다, Virtual-DOM 내에 새로운 상태를 일시적으로 들고있다가, 이후, 이전 정보와 새로운 정보를 비교하여 실제로 변경된 부분만을 식별하고 차이 부분만 실제 DOM에 반영하게 됩니다.
따라서 실제 DOM의 불필요한 업데이트를 최소화하여 성능을 향상시킬 수 있습니다.
더 복잡한 ui나 사이즈가 큰 프로젝트에 더 효율적입니다.
미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
컴포넌트로 쪼개서 기능들을 더 효율적으로 관리 할 수 있었습니다.
파일이 길어지면 어디에 작성했는지, 여기가 어떤기능을 했던 것인지 헷갈리는 경우가 있었는데 애초에 필요부분을 나눠서 구현하니 그런 일이 발생하지 않아서 편했습니다.
검색해보니 중복해서 사용할 요소들을 컴포넌트로 더 쪼개서 관리할 수 있다고 했는데,
todolist와 donelist 부분에서 중복되는 기능을 어떻게 합칠 수 있는지 더 배워봐야겠습니다.
상태는 React 컴포넌트 내에서 데이터를 저장하고 변경할 수 있는 객체입니다. 이 상태는 컴포넌트가 렌더링될 때 사용되며, 상태가 변경될 때 컴포넌트는 다시 렌더링됩니다.
뉴비라 그런지 더 적응이 안되서 어떻게 하는 것이 올바른지 되게 고민을 많이 했습니다. 다른분들걸 보면 다르게 구현되어있는 것 같기도 해서, 내 방식이 맞은 것인지, 효율적인지 고민이 들었습니다. 그러나 바로 위에 작성할 수 있어서 빠르게 수정할 수 있어 한눈에 보기 편하다는 생각을 했습니다.