The Odin Project: Foundations

브라우저(이하 크롬 기준)에서 개발자 도구(Developer Tools)를 여는 방법은? 맥 기준 cmd + option + c 개발자 도구에서 특정 요소를 선택하는 방법은? Elements 패널에서 선택하거나 cmd + shift + c를 눌러서 브라우저에서 직접 요소를 선택할 수 있도록 전환! 개발자 도구에서 특정 요소의 css를 실시간으로 변경하는...

변수를 선언하는 3가지 방법은? var : 변수를 선언하는 옛날 방식으로 let : ES6부터 변수를 선언하는 방식 const : 상수 선언 방식 var 사용을 자제해야하는 이유는? var로 선언한 변수는 선언된 괄호 내에서만 유효한 let과 달리 선언된 함수 영역 전체에서 유효하므로 예상치 않은 결과를 가져올 수 있다 console.log(whateve...

자바스크립트의 자료형 8가지는? number bigint : ±(2^53-1) 보다 크거나 작은 숫자를 위한 자료형 string boolean null : 모르는 값 undefined : 지정하지 않은 값 object : 원시 타입보다 복잡한 자료 구조를 위한 자료형으로 참조 타입이라고도 부름 cf. 객체 자료형 외의 자료형은 모두 원시 타입 symbo...

개발자 도구를 여는 방법은? 맥 기준 option + command + c 개발자 도구를 이용해서 웹사이트의 화면 크기를 바꾸는 방법은? 맥 기준 command + shift + m 을 누르면 모바일 기기의 viewport에서 현재 페이지가 어떻게 보이는 지 볼 수 있다 cf. viewport : 클라이언트가 보는 화면의 크기 너비/높이를 직접 지정하거...

# 메서드와 함수 메서드와 함수의 차이는 전자는 객체에 종속되나 후자는 아니라는 점 메서드는 객체의 프로퍼티 값에 접근할 수 있음 # scope란? 1) 현재 실행되고 있는 2) 값과 표현식이 유효하거나 참조할 수 있는 컨텍스트 변수 혹은 표현식이 해당 스코프 내에 있지 않다면 사용 불가 계층적인 구조를 지니므로 하위 스코프는 상위 스코프에 접근할 수 있...

# 문제해결 과정의 3단계는? 문제 이해 계획 분할 정복 # 계획 단계에서 해야하는 것은? 아래와 같은 질문을 통해 계획을 세울 수 있음 유저 인터페이스가 필요한가? 필요하다면 어떤 형태이고 어떤 기능을 가지고 있는가? 어떤 입력을 어떻게 받는가? 어떠한 출력을 반환해야 하는가 입력을 가지고 출력을 반환하기 위해 어떠한 과정이 필요한가? -> 알고리즘 작...

# TypeError가 발생하는 3가지 원인은? 피연산자나 함수의 인자가 연산자 혹은 함수가 다룰 수 있는 type과 다를 때 바꿀 수 없는 값을 바꾸려고 할 때 값을 적절하지 않은 방식으로 사용하려고 할 때 # 에러와 경고의 차이는? 에러는 프로그램/프로세스를 중단

Project: Rock Paper Scissors # 자바스크립트로 가위바위보 게임 구현하기 맨 처음에 구현한 것은 컴퓨터가 뭘 낼지 랜덤으로 구하는 computerSelection 함수 였는데 단순히 랜덤 숫자를 반환하는 게 아니라 정해진 값들 중 하나를 랜덤으로 반환해야 하는 것이라 잠깐 고민했다 배열에 후보값들을 미리 저장해놓고 랜덤 숫자를 인덱스...

Clean Code # 클린 코드를 작성해야 하는 이유는? 협업 시 혹은 나중에 코드를 다시 볼 때 가독성과 이해도를 높이기 위해서 중요 # 클린 코드를 작성하는 10가지 원칙은? 계획을 세우고 코딩하기 페이지의 구조를 코드로 시각화하기 올바른 인덴트 사용하기 주석으로 적절히 설명하기 과도한 주석 사용 지양하기 지나치게 긴 함수 지양하기 네이밍 컨벤션에...