Facts
- 로또 결과 확인 기능을 구현했다.(3시간)
- 함수에 대해 살짝 공부했다.(30분)
- 로또 미션 제출까지 총 18시간이 걸렸다.
Feeings & Findings
로또 결과 확인 기능을 구현했다.
로또 결과 확인은 구매한 로또에서 몇 개의 당첨 번호가 일치하는지 검사하는 로직이 필요하다. 이 과정에서 if문과 switch문을 사용하지 않고 구현을 하기 위해 노력했다. 6개의 번호가 일치하는 경우 1등, 5개의 번호가 일치하고 보너스 번호가 일치하는 경우 2등 이런식으로 switch나 if문을 사용하면 쉽다. 하지만 코드의 길이가 길어져서 가독성이 낮아진다고 생각했다. 그래서 객체 리터럴을 사용하기로 했다. 객체 리터럴은 가독성과 성능 모두를 챙긴 것 같다. 자주 사용해야겠다는 생각을 했다.
모든 것이 잘 구현되었지만 다시하기 버튼을 눌렀을 때, 가격 input의 초기화를 어떻게 진행해야 하는지 감이 잡히질 않았다. 부모 컴포넌트인 App 컴포넌트에서 자식 컴포넌트의 input을 초기화 할 방법을 모르겠다. 생각나는 것은 자식 컴포넌트의 input에 onChange 이벤트를 할당해서 input이 입력될 때마다 부모 컴포넌트에서 setState를 하는 것이다. 즉, 부모 컴포넌트가 자식 컴포넌트의 input 상태를 가지고 있는 것이다. 괜찮은 방법인 것 같으면서도 자식의 input을 부모가 상태 값으로 가지고 있는게 적절한 역할인지에 대해 고민이 되어서 질문을 남겼다.
input이 입력될 때 모든 input이 랜더링되는 것을 방지하기 위해 PureComponent도 사용해서 성능 최적화까지 한 후에 미션을 제출했다.
함수에 대해 살짝 공부했다.
Deep Dive로 공부를 했고, 깊게 하지는 않았다. 초반 부분 살짝만 봤는데, 알지 못했던 사실을 알았다.
function hello(){
console.log('hello');
}위와 같은 함수 선언문이 있을 때, hello()로 호출할 수 있는데, 함수의 이름인 hello로 호출할 수 있는 것이 아닌 자바스크립트에서 메모리에 hello라는 식별자를 만들어서 위의 함수 선언문을 참조했던 것이었다. 함수의 이름은 함수 내부에서만 사용할 수 있다고 한다. 그래서 함수 선언문과 표현식이 같다고 생각할 수 있지만, 호이스팅 유무가 다르다. 함수 선언문은 런타임 시점에 이미 호이스팅되어 최상단에 위치하기 때문에 함수를 호출할 수 있다. 하지만 함수 표현식은 변수 자체만 호이스팅 되어서 호출하면 undefined가 출력된다.
기초적인 개념이지만 정확하게 알지 못했었고, 책을 다시 처음부터 읽어야겠다고 마음 먹었다.
로또 미션 제출까지 총 18시간이 걸렸다.
로또 미션을 제출하는데 총 18시간이 걸렸다.
- webpack 5시간
- css 7시간
- 기능 구현 6시간
webpack을 처음부터 설정하면서 공부하느라 시간이 오래 걸렸고, 아직 공부해야 할 것들이 많이 남아있다.
이번 미션에서 css에 7시간이나 쓴 것이 너무 아쉽다. 어려운 스타일도 없었음에도 이렇게 오래 걸린 것이 의아하다. 7시간이라는 시간을 투자했지만 기억에 남는 것이 box-sizing: border-box밖에 없는데, 기초가 부족해서 그런 것 같다. css도 기초부터 공부를 해야겠다.
기능 구현은 6시간 정도로 생각보다 많은 시간을 사용하지는 않았다. 한 번 구현하기도 했고, 심화 미션을 하지 않았고, 모든 버그에 대처하지 않았기에 가능했던 것 같다. 최대한 코치의 의도에 맞춰서 기능 구현에 목적을 두기보다는 바닐라 자바스크립트로 구현했던 코드를 리액트 코드로 작성해보는 것에 초점을 맞췄다. 그래서 질문한 것이 대부분 바닐라 자바스크립트에서는 ~~처럼 작성을 했는데 리액트에서도 ~~로 작성을 해도 되는지에 대한 것이다.
이번 미션을 통해 어느 정도 리액트에 대한 감을 잡은 것 같고, 바닐라 자바스크립트를 할 땐 알지 못했던 선언형 프로그래밍의 의미를 알 수 있었다. 그리고 꽤나 리액트는 제약 사항이 많아서 라이브러리라기보다는 프레임워크에 가깝다고 생각이 들었다.
함수형으로 작성하는 것이 기대가 된다. 빨리 피드백이 오면 좋겠다.
Plans
- 학습 로그 작성하기
- 함수 공부하기(하브루타 스터디)
- 피드백 오면 반영하기
