리팩토링(Refactoring) 공장으로 다시 보낸다. 개선한다. 코딩을 하다보면 코드가 비효율적으로 작성된다. 그 때 코드의 효율성, 가독성을 높여서 유지보수 하기 편리하게 만들고 중복된 코드를 낮추는 방향으로 코드를 다시 개선하는 작업을 리팩토링이라고 한다. 리팩토링을 잘해야 복잡한 프로그램을 만들 때 좋은 프로그램으로 만들 수 있다. 조건문 리팩토링 문제점 1. 버튼을 추가로 넣을 때마다 ID값을 새로 만들어줘야 한다. 2. document.querySelector('body')가 중복으로 사용된다. 리팩토링 1. 자기자신을 가르키는 키워드인 this를 사용한다. document.querySelector('#night_day') 부분을 this로 수정하고 #night_day를 삭제. 2. 변수를 사..
프로그래밍언어
조건문 하나의 프로그램의 여러 실행 경로 중에서 조건에 따라 하나의 경로를 선택하기 위한 문장으로 조건에 따라서 다른 순서대로 기능들이 실현된다. if문, if-else문 주어진 조건식의 참과 거짓에 따라 2개의 실행 경로 중 하나를 선택. if(boolean타입 조건식){ 문장(들); } else{ 문장(들);} IF-true IF-false switch문 하나의 표현식을 판단하여 다중 선택이 가능한 구조를 제공. 각 case문의 값과 비교해 일치하는 문장을 실행. switch(표현식){ case 값1 : 문장(들); break; case 값n : 문장(들); break; default : 문장(들) } 조건문으로 주/야간 모드 버튼 통합하기 선택자의 value값을 night로 변경 document.q..
이벤트(event) 이벤트(event) "마우스 버튼을 클릭하는 경우", "키보드를 누르는 경우" 등 어떤 특정한 사건이나 동작을 의미. 이벤트 핸들러(event handler) 이벤트가 발생 할 때 마다 적당한 처리가 이루어지기 위해 이벤트 핸들러가 필요하다. 이벤트에 대응하는 처리 내용을 이벤트 핸들러로 작성하고 등록하면 이벤트가 발생 시 자동으로 등록 된 이벤트 핸들러가 수행된다. 이벤트 이름 앞에 on을 붙여 표기하며, HTML 태그의 한 속성으로 사용된다. 형식 :
변수(variable) 데이터를 저장하는 공간 데이터를 저장할 때 쓰이는 '이름이 붙은 저장소' 변수 선언 let 키워드를 사용해 변수를 생성 let 변수명; 변수안에 데이터 할당 할당 연산자 = 사용 변수명 = '데이터값' 한 줄에 여러 변수 선언 가능 : let 변수1 = 값1, 변수2 = 값2, 변수3 = 값3; let 을 사용할 경우 변수 선언은 한 번만 가능(여러 번 선언시 에러 발생) use strict 없이 할당하면 let을 사용해서 변수선을 하지 않고, 단순 할당만으로 변수가 생성 됨 변수 명명 규칙 식별자(identifier)란 변수나 함수의 이름을 사용하기 위해 프로그래머가 만든 단어로 규칙이 있다. 이름의 첫 글자는 반드사 문자나, '_', '$'로 시작해야 하고 숫자로 시작 할 수 ..
코드 구조 문(statement) syntax structure, command 의미 코드엔 원하는 만큼 문을 작성 가능 가독성을 높이기 위해 서로 다른 줄에 작성 세미클론(semicolon) 서로 다른 문은 세미클론으로 구분하지만 생략 가능 줄 바꿈이 있으면 암시적 세미클론으로 해석 : 세미클론 자동 삽입 됨 세미클론 자동 삽입이 작동하지 않는 상황 도 있음 : 대괄호 앞에서는 줄바꿈을 세미클론으로 해석하지 않음 alert('에러 발생!') //세미클론을 붙이지 않으면 다음 문장 에러발생 [1,3].forEach(alert) 주석(comment) // 한 줄짜리 주석 이 주석을 만나면 그 줄은 다 주석처리 단축키 Ctrl + / (Mac : Cmd + /) /* */ 여러 줄 주석 /*를 만나면 */ ..
자바스크립트의 선언 1. 내부 스크립트 방식 : script 태그 2. 외부 스크립트 방식 : 외부파일(*.js) 불러오기 경로는 절대경로 현재 페이지에서의 상대경로 모두 사용 가능 URL 주소를 속성값으로 사용가능 한 페이지에서 복수의 스크립트 태그 사용 가능 단, src 속성을 사용할 경우 내부 스크립트는 사용 불가 3. 인라인 스크립트 방식 : 이벤트 속성값으로 JS코드 삽입하기 이벤트란? 웹브라우저 위에서 일어나는 일들을 이벤트라고 함 이벤트가 일어 날 때 속성을 실행하게 하는 것으로 on으로 시작하는 여러가지 이벤트가 존재함 이벤트 뒤에 속성값으로는 반드시 JS 코드를 사용해야 함 자바스크립트 개발 통합 개발 환경 (Integrated Development Environment, IDE) 프로젝..
JavaScript란?라이브스크립트 확장시킨 것넷스케이프사(라이브스크립트 만듦), 선 마이크로시스템사(자바 만듦)의 공동 프로젝트로 탄생웹페이지에 생동감을 붙여넣기 위해 탄생동적 웹페이지 : 사용자와 상호작용할 수 있도록 기능 추가해, HTML이 담고 있는 정보들을 움직이게 만들어 준다엔진(브라우저 일 경우 내장 엔진)이 스크립트 읽음 => 스크립트를 기계어로 전환 => 기계어 전환된 코드 실행JavaScript로 하는 일웹의 요소 제어 : 메뉴바, 탭화면 처럼 같은 공간에서 다른 콘텐츠를 보여줄 수 있다. 로그인, 회원가입시 유효성검사를 할 수 있다.웹 애플리케이션 : 지도길찾기서비스, 정보시각화 등 자바스크립트로 구현해서 동작하는 웹 사이트를 만들 수 있다.다양한 라이브러리 : 프레임워크 - Reac..
숫자 2개의 입력을 받고 2개를 더한 값을 출력하는 프로그램 사용하는 함수 - scanf(), printf() /* 홍정모의 따라하며 배우는 C언어 간단한 입출력 프로그램 만들기 */ #include int main() { int i = 0, j = 0, sum = 0; // 변수는 무조건 초기화하는것을 권장 printf("Input two integers\n"); scanf("%d%d", &i, &j); sum = i + j; printf("Your numbers are %d and %d\n", i, j); printf("%d \+ %d = %d\n", i, j, sum); return 0; } 원을 입력 받으면 달러로 변환해서 출력하는 프로그램 사용하는 함수 - scanf(), printf() /* ..
CSS코드의 재사용 코드 중복의 제거가 필요한 이유 웹페이지마다 동일한 CSS코드를 하나하나 붙여넣고 수정하려면 오래 걸린다. 웹페이지마다 중복 된 태그를 제거해서 관리하는 것이 효율적이다. CSS 코드 중복 된 부분 제거하는 방법(CSS 링크코드) 1. style.css 파일 만들어서 중복된 스타일 코드 붙여 넣기. 2. html파일에 스타일태그 대신 링크코드 넣기. 3. 링크코드를 추가한 HTML파일마다 css문법이 적용되어있다. 코드를 재사용하는 것이 편한 이유 html 코드창의 깔끔해져 가독성이 올라간다. css코드 수정시 한 번만 수정하면 전체페이지에 적용되어 유지보수가 편해진다. 새로운 웹페이지에도 이미 만들어 놓은 css코드를 재사용하기 쉽다. html파일안에 css 직접 놓는 것보다 훨씬 ..
반응형 디자인(반응형 웹, Responsive Wed) 화면의 크기를 조절하면 그 크기에 따라서 웹페이지의 각 요소들이 반응해서 최적화 된 모양으로 바뀌게 하는 것. 수많은 형태의 화면에서 동작해야하는 것이 초기 웹의 숙제였고 현재의 해결책이 반응형 디자인이다. Media query 소개 반응형 웹을 만드는 문법. 화면의 크기, 특성에 따라 어떠한 조건을 만족할 때만 css내용이 동작하도록 하는 것. - 최소너비 min-width:000px (screen width > 000px) - 최대너비 max-width:000px (screen width < 000px) - 현재 화면너비 알아보는 법 : 페이지 우클릭 - 검사(단축키 : Ctrl + Shift + I) - 화면 오른쪽 위에 크기표시 CSS CSS..
