![[인프런 워밍업 스터디 클럽 2기 FE] 1주차 발자국](https://cdn.inflearn.com/public/files/blogs/fe14e1fe-59c1-45bc-bb80-3f2a7c6a8740/인프런 워밍업 클럽.png)
[인프런 워밍업 스터디 클럽 2기 FE] 1주차 발자국
1주차 발자국
[ 시작 ]
javascript, react 스터디가 열린다는 소식에 참여하게 되었다. 회사와 병행할 수 있을까 라는 생각에 쉽지 않을거 같아서 고민하였지만, 한 발자국 더 성장할 수 있는 기회라 생각하여 신청을 하였다. 이번 기회로 javascript의 개념을 더 다잡고, react는 완전 초급 수준이지만 많이 알아갈 수 있었으면 좋겠다.
일단 목표는 완주라도 해보자..! 이다.
[ 강의 & 과제 ]
강의 정리
var, let, const의 차이점과 스코프(=범위), 호이스팅
var의 스코프는 함수 레벨에서만 존재하고, let&const의 스코프는 블록 레벨에서 존재
호이스팅은 변수의 선언을 변수 범위 맨위로 끌고 오는 현상을 의미하는데, var는 호이스팅이 가능하고 let&const는 호이스팅이 불가능
자바스크립트의 타입과 변환
원시 타입과 참조 타입 2가지
원시 타입 : Boolean, String, Number, null, undefined, Symbol
참조 타입 : Object, Array
=> 타입 확인 : typeof(변수)
계산할 때 필요한 Math Object
정말 많이 사용되는 Loop 종류
for/in, do/while 사용법
for/in은 객체의 속성을 따라 반복
Window 객체
window의 객체 안에 들어있는 속성 관련 (innerWidth, scrollY, location) 정보
DOM (Document Object Model)
메모리에 윕 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해줌
HTML 요소를 선택하기 위한 메소드
// 파라미터로 전달한 ID를 가진 태그를 반환
document.getElementById(요소아이디)
// 파라미터로 전달한 name 속성을 가진 태그를 반환
document.getElementByName(name속성값)
// 파라미터로 전달한 선택자에 맞는 첫 번째 태그를 반환
// class => .hello, id => #hello
document.querySelector(선택자)
// 파라미터로 전달한 태그이름을 가진 모든 태그들을 반환(배열)
document.getElementsByTagName(태그이름)
// 파라미터로 전달한 클래스 이름을 가진 모든 태그들을 반환(배열)
document.getElementsByClassName(클래스이름)
// 파라미터로 전달한 선택지에 맞는 모든 태그들을 반환(배열)
document.querySelectorAll(선택자)createElement 메서드로 요소 생성 가능
removeChild 메서드는 하나의 노드를 삭제할 때 사용
replaceChild 메서드는 원래 있는 child를 삭제하고 새로운 child로 교체할 때 사용
addEventListener 메서드는 이벤트가 발생했을 때 이벤트 리스너를 호출하기 위해서는 이벤트 리스너를 해당 객체나 요소에 등록해 주어야 함.
Event의 종류
Event Bubbling : 가장 깊게 중첩된 요소에 이벤트가 발생했을 때 이벤트가 위로 전달 되는 것
Event Capturing : 가장 상단에 있는 요소에서 아래로 이벤트가 내려오는 것
이벤트의 3단계 흐름 (캡처링 단계 > 타킷 단계 > 버블링 단계)
Event Delegation : 하위 요소의 이벤트를 상위에서 제어
this (bind, call, apply)
메서드, 함수, constructor, 화살표 함수에서의 this는 각각 다른 객체를 가리킨다.
call, apply, bind를 이용한 함수 호출 방법이 있다.
삼항 연산자
Event Loop
동기 / 비동기 : 동기(Sync)는 순차적, 비동기(Async)는 비순차적
setTimeout : 만료된 후 함수나 지정한 코드 조작을 실행하는 타이머를 설정
setTimeout(() => {
console.log('2');
}, 3000);위의 소스가 동작하는 원리
=> 자바스크립트 엔진, Web APIs, Event Loop, Callback Queue
Closure
구조 분해 할당 (Destructuring)
let a, b, rest;
[a, b] = [10, 20];
console.log(a); // 10
[a, b, ...rest] = [10, 20, 30, 40, 50];
console.log(rest); // [30, 40, 50]전개 연산자 (Spread Operator)
Map, Filter, Reduce
undefined, null
undefined : 아무 값도 할당받지 않은 상태
null : 비어있는 존재하지 않는 값
변수에 의도적으로 값이 없다고 할 때는 null을 사용
얕은 비교 VS 깊은 비교
얕은 비교 : 숫자, 문자열 등 원시 자료형은 값을 비교.
깊은 비교 : 객체의 경우에도 값으로 비교. Object depth가 깊지 않은 경우에는 JSON.stringify() 사용하고, 깊은 경우에는 lodash 라이브러리의 isEqual() 사용
얕은 복사 VS 깊은 복사
얕은 복사 : spread operator, Object.assign 이외에도 Array.from(), slice도 얕은 복사
Object.freeze 메서드로 객체를 동결시켜서 기존 객체가 변경되지 못하게 해줌.
깊은 복사 : 주로 lodash, Ramda 등 라이브러리 이용
IIFE (Immediately Invoked Function Expression)
즉시 실행 함수 표현은 정의되자마자 즉시 실행되는 함수
과제 정리
첫번째 과제로 음식 메뉴 앱을 만들었다
GitHub URL => food_menu
[ 기능 요구사항 ]
버튼을 누르면 버튼 type에 해당하는 메뉴들이 화면에 뿌려진다.
[ 고민했던 부분 ]
버튼을 누를 때마다 유동적으로 HTML의 부분이 변경되어야 하는 부분을 고민했었던거 같다.요소를 생성하고 삭제하고 부모의 요소 아래에 append하여 DOM을 만들었고, 없어져야 하는 부분은 removeChild를 이용해서 없애주고 새로 생성하는 방식으로 진행하였다.
처음 web을 열었을 때 모든 메뉴들이 나오게 하기 위해 첫 실행 시 페이지 로드하는 함수를 넣어주었다.
[ 회고 ]
DOM을 조작해 본 적이 많지 않아서 이 부분이 익숙하지 않았다. 이번 과제를 계기로 DOM에 대해서 많이 찾아보고 알아갔던 시간이었고, 기본기에 부족함을 느껴 DOM의 개념에 대해 좀 더 공부해야할 거 같다.
Data 부분을 배열로 가져왔는데 json 형식으로 변경해서 값을 가져오는 방식으로 변경해야겠다.
두번째 과제로 가위 바위 보 게임을 만들었다.
GitHub URL => 가위바위보앱
[ 기능 요구사항 ]
가위, 바위, 보 각각의 버튼을 누르면 플레이어의 선택으로 저장되고, 컴퓨터는 Random 함수를 이용해 결정
플레이어와 컴퓨터의 값을 보고 비교하여 승, 패, 무승부 결정
버튼을 한번씩 누를때마다 횟수를 한개씩 차감
[ 고민했던 부분 ]
게임이 끝나면 가위바위보의 버튼 부분이 사라지고, 게임 결과와 함께 다시 시작 버튼이 나오는 부분을 어떻게 하면 효율적으로 할 수 있을까 고민했다. 게임 결과 부분만 게임이 끝나면 나오게 요소를 생성해주고 다시 시작을 누르면 요소를 삭제하는 방식으로 진행하였다.
[ 회고 ]
현재는 결과만 표시되게 되는데, 플레이어와 컴퓨터의 결과가 나오기 전에 결과 표시하는 부분에 애니메이션을 넣어 이미지가 랜덤 돌아가게 표현하고 싶다.
[ 1주차 회고 ]
1주차에는 javascript 관련 강의와 과제를 진행하였다. 아직 못 들은 강의가 있고, 과제도 몇 개는 하지 못했다. 시간 날 때마다 강의를 듣고 과제도 하였는데 생각보다 시간도 많이 필요했고 계획에 맞게 못한 거 같아서 너무 아쉽다. 그래도 이번주에 들은 강의와 과제한 것으로 알게 된 점도 많이 있었다. 밀린 강의와 과제가 있지만 열심히 해서 끝까지 완주하고 싶다.
댓글을 작성해보세요.
