본문 바로가기

프론트앤드

[Javascript] IE 브라우저 호환성 한번에 적용하기
프론트앤드/Java-Script 2021. 5. 21. [Javascript] IE 브라우저 호환성 한번에 적용하기 1. 'Promise'이(가) 정의 되지 않았습니다. 2. IE에서 Object.values() 사용하기 등등... IE에서 사용하지 못하는 메소드가 굉장히 많죠 IE는 마이크로소프트에서 버린 아이템이지만, 아직까지 IE를 사용하고 있는 곳이 있다보니 호환성을 무시할 수가 없긴하죠. (제발 좀 버려.. 해킹당해서 그때가서 부랴부랴 고치지말고) 우선 polyfill 에서 제공하는 버전은 v2로 구버전입니다. 두번째는 최신버전인 v3 이에요. 그럼 사이트에 들어가는데, 그 전에 사진으로 하나씩 설명을 드려볼게요. [1] Polyfill 라이브러리 버전을 어떤걸로 선택할 것인지 선택할 수 있습니다. [2] CDN으로 불러올 라이브러리를 일반버전으로 불러올 것인지? 압축버전으로 불러올 것인지? 선택하면 되구요...
프론트앤드/Java-Script 2021. 5. 20. [Javascript] Babel을 이용한 IE 에서 ES6 문법 사용하기 크로스플랫폼을 지원으로 인한 각 브라우저별 호환성때문에, 프론트앤드 개발자는 항상 웁니다... 이번에 저는 "크롬"과 "엣지"를 기반으로 개발했는데 사용자가 "인터넷 익스플로러 11"이 필요하다고 하여 호환성때문에 Babel을 적용해서 조금이나마 쉽게 호환성을 유지하려고 Babel을 도입했어요. 그런데 이게 왠걸? 생각보다 너무너무 쉬운데요??? IE에서 ES6를 사용하기 위해서는 Babel 이라는 라이브러리를 사용할건데요. 우선 저는 간단하게 CDN 으로 사용해서 라이브러리를 적용해볼건데요 먼저 html의 head 영역에 아래 babel 스크립트를 import 시켜줍니다. 그리고 내부에서 스크립트 코드를 작성할 때에는 다음과 같이 작성하면 되요. 외부 스크립트를 불러올 때는 아래처럼 사용하면 된답니다!
[Vue.js] VueJS 코딩 공작소 (길벗) 책 리뷰 #중간후기
프론트앤드/VueJS 2020. 9. 14. [Vue.js] VueJS 코딩 공작소 (길벗) 책 리뷰 #중간후기 안녕하세요. Vue.js 코딩 공작소 (길벗) 책을 바탕으로 VueJS를 저 스스로도 공부하면서 강의를 올리고 있는데요. 개인적으로 저는 그렇게 추천하지 않습니다. 인터넷에서 이 책을 많이 추천하고, 권유하는 걸 보고 저도 따라서 구입해봤는데 전 이런 흐름의 책은 별로 권하고 싶지 않아요. 기초 개념부터 A를 알려주고, B를 알려주고, C를 알려주고... 그래서 응용하면 AB 또는 BC, ABC 이런식으로 조합이 가능할 수 있고, 독자의 응용력에 따라 많은 방법이 있다는 걸 알려주는 책이 좋은 책이라고 생각합니다. 그런데 이 책은 A를 알려주고, B를 알려주다가 갑자기 E를 알려줍니다. 그리고 설명에는 이렇게 적혀있습니다. 자세한 C와 D에 대한 내용은 Github 샘플 코드에서 제공됩니다. 정말 제가 ..
[Vue.js] VueJS 강의 #4 - HTML 이벤트 바인딩
프론트앤드/VueJS 2020. 9. 14. [Vue.js] VueJS 강의 #4 - HTML 이벤트 바인딩 참조된 서적 : Vue.js 코딩 공작소 (길벗) - 사진은 생략, 앞에 보셨으니 다들 아실겁니다. 1. HTML에 이벤트 바인딩 (이벤트 발생) 이번 강의는 이벤트를 발생시키는 것인데, 일반적인 javascript 에서는 주로 onClick="function()" 을 사용하게 됩니다. VueJS에서는 Vue 문법을 따라해야하는데, 2가지 방법이 있습니다. 편한 방법으로 정해서 통일시켜서 사용하면 됩니다. v-on:click="function" 또는 @click="function" 으로 사용할 수 있습니다. 다시 말하면, v-on 을 @로 작성할 수 있다고 보면 됩니다. - EventBinding.html dev-box tistory 장바구니 담기 v-on 에 가능한 이벤트들은 위 예제에서 사용하고 있는..
[Vue.js] VueJS 강의 #3 - HTML 바인딩과 필터
프론트앤드/VueJS 2020. 9. 7. [Vue.js] VueJS 강의 #3 - HTML 바인딩과 필터 참조된 서적 : Vue.js 코딩 공작소 (길벗) 개발자 보물상자에서 VueJS 책 한권 다 읽었다라고 할 수 있게끔 쉽게 설명해드리겠습니다. 블로그 포스팅 순서는 책 챕터와 다르게 진행될 수 있습니다. (가끔 필요없을 것 같은 챕터는 건너띌 수도 있다는 뜻) 1. HTML에 바인딩하기 프론트앤드 프레임워크를 개발하는데 브라우저에서 볼 수 없다면 재미가 없을겁니다. 그럼 이제부터 본격적으로 HTML 과 Javascript 을 직접 연동하면서 어떤 구조를 가지고 있는지 상세히 살펴보도록 하겠습니다. - HtmlMarkUp.js var websotre = new Vue({ el: '#dev-box', data: { sitename: "dev-box Tistory, 개발자 보물상자", product: { id..
[Vue.js] VueJS 강의 #2 - 생명주기 훅
프론트앤드/VueJS 2020. 8. 27. [Vue.js] VueJS 강의 #2 - 생명주기 훅 참조된 서적 : Vue.js 코딩 공작소 (길벗) 개발자 보물상자에서 VueJS 책 한권 다 읽었다라고 할 수 있게끔 쉽게 설명해드리겠습니다. 블로그 포스팅 순서는 책 챕터와 다르게 진행될 수 있습니다. (가끔 필요없을 것 같은 챕터는 건너띌 수도 있다는 뜻) 1. 왜 VueJS를 사용할까? 뭐.. 책에는 VueJS 장점만 모아 써놨으니까, 단점은 안적어놨을겁니다. 자 그럼 과감히 이 목차는 생략하겠습니다. 2. Vue의 생명주기 생명주기 매우 정말 엄청 절대적으로 중요합니다. 반드시 실무에서라면 꼭 필요하게되는 부분입니다. 인스턴스 생성 뷰-모델에서 데이터 관찰자를 생성하고 내부 이벤트 시스템에서 사용될 이벤트를 생성하여 초기화합니다. 템플릿과 가상DOM 생성 템플릿 혹은 렌더링 함수를 찾아서 컴파일합..
[Vue.js] VueJS 강의 #1 - 모델 패턴과 반응형 웹
프론트앤드/VueJS 2020. 8. 24. [Vue.js] VueJS 강의 #1 - 모델 패턴과 반응형 웹 참조된 서적 : Vue.js 코딩 공작소 (길벗) 개발자 보물상자에서 VueJS 책 한권 다 읽었다라고 할 수 있게끔 쉽게 설명해드리겠습니다. 블로그 포스팅 순서는 책 챕터와 다르게 진행될 수 있습니다. (가끔 필요없을 것 같은 챕터는 건너띌 수도 있다는 뜻) 1. 모델 - 뷰 - 뷰모델 패턴 ( Model - View - ViewModel ) 이 내용을 대략적으로 그림으로 한번 표현해보면 아래 그림으로 볼 수 있습니다. 그러면 각각의 파트마다 본인의 역할이 나누어져있을텐데 그 역할에 대해 자세히 알아보도록 합시다. - 뷰 (View) 뷰는 여전히 사용자가 볼 수 있는 화면을 보여주는 역할을 담당하지만, 클라이언트의 비지니스 로직은 담당하지 않습니다. 대신 현재 상태의 데이터를 실시간 렌더링합니다. - ..
[Angular] 앵귤러로 프론트앤드 개발 #2 - HelloWorld
프론트앤드/Angular 2019. 12. 25. [Angular] 앵귤러로 프론트앤드 개발 #2 - HelloWorld 안녕하세요 : ) 이번 포스팅에서는 Angular의 현재 기본 Release Version으로 Hello World 를 띄워보겠습니다. 자 그럼 "안녕 세계" 를 확인하러 가보도록 하겠습니다 ! 그럼 개발할 준비하시구요. 이 포스팅에서는 VisualStudioCode를 기준으로 설명함을 미리 말씀드립니다. 프로젝트를 생성할 폴더를 오픈하도록 하겠습니다. angular-cli를 사용해서 프로젝트 자동생성하기 때문에 프로젝트 생성할 폴더 선정이 중요한데요 (사실 중요한건 아닌데, 폴더 위치 맘에안들면 위치 바꿔야되서 귀찮으니...) 1. Angular-cli 설치 터미널을 실행하고 아래 명령어를 입력합니다. npm install -g @angular/cli 명령어를 입력하면 이렇게 설치되는 과정이 보여지는데..
[Angular] 앵귤러로 프론트앤드 개발 #1 - 소개 및 툴 설치
프론트앤드/Angular 2019. 12. 1. [Angular] 앵귤러로 프론트앤드 개발 #1 - 소개 및 툴 설치 안녕하세요 : ) 이 앵귤러는 프론트앤드 개발언어로 저의 메인개발 언어에 속하기도 합니다. 저는 2016년도에 처음 AngularJS를 접하면서 현재 버전 Angular 8까지 사용해봤고 앞으로도 쭈욱~ 사용할 겁니다. AngularJS, Angular2, Angular4, ..., Angular8 까지 2020년 초에 Angular9 Release가 나온다고 합니다. (솔직히 Release가 너무 빨라서 따라가기 너무 바쁩니다. 하지만 이 재미에 앵귤러를 하고있습니다 !) 멋있네요 앵귤러(Angular) 언어란 무엇인가? 앵귤러는 기본적으로 Typescript를 기반으로 개발하는 웹 오픈소스 프레임워크입니다. Angular 2 Release 부터 angular-cli 를 지원하면서 초기 소스를 자동으로..
[JQuery/Javascript/ERROR] HTTP CORS 크로스도메인 요청 에러
프론트앤드/JQuery 2019. 9. 29. [JQuery/Javascript/ERROR] HTTP CORS 크로스도메인 요청 에러 XMLHttpRequest cannot load http//localhost.com. No ‘Access-Control-Allow-Origin’ header is present on the requested resource. Origin ‘http//localhost.com is therefore not allowed access. 항상 로컬에서 테스트용으로 파일첨부를 개발할 때 주로 발생하게되요. 전 알면서 항상 보는 에러이긴 한데, 이 에러보면 그때서야 "아! 맞다... 호스트 다르지..." 하고 전 보안설정을 풀어버리는 방법을 주로 사용합니다. 어차피 개발 테스트용이니 ! - CORS 의 발생 원인 동일 출처 정책 ( Same-Origin Policy ) 웹에서는 동일 출처 정책을 적용하고 있는데,..
[JQuery] 드래그앤드랍 구현
프론트앤드/JQuery 2018. 9. 22. [JQuery] 드래그앤드랍 구현 JQuery의 첫 개발 포스트는 드래그앤드랍을 활용해서 리스트 순서를 바꾸는 기능을 구현해볼거에요 :-) 물론 순서를 바꾸고, 바꾼 순서를 콘솔을 통해 보여주는 기능까지 구현해볼거니까, 걱정하지마세요 ! 먼저 위에 그림은 완성된 모습이에요. 일단 Item 순서가 약간 바뀌어있는데, 이건 제가 화면에서 드래그앤드랍을 통해 바꿔봤어요 ! 그러면 잡소리 안하고 바로 소스 리뷰와 함께 바로 아래에 샘플소스 압축파일을 받아보시면 되요 ! Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 확인 소스는 무진장 간단해요 ! ul, li 태그로 리스트를 만들어주고, 움직이게 해주기위한 JQuery 라이브러리를 사용해서 간단하게 구현해보았어요 JQuery는 다운로드는 여기 클릭하셔서 ..
[JQuery] 제이쿼리 다운로드 받기
프론트앤드/JQuery 2018. 9. 22. [JQuery] 제이쿼리 다운로드 받기 JQuery 를 사용하기 위해 우선 공식홈페이지에서 JQuery-UI와 JQuery-Develop 영역을 다운받도록 할게요 ! (파란색 글씨를 누르면 바로 다운로드 페이지로 이동하실 수 있어요) 개발자 보물상자에서 사용하는 버전은 아래와 같아요 JQuery-UI : version 1.12.1 JQuery-Develop : version 3.3.1 제 블로그의 첫 번째 글은 JQuery로 시작했네요. 열심히 개발자들의 보물 성지가 될 수 있도록 최선을 다해 노력할게요 :-)

티스토리툴바