if문 자바와 코틀린은 똑같이 생김 차이점 자바에서 if-else는 Statement 코틀린에서는 Expression Expression과 Statement Statement: 프로그램의 문장. 하나의 값으로 도출되지 않는다. 자바에서는 if문을 하나의 값으로 취급하지 않는다. ( Statement ) Expression: 하나의 값으로 도출되는 문장. 자바에서 3항 연산자는 하나의 값으로 취급된다. ( Expression 이면서 Statement ) 코틀린에서는 if-else를 expression으로 사용할 수 있기때문에 3항 연산자가 없다. // Expression & Statement - if / else fun getPassOrFail(score: Int): String { return if (s..
단항 연산자 / 산술 연산자 단항 연산자 ++ -- 산술 연산자 + - * / % 산술대입 연산자 += -= *= /= %= 비교 연산자와 동등성, 동일성 비교 연산자 > = money2 } 동등성(Equality): 두 객체의 값이 같은가 코틀린: == ( 간접적으로 equals를 호출 ) 자바: equals 동일성(Identity): 완전히 동일한 객체인가 ( 주소값이 같은가 ) 코틀린: === 자바: == 논리 연산자 / 코틀린에 있는 특이한 연산자 논리 연산자 자바와 완전히 동일하고, 자바처럼 Lazy 연산을 수행한다. && || ! in / !in 컬렉션이나 범위에 포함되어 있다. / 있지않다. a..b a부터 b까지의 범위 객체를 생성한다. a[i] a에서 특정 index i로 값을 가져온다...
1. 기본 타입 코틀린에서는 선언된 기본값을 보고 타입을 추론한다. 자바와 다른 점 자바: 더 큰 타입으로의 기본 타입간의 변환은 암시적으로 이루어질 수 있다. 코틀린: 기본 타입간의 변환은 명시적으로 이루어져야 한다. 코틀린은 타입 변환시 to변환타입() 메서드를 사용해야 한다. 2. 타입 캐스팅 value is Type value가 Type이면, true 반환 value가 Type이 아니면, false 반환 value !is Type value가 Type이면, false 반환 value가 Type이 아니면, true 반환 value as Type value가 Type이면,Type으로 타입 캐스팅 value가 Type이 아니면, 예외 발생 value ?as Type value가 Type이면, Type으..
✏️ 코틀린에서 null을 다루는 방법 한번 null 검사를 하면 non-null 임을 컴파일러가 알 수 있다. null이 아닌 경우에만 호출되는 Safe Call( ?. )이 있다. null인 경우에만 호출되는 Elvis 연산자 ( ?: )가 있다. null이 절대 아닐때 사용할 수 있는 널 아님 단언 ( !! ) 있다. 코틀린에서 자바 코드를 사용할 때, 플랫폼 타입 사용에 유의해야 한다. 플랫폼 타입: 코틀린이 null 관련 정보를 알 수 없는 타입 런타임시 Exception이 발생할 수 있다. 해결방법 Java 코드를 읽으면서 null 가능성을 확인 코틀린으로 Wrapping 한다.
✏️ 코틀린에서 변수를 다루는 방법 모든 변수는 var 또는 val를 붙여주어야 한다. var: 변경 가능 val: 변경 불가능 타입을 명시적으로 작성하지 않아도, 타입이 추론된다. Primitive Type과 Reference Type을 구분하지 않아도 된다. Null이 들어갈 수 있는 변수에는 타입뒤에 ?(물음표)를 붙여주어야 한다. 객체 인스턴스 시에는 new 붙이지 않아야 한다.
✏️ 정의 코드 린터: 문법에서 에러는 아니지만 에러로 약속하자고 규칙을 정하는 것이다. 실행하는데는 문제가 없다. eslint 규칙으로는 import 순서, == 금지 등이 있을 수 있다. eslint 자체에 Formatter 기능도 어느정도 가지고 있다. 코드 포메터: 코드를 보기 좋게 만들어주는 것이다. prettier 규칙으로는 띄어쓰기 2칸, 특정 길이가 넘어가면 줄바꿈 등이 있다. 🔎 eslint 설치 방법 next.js는 package.json에 들어가보면 eslint가 이미 설치되어 있다. 따라서 따로 eslint를 설치하지 않고, 설정파일을 만드는 것부터 시작한다. 설치가 완료되면, eslintrc.json 파일이 생성된다. 그리고 파일을 열면 빨간줄이 생기는데, 이는 standard 규..
✏️ 이벤트 버블링 이벤트 버블링이란 특정 화면 요소에서 이벤트가 발생하였을 때, 해당 이벤트가 더 상위의 화면 요소들로 전달되는 특성을 의미한다. 이러한 경우, event.target.id 가 아닌 event.currentTarget.id를 사용하여 실제 이벤트 함수가 실행되는 태그의 id를 가져올 수 있다. 또한 event.stopPropagation()을 사용하여 전파를 중단할 수 있다. ✏️ 이벤트 캡처링 이벤트 캡처링은 버블링과 반대로 상위에서 하위로 이벤트가 전파되는 단계이다.
🆚 value와 defaultValue의 차이 defaultValue: input tag에서 처음 보여줄 값 value: input tag에서 계속 보여줄 값 따라서 defaultValue를 지정해주고 input 창에 입력을 하게되면 값이 수정되지만, value를 지정해주고 input 창에 입력하게되면 입력이 되지않고 지정해준 value 값만 보여주게 된다. ❓ input 창이 변경되고, 초기화되도록 value 값에 data를 지정해주려면? input 창의 value를 입력 후 초기화해주려면, state 값을 초기화해주면 된다. 예) onChange 이벤트로 작성된 state 변수 writer const [writer, setWriter] = useState('') const onChangeWriter ..
예시 interface export interface IProfile { name: string age: number school: string hobby?: string } 1. Partial 타입 interface 내 변수를 모두 ?: 로 바꾼다. type a = Partial 2. Required 타입 interface 내 변수를 모두 : 로 바꾼다. type b = Required 3. Pick 타입 interface 내 변수 중 원하는 변수를 골라서 객체를 만든다. type c = Pick 4. Omit 타입 interface 내 변수 중 원하는 변수를 제외하고 객체를 만든다. type d = Omit 5. Record 타입 type e = "철수" | "영희" | "훈이" // Union 타입..
🆚 rest-api vs graphql rest-api: 타입스크립트를 적용하게 되면 수동으로 만들어줘야 한다. graphql: graphql-codegen을 이용해 명령어 하나로 만들어준다. 📌 graphql-codegen 세팅 graphql-codegen 사이트에 접속하여 installation 명령어 복사 후 실행 yarn add -D @graphql-codegen/cli yarn add -D @graphql-codegen/typescript codegen.yml 파일 추가 schema: graphql 주소 generates: ./src/commons/types/generated/types.ts: plugins: - typescript config: typesPrefix: I 명령어로 codegen..
