React native - storybook 프로젝트에 styled-components 설치 중 오류 발생.

2) 오류 문구

npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: aws@1.0.0
npm ERR! Found: react@18.1.0
npm ERR! node_modules/react
npm ERR!   react@"18.1.0" from the root project
npm ERR! 
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^18.2.0" from react-dom@18.2.0
npm ERR! node_modules/react-dom
npm ERR!   react-dom@"^18.2.0" from the root project

3) 해결 시도

캐시 삭제도 해봤지만 되지 않았고 npm install --save styled-components 뒤에 --save --legacy-peer-deps 붙여서 설치 성공

3-1) 참고 링크

4) 결과

https://github.com/invertase/react-native-apple-authentication RN에서 로그인을 구현하기 위해 애썼지만 버튼뜨기 전에 Prop-type 에러 ... 해결하면 또 다른 class/function 어쩌구 저쩌구..하면서 또 뜬다 이것 역시 찾아서 해봤지만 실패

2) 오류 문구

3) 해결 시도

1) 위에 페이지에서 하란 것을 다 해봤지만, 위의 문제로 귀결됨. 
2) expo apple login으로 시도했음.

4) 결과

2)번으로 성공. 애당초 expo로 갔어야 하는데 아는 게 없으니가 생 RN으로 시도해서 안됐던 것으로 예상.

터미널 expo init => json 파일 exit 실패

2) 오류 문구

The expected package.json path: /Users/kimhanwook/Desktop/package.json does not exist

3) 해결 시도

3-1) 참고 링크

4) 결과

컴파일러 옵션의 효과 설명하기.

들어가기 전 https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

const user ={
    name: "Hayes",
    id: 0,
}

//interface로 객체의 모양을 명시적 선언 

interface User {
    name: string;
    id: number; 

일치하지 않을 경우 TS에서 경고

1장

function fn(x) {
    return x.flip()
}

flip을 가져야만 위 함수가 잘 동작함을 우리는 '코드를 읽음으로써'알 수 있음. 하지만 JS는 fn이 특정 값과 어떤 동작을 수행하는지 알 수 있는 방법은 호출하고 무슨 일이 벌어지는지 보는 것 뿐. = JS는 오직 동적타입만 제공 그래서 실행 전 예측을 어렵게 만듬. 이런 측면에서 '타입'이란 어떤 값이 fn으로 전달될 수 있꼬, 어떤 값은 실행에 실패할 것임을 설명한 개념

정적 타입 검사

코드를 실행하기 전 미리 버그를 발견할 수 있는 도구 TypeScript TypeScript로 실행하면, 코드가 실행되기에 앞서 오류 메세지를 확인할 수 있음.

//JS

const user = {
    name: 'Daniel",
    age: 26,
};

user.location
//undifined 

오류 아닌 오류가 난다.

하지만 TS에서는 Property 'location' does not exist on type '{ name: string; age:number;}'.
명확한 오류가 난다. 이처럼 TS는 명시적 버그는 아니지만, 겉으로 드러나지 않는 버그를 꽤 많이 잡아냄. ex) 오타, 호출되지 않은 함수, 논리 오류

tsc, TypeScript 컴파일러 npm install -g typescript tsc 전역 설치

tsc hello.ts 변환된 JS파일이 다운레벨링을 통해 생성(템플릿리터럴 x)

tsc --target es2015 input.ts = ECMAScript 5로 실행해서 템플릿 리터럴 수정 X

Everyday Types

원시 타입: string, number, boolean TS에서 각자 대응하는 타입이 존재.

• string: "Hello world"와 같은 문자열 값
• number: 42와 같은 숫자. int, float가 별도로 존재 X 모든 수는 number
• boolean: true / false

배열

• [1, 2, 3]같은 배열의 타입을 지정은 number[] 구문 사용 string[] = 문자열 [number] = 전혀 다른 의미를 가짐(튜플 타입 부분 참조)

any

TS는 any라는 특별한 타입이 있음. 특정 값으로 인하여 타입 검사 오류가 발생하는 것을 원하지 않을 때 사용.

let obj:any = {x: 0};

obj.foo();
obj();
obj.bar = 100;
obj = "hello";
const n: number = obj;
// 이와 같은 코드들은 모두 오류 없이 정산적으로 실행
// `any` 사용하면 추가적인 타입 검사가 비활성화 

변수에 대한 타입 표기

const, var, let 등을 사용해서 변수를 선언할 떄, let myName: string = "Alice";

• 하지만 위와 같은 경우 대부분은 타입을 표기하지 않음 대부분 TS가 타입을 변수의 초깃값의 타입을 바탕으로 추론

함수

매개변수 타입 표기 function greet(name: string) { console.log("Hello, " + name.toUpperCase() + "!!"); } greet(42) 실행되면 런타임 오류 발생

"React Native" Pressable을 누르면(onPress) console.log가 나와야 하는데 나오지 않음

2) 오류 문구

3) 해결 시도

1) 처음에는 다른 곳의 코드가 꼬인 줄 알고 고쳐봤지만 없는 같아 React Naitve 공식 문서 참고 -> Pressable =onPress가 아니라 onPressin으로 동작

3-1) 참고 링크

https://reactnative.dev/docs/pressable //React Nativer 공식 문서

4) 결과

1로 해결한 줄 알았으나 아님

버튼을 클릭하면 이메일, 패스워드 값이 제대로 전송되지 않음

2) 오류 문구

..

3) 해결 시도

1) 코드에 잘못된 곳이 있나 찾아보는 중

3-1) 참고 링크

4) 결과

1. state(상태)의 변경이 있을 때

2. 새로운 props가 들어올 때

3. 기존 props가 업데이트 됐을 때

4. 부모 컴포넌트가 렌더링 될때

2) State, Props

setState() -> state 객체에 대한 업데이트를 실행. state가 변경되면, 컴포넌트 리렌더링 됨

setState 호출은 비동기적으로 이뤄짐

state와 props의 차이점은 state는 선언된 컴포넌트 안에서 관리되는 반면 props는 다른 컴포넌트에 전달할 수 있음.

더미 데이터의 값을 찾을 수 없다고 나옴

2) 오류 문구

Render Error can't find variable: active

3) 해결 시도

1) 스펠링이 틀린 게 있는지 체크 -> 없었음

2) active 앞에 가져온 props의 값 호출. icon.active -> 호출 성공

3-1) 참고 링크

4) 결과

2번으로 해결

expo 시뮬레이터로 잘 실행 되다가 리로드 한 후로 오류 발생

2) 오류 문구

iOS Bundling failed 319ms ENOENT: no such file or directory, open '/Users/user/Desktop/ig-clone/node_modules/react-native/node_modules/@react-native/normalize-color/package.json'

3) 해결 시도

1) node_modules 파일을 삭제하고 $ npm install을 하라는 글이 많아서 시도 -> 하지만 또 다른 오류 발생해서 포기

2) 모든 터미널과 시뮬레이터 등을 다 종료 한 후에 다시 실행하면 되는 경우도 있다는 정보 발견 -> 성공

3-1) 참고 링크

https://www.korecmblog.com/ERESOLVE-unable-to-resolve-dependency-tree/

4) 결과

2번으로 오류 해결

더미 데이터를 만들어서 그 안에서 이미지, 이름 등의 정보를 가져와서 사용하는데, Url로 해놓은 이미지가 스크린에 나오지 않는 상황.

2) 오류 문구

...

3) 해결 시도

1) JSON 파일로 만들어야 하는지 서치. -> 번거로울 거 같아서 시도하지 않음

2) 다른 이미지 파일 URL로 변경해서 다시 시도 -> 역시 실패

3) 아래 사이트를 발견 -> 사이트에서 제공하는 URL 사용 후 해결

3-1) 참고 링크

더미 이미지를 가져다 사용할 수 있는 유용한 사이트 https://placeholder.com/

4) 결과

3번으로 이전에 호출되지 않던 이미지까지 호출 성공

**이전에 가져온 URL 자체의 문제가 있어서 호출되지 않았던 거 같다 2022.12.02

전날까지 잘 실행 되던 $ expo start가 자고 일어난 후 ios 시뮬레이터에 오류가 남.

2) 오류 문구

styleSheet.... AppRegistry.runApplication()

3) 해결 시도

전문은 더 길었지만, 뒤에 AppRegistry.runApplication()가 포함된 사이트가 더 많이 나와서

1) $ yarn add react-native@said 버전 을 실행해서 0.68.0으로 다운 그레이드 -> 여전히 해결 X

2) 코드를 뜯어보다 위에 styleSheet 가 import되지 않은 것을 발견 -> styleSheet를 import함.

3-1) 참고 링크

https://github.com/facebook/react-native/issues/34688 버전을 다운그래이드 함

4) 결과

2번으로 해결

JWT

제때 제출하지 못했지만, 사전 스터디에서 간략하게 로그인/회원가입을 만들어봤다. 구색을 맞춘 회원가입시 비밀번호 재입력이 있었지만, POST로 아이디, 비번, 비번2를 보내고 GET으로 DB에 있는 아이디, 비번이 일치하면 로그인하게 만들었다. 그래서 이 구조를 한 번 해보고 [로그인/ 회원가입] 세션을 들으니까 편했다.

세션 자체를 정확히 이해하지는 못했지만, 어떤 원리로 돌아가는지...쿠키, Hash256(단방향 암호화), JWT발급 이해는 이해는 됐다.

0-1에서 강의를 들으니 0-9로 간 느낌이랄까...

API - Application Programming Interface(애플리케이션 프로그램 인터페이스)

API 명세서를 작성할 때 어떤 명칭으로 데이터를 어떻게 처리할지 문서를 만들고 작업하니 어떻게 작업해야 할지, 그리고 왜 초반의 데이터의 구조를 명확하게 잡고가야 하는지, Depth을 잘 잡고 가야겠다.

하지만 이제 구조에 대한 얕은 이해 말고, 더 명확하게 알아가고 싶다. 알고리즘 문제도 마찬가지다. 어떻게 해서 어떻게-사실 이게 명확하게 알지 못한다는 반증이지만-하면 되는 것 까지는 이해하겠는데, 막상 식으로 옮겨 적으려면 어디서부터 해야하는지 손을 쉽사리 대지 못한다.

막상 정리를 하려니 WIL를 적을게 많지 않았다. 다음주는 카테고라이징을 해서 조금 더 해야겠다. _ // 그렇게 활기찬 성격은 아니라, 그다지 많은 소통을 하지 않는데, 동료들과 더 많은 소통을 하는 게 좋겠다._

1) 느슨한 타입(loosely typed)의 동적(dynamic) 언어

• JavaScript의 변수에 값을 할당하거나 재할당할 경우 무조건적으로 어떤 특정 타입으로 연결되지 않고, 해당 값의 자료형으로 연결된다. C, C#, C++, Java 등의 언어는 정적 언어로 변수 선언 시 할당할 값의 자료형을 함께 선언해주어야 하는 것과 다르다.
• 예시)

  let foo = 10 foo의 자료형은 숫자 foo = 'bar' 기존 foo의 자료형이 문자열로 바뀜 foo = true 기존 foo의 자료형이 불린형으로 바뀜`

2) JavaScript 형변환

• 원시형 자료의 형 변환 1번 문항의 예시처럼 JS는 함수와 연산자에 전달되는 값을 적절한 자료형으로 자동 변환해준다. 이러한 과정을 "형 변환(type conversion)"이라고 한다. 전달받은 값을 "명시적 변환(의도를 갖고 원하는 타입으로 변환)"하는 경우도 형 변환이라고 할 수 있다.

• 명시적 변환 예시) let value = true value의 자료형 자동적으로 Boolean으로 지정한다 value = String(value) 자료형을 문자열로 명시적 변환한다 console.log(value) //true

• 객체의 형 변환 : 객체끼리 더하는 연산을 하거나, 빼는 연산을 하면 객체는 자동 형 변환되어 원시값으로 변환된 후 연산이 수행된다. 객체는 논리 평가 시 true를 반환한다. 따라서 객체는 숫자형이나 문자형으로만 형 변환이 일어난다. 객체끼리 연산을 하거나 수학 관련 함수를 적용할땐 주로 숫자형으로 형 변환되고, alert와 같이 객체를 출력하려고 할 땐 문자형으로 형 변환된다. 객체 형 변환은 'hint(목표로 하는 자료형)'라 불리는 값이 구분 기준이 되어 세 종류로 구분할 수 있다.

string: 문자열 변환 number: 숫자형 변환 default: 연산자가 기대하는 자료형이 확실치 않을 때 hint는 default가 된다. 예를 들어 이항 덧셈 연산자 +의 경우 피연산자의 자료형에 따라 문자열을 합칠 수도 있고, 숫자를 더할 수도 있다. 따라서 +의 인수가 객체일 때 hint는 default가 된다. Date 객체를 제외한 모든 내장 객체는 hint가 default인 경우와 number인 경우를 동일하게 처리하기 때문에 default로 지정되는 경우를 굳이 모두 외우고 있을 필요는 없다. 자바스크립트는 형 변환이 필요할 때, 다음과 같은 알고리즘에 따라 원하는 메서드를 찾고 호출한다. 1> 객체에 objSymbol.toPrimitive메서드가 있는지 찾고, 있다면 메서드를 호출한다. Symbol.toPrimitive는 시스템 심볼로, 심볼형 키로 사용됩니다. 2> 1에 해당하지 않고 hint가 "string"이라면, obj.toString()이나 obj.valueOf()를 호출한다.(존재하는 메서드만 실행됨). 3> 1과 2에 해당하지 않고, hint가 "number"나 "default"라면 obj.valueOf()나 obj.toString()을 호출한다(존재하는 메서드만 실행됨).

1. ==, ===

• ==는 Equal Operator이로, ===는 Strict Equal Operator이다. a == b라고 할때, ==는 a와 b의 '값'이 같다면 true, 다르다면 false를 반환한다. (JavaScript는 자동 형 변환을 하기 때문이다) a === b라고 할때, ===는 a와 b의 '값'과 '값의 자료형'이 모두 같아야만 true를 반환하고, 이외엔 false를 반환한다. 원시형 자료의 경우 값과 값의 자료형만을 비교하지만, 배열이나 객체의 경우 각 변수의 메모리 주소까지 비교해 값과 값의 자료형이 같아도 메모리 주소가 다르다면 ==과 ===은 모두 false를 반환한다.

1. 느슨한 타입(loosely typed)의 동적(dynamic) 언어의 문제점은 무엇이고 보완할 수 있는 방법에는 무엇이 있을지 생각해보세요.

• JavaScript는 런타임 시 변수의 타입이 결정되기 때문에 타입 에러가 생기는 경우가 있다. 이를 해결할 방법으로 TypeScript를 활용할 수 있다. 런타임 이전에 타입이 올바른지에 대한 검사를 시행한다. ReferenceError를 유발하는 코드가 존재한다면 정적 언어는 컴파일 과정에서 오류를 출력하는 반면, 동적 언어는 해당 구문이 실행되는 시점에서 오류를 출력한다. TypeScript를 트랜스 파일(컴파일)하면 브라우저에서 자바스크립트가 출력된다.

1. undefined와 null의 미세한 차이들을 비교해보세요.

• undefined는 변수의 값이 지정되지 않을 것이며, null은 의도적으로 값을 넣지 않았음을 의미한다. 따라서 undefined의 자료형은 undefined이며, null의 자료형은 객체이다.

예시)
let testVar; alert(testVar); //undefined alert(typeof testVar); //undefinedlet testVar2 = null; alert(testVar2);//null alert(typeof testVar);//object

🐤 JavaScript 객체와 불변성이란 ?

- 1) 기본형 데이터와 참조형 데이터

** 선언 / 할당

선언 과정: 공간을 확보하고 변수명과 주소를 매칭시키는 과정 할당 과정: 해당 변수를가 가르키는 주소의 공간에 데이터를 저장하는 과정

**

기본형 타입(Primitive Type) 숫자(Number) 문자열(String) 불리언(Boolean) null undefined 심볼(Symbol)

기본형 데이터는 값을 그대로 할당하는 것. 메모리 내에 고정된 크기로 저장되면서, 원시 데이터 값 자체를 보관, 불변적 기본적으로 데이터는 하나의 메모리를 사용한다.(재사용)

예를 들면 var a; var b; var c = b; a = 10; b = false;

• 변수 a는 주소 414을 b는 주소 415를 c는 주소 416을 확보하고 해주당 주소를 변수명과 맵핑 시킨다.
• 기존 변수명을 새롭게 할당하려고 하는 경우, 새로운 변수는 별도의 공간을 확보하고, 불리언 값을 통해 기존 변수에 대입된다.(기본 값은 직접적 비교 가능)

b와 c가 같다고 표현되어 있으니, false의 명제는 유일하기에 b === c가 된다.

하지만 여기에 c = 10을 재할당 하면 c = 20이기에 b와 c는 같은 값이 아니게 된다.

참조형 타입(Reference Type) 객체(Object) 배열(Array) 함수(Function) 날짜(Date) 정규표현식(RegExp) Map WeakMap Set WeakSet

참조형은 기본형 데이터의 집합임으로 참조형 데이터는 값이 지정된 주소의 값을 할당합니다. 객체로 예를 들면 var obj = { a:10, n:"sol" } var obj2 = obj;

기본형 타입과 마찬가지로 메모리 공간을 확보하고 주소를 변수명과 매칭시키는 과정은 동일합니다.

할당과정에서 그 값이 기본형이 아닌 참조형 데이터들은 property와 data, 즉 key:value로 묶인 쌍들로 이루어져 있어 propery명과 value가 담길 주소를 매칭하기 위해 공간을 임의로 1000주소에 확보합니다. 1000에 a를 넣고 1001에 a의 value(10)을 넣습니다. 또 b를 1000에 할당하고 1002에 b의 value("sol")을 넣습니다. 결과적으로 선언을 하며 ex)410의 주소에 할당된 상태에서 key:value를 매칭 시킨 값을 410에 매칭시킵니다.

그리하여 obj2는 411번에 공간을 확보하고 obj가 가리키고 있는 1000주소를 할당하게 됩니다.

이것이 바로 참조가 이루어지는 형식입니다. 객체는 어딘가에 따로 저장되어 있고 그 객체가 저장된 주소만을 복사해 온 것입니다.

2) JavaScript 형변환

3) 불변 객체를 만드는 방법 먼저 불변(immutability)객체는 말 그대로' 변하지 않는 개체' 즉 이미 할당된 객체가 변하지 않는다는 뜻이다.

• JavaScript에서 불변객체를 만드는 방법은 기본적으로 const와 Object.freeze()를 사용하는 것이다. const키워드는 변수를 "상수"로 선언할 수 있다. 하지만 상수로 선언한 객체는 완전한 불변 객체는 아니다. const에 할당된 값이 상수가 되는 것이 아니라 할당 된 값이 상수가 되는, 즉 const로 선언한 변수가 상수가 되기 때문에 객체 재할당은 불가능하지만 객체의 속성은 변경이 가능하다.

Object.freeze() 먼저 메소드 사용법부터 알아보면 사용법은 간단하다. var test = { name:"kim" } Object.freeze(tset);

test변수에 key/value를 가진 객체를 할당 후 test변수를 동결 객체로 만들면 된다.

하지만 이 처럼 객체 재할당은 가능하다tset.name = 'sol'; 때문에 Object.freeze()도 불변 객체라고 할 수 없다.

결국 불변 객체는 const와 Object.freeze()를 조합하여 만들 수 있다(const의 재할당 불가 + Object.freeze의 객체 속성 불가).

const a = {age:18}; Object.freeze(a); 위와 같이 const할당 후 Object.freeze()로 해당 변수를 동결 객체를 만들면 "객체의 재할당과 속성 변경이 불가능한" 불변 객체가 된다.

- 4) 얕은 복사와 깊은 복사 얕은 복사는 객체의 참조값(주소 값)을 복사하고, 깊은 복사는 객체의 실제 값을 복사합니다.

먼저 JavaScript에는 원시값과 참조값 두 가지 데이터 타입의 값이 존재합니다.

• 원시값은 기본 자료형(단순 데이터)를 의미합니다. 변수에 원시값을 저장하려면 변수의 메모리 공간에 실제 데이터 값이 저장되고 할당된 변수를 조작하려고 하면 저장된 실제 값이 조작됩니다.
• 참조값은 여러 자료형으로 구성되는 메모리에 저장된 객체입니다. 변수에 객체를 저장하면 독립적인 메모리 공간에 값을 저장하고 변수에 저장되 메모리 공간의 참조(위치 값)을 저장해서 변수를 조작하는 것은 객체 자체를 조작하느 것이 아닌, 해당 객체의 참조를 조작하는 것입니다.

원시값을 복사할 때 값은 다른 독립적인 메모리 공간에 할당하기에 복사/수정을 해도 기존 원시값을 저장한 변수에는 영향을 끼치지 않습니다. 이처럼 실제 값을 복사하는 것을 깊은 복사라고 합니다. 하지만 이것은 자료형에 깊은 복사입니다.

참조값을 복사할 때는 변수가 객체의 '참조'를 가리키고 있기 때문에 복사된 변수 또한 객체가 저장된 메모리의 공간의 참조를 가르키고 있습니다. 복사를 하고 객체를 수정하면 두 변수는 똑같은 참조를 가리키고 있기 때문에 기존 객체를 저장한 변수에 영향을 끼칩니다. 이처럼 참조값(주소값)을 복사하는 것을 얇은 복사라고 합니다.

.../복사하는 방법/...

문제 1.

콘솔에 찍힐 b 값을 예상해보고, 어디에서 선언된 “b”가 몇번째 라인에서 호출한 console.log에 찍혔는지, 왜 그런지 설명해보세요. 주석을 풀어보고 오류가 난다면 왜 오류가 나는 지 설명하고 오류를 수정해보세요.

 let b = 1; 

function hi () {

const a = 1;

let b =100;

b++;

console.log(a,b);

}

//console.log(a);

console.log(b);

hi();

console.log(b);

그냥 출력) 1 1 101 1 주석 해제 출력) Uncaught ReferenceError: a is not defined //a는 function hi에 실행된 함수다. 즉 글로벌 변수가 아닌 로컬 변수다. 즉 함수가 호출되어 선언과 할당이 이루어지고 함수가 종료되면 소멸되서 함수 외부에서 const a를 찾을 수 없다.

호이스팅과 TDZ는 무엇일까

Hoisting(호이스팅)* // 호이스팅이란, 인터프리터가 변수와 함수의 메모리 공간을 선언전에 미리 할당하는 것을 말함. 변수의 선언과 초기화를 분리한 후, 선언만 코드의 최상단으로 옮기는 것을 말함.

hi(1);
 function hi (a){
 a++;
 console.log(a)
 }

함수도 마찬가지로 선언이 실행 된 후 실행문이 동작한다.

• JS는 초기화를 제외한 선언만 호이스팅한다.

  console.log(catName)
  var catName; //선언
  catName = "sol"; // 초기화

  위 코드는 호이스팅되어 아래와 같이 해석된다.

  var catName;
  console.log(catName); //undefined
  catNmae = "sol"; // 초기화 

  초기화는 호이스팅 되지 않고, 선언만 호이스팅된다.

JS는 const, let, var 등 모든 선언에서 호이스팅이 일어난다. *var는 선언과 동시에 undefined로 초기화 저장되므로 에러가 안나지만, const, let는 초기화 되지 않은 상태로 저장되므로 에러가 발생함. 초기화되지 않은 변수는 참조할 수 없기에 에러가 발생함.

- **변수는 3단계에 걸쳐 생성된다.**
-**1단계: 선언 단계(Declaration phase)**

변수를 실행 컨텍스트의 변수 객체에 등록한다.이 변수 객체는 스코프가 참조하는 대상이 된다.

- **2단계: 초기화 단계(Initialization phase)**

변수 객체에 등록된 변수를 위한 공간을 메모리에 확보한다.이 단계에서 변수는 undefined로 초기화 된다.

- **3단계: 할당 단계(Assignment phase)**

undefined로 초기화된 변수에 실제 값을 할당한다.

var 키워드로 선언한 변수는 선언 단계와 초기화 단계가 한번에 이뤄진다.         

즉, 스코프에 변수를 등록(선언 단계)하고 메모리에 변수를 위한 공간을 확보한 후, undefined로 초기화한다. 

따라서 변수 선언문 이전에 변수에 접근하여도 스코프에 변수가 존재하기 때문에 에러가 발생하지 않는다. 다만 undefined를 반환한다. 

이후 변수 할당문에 도달하면 비로소 값이 할당된다.

let 키워드로 선언된 변수는 선언 단계와 초기화 단계가 분리되어 진행된다. 

즉, 스코프에 변수를 등록(선언 단계)하지만 초기화 단계는 변수 선언문에 도달했을 때(코드 실행 후) 이뤄진다. 

초기화 이전에 변수에 접근하려고 하면 참조 에러가 발생한다. 이는 아직 변수가 초기화되지 않았기 때문이다. 

즉, 변수를 위한 메모리 공간이 아직 확보되지 않았기 때문이다. 

따라서 스코프의 시작 지점부터 초기화 시작 지점까지는 변수를 참조할 수 없다.

TDZ(Temporal Dead Zone)

hoisting(호이스팅) 개념과 비슷하다고 할수 있는데

function a () {
    console.log(x);
    const x = 'x2'; //TDZ
}

• const, let선언보다 변수에 접근하는 경우 발생함.
• TDZ는 let, const, class구문의 유효성읠 관리한다.
• function, import, var 구문은 TDZ에 영향을 받지 않고 현재 스코프에서 호이스팅된다.
• TDZ는 선언문이 존재하는 스코프 범위 안에서 변수에 영향을 준다.
• TDZ는 const, let, class 구문의 유효성에 영향을 미치는 중요한 개념이다. TDZ는 변수 선언 전에 변수를 사용하는 것을 허용하지 않는다.

  if(something) { //Outerblock scope
    if(simethingElse) {//Inner block scope
    pi;                     //Temporal Dead Zone(TDZ)
    const pi = 3.14;
        }
    }

• 반대로 var는 변수 선언 전에도 사용할 수 있기에 땨문에 사용을 피하는 것이 좋음.

막간 개념 변수 선언 시 값을 할당하지 않으면 -> undefined 선언되지 않은 변수를 참조하면 // ReferenceError: foo is not defined 배열이 기본으로 제공해주는 함수들이 있습니다. 이 중 원하는 데이터를 필터링 해주는 함수는 Array.portopype.filter()

계산을 하려면 값을 불러와야 하는데, 값을 지정해 주는 것이 익숙하지 않다.

<option value="10평">10평</option>
이였던 것을 10으로 수정했다. 
근데 사실 이렇게 한다고해서 10이 문자열에서 
숫자열로 변경되는지 모르겠지만 결과적으로는 됐다. 
<option value="10">10평</option>

<script>
let size = $('#size').val()
let price = size * 500
</script>
//POST방식으로 보내주고 GET으로 불러옴

리눅스에 접속하기 위해 ssh -i 키파일ubuntu@주소 를 누르면 어떤 때에는 실행되고, 어떤 때에는 되지 않아 키파일을 다시 넣어줘야 한다. 왜 그런지 모르겠다.

배열 만들기 배열은 "어떠한 자료형이든 넣을 수 있음

요수들의 순서를 인덱스index라고 부름. 배열을: 배열[1+1], 배열[1*3] 이런 식으로도 인덱스를 호출할 수 있는데.. 왜 이렇게 호출할까 싶었따. 예제가 있으면 좋을듯?

배열의 길이를 확인할 때는 arr.length 요소를 뒷 부분에 추가할 때는 arr.push(요소) 마지막 요소 반환은 arr[arr.length -1]

5개의 요소를 가진 배열에 arr[10] = 10을 추가하면 10번째에 10이 추가된다.

자료의 비파괴와 파괴 _얕은 복사와 깊은 복사에 대해서 말하는 거 같다. 사실 나도 잘 모른다. _ 비파괴적 처리는 원본을 유지한테 원본 값을 포함한 새로운 것을 만드는 것이다. 파괴적 처리는 push()메소드를 사용할 때 일어난다. 원본에 push()를 해버리면 원본 값의 상태가 영구적으로 변경된다. ->파괴적 처리는 메모리를 절약할 수 있지만, 원본이 사라지기 때문에 위험할 수 있음.

• if문으로 홀짝 구분 코드 만들기.

  const input = prompt('정수를 입력하세요');
  const number = Number(input)
  

if (number % 2 === 0) { alert(${input}은 짝수입니다.) }else{ alert(``${input}은 홀수입니다.) }

**삼항 연산자**
swich문은 생략하고 바로 삼항 연산자를 본다.
`코드가 ? true면 이 코드를 ? false라면 이 코드를` 간단한 예제 코드를 본다면 

const input = prompt('숫자를 넣어주세요'); const number = Number(input)

const result = number >= 0 ? '0 이상의 숫자입니다. : '0보다 작은 숫자입니다.'

```

*논리합 연산자 - 추가 * 논리합 연산자는 단축평가를 한다. true || console.llog('hi') 는 둘 다 true이지만 논리합 연산자는 왼쪽부터 계산하기에 true만 확인한 뒤 단축평가를 한다. false || console.log('hi') 는 좌변이 false 우변이 true이기에 우변을 실행함.

const rawinput = prompt('태어난 해를 입력해주세요.', ''); const year = Number(rawinput);

    let 간 = (
        '자,축,인,묘,진,사,오,미,신,유,술,해'
    ).split(',')

    let 띠 = (
        '갑,을,병,정,무,기,경,신,임,계'
    ).split(',')


    alert(`${year}년은 ${간[year%10]}${띠[year%10]} 년입니다.`)
    //split(',')을 기준으로 배열이된다. 

이런 식으로 활용할 수 있다.

김가네 솔이 오늘도 코딩 중?

2022.11.07 맥을 처음 구매하고 나서 VScode, React 등 여러 파일을 설치할 때마다 곱게 설치된 적이 없었다.

이번에도 파일질라에서 Desktop에 있어야 할 파일을 찾고, 키 파일을 넣고 서버를 돌리기까지 애를 엄청나게 먹었다. 별거 없는 거 같으면서 가장 귀찮고 중요한 "가짜일"에서 스트레스를 엄청 받는 타입이다. 더불어 될 때까지 해보고 질문하는 스타일을 가지고 있어서, 질문을 미루는 타입인데 점차 고치려고|쳐지고 있는 중이다.

_"혼자 공부하는 자바스크립트" _ 1, 2 챕터

문자열과 자료형은 사전의 앞쪽에 있을수록 값이 작음. '가방' > '하마' //false

=== 양쪽이 같다(==연산자와 다르게 데이터와 데이터 타입까지 일치 해야함) !== 양쪽이 다르다 / !(논리 부정 연산자)는 true ->false / false -> ture 로 변경한다. 토글 버튼을 만들 때 사용하면 될 듯

Boolean 논리합/논리곱 연산자

이전에 Prep 스타터 키트, 검색해봐도 그렇게 눈에 들어오지 않던 게 논리 연산자였다.

&&연산자(논리곱 연산자)는 양쪽 변의 값이 모두 true일 때 true로 결과로 단축, 이외에는 모두 false로함

||연산자(논리합 연산자)는 양쪽 변의 값 중 하나만 true여도 true의 결과로 단축

다른 곳에서는 왜 이렇게 이해하지 못했는지,, 의문이지만 이제 논리 연산자의 개념이, 만나는 코드에서 어떻게 써야 하는지 읽어야 하는지 이제 이해가 된다.

상수와 변수

상수는 const를 통해 선언 변수는 let, var를 통해 선언 // var는 전 블록 스코프에서 실행해도 글로벌로 실행됨. 즉 의도치 않은 값의 재할당이 일어날 수 있음

"혼자서 공부하는 자바스크립트"가 어렵지 않게 잘 나와 있는 거 같다. 싹 훑는 느낌으로 읽으면 좋을 것 같다.

예제 중 let a a = 1 이런 식으로 나와있는 예제가 내가 처음 봤더라면 안그래도 const, let, var가 헷갈리는데 선언, 할당..재할당 등 보기 쉬운 것들도 정말 많이 고민하고 "왜" 라는 물음을 던지며 끙끙됐을 것 같다.

• 사용자로부터 텍스트를 입력받을 때 prompt()함수 사용
• 숫자 자료형으로 변환할 때 Number()함수 사용
• 문자열 자료형으로 변활할 때String()함수 사용
• 불 자료형으로 변환할 때Boolean()함수 사용