'코딩 연습/Javascript'에 해당되는 글 15건

Moment 앱 따라하기

배경화면으로 쓰일 이미지를 랜덤으로 출력 위해 Math 내장객체에서 floor(), random() 메소드를 활용한다.

html 파일에서 body 요소를 가져온다.

• 웹브라우저 화면 전체를 이미지로 씌울 예정이므로 body를 통째로 가져온다.
  

1부터 시작하는 정수를 랜덤하게 뽑는 함수를 만든다.

• Math.random()은 1이하의 실수를 랜덤으로 반환한다.
• Math.floor()는 실수를 소수점 내림하여 정수 형태로 반환한다.
• 0부터 숫자가 반환되므로 더하기 1을 하여 숫자 1부터 변수로 지정되도록 한다.

• 배경사진의 개수가 3개라서 IMG_NUMBER 변수에 3을 담았다.
• 이미지 개수에 맞게 임의로 하나의 숫자를 뽑아서 해당 숫자의 파일명을 가진 이미지를 가져올 것이다.

랜덤으로 뽑힌 숫자랑 같은 이름의 이미지 파일을 호출한다.

• 랜덤으로 뽑은 숫자를 함수의 인자로 사용한다.
• new Image() 메소드를 사용하여 html에 <img>를 만드는데, 이는 우리가 출력할 <img src="">가 담긴다.
• <img src="">는 images 폴더에 있는 이미지 파일을 지정한다.
• 그 이미지 파일은 랜덤으로 가져와야 하므로 imgNumber 파라미터를 통해 랜덤 숫자를 받는다

• 배경사진이 원본 그대로 노출되면 웹브라우저에 맞지 않으므로, CSS를 통해 약간의 수정을 한다.
• 완성된 image 변수를 body에 자식요소로 추가한다

배경사진의 크기를 조절하고 동시에 애니메이션 효과를 준다. 

• animation 속성을 사용하기 앞서 @keyframes를 작성한다.
• 투명도(opacity)를 0에서 1로 변화를 주어 자연스럽게 화면이 전환될 수 있게 한다.
• top, left 크기를 0로 하여 텍스트로 인해 비어있는 상단, 왼쪽 공간을 제거한다. 
  
• 웹브라우저 화면 크기에 맞도록 width와 height 비율을 100%로 작성한다. 
  
• 텍스트가 배경사진 앞에서 노출될 수 있도록 z-index 속성을 이용해 레이어 순서를 조절한다.

genRandom() 함수와 printImage() 함수를 순차적으로 실행시킨다.

• genRandom() 함수를 통해 랜덤으로 뽑은 숫자를 printImage() 함수의 인자로 사용한다
  

filter() 메서드는 주어진 판별 함수를 통과하는 요소를 모아 새로운 배열로 만들어 반환합니다.

forEach() 메소드처럼 배열 내 각 요소에 함수를 적용할 수 있는데, 다른 점은 함수를 통해 반환된 결과를 모아 새로운 배열을 만들어준다는 것이다.

toDoList는 html 상에서 작성한 toDo가 출력되는 리스트인데,

그 중 하나의 toDo를 삭제하여, 그 toDo가 가진 id 값과 toDos 변수인 배열 안에 객체들의 id 값을 비교하는데,

배열 안에서 id 값이 다른 것들만 따로 모아 새로운 이름(cleanToDos)의 배열을 만든다는 것이다.

아직 설명하는 방법도 어려울 정도이다.

인강 들으면서 가장 이해 안되었던 부분이다. 이해하는데 정말 오랜 시간이 걸린듯;

출처

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

JSON은 JavaScript Object Notation의 준말이다. 자바스크립트 객체 표기로 해석해도 될지 모르겠다.

JSON.parse(text)에서 text는 JSON으로 파싱할 문자열에 해당한다.

다시 말하면, datatype이 현재 문자열인 데이터를 객체형 데이터로 바꾸겠다는 뜻으로 보면 좋다.

웹브라우저에서 폼을 통해 입력 받은 값을 문자열로 저장해야 스크린샷처럼 작성한 text와 id 값을 정확히 알 수 있다

1

localStorage.setItem(TODOS_LS, JSON.stringify(toDos));

cs

JSON.stringify(text)는 text를 문자열로 변환해주는 메소드이다.

그리고 로컬스토리지에 문자열 형태로 저장된 값을 호출하여 웹브라우저 상에서 띄우려면 다시 객체로 파싱해주어야한다. 

객체로 파싱하여 정의된 변수를 객체(배열) 안에 포함된 요소마다 paintTodo 함수를 적용하기 위해 forEach() 메소드를 사용한다.

condition ? expr1 : expr2

condition (or conditions)

true 혹은 false로 평가되는 표현식

expr1, expr2

모든 형식의 값을 지닌 표현식

condition이 true이면, 연산자는 expr1의 값을 반환하며, 반대의 경우 expr2를 반환한다.

상황)

현재시각 1시 9분 3초를 웹브라우저에서 출력하면 1:9:3 형태로 출력된다

내가 나타내고 싶은 형태는 01:09:03 이다 

조건부 삼항 연산자를 적용하여 시간, 분, 초가 10보다 작은 경우 앞에 0을 붙여주는 것이다.

출처: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Operators/Conditional_Operator

객체를 다시 떠올리면,

console이라는 객체 속에 log() 함수가 속성으로 포함되어 있다.

따라서 console 객체 속에 포함된 log() 함수를 사용하여 "Ryan"을 출력하는 것이다.

우리도 만들 수 있다.

calculator라는 객체 속에 sum이라는 속성을 만들었다.

이 sum속성은 2개의 인자를 합산하여 출력하는 함수를 가진다.

console.log()를 사용하는 것처럼

calculator.sum()을 사용하면,

해당 결과가 출력된다.

객체와 인자를 변수에 담아서 출력할 수도 있다.

연습

함수 호출시 인자 값이 전달된 문자열을 리턴하는 형태로 함수를 변경했고,

이를 새로운 변수에 담았다. 

따라서 console.log()에는 변수만 입력하면 원하는 결과가 출력된다. 

함수의 매개변수와 문자열을 조합하여 한 줄의 문장을 만들었다.

(https://practice-a-lot.tistory.com/79)

매개변수를 사용하기 위해 전혀 아름답지 않게 곳곳에 따옴표(')나 쌍따옴표(")를 사용해야했다.

여기서 백틱(`)을 사용하여 한 줄의 아름다운 코드가 완성된다.

백틱(')으로 묶은 문자열 속에 ${매개변수} 형태로 매개변수까지 넣을 수 있다.

생소한 백틱(`)과 ${}를 활용하면 된다.

내 정보(myInfo) 객체에서 성별을 출력할 때 console.log()를 사용했다.

myInfo 객체에 gender 키에 접근하는 것처럼,

console.log를 console 객체에 log() 함수를 사용한다고 보면 된다. 

console 객체를 출력하면,

log 함수를 비롯해 다양한 함수를 포함하고 있다.

이 중에서 우리가 사용하고 싶은 것을 console.함수명() 형태로 사용하는 것이다.

즉 console이라는 객체는 여러가지의 내장함수를 가지고 있다.

그럼 함수는 왜 필요할까?

"Hello"라는 인삿말이 싫어서 "Hi"로 고치려면 1개씩 수정해야하는 번거로움이 있다.

만약 이런 코드가 100만개라면 100만개를 하나씩 언제까지 고치고 있을줄 모른다.

여기서 반복되는 

이 코드를 하나로 묶어 필요할 때마다 사용하고, 내용 수정도 한 번만으로 100개든 1000개든 한꺼번에 되도록 하는게 목표다.

그것을 도와줄 녀석이 함수이다.  

함수의 정의는 function 함수명()으로 시작한다.

중괄호{} 안에 중복되는 코드를 입력하고, 필요시 함수명()만 입력하면 함수로 지정된 코드를 반환한다.

다시 한 번 정리하면, 함수 형태는 함수명()이다.

console.log()는 즉, console 객체에 포함된 log() 함수라는 걸 기억하자.

이어서 우리가 만든 함수를 활용하여 인삿말과 이름을 같이 출력해보자.

실망스럽게도,

우리가 원하는 한 줄의 텍스트로 출력되지 않았다.

그럼 sayhello() 함수의 도움을 받아 sayhello("Ryan") 형태로 값을 담아 같이 출력해보는 방식을 만들어보자.

드디어 우리가 원하던 결과가 반환되었다.

name은 매개변수(parameter)이고, sayhello() 함수 안의 "Ryan"은 인자(argument)이다.

매개변수는 인자를 받아서 넘겨주는 역할을 한다.

따라서 sayhello() 함수는 "Ryan"을 name에게 토스하여 "Hello"와 같이 출력된다. 

매개변수는 변수처럼 임의로 이름을 설정해주면 된다.

추가로 인자를 2개 넘기는 연습을 해보자. 인자가 2개이면 매개변수도 2개이다.

점점 함수가 발전되어가는 모습이다.

배열과 객체를 넓게 사용해보자

1) 여러 개의 객체를 배열에 담을 수 있고,

2) 객체 속성의 값으로 배열을 사용할 수 있으며,

3) 2)번의 배열에 객체를 담을 수도 있다.

1) 개개인의 정보 객체를 info라는 배열에 담았다. 

2) 정보(myInfo) 객체에서 좋아하는 음식을 나열한 속성인 favoriteFood의 값으로 배열을 지정했다.

3) testPass 속성의 값인 배열에 객체를 담았다.

객체(object)를 이용해 데이터 다루기

그리고 똑같은 리스트 방식인 배열(array)과 다른 점 살펴보기

배열(array)의 문제점은 뭘까?

• 내 정보인 이름(name), 나이(age), 성별(gender), 조건문(true or false)에 대한 값을 배열(array)로 만들었다.
  
• console.log() 메소드를 통해 나이만 출력하고 싶다.

• 우선 나이에 대한 데이터가 my_info 값에서 배열 몇 번째에 있는지 알아야 출력이 가능해진다.
• 만약 배열 안에 데이터가 100만 개가 있다면 4만 7천번째 값이 뭔지 알아야 꺼낼 수 있다는 말이다.

• 따라서 효율적으로 데이터를 관리하기 위해서 객체(object)를 사용한다.

동일한 데이터를 가지고 객체로 만들어보자

• 객체는 {}괄호를 사용하고, 데이터에 이름을 붙여준다.
• 데이터로는 문자, 숫자, 배열, 객체도 사용 가능하다.

• 원하는 데이터를 호출하려면 객체에 점(.)을 찍은 후 데이터에 지정해준 이름을 적으면 된다.

• 호출한 데이터로 console.log() 메소드를 통해 출력할 수 있다.

• 호출한 데이터에 '32'를 입력하여 age 데이터를 바꿀 수 있다.