프로젝트를 진행하면 해당 에러 Uncaught TypeError: Array.map is not a function가 지속적으로 나타났다.
에러가 뜨는 이유는 배열이 비었기 때문이었다. 서버와 통신하기 전에는 임의로 배열을 만든 상태에서 테스트를 진행했기 때문에 해당 에러가 나타나지 않았던거였다. 통신을 진행한 후에는 게시글을 작성해야 배열에 값이 들어오게 되는데, 게시글을 작성하지 않았기 때문에 배열에 값이 존재하지 않아서 map 에러가 발생했던 것이다.
Array.map 에러 해결
해당 에러를 해결하는 방법은 매우 간단하다. 하지만 에러를 해결하기에 앞서 우리가 알아야 할 JS 지식이 있다.
array가 빈배열일때 boolean값
JS를 잘 모른다면 arr라는 배열이 존재하는데 값이 빈배열이라면, boolean값은 흔히 false라고 생각하게 될 것이다. (내가 그랬다)
하지만 아니다! 빈 배열이라면 boolean값은 true이다.
이유를 명확히는 알지 못하지만, JS에서 그렇게 정의한다. (그래서 그냥 받아들이기로 했다)
비교연산자(===)를 사용하지 않았을 때, false가 나오는 것은 다음과 같다.
- 0
- false
- undefined
- null
- ’’ 혹은 “” (빈 문자열)
- NaN
빈 배열은 위에 해당하지 않기 때문에 true가 나온다..! 이 뿐만아니라 {}, function(){}, "0", "false", "null" 등도 true값을 가진다.
여기서 주의해야 할 것은 위의 결과값은 동등 연산자(==)일 때의 값이라는 것이다. 비교 연산자(===)는 값과 타입을 모두 비교하기 때문에 빈 배열일때 false를 반환한다. 주의하도록 하자!
Chrome console에서는 arr == true는 false?!
사실 위의 이론을 직접 확인하고 싶어서 크롬 console 란에 코드를 작성해서 확인해봤다. 근데 빈배열이 false라고 하는 것이다..? arr == true라고 작성했는데.. 그래서 Boolean(arr)라고 작성해보니 true값이 나왔다.
왜 위의 개념과 다른 값이 나오는지 궁굼해서 Bard에게 물어봤다.
그렇다. 내가 동등 연산자(==)로 입력했어도 크롬 console은 비교 연산자(===)를 사용하는 것이다. 그렇기에 true가 아닌 false로 반환하는 것이었다. Boolean으로 했을 경우에는 값만 확인하기 때문에 true를 반환하는 것이고!
혹시 나 같은 사람이 또 있을까봐.. 적어봤다ㅎ
Array.map Error 해결하기
위 개념처럼 빈 배열 array는 true를 반환하기 때문에 map을 사용하는 조건으로 그냥 array가 아닌 array.length를 사용하면 된다.
빈 배열 array는 true이지만 array.length는 값이 0 이기 때문에 비교연산자에서 false를 반환한다!
따라서 빈 배열로 인한 map TypeError는 length를 활용하여 해결하자.
해당 코드를 확인하면 meetingList가 빈 배열일때 meetingList.length는 0이므로 false이기에 논리 연산자 (&&)의 조건(모두 true)에 성립하지 않는다. 따라서 map 함수가 실행되지 않기에 TypeError는 발생하지 않는다.
만약 meetingList가 빈배열이 아니고 값이 1개라도 존재한다면, meetingList.length는 최소 1이 되기 때문에 true값을 가져서 map함수가 실행될 것이다. 배열이 빈배열이 아니기 때문에 map TypeError도 발생하지 않는다.
참고
Array.map is not a function 에러
왜 텅 빈 Array는 true인가
Bard: Chrome console에서 빈배열이 false인 이유
프로젝트의 페이지중 하나인 게시글 작성 페이지에서 ‘소개글 작성’이라는 textarea 입력란이 존재한다. 해당 입력란에서는 placeholder가 사용되는데, 이때 작성하는 내용이 길기 때문에 줄바꿈이 꼭! 필요한 상황이었다.
그래서 “\n”이나 “br”태그 등을 삽입했으나 줄바꿈이 되지 않았다…
그래서 찾고 찾다가 발견한 방법. 유니코드를 삽입하여 줄을 바꾸는 것이었다.
유니코드로 줄바꿈을 해본적이 없어서 생소했으나, 친절히 어떻게 하면 줄바꿈이 되는지 작성되어있었다.
유니코드로 줄바꿈
유니코드로 줄바꿈하는 방법은 매우 간단하다. 줄을 바꾸고 싶은 곳에 을 적어주면 된다.
그럼 아래 그림과 같이 이쁘게 줄바꿈이 적용되는 것을 볼 수 있다.
은 무슨 의미?
해당 유니코드의 의미는 다음과 같다.
-
제일 처음 칸으로
-
다음줄로 이동
-> : 다음 줄 제일 처음칸으로 이동
위와 같은 의미를 갖기 때문에 줄바꿈이 정상적으로 작동될 수 있다.
참고
HTML: placeholder 에서 줄바꿈하기 placeholder line break character
ASCII 코드 값 10 , 13
HTML 특수문자 리스트
해당 프로젝트에서는 input type이 date인 경우에 원하는 placeholder가 나타날 수 있도록 해야했다. 즉, placeholder를 커스텀해야 한다는 것이다.
근데, text처럼 placeholder를 추가한다고 간단하게 해결되는 것이 아니었다..
placeholder 커스텀 (before를 활용)
::before에 content 속성을 사용하여 date-placeholder라는 속성을 만들어준다.
그리고 해당 태그(.md-date-input)가 focus되거나 valid될 때, placeholder를 안보이도록 display: none을 해주면 된다.
input 태그 안에 date-placeholder 속성으로 원하는 값을 넣어주면 된다.
이때, input 태그에 꼭!!!! required를 작성해주자. 해당 속성이 있어야 값을 입력했을 때 placeholder가 안보이게 된다.
webkit으로 placeholder 없애기
이거는 placeholder 커스텀하는 방법을 찾다가 발견한 것인데, 나중에 쓸 수 있으므로 같이 적어둔다.
webkit을 dateTime과 calender를 수정할 수 있다.
상세 내용은 참고란을 확인하자.
참고
CSS:input type=date, placeholder 적용
input date placeholder 없애기, value색 변경
svg 파일은 css를 작성해도 변하지 않는다. 따라서 svg 파일 코드에서 스타일을 변경하던가 해야하는데, 이상하게 이게 적용이 잘 안됐다. 그리고 해당 파일을 어떤 페이지에서 사용하느냐에 따라 색상이나 사이즈가 달라져서 svg 파일에서 변경하는 것은 좋은 방법은 아니었다.
따라서, 나는 ReactComponent를 활용하여 변경하였다.
ReactComponent로 svg 이미지 스타일 변경하기
해당 방법은 svg 파일을 컴포넌트와 시켜주는 것이다.
파일을 컴포넌트로 만들어줬기 때문에 우리가 평소에 사용하던대로 스타일을 적용하면 된다.
import ReactComponent as 원하는 컴포넌트 이름 from '이미지 파일 url'를 통해 svg 파일을 컴포넌트로 만들어 준다.
컴포넌트 만들어줬으니 사용하는 것도 컴포넌트처럼 사용하면 된다.
나는 scss에서 스타일을 변경시켜주려고 컴포넌트에 class를 부여해줬다.
scss에서 path 태그에 fill을 원하는 색상으로 설정해주면 해당 색상으로 svg 이미지의 색상이 변경된다.
svg 파일의 코드를 보면 색상이 path 태그의 style에 들어가 있는 것을 알 수 있다.
참고
개발일기_220106_svg 리액트 컴포넌트로 사용하기(svg 색상 바꾸기)
textarea나 input 태그를 focus 할때, border의 색상을 변경하기 위해서 :focus를 사용해서 border의 색상을 변경하게 어쩌구 저쩌구.. 이런식으로 코드를 작성했었다.
근데, 단 한 줄로 해당 기능을 구현할 수 있는 방법을 찾았다.
outline-color
border의 색상을 변경하고 싶은 박스에 일단 border 속성과 색상을 지정해준다. 그리고 outline-color 속성에 focus시 변경하고 싶은 색상을 넣어주면 끝이다.
참고
textarea focus 될 때, border 색상 변경