본문 바로가기
블로그 이미지

방문해 주셔서 감사합니다! 항상 행복하세요!

  
   - 문의사항은 메일 또는 댓글로 언제든 연락주세요.
   - "해줘","답 내놔" 같은 질문은 답변드리지 않습니다.
   - 메일주소 : lts06069@naver.com


Javascript/[중요] Javascript26

프론트와 백그라운드 개발 환경 분리, 파셀(Parcel) 파셀(Parcel)은 나온지 얼마되지 않는 젊은(?)축에 속하는 기술 입니다. 웹 어플리케이션 번들러라고 불리는 파셀의 정의는 아래와 같습니다. Parcel은 워커 프로세스를 이용하여 멀티코어 컴파일을 가능케 하고, 심지어 재시작 후라 해도 빠른 리빌드를 할 수 있도록 파일시스템 캐시를 갖고 있습니다. 말이 쉽지가 않는데, 요약을 하면 장황하게 쓰여진 자바스크립트(Javascript)와 각종 css, 기타 파일들을 한번에 압축 및 정리하여 배포 가능한 형태로 만들어주는 역할을 하는 번들러 입니다. - 번들러(bundler) : 지정한 단위로 파일들을 하나로 만들어 요청에 대한 응답으로 전달할 수 있는 환경을 만들어주는 역할 파셀(Parcel)을 통해 개발 영역을 분리함으로써 앵귤러(Angular) 또는 .. 2021. 1. 5.
Jquery auto table rowSpan(Jquery 자동 테이블 병합, 자동 table rowspan) Jquery를 활용하여 자동으로 같은 데이터를 병합해야되는 일이 생겼습니다. 테이블을 병합해야 되는 경우는 대략 아래와 같았습니다. 데이터가 고정적이면 사실 어렵지 않습니다. 그냥 td테그에 rowSpan값을 주면 해결되는 일이기 때문 입니다. 그런데, 데이터가 동적으로 변경되는 경우였기 때문에 그렇게 할 수가 없었습니다..ㅠ 작업을 하기에 앞서서 조건을 먼저 판단하여 보았습니다. * 최초 조건 1. 테이블을 최조 검사하는 행위인지 2. tr 내부의 td의 텍스트가 같은지 3. tr 내부의 td의 텍스트가 다른지 테이블을 병합하려면 td테그에서 rowspan 속성에 값을 부여하여야 합니다. 그리고 1번 ~ 3번까지의 경우에 대해서 반복문을 위해서 Jquery의 find와 each함수를 사용 하였습니다. .. 2020. 11. 18.
Javascript 파일을 binary문자열로 전송한 뒤 변환하여 서버에 저장하기 브라우저에서 파일을 binary데이터로 변환하여 문자로 변환한 뒤에 json형식으로 전송한 뒤에 서버에서 파일로 다시 변환하는 특이한(?) 경우가 있었습니다. 브라우저에서 일반적인 json형식의 크기와 사이즈는 검색하면 바로 확인하여 볼 수 있습니다. json형식으로 파일을 보내려다 보니 용량제한에 좀 민감하여 신경을 썼던 것 같습니다. Jquery를 활용하여 먼저 파일을 전송하는 기능을 만들어 주었습니다. 먼저 아래는 단순한 html 파일 형식입니다. 다음으로 실제 전송하는 sendTest함수 입니다. input type file 같은 경우에는 보안상 다양한 정보가 존재하지 않습니다. 그리하여 Javascript에서 제공하는 FileReader를 활용하였습니다. function sendTest(){ v.. 2020. 9. 18.
Javascript firebase fire-store 연동, 자바스크립트 파이어베이스 fire-store 연동 자바스크립트에서 파이어베이스를 연동하는 방법입니다. 파이어베이스에는 일반적으로 2가지 형태의 데이터베이스가 존재합니다. 1. fire-store 2. real-time 리얼타임 데이터베이스(realtime database)가 가장 먼저 서비스가 시작되었으며 이어서 파이어스토어(cloud firestore) 형테의 데이터베이스가 나중에 등장 하였습니다. 여기서 소개할 내용은 파이어스토어(firestore)를 활용한 데이터베이스 관리 방법 입니다. 개발환경으로는 node.js 기반으로 구성되어있습니다. 프론트에서 사용하실 예정이시면 웹팩이나 파셀등을 활용하여서 사용하시면 될 것 같습니다. ^^ * 데이터 형태에 대한 기본 설명 입니다! 파이어베이스 파이어스토어(firestore)는 컬렉션 - 도큐먼트 단위로.. 2020. 5. 18.
파셀(parcel)을 활용하여 함수, 변수를 export 하기 (parcel export function) 파셀을 통해서 빌드된 함수나 변수를 사용하는 방법을 소개합니다! 파셀을 사용하다보면 함수나 변수를 export해서 다른 웹에서 라이브러리처럼 사용해야되는 경우가 종종 존재 합니다. 그럴때는 빌드할 때 옵션과 export를 통해서 쉽게 해결 할 수 있습니다. 백문이 불여일견! 먼저 만들고 있는 js파일에서 필요한 내용을 외부에서 사용한다고 가정하여 보겠습니다. 아래와 같은 js파일을 만들었습니다. module.export를 통해서 해당 Json데이터, 함수를 외부로 export해준다고 해 주어야 합니다. var _innData = 'abcd'; //해당 값은 외부에서 사용 할 수 없다. module.exports.DATA = { //외부에서 사용가능하도록 module.exports를 통해서 외부로 전달한다.. 2020. 2. 28.
Javascript를 활용하여 데이터(배열)를 테이블로, 테이블 태그를 엑셀로(Javascript make excel file) sheetjs를 활용하면 간단하게 배열같은 데이터를 테이블 테그로 만들수 있다. https://sheetjs.com/ 해당 라이브러리를 사용하면 XLSX라는 객체를 통해서 다양한 기능을 사용 할 수 있다. read로 시작하는 함수는 데이터를 읽을 때 사용되며, write로 시작하는 함수는 데이터를 쓸 때 사용된다. 정말 직관적인 sheet_to_html 함수는 HTML에 데이터와 옵션을 함께 추가하여 웹에서 표를 그릴 때 사용된다. 아무튼!! 요 사이트에서 해당 라이브러리를 받은뒤에 배열값을 sheet_to_html 함수 사용을 통해서 멋지게 데이터를 그려준다. 위 소스코드를 실행하여보자. 코드 내용도 별로 어렵지가 않다. 여기에 XLSX 객체가 가지고 있는 writeFile 이라는 함수를 사용하면 데이.. 2020. 2. 27.