React Native 2주차 강의 요약

강의 초반에는 vscode에서 javascript code snippets 등 개발을 용이하게 하는 확장 프로그램을 설치하였다.

​

먼저 Javascript 기초를 다져보자.

- 변수

변수는 var라는 키워드로 변수를 선언한다. (자료형은 명시하지 않는다. )

ex)

var a = 1, b = 2;

var c = a + b;

alret(c);

출력 값 : 3

// 변수가 아닌 상수는 const 키워드를 사용한다.

​

- 자료형

자료형은 6개가 존재한다.

1. number

2. string

3. boolean : true, false를 저장

4. undefined

5. function

6.object

​

-조건문

이 부분은 C언어와 유사하다.

​

-비교연산자

자바스크립트에서는 비교 연산자에서 a===b, a!==b 의 형태도 사용한다. ('=='보다 더욱 엄격하게 검사한다는 표현)

ex)

var a = 1;

var b = "1";

console.log("a==b:", a==b); --> true

console.log("a===b:",a===b); ---> false

​

- 반복문

while, do-while, for문이 있다.

ex)

for(var i = 0; i < 10; i++)

{

console.log(i);

}

이런식으로 사용한다.

​

-함수

ex)

funtion 함수이름(매개변수1, 매개변수 2,...)

{

함수 내용

return 반환값;

}

--> 실제 적용

function pow(x,p)

{

var sum1;

for(var i =0; i < p; i++)

{

sum *= x;

}

return sum;

}

​

alert(pow(2,10)); ---------> 1024

​

+ arrow function의 형태 (자주 사용하니 꼭 알아둘 것)

const 함수 이름 = (매개변수1, 매개변수2, ..) => {

함수내용

return 반환값; }

​

-배열

var students = [student1, student2, student3 , , ,];

var arr = [2,3,4];

var arr = new Array(); (요건 잘 안씀)

​

이런식으로 배열을 만들자!

+) 배열에 서로 다른 자료형도 담을 수 있다.

​

arr.push(5)

console.log(arr.length);

arr,shift();

-----------> lenght, slice, indexOf(n) 등등 다양한 method가 존재한다.

​

-객체

객체란? : 서로 연관된 변수와 함수를 그룹핑하고 이름을 붙힌 것

ex)

var 객체 이름 = { key : value, key2 : value2 , ... }

var 객체 이름 = new Object()

​

객체 생성의 2가지 방식

1. 변수에 JSON 형태로 대입

var student = { name : 김민겸 , age: 20,};

2. 빈 객체를 생성 후 멤버를 생성

student.name = "김민겸";

student.age = 20;

​

객체 멤버 접근

console.log(student.name);

​

다음 코드가 어떤 결과를 출력할지 생각해보자.

​

여기서 주목할 점은 object1과 object2이다. var object2 = object1 다음 코드에서 한 메모리 공간을 object1과 2가 공유하게 되는 것이고, object2의 value를 바꾸면 object1도 자연스레 바뀐다.

​

DOM javascript가 HTML을 다루는 방법

(documnet object model)

: 동적인 웹사이트를 제작하기 위한 필수적인 개념이다!

​

DOM 을 이용해서 텍스트박스에 적은 내용을 alert 하는 실습을 하였다.

innerHTML함수는 뒤에 나오는 텍스트의 HTML 태그를 인식한다.

"안녕하세요"라는 result 아이디를 가진 문자를 Bonjour로 바꾸는 코드이다.

 

​

- Event Handling

이벤트의 세가지 요소이다.

ex)

onmouseover = "this.style.backgroundColor = 'orchid'"

: 마우스를 올려서 색상을 변화

<select id = "fruits" onchange = "selectFruit()">

: 객체 멤버의 변화를 감지 ( 함수 변화가 발생하면 함수를 실행한다. )

​

이번 주차 과제이다.

​

여기에 나의 과제풀이까지 함께 진행해 보겠다.

1번 과제

2번 과제

* 이 풀이는 제가 직접 쓴 것이라 정답은 아닐 수 있습니다!