3tamp 첫 화면 개발

오늘 한 내용

• router 사용
• 첫 화면 스타일링
• svg 파일 사용한 눈 내리는 효과

오늘 배운 내용

router 6.0 버전부터 사용 방식 변경.

• switch 사용 x
  

  <Route path="/" component={Home} />
  
  version 6.0 이상 작성법
  <Route path="/home" element={<Home />} />
  

• useHistory ⇒ useNavigate로 변경

const navigate = useNavigate(); 
const onClick = () => { navigate("/home"); };

 

position: absolute 일 때는 margin: 0px auto 혹은 text-align으로 가운데 정렬이 먹히지 않는다.이 설정이면 가운데 정렬 완료!

margin: auto; 
left: 0; 
right: 0;

캡쳐

잘보면 눈이 내린다!!!

 

소감

알고리즘 한다고 오랜만에 리액트를 했더니 그새 다 까먹었다. 옛날에 내가 했던 프로젝트를 역으로 들어가 살펴보는 이 이상한 현상... 그래도 직접 만드는 코딩을 하니 너무 즐겁다 😉

이번에는 디자인에 조금 신경쓰고 싶어서 그림도 직접 그리고 svg를 이용해 눈내리는 효과도 만들었다. 조금 더 완성도 있는 프로젝트를 완성해서 주기적으로 사용해야지!

오류 일지

아직 없음.