JS 문제해결 - 2

단어 포함 여부 확인

문제 상황

문자열에서 특정 단어들을 포함하는지 체크하는 과정이 필요한데 처음에는 chatText.includes("추천")이런식으로 includes를 썼었다
하지만 동시에 두개의 단어를 포함하는지 체크하는 방법을 찾을 수 없어서 해맸다

해결

결국 정규표현식을 사용하여 해결했다
정규표현식으로 특정 두개의 단어를 모두 포함하는지 확인하는 방법은 아래와 같다

const regExp1 = /(?=.*추천)(?=.*먹).*/g;

• ?  :  바로 앞의 글자 혹은 그룹이 1개 혹은 0개 임을 의미
• *  :  바로 앞의 글자 혹은 그룹이 0개 이상을 의미
• .  :  모든 문자 1개를 매칭, 이때 공백 한칸도 문자 1개로 취급됨
• .*  :  길이에 상관없이 문자열의 모든 문자
• ?=  :  ?= 다음에 오는 텍스트를 기준으로 그 이전 텍스트만을 해당 패턴을 적용하여 추출
  (x(?=y) : 오직 'y'가 뒤따라오는 'x'에만 대응)
• (?=.추천)(?=.먹).*  :  모든 문자중에 '추천'과 '먹'이 둘다 포함되는지
  - ?=.*추천  : '추천'이 들어가는 모든 문자열
  - ?=.*먹  :  '먹'이 들어가는 모든 문자열

그리고 match를 이용해 포함 여부를 확인했는데 match를 사용하면 대상 문자열과 인수로 전달받은 정규표현식과의 매칭 결과를 배열로 반환하고 해당하는 값이 없으면 null이 반환된다

if (chatText.match(regExp1)){}

세 자리 마다 콤마 찍기

문제 상황

계산기를 만드는 데 세 자리 마다 콤마를 찍으려고 함

해결

이것도 정규표현식을 사용하여 해결하였다

CalculateResult.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

• \B  :  \b 가 아닌것
• \b  :  문자와 공백 사이. 문자열의 시작, 끝, 개행, 탭, 콤마(','), 구두점('.'), 대시('-') 등이 해당된다
• \d  :  모든 숫자를 매칭. [0-9] 와 동일한 의미
• +  :  앞선 패턴이 최소 한번 이상 반복되는 문자열을 의미
• ?!  :  ?=과 반대의미. ?! 다음에 오는 텍스트가 붙지 않은, 해당 텍스트 기준의 이전 텍스트 패턴만 적용된 텍스트를 추출
  (x(?!y) : 'x'뒤에 'y'가 없는경우에만 'x'에 일치)
• (\d{3})+(?!\d)  :  숫자가 3개만 있는 경우
  - \d{3}  :  숫자가 3개 있는 경우
  - ?!\d  :  뒤에 숫자가 없는 경우
• \B(?=(\d{3})+(?!\d))  :  단어의 경계(시작, 끝, 개행, 탭, 콤마 등)가 아닌 숫자 3개

참고: https://mizzo-dev.tistory.com/entry/JavaScript%EC%A0%95%EA%B7%9C%EC%8B%9D-%EC%88%AB%EC%9E%90%EC%97%90-1000%EB%8B%A8%EC%9C%84%EB%A1%9C-%EC%BD%A4%EB%A7%88%EC%89%BC%ED%91%9C-%EA%B5%AC%EB%B6%84%EC%9E%90-%EB%84%A3%EA%B8%B0

footer 따라오는 문제

문제상황

container의 height를 calc(100% -80px)로 하고 footer의 hegith를 80px로 둬서 container와 footer를 위아래로 고정시켰다
그런데 화면의 세로 높이를 줄이니까 footer가 그거에 따라서 화면 밑에 고정되서 같이 올라오는 현상이 발생했다

해결

footer를 화면을 줄이면 그대로 스크롤 밑으로 사라지게 하고 싶어서 container의 height를 min-height로 바꿔주니까 해결되었다