[TID] 13일차 - 2020.03.24

Grace·2020년 3월 24일
1

Today I Done

목록 보기
12/120

⌚️ 시간관리

☀️ 기상시간 - 08:00
🌕 마감시간 - 24:00

💻 오늘 배운 것

과제3-input과 button을 사용하여 텍스트 출력하기


1. 그동안의 과제를 통해, css작업보다 우선적인건 폼 완성이라는 것을 느꼈기에 오늘은 먼저 폼 작업을 하려고 노력했다..!
2. 웹에 출력됬을 때 확인하기 편할정도로만 css작업을 해둔 후 과제를 진행하는데.. 생각처럼 되지가 않았다. 그동안에 작업한 input과 button을 사용하고 그저 버튼을 눌렀을 때 화면에 출력되게만 하면 되는거였는데 그게 왜그리도 어려운지.. 아직도 내가 프로그램이 작동하게 되는 원리에 대해 이해가 부족한 것 같다.
3. 유튜브를 통해 input submit이라고 검색해서 외국인들의 강의를 들으면서 따라해보았다. 하지만 내가 필요한 만큼의 정보를 얻어서 적용하는게 쉽지가 않았다. 이벤트를 적절하게 적용하는 법을 다시 공부해야 할 것 같았다.
4. form에 onSubmit을 적용하면 button에는 따로 onClick을 적용하지 않아도 되는 것 같았다. (이처럼 나는 지금 모든 코드의 원리를 이해하기 보단 직접 적용되는 것을 보면서 손으로 우선 작성 중) 하지만 작동하는게 다른 두가지의 버튼을 구분하는게 label인지.. 어제 ethen에게 피드백으로 받은 부분에 label과 color를 따로 적용할 수 있는게 있었는데 방법에 관해서는 공부를 더 해야한다ㅠㅠ
5. 결국 출력하기까지 완성은 하지 못했다. 영상들을 찾아보며 버튼을 눌러서 콘솔에 출력하고 input창은 초기화되는 것 까지는 해보았는데, 화면상에 출력하는게 왜이렇게 어려운건지ㅠㅠ 더 찾아보아야겠다.

Handling Events

  1. 이벤트의 기본 동작을 막는 방법
    : e.preventDefault 사용
  2. 이벤트 핸들러 정의
    : 콜백함수는 this를 바인딩해야 함
this.handlerCounter = this.handlerCounter.bind(this);

-> 바인딩 하지 않을 경우, 콜백되는 함수의 this는 window의 객체가 되기 때문에, this.setState를 사용할 수 없게 됨
-> 하지만! 화살표 함수를 사용 할 경우 바인딩이 필요 없음, 화살표 함수는 this를 바인딩하지 않아, 콜백으로 handlerCounter() 함수가 실행 될 때, this는 window객체가 아닌 EventHandlerTest객체가 됨

handlerCounter = () => {
  counter: prevState.counter + 1
};

form

  1. 대부분의 경우에, Submit 버튼을 누르면 handler 함수가 실행되어, 입력받은 값을 처리하는 것이 더 유용할 경우가 많다. React에서 input, select, textarea 태그에서 입력 받은 값을 컨드롤 하는 방식을 controlled components라고 함
  2. Controlled components의 input, textarea, select의 값이 state로 컨트롤 됨
    -> 또한 사용자가 값을 입력할 경우, 이벤트 핸들러가 호출되어 setState로 state를 수정하여 태그 값을 바꾸게 됨
    -> 때문에 사용자의 입력 값을 수정하거나, 유효 검사가 편리

❓오늘의 나는

  1. 3번째 과제를 아침부터 시작했다. 생각으로는 어제 수행했던 과제와 크게 다를게 없어보여서 쉽게 끝낼 수 있을 것 같았는데... 하루종일 붙잡고 있었는데도 나아지는 것 없이 오히려 더 꼬이기 시작했다.. 결국 9시에 제출하기로 했는데 moon과 둘 다 못하겠다고 두손두발 들어버렸다ㅠㅠ
  2. 아침에 늦지않게 기상해서 시간지켜서 공부하려고 노력했다. 너무 조용하기만 하면 집중이 오히려 더 안되서 노래도 틀어두고 열심히 했는데.. 몸 컨디션도 좋지 않고, 과제 속도도 나지 않으니 점점 집중력이 떨어졌다..
  3. 항상 노트북을 붙잡고 있을 때 자세를 바르게 하려고 엄청 노력한다. 내가 이쪽 분야를 시작한다고 한 이상, 길게 봐야하기 때문에 습관적으로 안좋은 것들은 처음부터 안만들고 싶었다. 그럼에도 내가 조절할 수 없는건 시력...ㅠㅠ 하루종일 모니터를 봤더니 눈이 엄청 피로해졌다.
  4. 과제를 잘 수행해낸 어제까지는 의욕이 팔팔했는데, 오늘의 과제가 계속해서 막히면서 다시 자신감이 떨어져버렸다. 이건 몸 컨디션도 일조한게 있겠지.
  5. 그래도 오늘은 허투루 쓴 시간은 많이 없었다. 혼자 공부하느라 조금 걱정이 됬었는데, 생각보다 그래도 열심히 해냈다!
  6. 과제에 대한 코드를 작성하면서, 정답은 없구나-라는걸 느꼈다. 물론 프로그램이 정상적으로 작동하기 위해서 어느정도의 가이드라인은 중요하고 필요하지만, 같은 결과물일지라도 정말 많은 방법이 존재한다는게 참 어렵기도 하면서 굉장히 희망적인(?) 것 같다 😂

❗️내일의 나는

  1. 아마도 오늘 마치지 못한 과제를 내일은 moon과 함께 하면서 완성해낼 수 있을 것 같다. 하지만 엄마가 휴가인게 장애물요소(?). 엄마와의 시간도 보내면서 공부시간은 많이 뺏기지 않도록 노력해야겠다.
  2. 과제에만 너무 몰두하지 않기로 어제 마음 먹었었는데, 진짜 그럴수밖에 없었다. 내일은 공부도 곁들여서 정리하면서 하루를 잘 보내보아야지
  3. 매일 집밖으로 나가서 공부하기가 시국도 그렇고, 내 경제상태도 그렇기 때문에ㅎ 가끔씩 밖으로 나가야한다. 그건 바로 내일. 그만큼 집중해서 하고 와야지.
  4. 내일 몸상태를 봐서 운동을 꼭 해야겠다. 몸이 다시 고장나려한다..
profile
쉽게 사는건 재미가 없더군요, 새로 시작합니다🤓

2개의 댓글

comment-user-thumbnail
2020년 3월 24일

화이팅하세요 👍🏼👍🏼

1개의 답글