성준이의 공부블로그

Do it! Node.js 프로그래밍 입문 공부단 1일차 입니다. 모듈이란? 프로그램을 만들 때에는 최대한 작은 기능 단위로 쪼개서 각 기능을 하나씩 해결하는 방식을 가장 많이 사용합니다. 이렇게 기능별로 만들어 놓은 함수를 모듈이라고 합니다. CommonJS 모듈 시스템과 ES모듈 시스템 require()를 통해 모듈을 가져오는 방식을 CommonJS 모듈 시스템이고 import 변수/함수명 from '모듈파일' 형태로 가져오는 방식이 ES모듈 시스템입니다. 하위 버전과의 호환을 위해 CommonJS 모듈을 사용할 수 있고 최신 문법이나 타입스크립트를 사용한다면 ES모듈 시스템을 사용합니다. // 모듈 만들고 내보내기 const user1 = "Jun" const user2 = "Lim" const u..

Do it! Node.js 프로그래밍 입문 공부단 2일차 입니다. 자바스크립트 기초 문법 템플릿 리터럴 function greeting(name) { // name: 매개변수 console.log(`${name}님 안녕하세요`) // 템플릿 리터럴 : `` } greeting("Jun") // "Jun" : 인수 기본 함수 function 함수명 { ... } function 함수명(매개변수) { ... } 인수(아규먼트) : 함수를 호출할 때 넘겨주는 변수 값 매개변수 : 함수를 선언할 때의 변수 인자 : 매개변수 + 인수 함수의 표현식 const hello = (name) => { console.log(`${name}님 안녕하세요`) } hello("Jun") 함수를 변수에 할당해서 식처럼 사용하는 ..

Do it! Node.js 프로그래밍 입문 공부단 1일차 입니다. 백엔드 개발 인터넷에서 정보를 주고받을 때 정보를 요청하는 컴퓨터를 클라이언트, 정보를 제공하는 컴퓨터를 서버라고 합니다. 서버를 만든다는 것은 서버에서 실행할 프로그램을 만든다는 의미입니다. 서버 쪽을 개발하는 것을 백엔드 개발이라고 합니다. HTTP프로토콜 클라이언트로부터 주문 정보를 받아 서버로 넘기거나 주문에 성공했다고 서버에서 클라이언트 쪽으로 인터넷을 통해 알려주는데 이때 미리 약속된 규칙을 따르는데 이것을 HTTP프로토콜이라고 합니다. 노드 vscode 설치링크 https://seong-jun.tistory.com/entry/Visual-Studio-Code-%EB%8B%A4%EC%9A%B4%EB%B0%A9%EB%B2%95 V..

공부단 9일차 입니다. 브라우저 객체 모델 웹 브라우저 전제를 객체로 관리하는 것입니다. 브라우저 창이 열리면 가장 먼제 window객체가 생성이 되고 하위에 각 요소에 해당하는 객체들이 만들어 집니다. 자주 사용하는 브라우저 내장 객체 객체 설명 window 브라우저 창이 열릴 때마다 하나씩 만들어지는 객체입니다. 브라우저 창 안에 존재하는 모든 요소의 최상위 객체입니다. document 태그를 만나면 만들어지는 객체입니다. HTML 문서 정보를 가지고 있습니다. history 현재 창에서 사용자의 방문 기록을 저장하고 있는 객체입니다. location 현재 페이지에 대한 url 정보를 가지고 있는 객체입니다. navigator 현재 사용 중인 웹 브라우저 정보를 가지고 있는 객체입니다. screen ..

공부단 8일차 입니다. 폼 요소에 접근하는 방법 id 혹은 class 값을 사용해 폼 요소에 접근하기 document.querySelector("#idValue") document.querySelector(".classValue") name 값을 사용해 폼 요소에 접근하기 // form의 name값은 ship // ex) // 방법 1 document.ship.shippingName // 방법 2 document.forms["ship"].elements["shippingName"] // 해당 필드의 값을 알아내려면 document.ship.shippingName.value 폼 배열을 사용해서 폼 요소에 접근하기 document의 속성 중 forms 속성은 문서 안에 있는 태그를 모두 가져와 배열 형태로 ..

공부단 7일차-2입니다. HTML 태그 속성을 가져오거나 수정하는 함수 - getAttribute(), setAttribute() 먼저 수정하려면 앞에서 배운 접근하는 함수들을 사용해서 접근 후 수정을 하면 됩니다. // 예시 document.querySelector("접근하려는 요소").getAttribute("속성명") // 해당 속성에 접근 document.querySelector("접근하려는 요소").setAttribute("속성명", "속성값") DOM에서 이벤트 처리하기 이벤트를 처리하려면 이벤트 헨들러가 필요합니다. 이벤트 헨들러란 이벤트와 이벤트 처리 함수를 연결해 주는 것입니다. 이벤트 헨들러는 이벤트 이름 앞에 on을 붙여서 사용합니다. (예를 들어 click 이벤트면 onclick="..

공부단 7일차-1입니다. 문서 객체 모델이란? DOM은 Document Object Model의 줄임말 입니다. DOM의 정의는 웹 문서의 모든 요소를 자바스크립트를 이용하여 조작할 수 있도록 객체를 사용해 문서를 해석하는 방법입니다. 즉, 웹 문서의 텍스트 / 이미지 / 표 등 모든 요소는 모두 객체라는 것 입니다. document document는 웹 문서 자체를 가리키는 DOM 요소 중 하나입니다. document는 웹 문서 자체를 가리키기 때문에 웹 문서의 요소에 접근해서 수정을 할 수 있습니다. DOM 트리 웹 문서의 태그는 요소 노드로 표현합니다. 태그가 품고있는 텍스트는 해당 요소 노드의 자식 노드인 텍스트 노드로 표현합니다. 태그의 속성은 모두 해당 요소 노드의 자식 노드인 속성 노드로 표..

공부단 6일차 입니다. Array 객체 여러 개의 항목을 하나의 변수에 저장하려면 배열을 사용해야 합니다. 자바스크립트에서는 배열을 쉽게 만들고 다를 수 있도록 내장 객체에 Array객체가 만들어져 있습니다. 인스턴스 만들기 var arr = new Array() // 초깃값이 있는 경우 var seasons = ["봄", "여름", "가을", "겨울"] // 리터럴을 사용한 배열 var seasons = new Array("봄", "여름", "가을", "겨울") // Array 객체를 사용한 배열 배열에서 for문 사용 배열에 몇 개의 요소가 있는지 확인하려면 Array객체의 length속성을 사용합니다. for(var i = 0; i < seasons.length; i++) { console.log(..

공부단 5일차 입니다. 객체란? 객체는 복합 자료형입니다. 복합자료형이라고 하는 이유는 객체 안에 숫자, 문자열 등 여러 가지 자료형이 포함되기 때문입니다. 객체는 자료형이기 때문에 자바스크립트에서 객체는 자료를 저장하고 처리하는 기본 단위입니다. 객체의 구조 var book = { title: "자바스크립트", // 제목 author: "홍길동", // 저자 pages: 500, // 쪽수 price: 15000 // 가격 } 객체의 종류 내장 객체 Date, Number, Boolean, Array, Math 등 입니다. 문서 객체 모델(DOM) 웹 문서 자체를 담는 Document 객체, 웹 문서 안의 이미지를 관리하는 Image 객체 등이 있습니다. 브라우저 객체 모델 사용중인 브라우저 종류나 버..

공부단 4일차 입니다. 함수 자주 실행해야 하는 기능에 포함된 명령이 여러 가지일 때 그 명령을 한 번에 실행할 수 있게 한 덩어리로 묶는 것을 함수라고 합니다. 이전에 했던 3의 배수 구하는 코드를 함수로 만들기 function multi3() { // 함수 선언 var num = prompt("숫자를 입력하세요") // document.write(typeof(num)) // string if(num != null) { num = parseInt(num) if(num % 3 == 0) document.write("3의 배수") else document.write("3의 배수가 아님") } else { alert("취소") } } 3의 배수 구하기 onclick은 버튼을 클릭했을 때 실행대상인 함수를 알..