안드로이드&IOS 앱 개발자 양성

안드로이드&IOS 앱 개발자 양성(40일차) - Dynamic Web Project, Media Query, ViewPort Meta 태그, 반응형 웹 디자인, CSS, JavaScript, 제어문(Control Statement)

HRuler 2020. 6. 3. 12:44
더보기

 ** Dynamic Web Project

 ** Media Query

 ** ViewPort Meta 태그

 ** 반응형 웹 디자인

 ** CSS

 ** JavaScript
1. 특징
2. 라이브러리나 프레임워크
3. Java와 JavaScript
4. JavaScript 작성방법
5. 주석
6. 출력
7. 스크립트 출력 연습
8. 변수 선언과 사용
9. Type Casting(형 변환)
10. 404에러
11. Operator - 연산자

 ** 제어문(Control Statement)
1. 제어문의 종류
2. if
3. switch

 ** Dynamic Web Project

 - Java Resource

           src : 컴파일을 할 수 있는 파일 - 이 디렉토리의 내용만 컴파일

           src 디렉토리에 만든 것을 제외하고는 나중에 WebContent 디렉토리로 이동된다.

 - webContent : 웹 프로젝트에서 사용하는 파일

           WebContent/WEB-INF/classes : src에서 만든 소스 파일의 클래스 파일

 ** Media Query

 - 조건에 따라 style을 다르게 설정 하는 것

 - 조건에는 디바이스, 화면 크기, 물리적인 크기 등

 - 하나의 웹 애플리케이션을 구현하고 상황에 따라 콘텐츠를 다른 방법으로 보여지도록 구현하기 위해서 등장

 ** ViewPort Meta 태그

 - 화면에 대한 옵션을 설정하는 태그

 ** 반응형 웹 디자인

 - 창의 크기에 상관없이 콘텐츠를 사용할 수 있도록 하는 것

 - 미디어 쿼리(디바이스나 브라우저의 크기를 이용해서 다른 디자인을 적용하는 것)와 유동형 레이아웃(콘텐츠의 크기를 절대단위를 사용하지 말고 상대 단위를 이용)을 이용해서 생성

 - 한계 : 반응형 웹 디자인이 스마트 폰과 같은 작은 크기의 디바이스에서도 동일한 콘텐츠를 사용하는 것을 별도의 페이지 없이 지원하기 위해서 출발했는데 스마트 폰에서는 단지 보기만 하는 것이 아니고 스마트 폰만의 별도의 기능을 사용하기도 하기 때문에 실제로 별도의 웹 사이트를 구현해서 지원하거나 native application 등을 생성해서 지원하기도 한다.

 - 유동형 레이아웃을 사용할 때 주의할 점은 브라우저 창이 너무 작아지거나 너무 커지면 콘텐츠의 내용이 정확하게 보이지 않을 수 있으므로 max-width나 min-width 등의 속성을 이용해서 크기에 제한을 둘 필요가 있다.

 ** CSS

 - 스타일 시트 적용 방법

 - 스타일 시트 작성 방법

 - Media Query

 - viewport

 - 절대 단위와 상대 단위의 차이점과 사용 용도

 - 반응형 웹 디자인

 - 선택자

 - 속성

 ** Java Script

 - 웹 브라우저가 해석해서 실행하는 스크립트 언어

 - HTML5 API의 기반 언어

1. 특징

 - 대소문자 구별

 - 동적 바인딩(Dynamic Binding) : 실행될 때 값을 결정

 - HTML에 혼합해서 사용

 - 확장자는 일반적으로 js

2. 라이브러리나 프레임워크

 - TypeScript : JavaScript에 객체지향의 개념을 도입한 언어

 - jQuery : Cross Browsing을 쉽게 구현하도록 해주는 라이브러리

 - JQueryUI.js(UI 처리를 추가), jquerymobile.js(모바일 웹을 쉽게 개발)도 지원

 - 다양한 플러그인을 가지고 있어서 웹 페이지 개발에서 가장 많이 사용하는 라이브러리

 - d3js : 시각화 지원 라이브러리

 - react, vue, angular(TypeScript 사용) : MVC 구현을 위한 라이브러리

 - ionic, react-native : 스마트 폰 애플리케이션 구현을 위한 라이브러리

 - node, express : 웹 서버 구현을 위한 라이브러리

 - tensorflow : 머신러닝(AI - 인공지능) 구현을 위한 라이브러리

3. Java와 JavaScript

 - Java는 일반 애플리케이션 구현을 위한 프로그래밍 언어

 - JavaScript는 웹 브라우저 안에서 동작하는 애플리케이션을 구현을 위한 프로그래밍 언어

 - 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개 이상의 명령문을 작성할 때는 구분하기 위해서 ;을 반드시 작성해야 한다.

 - python, kotlin, swift 모두 동일

 - 문자와 문자열 구분이 없고, 작은 따옴표와 큰 따옴표 모두 사용이 가능하지만 하나의 문자열에서 작은 따옴표와 큰 따옴표가 모두 사용되면 나중에 사용한 것을 먼저 닫아야 한다.

 - 제어문자 사용 가능

 - \n : 줄 바꿈

 - \t : 탭

 - \\ : \

 - \'

 - \"

5. 주석

 - // : 한 줄 주석

 - /* */ : 한 줄 이상의 주석

6. 출력

 - document.write(내용) : 모아서 한꺼번에 출력

 - document.writeln(내용) : 명령문을 만날때마다 출력

 - 태그를 작성하면 적용

 - alert(내용) : 대화상자에 출력

 - console.log(내용) : 브라우저의 검사 창에 출력

 - 디버깅을 위해 사용

7. 스크립트 출력 연습

8. 변수 선언과 사용

1) 변수 선언

 - var 변수명; //이렇게 만들면 지역변수

 - 지역변수(local variable) : 만들어진 영역 내에서만 사용이 가능

 - 변수명; // 이렇게 만들어진 변수는 전역변수

 - 전역변수(global variable) : 만들어지고 나면 영역에 상관없이 사용이 가능

 - 변수를 만들 때 자료형에 상관없이 var를 붙이는데 이유는 자바스크립트에서는 모든 자료형이 전부 참조형이기 때문이다.

 - 실제 자료형은 데이터를 대입할 때 결정한다.

 - 이렇게 데이터를 대입할 때 자료형을 결정하는 것을 동적 바인딩이라고 하며 동적 바인딩 언어는 변수를 만들면 다른 자료형의 데이터도 대입이 가능하다.

 - 변수의 이름은 영문과 숫자 그리고 특수문자(_)를 이용해서 생성

 - 숫자로 시작할 수 없고 중간에 공백이 들어갈 수 없음

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을 호출하면 배열 요소 각각의 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

 - 그래픽 프로그래밍이나 시스템 프로그래밍 그리고 윈도우 프로그래밍에서 단축키 만들 때 많이 이용한다.

<<, >>, >>> : 비트 단위로 밀어내는 연산자

 - 왼쪽으로 1번 밀면 2배가 된다.

 - 오른쪽으로 1번 밀면 1/2이 된다.

 

>, >=, <, <= : 비교 연산자

 - 숫자와 문자 모두 크기 비교 가능

 - 문자는 맨 앞글자부터 한글자씩 코드 값을 비교하는 방식이다.

Hello > hello -> false

Hello World > Hello -> true

 - 연산자 오버로딩(Overloading) : 연산자 본연의 기능에 새로운 기능을 추가시킨 것

 

==, ===, != : 항등 연산자

== : 값이 같으면 true, 다르면 false

=== : 값과 자료형까지 확인해서 값과 자료형 모두 같으면 false 그렇지 않으면 false

!= : 값이 다르면 true, 같으면 false

&& : 논리 and - 2개의 데이터 모두 true인 경우만 true, 하나라도 false가 있으면 false

|| : 논리 or - 2개의 데이터 모두 false인 경우만 false, 하나라도 true가 있으면 true

 - &&은 앞의 결과가 false이면 뒤의 결과를 확인하지 않는다.

 - ||는 앞의 결과가 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이 나오는 표현식){

                          if() 안의 결과가 false이고, else if() 안의 결과가 true일 때 수행할 내용;

}...

else{

                          앞에 나온 모든 표현식의 결과가 false인 경우 수행할 내용 

}

 - if는 필수이고 else if는 선택인데 개수 제한이 없으면 else도 선택인데 else는 1번만 나와야 한다.

3. switch

 - 값에 의한 분기 - 프로그래밍 언어마다 다르게 적용

 - switch에 사용할 수 있는 자료형 : 숫자와 문자열 모두 가능

 - fallthroug : break가 없을 때 어떻게 동작하는지

 - javascript에서는 break가 없으면 break를 만날 때까지 모든 문장을 수행

 - swift(표현식){

                case 값1:

                             표현식의 결과가 값 1일 때 수행할 내용;

                             break;

                case 값2:

                             표현식의 결과가 값 2일 때 수행할 내용;

                             break;

                ...

                default:

                             앞의 모든 표현식과 일치하는 값이 없을 때 수행할 내용;

                             break;

 - }

 - switch로 구현할 수 있는 것들은 if로 전부 구현가능하지만 if로 구현한 모든 것이 switch로 구현할 수 있지는 않다.

 - 일반적으로 switch가 if보다는 수행 속도가 빠르고 가독성이 좋다.