[react] z-index, position, map reverse, axios (feat. typescript)

1. z-index

z-index는 같은 레벨에 있는 요소 간에는 적용되지만, 부모 자식 요소간에는 그 우선순위가 적용되지 않는다.

그래서 왠만하면 z-index는 사용하지 않는게 좋다고 한다...ㅠㅠ

헤더와 사이드바 컴포넌트가 모달 컴포넌트의 부모 요소여서 background 짙게 되는 효과에서 배제 된다!!!

해결하려고 노력해봤지만..아직까지 해결 못했다 ㅠㅠ 멘토님께 여쭤봐야지(모달 포탈 사용해 해결 완료~)

2. postion이 fixed 인 컴포넌트 중앙 정렬

position: fixed;
margin: 0 auto;
left: 0;
right: 0;

아직까지도 나한텐 position 개념이 어렵다..ㅠㅠ

얼른 익숙해지고싶다!

3. position : relative vs absolute

relative : 요소 자기 자신의 원래 위치(static일 때의 위치)를 기준으로 배치한다.

absolute: 가장 가까운 위치에 있는 조상 요소를 기준으로 배치한다.

=> 보통 부모가 relative, 자식이 absolute인 경우가 많다.

 

4. 컴포넌트를 map으로 뿌려줄 때 순서 거꾸로하기

arr.slice(0).reverse().map

 

5. 타입스크립트 GET 요청 문서화 예시

진심 타입스크립트 너무 어렵다... 배우는 시간이 있었으면 좋았을텐데, 배움과 프로젝트를 동시에 해야하니 팀원들 모두 눈물을 흘리며 하는 중이다...^^ 자스로 가능했던 모든게 타스에서는 안되는 기분이다! 타스 너 이 녀석!!! ㅠㅠ
얼른 타스에 익숙해지고싶다.. 타스로 타입 정해주는게 너무 낯설다. 감도 잘 안오고...

혹시 나중에 다시 찾을까 싶어 오늘 작성한 API 문서화 코드를 남겨본다.

/* eslint-disable */

import { useState, useEffect, useCallback } from "react";
import axios from "axios";

interface IPostsData {
  postId: number;
  likes: number;
  commentcount: number;
  thumbnail_url: string;
}

interface UsePostsAxiosReturn {
  postsData: IPostsData[] | null;
  loading: boolean;
  error: Error | null;
}

const UsePostsAxios = (url: string): UsePostsAxiosReturn => {
  const [postsData, setPostsData] = useState<IPostsData[] | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState<Error | null>(null);

  const axiosData = useCallback(async () => {
    setLoading(true);
    try {
      const response = await axios.get<IPostsData[]>(url);
      setPostsData(response.data);
    } catch (error) {
      setError(Object.assign(new Error(), error));
    } finally {
      setLoading(false);
    }
  }, [url]);

  useEffect(() => {
    axiosData();
  }, [axiosData]);

  return { postsData, loading, error };
};

export default UsePostsAxios;

 

5. 타입스크립트 POST 요청 문서화 예시

export const commentCreate = async (
  nickname: string,
  profileimg: string,
  comment: string,
  createdat: string
): Promise<void> => {
  try {
    await axios.post(`${url}/comments`, {
      nickname,
      profileimg,
      comment,
      createdat,
    });
  } catch (error) {
    console.error("Error", error);
    throw error;
  }
};