[인프런 워밍업 스터디 클럽 2기 FE] 2주차 발자국

2주차 발자국[ 강의 ]이번주에는 Javascript의 Symbol, Iterator, Generator, Design Pattern에 대해 배웠다.Symbol, Iterator, Generator에 대해 정확하게 알지 못한 개념이라 강의를 구간마다 멈추면서 이해하려고 노력하였다. 지금 당장은 코딩하면서 적용하긴 어려울거 같고 더 공부를 해야 적용할 수 있을 거 같다.. 어렵다..SymbolSymbol은 유니크한 식별자를 위해 사용하는 것으로, 객체 안에 속성을 특별하게 유니크한 id의 속성으로 줄 수 있다.Symbol은 getOwnPropertyNames와 for/in에서는 속성이 숨겨진다.Iterable과 Iterator반복이 가능하다는 것을 Iterable이라 하고, Iterator은 next()를 호출해서 {value: , done: } 두개의 속성을 가지는 객체를 반환하는 객체이다.generator제너레이터 함수는 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있다.제너레이터 함수는 function* 이렇게 *이 붙는다.디자인 패턴 종류Singleton PatternFactory Design PatternMediator PatternObserer PatternModule Pattern 저번 과제에 이걸 썼다가 오류가 났었는데, 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주차 회고 ]인프런 워밍업 일정이 이제 얼마 안남았다,, 퇴근하고 집에 오면 공부 의지가 약해질 때가 많은데 이렇게 스터디에 참여해보니 혼자 할 때 보다는 훨씬 의지가 강해져서 좋은거 같다. 조금이라도 일정을 따라가 보고 싶어서 급하게 강의와 과제를 하고 있는데, 강의에서 이해가 잘 안 갔던 부분이나 또는 과제를 하면서 나온 오류나 이런 것을 정리 못하고 넘어가고 있었다. 앞으로는 모르는 것에 초점을 맞춰서 더 알아보고 정리하면서 스터디 하고 싶다.

[인프런 워밍업 스터디 클럽 2기 FE] 1주차 발자국

1주차 발자국[ 시작 ]javascript, react 스터디가 열린다는 소식에 참여하게 되었다. 회사와 병행할 수 있을까 라는 생각에 쉽지 않을거 같아서 고민하였지만, 한 발자국 더 성장할 수 있는 기회라 생각하여 신청을 하였다. 이번 기회로 javascript의 개념을 더 다잡고, react는 완전 초급 수준이지만 많이 알아갈 수 있었으면 좋겠다.일단 목표는 완주라도 해보자..! 이다. [ 강의 & 과제 ] 강의 정리var, let, const의 차이점과 스코프(=범위), 호이스팅var의 스코프는 함수 레벨에서만 존재하고, let&const의 스코프는 블록 레벨에서 존재호이스팅은 변수의 선언을 변수 범위 맨위로 끌고 오는 현상을 의미하는데, var는 호이스팅이 가능하고 let&const는 호이스팅이 불가능자바스크립트의 타입과 변환원시 타입과 참조 타입 2가지원시 타입 : Boolean, String, Number, null, undefined, Symbol참조 타입 : Object, Array=> 타입 확인 : typeof(변수)계산할 때 필요한 Math Object정말 많이 사용되는 Loop 종류for/in, do/while 사용법for/in은 객체의 속성을 따라 반복Window 객체window의 객체 안에 들어있는 속성 관련 (innerWidth, scrollY, location) 정보DOM (Document Object Model)메모리에 윕 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌HTML 요소를 선택하기 위한 메소드// 파라미터로 전달한 ID를 가진 태그를 반환 document.getElementById(요소아이디) // 파라미터로 전달한 name 속성을 가진 태그를 반환 document.getElementByName(name속성값) // 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환 // class => .hello, id => #hello document.querySelector(선택자) // 파라미터로 전달한 태그이름을 가진 모든 태그들을 반환(배열) document.getElementsByTagName(태그이름) // 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 반환(배열) document.getElementsByClassName(클래스이름) // 파라미터로 전달한 선택지에 맞는 모든 태그들을 반환(배열) document.querySelectorAll(선택자)createElement 메서드로 요소 생성 가능removeChild 메서드는 하나의 노드를 삭제할 때 사용replaceChild 메서드는 원래 있는 child를 삭제하고 새로운 child로 교체할 때 사용addEventListener 메서드는 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해 주어야 함. Event의 종류Event Bubbling : 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달 되는 것Event Capturing : 가장 상단에 있는 요소에서 아래로 이벤트가 내려오는 것이벤트의 3단계 흐름 (캡처링 단계 > 타킷 단계 > 버블링 단계)Event Delegation : 하위 요소의 이벤트를 상위에서 제어 this (bind, call, apply)메서드, 함수, constructor, 화살표 함수에서의 this는 각각 다른 객체를 가리킨다.call, apply, bind를 이용한 함수 호출 방법이 있다.삼항 연산자Event Loop 동기 / 비동기 : 동기(Sync)는 순차적, 비동기(Async)는 비순차적 setTimeout : 만료된 후 함수나 지정한 코드 조작을 실행하는 타이머를 설정setTimeout(() => { console.log('2'); }, 3000);위의 소스가 동작하는 원리 => 자바스크립트 엔진, Web APIs, Event Loop, Callback Queue Closure구조 분해 할당 (Destructuring)let a, b, rest; [a, b] = [10, 20]; console.log(a); // 10 [a, b, ...rest] = [10, 20, 30, 40, 50]; console.log(rest); // [30, 40, 50]전개 연산자 (Spread Operator) Map, Filter, Reduceundefined, nullundefined : 아무 값도 할당받지 않은 상태null : 비어있는 존재하지 않는 값변수에 의도적으로 값이 없다고 할 때는 null을 사용얕은 비교 VS 깊은 비교얕은 비교 : 숫자, 문자열 등 원시 자료형은 값을 비교.깊은 비교 : 객체의 경우에도 값으로 비교. Object depth가 깊지 않은 경우에는 JSON.stringify() 사용하고, 깊은 경우에는 lodash 라이브러리의 isEqual() 사용 얕은 복사 VS 깊은 복사얕은 복사 : spread operator, Object.assign 이외에도 Array.from(), slice도 얕은 복사Object.freeze 메서드로 객체를 동결시켜서 기존 객체가 변경되지 못하게 해줌.깊은 복사 : 주로 lodash, Ramda 등 라이브러리 이용IIFE (Immediately Invoked Function Expression)즉시 실행 함수 표현은 정의되자마자 즉시 실행되는 함수 과제 정리첫번째 과제로 음식 메뉴 앱을 만들었다GitHub URL => food_menu[ 기능 요구사항 ]버튼을 누르면 버튼 type에 해당하는 메뉴들이 화면에 뿌려진다. [ 고민했던 부분 ]버튼을 누를 때마다 유동적으로 HTML의 부분이 변경되어야 하는 부분을 고민했었던거 같다.요소를 생성하고 삭제하고 부모의 요소 아래에 append하여 DOM을 만들었고, 없어져야 하는 부분은 removeChild를 이용해서 없애주고 새로 생성하는 방식으로 진행하였다.처음 web을 열었을 때 모든 메뉴들이 나오게 하기 위해 첫 실행 시 페이지 로드하는 함수를 넣어주었다.[ 회고 ]DOM을 조작해 본 적이 많지 않아서 이 부분이 익숙하지 않았다. 이번 과제를 계기로 DOM에 대해서 많이 찾아보고 알아갔던 시간이었고, 기본기에 부족함을 느껴 DOM의 개념에 대해 좀 더 공부해야할 거 같다.Data 부분을 배열로 가져왔는데 json 형식으로 변경해서 값을 가져오는 방식으로 변경해야겠다.두번째 과제로 가위 바위 보 게임을 만들었다.GitHub URL => 가위바위보앱[ 기능 요구사항 ]가위, 바위, 보 각각의 버튼을 누르면 플레이어의 선택으로 저장되고, 컴퓨터는 Random 함수를 이용해 결정플레이어와 컴퓨터의 값을 보고 비교하여 승, 패, 무승부 결정버튼을 한번씩 누를때마다 횟수를 한개씩 차감[ 고민했던 부분 ]게임이 끝나면 가위바위보의 버튼 부분이 사라지고, 게임 결과와 함께 다시 시작 버튼이 나오는 부분을 어떻게 하면 효율적으로 할 수 있을까 고민했다. 게임 결과 부분만 게임이 끝나면 나오게 요소를 생성해주고 다시 시작을 누르면 요소를 삭제하는 방식으로 진행하였다.[ 회고 ]현재는 결과만 표시되게 되는데, 플레이어와 컴퓨터의 결과가 나오기 전에 결과 표시하는 부분에 애니메이션을 넣어 이미지가 랜덤 돌아가게 표현하고 싶다. [ 1주차 회고 ]1주차에는 javascript 관련 강의와 과제를 진행하였다. 아직 못 들은 강의가 있고, 과제도 몇 개는 하지 못했다. 시간 날 때마다 강의를 듣고 과제도 하였는데 생각보다 시간도 많이 필요했고 계획에 맞게 못한 거 같아서 너무 아쉽다. 그래도 이번주에 들은 강의와 과제한 것으로 알게 된 점도 많이 있었다. 밀린 강의와 과제가 있지만 열심히 해서 끝까지 완주하고 싶다.