TIL #210131

📚 TIL

---

코드숨 2주차 DAY 14, 자바스크립트 코딩의 기술

🧸 1주차 2번 과제 풀이 공부하기

계산기 과제 처리하기

 

 

형태 먼저 잡아주기 - number랑 숫자

render number에 value 클릭하면 number에 value 넣어주기

계산기니까 숫자가 쌓이도록 기존 number 곱하기 10에 value 더하기

reset버튼 하나 추가하기 - handleClickReset render number 0으로

덧셈버튼 추가하기 handleClickOperator'+'로, 함수 render에 number는 그대로, operator에 value 넣기

render 초기값 number 0 operator '', reset에도 ''하니까 중복됨 - InitialState로 빼서 넣어줌

함수를 그냥 넣으면 바로 실행이 되므로 () => 이렇게 넣어주어야함

operator를 누른 뒤 숫자를 누르면 따로 들어와야됨

-> operator를 누르는 순간 누적된 값을 다른 곳으로 - accumulator 넣기

초기값은 0, operator 함수에 accumulator는 넘버로, 넘버는 0으로

'=' 버튼 만들기 - operator에 따라 계산되게 - calculate 함수 만들기, 파라미터는 operator, accumulator, number

accumulator랑 number랑 계산한 값 반환되게 함수 작성

operatorFunctions로 부호마다 x와 y로 계산 기능, 비어있는 초기값, =을 눌렀을때 값 넣어주기

operatorFunctions에서 operator를 먼저 처리하고 accumulator랑 number를 변수로 넘겨줌

['+', '-', '*', '/'] 배열 버튼 추가 기능도 넣어주기

값을 보여주는 거는 || 연산자로 지금 누르는 값 보여주고 없으면 기존의 값 보여주기

리팩토링 - defaultFunction으로 값이 없는 경우 반환값 넣어주기

 

---

 

🧸 2주차 1번 과제 풀이 공부하기

Counter 앱 만들고 파일 분리하기

 

 

컴포넌트당 하나의 파일로 분리하기

src에 Counter.jsx로 새로운 파일 만들기

export default Counter;로 다른 파일에서 쓸 수 있도록하기

모든 파일에는 React import하기

import Counter from './Counter'로 하면 가져다 쓸 수 있음

.js만 기본적으로 부르게 되어 있어서 .jsx를 붙여야 됨

붙이기 싫다면 webpack.config.js에 resolve 추가, extensions: ['.js', '.jsx'] 작성

App에서 Button, Buttons, App 빼기

index.jsx에서는 App을 가져다 씀, useState는 index에서 빼고 App에서 쓰기

Button.jsx 따로 빼주기, App에서는 Button import하기

function 앞에 export defalut를 쓰면 아래에 안써도 됨

Buttons랑 Page도 나누기, import도 알맞게 변경

index에서는 App을 가져다 쓴다는 것만 집중

App에서는 어떻게 되는지, 구성되는지는 모름. 상태관리만

Page는 어떻게 처리되는지는 모름. 어떻게 보여줄지만

Counter에서는 어떻게 보여줄지는 모름. 처리하는 것만

값 처리하기 - App에 handleClick에 increment 넘겨주기, count는 count에 increment 더하기

Counter에서 onClick에 1 넣어주기

Page에서 Buttons에 onClick 넘겨주기

Buttons는 onClick 받기, onClick에 i 주면 누르는 숫자만큼 늘어나게

Button에 onClick 받아서 처리하게 하면 작동함

속성들을 받아주고 버튼모양, 개수는 각자의 컴포넌트에서 처리

 

---

 

🧸 자바스크립트 코딩의 기술 스터디 1회

 

• 주제 : 1장 변수 할당으로 의도를 표현하라
• 시간 : 저녁 9시 10분

문제와 답

 

Q1 : scope란 무엇인가요?

A1 : 유효 범위로 변수가 사용되는 범위이다

 

Q2 : scope를 사용하는 이유

A2 : 변수의 사용 범위를 제한하기 위해서 사용

 

Q3 : scope는 언제 생성될까요?

A3 : 함수를 선언할 때 생긴다

 

Q4 : function scope와 block scope의 차이

A4 : block scope는 function scope의 부분 집합

 

Q5 : 변수 선언 시, const와 let보다 var이 권장되지 않는 이유

A5 : let과 const는 같은 이름의 변수를 다시 선언할 수 없어서 실수를 줄일 수 있다

let과 const는 블록 유효 범위를 따른다

var로 할당한 변수는 함수 내에서 마지막으로 할당한 값을 참조한다

 

Q6 : let보다 const로 변수 선언을 선호하는 이유

A6 : const는 재할당을 할 수 없어 코드값이 변하지 않는다는 점을 

 

Q7 : const로 선언된 변수의 값은 조작이 언제나 불가능한가요?

A7 : const에 배열을 할당하는 경우에 배열의 항목은 바꿀 수 있다

 

Q8 : 클로저란 무엇인가요?

A8 : 함수 안에서 사용되는 함수를 클로저 함수라고 한다.

변수는 생명주기가 끝나면 사라져야하지만 참조하고있는 함수가 있어서 사라지지 않는다.

선택값을 사용해야 할 때, private하게 만들 때 사용한다

 

Q9 : 어휘적 유효 범위 변수 선언과 블록 유효 범위 변수 선언의 변수 접근 측면에서의 차이점

A9 : 블록 유효 범위 변수를 선언한 경우에는 범위 밖에서는 접근할 수 없다

어휘적 유효 범위를 따르는 변수는 변수를 선언한 경우에는 함수 내부 어디서는 접근할 수 있다

 

Q10 : const로 선언된 배열에 push가 가능한가? 그 이유는?

A10 : push는 가능하다. const는 재할당이 되지 않는데 push는 할당이 아니기 때문

 

Q11 : 변수에 할당한 문자열에 템플릿 리터럴을 이용하려면 필요한 지정자

A11 : `${...}`

 

Q12 : 다음 코드를 실행할 시, 콘솔에 뜰 숫자

 

 

A12 : var로 변수를 선언하였을 경우 함수 내에서 마지막으로 할당한 값을 참조하므로 2가 출력된다.

 

Q13 : 다음 코드를 실행할 시, 콘솔에 뜰 숫자

 

 

A13 : 1: true, 2: false, 3: true, 4: true

1,3번은 같은 참조값을 가지고 있어서 true가 나오고

2번은 value 값이 같을 뿐 다른 참조값을 가지고 있어서 false가 나온다

4번은 obj2와 obj3이 같은 참조값을 가지고 있어서 obj3를 변경하면 obj2도 같이 변경되어 true가 나온다

 

Q14 : 이 코드는 오류없이 작동하는 코드인가? 오류가 있다면 어디서 오류가 나는지 설명하고, 작동한다면 콘솔에 어떤 출력이 나올지 설명하시오.

 

A14 : 오류가 발생하지 않는다. (엥! 오류가 발생할 줄 알았는데 뭐지!)

const로 선언하면 같은 이름의 변수로 다시 선언을 할 수 없지만

중괄호 안에서는 블록 유효 범위 변수가 되어 가능한가봐요

console.log(name)을 중괄호 안에서 실행하면 고양이가, 밖에서 실행하면 강아지가 나와요

 

문제 12번부터 14번까지는 스터디에서 다루지 않아 정답이 아닐 수 있습니다!

혹시 이 글을 보시고 제 답이 틀렸다면 알려주세요 ㅎㅎ

 

스터디 전

 

기분	이유	기대하는 것
7	대답에 자신이 없어요	질문에 답하며 아는 것 끄집어내는 연습!

 

스터디 후

 

기분	얻은 것	할 것
10	다른사람들과 같이하는 공부의 장점을 알게 되었습니다	답하지 못한 질문들 다시 공부하기

 

필기노트

 

 

응~~망인 필기 ㅋㅋㅋ

 

---

 

😁 오늘 한 일

---

 

📕 공부하기

- 오늘은 못풀었던 과제들 풀이를 보고 공부했어요

- 흠.. 진짜 이걸 혼자서는 절대 못만들었을 것 같아요

- 선생님은 엄청 쉽게 하시는데 거기까지 생각이 안들어요 ㅠ

 

👩‍🏫 스터디하기

- 오늘 첫 스터디에 참여했어요!

- 온라인이라 같이 교육을 듣는 분들을 못만났는데 온라인으로라도 보니 반가웠어요

- 스터디를 진행하니 모르는 부분을 채울 수 있고 복습도 돼서 좋아요!

- 무엇보다 사람을 못만나는데 사람들이랑 얘기하니까 좋아요ㅠ

 

🥩 오리고기먹기

- 언니와 함께하는 맛있는 외식 2탄!! 오리고기를 먹었어요

- 일산에 있는 가나안덕이라는 음식점이에요 우리가족이 제일 좋아하는 오리고기 식당!

- 오리고기를 먹고요 녹두죽을 무한으로 먹을 수 있고 고구마도 줘요! 강추입니다

- 우리 가족은 마늘도 엄청 많이 먹어요 ㅋㅋㅋ 또먹고싶다 ㅠㅠ