[항해일지] D+2, 웹개발종합 2주차

23.06.02 - D+2, 웹개발종합 2주차

기록양식
1. 배운내용
2. 핵심내용 (개념정리)
3. 스스로 시도해본 것들(응용&검색)
4. 해결
5. 알게 된 점
6. 헷갈리거나 실수한 점

1. Javascript & JQUERY

기본 문법 개념, 사용 형태

2-1. let __ = a > $('#id').명령문(a) = __= a = id

🤷‍ $() > jquery 문법을 사용해야 html을 동적형태로 표현이 가능. javascript 보다 더욱 간결하고 짧게 표현이 가능하기 때문

2-2. console.log()

🤷‍ JavaScript 코드가 의도대로 실행되고 있는지, 혹은 어느 부분에서 문제가 발생하고 있는지 등을 파악하는데 도움

2-3. let fruits = [''] > 2-1의 let 지정
     반복문 =fruits.forEach((a)=>{ 명령어=console.log(a) }) > a는 임의의 변수

for Each는 배열 fruits의 각 요소를 실행 >console.log(a) 즉, 배열의 각 요소에 대해 console.log를 실행하게 되므로, 배열의 모든 요소가 콘솔에 출력

🤷‍ fruits,과일의 개수가 100개라고 했을 때, 100개의 과일을 내가 일일이 칠 필요가 없음
     >위 문법을 사용하면 다수의 데이터를 관리하기 편리

2-4. let age=24 2-1의 let지정
     조건문 = if(age>20) {console.log('성인입니다)} else{console.log('청소년입니다')

🤷‍ 사람이 100명일 때, 위와 같은 문법을 활용해서 특정조건을 만족하는 요소만을 찾을 수      있기 때문에 반복문과 조건문을 같이 사용

---

2-5. (앞)append(뒤) > 앞의 내용 뒤에 새로운 요소인 뒤를 추가

🤷‍ append는 html요소에 새로운 용어를 추가해주는 명령어

3.더 편하게 쓸 수 있는 방법이 없을까?

강의 예제1).q1(id)뒤에 (변수)를 붙인다.

let fruits = ['사과', '배', '감', '귤', '수박']
      fruits.forEach((a) => {
          let temp_html= `<p>${a}<p>` 
          $('#q1').append(temp_html)

                     👇

let fruits = ['사과', '배', '감', '귤', '수박']
      fruits.forEach((a) => {
          $('#q1').append(a)

💻출력

사과배감귤수박

그렇다면 행을 추가해주면 된다.
어떻게 행을 추가할까?

let fruits = ['사과', '배', '감', '귤', '수박']
      fruits.forEach((a) => {
          $('#q1').append('<p>a</p>')

💻출력 😂 > 안되네
a
a
a
a
a

---

🙆‍♂️4.해결

문자열 결합을 위해서는 + 연산자를 사용합니다. '<p>' + a + '</p>' 코드는 '<p>', a, <p> 세 부분을 결합하는 것을 의미합니다. a는 변수이므로 따옴표 없이 사용되며, '<p>'와 '</p>'는 문자열이므로 따옴표로 묶여 있습니다.

만약 ('<p> + a + <p>')와 같이 쓴다면, +와 a도 문자열의 일부로 인식되기 때문에 문자열 안의 a는 변수의 값을 대체하지 않고 그대로 a 문자로 출력됩니다. 따라서 이 경우 생성되는 문자열은 <p> + a + <p>가 됩니다.

올바른 방법은 다음과 같습니다:'<p>' + a + '</p>'
  
  fruits.forEach((a) => {
            $('#q1').append('<p>' + a + '</p>')

5. 알게된 점

   단순히 (a)변수만 넣으면 될 줄 알았는데, 그게 아니였다. 추후에 다른 객체들과 섞여서 변수를 사용한다면 더 혼란을 야기할 것 같다. 기존 예제의 let=변수설정 을 한뒤에 .append를 사용하는게 좋겠다.

   `` < backtick 지정 > let 변수 = (backtick) 문자 (backtick) > 문자열 출력

6. '문자열' '+' > (+) 또한 (')를 필요로 하지만, 스크립트 명령어 안에 있을 때는 있는 것으로 간주 (+) 결합을 할때는 전부 다 다른 객체이므로 (')로 구분지어줘야 한다. 그렇지 않으면 문자열로 인지한다.