자바스크립트11 [JavaScript] 팝업 날짜 지정 오늘 하루 이 창을 열지 않음 [닫기] .popup p span{font-size:20px} #popup1, #popup2, #popup3, #popup4 { position: absolute; top: 7%; max-width: 400px; width: 78%; height: auto; padding: 10px; border: 1px solid rgb(221, 221, 221); background: rgb(255, 255, 255); box-shadow: 2px 2px 6px #666; display: none; } var today = new Date(); // html 에서 data-expired 가 설정된 팝업 div 들 찾기 var popup = document.querySelectorAll(.. 2024. 2. 22. [NodeJS] Router 객체로 라우팅 분리 익스프레스에서는 라우터를 분리할 수 있는 방법을 제공한다. routes 폴더를 만들고 index.js와 user.js 파일 생성하기 index.js const express = require('express'); const router = express.Router(); //GET / 라우터 router.get('/', (req, res) => { res.send('Hello, Express'); }); module.exports = router; user.js const express = require('express'); const router = express.Router(); //GET / 라우터 router.get('/', (req, res) => { res.send('Hello, User');.. 2023. 7. 1. [NodeJS] multer 파일업로드 multer : 이미지, 동영상 등을 비롯한 여러 가지 파일을 멀티파트 형식으로 업로드할 때 사용하는 미들웨어이다. form을 통해 업로드하는 파일은 body-parser로는 처리할 수 없고 직접 파싱하가도 어려우므로 multer를 사용한다. 1.multer 설치 npm i multer 2. 화면 만들어주기 multipart.html 업로드 app.js 작성하기 전에 multer 기본적인 설정 알아두기 const multer = require('multer'); const upload = multer({ storage: multer.diskStorage({ destination(req, file, done){ done(null, 'uploads/'); }, filename(req, file, done){.. 2023. 7. 1. [NodeJS] 실무에서 자주 사용하는 패키지 콘솔 $ npm i morgan cookie-parser express-session dotenv dotenv를 제외한 다른 패키지는 미들웨어이다. dotenv는 process.env를 관리하기 위해 설치했다. .env파일 생성 COOKIE_SECRET=cookiesecret dotenv패키지가 .env파일을 읽어서 process.env로 만들어준다. COOKIE_SECRET 에 cookiesecret 값이 할당. 키=값 비밀키들을 소스 코드에 그대로 적어두면 키도 같이 유출 되기 때문에 별도의 파일로 관리한다. app.js 수정 const express = require('express'); const path = require('path'); //추가 const morgan = require('mor.. 2023. 7. 1. [NodeJS] 익스프레스 자주 사용하는 미들웨어 미들웨어는 익스프레스의 핵심이다. 요청과 응답의 중간에 위치하기 때문에 미들웨어라고 부른다. 미들웨어는 요청과 응답을 조작해 기능을 추가하기도 하고, 나쁜 요청을 걸러내기도 한다. 미들웨어는 app.use와 함께 사용된다. app.use(미들웨어) 꼴이다. 익스프레스 서버에 미들웨어 연결해보기 const express = require('express'); const path = require('path'); const app = express(); app.set('port', process.env.PORT || 3001); app.use((req, res, next) => { console.log('모든 요청에 다 실행됩니다. '); next(); }); app.get('/', (req, res, ne.. 2023. 7. 1. [NodeJS] 자주 발생하는 에러들 node: command not found - 노드르르 설치했지만 이 에러가 발생하는 경우는 환경 변수가 제대로 설정되어 있지 않은 것입니다. 환경 변수에는 노드가 설치된 경로가 포함되어야 합니다. node 외의 다른 명령어 그 명령어를 수행할 수 있는 파일이 환경 변수에 들어 있어야 명령어를 콘솔에서 사용할 수 있습니다. ReferenceError: 모듈 is not defined - 모듈을 require 했는지 확인합니다. Error: Cannot find module 모듈명 - 해당 모듈을 불러오려 할 때 발생합니다. Error [ERR_MODULE_NOT_FOUND] - 존재하지 않는 모듈을 불러오려 할 때 발생합니다. Error: Can't set headers after they are sen.. 2023. 6. 29. [NodeJS] 예외 처리하기 예외란? - 처리하지 못한 에러 멀티 스레드 프로그램에서는 스레드 하나가 멈추면 그 일을 다른 스레드가 대신한다. 하지만 노드의 메인 스레드는 하나뿐이므로 그 하나를 소중히 보호해야 한다. 메인 스레드가 에러로 인해 멈춘다는 것은 스레드를 갖고 있는 프로세스가 멈춘다는 뜻이고, 전체 서버도 멈춘다는 뜻이다. 예외 처리 -> 에러 로그가 기록되더라도 작업은 계속 진행될 수 있도록 아래 예제는 프로세스가 멈추지 않도록 에러를 잡는 방법이다. 에러가 발생할 것 같은 부분을 try/catch 문으로 감싸면 된다. 프로세스가 멈추면 setInterval도 멈출 것이다. setInterval(()=>{ console.log('시작'); try{ throw new Error('에러 강제 발생') }catch(err).. 2023. 6. 29. [JS] 콜백함수 정리 콜백함수 - 정의 : 함수에 파라미터로 들어가는 함수 - 용도 : 순차적으로 실행하고 싶을 때 사용 document.querySelector('.button').addEventListener('click',function(){ "버튼 누르면 이 코드 실행해주세요~" }) 이벤트를 넣고 싶을 때 .addEventListener() 사용. addEventListener() 소괄호가 있으니까 함수임. addEventLstener('click', function() {} ) 파라미터로 함수를 사용함 -> 이것을 콜백함수라고 부름 + 다른데서 만든 함수도 콜백함수로 넣을 수 있음 document.querySelector('.button').addEventListener('click',function 함수명) fu.. 2023. 6. 29. [JS] XMLHttpRequest HTTP 요청 전송 const xhr = new XMLHttpRequest(); //생성자 함수 호철하여 생성 xhr.open(method, url[, async]) // method:Http 요청메서드(GET,POST,PUT,DELETE 등 ) ..... xhr.send(); //HTTP 요청전송 XMLHttpRequest.prototype.open open메서드는 서버에 전송할 HTTP요청을 초기화한다. HTTP 요청 메서드는 클라이언트가 서버에게 요청의 종류와 목적을 알리는 방법이다. 주로 5가지 요청 메서드를 사용하여 CRUD를 구현한다. HTTP 요청 메서드 종류 목적 페이로드 GET index / retrieve 모든/특정 리소스 취득 X POST create 리소스 생성 O PUT repla.. 2023. 6. 18. 이전 1 2 다음 728x90
