강의를 학습하며 새로 배운 점

1주차 학습 범위 :따라하며 배우는 자바스크립트 A-Z 1~ 7섹션

그 동안 전시 프로젝트에 사용할 기능들 위주로 겉핥기식으로 독학해 배우다가

기초부터 다시 배우니 그 동안 왜 이렇게 되는지 모른체 급한대로 사용했던 몇가지 지식들을 습득하게 되었다.

기억에 남는 것들을 상기해보면

this키워드는 정말 많이 이용했으면서 정확히 무엇을 가르키는지 모른체 되는대로 사용해왔는데

이젠 정확하게 지칭해 사용할 수 있을 것 같고

생성자 함수도 대강 사용해왔는데, 강의 외에도 직접 검색해보며 세세하게 정리한 것 같다

또 궁금해서 버블링과 캡쳐링 강의를 들으면서 다양한 중첩 요소들의

eventListner함수 두번째 인자에 true, false를 여러 방식으로 넣어보며 실험도 해보았고

변수 참조를 Closure를 배우면서는

let a = 'a';
function functionA() {
    function functionB() {
         let c = 'c';
         console.log(a, b, c);
    }
    let b = 'b';
    console.log(a, b);
    functionB();
};
functionA();

여기서 변수 b가 엑세스 될 수 있는 이유를 functionB와 같은 A함수 안에서 같은 레벨 위치에 정의되어서 라고

주먹구구식으로 이해하고 있었는데 정확한 이유를 알 수 있게 되었다.

이처럼 잘못된 방식으로 이해하고 있던 개념들을 바로잡게 되었고,

아예 처음 들어보았지만 중요한 개념들도 배울 수 있었다.

앞으로 프로젝트를 진행할 때 내가 작성한 코드가 작동하는

원인과 결과에 대해 제대로 이해할 수 있을 것 같아 기대가 된다.

과제 진행 회고

1주차 과제

• 음식 메뉴 앱 만들기

• 가위 바위 보 앱 만들기

• 퀴즈 앱 만들기

• 책 리스트 나열 앱 만들기

• Gihub Finder 앱 만들기

음식 메뉴 앱

아르바이트를 했던 식당의 메뉴들로 과제를 진행했다. 정말 오랜만에 코드를 작성하니 js 보다도 html, css에서 시간이 더 걸렸던 것 같다. 나중에 보니 내용에 맞게 각 메뉴 박스의 높이값이 내용의 양 만큼만 되도록 하려고 의도했는데 어쩌다 양 쪽 메뉴 박스 중 더 높은 항목에 맞춰 조정되게 해버린 것 같다 여유가 될 때 수정해야겠다.

가위 바위 보 앱비교적 쉽게 구상할 수 있었는데, 결과값이 즉각적으로 나오는게 뭔가 어색해서 setTimeout 함수로 늦추다 의도치 않게 컴퓨터의 선택지가 즉각적으로 나오지 않게 되었는데 값을 할당해주는 코드의 위치만 바꾸면 해결될 문제를 졸려서 꽤 오랜 시간 할애해 해결했다.

퀴즈 앱 만들기

예시에서는 수학 퀴즈였는데, 숫자가 아닌 다른 항목도 랜덤으로 가져오는 것을 해보고 싶어 수도 맞추기 퀴즈로 구상했다. 퀴즈는 5문제가 출제되고 매번 다른 문제와 선택지가 나오도록 했다. 배열로 많은 선택지 항목들과 문제 항목을 준비하고 랜덤으로 가져와 정답인 선택지를 랜덤으로 배치시키도록 했다. 한계점은 결국엔 문서상에 준비된 문제와 선택지 중에서 출제된다는 것인데. 나중에는 출제 자체를 그때 그때 ai가 하게 해서 매번 새로운 문제와 선택지를 제시하는 프로젝트를 해보고 싶다.

책 리스트 나열 앱

책에서 영화로 주제를 바꾸고 별점주기 항목을 추가했다.

별점주는 부분은 특수문자 별을 배열로 불러와 클릭시 하위 인덱스의 별들에 클래스를 추가해서 색이 바뀌도록 날 것(?)의 방식으로 구현했다

깃허브 유저 찾기

시간이 부족해 주요 기능만 구현해보았다.

hotsunny라는 유저를 찾는 과정에 거치는 h,ho,hot,,,hotsuny 8명의 가상의 유저 정보를 객체와 배열을 이용해 담고 강의에서 배운 생성자 함수를 처음으로 제대로 이용해서 innerHTML로 인풋값에 따라 렌더했다. 각 인풋값에 맞는 유저를 어떻게 할당해서 렌더할까에 대해 가장 고심했던 것 같다. 자주 사용되는 기능이라 참고할 곳은 많았는데 배우지 않은 기능을 이용한게 많아서 도움되지 않았다.