JavaScript (63) 썸네일형 리스트형 request.on 'data'와 'end': POST 요청/응답처리 일반적으로 POST 요청을 처리할 때, 클라이언트가 데이터를 보내는 과정을 `'data'` 이벤트로 받고, 모든 데이터를 받은 후에 `'end'` 이벤트에서 데이터를 처리하거나 해당 요청에 대한 응답을 보낸다. `request.on('data', function(data){})`와 `request.on('end', function(){})`는 Node.js의 HTTP 서버에서 요청 데이터를 처리하는 과정을 다루는 이벤트 핸들러 보통 HTTP POST 요청을 다룰 때 사용한다. data 이벤트 클라이언트가 요청한 데이터를 전송하는 동안 발생 요청 본문의 데이터가 조각조각씩 도착하면서 `'data'` 이벤트가 여러 번 발생할 수 있다. request.on('data', function(data) { // 클.. pm2 logs: console.log() 로그확인하기, require('fs') 로그 저장/기록 하기 `pm2`를 사용하여 애플리케이션을 시작할 때는 기본적으로 stdout (표준 출력)이나 stderr (표준 에러)을 터미널에 표시하지 않는다. 따라서 `console.log()`를 사용하여 출력한 내용을 볼 수 없다. 이러한 로그를 확인하려면 `pm2`의 로그 기능을 사용하거나 `console.log()` 대신 `fs` 모듈을 사용하여 파일에 로그를 기록하는 방법을 사용해야한다. `pm2`의 로그 기능 pm2 logs var http = require('http'); var fs = require('fs'); var url = require('url'); var qs = require('querystring'); function templateHTML(title, list, body){ return `.. PM2 파일수정시 다시 시작하도록 : --watch 앱 name을 start할때 속성값을 붙인다. --watch pm2 start main.js --watch pm2 monit, 실행프로젝트 모니터링 pm2 monit pm2 stop 노드프로젝트 스탑하기 실행 프로젝트 리스트 확인 pm2 list stop하기 pm2 stop ~ 보안 오류: (:) [], PSSecurityException PS C:\Users\ES-Developer-sh\sh\Project\hyunSangNaHee\swayH\study\WEB2 - Node.js> pm2 start main.js pm2 : 이 시스템에서 스크립트를 실행할 수 없으므로 C:\Users\ES-Developer -sh\AppData\Roaming\npm\pm2.ps1 파일을 로드할 수 없습니다. 자세한 내용 은 about_Execution_Policies(https://go.microsoft.com/fwlink/?LinkID=135 170)를 참조하십시오. 위치 줄:1 문자:1 + pm2 start main.js + ~~~ + CategoryInfo : 보안 오류: (:) [], PSSecurityException + FullyQualified.. 동기/비동기: readFileSync를 사용하면 순차적으로 진행한다. 비동기적으로 파일을 읽어오면 파일을 읽는동안 다른 작업을 계속할 수 있다. 이로인해 ac순서로 출력되고 파일읽기가 완료되면 콜백 함수가 실행되어 파일내용이 출력된다. 만일 gs.readFileSync()를 사용하면 파일 읽기 작업이 완료될때까지 다음 코드로 진행되지않아 그대로 출력되게된다. var fs = require('fs'); /* //readFileSync console.log('A'); var result = fs.readFileSync('syntax/sample.txt', 'utf8'); console.log(result); console.log('C'); */ console.log('A'); // 'A'를 콘솔에 출력합니다. // 파일을 비동기적으로 읽어옵니다. fs.readFile('nod.. fs.readdir, 파일목록 본문출력하기 Node.js를 사용해 동적으로 파일을 읽어와 웹페이지를 생성한다. fs.readdir 파일리스트를 가져와 id에 따라 링크와 txt를 달리한다. var http = require('http'); var fs = require('fs'); var url = require('url'); // HTTP 서버를 생성합니다. 요청을 처리하는 콜백 함수를 전달합니다. var app = http.createServer(function(request,response){ var _url = request.url; var queryData = url.parse(_url, true).query; var pathname = url.parse(_url, true).pathname; // 루트 경로('/')로 요청이 들어온 경.. Node.js 조건문, else일때 response.writeHead(404) 404오류를 반환하다 URL의 경로명을 검사하여 루트('/')로 요청이 들어온 경우에만 데이터를 읽어서 응답을 전송하고, 그 외의 경우에는 404 오류를 반환한다. var http = require('http'); var fs = require('fs'); var url = require('url'); // HTTP 서버를 생성합니다. 요청을 처리하는 콜백 함수를 전달합니다. var app = http.createServer(function(request,response){ // 요청된 URL과 쿼리 문자열을 가져옵니다. var _url = request.url; var queryData = url.parse(_url, true).query; var pathname = url.parse(_url, true).pathname;.. Node.js 콘솔에서의 입력값 사용하기 process.argv process.argv를 사용해 명령줄에서 전달된 인수를 처리하고 출력한다. var args = process.argv; // 첫 번째 인수를 출력합니다. console.log(args[2]); console.log('A'); console.log('B'); // 두 번째 인수가 '1'인 경우에 따라 다른 메시지를 출력합니다. if(args[2] === '1'){ console.log('C1'); } else { console.log('C2'); } console.log('D'); Node.js 로 간단한 웹서버 만들기: 정적/동적파일서버 예제코드를 아직 다운받지않았다면 아래 게시물을 수행한다. https://standout.tistory.com/1383 Node.js 로 간단한 웹서버 만들기: 정적파일서버 간단한 웹서버를 만들어 요청된 url에 따라 해당하는 파일을 읽어 응답으로 전송한다. gs.readFileSynx 메서드를 사용하여 파일의 내용을 응답본문으로 설정한다. node main.js var http = require('http'); var fs standout.tistory.com url문자열을 이용하여 파일을 읽어와 정적 html템플릿에 적용하여 응답본문으로 전송한다. var http = require('http'); var fs = require('fs'); var url = require('url'); // HTTP 서.. Node.js 로 간단한 웹서버 만들기: 정적파일서버 간단한 웹서버를 만들어 요청된 url에 따라 해당하는 파일을 읽어 응답으로 전송한다. gs.readFileSynx 메서드를 사용하여 파일의 내용을 응답본문으로 설정한다. node main.js var http = require('http'); var fs = require('fs'); // HTTP 서버를 생성합니다. 요청을 처리하는 콜백 함수를 전달합니다. var app = http.createServer(function(request,response){ // 요청된 URL을 가져옵니다. var url = request.url; // 루트 경로('/')로 요청이 들어온 경우 기본 페이지(index.html)로 설정합니다. if(request.url == '/'){ url = '/index.html'; .. create-react-app 프로젝트 생성하기 create-react-app 리액트 프로젝트 생성할때 필요한 설정과정을 생략하고 바로 간편하게 프로젝츠 작업환경을 구축해주는 도구 설정은 추후 변경이 가능하다. yarn create react-app yarn create react-app sanghee 브라우저가, 혹은 브라우저 선택 창이 열릴때까지 기다리기 성공메세지와 함께 브라우저를 선택하거나 url직접 입력 완료 yarn이란?: yarn 설치하기 Node.js를 설치할떄 패키지를 관리해주는 npm도구가 설치된다. 이때 npm대신 yarn이란 패키지 관리자 도구를 설치하여 사용해도되는데, yarn은 npm을 대체하는 도구로 보다 빠르며 기타 부가 기능을 제공한다. 설치 후 잘 설치되었는지 확인해보자. npm install --global yarn yarn --version Window Node.js 설치하기 (feat.Node.js, 자바스크립트가 갈수록 강력해지는 이유) 리액트 프로젝트를 만들때도 Node.js를 반드시 먼저 설치해야한다. Node.js는 자바스크립트 런타임으로 2009년 출시 이후 웹서버, 브라우저, 애플리케이션, 데스크톱 등에서도 활약하고있다. https://standout.tistory.com/60 Node.js란? Node.js Node.js는 서버사이트 스크립트 언어가 아니다. 프로그램(환경)이다 오픈 소스, 다양한 모듈과 라이브러리를 지원 JavaScript 런타임 환경 JavaScript로 서버 사이드 코드를 작성할 수 있도록 해주 standout.tistory.com Node.js를 설치하면 패키지 매니저 도구인 npm이 설치되는데 npm으로 수많은 개발자가 만든 패키지를 설치하고 그 버전을 관리할 수 있다. npm저장소에 등록된 패키지는 .. 파라미터값에 따른 tab active 유지하기 우선 php로 파라미터 값에 따라 active 클래스가 추가되도록 html에 설정한다. 각 탭이 클릭될때마다 파라미터가 수정/추가되고 reload()되면 끝. //원하는 a 요소 모두 선택 const tabMenuLinks = document.querySelectorAll(".layout_tab ul li > a"); tabMenuLinks.forEach((link) => { link.addEventListener("click", function (event) { event.preventDefault(); // 링크의 기본 동작(페이지 이동) 방지 const linkHref = this.getAttribute("href"); // 클릭한 링크의 href 값을 가져옴 const currentURL = wi.. button 클릭시 페이지가 새로고침될때, preventDefault() button의 기본 동작인 폼 전송(form submission)으로 인해 발생할 수 있다. JavaScript에서 event.preventDefault()를 사용하하면 버튼의 기본동작을 막을 수 있다. event.preventDefault() checkbox value가 submit되지않을때 checkbox는 radio와 다르게 값을 hidden한 input으로 넘겨줘야한다는 사실을 놀랍게도 몇개월에 한번씩 계속 잊고 왜 안되는지 한참을 고민하다 떠올리곤 탄식하는 일이 반복되자.. 반성을 할겸 적어보기로 했다. hidden type input을 추가 onchange시 함수호출 웹 모바일 //checkbox가 선택되었을때 value을 변경한다. function ifCheckedTurnYorN(checkbox, hiddenInputName) { $("input[name='" + hiddenInputName + "']").val(checkbox.checked ? 'Y' : 'N'); } 완료. AJAX, include한 코드에 속성추가하기 아래와 같이 불러온 form에 속성을 추가해보자. $.get('action될 url', function(){ [ $(".contentsFormInclude").html($(data).find("form[name='contentsform']")); }).fail(function(xhr, status, error) { console.error("Error:", error); }); https://standout.tistory.com/797 .attr()로 추가후 원하는방향으로 function을 따로 작성한다, 아래 handleFormSubmit는 예시 $("form[name='contentsform']").attr("onsubmit", "return handleFormSubmit(this);"); funct.. AJAX, 특정영역만 불러오기 .contentsFormInclude안에 특정 파일을 include하되 모든코드말고 특정 영역만 불러와보자. include하는 파일안에 form태그의 name이 contentsform인 영역이 있다고 가정한다면 불러오는 코드 $(".contentsFormInclude").html($(data).find("form[name='contentsform']")); 예시코드 $.get('action될 url', function(){ [ $(".contentsFormInclude").html($(data).find("form[name='contentsform']")); }).fail(function(xhr, status, error) { console.error("Error:", error); }); AJAX, <script> 코드 추가하기 스크립트 추가 $("").text(`cid = 123;`).appendTo(document.head); 변수값으로 추가할경우 $("").text(`cid = ${noValue};`).appendTo(document.head); AJAX, style.css 추가하기 하나씩 추가하는 코드 $("head").append(''); 여러개일 경우 [ '', '' ].forEach(css => $("head").append(css)); 예시코드 $.get('action될 url', function(){ [ '', '' ].forEach(css => $("head").append(css)); }).fail(function(xhr, status, error) { console.error("Error:", error); }); https://standout.tistory.com/794 AJAX, script.js 추가하기 하나씩 추가하는 코드 $.getScript("script.js"); 여러개일 경우 [ '$.getScript("script1.js")', '$.getScript.. AJAX, script.js 추가하기 하나씩 추가하는 코드 $.getScript("script.js"); 여러개일 경우 [ '$.getScript("script1.js")', '$.getScript("script2.js")' ].forEach(script => $.getScript(script)); 예시코드 $.get('action될 url', function(){ [ '$.getScript("script.js")', '$.getScript("script.js")' ].forEach(script => $.getScript(script)); }).fail(function(xhr, status, error) { console.error("Error:", error); }); AJAX 메서드, 비동기적 서버통신 $.get fail $.get('action될 url', function(){ }).fail(function(xhr, status, error) { console.error("Error:", error); }); fail() AJAX 요청이 실패했을때 실행할 콜백 함수 xhr은 XMLHttpRequest 객체를 나타내며, status는 요청 상태 코드를, error는 에러 메시지를 포함한다. Attribute 속성 삭제하기 button의 onclick이라는 속성을 삭제해보자. button.removeAttribute("onclick"); class/id값 없는 button : 어떤버튼이 클릭되었는지, 버튼텍스트인식하기 아래와 같은 수정이란 텍스트를 가진 button을 인식해보기로 하자. 수정 document.querySelectorAll("button").forEach(button => { const buttonText = button.innerText.trim(); if (buttonText === '수정') {} }); alert와 confirm의 차이, 예시코드 alert 통보식 안내창 alert("알림창으로 안내드릴게요!"); confirm 허락을 구하는 안내창 if (confirm("정말로 진행하시겠습니까?")) { console.log("진행합니다!"); } else { console.log("취소했습니다."); } hoisting, 사용할 변수를 미리 확인하다 hoisting JavaScript에서 사용할 변수를 미리 확인해 끌어올려지는 작업 sayHello(); // "Hello!" function sayHello() { console.log("Hello!"); } sayHello()함수를 호출하기 전에 함수선언이 있지않아 오류가 나야하지만 호이스팅으로 인해 해당 function 블럭이 최상단으로 끌어올려져 sayHello()가 정상적으로 실행되게된다. *코드의 가독성을 위해 변수와 함수를 사용하기 전에 선언하는 것이 우선권장된다. classList. add/remove/toggle/contains 클래스 목록 관리하기 classList.add(class1, class2, ...) 요소의 클래스 목록에 클래스를 추가, 여러 개의 클래스를 추가할 수 있습니다. classList.remove(class1, class2, ...) 요소의 클래스 목록에서 클래스를 제거, 여러 개의 클래스를 제거할 수 있습니다. classList.toggle(class, force) 요소의 클래스 목록에서 클래스를 추가하거나 제거, 클래스가 이미 존재하면 제거하고, 존재하지 않으면 추가 force 매개 변수를 사용하여 클래스를 강제로 추가 또는 제거할 수 있다. classList.contains(class) 요소의 클래스 목록에 클래스가 존재하는지 확인, true 또는 false를 반환된다. for of 과 for in의 차이 for of은 객체를 반환하고 for in는 index를 반환한다. let array1=[52, 273, 32, 93, 103] for(let element of array1){ document.write(element+" "); } document.write(" "); for(let i in array1){ document.write(array1[i]+" "); } 이전 1 2 3 다음
