JS
-
개요express 개발 세팅을 하던 중 핫리로드 기능을 추가하려 했는데 최신 글은 없는 것 같아 포스팅하게 되었다.spring에 비해 express는 확실히 자료가 너무 적어 매번 애를 먹는 것 같다...핫리로드 기능 패키지는 nodemon을 사용했다.핫빌드 / 핫리로드란?핫빌드 (Hot Build): 코드 변경 시 전체 애플리케이션을 다시 빌드하여 반영. 주로 백엔드 또는 빌드 도구에서 사용.핫리로딩 (Hot Reloading): 코드 변경 시 변경된 부분만 즉시 반영. 주로 프론트엔드 개발에서 사용하며, 애플리케이션 상태가 유지됨.내가 작업한 부분은 핫리로드다.하지만 제목에 핫빌드도 써두어야 검색 유입이 늘어날 것 같아 핫빌드도 써두었다. ㅎㅎ ^^프로젝트 디렉토리 구조project├── docker..
express - Docker + express.js 핫빌드 / 핫리로드개요express 개발 세팅을 하던 중 핫리로드 기능을 추가하려 했는데 최신 글은 없는 것 같아 포스팅하게 되었다.spring에 비해 express는 확실히 자료가 너무 적어 매번 애를 먹는 것 같다...핫리로드 기능 패키지는 nodemon을 사용했다.핫빌드 / 핫리로드란?핫빌드 (Hot Build): 코드 변경 시 전체 애플리케이션을 다시 빌드하여 반영. 주로 백엔드 또는 빌드 도구에서 사용.핫리로딩 (Hot Reloading): 코드 변경 시 변경된 부분만 즉시 반영. 주로 프론트엔드 개발에서 사용하며, 애플리케이션 상태가 유지됨.내가 작업한 부분은 핫리로드다.하지만 제목에 핫빌드도 써두어야 검색 유입이 늘어날 것 같아 핫빌드도 써두었다. ㅎㅎ ^^프로젝트 디렉토리 구조project├── docker..
2024.07.31 -
개요express.js로 토이 프로젝트를 진행하던 중 cicd를 구현하려는데 마땅한 글을 찾지 못해 직접 구현한 후 정리하게 되었다.준비물1. ssh 접속이 가능하고 docker, docker-compose가 정상 설치된 서버2. docker hub 계정3. 프로젝트 repositoryGithub Repository Secrets 등록repository -> Settings -> Secrets and Variables -> Actions1. SERVER_IP - 서버 ip2. SERVER_USER - SSH 사용자명3. SSH_PRIVATE_KEY - 서버 SSH 접속 시 사용하는 private key4. DOCKER_USERNAME - docker hub 유저명5. DOCKER_PASSWORD - do..
express - Docker + github action CI/CD 구현개요express.js로 토이 프로젝트를 진행하던 중 cicd를 구현하려는데 마땅한 글을 찾지 못해 직접 구현한 후 정리하게 되었다.준비물1. ssh 접속이 가능하고 docker, docker-compose가 정상 설치된 서버2. docker hub 계정3. 프로젝트 repositoryGithub Repository Secrets 등록repository -> Settings -> Secrets and Variables -> Actions1. SERVER_IP - 서버 ip2. SERVER_USER - SSH 사용자명3. SSH_PRIVATE_KEY - 서버 SSH 접속 시 사용하는 private key4. DOCKER_USERNAME - docker hub 유저명5. DOCKER_PASSWORD - do..
2024.07.30 -
개요js fetch api를 사용해 open api에서 정보를 가져오려고 할때 에러가 발생했다.해결방법# 전let res = fetch("https://example.com").json();# 후let res = fetch("https://example.com").then(response => response.json());
JS - fetch api cors error개요js fetch api를 사용해 open api에서 정보를 가져오려고 할때 에러가 발생했다.해결방법# 전let res = fetch("https://example.com").json();# 후let res = fetch("https://example.com").then(response => response.json());
2024.07.12 -
개요임파님의 블로그를 보면 오늘의 명언이 나오는데 나도 이 기능을 적용시켜보고 싶어 찾아보니 마음에 드는 글이 없어 직접 만들어 포스팅을 하게 되었다.주의사항html, css, js에 대한 기초 지식이 없을 경우 진행이 어려울 수 있습니다.블로그 스킨에 따라 css가 깨질 수 있습니다.기능 적용 방법1. js 파일 업로드업로드 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가파일 내용/*** 랜덤 띵언을 제공하는 API URL* @constant {string}*/const DDING_API_URL = "https://korean-advice-open-api.vercel.app/api/advice";/*** API에서 랜덤 띵언을 가져와 HTML을 업데이트하는 ..
티스토리 블로그에 랜덤 명언 출력하기개요임파님의 블로그를 보면 오늘의 명언이 나오는데 나도 이 기능을 적용시켜보고 싶어 찾아보니 마음에 드는 글이 없어 직접 만들어 포스팅을 하게 되었다.주의사항html, css, js에 대한 기초 지식이 없을 경우 진행이 어려울 수 있습니다.블로그 스킨에 따라 css가 깨질 수 있습니다.기능 적용 방법1. js 파일 업로드업로드 경로: 티스토리 블로그 관리 -> 스킨 편집 -> html 편집 -> 파일 업로드 -> 추가파일 내용/*** 랜덤 띵언을 제공하는 API URL* @constant {string}*/const DDING_API_URL = "https://korean-advice-open-api.vercel.app/api/advice";/*** API에서 랜덤 띵언을 가져와 HTML을 업데이트하는 ..
2024.07.12 -
1. 자주 사용하는 location 객체 // Ex) https://test.com:80/newpost?type=post window.location.href // Ex) https: window.location.protocol // Ex) test.com:80 window.location.host // Ex) test.com window.location.hostname // Ex) 80 window.location.port // Ex) newpost window.location.pathname // Ex) ?type=post window.location.search 2. 참고 https://hianna.tistory.com/464
js - 현재 페이지 url 관련 (location 객체)1. 자주 사용하는 location 객체 // Ex) https://test.com:80/newpost?type=post window.location.href // Ex) https: window.location.protocol // Ex) test.com:80 window.location.host // Ex) test.com window.location.hostname // Ex) 80 window.location.port // Ex) newpost window.location.pathname // Ex) ?type=post window.location.search 2. 참고 https://hianna.tistory.com/464
2024.02.29 -
Call & Apply 바인딩 예시 코드 class Point { constructor(x) { this.x = x; } info(y, z) { console.log(`x: ${this.x}, y: ${y}, z: ${z}`); } } var point = new Point(1); point.info(2, 3); // 결과 - x: 1, y: 2, z: 3 var point2 = {x: 100}; point.info.call(point2, 200, 300); // 결과 - x: 100, y: 200, z: 300 point.info.apply(point2, [200, 300]); // 결과 - x: 100, y: 200, z: 300 설명 함수를 바인딩하여 사용 시 this가 지정해준 object로 고정..
js - this 바인딩 관련Call & Apply 바인딩 예시 코드 class Point { constructor(x) { this.x = x; } info(y, z) { console.log(`x: ${this.x}, y: ${y}, z: ${z}`); } } var point = new Point(1); point.info(2, 3); // 결과 - x: 1, y: 2, z: 3 var point2 = {x: 100}; point.info.call(point2, 200, 300); // 결과 - x: 100, y: 200, z: 300 point.info.apply(point2, [200, 300]); // 결과 - x: 100, y: 200, z: 300 설명 함수를 바인딩하여 사용 시 this가 지정해준 object로 고정..
2022.10.11 -
코드 // 이름에 변수값으로 변수명 짓기 eval(`var ${변수}이름 = 값`); 예시 // 예) var 변수 = '변수'; eval(`var ${변수}이름 = 값`); console.log(변수이름); // 결과 (값);
js - 변수값으로 변수명 짓기코드 // 이름에 변수값으로 변수명 짓기 eval(`var ${변수}이름 = 값`); 예시 // 예) var 변수 = '변수'; eval(`var ${변수}이름 = 값`); console.log(변수이름); // 결과 (값);
2022.10.07 -
코드 // 변수 값이 함수명인 함수 사용 eval(`${변수}()`); 예시 코드 // 예) function 함수() { console.log('성공!'); } var 변수 = '함수'; eval(`${변수}()`); // 결과 (성공)
js - 변수 값으로 함수 사용코드 // 변수 값이 함수명인 함수 사용 eval(`${변수}()`); 예시 코드 // 예) function 함수() { console.log('성공!'); } var 변수 = '함수'; eval(`${변수}()`); // 결과 (성공)
2022.10.07