개발일지

프로그래밍 유형은 싱크로너스와 어싱크로너스로 유형이 두 가지로 나뉜다. 싱크로너스는 순차적으로 실행되는 것을 의미하고 어싱크로너스는 병렬적으로 동시 다발적으로 실행되는 것을 의미한다. 싱크로너스는 직관적이며 무엇이 실행되고 있는지 알 수 있지만 순차적으로 실행되기 때문에 A-B-C 형식이라면 C는 A-B가 실행될 때까지 기다려야한다. 반면 어싱크로너스 형식은 병렬적으로 작업이 실행된다. A-B-C 형식의 C가 A-B를 기다리는 게 아닌 동시에 실행되기 때문에 멀티태스킹이 가능하며 자원을 효율적으로 사용할 수 있게 된다. 기술적 예시 동기식(싱크로너스) => HTTP API : HTTP API는 요청과 응답을 동기 방식으로 전달한다. 비동기식(어싱크로너스) = > 대량의 데이터를 비동기적으로 처리하는 데이..

Clipboard.writeText() 이 메소드는 매개변수에 넣은 값을 복사하고 promise로 반환값을 사용할 수 있다. promise가 사용되므로 Clipboard.writeText().then(콜백)을 주어야한다. *HTTPS 환경이 아니라면 사용이 불가하므로 맨 아래 코드를 사용한다. (html) onclick으로 함수 실행을 준비시켰다. (JS) function copy() { window.navigator.clipboard.writeText('eodovo@naver.com').then(() => { alert('메일이 복사되었습니다, 감사합니다.'); }) copy 함수를 생성하고 Clipboard.writeText()API 매개변수 안은 복사될 값을 입력한다. 반환값은 promise가 사용..

프로세스, 스레드 쉽게 예를 들기 위해서 프로세스는 식당이고 스레드는 요리사이다. 프로세스가 여러 음식 주문을 받으면 1개의 요리만 시작하고 다음 음식을 시작하는 것이 아니라 여러 음식 주문을 받으면, 여러 음식(여러 프로세스)이 실행되며 여러 요리사(스레드)들이 그 작업을 실행하는 것이다. 자바스크립트는 단일 스레드이다. 그래서 코드들이 있을 때 각 1줄씩 실행되며 아래로 차례로 실행되게 되는데 그렇다면 아래 예시에선 어떻게 동작이 되는지 예제를 통해 배운 점을 적어보겠다. console.log('처음 시작 코드'); setTimeout(()=>{ console.log('3초가 지나서 출력된코드') },3000); console.log('마지막 코드') 만약 위에서 말한 단일 스레드라하여 1줄씩 실행된..

콜스택은 여러 함수를 호출하는 스크립트에서 해당 위치를 추적한다. 그래서 그 함수가 어디서 실행되는지 참조가 가능하다. 콜 스택의 스택은 자료구조(데이터 구조)이다. 후입선출법과 같은 의미로 스택은 마지막으로 push된 데이터는 pop 되었을 때 마지막으로 push된 데이터가 pop이 된다. 이처럼 나중에 추가된 것이 먼저 나오는 것을 LIFO(후입선출)구조라고한다. 예를 들어서 A함수, B함수의 결과를 얻어 연산하는 C함수가 있다. C함수는 값을 바로 출력하지 않는다. B함수와 A함수의 결과값을 참조한다. 함수 C의 결과를 얻기 위해선 B함수의 결과값이 필요하다. B함수는 A의 결과값이 필요해서 A함수를 참조한다. A함수는 값을 계산하고 B함수에게 넘긴다. 이렇게 값이 필요할 경우 함수는 콜스택에 추가..

인스턴스 : 클래스의 현재 생성된 오브젝트를 가리킨다. 인스터스화 되다 : 클래스로부터 객체를 만드는 과정. 클래스 -> 인스턴스화 -> 인스턴스(객체) 클래스를 사용하기 위해서 class Name {} 을 사용한다.(클래스의 이름의 첫 글자는 대문자) 그리고 언제나 constructor(){} 구문을 추가한다. 이것은 새로운 것이 만들어질 때마다 즉시 실행되는 함수다. 클래스에서도 new 키워드를 사용해 매개변수를 담아준다. class Color { constructor(r, g, b) { console.log(r, g, b); } } const newColor1 = new Color(255, 255, 255);//콘솔에서 즉시 255 255 255 출력이 됨. 클래스에서는 클래스를 선언한 중괄호 내에..

생성자 함수 정의하기 생성자 함수의 선언은 함수의 이름이 대문자로 시작한다. 이는 객체를 만들게 해주는 함수다. function Color(r,g,b){ this.r = r; this.g =g; this.b =b; console.log(this); } 생성자 함수 생성이 되었다. 그러나 여기서 콘솔로 console.log(Color(10,20,30))를 입력할 경우 값이 할당되지 않은 undifined가 출력된다. 왜 그럴까? 함수 안에 console.log(this)를 추가해 보았다. function Color(r,g,b){ this.r = r; this.g =g; this.b =b; console.log(this); } 콘솔의 결과(this)에선 window.runnerWindow.proxyConso..

프로그램을 개발하다보면 프로그램의 크기가 커짐에 따라 개발이나 유지보수를 위해 소스 파일을 여러 개로 나눠야 할 수도 있다. 또한, 한 번 정의해서 사용한 편리한 함수를 다른 프로그램에서 또다시 정의하지 않고 곧바로 사용하고 싶어질 수도 있다. 이를 위해서 javascript를 export와 import를 통해 이용할 수 있다. 1. person.js const person = { name: "홍길동", }; export default person; default 키워드를 붙여 person 객체를 내보낸다.이 객체 person은 import로 가져올 수 있다. 2. ex.js export const clean = () => { console.log("clean"); }; export const baseD..

.find() 현재 객체집합에서 셀렉터와 일치하는 요소들을 리턴한다 .parent() 현재 객체집합의 직계 부모요소를 리턴한다 .parents() 현재 객체집합의 모든 부모요소를 리턴한다 .children() 현재 객체집합의 모든 자식요소를 리턴한다 .siblings() 현재 객체집합의 모든 이웃요소를 리턴한다(자기 제외) .next() 현재 요소의 다음 이웃요소를 리턴한다 .nextAll() 현재 요소의 다음 이웃요소를 모두 리턴한다 .prev() 현재 요소의 이전 이웃요소를 리턴한다 .prevAll() 현재 요소의 이전 이웃 요소들을 모두 리턴한다 사용방법 $('선택자').dom메서드('찾을대상') 할아버지 큰아버지 영식이 영남이 영낙이 영순이 단락1 단락2 작은아버지 영민이 영만이 확인 $('but..