[인프런 워밍업 스터디 클럽 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 데이터를 변수에 담아 할 필요는 없다는 걸 깨닭고 실행에 옮겼다.