개발하는 고라니

전통적인 페이징은 와 같은 형태를 지닌 Object를 눌러 페이지를 이동시키며 해당 페이지에 해당하는 데이터가 보여지게끔 하는 방식이었다. 하지만 근래에는 다양한 방법으로 페이징 처리를 한다. 예를 들어 댓글 같은 경우, [더보기] 버튼을 눌러 더 많은 댓글을 append 하는 방식을 사용하거나, 페이스북, 인스타그램 같은 SNS에서는 어느정도 데이터를 보고 나면 저절로 밑에 더 생기는 것을 볼 수 있을 것이다. 위 방식이 스크롤에 따른 페이징 처리인지는 정확히 모르겠으나, 이번 포스팅에서는 [ 스크롤 이동에 따른 페이징 처리 ]를 설명해보고자 한다. 나는 Scroll이 맨 아래에 닿을 때 추가적인 데이터를 불러오도록 코딩하였다. 페이징 처리를 위한 API는 다 준비가 되어있다는..

콘솔에 문자열을 입력하고 그 내용을 파일에 저장하는 예제를 해보고자 한다. 자바스크립트는 콘솔 입력이 없기에 Node.js를 사용해야한다. const fs = require('fs'); const readline = require('readline'); var rl = readline.createInterface({ input: process.stdin, output: process.stdout }); var data = ''; rl.on('line', (input) => { data += input + '\n'; }); rl.on('close', () => { fs.appendFile('./test.txt', data, 'utf8', (err) => { if(err) throw err; console...

2562번: 최댓값 9개의 서로 다른 자연수가 주어질 때, 이들 중 최댓값을 찾고 그 최댓값이 몇 번째 수인지를 구하는 프로그램을 작성하시오. 예를 들어, 서로 다른 9개의 자연수 3, 29, 38, 12, 57, 74, 40, 85, 61 이 주어 www.acmicpc.net [배열] Javascript로 문제풀이를 익히기 위해 풀어본 문제. # Code const readline = require('readline'); var rl = readline.createInterface({ input: process.stdin, output: process.stdout }); var arr = []; rl.on('line', (input)=>{ arr.push(input); }).on('close', ()=..

11021번: A+B - 7 각 테스트 케이스마다 "Case #x: "를 출력한 다음, A+B를 출력한다. 테스트 케이스 번호는 1부터 시작한다. www.acmicpc.net 자바스크립트와 노드를 공부하며 백준도 자바스크립트로 풀어보고 싶은 마음에 첫 도전하는 자바스크립트로의 programming sovling. 첫 문제인 만큼 난이도도 아주 쉬운 것으로 정했다. 자바스크립트와 readline에 어서 익숙해져서 어려운 문제도 자바스크립트로 풀어보고 싶은 마음이 굴뚝같다. # Code var readline = require('readline'); var rl = readline.createInterface({ input: process.stdin, output: process.stdout }); func..

이벤트 트리거로 파일을 업로드하는 방법도 있다면 요즘엔 드래그 앤 드랍 방식으로도 많이 사용한다. 그 방법을 알아보자. 먼저 이벤트 중에 drag라는 이벤트가 있는데 이를 좀더 자세히 보면 다음과 같이 있다. Drag & Drop 파일 업로드 네모난 박스에 파일을 드래그 했을 때 그 파일의 정보를 가져오는 것을 알아보기 전에 사전 준비를 해보자. HTML과 그에 필요한 Javascript 작성한다. HTML / JS 작성 파일업로드 : DND & Trigger 파일선택 var sec9 = document.querySelector('#ex9'); var btnUpload = sec9.querySelector('.btn-upload'); var inputFile = sec9.querySelector('inp..

스크립트 코드 작성 영역 스크립트 코드는 스크립트 태그 안에서 작성할 수 있다. ... 하지만 이처럼 다른 태그 안에서도 작성될 수 있다. 고객센터 고객센터 ... ... 고객센터 객체 생성의 시기와 함수 대입의 시기 제목 ... 위 코드처럼 두고 페이지를 요청하면 오류가 발생한다. asideTitle이 define 되지 않았다는 오류이다. 그럼 어떻게 해야할까? window라는 전역 객체를 이용하는 것이다. window가 "load"될 때, 즉 모든 DOM이 생성되고 난 이후에 asideTitle을 이용하려 한다면 에러가 발생하지 않을 것이다. 이는 다음과 같이 처리한다. window라는 객체에 onload 되었을 때 함수를 실행하는데, 그 때 asideTitle의 onclick 속성에 printSum..

라는 체크박스가 있다. 1) 체크박스가 체크되었는지 true/false로 가져오기 $("input:checkbox[name='box']").is(":checked") == true $("input:checkbox[name='box']").is(":checked") 2) 체크박스 해제하기 $("input:checkbox[name='box']").prop("checked", false); 3) 체크박스 선택하기 $("input:checkbox[name='box']").prop("checked", true); $("input:checkbox[name='box']").attr("checked", true); 4) 선택된 체크박스 수 가져오기 (다중 체크박스의 경우) $("input:checkbox[name='b..