Coding
-
아직 타입스크립트 사용을 고민 중이라면 (타입스크립트를 1달 간 사용해본 후기)Coding/TypeScript 2020. 10. 27. 00:51
안녕하세요, 오늘은 자바스크립트에서 타입스크립트로 넘어가면서 제가 개인적으로 느낀 점에 대하여 포스팅해보려 합니다. 아무래도 사용 기간이 짧고, 리액트에 대한 지식도 완전하지 않기 때문에 타입스크립트에 대한 분석보다는 여과없는 의견이 들어간 글이 될 것 같습니다. 🥺 편한 듯 불편한 너.. 저는 리액트를 사용하면서 자바스크립트만 사용하다가 최근에야 타입스크립트를 접하게 되었습니다. 최근에 회사에서 도입한 프로젝트를 타입스크립트 + 리액트로 구성하게 되었기 때문이죠. 확실히 타입스크립트를 시작하면서 공부하였을 때 알아본 것처럼, 타입스크립트는 장점이 확실하면서도 그 장점을 감당하기 위한 어쩔 수 없는 불편함이 존재하는 언어인 것 같습니다. 자바스크립트와 타입스크립트의 가장 큰 차이점은 뭘까요? 자바스크립트..
-
자바스크립트에서 세미콜론(;)을 꼭 사용해야 하는 이유가 있다?Coding/JavaScript 2020. 10. 16. 21:08
안녕하세요. 오늘은 자바스크립트에서의 세미콜론 사용 여부에 대한 재밌는 글을 발견하여 포스팅합니다. Shruti Kapoor의 why-are-expliit-semicolons-important-in-javascript라는 글을 읽어보면, 자바스크립트에서 세미콜론을 명시하는 것에 대한 중요성에 대해 다루고 있습니다. www.freecodecamp.org/news/codebyte-why-are-explicit-semicolons-important-in-javascript-49550bea0b82/ Why explicit semicolons are important in JavaScript > I am in "Effective JavaScript" training at @PayPalEng [https://twi..
-
[React][Typescript] 이벤트 타입을 외우지 않아도 되는 이유Coding/React.js 2020. 10. 14. 23:38
안녕하세요😄 오늘은 타입스크립트에서 이벤트 핸들링을 할 때 종종 발생하는 문제에 대해 포스팅하겠습니다. 타입스크립트는 어떠한 것이든 타입을 명시해 주어야 합니다. 타입을 모른다면 any라도 해줘야겠죠? 하지만 타입을 모른다고 무작정 any로 채워넣는 건 좋지 않습니다. 그럴 바에 그냥 자바스크립트로 리액트를 사용하는게 훨씬 편하겠죠. Vscode와 같은 IDE가 있다면 다른 인텔리전시 플러그인 없이도 타입을 알아낼 수가 있습니다. 다음 코드를 한 번 보겠습니다. const TelArea: React.FC = () => { const [value, setValue] = useState(''); const onChange = (e) => { const { value } = e.target; } return ..
-
TypeScript로 React를 사용하면 왜 import 구문이 다를까요?Coding/React.js 2020. 10. 12. 22:45
최근에 리액트를 TypeScript에서 많이 사용하게 되면서, 이 쪽으로 유저들의 개발이 많이 이루어지고 있습니다. 실제로 TypeScript 커뮤니티 중 하나인 definitelytyped.org 를 방문해 보면, 유명한 라이브러리들은 이미 유저들이 .d.ts 파일을 만들어 놓은 경우가 많습니다. (실제로 타입스크립트를 사용해 프로젝트를 꾸리실 때 이 사이트를 애용하는 것을 추천합니다. npm 모듈 중 아주 유명한 모듈을 제외하면 @types 형태를 제공하지 않고 있고, 타입스크립트를 위해 만들어야하는 .d.ts 파일들을 이 사이트에서 많이 받을 수 있거든요!) 하지만 아주 유명하고 대중적인 라이브러리 중 하나인 react, react-dom은 이미 @types/의 형태로 npm/yarn에서 다운로드 ..
-
[React][TypeScript] 리액트에서 Swiper 모듈을 사용해보자Coding/React.js 2020. 9. 27. 01:52
안녕하세요. 굉장히 오랜만인 리액트 포스팅입니다. 그동안 이것저것 다양한 기술들을 사용해보느라, 본업(??)에 충실하지 못했네요.ㅎㅎ 오늘은 인기 많은 Carousel/Slider 모듈 중 하나인 Swiper에 대하여 소개합니다. 잠깐!😳 이번 포스팅은 다음을 전제로 합니다. 1. npm이 설치되어 있다. 2. 타입스크립트를 사용하는 리액트 프로젝트에서 사용한다. 3. 여러분들의 귀찮음을 덜기위해 scss를 사용한다. 홈페이지에서는 가장 모던한 모바일 터치 슬라이더라고 되어 있으나, 넓은 해상도에서도 충분히 사용할 수 있습니다. Swiper는 cdn 형태로 소스 코드를 제공하며, 리액트/타입스크립트 환경에서는 이를 html 파일로 추가하여 전역 객체에 추가하는 방법으로도 사용은 가능하지만, 그 방법은 리..
-
[TypeScript] 외부 객체 undefined 에러를 해결해보자!(Feat. 자바스크립트와의 차이)Coding/TypeScript 2020. 9. 18. 15:52
안녕하세요. 오늘은 자바스크립트 -> 타입스크립트에서 흔히 발생하는 문제인 객체 undefined 문제를 해결하는 방법에 대해 포스팅합니다. 제목을 두서없이 적긴 했으나, 정확하게는 외부 스크립트를 cdn 등의 방법으로 가져왔을 때, 해당 객체가 참조가 되지 않는 문제를 해결하는 방법이라고 보시면 되겠습니다. 오늘은 저번에 포스팅한 다음 우편번호 조회 API를 예로 들면서 자바스크립트와 타입스크립트의 차이를 알아봅시다. 자바스크립트 vs 타입스크립트 자바스크립트 자바스크립트에서는 참 간편합니다. 타입스크립트와 달리 인터프리터 언어이기 때문에, 미리 타입을 체크하지 않습니다. 그렇기 때문에 외부에서 다른 API를 꺼내쓰면서 객체를 가져와도, 이게 무슨 타입인지 전혀 신경쓰지 않는다는 것이죠! 즉 cdn으로..
-
내 홈페이지에 Daum 우편번호 서비스 API 붙이기! (반응형)Coding/JavaScript 2020. 9. 8. 20:54
안녕하세요 오늘은 Daum에서 제공하는 우편번호 서비스(도로명, 지번주소 찾기) API 연동에 대해 포스팅합니다. 홈페이지에서 회원가입이나 배송지 선택 등, 주소를 검색해야 하는 상황이 나오면 다음과 같은 화면을 많이 보셨을 겁니다. Daum 우편번호 서비스는 사용하기도 간편하고, 구현도 쉬워 많은 사이트에서 애용되고 있습니다. 가이드를 살펴보면 구현 방법도 여러가지 입니다. postcode.map.daum.net/guide Daum 우편번호 서비스 우편번호 검색과 도로명 주소 입력 기능을 너무 간단하게 적용할 수 있는 방법. Daum 우편번호 서비스를 이용해보세요. 어느 사이트에서나 무료로 제약없이 사용 가능하답니다. postcode.map.daum.net 1. 팝업으로 띄우기 2. iframe을 이용..
-
[TypeScript] 타입스크립트란 무엇일까요?Coding/TypeScript 2020. 8. 25. 22:48
타입스크립트란 무엇일까요? 타입스크립트는 마이크로소프트가 개발하고 유지하는 오픈소스 프로그래밍 언어로 2012년 말 발표되었습니다. 발표가 된지는 꽤나 되었으나, 구글의 Angular 버전 2에서 타입스크립트를 채택한 이후로 널리 알려지게 되었습니다. 요즘은 Angular의 경쟁 프레임워크라고 볼 수 있는 React, Vue에서도 타입스크립트를 많이 사용하고 있습니다. 타입스크립트는 Javascript의 ES5 이후로 매년 새로운 버전을 발표하는 ESNext에 Type 기능을 추가한 언어입니다. 그렇기 때문에 자바스크립트 ES7이하의 기능을 모두 포함하여 사용할 수 있습니다. 특히, ES6의 새로운 기능들을 사용하기 위해 Babel과 같은 별도 트랜스파일러를 사용하지 않아도 ES6의 기능을 그대로 전부 ..