👩🏻💻 Today Learn
- 알고리즘 1문제
- Typescript과제
- TodoList Level-3, Level-5
🔐 알고리즘 문제풀이
문제) 문자열 다루기 기본
문자열 s의 길이가 4 혹은 6이고, 숫자로만 구성돼있는지 확인해주는 함수, solution을 완성하세요. 예를 들어 s가 "a234"이면 False를 리턴하고 "1234"라면 True를 리턴하면 됩니다.
풀이
처음 풀이
function solution(s) {
let answer = true;
if (s.length === 4 || s.length === 6){
if (isNaN(s)){
answer = false;
} else {
answer = true;
}
}
return answer;
}
// js에서 숫자에 e가 붙으면 지수로 인식하여 문자를 숫자로 인식하기 때문에 오류발생!채점을 했을때는 성공했지만 제출할때 정확도가 70점 밖에 나오지 았았었다.
이유에 대해 찾아본 결과 나와 같은 방식으로 푼 사람들이 많아서 이유를 알 수 있었다.
(위 코드안에 주석부분 참고)
수정한 풀이
function solution(s) {
if (s.length === 4 || s.length === 6){
return s.split('').every(item => !isNaN(item))
} else {
return false;
}
}
// isNaN() 숫자로만 되어있는 것이 아니면 true, 숫자일 경우 false
// 문자를 배열로 만든 후 숫자로만 되어있는지 확인하고 맞으면 true
// every() 메서드는 배열의 모든 요소가 제공된 함수로 구현된 테스트를 통과하는지 테스트하고 불리언 값을 반환해준다.수정하면서 새롭게 알게된 메서드 every()
🤦🏻♀️ 고민한 부분
지금까지는 회원가입, 로그인시에 인풋창에 값들이 다 입력되지 않았을 때 alert창을 띄우거나 react-toastyfi로 유효성 검사만 해줬었다.
그러던 중 심화주차 개인과제 해설영상을 통해서 부족한 부분을 리팩터링 해보면서 인풋창에 입력값이 부족할때는 제출버튼이 비활성화 될 수 있게 바꾸어 보았다.
// 회원가입과 로그인에서 요구되는 입력내용이 다르기 때문에 따로 변수를 만들어줬다
const inValidRegister =
userId !== "" && userPassword !== "" && userNickname !== "";
const inValidLogin = userId !== "" && userPassword !== "";
// 로그인 버튼
<LoginButton
$disabled={!inValidLogin}
type="submit"
onClick={onLoginHandler}
>Login</LoginButton>
// 회원가입 버튼
<LoginButton
$disabled={!inValidRegister}
type="submit"
onClick={onRegisterHandler}
>Sign up</LoginButton>
// 버튼 배경색 조건부 스타일링
background-color: ${(props) =>
props.$disabled === true ? "#a4a4a4" : "#8458a6"};강의를 들으면서 해보다가 내가 짠 코드랑 다른부분이 있어서 이것저것 검색해보면서 바꿔보았는데 우선 입력창에 값이 다 들어갔을때 버튼컬러가 활성화 된 것 까지는 성공을 했다!
하지만 색상만 바뀌었을 뿐 클릭하면 클릭이벤트(?)가 발생하고 있었다.
콘솔창을 확인하면 '로그인클릭' 이라는 log가 계속 찍히는 것을 볼 수 있다.
💡 알게된 내용
Button의 disabled속성
- 해당 버튼이 비활성화 되는 것으로 disabled 속성이 명시된 버튼은 사용할 수 없으며, 사용자가 클릭할 수도 없다.
- 이 속성을 사용하면 특정 조건이 충족될 때까지 사용자가 버튼을 클릭할 수 없도록 설정하고, 특정 조건이 충족되면 자바스크립트 등으로 disabled 속성값을 삭제하여 사용자가 버튼을 다시 사용할 수 있도록 조절할 수 있다.
- disabled 속성은 불리언(boolean) 속성이다.
- 불리언 속성은 해당 속성을 명시하지 않으면 속성값이 자동으로 false 값을 가지게 되며, 명시하면 자동으로 true 값을 가지게 된다.
결론적으로 내가 위에서 적은 $disabled={!inValidRegister} 에서 $ 표시는 조건부 스타일링을 위해 props 로 넘겨준것일 뿐 비활성화 되는 기능을 못하고 있었던 것이다.
그래서 각각의 버튼에 속성을 추가해줬다.
disabled={!inValidLogin}
disabled={!inValidRegister}그랬더니 해결이 된 것을 볼 수 있다.
✍🏻 회고
모르는 부분에 대해 검색하고 찾아보는 것은 좋지만 그 내용을 사용할때 해당코드가 어떤기능을 하는지 더 자세한 분석과 이해를 한 후에 써볼 필요가 있는것 같다.
