**Dynamic web project
=> Java Resources
- src : 컴파일을 할 수 있는 파일(이 디렉토리의 내용만 컴파일)
- src 디렉토리에 만든 것을 제외한 나머지는 나중에 WebContent 디렉토리로 이동됨
=> WebContent : 웹프로젝트에서 사용하는 파일
- Webcontent/WEB-INF/classes : src에서 만든 소스파일의 클래스 파일
**Media Query
=> 조건에 따라 style을 다르게 설정하는 것
=> 조건에는 디바이스 화면 크기 , 물리적인 크기등
=> 하나의 웹 애플리케이션을 구현하고 상황에 따라 콘텐츠를 다른 방법으로 보여지도록 구현하기 위해 등장
**ViewPort Meta 태그
=> 화면에 대한 옵션을 설정하는 태그
- initial-scale : 처음 페이지가 보여지는 배율
- maximum-scale : 확대할 때 최대 배율
- user-scalable : 유저가 확대 축소를 할 수 있게 할 것인지
**반응형 웹 디자인
=> 창의 크기에 상관없이 콘텐츠를 사용할 수 있도록 하는 것
=> 미디어 쿼리와 유동형 레이아웃을 이용해서 생성
- 유동형 레이아웃 : 컨텐츠의 크기를 절대단위가 아닌 상대 단위를 사용
- 미디어 쿼리 : 디바이스나 브라우저의 크기를 이용하여 다른 디자인을 적용
=> 한계 : 반응형 웹 디자인은 스마트 폰 등의 작은 디바이스에서 동일 컨텐츠를 별도페이지 없이 지원하기위해 제작
- 스마트 폰에서는 보기만 하는 것이 아니라 스마트 폰 만의 별도의 기능을 사용하기 때문에 별도의 웹 사이트를 구현하여 지원하거나 native app등을 생성하여 지원을 하기도 함
=> 유동형 레이아웃 사용시 주의점 : 브라우저 창이 너무 작거나 커지면 컨텐츠 내용이 정확히 보이지 않을 수 있음
- max-width, max-height등의 속성을 사용하여 크기에 제한을 둘 필요가 있음
**CSS
=> 스타일 시트 적용 방법
=> 스타일 시트 작성 방법
=> Media Query
=> Viewport
=> 절대 단위와 상대 단위의 차이점과 사용 용도
=> 반응형 웹 디자인
=> 선택자
=> 속성
**JavaScript
=> 웹 브라우저가 해석해서 실행하는 스크립트 언어
=> HTML5 API의 기반언어
1. 특징
=> 대소문자 구별
=> 동적 바인딩(Dynamic Binding) : 실행될 때 값을 결정
=> HTML에 혼합하여 사용
=> 확장자는 일반적으로 js
2. 라이브러리나 프레임 워크
=> TypeScript : JavaScript에 객체 지향의 개념을 도입한 언어
=> jQuery : Cross Browsing을 쉽게 구현하도록 해주는 라이브러리
- jQueryUI.js(UI처리를 추가), jquerymobile.js(모바일 웹을 쉽게 개발)도 지원
- 다양한 플러그 인을 가지고 있어 웹페이지 개발에서 가장 많이 사용하는 라이브러리
=> d3js : 시각화 지원 라이브러리
=> react, vue, angular(TypeScript 사용) : MVC 구현을 위한 라이브러리
=> bootStrap : 반응형 웹 디자인
=> ionic, react-native : 스마트폰 애플리케이션 구현을 위한 라이브러리
=> node, express : 웹서버 구현을 위한 라이브러리
=> tensorflow : 머신러닝(AI - 인공지능) 라이브러리
=> Library가 많은 이유는 기본적으로 제공되는 기능들이 적어 부족 기능 보충을 위해 제작됨
3. Java와 JavaScript
1) 차이점
=> Java는 일반 애플리케이션 구현을 위한 프로그래밍 언어
=> JavaScript는 웹 브라우저 안에서 동작하는 애플리케이션 구현을 위한 프로그래밍 언어
2) 유사점
=> Java의 모든 예약어가 JavaScript의 예약어이고, Math와 Date 클래스는 Java의 것을 가져다가 JavaScript에서 구현
4. JavaScript 작성방법
1) external
=> 외부에 JavaScript 파일을 만들고 가져와서 사용
- <script src="javascript 파일의 url"></script>
2) internal
=> html파일 내부에 작성
- <script> 내용 </script>
3) inline
=> 태그 내부에 작성
- <태그 이벤트="script:내용"></태그>
=> script: 는 생략가능
4) 주의
=> 스크립트 코드는 HTML태그들을 읽으면서 수행되기 때문에 아직 만들어지지 않은 객체는 사용 불가
=> 스크립트 코드들은 한줄씩 읽으면서 수행하기 때문에 에러가 없음
- 문법에 맞지 않는 코드 작성시 해당 문장 이전까지 실행 후 멈추기도 함
=> ';'과 줄바꿈은 하나의 명령어의 종료를 의미
- 한 줄에 하나의 명령문만 작성 : ';' 생략가능
- 한 줄에 2개 이상의 명령문 작성 : 명령어 구분을 위해 ';'를 반드시 작성
=> 문자와 문자열의 구분이 없고, 작은 따옴표와 큰 따옴표가 모두 사용 가능
- 하나의 문자열에서 작은 따옴표와 큰 따옴표가 모두 사용되면 나중에 사용한 것을 먼저 닫아야 함
=> 제어문자 사용가능
- \n : 줄바꿈
- \t : 탭
- \\ : \
- \' , \"
5. 주석
- // : 한줄 주석
- /* */ : 여러줄 주석
6. 출력
=> document.write(내용) : 모아서 한꺼번에 출력
=> document.writeln(내용) : 명령문을 만날때마다 출력
- 태그를 작성하면 적용
=> alert(내용) : 대화상자에 출력
=> console.log(내용) : 브라우저의 검사창에 출력(디버깅을 위해 사용)
7. 스크립트 출력 연습
<script>
document.writeln("<h3>본문에 출력</h3>");
//팝업창을 차단하면 출력되지 않음
//모달이라서 이 창을 해결하지 않으면 다음 코드로 넘어가지 않음
alert("대화상자에 출력");
//브라우저의 콘솔에 출력 : 디버깅에 많이 사용
console.log("콘솔에 출력");
</script>8. 변수 선언과 사용
1) 변수 선언
=> var 변수명; //이렇게 만들면 지역변수(local variable - 만들어진 영역내에서만 사용 가능한 변수)가 됨
=> 변수명; //이렇게 만들어진 변수는 전역변수(global variable - 영역에 상관없이 사용 가능한 변수)가 됨
=> 변수를 만들때 자료형에 상관없이 var을 붙이는 데 이유는 자바스크립트에서는 모든 자료형이 참조형이기 때문
- 실제 자료형은 데이터 대입시 결정(동적바인딩)
- 동적 바인딩 언어는 변수 제작시 다른 자료형의 데이터도 대입이 가능
- ex) var i = 10; i = "Hello"; (가능)
=> 변수명은 영문, 숫자, 특수문자(_)를 이용하여 생성
- 숫자로 시작할 수 없고, 중간에 공백이 들어갈수 없음
2) 변수의 사용
=> 변수는 =의 왼쪽에 있을 때는 데이터를 저장할 공간을 의미, 그 외의 경우는 저장하고 있는 값
=> 출력하는 메소드에 변수이름 대입시 toString()의 결과가 리턴
- var a = 10; alert(a); //a의 내용을 출력(X) - a의 toString()의 결과를 출력(O)
=> 변수에 값을 대입하지 않고 사용하면 undefine이 출력되거나 오류가 발생
3) Literal
=> 사용자가 직접 입력하는 데이터
- Boolean : true, false
- Number : 정수와 실수
- String : 작은 따옴표나 큰 따옴표 안에 작성
- null : 가리키는 데이터가 없음
- undefined : 변수가 없다
4) 자료형 확인 연산자
=> typeof 데이터(단항연산자) : 자료형을 문자열로 리턴(연산자는 괄호를 하지 않음)
5) 배열 - 다른 언어의 LinkedList
=> 생성 : [데이터 나열] new Array(초기 개수)
=> 값을 대입 : 배열명[인덱스] = 값
=> 값을 사용 : 배열명[인덱스]
=> 배열의 데이터 개수 : length
=> toString이 재정의 되어 있어 호출시 배열요소 각각의 toString을 호출하여 [결과, 결과]... 형식으로 리턴
9. Type Casting(형변환)
1) 자동 형 변환
=> 데이터의 자료형이 자동으로 변환되는 것
=> 문자열 데이터와 숫자 데이터를 +연산을 하게되면 숫자 데이터를 문자열로 변환하여 이어붙이기를 해줌
=> 문자열로 만들어진 숫자 데이터를 * 연산하게되면 숫자로 변환하여 수행
2) 강제 형 변환
=> 데이터의 자료형을 강제로 변환하는 것
=> 문자열로 변환할 때는 toString()의 결과 사용
=> 문자열 데이터를 숫자로 변환할 때는 Number(문자열)
=> 문자열 데이터를 Boolean으로 변환할 때는 Boolean(문자열)
10. 404에러
=> 잘못된 URL 참조
=> css, js, image등의 외부 자원의 경로가 맞는 지 확인
=> 브라우저에 URL을 직접 입력한 경우에은 URL을 확인
11. Operator - 연산자
1) Operand(피연산자 - 연산에 사용하는 데이터)의 개수에 따른 분류
=> Unary(단항 - 피연산자가 1개)
=> Binary(이항 - 피연산자가 2개)
=> Thenary(삼항 - 피연산자가 3개)
2) 기능에 따른 분류
- ( ) : 연산의 우선순위를 변경하기 위한 연산
- [ ] : 배열의 크기나 인덱스를 설정하기 위한 연산자
- ! : not - Boolean 데이터에 사용하여 true와 false를 반대로 만들어 주는 연산자
- + : 양수 부호
- - : 음수 부호
- typeof : 자료형 확인 연산자
- ++ : 변수의 값을 1 증가
- -- : 변수의 값을 1 감소
=> 이 2개의 연산자는 특별히 데이터의 앞과 뒤 모두 사용 가능
=> 앞에 사용시 증감을 먼저하고, 명령문에 사용, 뒤에 사용시 명령문에 변수의 값을 사용하고 증감을 수행
=> 산술 연산자
- % : 나머지를 구해주는 연산자
- *, / : 곱셈과 나눗셈을 위한 연산자
- +, - : 덧셈과 뺄셈을 위한 연산자(문자열을 가지고 + 연산시 문자열 이어붙이기 연산 수행)
=> 비트 연산자 : 정수 데이터를 가지고 연산을 수행하는데 2진수로 변환하여 수행하고 결과를 다시 10진수로 리턴
- ~ : 1의 보수 연산자
- 부호- : 2의 보수 연산자
- & bit and : 둘다 1일때만 1, 나머지의 경우 0
- | bit or : 둘다 0일때만 0, 나머지의 경우 1
- ^ bit xor : 2개가 같으면 0, 다르면 1
=> 그래픽 프로그래밍이나 시스템 프로그래밍, 윈도우프로그래밍에서 단축키 제작시 많이 사용
- <<, >>, >>> : 비트 단위로 밀어내는 연산자
=> 비교연산자(>, >=, <, <=)
- 숫자와 문자 모두 크기 비교 가능
- 문자는 맨 앞글자부터 한글자씩 코드값을 비교하는 방식
ex) Hello > hello : false
Hello World > Hello : true
- 연산자 본연의 기능에 새로운 기능을 추가시킨 것을 연산자 오버로딩(Overloading)
=> 항등 연산자(==, ===, !=)
- == : 값만 확인하여 값이 같으면 true, 다르면 false
- === : 값과 자료형까지 확인하여 값과 자료형이 모두 같으면 true, 다르면 false
- != : 다른경우 true, 같으면 false
ex) "200" == 200 : true / "200" === 200 : false
=> 논리 AND(&&) : 2개의 데이터 모두 true인 경우 true, 하나라도 false라면 false
- 앞의 결과가 false이면 뒤의 결과를 확인하지 않음
=> 논리 OR(||) : 2개의 데이터 모두 false인 경우 false, 하나라도 true이면 true
- 앞의 결과가 true이면 뒤의 결과를 확인하지 않음
=> 삼항연산자 : 표현식?참일때 내용: 거짓일때 내용
- = : 왼쪽의 변수에 오른쪽의 결과를 대입
- += : 왼쪽의 변수에 왼쪽의 변수에 저장된 값과 오른쪽의 값을 더해서 대입
=> new : 생성자를 호출해서 인스턴스를 생성하고 그 참조를 리턴하는 연산자
=> this : 생성자나 메소드에서 인스턴스 자신을 가리키는 참조 연산자
=> typeof : 인스턴스의 자료형을 문자열로 리턴해주는 연산자
=> delete : 변수가 저장하고 있는 영역을 삭제해버리는 연산자
- 자바스크립트에서는 배열의 요소도 삭제가 가능
- 자바스크립트의 배열은 Linked List
- 지워지면 undefined가 됨
=> instance of
- 인스턴스 instance of 클래스 : 인스턴스가 클래스로 부터 만들어졌는지를 리턴
=> in : 배열이나 객체의 속성을 순서대로 접근하기 위한 연산자
- for(임시변수 in 배열이나 객체){ }
- 배열의 경우는 인덱스가 임시변수에 대입되고, 객체의 경우는 속성이 임시변수에 순서대로 대입
**제어문 : Control Statement
=> 프로그램의 흐름은 왼쪽->오른쪽, 위->아래로 진행되지만, 제어문 이용시 분기(선택) 및 반복 가능
1. 제어문의 종류
1) 분기 - Condition
- if : 조건에 의한 분기
- switch : 값에 의한 분기
2) 반복 - loop, iteration
- for
- while
- do~while
3) 기타 제어문
- break : switch와 반복문에서 사용
- continue : 반복문에서만 사용 가능
- return : 함수나 메소드에서만 사용 가능
4) expression : 표현식
=> 변수, 연산, 메소드 호출 모두 표현식인데 표현식이라고 할 때는 대부분의 경우 결과가 리턴되는 경우
2. if : 조건에 의한 분기
=> if(Boolean이 나오는 표현식){
( )안의 결과가 true일 때 수행할 내용;
}else if(Boolean이 나오는 표현식){
1번식이 false, 2번식의 결과가 true일 때 수행할 내용;
}else{ 앞의 모든 표현식이 false일 경우 수행할 내용; }
=> if는 필수, else if는 선택(개수제한 X), else도 선택인데 else는 1회만 가능
3. switch : 값에의한 분기(프로그래밍 언어마다 다르게 적용)
=> switch에 사용할 수 있는 자료형 : 숫자와 문자열 모두 가능
=> fallthrough : break가 없을 경우 어떻게 동작할지
- javascript에서는 break가 없으면 break를 만날때까지 모든 문장을 수행
=> 사용법
switch(표현식){
case 값1:
표현식의 결과가 값1일때 수행할 내용;
break;
case 값2:
표현식의 결과가 값2일때 수행할 내용;
break;
...
default:
앞의 모든 표현식과 일치하는 값이 없을 때 수행할 내용;
break;=> switch로 구현할 수 있는 것들은 if로 전부 구현 가능, but if로 구현한 모든것이 switch로 구현 가능하지는 않음
- 일반적으로 switch가 if보다 수행속도가 빠르고 가독성이 좋음
=> 1, 2, 3 같은 숫자보다 변수이름을 넣는 것이 가독성이 좋음
//menu의 값이 1이면 해장국, 2이면 짜장면, 나머지는 설렁탕
var menu = 2;
var CHINA = 2;
//case 1보다 CHAINA가 가독성이 높음
switch(menu){
case 1:
document.write("해장국 <br/>");
break;
case CHINA:
document.write("짜장면 <br/>");
break;
default:
document.write("설렁탕 <br/>");
break;
}=> 새로운 언어에서 switch 사용시 문자열 가능 여부와 fallthrough를 확인할 것
Tip!
1. Programming Language와 Library, Framework, Solution을 구분
2. 프로그래밍 언어
- "java", "c", "c++", "python"
- "javascript", "c#", "swift", "kotlin"
- "PHP", "SQL", "Closure", "Ruby"
- "Rust", "Haskell", "Golang", "scala"
'수업 정리' 카테고리의 다른 글
| 42일차 수업 정리(BOM, DOM, Event (0) | 2020.06.05 |
|---|---|
| 41일차 수업정리(js - 반복문, 제어문, 함수, 내장객체) (0) | 2020.06.04 |
| 39일차 수업 정리(css - box model, 회원가입 페이지 작성) (0) | 2020.06.02 |
| 38일차 수업 정리(CSS-1) (0) | 2020.06.01 |
| 37일차 수업정리(XHTML) (0) | 2020.05.29 |