모카의 촉촉한 개발 로그

HTML을 이용해서 화면에 UI를 표현하기 브라우저에서 UI를 볼 수 있는 것은 브라우저가 HTML 을 분석해서 그 결과로 보여주는 것이다. 이 HTML은 요소(Element)들로 구성되어 있다. 돔 이란? (Document Object Model) - 돔은 메모리에 웹 페이지 문서 구조를 트리구조로 표현해서 웹 브라우저가 HTML 페이지를 인식하게 해준다. - 위에서 보는 웹 페이지를 이루는 요소들을 자바스크립트가 이용할 수 있게끔 브라우저가 트리구조로 만든 객체 모델을 의미한다. window.document. //Document Object Model(DOM) 돔 조작 위에 보이는 DOM 트리를 DOM 에서 제공해주는 API를 이용해서 조작할 수 있다. 이 API를 이용해서 DOM 구조에 접근하거나 ..

window Object window 객체는 브라우저에 의해 자동으로 생성되며 웹 브라우저의 창(window)을 나타낸다. 또한 window 은 브라우저의 객체이지 javascript의 객체가 아니다. 1. 브라우저의 창에 대한 정보를 알 수 있고, 이 창을 제어하고 할 수도 있다. 2. 또한 var 키워드로 변수를 선언하거나 함수를 선언하면 이 window 객체의 프로퍼티가 된다. 대표적인 window Object 사용 예시 // Alert alert('Hello World!'); // Prompt const input = prompt(); alert(input); // Confirm if (confirm('Yes or No')) { console.log('YES'); } else { console.l..

자바스크립트는 싱글스레드이지만 논블로킹으로 동작 자바스크립트는 비동기 처럼 사용할 수 있지만, 브라우저api나 Node api(settimeout..)의 도움을 받아서 비동기처럼 사용할 수 있다. 동기 방식 자바스크립트는 코드가 작성된 순서대로 작업을 처리한다. 이전 작업이 진행 중일 떄는 다음 작업을 수행하지 않고 기다린다. 먼저 작성된 코드를 먼저 다 실행하고 나서 뒤에 작성된 코드를 실행한다. 동기적 처리의 단점은 하나의 작업이 너무 오래 걸릴 시, 모든 작업이 오래 걸리는 하나의 작업이 종료되기 전까지 올 스탑 되기 때문에, 전반적인 흐름이 느려진다. ex) 웹사이트에서 버튼 하나를 눌렀지만 이전 다른 작업이 다 처리 되지 않아 30초 후에 버튼이 클리이 되면 속이 터진다. 멀티 쓰레드 코드를 실..

비구조할당 1) 객체 비구조화 할당 const person = { name: "John Doe", age: 30, address: { city: "Seoul", country: "South Korea", }, }; // 객체 비구조화 할당을 사용하여 person 객체의 속성을 변수에 할당합니다. const { name, age } = person; // 변수 사용 console.log(name); // "John Doe" console.log(age); // 30 // 객체 안의 객체 비구조화 할당 const { address: { city } } = person; // 변수 사용 console.log(city); // "Seoul" // 별칭 사용 const { name: firstName } = pe..

함수 선언식 function getArea(width,height) { let area=width*height; return area; } 함수 외부에서 선언된 변수는 함수 내부에서 접근이 가능하지만 함수 내부에서 선언된 변수는 함수 외부에서 접근이 불가능하다. 함수표현식 let hello =function() { return "안녕하세요~~" } const helloText= hello(); console.log(helloText); console.log(hello()); 함수도 '값' 이다. 즉, 이름을 지정 안하고 바로 값에 대입해서 사용할 수 있다. 화살표 함수 let hello =() => { return "안녕하세요~~" } const helloText= hello(); console.log(..

for : 코드를 여러번 반복한다. for (let i = 0; i < 10; i++) { if (i === 3) { console.log('It is 3'); continue; } if( i === 5) { console.log('5 Stop the loop'); break; } console.log('Number ' + i); } for (statement 1; statement 2; statement 3) statement 1 : 루프가 시작되기전 실행 statement 2 : 루프 실행을 위한 조건 statement 3 : 루프 실행된 후 실행 for /in : 객체의 속성(property)을 따라 반복한다. const user = { name: 'Han', province: '경기도', city..

원시 타입에 대한 값을 저장하기 위해 Call Stak 메모리 공간을 사용하지만 참조 타입의 경우 데이터 타입이 정해지지 않고 Heap이라는 별도의 메모리 공간을 사용한다. 참조타입은 Call Stack에 개체 및 배열 값이 아닌 Heap 메모리 참조 ID를 값으로 저장한다. 자바스크립트는 동적 타입이다. let foo=42 /number foo='bar' // string foo=true // boolean JavaScript는 느슨한 타입(loosely typed)의 동적(dynamic) 언어이다. JavaScript의 변수는 어떤 특정 타입과 연결되지 않으며, 모든 타입의 값으로 할당 (및 재할당) 가능하다. - 같은 변수가 여러개의 타입을 가질 수 있다. - 타입을 명시하지 않아도 된다. - 대부..

1 ) 변수 선언 방식 var : 중복 선언과 재할당이 가능하다. - 아래와 같이 중복 선언과 재할당이 가능하며 마지막에 할당된 값이 변수에 저장된다. - 자율성은 생기지만 소스 코드가 복잡해질 경우 기존 선언해둔 변수를 잊고 다시 선언하거나 재할당을 해서 어떤 부분에서 값이 변경되는지 파악하기 힘들어 지게 된다. 그래서 let과 const가 생긴 이후 var는 사용하지 않는다. var greeting = 'hello'; console.log(greeting); var greeting = 'hi'; console.log(greeting); greeting = 'how are you?'; console.log(greeting); let(ES6) : 중복 선언은 불가하며, 재할당은 가능하다. let gree..

2021년도 최대 프로그래밍 커뮤니티인 Stack Overflow에서 가장 인기 있는 프로그래밍 언어로 1등으로 선정되었다. 자바스크립트는 HTML과 CSS와 더불어 웹을 개발하는 3가지 언어 중 하나이다. 각 언어의 역활을 간단하게 정리해 보자 1. HTML : 요소들의 배치와 내용을 기술 2. CSS : 색, 크기, 애니메이션 등을 정의하는 스타일리을 위한 언어 3. JavaScript : 웹 사이트에 활력을 부여하는 언어 자바스크립트 엔진(JIT Compiliation) 자바스크립트는 자바스크립트 엔진이 실행을 하게 되며 주로 웹 브라우저(사바리,엣지,크롬,파이어폭스)등에 포함이 되어 있다. (가장 대표적으로 구글 크롬의 V8엔진이 있다.) 즉, 자바스크립트 엔진을 내장한 웹브라우저는 자바스크립트가..

sudo git fetch —all // 원격 저장소에서 모든 변경 사항을 가져오기sudo git reset —hard origin/main //로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정sudo git pull //원격 저장소의 변경 사항을 로컬 저장소로 가져오고 병합주로 다른 개발자가 main 브랜치에 변경 사항을 커밋하면 sudo git fetch --all을 사용하여 해당 변경 사항을 로컬 저장소로 가져온다.그런 다음 sudo git reset --hard origin/main을 사용하여 로컬 저장소의 HEAD를 원격 저장소의 main 브랜치로 재설정 한다.이렇게 하면 로컬 저장소의 변경 사항이 모두 삭제되고 원격 저장소의 main 브랜치의 변경 사항만 남게 된다. 마지..