개발하는 리트리버

node의 버전은 프로젝트 마다 중요하다.

충족시키지 못하면 아래와 같은 에러가 나오거나 노드 모듈 실패로 이어진다.

'you are using Node.js...'

그렇기에 프로젝트 별로 잘 관리해줄 필요성이 있다.

근데 어디다가 적어둘까? 뭐 메모장에 다 적어라도 둘까?

NOPE

프로출신들은  

.nvmrc 파일을 생성함으로

노드 버전 관리를 끝내버린다.

일단,

.nvmrc파일을 루트에 만들고 버전을 써준다.

'v18.19.0' 만 추가하면 끝.

이후에 터미널에 아래와 같이 실행한다.

$ nvm use

해당 명령어를 실행하면

.nvmrc에 적은 노드 버전으로

노드 버전이 바로 바뀐다! 

EZ!!

평소같이 빌드 버전을 추가하여 젠킨스를 돌렸는데

ERROR: Step ‘Git Publisher’ failed: Tag "  " already exists

해당 에러로 인해서 빌드가 실패했다.

태그가 이미 있다라.. 

근데 태그가 뭐지?

태그(Tag)

태그는 프로젝트 개발과정에서 중요한 체크포인트를 표시하기 위해서 사용된다.

예를 들어 릴리즈 버전을 태그에 넣어서 표시해둔다.

그러하면 나중에 어느 커밋까지 릴리즈가 되었는지 한눈에 볼 수 있다!!

Git, 혹은 Gitlab에서 쉽게 확인해 볼 수 있다.

commit들을 볼 수 있는 곳에서 태그가 달려있는것을 확인할 수 있고,

tag 탭에서는 해당 태그들만 모아서 확인할 수 있다.

여기서 tag 탭에 들어가면 tag들을 한눈에 모아볼 수 있다.

여기서!!

젠킨스에서 새로운 태그를 만드는 과정에서

이미 존재하는 태그 네이밍을 사용하려고 해서 발생한 문제이다.

해당 파라미터 값을 수정해주고 다시 빌드해준다면,

문제 없이 빌드가 된다!

본인의 경우 근본적인 원인은

젠킨스 해당 레포이름을 이전 레포를 지우고 덮어쓰는 과정에서,

이전 태그들이 남아있어서 중복오류가 나타난 상황이었다.

해당 태그 번호를 피해서 빌드하고 나니 문제 없이 빌드가 진행되었다. 

태그는 중복 불가!!!

새로운 프로젝트를 npm install을 실행했는데,

설치 도중에

ModuleNotFoundError: No module named 'distutils'...

의 에러가 발생했다. 

왜 또 이런 시련을..  정말 npm node 이 놈의 버전들이 항상 어지럽게 한다.

원인은 파이썬 버전에 있었다.

disutils module을 파이썬 3.12 버전에서 지원하지 않는 다는것.. 

3.10에서 deprecated, 3.12에서 remove 되었다고 한다..

그래서 깔끔하게 파이썬 버전을 다운그레이드 하면

해당 문제 없이 설치를 계속 진행할 수 있다!!

setuptools 설치로도 해결가능하다고 한다!

참고 : https://stackoverflow.com/questions/77233855/why-did-i-get-an-error-modulenotfounderror-no-module-named-distutils

여담으로 

npm install에서 해당 문제가 있었는데...

yarn install 하니까 아무 문제없이.. 잘 설치 되었다는... 쓰읍

$ npx create-next-app@latest --typescript

해당 명령어로 새로운 nextjs 애플리케이션을 만들려고 하면

생각보다 여러 질문을 묻는다.

What is your project named?

Would you like to use ESLint? 

Would you like to use Tailwind CSS?

..

..

이름은 무엇인가, 형식을 맞추는 ESlint 쓸것이냐, 테일윈드 사용할 것이냐.

무난한 물음들을 한다.

하지만 아래  질문은 살짝 난감하게 만든다.

Would you like to use `src/` directory?

Would you like to use App Router?

Would you like to customize the default import alias (@/*)?

Would you like to use `src/` directory?

해당 질문은 app 폴더의 폴더 구조를 정하는 질문이다.

 no로 답변하면 바로 아래와 같이

app 폴더가 루트에 와있고,

yes를 답변하면 app폴더가 src 폴더 내부에 들어가 있다!

Would you like to use App router?

app router와 page router를 고르는 스탭이다.

yes를 선택하면 아래와 같이,

no는 두 번째와 같이 page라는 폴더가 따로 생성된다.

Would you like to customize the default import alias (@/*)?

해당 방식은 후에 import 할 때

../../../example.js처럼 긴 상대경로를 방지하기 위해

@/check/example.js처럼 alias 사용유무를 의미한다.

하지만 처음에 모든 폴더 구조가 잡혀 있기는 어렵기에

No 하고 넘어가는 것을 추천한다.

후에 언제든지 추가할 수 있다! 

이들을 모두 선택하고 나면 끄으읕! 열코딩만이 우릴 기다린다.

app, page router 체크를 한번 해봐야겠다.

헬스장에서 중요 포인트 중 하나는

헬스장이 어떤 브랜드의 장비를 사용하느냐, 일 것 같아요

서울복합 문화센터 헬스장은

 DRAX의 기구사용중이죠

"에? 그거 좋은거라고 듣지는 못 했는데..?! 별로다!"

라고 생각하신면.. 다시 한번 생각해 보는걸 권해드려봅니다!

물론 여러분이 대회를 준비하는 찐멋쟁이라면

헬스 기구들의 브랜드를 논하는것에 반박할 수가 없겠지만, 

일반 사람들이 운동을 하는데에

엄청나게 영향을 끼칠것이라고 생각하지는 않아요!

한 일년간 일주일에 두세번씩 가면서 운동을 이어가고 있는데

부족함을 느끼지 못하고 운동에 집중할 수 있어요!

건강을 위해 운동하는 일반적인(?) 우리들에게는

헬스 기구의 브랜드 보다는,

꾸준히 나가는 우리의 열정과 정성이라고 생각해요!

그리고 사설 헬스장 처럼 한번에 오래 결제하지 않고도

월별로 이렇게 싼가격에 헬스장을 이용할 수 있다..?

이건 모 참찌~

기본적으로 시간은 아래와 같고,

월~금 : AM 6:10 ~ PM 10:00

토요일 : AM 6:10 ~ PM 7:00

클래스는 이렇죠! 월~토 인 강좌가 4만5천원, 월수금 3만2천원 정도의 가격이에요 (0508현재 기준!)

상당히 저렴하게 헬스장을 이용할 수 있어요,

강좌 등록은

재등록 : 매월 15~20일

성동구민 우선등록 : 매월 21일~22일

이후 선착순 : 매월 23일 이후

원하는 시간대에 맞춰서 5월에 한번 등록해 보는것 어떨까요? 

건강하게 살기 레쯔기릿

개발시에 특정 날짜로 부터, 혹은 특정 날짜까지의

조건을 가지는 기능을 작성할때가 있다. 

라이브러리를 사용하던 new Date() 를 사용하던 말이다.

보통 이런 기능은 작업 후에

기기의 (스마트폰 or 컴퓨터 등) 시간을 임의로 조정해서

테스트 하기 마련이다.

여느날과 같이 작업 후에 디바이스에서 시간을 임의 조정하였다.

하지만 해당 함수가 작동하지 않았다. 함수에 에러가 있나 했지만 

함수 자체에는 이상이 없었다. (콘솔만 괜히 열나게 찍었네)

이유는 간단했다.

SSR환경에서 작업환경에서는 

서버와 클라이언트의 날짜가 서로 다를 수도 있다는 것을 간과한 것이다.

클라이언트 쪽에 날짜 관련 로직을 작성했다면

디바이스에 임의로 조작한대로 시간이 나온다.

내가 8/10일로 디바이스 날짜를 설정했다면 어플리케이션에서도 8/10일로 보여진다.

반면에 서버 쪽에 날짜 관련 로직을 작성했다면

클라이언트의 날짜를 자기고 오지 않고

서버의 시간을 가지고 오기 때문에

정직하게 오늘날짜를 찍어준다.

그래서 임의로 시간을 조작해도 해당 함수가 작동하지 않는 것이었다.....쓰읍

어찌 보면 당연한것 같기도 하고.,.

그렇다면.. 테스트를 용이하게 위해서는

앞으로 날짜 관련 코드를 작성할때는

클이언트 쪽에 작성해야 할 것 같다!?!

채팅창에서 링크를 공유하면 위 이미지처럼

이미지와 타이틀, 서브 타이틀과 링크주소까지 표시가 된다.

우리가 공유하는 링크에는 해당 정보가 없는데 어디서 가지고 오는 걸까?

오늘은 그 부분을 살펴보자.

OG (Open Graph)

이는 콘텐츠의 요약내용을 SNS등에 표시될 때 원하는 데이터를

가지고 갈 수 있게 끔 하는 세팅 값들을 의미한다.

 OG 세팅값들을 미리 읽어와서 위 같은 공유상자를 만들어 내는 것이다.

네이버를 예로 들자면, 아래와 같이 3개의 세팅 값을 보여준다.

해당 OG 값들은

<head> 태그 아래처럼 추가해 주면 된다.

아래는 네이버 홈페이지의 요소에서 가지고 왔다.

트위터에서 보여주기 위해서는

아래 부분을 또 추가해줘야 한다. 

Nextjs에서 반영해 보기

순서는 아래와 같다.

1. OG 태그 추가

2. 서버사이드 쪽에 추가해 주기

1. og태그 추가

nextjs의 <Head> 태그를 사용한 부분이 있을 것이다.

해당 태그 안에다가 관련 메타 내용을 추가해 주면 된다.

pageProps는

_app.tsx 에서 받아오는 props 안에 있으니

이를 사용하면 된다!

<Head>
	<meta property="og:type" content="website" />
	<meta property="og:url" content={pageProps.ogUrl} />
	<meta property="og:title" content={pageProps.ogTitle} />
	<meta property="og:description" content={pageProps.ogDesc} />
	<meta property="og:image" content={pageProps.ogImage} />
</Head>

2.  서버사이드 쪽에 추가해 주기

이제 위에 사용했던 pageProps에

OG값들을 추가해 주어야 한다.

내 경우 getServerSideProps 함수의 리턴값에

해당 값들을 추가해 주었다. (물론 변수명은 변경가능!)

return {
	props: {
		ogUrl: 'url.com',
		ogTitle: 'title is here',
		ogImage: 'image here!!',
		ogDesc: 'description',
	},
};

그러고 나서 해당 페이지 요소를 훑어보면

OG태그들이 추가된 것을 확인할 수 있다.

다만!!!!!!!!!!!

localhost:..... 에서 OG를 테스트하면

잘 작동하지 않는다.

이는 OG태그 정보를 가져오려고 할 때,

로컬 호스트나 개인 컴퓨터 같이

비공개 네트워크에서는 접근할 수 없기 때문이라고 한다.

따라서 테스트해주려면 ngrok를 이용해서 로컬에

퍼블릭 url을 부여해 주고 테스트해야 한다..!!

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

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

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

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을 깔-끔하게 처리할 수 있다.