전체 글29 type 키워드 파헤치기 Type Alias (타입 별칭) 코드를 짜다보면 매우 길고 복잡하게 타입을 나열하게 될때가 있음. 예를들면, 이렇게 길고 복잡하게 쓰게되면 나중에 내가 다시 보거나 다른 사람이 보기에 가독성이 떨어질수 있음. 이거대신 , 이렇게 타입을 변수 생성하듯이 생성해서 부여해주면 , 1. 가독성이 높아짐, 2. 만들어둔 타입을 재사용 할 수 있음. 일반 자바스크립트 변수랑 헷갈리지 않기 위해 보통 관습적으로 1. 대문자로 시작한다. 2. Type 을 붙인다. - readonly 키워드 object 자료형은 const 키워드로 만들어도 프로퍼티 변경이 가능한데 이유는 const 는 재할당을 막아줄 뿐이지(참조주소 변경 방지) 그 안에 있는 프로퍼티 변경에 대해선 관여하지 않기 때문. object 속성을 변경할때 .. 2022. 6. 10. union 타입 확정 - type narrowing, assertion (as) Type Narrowing if문과 typeof 키워드나 in, instanceof 등으로 현재 파라미터의 타입을 검사해서 타입이 number 면 이렇게 해주세요 ~, 타입이 string 이면 이렇게 해주세요 ~ 하는것. 타입이 확실하지 않을 때 생기는 부작용을 막기위한 장치임. 예를들면, 이렇게 그냥 variant 파라미터는 number 또는 string 이라는 union type 이기 때문에 "variant + 1 은 할수 없어요" 라고 에러를 띄워줌 여기에 적절한 narrowing 을 해준다면 "variant 파라미터의 타입이 number 면 variant +1 을 해주시구요, string 타입이면 variant +1 을 해주세요. 그것도 아니면 그냥 0을 반환해 주세요." 가 됨. 이렇게 코딩하는.. 2022. 6. 10. union type, any, unknown - 타입 나중에 정하기 union type let newName: string | number = 'chris'; "이 변수의 타입엔 string 이나 number 타입이 들어올수 있습니다" 라는 뜻 할당하는 순간 그 자료형에 맞는 타입으로 변한다. any type 어떤 자료라도 다 넣을수 있다. any 타입은 버그를 발생 시킬 위험이 많고, 발생한 에러를 추적하기가 힘들게 만들기때문에 가급적이면 쓰지않는것이 좋다. any 타입 쓰면 타입스크립트를 쓰는 이유가 없음. unknown type unknown type 도 any type 처럼 아무 자료형이나 다 넣을수 있지만 어떤 타입이 들어오는지 명확히 모를 경우에는 any type 보다는 unknown type 을 쓰는게 그나마 나은데 그 이유는 any type 은 any ty.. 2022. 6. 8. tsconfig.json - typescript 컴파일 세부 설정 기본 옵션 { "compilerOptions": { "target": "es5", // 타입스크립트파일을 어떤 버전의 자바스크립트로 바꿔줄지 정하는 부분 "module": "commonjs", //자바스크립트 파일간 import 문법을 구현할 때 어떤 문법을 쓸지 정하는 곳 "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 "checkJs": true, // 일반 js 파일에서도 에러체크 여부 "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react' "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일) "o.. 2022. 6. 8. 콜백 함수, promise, async await 그리고 동기와 비동기 브라우저 동작방식 가끔 가다 javascript 는 비동기적 실행이 되는 (병렬처리가 되는) 언어다 라고 하는 사람들이 있는데 javascript는 동기적으로 실행 되는 프로그래밍 언어임. 비동기적으로 코드를 실행해주는 키워드들이 있긴하지만 자바스크립트는 동기적으로 동작함. 예를들면 setTimeout 함수나 eventListener, ajax 요청 등과 같이 오래 걸리는 애들은 비동기적으로 처리됨. 근데 이건 자바스크립트가 얘네를 비동기적으로 처리하는게 아니라 브라우저가 그렇게 처리해주는 것. 무슨말인지 이해하려면 브라우저가 작동하는 원리를 알아야 하는데 예를들어 이런 코드를 실행한다고 가정하자. const a = 2; const b = 3; const c = 4; console.log(a); setT.. 2022. 3. 30. array, object 콘솔에서 출력할 때 신기한 점 - console lazy evaluation 여러분들 이 코드 간단하니까 한번만 보세여 자바스크립트는 코드를 위에서부터 한줄 한줄씩 해석하고, sort함수는 원본 배열을 바꿔버리니까 상식적으로 생각해보면 1번 콘솔로그는 원본 items 를 출력하고 2번 콘솔로그는 sort 된 items 를 출력할거 같지 않음 ? 근데요 콘솔에서 배열 펼쳐보면 같다고 나옴 엥? 콘솔 이새끼 이거 구라치네 내 언젠간 걸릴줄 알았다 여러분들 컴터는 거짓말 안함 그냥 입력되있는대로, 설정되있는대로 계산 해 줄뿐 그냥 내가 모르는거였음 여기에 Array(6) i 되있는 부분에 하늘색 네모 안에 있는 i 에다가 마우스 올려보면 이런글이 나옵니다. 영어 이런거 잘 모르지만 대충 읽어보면 이 값은 처음 펼칠때 검사되었습니다. 값이 변했을 수 있습니다. 라고 하는거 같네요 이게 .. 2022. 3. 25. 이전 1 2 3 4 5 다음
