Blog
19개의 글
TypeScript 5.2 업데이트
지난 8월 24일 TypeScript 5.2가 출시했습니다. 주요 변경사항은 using 키워드 지원, 데코레이터에 메타데이터 추가, 배열 복사 메서드 추가 등이 있습니다. using 키워드 추가 지난 게시글에서 소개한 자원 관리를 위한 키워드 using 이 추가되었습니다. let, const 대신 사용하는 변수 선언 키워드로, Symbol.dispose, Symbol.asyncDispose 로 된 속성 값이 있는 객체를 대상으로 사용할 수 있습니다. tc39에 제안된 내용이며, 다음 ECMAScript에서 볼 수도 있는 Stage 3 후보 상태입니다. 물론 후보 상태이므로, tsconfig.json 에서 compilerOptions.lib 배열에 esnext 혹은 esnext.disposable 을 추가해야지만 사용가능합니다. 데코레이터에 메타데이터 추가 지난 5.0에서 tc39 제안 내용에 맞춰 데코레이터가 새롭게 만들어 졌습니다. 이에 대한 후속 제안으로 메타데이터가 추가되었습니다. 데코레이터의 두번째 파라미터인 context 에서 metadata 라는 빈 객체가 할당되어 있으며, 이는 자유롭게 속성에 할당이 가능하고, 외부에서의 접근은 Symbol.metadata 를 통해 하실 수 있습니다. 데코레이터 메타데이터 예제 익명, 이름을 가진 튜플 혼합 지원
2023-08-28#개발#JavaScript#TypeScript
함수형 프로그래밍 알아보기
자바스크립트는 객체지향 프로그래밍과 함수형 프로그래밍을 지원하는 멀티 패러다임 언어입니다. 이로 인해 prototype, class를 통한 객체지향의 코드가 만들어지기도 하며, encodeURIComponent, Math.max 같이 함수형 프로그래밍의 코드가 만들어지기도 합니다. 이 두가지 모두 현재까지 사용되는 패러다임이며, 실제로 두가지를 혼용해가며 사용할 때도 있습니다. 그렇기 때문에 코드를 보다보면 어떤게 함수형이고, 어떤게 객체지향인지 혼동될 때도 있으니 이 두가지를 잘 알아두어야 합니다. 이번 글에서는 많이 알려진 객체지향 보다는 다소 생소한 함수형 프로그래밍을 정리해보려합니다. 함수형 프로그래밍 함수형 프로그래밍은 선언형 프로그래밍의 한 갈래입니다. 따라서 상태를 바꾸는 형태인 명령형과는 다르게 식과 선언으로 이루어진 선언형의 특징을 띄고 있습니다. 그리고 함수형은 다음과 같은 특징이 더 있습니다. 함수를 변수 처럼 다룰 수 있도록 1급 객체로 취급해야한다. 함수는 순수 함수가 되어야 한다. 대입을 하지 않는다. (불변의 값을 사용한다) 이러한 특징들을 지키며 만들다 보면, 변수를 쉽게 예측할 수 있고, 함수의 이름으로만 그 기능을 확실히 알 수 있다는 장점이 있어요. 그럼에 따라 함수를 읽을 때 좀더 빠르게 이해할 수 있는 쉬운 코드 모양이 나타나게 되는거죠. 함수는 1급 객체 (First-class citizens) 1급 객체(First-class citizens)라는 말을 처음 들어 보실 겁니다. 변수에 저장하고, 함수의 매개 변수나 반환 값으로서 사용할 수 있는 Entity를 이야기 합니다. 어려운 말일지 모르겠지만, 여러분이 자주 사용하던 Array.prototype.map, Array.prototype.sort처럼 매개 변수로 함수를 받고, React의 useCallback 처럼 함수를 반환하고, 변수에 저장하는 것을 의미합니다.
2023-08-28#개발#JavaScript
Javascript의 this 살펴보기
Javascript는 일급 함수, 프로토타입 기반 언어입니다. 이 때문에 this 키워드는 함수 실행 상황에 따라 바뀌게 됩니다. 전역 문맥과 함수 문맥으로 크게 나뉘고, 함수, 객체 메서드, 화살표 함수, 엄격모드 모두 다르게 작동 되므로, 이 모든 내용은 알아 두셔야합니다. 전역 문맥 전역 문맥의 this는 실행환경 별로 다르게 작동합니다. 브라우저에서는 전역 객체인 window를, Node.js와 Bun은 빈 객체 {}를, Deno는 undefined 로 할당되어 있습니다. 각기 다른 글로벌 객체를 다루기 위해 ES2020에서는 globalThis 라는 키워드가 추가되어있습니다. 런타임의 글로벌 객체는 Deno, global 등 다양하기 때문에 때문에 브라우저에서 전역 문맥의 this 가 globalThis 와 같다 할 수 있지만, 런타임 계열(Node.js, Bun)에서는 그렇지 않다는걸 유의하셔야 합니다. 전역 문맥의 this 함수 문맥 일반 함수 기본 함수의 this는 전역 문맥과 동일하게 동작합니다. 일반 함수 예제 문맥을 다른 문맥으로 넘기려면 Function.prototype.call, Function.prototype.apply 메서드를 사용하시면 됩니다. 매개변수 전달 방식의 차이만 있을 뿐 두개의 사용법과 기능은 거의 동일합니다.
2023-07-25#개발#JavaScript
Typescript의 새로운 키워드 “using”
타입스크립트는 현재 5.1 입니다. 그리고 준비중인 다음 버전인 5.2에서 using 이라는 새로운 키워드가 지원될 예정입니다. 이 키워드는 tc39에 제안된 내용이고, 현재 Stage 3 단계로 다음 ECMAScript에서도 볼 수 있는 후보 상태입니다. 새로운 키워드는 기존 let, const 변수 선언 키워드에 기능이 추가된 형태이며, 이 키워드를 이용해 선언한 변수는 블록 스코프를 벗어날 때 자동으로 자원을 해제해 주는 새로운 기능입니다. 일반적인 자원 해제 코드 패턴 위 예제처럼 스트림, 버퍼 등 다양한 자원의 수명관리와 관련된 소프트웨어 개발 패턴이 존재하고, 다음과 같이 각 상황에 맞게 자원을 해제하는 메서드 호출이 필요합니다. ECMAScript의 Iterator: iterator.return() WHATWG의 Stream Reader: reader.releaseLock() NodeJS의 파일 핸들러: handle.close() Emscripten C++의 객체 핸들: Module.\_free(ptr), obj.delete(), Module.destroy(obj) 또한 throw 를 대응하기 위해 try { ... } finally { ...release }로 오류를 검사하는 것이 일반적입니다. 이는 코드가 길어지고, 반복적인 패턴이고, 개발자가 자원을 해제하지 못할 경우 메모리 누수로도 이어지는 좋지 않은 패턴이기도 합니다. 여러개의 자원을 다루는 코드
2023-06-30#개발#JavaScript#TypeScript#ECMAScript
TypeScript 5.1 업데이트
지난 5월 30일 TypeScript 5.1이 출시했습니다. 주요 변경사항은 Node.js 최소 지원 버전, JSX 타입 작동 변경, Getter, Setter 타입 불일치 허용, undefined 를 함수 리턴 타입으로 허용 등이 있습니다. 최소 지원 버전 변경 ES2020 스펙으로 업데이트됨에 따라, Node.js의 최소 지원 버전 또한 14.17로 올라가게 되었습니다. 구 버전에서 TypeScript 5.1을 사용할 시 npm, yarn에서는 엔진 버전 경고, tsserver에서는 nullish 키워드(??) 미지원 오류 등이 발생하게 됩니다. npm 설치시 미지원 엔진 경고 함수 리턴 타입에 undefined 지원 사실 이 말만 봤을 때는 무슨 말이냐 하겠지만, 사실 지금까지의 TypeScript의 함수는 undefined만 리턴하게 될 때 void 혹은 any 라는 타입만 가능했습니다. 이제 함수의 리턴타입이 undefined 로 지정이 가능합니다. 함수 리턴타입 undefined 지원 Getter와 Setter의 타입이 달라도 됩니다 Getter와 Setter는 속성 접근에 매우 유용한 기능중 하나입니다. 5.1 이전 까지의 Getter와 Setter는 같은 타입을 강제로 했으나, 이제부터는 다른 타입이 허용됩니다. 이는 지금까지 문제되었던 DOM의 style 이라는 속성의 쓰기 타입을 해결하게 되었습니다.
2023-06-02#개발#JavaScript#TypeScript
Node.js 16은 곧 지원이 종료됩니다.
작년 22년 6월에 Node.js 블로그에 한 글이 올라왔습니다. 바로 Node.js 16의 지원 종료일을 24년 4월이 아닌 23년 9월로 무려 7개월을 앞당긴다는 내용입니다. (현재 시점으로는 3개월 남았습니다.) 이 내용에 따르면 OpenSSL 1.1.1의 지원이 9월 11일에 종료가 되면서 해당 버전을 사용하고 있는 16 LTS 버전 또한 같은 날을 기점으로 지원을 종료한다고 발표했습니다. OpenSSL 3.0은 21년에 출시가 되었는데 16에 적용을 못한 이유는 16의 공개 시기와 맞물리면서 업그레이드를 못한채 배포되었다고 합니다. 이 때문에 다음 버전인 17에서 OpenSSL 3.0을 적용했다는 기록이 있습니다. OpenSSL OpenSSL은 TLS와 SSL을 구현한 라이브러리입니다. 두 프로토콜은 https를 사용할때 사용되는 보안 레이어로써, 보안 기능을 담당하는 중요한 역할입니다. https 통신을 살펴보면 다음과 같습니다. https\:// 주소를 사용해 웹 사이트 방문 브라우저가 서버에 SSL 인증서를 요청 서버는 퍼블릭 키가 포함된 SSL 인증서 전송 브라우저가 받아온 인증서를 CA(Certificate Authority)를 통해 신뢰성 검사 브라우저가 비밀 세션 키를 포함한 메시지를 퍼블릭 키를 이용해 암호화하여 전송
2023-06-02#개발#JavaScript#Node.js
ES2023 살펴보기
올해 확정된 ECMA 2023은 총 4가지 제안이 수락되어 적용되었고, 배열에 대한 제안 2가지, 해시뱅, WeakMap 으로 프론트엔드 개발자가 알아두면 좋은 제안은 총 3가지 입니다. 전체 내용을 정리하면서 어떤 기능들이 추가됐는지 확인해봅시다. 마지막 기준 배열 찾기 배열과 형식화 배열(Typed Array)에 새로운 찾기 메서드가 추가되었습니다. Array.prototype.findLast, Array.prototype.findLastIndex 두가지로, 배열의 마지막부터 시작해 찾게되는 메서드입니다. 기존에 있던 find, findIndex 메서드는 모두 함수를 받고 있어 이 스펙을 직접 구현하는건 가능했지만, 함수의 명확한 명명 및 사용을 위해 이같은 제안이 생겼다고 합니다. Array.prototype.findLastIndex 예제 Array.prototype.findLast 예제 복사하여 배열 변경 기존 JS에는 배열에 대한 다양한 메서드가 존재합니다. sort, map, concat, splice 등 사용되는 메서드가 많은데 이들에겐 문제점이 존재합니다. 각 메서드는 리턴되는 값이 다르고, 원본 배열을 수정하는 메서드도 존재합니다. 이는 불규칙적이며, 혼란을 야기하기도 합니다. 원본 배열을 수정하는 메서드들을 수정하지 않고, 새로운 배열을 이용해 메서드를 사용할 수 있도록 새로운 매서드가 추가되었습니다. Array.prototype.toReversed 이 메서드는 기존에 있던 Array.prototype.reverse 라는 메서드의 복사 메서드입니다. 사용 방법을 기존과 동일합니다.
2023-05-30#개발#JavaScript#ECMAScript
TypeScript 5.0 살펴보기
TypeScript가 5.0으로 큰 변화를 맞이 했습니다. 이번 주요 변경사항은 Decorator, 파라미터 const 타입, Enum을 Union 타입과 호환 등 여러가지 큰 변화를 맞이 했는데 주요 변경점을 살펴보겠습니다. Decorator Nest.js를 사용하신 분이라면 아주 익숙한 문법이 보일겁니다. 바로 Decorator 기능인데요, 해당 기능은 지금까지 실험적(experimental) 기능이었습니다. 이번 5.0으로 올라오면서 실험적 기능이 해제되었고, 구현 방법 자체가 변경되었습니다. 이에 따라 기존 실험적 기능으로 구현된 Decorator는 호환이 불가능해졌습니다. 다행히도 기존 실험적 기능은 여전히 사용가능하도록 조치를 취해줬다고합니다. (Nest.js 팀은 현재 모든 Decorator를 재작성중이며, 당분간은 실험적 기능 옵션 —experimentalDecorators 를 켜서 사용할 것을 권고한 상태입니다.) 이번 변경된 구현법은 TC39에서 제안된 내용으로 변경되었고, 해당 제안은 스테이지 3에 해당하고 있어 추가적으로 큰 변경 사항 없이 적용될 가능성이 큽니다. 이 때문에 Microsoft는 TypeScript 5.0으로 올리면서 해당 내용을 공식 기능으로 변경된것으로 보입니다. 공식 지원으로 확인된 Decorator의 사용처는 class method getter setter field accessor 으로 총 6개입니다. 이 외의 실험적 기능에서 지원했던 사용처인 parameter 에 대한 지원이 삭제되었으며, 실험적 기능으로 지원되던 Decorator와는 완전히 다른 호환성을 지니게됩니다. 새로운 Decorator 기능을 보여주는 예제 Decorator 타입 지원 위에서 설명했다 싶이 실험적 기능이었던 Decorator 기능은 타입이 제대로 지원되지 않았습니다. 이로 인해 Decorator를 작성할 때는 항상 any 혹은 unknown 으로 만들어진 구현체를 사용해야 했고, TypeScript가 아닌 JavaScript에서 사용하던 방식처럼 직접 변수에 대해 validation을 맞춰서 사용해야하는 불편함이 있었습니다. 이번 5.0에서는 관련 타입 추가, decorator 사용시 타입 확인이 추가되어 보다 안전한 타입 사용이 가능해졌습니다. 새로운 Decorator를 타입까지 써서 확인하는 예제 const 파라미터
2023-05-08#개발#JavaScript#TypeScript
Next.js에서 SVG를 컴포넌트로 불러오기
Next.js는 기본적으로 이미지 파일을 import 하게되면 리소스 URL 방식으로 가져오게 됩니다. 따라서 다음과 같은 import 구문은 string으로 작동하게되죠. SVG 파일 import 예제 그런데 CRA나 다른 프레임워크를 사용하셨다면 이는 굉장히 불편하게 느껴질겁니다. 왜냐하면 다른 프레임워크는 SVG 파일에 대해서는 URL이 아닌 React 컴포넌트로 변환해 불러오게 됩니다. 이를 이용해 CSS의 fill 속성을 이용해 아이콘의 색상을 변경하는 방식을 사용하는 사람이 존재할 겁니다. (제가 그렇거든요..) 이를 해결하기 위해 next.config.js 를 어떻게 수정하고, 또 기존 URL 방식을 유지하면서 사용할 수 있도록 하는지 방법을 알아보도록 하겠습니다. 패키지 설치 Next.js에서는 기본적으로 웹팩 플러그인을 지원합니다. 그리고 SVG파일을 React 컴포넌트로 변환하는 유명한 플러그인 패키지는 @svgr/webpack 입니다. 이 플러그인을 사용해야지만 저희가 원하는게 가능하기 때문에 설치를 진행해봅시다. @svgr/webpack 패키지 설치 웹팩 설정 추가하기 Next.js에는 각종 설정을 관리하기 위한 파일인 next.config.js 파일이 존재합니다. 해당 파일의 webpack을 사용해 기존 Next.js에서 사용하는 웹팩 설정을 수정할 수 있습니다. 이를 이용해 svg 파일 불러오는 규칙을 수정할 예정입니다. 아래 내용을 확인하시고 적용하시면 됩니다. next.config.js에서 웹팩 설정
2023-05-03#개발#React.js#Next.js
ES2022 살펴보기
지난 22년 6월에 ECMA 스크립트의 13번째 표준안인 ES2022가 발표되었습니다. (링크) 이번 버전에서는 클래스 인스턴스 필드, static 필드, #name 형식의 private 필드, private 필드에 대한 in 키워드 지원 등 클래스의 필드에 대한 지원이 추가되었고, Error 내장 클래스의 cause 옵션 지원, RegExp의 d 옵션 지원 등 많은 부분이 추가되었습니다. 이번 포스트를 통해 다양한 변경 사항을 확인해보시면 좋겠습니다. Class 필드 지원 ES6에서 추가되었던 클래스에서는 \*\*“필드”\*\*라는 개념이 없고 기존 prototype 방식의 “속성” 밖에 없었습니다. 이 때문에 표준으로 작성하게 되면 이런 클래스가 만들어지게 됩니다. ES6 표준안대로 만든 클래스 이번에 추가된 필드에서는 다른 언어에서 사용하던 방식처럼 메서드를 작성한 클래스 블록에서 필드를 선언 할 수 있습니다. name = '철수'; 를 작성함으로 이 클래스의 인스턴스에는 name 이라는 필드가 생기게되고, 결과적으로 constructor를 생략하는게 가능해졌습니다! ES2022 표준안으로 재작성한 Person 클래스 Class static 지원
2022-11-30#개발#JavaScript
React 클래스이름이 적용된 컴폰너트 만드는 로직
저는 프론트엔드를 개발할때 CSS규칙이 좀 특이합니다. 일반적으로 CSS를 작성하신다면 \*를 이용하거나 각 태그들을 모두 같은 스타일로 초기화하고 사용하는실겁니다. 그러나 저는 각 태그별로 사용하는 CSS만 초기화하는 방식으로 사용합니다. 그러면서 한가지 습관이 들여진게 있는데 바로, 클래스이름을 해당 태그의 이름을 넣고 시작하는겁니다. 예를들면 리액트 컴포넌트로 생각을 한다면, Button이라는 \<button class="button">\</button>을 렌더링하는 컴포넌트를 만들고 시작합니다. 사용을한다면, \<Button onClick={...}>확인\</Button>으로 이름이 카멜케이스인 컴포넌트를 사용하게 되는것이죠. 이 방식에는 장점이 있습니다. 스타일을 적용한 컴포넌트와 스타일이 없는 순수 태그를 모두 사용이 가능하다는 점이있고, 외부 CSS보다 충돌이 많이 적은 편이라는것이죠. 외부 라이브러리에 대해 좀 얘기하면, 아마 많은 분들이 Bootstrap이나 기타 다른 CSS 스타일 라이브러리를 사용해보신다면 겪어보셨을 겁니다. 버튼 스타일 하나 바꿀려고 그 라이브러리의 내부를 뜯어보거나 브라우저 개발자 도구를 열어서 하나 하나 확인한적 있으실겁니다. 그 라이브러리가 어떤 스타일을 적용해놨는지도 모르니 말이죠. 저는 두가지 장점 때문에 직접 스타일을 하나 하나 짜가는 습관을 들여놨습니다. 아직 협업에선 초짜인지라 그런상황이 된다면 이게 득이될지 실에될지에 대해서는 차차 확인해 나가면서 제 습관을 고쳐야할 수도 있다는 점이있지만요. 쨌든, 이런방식의 습관을 쫌더 쉽게사용하려고 Classed라는 리액트에서 사용할 컴포넌트를 만들어주는 함수를 만들었습니다. 오늘은 이것을 소개할 겁니다. 알아야할것들 React컴포넌트인 만큼 React를 아셔야합니다. Jsx의 구조까진 아니더라도, React의 createElement와 forwardRef함수를 아신다면 아주 편해질겁니다. 그리고 저는 최신버전의 React를 사용하다보니 함수형 컴포넌트를 주로 사용하고, Hooks를 같이 사용합니다.
2019-12-02#개발#React.js
create-react-app에서 eject 없이 eslint 사용하기
이번엔 create-react-app의 eject 기능을 사용하지 않고, eslint 설정을 바꾸는 방법을 알려드리겠습니다. create-react-app 이란? create-react-app은 리액트 프로젝트를 처음 시작할때 사용하는 npm 패키지 입니다. 이를 통해 react-scripts라는 패키지 기반의 프로젝트 환경을 구축할 수 있도록 도와줍니다. 또한, 리액트 공식문서에서도 이를 사용하도록 되어있기 때문에 대부분의 리액트 시작하기 관련 글을 읽으시면 이를 이용해 시작하는 것을 볼수있습니다. 이 방식으로 프로젝트를 왜 많이 사용하냐면, 리액트 프로젝트에서 webpack, eslint 등 빌드 도구들에 이 빌드 도구들의 플러그인까지 설정할건 아주 아주 많습니다. 이를 한방에 해결해주는게 react-scripts 입니다. 그러면서 저희는 오직 리액트 앱 소스코드만 관리하면되는 장점이 있습니다. 2023년 기준으로 리액트 공식문서는 https\://react.dev 로 옮겨갔으며, 프로젝트 시작을 CRA가 아닌 Next.js, Remix 등으로 시작하도록 바뀌었습니다. 문제 모든 빌드 도구와 플러그인을 관리해주었지만 그 설정을 바꾸는 방법은 어렵거나 알려지지도, 존재하지도 않습니다. 그저 이 react-scripts를 떼어내는 npm run eject라는 커맨드로 모든 빌드 도구들을 프로젝트 코드에 직접 설치해주는 방식을 사용한 방법이 많이 알려져있죠. 이 eject는 모든 툴들을 프로젝트 소스에 병합하는 형태라 한번 사용하게되면 되돌릴 수 없고, 또한 모든 툴들을 직접 관리해줘야 하죠. 예를들어 webpack의 버전을 업그레이드 하고싶다면 react-scripts를 업데이트하면 끝이지만, eject를 하게되면 webpack과 함께 같이 사용하는 플러그인들까지도 함께 맞는 버전으로 업그레이드 해줘야합니다. 해결방법 react-scripts에서는 환경변수를 통한 일부 기능을 활성화 할 수 있습니다. 환경변수 중 EXTEND\_ESLINT 가 존재하고, 이를 활성화 하면 .eslintrc.json 을 통한 설정 정보 확장이 가능합니다. 이를 해주기 위해 저희는 react-scripts에서 기본으로 제공하는 dotenv를 이용해 환경변수를 추가할 예정입니다. 프로젝트 소스 코드 최상단에 .env라는 파일을 만들고 다음과같이 작성합니다.
2019-11-07#개발#React.js
Kotlin 확장 함수 활용하기
Kotlin 언어를 사용하다보면 이런 구문이 자주 보이게 될겁니다. T.apply {}, T.run {} 등 Java에는 없지만 Kotlin에 존재하는 확장함수라는 것을 직접 만들어보도록 하겠습니다. 확장함수(Extension Function) Java에서 기본으로 제공되는 클래스들에 함수를 추가하려면 새로운 클래스를 만들거나 static함수를 만들어 사용해야만하는 불편함이 있었습니다. 간단한 예를 들기위해 boolean과 int간의 형변환 예제를 만들어 보겠습니다. 삼항연산자로 짧은 코드를 만들었지만, 한눈에 의미를 파악하기 어렵고, 이런 코드가 반복되다보면 그렇게 보기좋은 코드가 되지 못합니다. 그래서 별도의 사용자 클래스내의 static타입의 함수를 만들어 사용하기도 했습니다. (어디까지나 설명을 위해 만든 예제이고, 실제로 이런식으로 bool과 int간의 형변환을 자주 사용하진 않습니다.) 하지만 Kotlin에서는 확장함수를 통해 Int와 Boolean 클래스에 함수를 만들어줘 클래스를 만드는 번거로움이 없이 편하게 함수를 추가할 수 있습니다. Int와 Boolean클래스에 확장함수를 만들어 주어 기존 클래스에 있는 것처럼 사용할 수 있습니다. 참고로 이렇게 확장함수를 넣어주게되면 100.toBoolean(), true.toInt() 이런식의 코드 또한 가능합니다. 람다식(Lambda Expression)
2018-11-04#개발#Kotlin
Kotlin 표준 함수 마스터하기
※ 본 게시글은 해외 포스팅을 번역한 글입니다. 코틀린에는 어떻게 사용해야할지 확실하지 않을 정도로 유사한 표준함수가 있습니다. 이들의 차이점과 어떤걸 선택해야하는지 명확하게 구별하는 방법을 소개하겠습니다. 스코프 함수 저는 run, with, T.run, T.let, T.also 그리고 T.apply에 초점을 맞췄습니다. 저는 호출 함수의 내부 스코프를 제공하는 것처럼 주요기능을 볼때 스코프 함수라 부릅니다. 스코프 함수인 run함수를 쉬운방법으로 설명해드리겠습니다. test함수의 내부를 보면, mood를 출력전에 I am happy라고 재정의한 격리된 스코프가 있고, 이는 완전히 격리된 run 스코프입니다. 이 스코프 함수 자체로는 매우 유용해 보이진 않습니다. 하지만 스코프보다 좋은 것이있습니다. 스코프의 마지막 객체를 반환하는 것입니다. 아래의 적절한 예제로, 두개의 뷰에 두번 사용하지 않고 show()를 사용할 수 있습니다. 스코프 함수의 3가지 속성 스코프 함수들을 좀더 흥미롭게 만들려면, 3가지 속성을 분류하세요.
2018-10-22#개발#Kotlin
Kotlin 콘솔에서 입력받는 3가지 방법
Kotlin이란 언어는 Java의 클래스, 메소드가 대부분 사용이 가능한 언어입니다. 그런 Kotlin언어의 콘솔 프로그램에서 입력을 받는 방법 3가지를 소개하겠습니다. 1\. readLine Kotlin 기본 함수중에는 readLine()이라는 함수가 있습니다. 이 함수는 콘솔창에서 입력이되면, 줄개행(엔터)를 기준으로 한줄씩 읽게되는 함수입니다. 이 함수의 리턴 타입은 String?이며, ?가 붙은 Nullable 타입입니다. 즉, 입력을 받을때 Null이 올 수 있는 함수입니다. 입력 출력 2번줄: !!을 붙여 Not Null타입으로 변환해줬습니다. 3번줄: readLine()!!을 통해 읽어들인 한줄을 그대로 println을 통해 출력합니다. 2\. Scanner Java에서 사용하던 Scanner라는 클래스입니다. Kotlin에서는 Java의 클래스와 메소드를 전부 사용가능합니다.
2018-10-05#개발#Kotlin
[Kotlin] HelloWorld
Kotlin이란 언어는 IntelliJ IDEA라는 개발환경을 만든 Jetbrain에서 고안한 언어이고, 그 종류는 JVM / JS / Native 세종류로 나눠집니다. Native는 네이티브 실행파일(Windows, Linux, OSX 실행파일, .so라이브러리 등)이며, JS는 JavaScript로, JVM은 Java언어로 컴파일됩니다. Kotlin JVM JVM은 Java Virtual Machine의 약자이며, Java언어를 사용할때 배울수 있는 가상머신의 일종입니다. (여기서는 간단한 과정만 설명하겠습니다.) Java라는 언어는 어떤 운영체제, CPU든 종류에 따지지 않고 사용할 수 있는 프로그래밍 언어입니다. 하지만 이런 Java를 있게한건 JVM이고, 이 JVM은 각 운영체제, CPU별로 배포가 되어있는 상태입니다. 그런 JVM위에서 돌아가는 것이 Java이고, 이를 통해 운영체제, CPU와 자유로운 프로그래밍이 가능해집니다. Kotlin JVM은 이 JVM에서 실행할 수 있는 바이트코드인 .class파일로 컴파일 하는 과정이있고 중간에 Java언어로 한번 변환이 됩니다. 전체적인 과정은 .kt(Kotlin) -> .java(Java) -> .class(바이트코드) 순으로 컴파일됩니다. (JVM종류에 따라서 .class가 아닌 다른 파일로 추가변환과정이 있을 수 있습니다.) 제가 이 내용을 넣은 이유가 Kotlin Android를 하게되면 Kotlin 기본제공 함수들이나 AndroidX함수들을 남발하게되는데 실제 .java로 컴파일되는 과정을 보게되면, Java언어로 무겁게 구현된 메소드를 사용한 Kotlin함수가 존재하며, 이를 과도하게 사용해 실제 앱의 성능을 떨어트리는 결과를 초래할 수 있습니다. 따라서 성능에 문제가 생기거나하는 이유가 발생할 수 있으니, 웬만해서는 Java언어도 참고하시는게 좋습니다. 제가 할 강좌는 Kotlin JVM이며, 이는 Kotlin Android에서도 사용가능한 함수 / 메소드를 다뤄볼 예정입니다. Hello World! 이번 강좌는 언제나 어떤 언어든간에 처음시작하게되는 Hello World출력 프로그램입니다.
2018-10-04#개발#Kotlin
[C++] 조건문 알아보기
조건문은 만약 \~이면 \~을 한다라는 의미를 지닌 문법이고, 이 조건문이란건 앞으로 코딩을 하면서 많이 쓰이게되는 문법중 하나입니다. C++에서의 조건문은 if, switch가 있으며, 이 문법들은 모두 C언어에서 사용되던 것들과 동일합니다. IF 예제 IF 결과 IF 설명 1\~4: 이전 "\[C++] Hello World!" 게시물에서 설명을 했습니다. 5\~6: int형 변수 A와 B를 선언했고 A는 0, B는 1을 초기값으로 넣어줬습니다. 8: if문의 기본 형태는 if(조건문) {실행할 내용}이고, 그 형태 그대로 작성되었습니다. 조건문이 참(true)일 경우 바로 다음에오는 { }의 내용을 실행하게됩니다. 10: if문과 함께 사용할 수 있는 else문 입니다. if의 조건문이 거짓(false)일 경우 else의 내용을 실행하게됩니다. 현재 A와 B는 같지 않으므로 else의 내용을 실행하게되어 A와 B는 다릅니다.가 출력된것입니다.
2018-08-28#개발#C++
[C++] Hello World!
C++은 기존 C언어의 문법에 객체지형의 특성까지 더해져 많은 기능을 지원하는 언어입니다. C언어를 배우셨던 분이라면 좀더 쉽게 배우시거나 때론 내용을 넘겨도 되는 부분도 있습니다. 또한 C언어의 작업환경과 동일하게 하셔도 되며, Visual Studio와 같은 IDE에서 작업하시면 됩니다. 본 강좌는 IDE를 보여주진않고 오직 코드로만 설명합니다. C++파일은 확장자가 cpp이며, 아래 내용은 모든 프로그래밍 언어의 기초인 Hello, World! 출력 프로그램입니다. 코드 출력 내용 설명 C++ 기본 API 라이브러리중 iostream을 가져오고, 그중 std(standard 줄임말)라는 네임스페이스를 사용하겠다고 호출했습니다. 네임스페이스는 추후 자세히 다루도록하겠습니다. 프로그램의 제일 처음 실행하는 함수를 정의합니다. 이때 함수의 이름은 main이여야만 하며, 이는 프로그램의 규칙입니다. return 키워드는 함수의 종료를 의미하며, 뒤에오는 변수는 해당 함수가 호출된 곳으로 되돌려줍니다. (main에서의 return은 프로그램 종료 상태를 의미하며, 0은 정상종료를 뜻합니다.)
2018-08-27#개발#C++
깃허브 블로그 작업중
티스토리 블로그를 사용하다보니 많은 문제점이 보여서 깃허브 페이지를 이용해 블로그를 만들고 있습니다. 당분간은 티스토리 블로그와 병행해 사용할 예정이며, 동시 포스팅을 할예정이고, 기존의 모든 게시물들을 깃허브로 옮기는 작업까지 할예정이고, 제 작업물들 또한 깃허브로 옮기겠습니다. 추후 블로그에는 C, C++, Java, Kotlin, Android 강좌나 제가 작업한 결과물들을 정리할 공간으로 만들어 보려합니다. 아쉽지만 티스토리 블로그는 옮기는 작업이 끝나면 폐쇠를 하거나 다른 방식으로 사용될예정입니다.
2018-08-26#공지