annyhpk.log

nodejs

노드 서버 forever 사용기

# 이 글은 초보 개발자의 단순 문제 해결을 경험한 글로써 얻어갈 정보가 거의 없습니다. 1. 문제 발생 토이 프로젝트(프론트 부분)에서 Kakao api를 통해 fetch 데이터를 받아오던 부분을 간단한 노드 서버(fastify)를 만들어서 git page -> node server -> kakao api -> node server - git page 순으로 api 키값을 숨기고 프론트에서는 단순한 요청을 통해서 데이터를 받아오게 할 계획을 하였습니다. 무료플랜으로도 1개의 컨테이너를 항상 켜두기 기능이 생긴 구름 IDE를 통해 노드 서버를 만들었습니다. 그런데 서버를 실행 시키고 컨테이너를 종료하니 네트워크 요청 실패 에러가 발생하였고 터미널을 종료해도 서버가 꺼지지 않기 위해서는 백그라운드 실행을 ..

Javascript

insertAdjacentHTML 과 innerHTML 차이 알아보기

1. innerHTML 요소(element) 내에 포함된 HTML 또는 XML 마크업을 가져오거나 설정합니다. 그리고 MDN 문서에 이렇게 표기되있다. 요소(element)의 내용을 변경하는 대신 HTML을 문서(document)에 삽입하려면, insertAdjacentHTML() 메서드를 사용하십시오. 2. insertAdjacentHTML insertAdjacentHTML() 메서드는 HTML or XML 같은 특정 텍스트를 파싱 하고, 특정 위치에 DOM tree 안에 원하는 node들을 추가한다. 이미 사용 중인 element는 다시 파싱 하지 않는다. 그러므로 element 안에 존재하는 element를 건드리지 않는다. (innerHtml은 과 좀 다름). innerHtml보다 작업이 덜 드므..

기타

VSCode에서 eslint delete '␍' (prettier/prettier) error 해결방법

VSCode 에서 eslint 설치와 설정후 아래와같은 에러가 생겼다. 빠르게 구글에게 물어보았다. 문제 : vscode사용시 eslint 오류라고 한다. 해결방법 1 : .eslintrc에 아래와 같은 룰을 설정해주면 된다. { // .eslintrc 에 아래내용을 추가 ... "rules": { "prettier/prettier": [ "error", { "endOfLine": "auto" } ] } } 해결방법 2 : 라인 시퀸스 변경

Javascript

webWorker 맛보기

webWorker란? 웹 워커(Web worker)는 스크립트 연산을 웹 어플리케이션의 주 실행 스레드와 분리된 별도의 백그라운드 스레드에서 실행할 수 있는 기술입니다. 웹 워커를 통해 무거운 작업을 분리된 스레드에서 처리하면 주 스레드(보통 UI 스레드)가 멈추거나 느려지지 않고 동작할 수 있습니다 index.html run worker.js function sleep(delay) { let start = new Date().getTime(); while (new Date().getTime() < start + delay); } self.addEventListener('message', function(e) { console.log(e.data); // 일해라 워커! sleep(3000); // 3초가..

Javascript

리스트에 이벤트를 효율적으로 등록해보자!>

기존의 코드 - 각 태그를 선택하여 각각 이벤트를 주입해준다. 1 2 3 4 5 6 개선된 코드 - 태그에 이벤트를 주입하고 클릭한 이벤트가 이라면 내부로직을 동작시킨다. e.currentTartget : 이벤트 발생 시작 요소 ( 이벤트 핸들러가 부착된 요소) e.target : 이벤트 전파 최하단 요소 1 2 3 4 5 6

Javascript

일급 객체와 고차 함수

일급객체와 고차함수 일급객체란 다른 객체들에 일반적으로 적용 가능한 연산을 모두 지원하는 객체를 가리킨다. 변수에 대입하거나 함수의 인자로 전달되거나 리턴할 수도 있는 연산을 지원하는 객체이다. const func1 = function(n) { // 함수 변수 할당 return n + n; } const func2 = (n) => { // arrow 함수 변수 할당 return n + n; } 고차 함수는 다른 함수를 인자로 받거나 다른 함수를 리턴하는 함수를 말한다. 이 때 다른 함수를 인자로 전달되는 함수를 콜백 함수라고 한다. 그리고 함수를 리턴하는 함수를 고안해 낸 학자 이름을 딴 커리 함수라고 한다. function double(n) { return n * n; } function func(f,..

Javascript

addEventListener 와 onclick

결론 부터 말하자면 addEventListener가 더 나은 방식입니다. addEventListener를 사용하세요. 두 개의 메소드는 아래와 같이 사용합니다. document.querySelector('.btn').onclick = () => { alert('click!'); } document.quertSelector('.btn').addEventListener('click', () => { alert('click!'); ), false); 1. 여러 이벤트 overwrite onclick는 한번에 하나의 이벤트만 할당할 수 있습니다. 그에 반해 addEventListener는 여러개의 이벤트를 overwrite할 수 있습니다. 아래의 예시를 봅시다. let eventHandler1 = () => {..

Javascript

Promise - 프로미스

Promise는 JavaScirpt에서 비동기 작업을 위한 중요한 구성 요소입니다. 그리고 Promise를 이해하고 배우고 응용하기가 쉽지 않다고 생각할 수 있습니다. 걱정하지 마세요. Promise는 대다수의 많은 웹 개발자들에게도 어려운 부분입니다. 자바스크립트에서 Promise는 무엇인가? Promise는 자바스크립트의 특별한 객체입니다. Promise는 비동기 작업이 성공적으로 완료된 후 값을 생성하거나 time out, network error 등으로 인해 성공적으로 완료되지 않은 경우는 오류를 생성합니다. 성공 => 값(성공된), 오류 => 오류 값 성공적으로 작업을 완료하면 resolve 함수 호출을 가르키고 에러가 발생하면 reject 함수호출을 합니다. 다음과 같이 Promise 생성자를..