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

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

1주차



Day 1 OT

  • 공지사항을 보니 발자국에 정해진 형식은 없다고 하여, 코드 작성 시 생각의 흐름을 정리 작성하는 방식으로 하기로 하였다.

  • 강의를 보고 느낀점, 과제를 보고 판단한 과제 제작 기준, 과제 구현 방식을 요약하여 작성한다.

  • 이번엔 시간분배를 잘못해서 캡쳐 등 이미지나 코드를 본문에 첨부하진 못했는데, 다음주엔 첨부하여 좀 보기좋게 만들고싶다. 시간이 나면 본 포스팅에 추가도 하고.

 


 

Day 2 자바스크립트 기초 (Section 2 ~ 4)

자바스크립트 중급(1)

 

강의요약

  • 자바스크립트를 쓰기위한 기초적인 요소(변수, 연산, 루프 등), Window 객체, DOM의 개념과 클릭 등 활동에 반응하기위한 EVENT 에 대한 개념을 설명한다.

과제

  • 메뉴판 만들기

  • 조건

     

    • 클릭 이벤트를 감지할 것

    • 클릭된 요소들을 구분할 것

    • 클릭에 다라 출력되는 화면이 변화할 것

  • 해결

    • addEventListener를 통한 클릭 이벤트 감지

    • 클릭 한 요소의 data 값을 인식하도록 처리

    • 메뉴 카테고리를 배열화하여, 각 배열 요소 중 data값과 동일한 값을 class명으로 가진 요소들이 존재하는지 판별. 해당하는 요소들은 display 상태 변화.

  • 회고

    • 생각해보니 category를 html 로 작성한 뒤에 getElement를 통해 불러와 array로 저장 할 바엔 그냥 처음부터 배열[오브젝트] 로 작성한 뒤, 해당되는 요소만 걸러서 새 배열을 만들고, 그렇게 만들어진 배열로 html을 작성하게 하는게 나았을 것 같단 생각이 든다.

 


 

Day 3 자바스크립트 기초 (Section 5 (1~8))

자바스크립트 중급(1)

 

강의요약

  • 자바스크립트의 활용에서 자주 쓰이는 this 키워드, 삼항 연산자를 통한 if문 처리, event loop, map filter등을 통한 배열처리를 학습한다.

  • if else보다 삼항 연상자, 배열에서는 map 등 적절한 기능을 적절한 때에 쓰는게 효율이 좋다는건 아는데, 마음이 급하면 자꾸 새 기능보다 기존에 알던 기능, 손에 익은 작성법대로 작성하게 되어서 고민이 된다. 옛날엔 this 키워드를 엄청 자주 활용해서 아주 잘 알고있다고 생각했는데, 근 1년 반정도 사용하지 않았더니 굉장히 낯선 개념처럼 느껴졌다.

과제

  • 가위바위보

  • 조건

    • 매 회 컴퓨터는 가위 ,바위, 보 중에 랜덤한 값을 제시해야한다.

    • 매 회 컴퓨터가 제시한 값과 유저가 제시한 값을 비교해야한다.

    • 매 회 컴퓨터와 유저가 제시한 값에 따라 승패를 판별하며, 승 패를 기록한다.

    • 총 승패의 횟수가 10회가 되면 전체 게임을 정지하며, 유저와 컴퓨터 중 승리한 횟수가 더 많은 쪽을 최종 승자로 판별하여 화면에 출력한다.

  • 해결

    • 매 회 컴퓨터가 제시할 세가지 값을

      rsp = ['rock', 'sissor', 'paper'] 형태로 저장. Math.random() 을 사용하여 0, 1, 2 중에 랜덤한 값을 얻고, rsp 배열 중 해당 값을 인덱스로 갖는 값을 컴퓨터가 제시할 값으로 삼는다.

    • if문을 통해 컴퓨터와 유저의 승리여부를 판가름한다.

      • 이 때 컴퓨터, 유저의 승리 횟수를 각각 변 수에 저장한다.

      • 이 때 totalCnt 를 1씩 증가시키고, restCnt는 10 - totalCnt로 표시한다.

    • totalCnt가 10에 도달하면 컴퓨터, 유저의 승리 횟수를 비교한다.

      • if문을 통해 컴퓨터와 유저 중 어느 쪽의 승리 횟수가 더 많은지에 따라 출력값을 변경한다.

  • 회고

    • 분명히 더 간략하게 추릴 수 있는 방법이 있을텐데, 진도가 빡빡한 편이다보니 일단 단순무식하지만 빠르게 쳐낼 수 있는 방법으로 작성했다는 기분을 떨칠 수 없다.

    • 원래 본 코드는 강의내용에 포함되어있는 삼항연산자로 작성했지만, 올바른 코드임에도 unexpected 괄호 닫음 등의 오류를 많이 발생시켜 if else문으로 재작성, 일부만을 삼항연산자로 작성하였다.

    • 컴퓨터나 유저의 선택지를 배열에 저장시킨 후 판가름하면 강의에 나온 map이나 filter등을 사용하여 총합 승패여부를 판별할 수 있지 않을까 하고 좀 더 활용방안을 생각했는데, 그럼 실시간 승패여부판가름 및 카운트를 올릴 수 없기 때문에 관뒀다.

    • script에 addEventListener를 다는 대신, button onclick시 함수를 실행, 실행 함수에 좀 더 처리를 하면 this요소를 활용할 수 있지 않을까 했는데, 굳이 그럴 이유가 없는데다, 시간도 없고, 강의 활용하려다 괜히 빙 돌아가는 길만 만들까봐 그만두었다.

     


 

Day 4 자바스크립트 기초 (Section 5 (9~17))

자바스크립트 중급(2)

 

강의요약

  • undefined와 null, 비교와 복사의 얕고 깊음, 함수 표현과 선언문, Strict mode 등 알고는 있지만 헷갈렸던 개념을 되짚었다. 사실 얇고깊음의 비교는 아직도 헷갈리며(특히 지칭대상이라는 것이), 함수 표현과 함수 선언은 엄격히 구분해가면서 쓸 일이 적었어서 자꾸 무시하고 작업하려고 하게 된다.

  • IIFX, Intersection observer, Pure Function, Curry Function등은 알고는 있지만 아주 낯설거나 아예 모르는 것들이었는데. 덕분에 뭐 어떻게 활용해야할지 모르겠다. 9~17이 전반적으로 그러한듯.

과제

  • 퀴즈앱

  • 조건

    • 문제가 주어진다.

    • 답 선택지가 주어진다.

    • 유저의 선택지가 올바른지, 올바르지 않은지 판가름하여 채점화면을 출력한다.

      • 동영상과 같이 배경색으로 표현하였으며, 선택 후 정답이면 녹색바탕, 오답이면 붉은바탕이 뜬다.

      • 정답 선택지는 녹색, 오답 선택지는 붉게 표현한다.

    • 다음을 클릭하면 다음문제가 뜬다.

    • 일정 갯수 이상 문제를 풀면 종료되고, Restart를 통해 처음으로 되돌아간다.

  • 해결

    • questionList라는 오브젝트형 변수를 정의한다.

      • 오브젝트 내 요소 1인 ques1은 배열이고, Math.random과 Math.floor를 통해 0~30까지의 랜덤수 3개 갖는다.

      • 오브젝트 내 요소 2인 ques2은 배열이고, Math.random과 Math.floor를 통해 0~30까지의 랜덤수 3개 갖는다.

    • ansList라는 오브젝트형 변수를 정의한다.

      • 오브젝트 내 요소 1인 ans1은 빈 배열로 정의, 후에 ques1의 각 요소를 ques2의 각 요소와 순서대로 더한 값을 3개 갖는다. 이는 정답배열이다.

      • 오브젝트 내 요소 2인 ans2는 배열이고, Math.random과 Math.floor를 통해 0~60까지의 랜덤수를 두개 뽑아 서로 곱한 값을 3개 갖는다.

    • ques1 + ques2 라는 문제지를 화면상에 출력한다.

    • 선택지를 출력한다. 이 때 0부터 2까지의 랜덤값을 생성한다.

      • 랜덤값이 2이면 정답선택지는 없다. 랜덤한 오답선택지를 생성한다.

      • 랜덤값이 0이면 0번째, 1이면 1번째 버튼이 정답선택지가 되며, 다른 버튼은 오답 선택지가 된다.

    • 각 문제의 정답 오답 여부에따라 배경색상이 변한다.

    • 문제를 3개풀면 Restart를 통해 화면을 reload하고 새 문제를 시작한다.

  • 회고

    • 동영상이 숫자문제길래 일단 숫자문제로 했는데, 넘버와 스트링을 섞거나 해서 비교를 얕고 깊게 해볼 수 있도록 답변을 구성했어도 좋았을 것 같다.

    • curry function 을 어떻게 활용해볼 수 있었으려나...? 연구해보기엔 시간이 짧았다.

 


 

Day 5 자바스크립트 기초 (Section 6~7)

OOP, 비동기

 

강의요약

  • 객체지향 프로그래밍(OOP), 비동기(Promise, Async, Await), Class객체 등

     

과제

  • 책 기록 앱

  • 조건

    • 책이름과 저자명을 입력받을 것

    • 입력받은 값을 각각 화면에 출력할 것

    • 출력한 값 옆에 삭제 버튼을 둘 것

      • 버튼을 클릭하면 해당 값을 삭제할 것

  • 해결

    • 새로 추가된 input값을 오브젝트 newData에 저장한다.

    • table에 newData값을 추가한다.

      • createElement를 통해 추가할 tr, td(책제목용, 저자용 2개)를 변수로 (총 3개) 저장한다.

      • 각 td에 textContent를 통해 newData의 각 값을 추가한다.

      • createElement를 통해 변수정의한 tr에 appendChild를 통해 두 td를 추가한다.

      • table에 appendChild를 통해 tr을 최종적으로 추가한다.

        • 위 같은 방식으로 삭제 버튼 또한 추가한다.

    • 삭제 버튼을 클릭하면 해당 행이 삭제되도록 한다.

      • 삭제버튼에 addEventListener 'click' 을 추가한다.

      • 삭제버튼을 클릭하면, 추가했던 행(변수정의해둔 createElement tr)을 삭제하도록 한다.

  • 회고

    • class객체 써볼 수 있었을 것 같은데, 이걸 발자국 쓰면서야 생각했다. 하지만 배열과 객체로 해결할 수 있는데 인스턴스로 제작해서 더 이점이 있었을까. 이 부분은 따로 검색해서 알아봐야겠다. 아직 class나 인스턴스에 대해 아는게 너무 적다.

    • document.getElement~ 를 통해 객체를 찾으면 변수에 저장해놓고 쓰는게 습관이었는데, 이번 과제를 하다보니 굳이 안그래도 되었을 것 같은 부분들이 있었다. 습관적으로 코딩하는 부분이 많다는걸 다시금 깨달았다.

과제2

  • 깃헙유저검색

  • 조건

    • 입력받은 값으로 실시간 검색결과를 출력할 것.

    • 실시간으로 api를 요청, 값을 전달받아 출력할 것.

  • 해결

    • async를 통해 api로부터 값을 요청한다.

      • 이때 요청키워드는 입력값이다.

    • 입력값은 input값이 변화할 때마다 (키보드 입력이 있을 때마다) 업데이트 되어 새 요청을 한다.

      • addEventListener의 input을 사용하여 input 의 value를 얻는다.

    • textContent, innerHtml, appendChild를 이용하여 화면상에 출력한다.

  • 회고

    • 데이터를 요청하는 과정에서 필수적으로 비동기 요청이 사용되었기 때문에 차라리 강의내용을 어떻게 끼워넣어볼지 생각 안해도 되는건 편했다.

    • 비인증계정 60회 제한이 있는 api 라 테스트하다가 자꾸 막혔다.

    • 책 과제를 할 때엔 table 안 tr을 추가하여 td, 혹은 또 그 안의 button을 추가해야해서 코드가 길어졌는데.. 이번엔 두번째 해서인지 혹은 구조가 간단해서인지 비교적 짧게 끝나서 좋았다.

채널톡 아이콘