Dev study and notes

바닐라 JS로 크롬 앱 만들기 8장 강좌들 노마드코더 무료강좌​노마드코더 바닐라JS 자바스크립트 강좌 #8.0 Geolocation 요약:1. Geolocation API를 사용하면 사용자의 현재 위치 정보를 가져올 수 있습니다.2. navigator.geolocation.getCurrentPosition 메서드를 통해 위도와 경도를 얻는 방법을 설명합니다.3. 위치 정보는 콜백 함수로 처리되며, 성공 및 에러를 처리하는 구조를 배우게 됩니다.​index.html 과 weather.js 생성하면됩니다.​*weather.js 소스코드function onGeoOk(position) {const lat = position.coords.latitude;const lng = position.coords.longi..

바닐라 JS로 크롬 앱 만들기 7장 강좌들 노마드코더 무료강좌​실질적인 TODO LIST를 생성하게 됩니다.​*JSON.stringify()JavaScript 객체를 JSON 문자열로 변환하는 함수입니다.​*간단예시 코드const obj = { name: "Julia", age: 99, city: "London" };const jsonString = JSON.stringify(obj);console.log(jsonString); // 출력: '{"name":"Julia","age":99,"city":"London"}'*JSON.parse()JSON 문자열을 javaScript 객체로 변환하는 함수입니다.const jsonString = '{"name":"Julia","age":99,"city":"Lond..

바닐라 JS로 크롬 앱 만들기 5장 강좌들 노마드코더 무료강좌이번 강좌에서는 시간, 날짜 함수와 웹페이지 로딩시, 실시간, 현재시간을 출력하는 실습을 진행합니다.코드 또한 정말 쉽습니다.주요 코드내 함수를 정리해보았습니다.*Date()현재 날짜와 시간을 객체로 변환*setInterval()지정된 시간 간격 마다 특정코드를 반복 실행하는 타이머 함수*setTimeout()지정된 시간이 지난 후 한번 특정 코드를 실행하는 타이머 함수*padStart()문자열의 길이가 부족할 경우, 앞에 지정된 문자를 추가해 원하는 길이로 맞춤-예시) "5".padStart(2, "0") → "05" 단순합니다.끝!

바닐라 JS로 크롬 앱 만들기 4장 강좌들 노마드코더 무료강좌이번 4강 강좌에서는 html과 자바스트립트 소스를 이용하여 간단한 웹페이지를 만들어보게 됩니다.로그인 기능 구현 전의 실습으로 아이디 입력 후 버튼을 눌렀을 때 greeting(인사) 문구가 화면에 나타나도록 합니다.아주 간단한 html 코드와 js 코드를 사용하게 됩니다.기본적인 소스코드 작성 및 약간의 유용한 코드 스킬을 배울 수 있게 됩니다.​이번 포스팅엔 4장 강좌들에 대한 최종 소스코드를 남깁니다.포스팅 내용은 각 파일 명 그리고 소스코드로 대체합니다.html Log In jsconst loginForm = document.querySelector("#login-form");con..

바닐라 JS로 크롬 앱 만들기 3장 강좌들 노마드코더 무료강좌​안녕하세요 데브런치입니다.노마트코더 바닐라js로 크롬앱 만들기 3장은 자바스크립트를 통해 웹페이지의 이벤트 관련 강좌입니다.​클릭 이벤트 등 다양한 이벤트 발생시 여러 기능을 구현하게 됩니다.​#3.0 The Document Object (08:14)#3.1 HTML in Javascript (10:31)#3.2 Searching For Elements (12:23)#3.3 Events (12:38)#3.4 Events part Two (08:31)#3.5 More Events (09:48)#3.6 CSS in Javascript (06:51)#3.7 CSS in Javascript part Two (09:34)#3.8 CSS in Javas..

바닐라 JS로 크롬 앱 만들기 2장 강좌들 노마드코더 무료강좌안녕하세요. 데브런치입니다.#2.3 const and let (09:45)const는 상수를 선언하는데 사용합니다. 선언 시 반드시 값을 초기화 해야하며, 한번 선언된 값은 변경할수 없습니다. 재 선언이 불가능 합니다.let은 블록 범위 변수를 선언하는데 사용되며, 선언 시 값을 초기화 할수 잇고 선언후 나중에 값을 선언할수 있습니다. 선안된 변수의 값을 변경할수 있습니다. 재선언이 가능하며 재선언된 값으로 유지됩니다. 이전 값은 유지되지 않습니다.이어서 자바스크립트의 기본 강좌가 이어집니다.2장에 대한 나머지 목록을 남겨봅니다. #2.4 Booleans (07:22)#2.5 Arrays (13:53)#2.6 Objects (13:05)#2.7..

자바스크립트 구문 JavaScript syntax자바스크립크 코드 작업시 사용하는 구문, 기호들을 정리해보았습니다.잘 익혀서 코드 작성시 활용하면 되겠습니다. ​자바스크립트 구문이름통사론사용 방법중괄호{ }중괄호는 JavaScript의 함수 및 기타 코드 블록을 묶습니다. 왼쪽 중괄호는 함수나 코드 블록을 열고 오른쪽 중괄호는 닫습니다. 예를 들어, if 문은 여는 중괄호와 닫는 중괄호를 사용하여 코드를 묶습니다.if (a == b) {warning ("a and b are the same")}등호=등호 또는 할당 연산자는 변수에 어떤 데이터가 포함되어야 하는지 알려줍니다. 예를 들어, myVar = 3은 myVar 변수를 3과 동일하게 만듭니다.이중 등호==이중 등호 또는 등호 연산자는 두 값이 동일한..

자바스크립트 이벤트 리스너와 이벤트 핸들러 차이 javascripts event listener handler  이벤트 리스너 (EVENT LISTENER)-이벤트 리스너는 특정 요소에서 발생하는 이벤트를 감지하고, 이벤트 핸들러를 호출하는 객체입니다.-이벤트가 감지되면 이벤트 핸들러를 실행합니다.이벤트 핸들러 (EVENT HANDLER)-이벤트 핸들러는 이벤트가 발생했을때 실행되는 함수, 기능을 의미합니다.-HTML 요소에 직접적으로 이벤트 핸들러를 추가할수 있습니다.html내 속성에 'onclick'(클릭), 'onmouseover'(마우스오버), 'onscroll'(스크롤) 등을 이용하여 이벤트 핸들러를 지정할수 있습니다.-간단한 기능을 구현하는데 편리합니다-여러 이벤트와 기능을 다루는 경우, 코드..

자바스크립트 용어 해설 정리 Glossary- JavaScript Programming for Web Applications - CAD101-12​​*국문Glossary- JavaScript Programming for Web Applications웹 애플리케이션을 위한 자바스크립트 프로그래밍Term정의AJAXJavaScript 및 XML을 통한 비동기 서버 호출 이상의 기능을 포함하는 "비동기 JavaScript 및 XML"입니다. 프로그래밍 언어나 기술이 아니라 프로그래밍 개념입니다. Ajax는 HTML, JavaScript, Cascading 스타일 시트를 통해 더욱 풍부한 대화형 웹 애플리케이션을 제공하고 문서 개체 모델을 통해 웹 페이지를 수정하는 일련의 기술을 나타냅니다. 요즘에는 XML 대신..

백엔드 개발을 위한 공통 언어 Common languages for back-end development 안녕하세요 데브런치입니다. ​ 잊고 있던 백엔드 지식을 다시 공부하고 있는데요. 블로그 포스팅을 통해 기록으로 남겨봅니다. 백엔드 개발을 위한 공통 언어 (Common languages for back-end development)로 자바스크립트, 파이썬, 자바 등의 프로그래밍 언어를 사용하는데요. 각 언어에 대한 간단한 요약을 적어보았습니다. *국문 (번역) JavaScript 는 개발자가 서버측 스크립트를 작성할 수 있게 해주는 인기 있는 백엔드 프로그래밍 언어입니다. 동적 웹 페이지와 웹 애플리케이션을 만들고, 양식에서 데이터를 수집하고, 데이터베이스 작업을 수행할 수 있습니다. ​Python ..