개발하는 리트리버

배열에 조건에 맞는 친구들이 있는지

혹은 맞지 않는 친구들이 있는지

등을 빠르게 체크할 수 있는 간단 함수를 알아보자

1. some()

이 함수는 조건에 맞는 아이템이 배열에 하나라도 있으면 true 값을 리턴한다.

[1, 2, 3, 4, 5].some((item) => item < 3) // TRUE  1, 2

위에서 1~5 배열 중에 3보다 작은 아이템이 있는가? 의 의미이다.

1,2 두개 존재한다. 고로 리턴 값은 TRUE.

2. every()

프로 출신들은 느낌이 올 것이다.

배열에서 모든 아이템이 조건에 해당하는가?이다.

[1, 2, 3, 4, 5].every((item) => item < 10);  // TRUE
[1, 2, 3, 4, 5].every((item) => item < 4);  // FALSE

10보다 모든 값이 작은 첫 번째 라인은 TRUE,

4보다 작은 값이 있는 두 번째 라인은 FALSE를 리턴한다.

어떨 때 야무지게 써먹을 수 있을까?

저는 약관 동의 같이

여러 개의 on/off를 체크해야 할 때

모든 동의가 클릭되었는지,

하나라도 off인 값이 있는지 등을 체크할 때 간간히 사용합니다.

const Agroup = [A, B, C];
const Bgroup = [D, E, F];

// A, B, C... = {checked: boolean}

const tempAgree = [Agroup.every((item) => item.checked), Bgroup.every((item) => item.checked)];
const isAllAgreed = tempAgree.every((item) => item === true);

A 그룹에 약관들, B 그룹에 약관들이 있을 때,

위 코드는 tempAgree 배열에서 [A그룹 전체 동의 여부, B그룹 전체동의 여부]를

every를 통해서 각각 체크하고

isAllAgreed에서 every를 통해 모두 동의되었는지 체크하는 로직입니다.

물론 some을 이용해서

체크 안 한 게 한 개라도 있는지, 

등의 로직으로 작성할 수도 있고 방법은 무수합니다.

구글에서 third-party cookie 지원을 중지할 것이라고 밝혔다.

그러고 나선가부터 프로젝트에 해당 Warning이 생겼다..

써드파티 쿠키?

쿠키는 1st(자사)와 3rd(타사)로 나뉘는데,

온라인 광고는 주로 써드파티(타사)쿠키가 사용된다.

서드파티 쿠키는 마케팅 관련되서 중요한 역할을 하기에

광고를 운영하고 실행하는 입장에서 꼭 필요한 기능이다.

이렇게 중요한데 서드파티 쿠키를 차단한다니 너무한 거 아니야..?

물론 이런 차단이 새로운건 아니다. 이미 safari와 firefox에서는 이미 차단되어 있다.

다만.. 크롬이 브라우저 시장에 절반 이상을 먹고 있기에 그럴 뿐이다.

구글의 목표는 뭐.. 개인정보를 잘 보호하기 위함.. (혹은 자기 쿠키 써라..?)이라고 한다.

그래서 저거 우짜...?

아직 명확한 답을 내리기는 성급하지만 2개 정도의 방법이 있지 않나 싶다.

1. 어플리케이션에서 써드파티 관련 코드 삭제

해당 앱에는 naver ads, meta pixel 등의 써드 파티 관련 코드가 스크립트로 들어가 있다.

해당 코드를 지우고 나서 어플리케이션을 돌리면 써드파티 관련 Warning이 사라진다.

오? 그럼 바로 지워버려야지~ 하면 Nope.

프로 출신들은 그 이상을 봐야 하니까.

써드파티 관련 부분은 마케팅 팀이나 타 팀에서 같이 참고하고 있을 확률이 크다.

따라서 해당 팀과 상의하고 대책을 생각한 후에 조치하는 것이 필요해 보인다!

아마 이 방법이 정석이지 싶다.

2. 로컬에서 일단 지워!

근데 보기가 너무 안 좋아! 콘솔창이 더러워! 하시면,

크롬 설정 > 개인 정보 보호 및 보안 > 써드파티사용이 허용된..

부분에 localhost:3000 등을 추가해 주면

해당 Warning은 잠잠해진다.

다만...! 임시적이라는 것 인지해두시라!

근데 그러고 나니 또 다른 워닝이..

<></>,

Fragment라고 불리는 이것은 매우 요긴하게 쓰인다.

여러 요소들을 하나로 감싸줄 때,  특별한 태그 없이도 요소들을 묶어주는 역할을 해준다.

Fragment는 렌더링 될 때 DOM에 나타나지는 않지만

그룹화해줘서 하나의 컴포넌트를 하나의 트리구조로 만들어준다.

이를 통해 Virtual DOM에서 페이지의 변화를 감지할 때 좀 더

효율적으로 비교할 수 있게 해준다. 

보통 <></> 로만 쓰지만 값을 추가해줘야 하는 상황이 종종 있다.

예를 들어 map 내부에서 사용할 때이다.

tempValue.map((index) => {
  return(
    <>
     <div>IT</div>
     <div>IU</div>
    </>
  )
});

위의 코드를 돌리면 에러가 발생할까?

물론 에러 없이 화면에 잘 나오긴 한다.

하지만 프로출신들은 단번에 느낄 수 있다.

"key값 관련된 Warning 이 발생하겠구만 이거."

근데.. <></>에.. 어떻게 key 값을 추가해 주지..?

 <></> 태그를

<Fragment></Fragment> 나

<React.Fragment></React.Fragment> 

로 아래와 같이 수정해 주면 key값을 추가해 줄 수 있다!

tempValue.map((index) => {
  return(
    <React.Fragment key={index}>
     <div>IT</div>
     <div>IU</div>
    </React.Fragment>
  )
});

위 처럼 하면 key 관련 Warning을 깔-끔하게 처리할 수 있다.

(크롬 기준) 한번 로그인 하면

다음 부터 해당 페이지 진입 시에 아이디와 비밀번호를 채워준다.

사용자 입장에서는 너무 좋은 기능이지만

개발입장에서는 라벨 컨트롤 등의 이유 때문에

조금 귀찮을때가 있다.

이럴땐 가볍게

autocomplete를 꺼주면 된다.

하지만 공식 홈페이지에 이런글이 있다.

헉 그러면 무조건 자동 완성 되야한단 말인가..?

대신에

autocomplete="new-password"

가 있다.

이를 활용하면 로그인 페이지 렌더링시에

아이디와 비밀번호 칸에

바로 값들이 채워지는 것을 막을 수 있다.

물론 저장된 값을 클릭해서 채우는건.. 막을 수 없다.. (칙쇼.,.)

autocomplete 값에

on/off 사용시 끄고 키는 용도이고

다른 텍스트 값이 오는건 브라우저에게

무슨 값이 있을지 힌트를 주는 느낌이라고 한다.

new-password 설정 시

'나 새로운거 쓸거다?'

라고 이야기해주는 것이기에

자동으로 칸을 채우지 않는다고 한다.

참고 : https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/autocomplete

혹시 자동완성되는 값들을

프런트에서 캐치할 수 있나..... 찾아보는 중이다.

SOS

화면을 한번 클릭해야

해당 state 값들에 적용되고

버튼 disable 조건이 발생하는 등

한박자 늦게 로그인 페이지가 움직이는 문제가 있다..

어질

텍스트로 검색하고 내용을 뽑아내는

구성은 많은 곳에서 볼 수 있다.

여기서 영어를 이용한 검색구현 시

단어 하나하나 체크하기에 쉬운 편이나,

한글로 똑같이 글자 하나하나 비교는 쉽지 않다. 

ㄱ, ㅏ ,ㄷ..... 이걸 언제 나누고 찾지..

그럴 때!

바로 이 라이브러리를 추천한다.

https://www.npmjs.com/package/hangul-js

해당 라이브러리는 한글을 다루기 좀 더 편하게 만들어준다.

// 라이브러리 설치
$ npm install hangul-js

// 페이지에서 import
import * as hangul from 'hangul-js';

Hangul.disassemble('아이유'); // ['ㅇ','ㅏ','ㅇ','ㅣ','ㅇ','ㅠ']

위처럼 '아이유'로 묶여있는 한글을

[ㅇ, ㅏ, ㅇ, ㅣ, ㅇ, ㅠ ]...로 분리해서 배열을 리턴해준다. OMG...

추가적 기능은 아래와 같다.

분리

Hangul.disassemble('이런', true); // [['ㅇ','ㅣ'],['ㄹ','ㅓ','ㄴ']]
Hangul.disassemble('이런'); // ['ㅇ','ㅣ','ㄹ','ㅓ','ㄴ']

병합

Hangul.assemble(['ㄱ','ㅏ','ㄴ','ㅏ','ㄷ','ㅏ']); // '가나다'

검색

Hangul.search('안녕하세요','안'); // 0
Hangul.search('안녕하세요','궈'); // -1

이렇게 3개의 기능 외에도

완성된 글자인지, 자음인지 모음인지, 종성으로 쓰일 수 있는지(이런 것까지..?) 등의

기능을 제공해 준다. 위에 링크로 들어가서 한번 확인해 볼 것을 추천한다!

다음 번에는 이를 활용하여 직접 검색기능을 한번..!

Warning 은 아래와 같다.  " " 속의 주소는 상황마다 다를 듯싶다.

Image with src "/_next/....." was detected as the Largest Contentful Paint (LCP). Please add the "priority" property if this image is above the fold.

프로그램을 돌리는 데에 큰 문제는 없지만, 저 에러가 계속 콘솔창에 떠 있는 건 두고 볼 수만은 없다.

내용은 " 저 주소의 이미지는 LCP야!! 첫 화면에 보이는 이미지라면 priority 특성을 추가해! "

LCP

Largest Contentful Paint의 약어로 웹의 성능을 측정하기 위한 대표적인 지표입니다.

페이지가 처음 로드를 시작하고 나서 화면 내에서 가장 큰 콘텐츠가 렌더링 되는 시간을 의미합니다.

측정 방법은 여기서 간략히 알아보기도 했다! ( https://choq.tistory.com/19 )

해결하기

이는 해당되는 이미지가 화면 내에서 용량을 많이 차지하고 있음을 뜻한다.

이에 priority 특성을 추가해서 로드할 순서의 우선권을 해당 이미지에게 주면 해결!!!

그러면 Nextjs가 해당 우선도를 파악하고 의미 있는 부스트를 보여준다고 한다.

https://nextjs.org/docs/pages/building-your-application/optimizing/images#priority

방법은 Next 이미지 태그에 priority를 추가해주기만 하면 된다. 

 크롬 개발자 창에서 [네트워크] 탭에서 priority 추가해 준 이미지 요청 순서가 빨라진 것을 확인해 볼 수 있다!!

추가적으로 'above the fold'라는 말이 사용되었는데, 이는 처음 보여주는 뷰포트 상태를 말한다.

딱 처음 렌더링 될 때 뷰포트에 있는 이미지에 해당되는 건이기 때문이다.

참고로 이 말은 신문에서 접는 선 위로 처음 보이는 부분을 의미하는 것에서 따왔다고 한다.

해당 우선순위로 다른 컴포넌트 렌더링이 걱정된다면 이미지 자체를 최적화하는 수밖에 없을 것 같다.

sharp library 설치하거나 layout, sizes 등의 props 등을 사용해서 최적화할 수 있겠다.

특히나 layout = 'fill' 일 때 따로 설정되어 있지 않으면 100vw 기준으로 이미지를 불러오기에

사용 크기에 비해서 너무 큰 이미지를 불러오는 등의 일이 있을 수 있으니 한번 체크해 보면 좋을듯하다.

Warning: Cannot update a component (`A`) while rendering a different component (`B`).

To locate the bad setState() call inside `B`, follow.....

 와 같은 귀여운 에러 해결하기!

 일단 에러에 답이 있다. A의 상태를  B를 그리고 있던 중에 변경하려고 하면 에러가 난다! B에 적절하지 못한 setState() 있다고 주장하고 있다.나의 경우는 아래와 같았다.

위 같은 구조에서 B를 렌더링 할 때 B 쪽에서, 

조건에 따라 A 페이지의 setState() 값을 변경하는 부분이 들어있던것!! 

setState() 값을 변경하면 또 렌더링 되는 건 알고 있죠?!

B렌더링 중에 A의 값을 변경하면 A가 또다시 렌더링 되는....

듣기만 해도 벌써 WARNING이 가득해 보이죠?

해결 방법은 2가지라고 봅니다. 

1. A에서 해당 부분에 대한 계산을 미리 해서 최종값만 B로 보낸다.

2. B에서 렌더링이 된 이후에 useEffect 등 의 방식으로 값을 바꿔준다.

저는 첫 번째 방법으로 해결했습니다.

해당 조건을 A로 가지고 와서, 조건을 다 해결하고

필요한 값만 B에 넘겨줘서 렌더링 하게 끔 수정하였습니다!

각자의 컴포넌트 상황을 보고 해결하면 될 듯합니다!

예상치 못한 에러 처리 등을 위해서 루트쪽에 
<ErrorBoundary> 컴포넌트를 추가해서

에러를 관리한다. 오늘은 이를 가볍게 만들고

어떻게 테스트하는지 가볍게 알아보고자 한다!

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, info) {
    //
  }

  render() {
    if (this.state.hasError) {
      return this.props.fallback;
    }

    return this.props.children;
  }
}

위는 기본적으로 리엑트 document에서 제공하는 errorboundary의 모습이다. 

https://react.dev/reference/react/Component#catching-rendering-errors-with-an-error-boundary

클래스형을 기본으로 제공해준다. 후에 함수형으로 변환해보는것도..

그리고 나서는 원하는 프로젝트를 감싸준다. 그러면 끝!

<ErrorBoundary>
	<MyProject />
</ErrorBoundary>

이제 만들었으니 테스트를 해봐야겠죠?

테스트를 위해서 Errorboundary class 내부에 에러발생 함수를 추가하고

버튼을 클릭해서 에러를 유도했다.

하지만 Uncaught runtime errors 만 발생할 뿐 

원하는 방향으로 처리 되지 않았다.

콘솔값을 확인해 보니

this.state.hasError 값이 바뀌지 않았던 것.. 왜와이??

이유는 Errorboundary가 처리하지 않는 에러가 있기 때문이다.

1. 이벤트 핸들러

2. 비동기적 코드

3. SSR

4. 에러바운더리 스스로 던진에러

위 4가지에 대해서는 잡지 않는다.

따라서 내가 유도한 버튼은 4번에 해되기에 

에러를 잡지 않는것이다.

따라서 Errorboundary 클래스에서

아예 다른 컴포넌트로 버튼을 분리하고 에러를 발생시키면

this.state.hasError 값이 바뀌고 확인해볼 수 있다.

물론 이 상황에서도 무섭게

Uncaught runtime error alert창은 발생하지만,

이는 development 모드에서만 발생하지

빌드 후 production 에서는 발생하지 않기 때문에 걱정하지 않아도 된다.

process.env.NODE_ENV = 'production'

몸 담고 있는 곳의

정책별로 상이할 수 있지만 보통 개발할 때 서버를

development / stage / production

나눠 사용한다.

너무나 귀엽게도 난

NODE_ENV 값이

stage 나 production에서는  production,

개발계에서는  development

라고 생각했다..

하지만 저 3개의 서버에서 

NODE_ENV 값은 모두 production 이 나온다. 

저만 바보예요? 네 맞아요

지금껏 development, production 표시를 보고 그거겠다~

싶은 무생각 논리가 불러온 대단한 착오였다. 생각하며 코딩하기.. 메모..

당장 코드를 한 두줄만 읽어 보더라도 절대 그럴 수 없음을 확인할 수 있었다.

혹시나 그렇게 그러려니 생각했던 분이 계시다면..

아닙니다!!

process.env.NODE_ENV 값은?

nextjsd에서 기본적으로 해당 값은 아래와 같다.

[실행 명령어]     =>  [process.env.NODE_ENV]

npm run dev    => development

npm run build  => production

npm run start   => production

각각의 서버에서는 보통 빌드해서 돌리기 때문에 해당 값이 production으로 떨어진다.

개발 서버라고 'development'라고 나오지 않아요!!ㅜㅠ

환경변수 설정해 보기

그렇다면..?! 우리가 원하는

그 개발 서버임을 확인하는 방법은..?

루트 폴더에 있는 해당 파일들에 변수를 설정해 두면 된다. 

우선순위는 env > env.dev... or env.production이다. 상세한 파일이 우선순위가 더 높다.

그러고 나면 화면에서process.env.NEXT_PUBLIC_QWERTY로 접근가능하다.

next에서 설정 시 앞에 NEXT_PUBLIC  prefix를 꼭 붙여 줘야만 한다~!

prefix가 없으면 Node.js 환경에서만 읽을 수 있다.

NEXT 프로젝트에서 prefix 없는 변수는 /page에서만 읽을 수 있고,

클라이언트단 페이지에서는 undefined 값이 나오는 것을 직접 확인해 볼 수 있다.

이제 저기에 development에서는 dev, poroduction에서는 production 등의 값을 넣어서개발서버인지를 확인해 볼 수 있다!

일을 처리하는 것만 생각하지 않고

하나하나 나의 코드에 이유와 의미를 찾으면서 작업해 나가면

좀 더 멋쟁이 개발자가 될 수 있지 않나 싶다.

우다다다 코드만 늘어 두지 않기!

typescript에서 
try-catch 구문을 사용하면서

error 값을 사용하려 하면

특정 버전까지는 error의 타입이 any여서 문제가 안되었지만

이젠 unkown 이 되면서 해당 에러가 발생한다.

어떤 방법으로 해결할 수 있을까?

킹갓 any 를 사용한다

위처럼 error의 타입을 any로 해준다면 에러는 없어진다

역시 애니는 신이야!!

하지만.. any는 다른 케이스에서도 그렇고

타입 스크립트 사용 시 추천되는 방식은 아니다.

isAxiosError 타입가드 사용하기

axios에서 제공하는 타입가드를 사용할 수 있다.

해당 조건을 걸어주면

일반적으로 axios에서 발생하는 에러를 쉽게 케어할 수 있다.

때문에 바로 response 까지의 값을 사용할 수 있다.

보통 서버로 부터 받는 응답은 response.data 에 실려온다.

여기서 response는 옵셔널 한 선택지기에 response 뒤에 ? 를 붙여주어야 한다.

혹은 if 조건문에 해당 내용을 추가해 주어도 된다.

아래는 해당 관련 깃허브 링크이다.

https://github.com/axios/axios/tree/main#typescript

에러 사유를 굳이 디테일하게 노출해야하는 상황이 아니라면

try-catch 에서

error 값으로 분기를 태우기보다

실패 상황 처리만 하는 것도 하나의 팁이지 싶다.

 일반적인 팝업을

보여주는 식으로 말이다.

'서버와의 연결이 불안합니다. 잠시 후에...'

'...기능이 실패했습니다.'

등으로 말이다.

끝