분류 전체보기
-
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에서 다운로드 ..
-
웹 개발에서 svg 형식의 이미지 파일을 활용해보자Dev 2020. 10. 4. 23:28
안녕하세요. 오늘은 웹 개발 중 자주 사용하는 이미지 파일 포맷 중 하나인 svg에 대해 포스팅합니다. 일반적으로 웹 개발에서 사용하는 jpg,png 혹은 인코딩된 jpeg 이미지 파일 등에 비해, svg는 다소 생소할 수 있습니다. 하지만 svg 파일의 장점은, 웹 개발시에 CSS, Javascript, HTML 등과 함께 동작할 수 있다는 점입니다. 이게 무슨 뜻인지 알아보기 전에 svg 파일은 다른 파일과 어떤 차이가 있는지 부터 알아봅시다. svg 파일은 우리가 잘 아는 픽셀로 구성되는 비트맵 방식의 png 파일과는 다릅니다. svg는 XML 기반의 파일 형식으로 이루어진 벡터 이미지로, 수학을 기반으로 하는 점, 선, 곡선 등으로 이미지를 표현하는 형태입니다. 즉 비트맵 방식의 파일은 일정 수의..
-
[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으로..
-
크롬 개발자도구를 잘 활용해보자! 1) Network 활용하기Dev 2020. 9. 15. 20:43
안녕하세요. 이번 포스팅에서는 제가 크롬의 개발자 도구를 사용하면서 가장 많이 사용한 기능 중 하나에 대해 소개합니다. 프론트엔드 개발자라면 개발자 도구는 사용하지 않을래야 사용하지 않을 수가 없을 거에요. 특히 이 기능은 Rest API를 연동하는 작업을 할 때 효율적으로 사용할 수 있습니다. 우선 개발자 도구의 Network 탭을 열어 봅시다. 맥 기준 cmd + shift + c를 누른 뒤 상위 탭에서 Network를 선택합니다. 그리고 구글에 아무거나 검색해 볼까요? 이 Network 탭에서는 XHR(XMLHttpRequest)를 포함해 JS, CSS, IMG등의 정적 파일까지 로드가 잘 되고 있는지에 대한 정보가 나옵니다. 여기서 XHR은 AJAX 요청을 생성하는 JavaScript API입니다..
-
내 홈페이지에 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의 기능을 그대로 전부 ..
-
[개취존중] 데굴데굴 굴러가는 Progress bar를 만들어보자 🤩Coding/etc 2020. 8. 19. 17:22
안녕하세요 ! 이번 포스팅에서는 현재 제 블로그에서 사용하고 있는 이미지가 굴러가는 듯한 애니메이션의 Progress bar를 만든 방법을 공유합니다. 외부 라이브러리 조금과, 간단한 제이쿼리 기능만 사용하면 아주 쉽게 추가할 수 있습니다! 잠깐!😳 이번 포스팅은 다음을 전제로 합니다. 1. 데굴데굴 굴러갈 커여운 이미지가 준비되어 있다. - 스크롤에 따라 0~360도까지 회전하기 때문에 원형에 가까울 수록 좋습니다. 2. 페이지 소스에 제이쿼리가 적용되어 있다. - 저의 블로그에는 jQuery v3.3.1이 cdn으로 적용되어 있습니다. 3. June의 prognroll.js를 적용하는 포스팅(https://enfanthoon.tistory.com/156)을 보고왔다. 1. prognroll 붙이기 위..
