[2주차] 오지은 미션 제출합니다. #2
Conversation
There was a problem hiding this comment.
안녕하세요 지은님, 프론트 파트장 주효정입니다🙌
지난번 코드리뷰를 잘 반영해주신 것 같아서 뿌듯합니다! 앞으로의 스터디에서도 지은님의 빠른 피드백이 기대가 됩니다
그리고 블로그에 미션과 관련된 글을 올리신 것도 너무 잘 봤어요. 블로그 글 중 map에서 중괄호를 써서 호출이 안된 부분이 너무 공감이 갔네요. 저도 map 사용하던 초반에 같은 실수를 많이 해서 애를 먹었던 기억이 납니다.. 그래도 몇 번 실수하고나면 억울해서 기억하게 되더라구요ㅎㅎ
아쉬웠던 점에서 DoingList와 DoneList에서 어떻게 리스트를 공유할지 고민되어 모든 컴포넌트를 App.js에 선언하신 점을 말씀해주셨는데, DoingList와 DoneList의 부모 컴포넌트인 App에서 리스트를 관리하고 인자로 전달해줘도 좋을 것 같아요!
이번주도 너무 수고많으셨고 스터디 시간에 봬요~!!~👏
| import plusImg from './img/plus.png'; | ||
| import firework from './img/firework.gif'; | ||
|
|
||
| const GlobalStyle = createGlobalStyle` |
There was a problem hiding this comment.
저도 이번에 구글링하면서 처음 알아서 써봤습니다 ㅎㅎ 뿌듯하네요
src/App.js
Outdated
| &::-webkit-scrollbar { | ||
| width: 0.5rem; | ||
| } | ||
| &::-webkit-scrollbar-thumb { | ||
| background-color: white; | ||
| } | ||
| &::-webkit-scrollbar-track { | ||
| background-color: black; |
There was a problem hiding this comment.
scrollbar 설정까지 해주셨네요🥳 추가적으로 스크롤바의 모서리나 위아래 방향 표시같은 요소를 설정하는 선택자도 추가해보면 재밌을 것 같아요!
There was a problem hiding this comment.
조금 더 스타일을 다듬어 봤어요..! 위아래 방향 표시는 아직 잘 모르겠네요 ㅜ
src/App.js
Outdated
| const EnterButton = styled.img` | ||
| margin-left: 0.5rem; | ||
| height: 2rem; | ||
| width: 2rem; | ||
| margin-bottom: -0.8rem;= | ||
| `; |
There was a problem hiding this comment.
버튼같은 경우에는 cursor: pointer 속성을 추가해서 클릭가능한 요소라는 점을 보여주면 더 좋은 경험을 제공할 수 있을 것 같아요!
There was a problem hiding this comment.
조언 감사해요!!! 엔터버튼, 삭제버튼, 텍스트 모두 바로 추가했습니다:)
| const onKeyPress = (e) => { | ||
| if (e.key == 'Enter') { | ||
| onReset(); | ||
| } | ||
| }; |
There was a problem hiding this comment.
TodoForm을 form 태그로 설정하지 않고 keyPress 함수로 엔터를 판별한 이유가 있을까요??
There was a problem hiding this comment.
구글링했는데 레퍼런스에서 그렇게 하래서 했는데 그냥 styled.form을 해버리면 되는군요...? 배워갑니다 헣헣
src/App.js
Outdated
| }; | ||
|
|
||
| const onReset = () => { | ||
| if (text.trim() == '') { |
There was a problem hiding this comment.
!text.trim()이라고 적으면 더 간략하게 표현할 수 있을 것 같아요!
src/App.js
Outdated
|
|
||
| // listname에서 다른 리스트로 요소 이동 | ||
| const moveList = (listname, id, text) => { | ||
| if (listname == doingList) { |
There was a problem hiding this comment.
Strict Equal Operator(===)를 사용해서 더 정확한 비교를 하면 좋을 것 같아요~!
There was a problem hiding this comment.
=== 쓰는게 왠지 모르게 무서워서 회피하고 있었는데 중요한 부분이군요..!
한 가지 궁금한 부분은 저렇게 변수명을 비교하는 것 외에도 (e.key == 'Enter') 같은 직접 비교도 ===를 쓰는 것을 추천하시나요?????
There was a problem hiding this comment.
하나의 operator(===)로 통일하는게 좋을 것 같아요! 물론 예시로 들어주신 key를 비교하는 부분에서는 type이 문자열로 일치하니까 크게 차이는 없겠지만 숫자를 비교하는 연산을 하게되면 "1"과 같은 변수가 들어왔을때 (variable == 1)이 참으로 반환되서 예상치못한 오류가 생길 수 있으니까요~!
There was a problem hiding this comment.
오 그렇군요 감사합니다!!!! 앞으로는 ===로 통일할게요:)
| import plusImg from './img/plus.png'; | ||
| import firework from './img/firework.gif'; | ||
|
|
||
| const GlobalStyle = createGlobalStyle` |
There was a problem hiding this comment.
저도 이번에 GlobalStyle 적용했는데 편하더라구요!!!
There was a problem hiding this comment.
그쵸!! 저도 이번에 알았는데 자주 애용하려구요 ㅎㅎ
| } | ||
| &::-webkit-scrollbar-track { | ||
| background : transparent; | ||
| `; |
There was a problem hiding this comment.
저도 다음엔 스크롤바에도 스타일링을 해 봐야겠어요!! 디테일 배워 갑니당...📝
There was a problem hiding this comment.
css 스크롤바 스타일 구글링하면 엄청나게 많은 레퍼런스가 나오더라구요!!!! js를 이용한 스트롤바 자동 이동 이런 기능도 있던데 저도 더 도전해보고싶네요:)
| alert('한 글자 이상 입력해주세요'); | ||
| } else { | ||
| const todo = { | ||
| id: Date.now(), |
There was a problem hiding this comment.
저는 new Date()로 id값을 받았는데 이렇게 하면 Date 객체를 만들지 않아 더 효율적이네요!!! 배워갑니다... 🥰
참고 링크
There was a problem hiding this comment.
바닐라 js에서 Date.now()를 썼던 다른 분들 코드가 생각나서 바로 가져왔답니다:)
| height: 30rem; | ||
| width: 30rem; | ||
| `; | ||
|
|
There was a problem hiding this comment.
저는 주로 단위 px 를 사용하는데 지은님은 rem을 많이 사용하시는군요..! 혹시 이유를 알 수 있을까요?
There was a problem hiding this comment.
px는 절대적인 값이고 rem은 상대적인 값이라 rem이 사용자 설정에 따라 유연하게 화면을 조정할 수 있어서 좋다고 들어서 저도 그 이후로는 rem만 쓰고 있어요!!!!! https://brunch.co.kr/@clay1987/170 참고해보시고 저랑 같이 rem 정착해요:)
| }; | ||
|
|
||
| const onReset = () => { | ||
| if (!text.trim()) { |
There was a problem hiding this comment.
공백일 경우 저는 그냥 value != ' ' 이렇게 코드를 작성했는데 trim을 작성하는 법도 있군요 배워갑니다!
저번 주차 pr에서 '리액트를 이용해서 편하게 개발하다가'라는 말을 썼었는데,
리액트도 편하진 않네요 ㅎ 리액트도 무지렁이였던 걸로...
이런저런 고생도 많이하면서 개발을 뚱땅뚱땅 해보았습니다.
고생일기는 https://55wldms.tistory.com/12 요기에 간단하게 정리해봤습니다..ㅎㅎ
저번 과제에서 추가한 것들
빈칸 input이 들어오면 alert 창이 뜨게 설계하고,
리스트가 길어지면 스크롤도 추가해보고
고유 id를 Date.now()로 받아와봤습니다 ㅎㅎ
나머지 설계는 지난번 바닐라 js 과제했던 것을 그대로 가져왔습니다!
아쉬웠던 점
모든 컴포넌트를 App.js에 때려박았다는 것...
컴포넌트를 나누고 싶었는데, DoingList 라는 컴포넌트를 따로 뺐을 때, 이 컴포넌트에서 진행되는 요소의 삭제와 추가를
어떻게 DoneList라는 다른 컴포넌트에 반영할 수 있을지 잘 모르겠더라구요..
그래서 App.js에 다 때려박은 얼렁뚱땅 코드를 제출해봅니다.. 반성합니다..ㅎ
토요일부터 있을 코드리뷰를 하면서 다른 분들은 어떻게 컴포넌트를 나누셨을지 공유받고 싶어요!!!!
배포링크
https://react-todo-jieun.vercel.app/
Key Questions
1. Virtual-DOM은 무엇이고, 이를 사용함으로서 얻는 이점은 무엇인가요?
React의 장점 중 하나로, 말 그대로 가상의 DOM이다.
DOM이란 1주차 스터디에서 정의한대로 웹 브라우저가 HTML 페이지를 인식하는 방식인데,
이런 DOM의 가상 구조를 만듦으로써 일종의 오프라인 DOM 트리에 변화들을 적용한 뒤 그 변화를 하나로 묶어서 실제 DOM에 전달하기 때문에 연산 횟수가 줄어들고 변화에 대한 비용이 비교적 작다.
2. 미션을 진행하면서 느낀, React를 사용함으로서 얻을수 있는 장점은 무엇이었나요?
html, css, js를 따로따로 정의할 필요없이 js 파일 하나로 모든 동작을 구현할 수 있어서 편하다.
끊임없는 querySelector, createElement 의 늪에서 벗어날 수 있어서 편하다.
컴포넌트화가 가능하다는 것도 React의 대표적인 장점이다.
3. React에서 상태란 무엇이고 어떻게 관리할 수 있을까요?
상태란, 컴포넌트의 변경 가능한 데이터 저장소다.
이런 상태를 변경하기 위해서 react에서는 useState를 사용하고
상태를 관리하기 위해서는 context API, redux 등을 사용한다.
4. Styled-Components 사용 후기 (CSS와 비교)
css를 쓸 때는 따로 css 파일에 스타일을 정의해놓고 html이나 js에서 난 css에서 이런이런 스타일을 가져올거야~ 하고 따로 써줘야하는데, styled-components를 쓰면 이 컴포넌트는 이런 스타일을 가지고 있어. 하고 정의해놓고 후에 컴포넌트 태그로만 감싸주면 스타일이 알아서 적용돼서 너무 편하다..