초보자 전용 마을

이제 IE 는 버릴 때도 되었건만... 아직도 버리지 않아서 어렵군요. 1. 폴리필 (Polyfill) 이란? - 간단하게 말하자면 최신 자바스크립트의 기능을 지원하지 않아서 오류가 나는 소스를 구형 자바스크립트 코드로 똑같이 구현하는 방식이다. 보통 IE 에서 지원되지 않는 게 많아서 Chrome -> IE 에 동일하게 기능 적용을 할 때 찾아보게 되는 것 같다. 2. Polyfill.io 간단하게는 아래 사이트에 들어가서, 원하는 기능을 클릭 => 생성된 스크립트를 복사하여 상단에 넣어주면 된다. 사이트 : https://polyfill.io/v3/url-builder/ index.html 실제 생성된 .js 경로에 직접 접근해보면, IE 에서는 소스가 생성되는 데에 반해 Chrome 에서는 지원이 ..

이전에 SheetJS 기반으로 엑셀 기본 기능 개발에 관한 글을 작성하였습니다. 그런데 개발 후, 엑셀에 스타일을 포함해달라는 추가 요구사항이 있었고, 저와 같은 분들이 계실 것 같아서 관련 글을 작성해봅니다. 이전 글의 소스 및 SheetJS 를 기반으로 작성하므로 이전 글을 보고 오시면 좋습니다. :) 이전 엑셀 기능 관련 글 https://ryusae.tistory.com/36 SheetJS 에서 엑셀 스타일 변경은 원래 Pro 버전에서만 제공되는 기능입니다. 다만, 다른 라이브러리를 추가하여 기능 보강을 할 수 있었습니다. 그 라이브러리들 중 하나가 xlsx-js-style 입니다. xlsx-js-style Read Me :https://github.com/gitbrent/xlsx-js-style..

Javascript 로 엑셀 처리할 때 사용했던 방식들을 공유합니다. 테스트 소스를 작성하고, 사소하지만 각 기능 별 추가된 소스를 차례대로 기술하겠습니다. 0. 엑셀 기능 제공 SheetJS 사용하기 SheetJS : Javascript로 엑셀 기능을 간단하게 구현할 수 있는 라이브러리 입니다. 유료 버전도 있으나, 무료 버전으로도 기본적인 기능은 충분히 가능합니다. Shee.js 에 대한 설명 및 예제 소스는 아래 두 블로그에 너무 잘 기술되어 있습니다. 해당 예제 소스를 기반으로, 엑셀 예제 소스와, 추가적으로 사용한 기능들만 간략하게 설명하도록 하겠습니다. - Export 참고 : https://velog.io/@gsuchoi/Javascript-SheetJS-Excel-%EB%8B%A4%EC%9..

개발 시에 부가적으로 사용하는 사이트 모음입니다. 생각나는 경우 더 추가하도록 하겠습니다. 1. JSON FORMATTER 검색 키워드 : Beautify json URL : https://jsonformatter.curiousconcept.com/ 줄글로 된 json 을 이쁘게 구조화 해서 보여주는 사이트 보통 인입된 resposne 등을 확인할 때 자주 사용함 사용 방법은 단순하다. ① 에 줄글 형태의 JSON 을 넣고, ②의 Process 를 클릭 ③ 에서는 시도 이력 및 변환하기에 적합한 형태인지를 나타내준다. (ex. { } 가 빠졌거나, 변수명이 없다거나 하는 경우에도 변환은 되나, #3 처럼 INVALID 로 표시 된다) ④ 변환 결과를 보여준다. 2. JSON 2 CSHARP 검색 키워드 ..

최근에 사용자의 IE 버전이 5 부터 접근이 되는 웹페이지를 유지보수 하게 되었다. 개인적으로 IE는 버렸으면 좋겠지만... 어쨌든 작업하면서 대응했던 오류 등을 업데이트 할 생각이다. 1) IE 문서모드 변경해주기 (메타 태그 삽입) : 내 IE 브라우저가 상위버전이 설치되어 있더라도, 어떤 페이지를 접근하면 기본값이 하위버전으로 변경되는 경우가 있다. 이런 경우, 각 버전마다 작동하는 스크립트, CSS 등이 달라서 사용자 경험이 달라지게 된다. 개발자가 header 부분에 메타 태그를 삽입해주므로써 방지할 수 있다. * 삽입 소스 : content="" 에는 문서모드를 입력해주면 되지만, 대부분 Edge로 사용하고 있는 것으로 보인다. 하지만, 해당 페이지가 태그로 엮인 하위페이지인 경우에는 동작하지..

1) 현상 : IE CSS 에서 overflow:auto; 속성을 주더라도, 스크롤 바가 보이지 않는 현상 해결 방법 (Chrome 에서는 해당 속성만 주어도 정상적으로 스크롤 바 노출 됨) 2) 해결 방법 : 아래 속성을 추가한다 -ms-overflow-style:scrollbar; /*IE Scroll*/ EX 소스 > #.css div.left { width: 50%; float: left; box-sizing: border-box; overflow:auto; -ms-overflow-style:scrollbar; /*IE Scroll*/ height:100%; } #HTML 3. 결과 : IE 에서도 div 스크롤바가 정상적으로 노출된다. 출처 : https://stackoverflow.com/qu..

만들었던 이유는 정확히 기억은 안나지만.... JSON으로 입력받는 data를 전송하면서 동시에 redirect 처리를 하고 싶었던 것 같다. 또한 GET 방식으로 사용하기에는 변수가 많았고, POST 형식과 유사하게 사용할 수 있으므로 보기에 더 편한 이점이 있어서 사용했던 것 같다(?) 누군가는 나와 같은 기능을 원할 수도 있다는 생각에 올리는 포스트 // jQuery 를 확장하여 ajax post 형태처럼 쓸 수 있는 Redirect Post 펑션 (내부는 폼 제출로 동작하도록) $.extend({ redirectPost: function (location, args) { var form = $(''); form.attr("method", "post"); form.attr("action", loca..

1. 버튼의 checked 여부 확인 $("input:checkbox[id='아이디명']").is(':checked') // true : false $("input:checkbox[name='NAME명']").is(':checked') // true : false $("input:radio[id='아이디명']").is(':checked') // true : false $("input:radio[name='NAME명']").is(':checked') // true : false​ 2. checked/unchecked 제어하기 $("input:checkbox[id='아이디명']").prop("checked", true); // 체크박스 checked $("input:checkbox[name='NAME명']"..

다른 프로그래밍 언어는 접근제한자가 있다. 그러나 자바스크립트에선 접근 제한자가 따로 없으므로, 클로저와 컨텍스트의 개념을 이용하여 변수와 메소드에 접근 제한자를 구현한다. 접근 제한자 (Access modifier) - 외부로부터 클래스 혹은 클래스 멤버들(메소드, 속성, 이벤트, 필드)로의 접근을 제한할 때 사용하는 예약어 - public, protected, private, default 등 클로저 (Closure) - 함수 + 함수를 둘러싼 환경(Lexical environment)- 같은 환경을 공유하지 않고, 자신의 고유 환경(블록)을 가진 상태로 외부 함수에 의해 호출되는 함수를 만드는 것 - 클로저 구현 방법 : 함수에서 함수를 반환 하도록 함 * 모듈 패턴 (Module Pattern) ..

React.js 란? 프레임워크가 아닌 라이브러리다. 유저 인터페이스를 만들기 위한 라이브러리 : A javascript Library for Building User Interface - 프레임워크(틀) : 필요한 기능이 대부분 구현되어 있다. : 배틀 안에서 기능을 채워넣기 때문에, 벗어나기가 어렵고 보통 1가지만 사용하게 된다. 개발자가 사용하지 않을 기능들도 전부 구현되어 있어서, 상황에 따라 무거울 수 있다. Application 개발시 코드의 품질, 필수적인 코드, 알고리즘, 암호화, 데이터베이스 연동 같은 기능들을 제공한다. 즉, 필요한 기능들이 구성 되어있는 뼈대(구조)를 제공하며, 개발 구조나 설계 시 제공되는 인터페이스의 집합이다. 완성된 어플리케이션은 아니지만, 프로그래머가 어느정도 ..