solar_system_11 solar_system_11

Nextjs든 React든 개발하다보면 useEffect를 이용하여 컴포넌트를 처음 렌더링 할 때 실행해야 할 동작을 구현할 필요가 생긴다. 나의 경우에는 서버에 data-fetch 요청을 넣고, 이 결과로 받아 온 데이터를 이용해 컴포넌트를 렌더링해야 하는 상황이었다. 그런데, 이상하게 api가 두 번씩 호출되는 현상이 계속 발생했다. (사진 참고) useState를 이용해 boolean 상태를 선언하고 한번 실행한 후에 false로 변환하여 if 문으로 실행하지 않도록 했는데도 소용이 없었다. (대강 이런 느낌의 코드) const [refresh, setRefresh] = useState(true); useEffect(() => { if (refresh) { console.log("hello"); c..

변수가 boolean인지, string인지, 아니면 number인지 확인하고 싶을 때가 있다. 그럴 땐 아래와 같이 string 형태로 확인하면 된다. switch (typeof variable) { case "boolean": // variable is a boolean break; case "string": // variable is a string break; case "number": // variable is a number break; default: break; } 끗~

서버 쪽에서 데이터를 가져오는 api와 연결하는 메서드를 작성하고 있었는데, 위 에러가 떴다. 똑같은 형태의 다른 파일은 해당 에러가 안 뜨는데 특정 함수 두 개에만 뜨는 게 이상했지만, 어쩌겠나 해결해야지. 아래와 같이 코드를 수정하여 해결했다. 해결 전: export function getUserInfo() { // Do something } export function getUserLocale() { // Do something } 해결 후: function getUserInfo() { // Do something } function getUserLocale() { // Do something } export {getUserInfo, getUserLocale} 다른 파일은 해결 전 코드가 정상적으로..

웹을 디자인하다 보면 어떤 정보를 담고 있는 버튼 안에 삭제 버튼이 있는 것처럼 버튼과 버튼이 겹치는 것이 불가피할 때가 있다. 이때 눌러보면 두 버튼이 모두 작동하는데, 버튼을 눌렀을 때 하나만 동작하는 것이 일반적이니 이를 어떻게 할 수 있을지 알아보자. 핵심은 event의 stopPropagation()이다. 안에 있는 버튼에 아래와 같이 선언해주면 안쪽 버튼이 눌릴 때 바깥쪽 버튼이 안 눌리는 것을 확인할 수 있다. const onClick = (e: React.MouseEvent) => { e.stopPropagation(); // Do something } 아래는 이를 활용한 예시 코드이다. import "@/styles/components/card.css"; import React from ..

제네릭(Generic)은 여러 가지 타입에서 동작하는 컴포넌트를 생성하는데 사용되는데, 이를 활용하면 재사용성이 높은 컴포넌트를 만들 수 있다. 일반적으로 아래와 같이 작성하며, 함수 사용 시 같이 넘겨준 모든 타입 T에 대해 동작한다. function genericFunctionName(arg: T): T { // Do something return arg; } 코드를 작성하다보면 arrow function ("=>" 이용하는) 형태로 사용해야 할 때도 있는데, 그럴 땐 아래와 같이 작성한다. const genericArrowFunctionName = (x: T) => { // Do something retrun x; }; 조금 더 확장하면 아래와 같이 제네릭 타입(인터페이스)이랑 제네릭 클래스도 작성..