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

Day2(자바스크립트 기초)강의요약독학으로 기본은 이미 학습했기에 따라가는 데 지장은 없었다.그래도 기본 개념을 다시 복습하는 계기가 되었다.과제(음식 메뉴 앱)깃허브 링크음식 메뉴요구 사항 카테고리별 아이템 설정카테고리 클릭 이벤트 발생 시 해당 카테고리 아이템들 조회전체 아이템 조회결과최초 실행 시 전체 아이템 display: none카테고리 클릭 시 해당 카테고리 아이템 display: flex 조회전체 아이템 조회 display: flex회고처음엔 createElement로 구현해야 하는 생각에 막막했고, 너무 비효율적이라 구글링을 통해 다른 방법을 생각했다.classList를 통한 css 설정으로 구현할 수 있단 걸 알게 되어 적용했다.아무리 코드가 적어도 좀 묶어놓을 걸 싶다.Day3(자바스크립트 중급 1)강의 요약대부분의 언어에서도 중요한 this와 자바스크립트 만의 클로저구조 분해 할당을 통한 데이터 할당의 편의성데이터 활용도를 높여주는 Map, Filter, Reduce객체 활용도를 올려주는 메서드 bind, call, appply 과제(가위 바위 보 앱)깃허브 가위바위보요구 사항매 회 컴퓨터는 랜덤하게 가위, 바위, 보 중 하나를 선정해야 함매 회 사용자도 랜덤하게 가위, 바위, 보를 클릭 이벤트를 통해 선정해야 함회차별 승패 여부를 점수로 기록회차 기록점수에 따른 최종 승패 여부 결정결과random() 메서드를 통해 컴퓨터가 3개 중 하나 선정로직을 통해 승패 여부 결정 후 결과 기록최종 승패 결정 후 Day1에서의 css를 통한 설정으로 결과 표시회고삼항 연산자로 하기에 좀 지저분 해 보여서 로직을 찾아봤는데 내 코드엔 맞지 않아 포기했다.구현 자체는 쉬워 금방 했는데 DOM으로 가져온 데이터 부분이 커지길래 지저분 해져 깔끔할 방법이 없다 고심했다.Day4(자바스크립트 중급 2)강의 요약그나마 책으로 공부한 게 있어서 이해하는 데 어려움은 없었다.페이지 무한 스크롤, Intersection observer의 원리가 흥미로웠다. 즉시 실행 함수의 활용도가 진짜 높을 텐데 어떤 상황에서 활용하는 지가 좀 어려웠다.과제(퀴즈 앱)깃허브 퀴즈요구 사항랜덤한 숫자의 연산으로 퀴즈 생성사용자는 보기 중에서 정답을 클릭을 통해 선택선택한 보기가 정답일 경우 해당 보기만 초록색으로화면 배경도 초록색으로선택한 보기가 정답이 아닐 경우 틀린 해당 보기는 빨간색으로정답 보기가 초록색으로화면 배경도 빨간색으로전체 회차 종료 재도전 여부 표시결과random() 생성자 함수를 생성하여 연산자와 숫자를 구분하여 선정랜덤으로 뽑은 연산자와 숫자를 화면에 표시표시된 연산의 결과를 정답 보기로 생성, 내부 로직으로 틀린 보기 생성 후 화면에 표시사용자 클릭 시 보기 관련 요구 사항 css 설정으로 구현회차 만료로 퀴즈 종료 시 재시작 선택 여부 확인 후데이터 초기화 후 다시 시작회고함수형으로 구현하려고 했는데 생각보다 쉽지 않았다.계속 한 회차에 두 번 진행 되는 버그 발생. 원인은 함수형으로 구현하다 이벤트 리스너가 한 번 클릭 시 두 번 발생해결 : 이벤트 리스너 함수를 독립적으로 생성하여 해결했다.그래도 내 수준에서 요 정도 함수형으로 구현한 걸로 만족했다.Day5(OOP, 비동기) 강의 요약비동기는 개념을 모르는 상태에서 많이 써봐서 중요하단 건 알았지만, 생각보다 쉬웠다.프로토타입은 책으로 봤을 때 너무 어려웠어서 몇 번을 다시 보면서 공부해서 잘 넘어갔다.클래스를 써보고 싶었는데 잘 엄두가 안났다. 담주에 할 땐 함 써보자. 과제(책 리스트 나열 앱)깃허브 책 리스트요구 사항사용자가 입력한 데이터를 화면에 표 형식으로 표시해당 데이터 저장 공간에 저장(Map or Local Storage)표시된 표 형식의 데이터의 마지막 컬럼에 버튼으로 해당 행 삭제 결과form으로 사용자의 input 데이터를 받고, submit 이벤트 리스너 발생해당 이벤트 일시 정지를 위한 preventDefault() 함수 실행createElement로 데이터와 삭제 버튼을 생성하여 화면에 표시삭제 버튼 클릭 시 해당 행 삭제하는 이벤트 발생데이터 표에 추가 및 삭제 시 메세지 표시 후 비동기 setTimeout() 함수로 종료회고이미 구현 해봤던 내용이라 간단했다. Day6(OOP, 비동기) 강의 요약비동기는 개념을 모르는 상태에서 많이 써봐서 중요하단 건 알았지만, 생각보다 쉬웠다.프로토타입은 책으로 봤을 때 너무 어려웠어서 몇 번을 다시 보면서 공부해서 잘 넘어갔다.클래스를 써보고 싶었는데 잘 엄두가 안났다. 담주에 할 땐 함 써보자. 과제(GihHub Finder 앱)깃허브 GitHub Finder요구 사항사용자의 입력과 동시에 실시간 검색프로필, Repository 수, 팔로워/팔로잉 수 등 데이터 화면에 출력Repository 나열 후 클릭 시 해당 Repository로 이동 결과이벤트 리스너 input 설정과 async/await으로 비동기 실시간 검색 구현 fetch로 URL req 전송 후 Promise.all()로 res 동시에 받기각 Repository 화면에 나열 회고깃허브 API에 대한 내용을 공식 홈페이지에서 확인 해도 헷갈리는 부분이 많아 다른 사람 코드를 참고 했다.처음 문서를 잘못 봐서 되게 복잡하다 생각했는데 막상 코드를 보니 굉장히 쉬운 거였다.보니 요청 횟수가 정해져 있어 토큰을 발급 받아 fetch 헤드에 담아 전송해야 했는데 몰라서 좀 헤맸다.그 분 코드에 굳이 DOM 데이터를 변수에 담아 할 필요는 없다는 걸 깨닭고 실행에 옮겼다.