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

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

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


Javascript72

Javascript 파일을 binary문자열로 전송한 뒤 변환하여 서버에 저장하기 브라우저에서 파일을 binary데이터로 변환하여 문자로 변환한 뒤에 json형식으로 전송한 뒤에 서버에서 파일로 다시 변환하는 특이한(?) 경우가 있었습니다. 브라우저에서 일반적인 json형식의 크기와 사이즈는 검색하면 바로 확인하여 볼 수 있습니다. json형식으로 파일을 보내려다 보니 용량제한에 좀 민감하여 신경을 썼던 것 같습니다. Jquery를 활용하여 먼저 파일을 전송하는 기능을 만들어 주었습니다. 먼저 아래는 단순한 html 파일 형식입니다. 다음으로 실제 전송하는 sendTest함수 입니다. input type file 같은 경우에는 보안상 다양한 정보가 존재하지 않습니다. 그리하여 Javascript에서 제공하는 FileReader를 활용하였습니다. function sendTest(){ v.. 2020. 9. 18.
Javascript 댓글 기능 제작(자바스크립트 댓글, Javascript comment) 게시판에서 자주 사용되는 기능 중 하나가 바로 "댓글" 입니다. 댓글을 게시글을 참조하여 데이터가 쌓이는 형식 입니다. 아래와 같이 데이터가 존재한다고 가정하겠습니다. { idx : "_NN5i7ztvy8bl1L4wTQoKx9THDhagNV9AIeSQOmlm", title : "제목" contents : "안녕하세요. 저는 게시글 입니다.", reg_id : "user", reg_date : "2020-09-09 08:00:10", } idx는 고유의 키 값을 의미합니다. 나머지 항목은 일반 정보들을 의미 합니다. 만약 이러한 데이터가 존재하는 데 댓글이 입력되려면 idx값을 key값으로 한 데이터가 생성이 되어야 합니다. { comment_idx : "_NN5i7ztvy8bl1L4wTQoKx9THDha.. 2020. 9. 9.
Javascript 일반함수와 화살표함수의 차이 (Difference between regular function and arrow function) 자바스크립트에서는 일반적으로 사용되는 함수 이외에 화살표함수를 제공합니다. 마치 자바의 람다식처럼 간결한 표현으로 코드를 조금 더 간단하게 사용할 수 있게 하여줍니다. function abcd1 (){ console.log(1234); } var abcd2 = ()=>{ console.log(1234); } abcd1(); //1234가 출력됩니다. abcd2(); //마찬가지로 1234가 출력됩니다. 일반함수와 화살표함수와의 가장 큰 차이는 일반함수는 자신만의 데이터를 가질 수 있는 반면, 화살표 함수는 그렇지 못하다는 점 입니다. function abcd1 (){ this.number = 1234; } var abcd2 = ()=>{ this.number = 1234; } 위 코드에서 this.num.. 2020. 5. 19.
Javascript firebase fire-store 연동, 자바스크립트 파이어베이스 fire-store 연동 자바스크립트에서 파이어베이스를 연동하는 방법입니다. 파이어베이스에는 일반적으로 2가지 형태의 데이터베이스가 존재합니다. 1. fire-store 2. real-time 리얼타임 데이터베이스(realtime database)가 가장 먼저 서비스가 시작되었으며 이어서 파이어스토어(cloud firestore) 형테의 데이터베이스가 나중에 등장 하였습니다. 여기서 소개할 내용은 파이어스토어(firestore)를 활용한 데이터베이스 관리 방법 입니다. 개발환경으로는 node.js 기반으로 구성되어있습니다. 프론트에서 사용하실 예정이시면 웹팩이나 파셀등을 활용하여서 사용하시면 될 것 같습니다. ^^ * 데이터 형태에 대한 기본 설명 입니다! 파이어베이스 파이어스토어(firestore)는 컬렉션 - 도큐먼트 단위로.. 2020. 5. 18.
Jquery when 사용(Jquery Promise, 순서있는 ajax) Jquery에서 ajax를 활용하여 데이터를 받아오는 기능은 어렵지 않다. 아래의 ajax구조는 흔히 사용되는 기본구조이다. $.ajax({ url: 'test.json', type: 'get', success: (result) => { console.log(result); }, fail: (error) => { console.log(error); } }); 만약 이러한 ajax를 한번이 아니라 여러번 통해서 서버에서의 정보를 가져오는데, 순서를 보장받게 하려면 콜백 형식으로 코드를 만들던가 아니면 Promise를 사용한다. 콜백형식으로 만들면 코드가 너무 복잡하여...Promise를 사용하는 경우가 대부분이다. 아래의 코드는 프로미스를 활용한 코드이다. new Promise( (succ, fail)=>.. 2020. 4. 1.
파셀(parcel)을 활용하여 함수, 변수를 export 하기 (parcel export function) 파셀을 통해서 빌드된 함수나 변수를 사용하는 방법을 소개합니다! 파셀을 사용하다보면 함수나 변수를 export해서 다른 웹에서 라이브러리처럼 사용해야되는 경우가 종종 존재 합니다. 그럴때는 빌드할 때 옵션과 export를 통해서 쉽게 해결 할 수 있습니다. 백문이 불여일견! 먼저 만들고 있는 js파일에서 필요한 내용을 외부에서 사용한다고 가정하여 보겠습니다. 아래와 같은 js파일을 만들었습니다. module.export를 통해서 해당 Json데이터, 함수를 외부로 export해준다고 해 주어야 합니다. var _innData = 'abcd'; //해당 값은 외부에서 사용 할 수 없다. module.exports.DATA = { //외부에서 사용가능하도록 module.exports를 통해서 외부로 전달한다.. 2020. 2. 28.