[사전캠프 9일차]
🛸 오늘의 Code Kata
🔹 나머지가 1이 되는 수 찾기
- 문제를 보다보니 어제 팀과제로 했던 로또번호 추첨기와 유사한 부분이 있어 생각 보다 금방 해결 했던 문제!(팀과제로 예습을 하게될 줄이야😝)
function solution(x, n) { var answer = []; for (let i = 1; i<=n; i++){ answer.push(x*i); } return answer; }
- 코드 실행 결과 확인
🛸 두번째 미니 프로젝트 팀과제
✨MBTI TEST
지난 과제를 완성한 후 이번에는 난이도 중! 도전!!
이번에도 역시 일부 html, css, js 코드와 기본적으로 수행해야 하는 조건들이 주어졌다.
이게 MBTI?🤨
- 익히 알고있는 MBTI 성향을 나누는 방식과 달라서 팀원들 끼리 여러 의견이 오갔다.
- 우리가 알고있는
E/I,S/N,F/T,J/P성향을 비교할수 있다록 항목을 나누고 각각 5가지 값으로 점수 반환하기 - 주어진 JS 코드에 맞춰서 5가지 값이 아닌 2가지 값으로 반환하기
- E인지 I인지 확실하게 나누기 위해 각 항목을 비교하는 문항은 홀수 문항으로 만들기
- 위 내용들을 반영,
이번 팀과제 인원은 4명이기에 각 E/I, S/N, F/T, J/P 항목을 사다리 타기로 정한후 2지선다로 3문항씩 만들어서 제출하기.
✔️역할 분담
- 팀원"나" :
E/I비교 3문항, JS - 팀원 A :
S/N비교 3문항, CSS - 팀원 B :
F/T비교 3문항, HTML - 팀원 C :
J/P비교 3문항, 코드병합, 서기
이상하다? 난이도 (중) 인데 더 쉽다?🤔
과제를 파악하며 따라가다보니.. 분명 난이도가 이게 더 어렵다고 했는데? 왜? 더? 쉽지?
나 뿐만 아닌 지난 과제를 같이한 팀원들도 비슷한 반응이었다.
아무래도 지난번 과제는 난이도(하)라서 약간의 힌트를 제외하고는 주어진것이 거의 없었지만, 이번 과제는 굉장히 친절한 튜토리얼이 있었다.
1일차~4일차로 나누어서 각 html,css, js에서 확인하고 수정해야할 항목들이 순차적으로 나열되어 있던것이었다.
진행 과정이 명확하다보니 수월하게 진행되어 다들 비슷하게 느끼는 것 같았다.
어제의 난제였던 JS조차 생각보다 간단하게 수행되어 다들 당황한 느낌!
하지만...역시 함정이 있었다!
괜히 난이도(중)이 아닌 것!!
name변경해야 하는것 맞죠❓
팀원들이 이제 문제를 확인하기 전에 코드를 훑어보고 먼저 파악을 할줄 알게 되었다!
1번 문제와 2번문제의 name속성이 같다는 것을 체크하고 "두번째 질문에 있는 답변들에 있는 name 속성이 첫번 째 질문하고 같은데 바꿔야 겠죠?" 다들 비슷하게 진도를 나가고 있어서 바로 즉답! 약간 문제풀고 답맞춰 보는 기분이었다.
JS 이벤트 핸들링⁉️
함수를 호출하는 onclikc 이벤트 추가하고 콘솔창에서 정상적으로 연결이 되었는지 확인하기!
콘솔에서 정상적으로 출력되는 것을 확인 하였지만, 오류도 같이 확인 되었다.
여기에서
getElementById에서 받아올 인자가 ID값임을 이미 명시하고 있음에도#붙여서 같이 기입했기 때문이다. 이 경우 ID로 지정된 텍스트만 인자값으로 넣어주면 된다.
JS에서 HTML 요소 접근방법
- id로 접근하기 ⇒ document.getElementById('id 속성 값')
- class로 접근하기 ⇒ document.getElementsByClassName('class 속성 값')
- tag명으로 접근하기 ⇒ document.getElementsByTagName('tag 명')
- name으로 접근하기 ⇒ document.getElementsByName('name 속성 값')
★★
id는 고유값으로 중복 될수 없는 값이라 Element단수이고,
다른 요소들은 중복될수 있는 값이기 때문에 Elements복수 형태로 쓰이고 있다!!!
오늘까지 진행한 코드
모든 문항에 답변을 했을 때에만 결과값을 나타낼수 있도록 하는 부분이 가장 어려웠다. 튜터님의 조언도 받았고 다른조의 풀이 방법도 확인하면서.. 여러가지 방법으로 해결할수 있다는 것을 다시한번 느꼈다.
내일은 우리가 원하는 접근 방법으로 코드를 좀더 수정하고자 한다.
