⌚️ 시간관리
☀️ 기상시간 - 10:00
🌕 마감시간 - 24:30
💻 오늘 배운 것
과제3- input과 button을 사용하여 텍스트 출력하기
1. 어제의 과제를 결국 완성을 못하고 두손 두발 들어버렸다. moon과 함께 만나서 다 리셋한 후 다시 시작해보았지만, 맘처럼 화면에 출력하기가 어려웠다. 뭐가 문제인거지
2. 결국 9시에 화상채팅으로 회의를 시작했다. ethen이 직접 코드를 작성하는 것을 보여주었는데 진짜 어이없는 부분에서, 진짜 작은 부분에서의 실수(?)가 나의 코드를 완성하지 못한 이유였다.
3. 기존에 나는 왜때문인지 state값을 한개만 주고 시작을 했다. 그러다 보니 같은 state값을 중복되게 쓰게 되었고, onSubmit과 onChange에 같은 값을 넣어버리니 제대로 작동하지 않는 것이었다.
4. state 초기값에 두가지를 설정했다.
class App extends Component {
state = {
text: "",
result: "",
}
}그래서 onChange에는 text에 e.target.value값을 주었고,
onSubmit에는 result에 this.state.text값을 주었더니 버튼을 눌렀을 때 제대로 출력이 되었다....ㅠㅠ
5. 정말정말 간단한 부분이었다. 하지만 이 과정을 통해서 이벤트핸들러를 어떻게 사용해야 하는지, 그리고 state와 props의 사용에 대해서도 조금은 익혀진 것 같다.
6. 특히 버튼의 스타일지정을 할 때, 이전에 배웠던 styled-components를 사용하였지만 Button class를 다시 지정함으로서 완성 시켜보았다.
const ButtonStyle = styled.button`
background-color: ${props => props.color};
//그 외 button에 적용할 css들
`;
class Button extends React.Component {
render() {
const { color, onClick, children } = this.props
return (
<ButtonStyle color={color} onClick={onClick}>
{children}
</ButtonStyle>--> ButtonStyle에 지정된 color와 onClick은 App Component에 있는 Button의 color, onClick와 연결되어서 작동되는 것이었다. 왜냐하면 Button Component는 App Component의 자식 Component이니까 props로 값을 받아서 사용할 수 있기 때문이다.
7. 리서칭을 하다가 스쳐가는 글로 props에는 기본적으로 children값이 있다는 것을 보았었다. 그런데 오늘 ethen이 코드를 보여주면서 사용하는 것을 보고 방법을 알게 되었다.
8. 물론 완벽하게 혼자서 코드를 완성하는건 아직도 2% 부족한 면이 있지만, 이번에 시행착오를 겪으면서 많이 익숙해진 것 같다.
❓오늘의 나는
- 어제 못다한 과제를 오늘은 꼭! 마무리를 하겠단 마음으로 시작했지만, 이것저것 건드리다가 또 결국 완성하지 못했다.. 원리를 이해해야 하는데 자꾸 모방을 하느라 뭣도 안되는 것 같았다.
- 아침에 일어나는게 왜이렇게 힘든건지 모르겠다. 아직 마음에 급박함(?)이 없어서 그런 것 같다.. 이제는 지각비를 걷어야 내가 책임감이 생길 것 같다ㅠㅠ
- 엄마가 집에 있는 날은 공부하기가 어렵다. 계속 혼자 방에서 공부한다고 있자니 혼자서 티비만 보고 있는 엄마가 너무 신경쓰여서 혼났다... 주말에도 공부시간을 할애해서 써야겠다. 그래야 평일에 쉬는 엄마와 시간을 보낼수가 있을 것 같다.
- moon과 과제를 해결하려다가 성공하지 못해서 둘 다 좌절감에 휩쌓였다. 이것도 처리하지 못하는 우리는 제대로 하고 있는건지 너무 절망스러웠다... 그냥 앞으로 나가기만 할게 아니라 제대로 원리 파악을 해야할 필요가 절실하다.
- 하지만 완성된 코드를 보고 조금은 희망을 가져야 할 필요도 있는 것 같다. 그래도 이렇게 해낸 것을 보고 재밌다고 느껴지는거면 희망적이지 않을까..?
❗️내일의 나는
- 요즘 컨디션이 계속 좋지 않아서 걱정이지만, 내일도 나는 공부를 할거다! 놓치지말자. 컨디션 때문에 쉬어버리면 그냥 계속 쉬어버릴 것 같기 때문이다.
- 내일은 제발 일찍 일어나서 준비 후 오전부터 집밖으로 나가버려야겠다. 아무래도 요즘 집중력이 떨어졌기 때문에 끌어올릴 필요가 있다.
- 그동안의 과제들을 보며 내용정리를 해야겠다. moon과 component의 작동법에 대해 다시 한번 연구하며 이벤트나 state, props의 사용법에 대해 같이 공부할것이다.
- 코드에 집중하다가 어깨가 굳어버린 것 같다. 자주 스트레칭을 해주는 것도 필요하다. 그리고 날씨가 따뜻해져버리니 자꾸 몸이 나른해진다.
