[인프런 워밍업 스터디 클럽 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을 추가해야해서 코드가 길어졌는데.. 이번엔 두번째 해서인지 혹은 구조가 간단해서인지 비교적 짧게 끝나서 좋았다.
답변 0