TIL 2022-01-06 NextJs API, Typescript 제네릭 함수, git ignore 적용

NextJs API

 

어제는

Express + Serverless + Lambda와 Nextjs 앱을 연동하면서

ssl3_get_record:wrong version

address: "127.0.0.1" code: "ECONNREFUSED" errno: -4078 port: 80 syscall: "connect"
 
problem with request: connect ECONNREFUSED 127.0.0.1:80

하루종일 이 두개의 에러 고치려고 애쓰느라 TIL을 못썼다.

 

로컬 Express를 사용할떄는 정상적으로 작동했었기에, 처음엔 AWS나 서버리스 측의 문제거나, SSL3이 HTTPS와 관련된 문제라고 하였기에

로컬 Nextjs를 HTTPS 서버측에서 돌리면 될까 싶어 OpenSSL으로 로컬 인증서를 받거나 caddy, ngrok 등의 프로그램을 사용해보았는데.... 결과적으로는 땡이었다. 그래도 새롭게 배운 프로그램들이니 나중에 정리해보자

 

결과적으로 말하자면 저런 에러가 발생했던 이유는 Nextjs에서의 SSR 함수(getServerSideProps. getStaticProps) 등에서 Next api를 호출하려고 했기 떄문이다...

대신 fetch함수를 외부로 빼내고 이를 사용하는 방식으로 쓸 수 있다.

 

Typescript Function Generic

 

CRUD 사이트를 다시 만지면서 너무 Type을 널널하게 대충 작성한거 같아 꼼꼼하게 타입스크립트로 다시 작성중이다.

(Express 처음 공부하면서 실험용도로 만들었는데 생각보다 커졌다...)

 

제네릭 함수를 적용할 것은 이 Hook이다.

const useDebounce = (value:any, delay = 200)=>{
	const [dValue, setDValue] = useState<T>(value);
	const [debounceLoading, setDebounceLoading] = useState(false);
	const didMount = useRef(false);

	useEffect(() => {
		if (didMount.current) {
			setDebounceLoading(true);
			const handler = setTimeout(() => {
				setDValue(value);
				setDebounceLoading(false);
			}, 1000);
			return () => {
				clearTimeout(handler);
			};
		} else {
			didMount.current = true;
		}
	}, [delay, value]);

	return { dValue, debounceLoading };
}

delay 시간이 되기 전에 입력이 들어오면 초기화되고, delay 시간이 지난 후에 setValue가 적용되는 훅이다.

 

문제는 value에 적용된 any다. 어떤 값이던 들어와도 되기 때문에 any라고 예전에 작성했었는데

생각해보면 제네릭을 사용하면 any가 아닌 더 Type-Specific한 값으로 좁힐수 있는 것이다

 

export function useDebounce<T>(value: T, delay = 200) {
	const [dValue, setDValue] = useState<T>(value);
	
    ---생략---
    
	return { dValue, debounceLoading };
}

 

이때 생긴 궁금증이 const를 사용하는 arrow function 같은 경우에는 어떻게 제네릭 함수로 정의할 수 있을까 였는데

export const useDebounce = <T>(value: T, delay = 200) => {

	return { dValue, debounceLoading };
};

도 .ts에서는 잘 되지만 tsx에서는 <T>를 태그로 인식하는 문제가 있다.

 

이런경우

 

const foo = <T extends unknown>(myObject: T) => myObject.toString();
const foo = <T,>(myObject: T) => myObject.toString();

이런 식으로 JSX와의 충돌을 피할수 있다.

 

arrow function을 꼭 써야하는 이유가 있는게 아니면 그냥 function형태가 제일 깔끔한거 같다.

 

 

git ignore 적용

git rm -r --cached .
git add .
git commit -m "Apply .gitignore"

만날 까먹는다!

 

한번 트랙킹한 파일은 gitignore에 추가해도 계속 트래킹하니 스테이징된 파일을 전부 지우고, gitignore가 적용된 상태로 다시 올려놓고 커밋함

git rm -r --cached .

-r은 recursive, 즉 재귀적으로 돈다는 뜻이고

--cached는 로컬에선 남기고 스테이징에서는 지운다는 의미다.

 

 

 

 

그리고 자꾸 정규표현식 기억 안나서 찾아보는데 한번쯤 다시 정리해야할 것 같다.