240417 TIL 셋째날 ; 부족한 부분 보강1-자바스크립트(2-6~8)

보강이유 : 팀원들과 하는 프로젝트에 파이어스토어 데이터베이스에 연동되고 나서 어떻게 해야할 지 감이 안잡힘,

        : 새 멤버추가 - 등록버튼을 누르면 팀원정보가 간략하게 1개(보기, 수정, 삭제 버튼 포함) + (간략한 정보 - 보기 버튼을 누르면) 자세

           한 정보 1개 ; 총 2개가 연동되어 등록되었으면 좋겠음.(240416 til 둘째날)

 

공부한 내용정리

: 자바스크립트 - 프로그래밍 언어 (변수, 자료형, 함수, 조건문, 반복문)

let a = 'hello';

console.log(a);

하면 콘솔에 헬로우가 뜸

; 콘솔에 띄우는 이유 ; 개발자를 위한 도구 ; 콘솔은 개발자 도구

 

; 변수란 값을 담는 것 (값은 숫자도, 문자도 가능)

 

let a = '안녕하세요';

let b = '반가워요';

console.log(a);

console.log(b);

=> 안녕하세요

      반가워요

; 옆으로 하려면 console.log(a+b); 숫자라면 더한 값이 다옴

= 변수는 값을 담아서 한 번에 관리함

= 변수 이름은 나중에 내가 알아보기 쉬운 걸로

 

자료형 : 리스트, 딕셔너리

리스트 - 왜 만들어 졌는가 : 한번에 관리할 수 있도록; let a = '사과', let b ='배', let c = '감' 등 a~ 100개 라면.. 꾸러미 처럼 한번에 관리하는 것이 보다 간편함 / 리스트는 순서가 중요 /

let a = ['사과', '배', '수박'];                                                  -> []가 있어야 입력가능

console. log(a[0]) 이라면 맨앞 0 번째인 사과만 나옴

 

딕셔너리 - 왜 만들어 졌는가 : 하나에 대한 정보를 따로 놓지 않고, 묶어서 놓을 수 있도록

let a = {'key1':'value1', 'key2':'value2', 'key3':'value3' }

ex) let person = {'name':'bob', 'age':'30', 'height':'180'}

      console.log(person) 하면 {여기에 있던게 다 나옴}

만약에 console.log(person['name']) 이라면 => bob 이 나옴

 

; 단 문법의 규칙을 일원화 하지 말 것

 

마지막으로 let name = person['name']

                  let age = person['age'] 

                  console.log(name, age) 라면 bob, 30이 뜸

 

조건문

ex) let age = 15;

     if (age < 20) {

         console.log('청소년입니다')

} else {

        console.log('성인입니다')  

} 라면 청소년입니다 라고 뜸

 

반복문 : 반복할 대상 있어야함 ; 대부분의 반복은 어떤 꾸러미 수 만큼 반복함 ; 순서내로 반복

ex) 1000명의 구매 고객 중 십만원 이상인 사람들만 솎아내자 등

; 리스트라고 하는 꾸러미로 쓰임

let ages = [15, 30, 28, 7, 40, 13];

를 하나씩 찍어주고 싶다면

console.log(ages[0]);               콘솔에 하나씩 뜨게 한 것

console.log(ages[1]);

부터 하나씩 입력해서 6번째인

console.log(ages[5]);   까지 해야하는데 만약 100개라면? 비효율적... => 하나씩 빼서 찍어줄 수 있게 반복문 작성

자동완성을 활용하여 작성 = foreach

array.foreach(element => {

 

});                          어떤 array를 foreach로 돌려서 사용한다. ; ages를 돌려서 사용하고 싶다 면         

 

ages.foreach(element => {});  이때 element는 너무 기니 a로 사용 하면 수월함

즉, ages.foreach(a => {

             console.log(a)

});            age를 돌면서 하나씩 빼서 찍는다. => 위에서 하나씩 입력한 것처럼 같은 결과값인 15, 30, 28, 7, 40, 13이 하나씩 찍힘

 

활용 :

let ages = [15, 30, 28, 7, 40, 13];

ages.foreach(a => {                         ages에서 foreach로 하나씩 빼서 그걸 a 라 부름

         if (a < 20) {                              

             console.log('청소년입니다')

      }  else. {

            console.log('성인입니다')

      }

});                                                       청소년, 성인, 성인, 청소년, 성인, 청소년 순으로 콘솔에 뜸

 

웹페이지에 어떻게 활용되는지 ; 무언가를 누르면(동작을 하면) 뜬다.(작동함)

함수 생김새

function 함수이름() {}

강의 예시 ;  function hey() {}    함수이름인 hey 를 부를 때마다 같은 동작을 함 ; 반복문

& 조건을 주고 그에 따라 움직이면 ; 조건문                 => 반복문, 조건문 연동가능

 

 ; 보통 '버튼 누를 때마다 같은 동작인 창이 열리게 함' 에 쓰임 

ex. 

<script>

function hey() {

       alert('안녕하세요')}

</script>

 

<button type="button" class="....">버튼이름</button>

=> <button onclick="hey()" type="button" class="....">버튼이름</button>

버튼 이름을 눌렀을 때 안녕하세요가 뜸

 

자바스크립트를 훨씬 쉽게 조작할 수 있도록 누가 만들어놓음

  ; 우리는 그걸 가져와서 짧고 직관적이게 사용가능                    => j query

 

알게된 것 : 자동완성을 활용하여 작성 = foreach

/ 색깔 지정할 때 원하는 색깔코드가 있으면 #코드번호 넣기 ; 색앞에 생긴 색네모에 마우스 가져다 대면 색깔 창이 뜸

 

회고 : 1. 강의를 들었을 때에는 이해를 했지만 막상 프로젝트에 적용할 때에는 어려워서 많이 헤맸는데 그 와중에 튜터님의 조언을 듣고, 다시 강의를 보기 다는 아니지만 응용할 수 있는 부분이 눈에 보였다.

2. 어려워서 찾고있던 부분을 팀원분이 연결해주셔서 일단은 해결이 되었다. 전공자도 아니고 관련 언어도 하나도 몰라서 도움이 안되는 것에 대해 마음이 어려웠지만 일단 할 수 있는 부분인 강의 다시 정리하는 것과, 내일 할 예정인 배경삽입을 해보면 좋을 것 같다.