2주차 발자국

[ 강의 ]

이번주에는 Javascript의 Symbol, Iterator, Generator, Design Pattern에 대해 배웠다.

Symbol, Iterator, Generator에 대해 정확하게 알지 못한 개념이라 강의를 구간마다 멈추면서 이해하려고 노력하였다. 지금 당장은 코딩하면서 적용하긴 어려울거 같고 더 공부를 해야 적용할 수 있을 거 같다.. 어렵다..

Symbol
- Symbol은 유니크한 식별자를 위해 사용하는 것으로, 객체 안에 속성을 특별하게 유니크한 id의 속성으로 줄 수 있다.
- Symbol은 getOwnPropertyNames와 for/in에서는 속성이 숨겨진다.
Iterable과 Iterator
- 반복이 가능하다는 것을 Iterable이라 하고, Iterator은 next()를 호출해서 {value: , done: } 두개의 속성을 가지는 객체를 반환하는 객체이다.
generator
- 제너레이터 함수는 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있다.
- 제너레이터 함수는 function* 이렇게 *이 붙는다.
디자인 패턴 종류
- Singleton Pattern
- Factory Design Pattern
- Mediator Pattern
- Obserer Pattern
- Module Pattern
저번 과제에 <script type="module"> 이걸 썼다가 오류가 났었는데, Module Pattern과 관련이 있어 보여서 공부를 더 해봐야겠다는 생각이 들었다.

Javascript 강의가 다 끝나고 React 강의로 넘어왔다.

React 개념을 정리해보자면,

React는 라이브러리이다.
React는 컴포넌트로 이루어져있다. 컴포넌트 두가지 유형으로, 클래스형 컴포넌트와 함수형 컴포넌트가 있다. 요즘에는 Hooks가 등장하고 나서부터 함수형 컴포넌트를 이용해서 개발을 많이 한다.
React는 가상 돔으로 렌더링한다.
React를 시작하기 전에 node.js가 필요한데, 자바스크립트는 웹 브라우저에서 실행되는 코드여서 node.js와 직접적인 연관은 없지만, 프로젝트를 개발하는데 라이브러리들이 node.js를 사용하기 때문에 필요하다.
React는 SPA(Single Page Application)이다.
React는 JSX(Javascript syntax extension)이라는 자바스크립트의 확장 문법을 사용한다.

React 설치 명령어 => npx create-react-app <폴더 이름>

React App 실행 명령어 => npm run start

[ 과제 ]

비밀번호 생성 앱

GitHub URL => 비밀번호 생성 앱

이번에는 bootstrap를 이용했다. 오랜만에 써봤는데 다음에는 한번도 안써본 tailwind CSS를 적용해봐야겠다.

기능 요구 사항으로,

비밀번호 길이를 입력하는 type이 number인 input 태그에 비밀번호의 최소 길이와 최대 길이가 있어서 유효성 체크를 한다.
포함할 문자(Numbers, Small Letters, Capital Letters, Symbols)를 체크하는 항목이 있다. => checkbox
비밀번호 생성하기 버튼을 누르면 랜덤 문자열로 비밀번호가 생성된다.
생성된 비밀번호를 copy 가능하다.

고민했던 부분은,

포함할 문자를 체크한 것으로만 랜덤 문자열로 생성하게 되는데, 체크한 것을 먼저 문자열로 이어붙여서 해당 문자열에 해당하는 random 문자열이 불러져 오게 했는데,, 예를 들어, Number이면 0부터 9까지, 소문자면 a부터 z까지 다 적어주는 방식이 뭔가 맘에 들지 않지만 다른 방법을 아직 생각해 내지 못했다. 더 효율적인 방식이 있을 거 같아 찾아봐야겠다.

문자를 복사하는 기능을 처음 구현해보았는데, 이번 기회에 구현해볼 수 있어서 좋았다.

예산 계산기 앱

GitHub URL => 예산 계산기 앱

함수형 컴포넌트로만 사용했어서 이번에는 클래스형 컴포넌트로 구현해보았다.

기능 요구 사항으로,

1. 항목과 지출 금액 추가, 삭제, 수정 기능.

항목 추가 시, 삭제와 수정 버튼이 존재하는데 수정 버튼을 누르면 기존 항목을 수정 가능하게 하여야 하고 삭제 버튼을 누르면 해당 항목이 삭제가 되어야 한다.
전체 목록 지울 수 있는 버튼이 존재하여 전체 삭제가 되어야 한다.
전체 지출을 모두 더해서 총 지출 표시한다.

고민했던 부분은,

총 지출을 표시하는 부분을 어떻게 구현해야 할까 하다가 state 객체 안에 allcount를 주어 생성, 삭제, 수정 될 때마다 setState({ }) 안에서 계산이 되게 하였다. 이 방법이 맞는지 모르겠다.

[ 2주차 회고 ]

인프런 워밍업 일정이 이제 얼마 안남았다,, 퇴근하고 집에 오면 공부 의지가 약해질 때가 많은데 이렇게 스터디에 참여해보니 혼자 할 때 보다는 훨씬 의지가 강해져서 좋은거 같다. 조금이라도 일정을 따라가 보고 싶어서 급하게 강의와 과제를 하고 있는데, 강의에서 이해가 잘 안 갔던 부분이나 또는 과제를 하면서 나온 오류나 이런 것을 정리 못하고 넘어가고 있었다. 앞으로는 모르는 것에 초점을 맞춰서 더 알아보고 정리하면서 스터디 하고 싶다.