728x90
< 목차 >
1. [09:00~10:00] 코드카타 문제 풀이
- 문자열 다루기 기본
2. parseInt()
3. toUpperCase()
4. 오늘 작성한 코드
5. 금일 소감
1. [09:00~10:00] 코드카타 문제 풀이
- 문자열 다루기 기본
문제 설명
: 문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성해보자. 예를 들어, s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 된다.
제한 사항
: s는 길이 1 이상, 길이 8 이하인 문자열이다. s는 영문 알파벳 대소문자 또는 0부터 9까지 숫자로 이루어져 있다.
내가 작성한 코드
// s의 길이가 4 or 6인지 체크
// 문자가 들어가면 False, 아니면 True
function solution(s) {
return s.length === 4, 6 && s.!isNaN() : s.isNaN()
}
정답 코드
function solution (s) {
if (s.length === 4 || s.length === 6) {
return s.split("").every(c => !isNaN(c)) // 모든 요소가 number이면 true 리턴
} else {
return false;
}
}
위 코드는 내가 작성한 코드랑 유사하다. s.length === 4, 6 이건 안 되나 보다.. 되겠냐고,,,, 두 조건을 따로따로 명시해줘야 한다는 것을 깨달았다. split을 이용해서 문자 혹은 숫자를 한 글자씩 끊어서 모든 것이 number면 true를 return하는 코드다.
isNaN은 기본적으로 Not a Number 뜻 그 자체로, 숫자가 아니면 true를 뱉어내기 때문에 앞에 !를 붙여서 true의 반대인 false를 반환하게 했음을 알 수 있다.
function solution (s) {
return (s.length === 4 || s.length === 6) && s == parseInt(s)
}
위 코드는 문자열 길이 조건문은 이해했는데 parseInt가 뭐더라... 싶었다. 아니 자주 보는데 왜 자꾸 잊는 거야아아아아
[Reference]
정답 코드
2. parseInt()
: 문자열에서 숫자를 추출
기본 구조
parseInt(string)
[특징 1] 문자열이 숫자로 시작한다면 숫자만을 return
let str = parseInt('123숫자들');
console.log(str); // 123
[특징 2] 숫자가 포함된 문자열이라 하더라도 문자로 시작하거나, 숫자를 포함하지 않는 문자열의 경우는 NaN으로 return
아마 코드카타 문제 2번째 정답 코드에선 문자열로 시작하든 아니든 문자가 들어가면 무조건 False 반환하는 조건이라 parseInt를 사용할 수 있었던 것 같다.
let str = parseInt('숫자들123');
console.log(str); // NaN
let sing = parseInt('lalala');
console.log(sing); // NaN
[Reference]
3. toUpperCase()
: 문자열을 대문자로 변환해 반환
기본 구조
str.toUpperCase();
예문
console.log("alphabet".toUpperCase()); // 'ALPHABET'
[Reference]
MDN 공식 문서
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/toUpperCase
4. 오늘 작성한 코드
// [요구사항]
// 아래 함수 multiply는 두 인자를 받아 곱한 값을 반환합니다. 해당 함수를 완성하십시오.
// [코드]
function multiply(a, b) {
// 여기에 코드를 작성하세요.
return a * b;
}
console.log(multiply(2, 3)); // 6
// [테스트]
// multiply(2, 3)은 6을 반환해야 합니다.
// [요구사항]
// 주어진 숫자 배열의 모든 요소를 더하는 함수 sumArray를 작성하세요.
// [코드]
function sumArray(arr) {
// 여기에 코드를 작성하세요.
let sum = 0;
for (let i = 0; i < arr.length; i++) {
sum += arr[i];
}
return sum;
}
console.log(sumArray([1, 2, 3, 4, 5])); // 15
// [테스트]
// sumArray([1, 2, 3, 4, 5])은 15를 반환해야 합니다.
// [요구사항]
// 문자열 배열을 받아 모든 문자열을 대문자로 변환하고, 새로운 배열로 반환하는 함수 toUpperCaseArray를 작성하세요.
// [코드]
function toUpperCaseArray(strings) {
// 여기에 코드를 작성하세요.
return strings.map((string) => {
return string.toUpperCase();
});
}
console.log(toUpperCaseArray(['apple', 'banana'])); // [ 'APPLE', 'BANANA' ]
// [테스트]
// toUpperCaseArray(['apple', 'banana'])는 ['APPLE', 'BANANA']를 반환해야 합니다.
// [요구사항]
// 다음 배열에서 5보다 큰 숫자만 출력하세요. 그러나 8을 만났을 때 반복문을 종료하세요.
// [코드]
let numbers = [2, 4, 6, 8, 10, 12];
// 여기에 코드를 작성하세요.
for (let number of numbers) {
if (number > 5 && number === 8) {
console.log(number);
break;
}
}
// [테스트]
// 출력: 6
// [요구사항]
// 1부터 100까지의 숫자 중에서 홀수만 출력하세요. 그러나 3의 배수인 홀수는 출력하지 마세요.
// [코드]
// 여기에 코드를 작성하세요.
for (let i = 1; i <= 100; i++) {
if (i % 2 !== 0 && i % 3 !== 0) {
console.log(i); // 왜 8..?
}
}
// [테스트]
// 출력: 1, 5, 7, 11, 13, 17, ...
// [요구사항]
// 다음 문자열 배열에서 'stop' 문자를 만났을 때 반복을 중지하고, 'skip' 문자를 만났을 때 해당 반복을 건너뛰고 나머지 문자열들을 출력하세요.
// [코드]
let words = ['apple', 'banana', 'skip', 'cherry', 'stop', 'date', 'elephant'];
for (let i = 0; i < words.length; i++) {
if (words[i] === 'stop') {
break;
} else if (words[i] === 'skip') {
continue;
}
console.log(words[i]);
}
// 여기에 코드를 작성하세요.
// [테스트]
// 출력: apple, banana, cherry
// [요구사항]
// 아래의 함수를 화살표 함수로 변환하세요.
// [코드]
function add(a, b) {
return a + b;
}
// 여기에 코드를 작성하세요.
(a, b) => a + b;
// [요구사항]
// 아래 변수 value의 값이 10보다 크면 "big"을, 그렇지 않으면 "small"을 변수 result에 저장하는 삼항연산자를 작성하세요.
// [코드]
// 여기에 코드를 작성하세요.
let value = 8;
let result = value > 10 ? 'big' : 'small'; // small
console.log(result);
// [테스트]
// result의 값이 "small"인지 확인하세요.
// [요구사항]
// 아래의 객체에서 name과 age 속성을 구조분해할당을 사용하여 각각의 변수에 저장하세요.
// [코드]
let person = { name: 'Alice', age: 25, job: 'Engineer' };
// 여기에 코드를 작성하세요.
let { name, age } = person;
console.log(name); // Alice
console.log(age); // 25
// [테스트]
// name 변수의 값이 "Alice"이고, age 변수의 값이 25인지 확인하세요.
// [요구사항]
// 아래의 변수들을 사용하여 단축 속성명을 이용한 객체를 생성하세요.
// [코드]
let a = 'hello';
let b = 'world';
// 여기에 코드를 작성하세요.
const obj = { a, b };
console.log(obj.a);
console.log(obj.b);
// [테스트]
// 생성된 객체의 a 속성의 값이 "hello"이고, b 속성의 값이 "world"인지 확인하세요.
// [요구사항]
// 아래의 배열을 전개구문을 사용하여 새로운 배열에 복사하세요.
// [코드]
let fruits = ['apple', 'banana', 'cherry'];
// 여기에 코드를 작성하세요.
let newFruits = [...fruits];
console.log(newFruits); // [ 'apple', 'banana', 'cherry' ]
console.log(fruits === newFruits); // false
// [테스트]
// newFruits 배열이 ["apple", "banana", "cherry"]인지 확인하고, 원본 fruits 배열과는 다른 참조를 가지고 있는지 확인하세요.
// [요구사항]
// 아래의 함수를 async/await를 사용하여 비동기로 작동하게 만드세요.
// [코드]
async function fetchData() {
return await new Promise((resolve) => {
setTimeout(() => {
resolve('Data fetched!');
}, 1000);
});
}
// fetchData 함수를 호출하고 결과를 콘솔에 출력하는 방법
// 여기에 코드를 작성하세요.
fetchData().then((result) => console.log(result));
// [테스트]
// fetchData 함수를 호출하여 "Data fetched!" 문자열이 정상적으로 반환되는지 확인하세요.
// [요구사항]
// 아래의 함수에서 then, catch, finally를 사용하여 비동기 처리를 하고,
// 성공적으로 데이터를 가져오면 "Data: [데이터]", 에러가 발생하면 "Error: [에러 메시지]",
// 그리고 작업이 끝났을 때 "Process completed"를 출력하세요.
// [코드]
function fetchDataWithError() {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('Network Error');
}, 1000);
});
}
// 여기에 코드를 작성하세요.
fetchDataWithError()
.then((data) => {
console.log('data', data);
})
.catch((error) => {
console.log('Error', error);
})
.finally(() => {
console.log('Process completed');
});
// [테스트]
// fetchDataWithError 함수를 호출하여 적절한 메시지들이 출력되는지 확인하세요.
// [요구사항]
// 아래의 async/await 함수를 then ~ catch로 변환하세요.
// [코드]
function getData() {
// 여기에 코드를 작성하세요.
return fetch('https://api.example.com/data')
.then((response) => {
if (!response.ok) {
throw new Error('Network response was net ok');
}
return response.json();
})
.then((data) => {
return data;
})
.catch((error) => {
console.error('There was a problem with your fetch operation:', error);
});
}
// 함수 호출 및 데이터 확인
getData()
.then((data) => console.log(data))
.catch((error) => console.error(error));
// [테스트]
// 변환된 함수를 호출하여 동일하게 데이터를 반환하는지 확인하세요.
// [요구사항]
// setTimeout을 사용하여 2초 후에 "Hello after 2 seconds"를 출력하는 함수를 작성하세요.
// [코드]
// 여기에 코드를 작성하세요.
setTimeout(() => {
console.log('Hello after 2 seconds');
}, 2000);
// [테스트]
// 해당 함수를 호출하여 2초 뒤에 정해진 메시지가 출력되는지 확인하세요.
// [요구사항]
// 아래의 HTML 요소에서 id가 "myText"인 요소의 텍스트를 "Hello, DOM!"로 변경하세요.
// [HTML]
/*
<div id="container">
<p id="myText">Replace this text.</p>
</div>
*/
// [코드]
// 여기에 코드를 작성하세요.
// document.getElementById('myText').textContent = 'Hello, DOM!';
// [테스트]
// 웹 페이지에서 "myText" 요소의 텍스트가 "Hello, DOM!"으로 바뀌었는지 확인하세요.
// [요구사항]
// 버튼을 클릭하면 "Clicked!"라는 텍스트를 alert으로 띄우는 이벤트 리스너를 추가하세요.
// [HTML]
/*
<button id="clickButton">Click me!</button>
*/
// [코드]
// 여기에 코드를 작성하세요.
// document.getElementById('clickButton').addEventListener('click', function () {
// alert('Clicked!');
// });
// [테스트]
// 웹 페이지에서 "clickButton" 버튼을 클릭했을 때 "Clicked!"라는 메시지가 alert으로 나타나는지 확인하세요.
// [요구사항]
// 아래의 HTML 요소에서 class가 "highlight"인 모든 요소의 텍스트색을 빨간색으로 변경하세요.
// [HTML]
/*
<div class="content">
<p class="highlight">Change my color!</p>
<p>Don't change my color.</p>
<p class="highlight">Change my color too!</p>
</div>
*/
// [코드]
// 여기에 코드를 작성하세요.
// document.getElementsByClassName('highlight');
// for (let i = 0; i < highlightedItems.length; i++) {
// highlightedItems[i].style.color = 'red';
// }
// [테스트]
// 웹 페이지에서 class "highlight"를 가진 모든 요소의 텍스트색이 빨간색인지 확인하세요.
// [요구사항]
// 아래의 HTML 요소 중 "myList"에 새로운 항목 "Mango"를 추가하세요.
// [HTML]
/*
<ul id="myList">
<li>Apple</li>
<li>Banana</li>
</ul>
*/
// [코드]
// 여기에 코드를 작성하세요.
// 새로운 <li> 요소 생성
let newListItem = document.createElement('li');
// 새 요소에 텍스트 노드 추가
newListItem.textContent = 'Mango';
// "myList" ID를 가진 <ul> 요소에 새 <li> 요소 추가
document.getElementById('myList').appendChild('newListItem');
// [테스트]
// 웹 페이지에서 "myList"에 "Mango" 항목이 추가되었는지 확인하세요.
5. 금일 소감
휴.. 오늘은 과제 제출하고, 부족한 개인 공부하고, 최종 프로젝트 팀 리더를 신청하고 함께 하고 싶은 팀원들과 챌린지 팀을 지원하였다. 팀원들 모두 챌린지 팀 하고 싶어 해서 바로 후다다다닥 진행해서 지원까지 모두 마쳤다! 이제 최종 프로젝트 관련하여 더 신경 써야 할 것은.. 당장은 없을 듯하다.
함께 지원한 팀원들이랑 같이 하게 되면 정말정말 재밌고 하고 싶은 기능과 기술을 다 넣어서 즐겁게 프로젝트 할 수 있을 것 같아가지고 제발 같은 팀으로 붙길 바라고 있다. 아까도 지원 다 같이 모여서 얘기하면서 다 지원했는지 확인하고, 내가 Slack 팀 단톡도 생성했다. 제발 같은 팀 제발,,, 다 같이 모여서 얘기하면 벌써 팀 분위기가 너무 좋다 ㅋㅋㅋㅋ 지금까지 힘들었던 팀 플레이는 이번 프로젝트와 다음 프로젝트 팀원들의 소중함을 일깨우기 위한 단계였다는 복선이었길.....
암튼 이미 던져진 주사위다,, 좀 더 공부하다 언능 자고, 내일도 파이팅해야겠다!!
728x90
'[Front-end] 개발자 공부' 카테고리의 다른 글
| [개발 공부 54일차] 프레임워크와 라이브러리 차이 | TTI, TTV (3) | 2024.03.12 |
|---|---|
| [개발 공부 53일차] join, while, for...in, trim (0) | 2024.03.11 |
| [개발 공부 51일차] Number.isInteger(), Math.sqrt | 수박수박수 (4) | 2024.03.07 |
| [개발 공부 50일차] substr(), Set | 가운데 글자 가져오기 (0) | 2024.03.06 |
| [개발 공부 49일차] TypeScript, 왜 사용할까? | 하샤드 수 (6) | 2024.03.05 |