Section 1 총복습
- 크롬 개발자 도구 사용법
계산기에서 클릭을 하면 개발자 도구 Console 탭에서 메시지를 확인할 수 있어야 합니다. o
- VScode
VScode에서 폴더를 열고, 파일 내에서 작업을 할 수 있어야 합니다. o
- 변수의 선언과 할당
문제 해결을 위해 컴퓨터가 기억하고 있어야 하는 정보(데이터)를 변수에 저장하고, 사용할 수 있어야 합니다. o
기억하고 있어야 하는 정보를 변경하는 경우, 새로운 정보를 변수에 저장할 수 있어야 합니다. o --> 재할당
- 함수의 선언과 호출, 그리고 결과값 리턴
문제를 해결하기 위해 논리(알고리즘)를 컴퓨터가 이해할 수 있도록 코드로 작성할 수 있어야 합니다. o
함수 표현식과 함수 선언식을 활용하여, 변수에 함수를 할당할 수 있어야 합니다. o
함수가 담긴 변수에 괄호를 붙여 함수를 호출할 수 있어야 합니다. o
함수가 결과를 리턴하는 경우와 그렇지 않은 경우를 구별할 수 있어야 합니다. o
- 타입
typeof 연산자를 통해 타입을 구분할 수 있어야 합니다. o
--> typeof 연산자는 무슨 타입인지 알아보기 위해서 사용한다.
ex) typeof 'hello'; // string
불확실한 에러를 방지하기 위해 다른 타입끼리 비교하지 않는 이유를 이해할 수 있어야 합니다. o
- 조건문
조건문을 활용하여 특정 조건에만 코드가 실행되게 할 수 있어야 합니다.
o
계산기 구현하기 (페어활동)
- 계산기 Github repository에 작성된 HTML, CSS를 이해할 수 있다.
o
- 두 숫자의 사칙연산을 구현할 수 있다.
o
- 변수 할당을 사용하여 미리 입력한 숫자와 연산자를 계산기가 기억하게 할 수 있다.
o
- user flow를 고려하여 실제 계산기와 더욱 유사한 계산기를 구현할 수 있다.
o
- parseInt와 parseFloat의 차이에 대해서 찾아보고,
실수 계산도 할 수 있도록 calculate 함수를 수정할 수 있다.
parseInt는 매개변소 입력받은 문자열을 정수로 반환한 값을 리턴해주는 함수다.
parseInt(string,radix) 형태로 작성하며, string에는 "" 안에 숫자를 입력하고,
radix에는 string의 문자열을 읽을 진법을 2~36의 수까지 입력한다.
radix는 안 써도 되지만, 혹시 모를 오류를 방지하기 위해 써주는 것이 좋다.문자열은 숫자로 시작해야 하지만,
공백으로 시작하거나 공백으로 끝나거나, 숫자 뒤에 다른 문자가 오거나
숫자 사이에 문자가 올 경우에는 공백과 숫자 외에 문자들은 무시하고
숫자만 변환하여 값을 리턴한다. 문자열에 "음수"를 입력하면 정수 음수로 변환하여 리턴한다.만약, string이 아닌 다른 타입의 값이 전달되면,
매개변수를 문자열로 변환한 후, 정수로 변환하여 리턴한다.
다만, string에 오는 첫 글자가 숫자가 아닌 다른 문자가 와서 정수로 변경할 수 없을 경우이거나,
"" 공백인 경우, radix에 2~36외의 숫자가 오는 경우에는
NaN(Not a Number)을 리턴한다.문자열에 0x/0X가 오면 16진법으로 간주하여 계산된다.
그 외에 다른 숫자로 시작하면 10진법으로 간주한다.여기서 진법은 2진법, 8진법, 10진법, 16진법이 있다.
2진법은 0~1, 8진법은 0~7, 10진법은 0~9까지, 16진법은 0~9, a~f까지 사용한다.parseFloat는 매개변수로 입력받은 문자열을 실수로 반환한 값을 리턴해주는 함수다.
parseFloat(string) 형태로 작성하며, string에는 "" 안에 숫자를 입력한다.문자열에 음수, 양수의 정수가 입력되면, 그대로 정수를 리턴한다.
문자열에 음수, 양수의 실수가 입력되면, 그대로 실수로 리턴한다.만약, string이 아닌 다른 타입의 값이 전달되면,
매개변수를 문자열로 변환한 후, 실수로 변환하여 리턴한다.
공백으로 시작하거나 공백으로 끝나거나, 숫자 뒤에 다른 문자가 오거나
숫자 사이에 문자가 올 경우에는 공백과 숫자 외에 문자들은 무시하고
숫자만 변환하여 값을 리턴한다.다만, string에 오는 첫 글자가 숫자가 아닌 다른 문자가 와서
실수로 변경할 수 없을 경우(숫자 0~9, +/-기호, 소수점, 지수가 아닌 경우)이거나,
"" 공백인 경우에는 NaN(Not a Number)을 리턴한다.
- InnerHTML, textContent의 차이에 대해서 검색하고 블로깅한다.
innerHTML은 element 안의 HTML이나 XML을 가져오고,
textContent는<script>, <style>태그 없이 해당 노드가 가지고 있는 텍스트 값을 읽는다.
여기에 innerText도 함께 비교가 되는데, 이는 element 안의 텍스트 값만을 가져온다.예를 들어, 아래 코드에서
innerText는 사용자에게 '안녕'만 보여준다.
innerHTML은 사용자에게 '안녕'과<span style = 'display:none'> 사용자에게 이 부분이 보이지 않는다. </span>를 보여준다.
textContent는 사용자게에 '안녕'과 '사용자에게 이 부분이 보이지 않는다.'를 보여준다.<div id = 'hello'> 안녕 <span style = 'display:none'> 사용자에게 이 부분이 보이지 않는다. </span> </div>
소감
🔡➡️💻➡️🤓👍
오늘은 오전 9시부터 오후 5시까지가 깃허브 자료를 사용하여
자바스크립트로 계산기를 구현하고 과제를 깃허브에 제출하는 거였다.
예전에도 깃허브를 이용해 내가 만든 결과물들을 올린 적 있는데,
매번 헤맨다. 어찌 어찌 올렸는데 깃허브에 익숙해지기까지 좀 걸릴 거 같다.
오늘은 자바스크립트를 가지고 계산기를 구현하는 거였는데,
개인적으로 HTML, CSS 보다 더 흥미롭고 재미있다.
둘째주가 또 훌쩍 지나갔다. 주말동안 section1 총복습하고
2주동안 만든 계산기를 다시 만들어 보고 코플릿들을 다시 풀어봐야겠다.
오늘 하루도 너무 고생한 내 자신 대견해! 👏👏👏
주말에 다시 Bare Minimum Requirements, Advanced Challenges를 해보았고,
Nightmare에 도전했다.
Nughtmare에서는 'button','operator' 버튼 css 부분과
'enter' edge case 부분은 뒤에서 다시 배우고 돌아와서 다시 해야겠다.
다소 헤매기는 했지만, 그래도 어느 정도 이 코드를 왜 작성했는지 이해되기 시작했다.
아직 배우지 않은 부분에 대해서는 '이 코드는 여기서 이렇게 작동되는구나' 정도만
이해하고, 왜 이 코드를 여기에 사용했는지, 언제 사용하는지를 이해하지는 못했다.
그래서 뒤에서 배운 후에 다시 돌아와서 Bare Minimum Requirements, Advanced Challenges, Nightmare, CSS 수정하여 꾸미기를 다시 해서 깃허브에 업로드할 것이다.
