⌚️ 시간관리

☀️ 기상시간 - 8:00
🌕 마감시간 - 24:00
❌ 주말부터 시간을 너무 허투루 보냈다,,, 어제는 몸이 너무 안좋아서 거의 아무것도 못했고,,,, 그래서 그나마(?) 오늘은 집중해서 열심히 공부했다.

💻 오늘 배운 것

◉ 1차 프로젝트 - Button Component 만들기

오늘에서야 3차로 수정해서 제출했던 Button Component에 대한 리뷰를 받았다.

React Component 가이드라인
1. 무슨 기능을 하는 컴포넌트를 만들지 선정한다.
2. 기능에 대해서 정의한다.
3. 스타일링 관련 정의한다.
4. 2,3 에 대한 리스트가 정리가 되면 props와 state의 리스트를 정리한다.
5. 1, 4를 참고하여 component에 대한 코딩을 시작한다.

사실 지금까지 내가 만드는 component가 어떤 기능을 해야 하는지 생각해보지를 않았었다. 그저 어떤 스타일로 만들지 고민을 했는데, 오늘 리뷰를 듣고 내가 어떤 코드를 작성할 때, 물론 스타일도 중요하겠지만 기능에 대한걸 더 고민해야 겠다는 생각이 들었다.

네이버를 예로, 로그인을 할 때 사용자가 입력한 아이디와 비밀번호를 버튼을 누름으로서 서버에 제출한 후 데이터를 확인 후 페이지 이동이 일어나는데, 그 보이지 않는 기능을 구현해 내야 한다는 말을 듣고 많이 찔렸다(?) 다음 컴포넌트부터는 기능에 대한 고민을 많이 해야할 것 같다.

배운 부분

1. <Button>컴포넌트를 받아서 사용할 경우, 내가 입력한 <Button>은 실제로 button의 역할을 하는게 아니라 자식 컴포넌트에서 받아서 쓰는 컴포넌트라는걸 깨달았다. 그래서 오늘 만들려던 checkbox도 문제가 있던거였다..
2. props에 대해 다시 공부해야겠다. <Button>컴포넌트로 <>안에 넣어주는 것들은 다 props로, props정의에 다 입력해주어야 한다는 것. disabled도 넣어주어야 작동이 된다는 것을 알았다ㅜㅜ
3. default props값 설정하는 방법
   : class형 컴포넌트에서는 defaultProps로 기본값을 설정해줄 수 있다. 하지만 함수형에서는 따로 설정하는 것이 필요 없이 props를 정의해 준 부분에 값을 넣어줄 경우, 그 props가 사용되지 않은 부분엔 그 값이 적용되는, js문법을 사용하면 된다고 배웠다. 다른 방법으로는 props={props}부분에 조건연산자를 사용해서도 가능.
   -> 최근 다시 함수형컴포넌트의 사용이 늘어나는 이유가, class형 컴포넌트에서는 react에서 정해준 문법?만을 사용해야 조작이 가능한 것에 반해 함수형 컴포넌트에서는 개발자가 원하는대로 작성할 수 있는 방법이 많다는 장점이 있어서라고 한다.

수정할 부분

1. props 수정

• default값을 설정하기 위해 전체적인 스타일 코드를 수정해야 할 것 같다. 기본 색, 기본형태를 default로 설정해야지.
• disabled도 넣어서 작동되는지 테스트 해봐야 한다.

2. 버튼별로 클릭했을 때 발생할 이벤트를 넣어주어야 한다.

• normal 스타일 : 클릭하면 콘솔창에 id 값이 표시되도록?
• animation 스타일 : 클릭하면 배경색이 바뀌도록
• icon 스타일 : 클릭하면 경고창, 확인창 뜨도록

3. animation 스타일 남은 1개 버튼 스타일 완성하기... border에 효과 주는게 왜이렇게 어려운지..... 내일은 꼭 끝내야지
4. 시간이 남는다면, 기본 스타일로 버튼을 클릭할 때 눌리는 효과가 보이게 만들어보아야지.

---

◉ 1차 프로젝트 - CheckBox Component 만들기

1. 작업할 파일 만들어서 연결하기.
: Route폴더에서 CheckBoxBoard에 연결하는 것 부터, sidebar와 components폴더에 파일들 연결하는 것 까지 구석구석 찾아보면서 페이지에 로드될 수 있도록 환경을 만들었다. 내가 만든 틀이 아니라서 모든 연결고리를 찾아서 연결하는게 처음엔 조금 어려웠지만, moon을 도와줄 때 보니 이제 이해가 되는 것 같다 ㅎㅎ
2. <input type="checkbox" /> 으로 CheckBox 생성하기
: 버튼보다 쉬울줄 알고 '너무 쉬운거 하나..'라는 걱정을 했지만 전혀 쓸모없는 걱정이었다. 저렇게 만드는데 하루종일이 걸렸다.. 작동원리를 몰랐으니 리서치하는 시간이 많이걸리지ㅠㅠ

• 전체적인 코드 구성은 이전의 컴포넌트와 맞춰서 작성했더니 작동은 제대로 됬다. 하지만 내가 입력한건 type='checkbox'이었는데 왜그리도 자꾸만 text로 적용이 되는지..
• button component코드에 대한 리뷰에서 말했듯이, 내가 type='checkbox'이라고 입력했던 부분은 html의 <input>태그가 아니라 컴포넌트였기에 props로 인식을 했던 것이었다.
  -> 그래서 props를 전달해주는 부분에 type='checkbox'를 입력해주니 제대로 적용이 되었다 😭
• 이 방법 외에도 attrs를 사용하는 방법이 있었다.
  -> 만약 input 엘리먼트에 기본 placeholder 를 적용하고 싶다면, attrs 를 사용하여 styled element 에 custom attributes 를 적용할 수 있다.
  -> styled-component를 적용한 부분에 넣어주기
  ex) const Container = styled.input.attrs({type:'checkbox'})

---

◉ 그 외 배운 내용들

1. React에서 Checkbox 사용 시 아래와 같은 에러가 발생할 때가 있다.

index.js:1452 Warning: Failed prop type: You provided a checked prop to a form field without an onChange handler. This will render a read-only field. If the field should be mutable use defaultChecked. Otherwise, set either onChange or readOnly.

<input type='checkbox'>를 쓸 때 onClick 핸들러를 제공하고 checked 값을 설정하는 식으로 코딩하면 이런 에러 메시지가 발생한다.

<<<해결방법>>>
1. onClick 핸들러를 없애고 onChange 핸들러를 사용한다.
2. onClick 핸들러를 그대로 두고 싶으면 readonly 키워드를 붙이거나 checked 속성 대신 defaultChecked를 사용한다.

체크박스 , 라디오 그룹 버튼을 만들 때는 name 속성에 같은 값을 입력 한다.

2. svg

   https://brunch.co.kr/@kkak10/3 참고

PNG 와 SVG 의 가장 큰 차이점은 이미지를 구성하는 방식이다.
PNG 는 화소(pixel) 단위로 구성되는 형태로써, 비트맵 방식이라고 불린다.
SVG 는 수학을 기반으로 하는 점, 직선, 곡선과 같은 형태로 구성하는 방식이다.

• png
  • 래스터 이미지(Raster Image), 비트맵
  • 원래의 크기보다 크게 보여지게 할 경우 이미지가 깨짐
    -> 원래의 크기보다 크게 표현할 경우, 깨지기 때문에 크기를 늘려야 함
    그로인해, 최악의 경우에는 크기를 늘리거나, 여러 개의 이미지 파일이 존재해야 함. 색 표현에 있어서도, 여러 개의 이미지 파일을 대비해놓는 경우가 발생
• svg
  • 벡터 이미지(Vector Image), 벡터
  • 이미지가 깨지지 않음 -> hover effect 와 같이 크기 변화가 필요한 아이콘에 사용 가능
  • 별도의 파일이 존재하지 않아도 이미지를 나타낼 수 있음
  • SVG 의 가장 큰 장점은 HTML, CSS, JAVASCRIPT 와 함께 동작할 수 있다는 것 -> 수정, 추가, 애니메이션 등 원하는 동적 작업이 가능

❓오늘의 나는

1. 어제는 주말에 푹 쉬었음에도 불구하고 컨디션이 너무 좋지 않아서 ( 온몸에 왜그리도 힘이 없는지 이런경험은 또 처음이라서...) 진짜 아무것도 하지 못했기에, 오늘은 오전부터 집중해서 해보고자! 시간맞춰서 일어나서 공부했다.
2. 하지만 먹고 이동하는데에 시간을 좀 많이 쓴 기분이다. 점심을 먹기 위해 나가서 장을 봐오고, 음식하고, 오후에 카페로 이동해서 커피와 디저트 먹고, 늦은저녁시간에 맞춰서 산책겸 운동하다가 저녁거리 사서 먹고... 🐽🐷🐽🐷
3. 열심히 코드를 작성하기 위해 리서치를 했지만 해낸건 고작 저 자그마한 체크박스를 만든 것 뿐.. 하루를 헛된곳에 시간을 보낸 것 같아 절망스럽기도 하지만, 이렇게 새로운 내용을 직접 알아내게 된 데서 오는 뿌듯함도 크니 긍정적으로 생각하자 !
4. 온라인 회의를 통해 그동안의 button component에 대한 전체적인 리뷰를 들었다. 그러면서 내가 자꾸 놓치는 부분이 무엇인지 알게되었고, 내일 더 열심히 해야 할 이유가 생겨서 괜히 기분이 이상했다ㅎㅎ
5. 피부가 다시 악화되서 공부를 하다가도 자꾸 진물때문에 가려워서 집중이 제대로 안된다ㅠㅠ 이번주는 음식 조절 잘 해서 다시 피부컨디션 끌어올려야지..

❗️내일의 나는

1. 오늘 리뷰 받은 내용대로 수정작업을 우선 해야겠다. 새로운 component를 만드는것도 중요하지만 제대로 마무리하고싶다. 내일까지 완성하는게 목표!
2. 오전부터 부지런히 움직여서 일찍 자는 습관을 다시 만들어야 할 것 같다. 수면패턴이 망가지니 몸도 안좋아지는 것 같다. 나이가 들어서 그런건가 🥱
3. 오후3시, 제일 졸리고 나른할 시간에 구래동으로 이동해서 오프라인 공부를 진행 할 예정이다. useState에 대해 제대로 배우고 활용해야지. 그리고 git도 해결해야 할 것 같다. 너무 꼬여버려서 풀기가 어렵다...
4. 내일이면 벌써 수요일! 내일도 음식조절 조금만 더 참자... 주말에 먹고싶은거 하나 먹어야지....