TIL, 06.17

프로그래머스 풀다 나타난 고난

문자열 다루기

주어진 문자열이 있고 숫자만 있을경우 true를 반환하는 문제였다

가볍게 생각해서 isNaN으로 쉽게 풀리겠는데?하고 생각했는데 isNaN으로 풀어 제출하니 틀렸다

틀린이유를 모르겠어 반례를 찾는데 오래 걸렸다

isNaN은 매개변수가 숫자인지 아닌지 검사하는 함수인데 반례가 있다는것이 이해하기 힘들었다

틀린 이유를 찾기 위해 isNaN에 대해 자세히 조사해보기로 했다

isNaN은 해당 숫자가 NaN 값인지 판단한다 Number일때는 false, 아닐때는 true를 반환한다

isNaN은 정확히는 "IEEE-754 'Not A Number'"인지에 대한 질문으로 보아야 한다

 

isNaN(null)		//false
isNaN("10e1")		// false
isNaN(37); 		// false
isNaN("37")		// false
isNaN(""); 		// false
isNaN(" ");		// false

 

이렇게 많은 것들이 숫자 취급된다

특히 10e1은 내가 보기에는 숫자가 아니지만 JS 작은 숫자를 표현할때나 큰 숫자를 표현할 때 'e'가 사용된다

0을 명시적으로 쓰고 싶지 않을때 사용하는 숫자 표현이다

숫자표현이므로 isNaN은 e를 문자가 아닌 통합해서 보아 100으로 판단한다

 

이런 여러가지를 isNaN은 내가 원하는대로 정확히 판단해주지 않는다 그래서 MDN은 ES6 기반으로 코드를 작성한다면, 특이 케이스가 교정되어 좀더 엄격한 Number.isNaN()을 사용할것을 권장하고 있다

 

완주하지 못한 선수

문제는 잘 풀었는데 효율성문제에 시간을 계속 넘어가 실패를 겪었다

여러가지 방법과 계속되는 리팩토링으로 시간을 점점 줄여갔는데 그래서 최종 성공을 하지는 못했다

다시 처음으로 돌아가 문제를 꼼꼼히 살펴보고 로직을 다시 짜보기로 했다

가끔은 쉬운문제도 한곳에 너무 집중하다보면 오히려 문제를 어렵고 한참 돌아가 풀때가 있었기 때문이다

다시 처음부터 문제를 살펴보니 내가 좀 더 간편한 길을 놔두고 주변을 뺑뺑 돌고 있다는 것을 깨달았다

나는 중복조건으로 인해서 무조건 배열에서 삭제해주어야 한다고 생각했지만 사실은 그러지 않아도 되었다

배열에서 삭제해주는 부분을 없애니 배열에서 원하는 값을 찾고 삭제해서 다시 반환받을 필요도 없었다

이렇게 다시 새롭게 문제를 푸니 문제가 잘 해결되었다

 

리액트를 다루는 기술

이벤트 시스템

이벤트를 사용할때 주의사항이 있다

첫번째 이름은 카멜표기법으로 두번째 함수형태의 값으로 전달해야 하며 세번째 돔 요소에만 이벤트를 설정할수 있다

리액트에서 이벤트를 다루는 것은 순수 JS 또는 jQuery를 사용한 웹 애플리케이션에서 이벤트를 다루는 것과 비슷하다

리액트의 장점 중 하나는 JS에 익숙하다면 쉽게 활용할 수 있다는 점이다

기존 HTML DOM Event를 알고 있다면 리액트의 컴포넌트 이벤트도 쉽게 다룰 수 있다

클래스형 컴포넌트로 할 수 있는 대부분의 작업은 함수형 컴포넌트로도 구현할 수 있다

 

ref

컴포넌트 내부에서 DOM에 직접 접근해야 할 때는 ref를 사용한다

먼저 ref를 사용하지 않고도 원하는 기능을 구현할 수 있는지 반드시 고려한 후에 활용한다

컴포넌트끼리 데이터를 교류할때 ref를 사용한다면 이는 잘못된 사용이다

할수는 있지만 리액트 사상에 어긋날 설계이므로 컴포넌트끼리 데이터를 교류할 때는 언제나 데이터를 부모, 자식 흐름으로 교류해야한다. 함수형 컴포넌트에서는 useRef라는 Hook 함수를 사용해야 한다