Event
문제풀이
비밀번호 확인 로직이며, 기존에 알고 있던 로직이었으나 처음하는 것처럼 느껴져서 다시 정리하게 됐음.
두 개의 input에 값이 같은지 다른지 확인하고, p태그 내의 내용을 변경하는 문제
풀이 시 오류상황 및 풀이과정
1) 두 개의 input에 addEventListener를 달아주고, e를 인자로 받아 e.target.value를 통해 입력받은 값을 확인하는 것까지는 진행가능했음. 추가로, 하단의 코드처럼 firstPw에 value값을 저장하고 return하는 방식을 취했으나 함수 밖에서는 firstPw를 읽어들일 수 없었음. (추가적인 공부가 필요한 부분)
thisIsPw.addEventListener("keyup", (e) => {
const firstPw = e.target.value;
return firstPw;
})2) console.dir()를 통해 많은 정보를 받을 수 있다는 부분을 다시 기억해내어, 두 개의 input에서 value값을 어디서든 받아올 수 있었음.
const topPw = thisIsPw.value;
const bottomPw = thisIsRePw.value;3) 버튼에 EventListener를 달고, 두 개의 값이 같다면 p태그의 내용을 비우고, 다르다면 "비밀번호가 일치하지 않습니다"라는 문구가 나타나도록 조건문을 통해 제어함.
thisIsButton.addEventListener("click", () => {
const topPw = thisIsPw.value;
const bottomPw = thisIsRePw.value;
if (topPw === bottomPw) {
thisIsP.innerHTML = "";
} else {
thisIsP.innerHTML = "비밀번호가 일치하지 않습니다";
}
});template literals, string method
기존 ES5에서 변수와 string을 합치려면 ''와 +를 통해 합쳐줄 수 있었으나, 해당 기법은 개행 시 \n 같은 표기를 통해 개행처리를 하고, 쭉 이어쓰기에 불편한 점이 존재했으나, template literals는 ES6에서 추가된 문법으로 back tick(``)과 ${}를 통해 문자열과 변수를 편하게 조합가능하고, 코드에 표기된 대로 나타내게 할 수 있어 조금 더 사용 시 용이하다.
// ES5 문법
const name = "로빈";
const hi = '안녕하세요. 저는' + name + ' 입니다.';
console.log(hi) // "안녕하세요. 저는 로빈 입니다.";
// ES6 문법
const name = "로빈";
const hi = `안녕하세요. 저는 ${name}입니다.`;
console.log(hi) // "안녕하세요. 저는 로빈 입니다.";문제풀이
객체안에 여러 타입의 프로퍼티를 추가하고, 제출양식대로 맞춰 리턴하는 문제
const handleEdit = (nickname, interests) => {
const obj = {};
const newInterests = interests.split(",");
obj.nickname = nickname;
obj.interests = newInterests;
obj.bio= `제 닉네임은 ${obj.nickname}입니다. 취미는 ${obj.interests}입니다.`
return obj;
}풀이 중 오류상황 및 풀이과정
1) 문제없이 풀이 중 Test 코드에서 오류 발생. 이유는 interests 인자로 받은 "방탈출,테니스,멍 때리기"를 그대로 빈 배열에 넣어버려서 3개의 index가 생긴 배열이 아닌 하나의 인덱스에 모두 들어가버려 오류가 발생했다. (쉽게 설명했으나, 이유를 찾지못해 꽤 오랜시간을 헤맸음)
2) inerests 인자의 문장을 ,(콤마)를 기준으로 나누기 위해 interests.split(",")를 newInterests로 새로 선언
3) newInterests는 ["방탈출","테니스","멍 때리기"]를 반환하기 때문에 그대로 obj.interests의 value값으로 넣어주어 해결 가능했음.
4) bio는 백틱을 사용하여 쉽게 해결 가능했음.
Array Method
Array Method 중 가장 많이 쓰이는 map을 활용한 문제. map은 배열의 모든 요소를 돌며, 할당 된 콜백함수를 모든 요소에 적용하는 메소드이다.
문제 풀이
특정 양식으로 된 String을 받아 새로운 양식으로 변환하여 리턴하는 문제
const formatDate = dates => {
const arr = [];
dates.map(el => {
const newArr = el.split("-");
const comb = `${newArr[0]}년 ${newArr[1]}월 ${newArr[2]}일`;
arr.push(comb)
})
return arr;
}풀이 중 오류상황 및 풀이과정
1) 오류상황은 없었고, split의 사용법을 몰라 어려움을 겪음.
2) 인자로 받은 dates는 아래와 같은 형식으로 된 배열이며 하단 주석과 같은 형식으로 return 해야했음.
const dates = ['2019-03-21', '2019-04-21', '2019-05-21']
// ['2019년 3월 21일', '2019년 4월 21일', '2019년 5월 21일']3) map을 이용해 el 인자(dates배열 내의 모든 요소)를 받고, newArr 안에 모든 요소들을 -를 기준으로 잘라 새로운 배열을 만든다.
// -을 기준으로 잘라낸 배열을 반환한다. dates는 3개의 요소를 가지고 있기 때문에 3번 반복하여 모든 요소에 대해 같은 값을 반환받는다.
['2019','03','21']
['2019','04','21']
['2019','05','21']4) 반환된 내용들을 comb 변수 안에 백틱을 이용해 새로운 양식으로 만들어준다.
const comb = `${newArr[0]}년 ${newArr[1]}월 ${newArr[2]}일`;
// 2019년 03월 21일5) comb을 미리 선언해둔 빈 배열인 arr에 push해서 arr를 리턴
