type 3-2

안녕하세요 :)배열과 객체에 대한 설명은 수업 배열 사용하기 (3-10) 객체 사용하기 (3-11) 에서 설명되고 있습니다. 참고하시면 될거 같아요 :)

배열, 객체 자료형의 관계

안녕하세요 :)먼저 객체 자료형은 배열의 한 인덱스가 아닙니다 ㅠㅠ 먼저 배열은 여러 값을 관리해주는 또 다른 값이라고 생각하시면 편하실 것 같습니다. 예를 들어 두 학생의 평균 점수를 관리한다고 해보겠습니다. 각 값은 studentAAverage와 studentBAverage에 담겠습니다. var studentAAverage = 88; var studentBAverageb = 93; 그런데 실수로 모든 학생의 평균값이 10점씩 높게 계산됐다고 해보겠습니다. 그래서 올바른 값으로 수정하기 위해선 다음과 같이 해야합니다. studentAAverage = studentAAverage - 10; studentBAverage = studentBAverage - 10; 지금은 크게 문제가 없는 것 같지만 학생 수가 20명, 30명 늘어나면 상당히 힘든 작업이 됩니다. 이 과정을 편하게 해주는 게 배열이라고 할 수 있습니다. 예를 들어 다음과 같이 숫자들을 관리할 수 있습니다. var studentsAverages = [88, 93]; 그리고 값을 더하는 작업은 for 문을 이용해 순회를 돕니다. for (let i = 0; i studentsAverages[i] = studentsAverages[i] - 10;} 이 방법은 위 방법대비 더 어려운 것 같지만 학생 수가 많아지면 아주 편리한 방법이 됩니다. 하지만 이렇게만 관리해서는 평균이 88점인 학생이 누구인지 알 수 없게 됩니다. 이럴 때 객체를 함께 사용하면 편리할 것 같습니다. 그 방법을 설명하기 전에 객체에 대해 다시 한 번 알아보겠습니다. 배열은 위에서 보시듯 데이터를 모아놓고 인덱스로 관리합니다. 즉, studentsAverages[0]과 같이 0번째 혹은 1번째 값에 접근하게 됩니다. 이와 다르게 객체는 key 값을 통해 값에 접근하게 됩니다. 예를 들어 알려주신 객체를 해석해보자면 var objects = { studentName: "kevin", id: 20201000 } 는 "kevin"과 20201000이라는 값(value)에 배열처럼 objects[0] 또는 objects[1]이라고 접근하는게 아니라 객체를 정의할 때 설정한 키(key)값을 통해 다음과 같이 접근합니다. objects.studentName 또는 objects['studentName'] 지금까지 예시들을 보시면 아시겠지만 배열은 주로 같은 성격의 데이터를 나열하여 관리할 때 주로 사용되고 객체는 성격이 서로 다른 데이터를 함께 관리하기 위해 사용됩니다. 위에 예시를 다시 설명드리면 studentsAverages는 평균 점수라는 같은 성격의 데이터를 나열하여 관리합니다. 하지만 평균이 88점인 학생이 누구인지 알 수 없는 문제가 있었죠. 그렇다면 평균 점수라는 성격의 데이터가 아닌 학생과 평균 점수라는 데이터를 나열하면 좋을 것 같습니다. 따라서 다음과 같이 데이터를 객체를 통해 정의를 합니다. var studentsAverages = [ { name: 'kevin', averageScore: 88 }, { name: 'james', averageScore: 93 }, ]; 종합해보자면 물어보신 것 처럼 { name: 'kevin', averageScore: 88 } 의 각 두 문장 (name: 'kevin'과 'averageScore: 88)은 인덱스 [0]이 아닙니다. 배열이 아니기 때문이죠. 만약 인덱스 [0]이라면 var obj = { name: 'kevin', averageScore: 88 }; console.log(obj[0]) 로 확인했을 때 값이 나와야하는데 undefined가 출력됩니다. 그리고 배열안에 있는 객체에 접근하기 위해선 인덱스와 키가 함께 사용됩니다. studentsAverages[0].name // kevin studentsAverages[0].averageScore // 88 studentsAverages[1].name // james studentsAverages[1].averageScore // 93

mac에서는 작동하지않습니다..(회원가입 폼 검증-1)

안녕하세요 :) 1. window.addEventListener('load', listener)는 OS나 브라우저와 상관없이 동작하는 함수입니다. 동작하지 않는다면 아마 다른 이유로 동작하지 않을 가능성이 큽니다. 다음을 참고해주세요. load 이벤트 문서 2. 구글 로고와 관련해서 알려주신 문제는 같은 질문에 대한 답변이 있어 붙여드리겠습니다 :) 강의에서는 img#hplogo 라고 적혀있어서 document.getElementById('hplogo') 와 같은 방법으로 가져올 수 있었습니다. 알려주신 정보는 img.InXdpd라고 되어있고 제 맥 pc에서 크롬으로 확인했을 땐 div#logo-default.show-logo로 보이네요. 먼저 적혀있는 문자열은 선택자라고 불리는 문자입니다. 선택자는 다음과 같이 사용됩니다. div -> 아무 특수문자 없이 요소이름 (body, div, img, span 등)으로만 적혀있다면 현제 페이지의 모든 div 요소를 선택합니다. #foo -> 앞에 # 를 붙이고 뒤에 문자를 붙이면 id="foo" 속성을 가진 요소를 선택합니다. (예, ) .bar -> 앞에 . 을 붙이고 뒤에 문자를 붙이면 class="bar" 속성을 가진 모든 요소를 선택합니다. (예, ) 위 선택자들은 조합하여 사용할 수 있습니다. 예를 들어 img#foo는 img 요소 중 id="foo" 라는 속성을 가진 요소를 의미합니다. (예, (사진)) 또한 span.bar는 span 요소 중 class="bar" 라는 속성을 가진 요소를 의미합니다. (예, ) 마지막으로 p.bar.abc는 p 요소 중 class="bar abc" 라는 속성을 가진 요소를 의미합니다. 여기에서 bar와 abc의 순서는 중요하지 않습니다. 즉, p.bar.abc는 , , 그리고 과 같은 요소를 모두 의미합니다. 선택자가 다르면 자바스크립트를 통해 요소를 가져오는 방법도 다릅니다. 위에있는 예시를 그대로 적용해 방법을 나누면 다음과 같습니다. div -> 태그 이름으로 선택하고자 하면 document.getElementsByTagName 을 사용합니다. #foo -> id 속성 값으로 선택하고자 하면 document.getElementById를 사용합니다. .bar -> class 속성 값으로 선택하고자 하면 document.getElementsByClassName을 사용합니다. 단, id는 하나의 요소에만 적용하기 때문에 결과가 없다면 null을 반환하고 있다면 찾은 요소를 반환합니다. 그리고 class와 tag는 여러 요소가 있을 수 있기 때문에 요소를 찾았는지 여부와 상관없이 요소 배열을 반환합니다. 단, 없다면 비어있습니다. 따라서 말씀하신 img.InXdpd라고 적힌 선택자는 다음과 같이 가져오면 됩니다. document.getElementsByClass('InXdpd') 이 함수의 의미는 "InXdpd라는 class 속성값을 가진 모든 요소를 가져와줘"라는 의미입니다. id 속성과 다르게 class는 많은 요소에 적용할 수 있기 때문에 결과값은 요소 배열입니다. 따라서 첫 번째 요소를 가져오고 싶다면 document.getElementsByClass('InXdpd')[0] 와 같이 사용하시면 됩니다. 단, 하나도 없을 수도 있으니 배열의 길이를 확인해보거나 결과 값이 undefined인지 확인해보는 것도 중요합니다. 또한 위 세가지 방법 외에 모든 선택자에 사용할 수 있는 함수가 있습니다. document.querySelector document.querySelectorAll 자세한 내용은 문서를 참고해보시면 좋을 것 같습니다 :)

14분47초 구글로고 관련하여 질문드립니다.

안녕하세요 :)강의에서는 img#hplogo 라고 적혀있어서 document.getElementById('hplogo') 와 같은 방법으로 가져올 수 있었습니다. 알려주신 정보는 img.InXdpd라고 되어있고 제 맥 pc에서 크롬으로 확인했을 땐 div#logo-default.show-logo로 보이네요. 먼저 적혀있는 문자열은 선택자라고 불리는 문자입니다. 선택자는 다음과 같이 사용됩니다. div -> 아무 특수문자 없이 요소이름 (body, div, img, span 등)으로만 적혀있다면 현제 페이지의 모든 div 요소를 선택합니다. #foo -> 앞에 # 를 붙이고 뒤에 문자를 붙이면 id="foo" 속성을 가진 요소를 선택합니다. (예, ) .bar -> 앞에 . 을 붙이고 뒤에 문자를 붙이면 class="bar" 속성을 가진 모든 요소를 선택합니다. (예, ) 위 선택자들은 조합하여 사용할 수 있습니다. 예를 들어 img#foo는 img 요소 중 id="foo" 라는 속성을 가진 요소를 의미합니다. (예, (사진)) 또한 span.bar는 span 요소 중 class="bar" 라는 속성을 가진 요소를 의미합니다. (예, ) 마지막으로 p.bar.abc는 p 요소 중 class="bar abc" 라는 속성을 가진 요소를 의미합니다. 여기에서 bar와 abc의 순서는 중요하지 않습니다. 즉, p.bar.abc는 , , 그리고 과 같은 요소를 모두 의미합니다. 선택자가 다르면 자바스크립트를 통해 요소를 가져오는 방법도 다릅니다. 위에있는 예시를 그대로 적용해 방법을 나누면 다음과 같습니다. div -> 태그 이름으로 선택하고자 하면 document.getElementsByTagName 을 사용합니다. #foo -> id 속성 값으로 선택하고자 하면 document.getElementById를 사용합니다. .bar -> class 속성 값으로 선택하고자 하면 document.getElementsByClassName을 사용합니다. 단, id는 하나의 요소에만 적용하기 때문에 결과가 없다면 null을 반환하고 있다면 찾은 요소를 반환합니다. 그리고 class와 tag는 여러 요소가 있을 수 있기 때문에 요소를 찾았는지 여부와 상관없이 요소 배열을 반환합니다. 단, 없다면 비어있습니다. 따라서 말씀하신 img.InXdpd라고 적힌 선택자는 다음과 같이 가져오면 됩니다. document.getElementsByClass('InXdpd') 이 함수의 의미는 "InXdpd라는 class 속성값을 가진 모든 요소를 가져와줘"라는 의미입니다. id 속성과 다르게 class는 많은 요소에 적용할 수 있기 때문에 결과값은 요소 배열입니다. 따라서 첫 번째 요소를 가져오고 싶다면 document.getElementsByClass('InXdpd')[0] 와 같이 사용하시면 됩니다. 단, 하나도 없을 수도 있으니 배열의 길이를 확인해보거나 결과 값이 undefined인지 확인해보는 것도 중요합니다. 또한 위 세가지 방법 외에 모든 선택자에 사용할 수 있는 함수가 있습니다. document.querySelector document.querySelectorAll 자세한 내용은 문서를 참고해보시면 좋을 것 같습니다 :)

이미지 정렬방식

안녕하세요 !먼저 flex를 지정하셔도 문제는 없지만 적용하는 위지가 달라질 수 있습니다. 먼저 flex를 사용하신다면 css코드는 다음과 같이 작성해야할 것 같습니다. .row { display: flex; } 대신 cell 클래스에 있는 display: inline-block 스타일은 제거해주시면 됩니다. display: inline-block; 이 스타일은 같은 수준에 있는 요소들 사이에서 해당 요소의 레이아웃을 설정합니다. 예를 들어서 와 같이 코드가 있을 때 inline-block이 적용된 두 div 요소는 같은 수준에 있고 서로 한 행에(inline) 위치하게 됩니다. 단, inline이기만 하면 크기나 여백을 설정하는 데 한계가 있기 때문에 inline-block으로 설정해줍니다. display: flex; 이 스타일은 주로 내부에 있는 요소들의 위치를 배치(layout)할 때 사용합니다. 예를 들어서 와 같이 코드가 있을 때 flex가 적용된 div 요소의 자식 요소인 두 div는 가로 정렬이 됩니다. 이유는 다음과 같이 기본 정렬 값이 row이기 때문입니다. flex-direction: row; display: flex; 스타일은 자식 요소들을 배치하는 여러가지 방법을 제공합니다. 이 방법들은 다음 문서를 참고해주세요 :) flexbox의 기본 개념 도움이 되셨으면 좋겠습니다 :)

사진관련해서

안녕하세요 ! 현재 강의에서는 이미지를 가져오는 방법을 알려드리고 별도의 스타일을 적용하는 방법은 CSS 섹션에서 시작됩니다. 그 전에 적절한 이미지 크기를 설정하기 원하신다면 img 태그에 다음과 같은 값을 넣어 같은 이미지 크기를 설정할 수 있습니다 :) (사진) style="스타일 값" -> 해당 태그에 스타일을 적용합니다. width: 100px; -> 너비 값을 100 픽셀로 설정합니다. height: 100px; -> 높이 값을 100 픽셀로 설정합니다.

수정

안녕하세요 ! 만약 다음과 같이 입력(태그를 생성)하시면 브라우저에선 foo가 미리 입력된 textarea가 존재합니다. foo 그리고 다음을 통해 (script 태그 안에 넣으시거나 브라우저의 개발자도구 콘솔을 사용하셔도 됩니다) 값을 가져오시면 'foo'가 반환 됩니다. document.getElementById('foo').value // 'foo' ------- (1) 그 다음 브라우저에서 나타난 textarea에 미리 입력된 foo를 foo1과 같이 수정해서 (1)의 코드를 다시 실행하면 textarea에 입력된 그대로 값인 'foo1'이 반환될 것입니다. 즉, 말씀하신대로 미리입력된 값이 맨 처음 브라우저에 노출되고, 그 값을 수정하면 바로 수정 사항이 반영됩니다.

1-14실습도중 질문

안녕하세요. 먼저 질문 주신 내용을 살펴봤습니다. 1. 먼저 method="POST"로 설정되어있다면, form 요소 안에 있는 요소들의 값(value)이 URL 요청시에 쿼리(query)가 아닌 요청 body에 담겨서 URL에 요청이 됩니다. 따라서 보여주신 스크린샷에서 처럼 쿼리로 전달되는 건 method="GET"으로 요청을 보냈을 때 나타나는 현상입니다. 2. 첨부해주신 코드를 실행해봤을 때 method="POST"에선 브라우저 주소창에 쿼리가 붙어있지 않고 method="GET" 요청을 했을 때에만 쿼리가 붙습니다. 따라서 첨부해주신 코드에는 문제가 없어보입니다. 3. 또한 form태그의 action 속성 값에 URL을 입력하게 되면 submit이 발생한 후 해당 URL에 form 태그 내부 값들과 함께 method의 방법으로 요청하게 됩니다. 현재 예제에선 파일을 URL로 지정했기 때문에 값을 처리하지 않고 그대로 파일을 응답받아 화면에 보여주게 됩니다. 4. 혹시 문제가 해결되지 않으신다면 보다 간단한 예제를 만들어 비교해보시는 걸 추천드립니다. 예를 들어 form 태그 하나와 내부에 input태그 하나, submit을 발생시키는 button 태그 하나를 만들면 좋은 예제가 될것 같습니다. 5. 보내주신 현상이 발생할 수 있는 가능성은 다음과 같습니다. 먼저 method="GET"으로 요청을 보냅니다(submit 버튼 클릭). 그 후 method="POST"로 수정후 submit 버튼을 클릭해 요청을 다시 보내는 것이 아닌 페이지 새로고침을 하면 위와같은 모습이 됩니다. 감사합니다!