개발자를 희망하는 초보의 자기개발 이야기

오늘의 범위: 바닐라JS로 크롬앱 만들기: (2.13 - 3.5) + 3.6 - 3.8 CSS in Javascript const h1 = document.querySelecor("div.hello:first-child h1"); // 조정할 element function handleTitleClick(){ const currenColor = h1.style.color; let newColor; if(currenColor === “blue”){ newColor = “tomato”; }else{ newColor = “blue”; } h1.style.color = newColor; } // event에 대한 반응 window.addEventListener(“click”, handTitleClick); // ..

오늘의 범위: 바닐라JS로 크롬앱 만들기: 3.0 - 3.5 The Document Object console.dir(document) // document 객체의 모든 element를 확인할 수 있음. document가 HTML임 document.title // HTML의 title 태그에 입력한 제목이 출력됨 document.title = 'hi' // title 태그에 hi라는 데이터가 삽입되고, 상단의 탭 제목이 'hi' 로 변경됨 document.body // body에 입력된 태그 전체가 출력됨 - JavaScript를 사용하는 이유는 HTML과 상호작용하기 위해서입니다. - 콘솔에서 document를 입력하면 작성한 HTML 태그가 나타납니다. - document는 브라우저에 이미 존재하는 ..

오늘의 범위: 바닐라JS로 크롬앱 만들기: 2.7 - 2.16 Functions part One function sayHello() { console.log("Hello!!"); } sayHello(); // Hello! sayHello(); // Hello! - function은 반복해서 사용할 수 있는 코드 조각입니다. - 어떤 코드를 반복해서 실행해야 한다면 캡슐화해서 여러번 실행할 수 있게 해줍니다. - function 함수명() { 실행할 코드 } 순으로 작성합니다. - 함수의 실행은 함수명() 로 하고 ()괄호 안에 function으로 보낼 데이터를 입력하는 경우도 있습니다. (ex. console.log에서 log도 함수) Functions part Two argument(인수) 사용하기 f..

오늘의 범위: 바닐라JS로 크롬앱 만들기: 2.1 - 2.6 기본 데이터 자료형(Basic Data Type) number(숫자) - integer(정수)와 float(실수)로 나뉩니다. - 다른 자료형이지만 정수와 실수의 연산은 자바스크립트가 자동으로 처리합니다. string(문자열) - ""(큰따옴표) 또는 ''(작은따옴표)로 감싸서 표현합니다. - 예를 들어 "hi" 와 'hi'는 같습니다. - 문자도 덧셈이 가능합니다. 'h' + 'i'는 'hi'가 됩니다. 변수(Variables) 변수의 역할 console.log(5 + 2); console.log(5 * 2); console.log(5 / 2); - 변수는 값을 저장 또는 유지하는 역할을 합니다. - 위와 같은 계산이 몇백줄이 있다면, 5를 ..

오늘의 범위: 바닐라JS로 크롬앱 만들기 1.4 - 2.0 JavaScript가 인기 있는 이유 - 1995년 12월 브렌던 아이크가 10일 정도의 기간만에 만들어낸 언어입니다. - 기존의 웹사이트는 HTML, CSS로만 이루어져 더욱 인터렉티브한 사이트를 만들어내기 위해서였습니다. - 이후 다른 좋은 언어들도 많이 생겼지만, 기존 웹사이트들이 손상될 수 있어 자바스크립트가 유지됩니다. - 그러므로 백엔드는 대체할 언어가 있지만 프론트엔드는 자바스크립트가 유일한 프로그래밍 언어입니다. JavaScript의 확장 - three.js 라이브러리를 사용하면 3D를 구현할 수 있습니다. 데이터 시각화 등이 가능합니다. - 프레임워크를 사용하면 많은 것들을 추가로 할 수 있습니다. 1) React Native :..