개발일지

프로그래밍 유형은 싱크로너스와 어싱크로너스로 유형이 두 가지로 나뉜다. 싱크로너스는 순차적으로 실행되는 것을 의미하고 어싱크로너스는 병렬적으로 동시 다발적으로 실행되는 것을 의미한다. 싱크로너스는 직관적이며 무엇이 실행되고 있는지 알 수 있지만 순차적으로 실행되기 때문에 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 출력이 됨. 클래스에서는 클래스를 선언한 중괄호 내에..

프로그램을 개발하다보면 프로그램의 크기가 커짐에 따라 개발이나 유지보수를 위해 소스 파일을 여러 개로 나눠야 할 수도 있다. 또한, 한 번 정의해서 사용한 편리한 함수를 다른 프로그램에서 또다시 정의하지 않고 곧바로 사용하고 싶어질 수도 있다. 이를 위해서 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..

createElement 객체.createElement('생성할 요소') js에서 요소를 추가한다. 초기값에 생성한 요소가 어디로 갈지 위치가 정해져있지 않기 때문에 appendChild 메서드로 생성한 요소가 이동할 위치를 정한다. appendChild : 노드를 특정 부모 노드의 자식 노드 리스트 중 마지막 자식으로 추가한다. 내용이 들어가는 요소의 경우 innerText로 정의한다. 이미지의 경우 이미지 경로인 src도 추가한다. img.src ="경로" * div 안에 버튼 100개 만들기 const contain = document.getElementById('container') for (let i = 0; i < 100; i++) { const btn = document.createEleme..

classlist js에서 html 요소에 있는 클래스를 관리하는 객체. 속성 add('클래스명') : 클래스를 추가한다. 이미 클래스가 적용되어 있더라도 더 추가한다. remove('클래스명') : 클래스를 제거한다. contains('클래스명') : 클래스 여부를 검사하고 값을 불리언 값으로 반환한다. toggle('클래스명') : 클래스 값을 토글한다. 클래스가 있다면 제거, false 하고 클래스가 없다면 추가, true 한다.