[Main_day9]2022.11.18 회고_랜딩페이지 개발

wool·2022년 11월 18일

main-project

회고

목록 보기

14/29

Intro

1118 회고 이슈

잘해오고 있는 부분

<개인>

일찍 기상해서 오전 시간 활용 한 것
개발 시 공식 문서를 적극 참고 한 것
회고작성 한 것

<함께 진행 한 것>

주간리뷰

아쉬운 부분

잠을 많이 자지 않은 것
회고 시 너무 구구절절 기록 한 것

개선할 점

수면 시간을 너무 적게 가져가지 말 것
욕심 내지 말 것!
1시간 이상 고민한 에러 및 기능이 아닌 이상 기록은 아주 간단하게 적는 방향으로 할 것

Today log

랜딩페이지 개발

아이콘과 움직임 모두 구현했다! 이제 위치를 조정하고 스크롤 해도 위치도 고정 되도록 하면 끝

클래스 이름이 없어서.. 이렇게 하는 게 맞는지 의심스럽다.. 일단 기록 해 두고 나중에 멘토님께 여쭤보도록 하자
랜딩 페이지의 레이아웃을 맡으신 분이 컴포넌트에 담아 달라는 요청을 하셨는데 나도 담아야 하나 말아야 하나 고민 하고 있던 지라 바로 넣는 방향으로 수정했다.

완성 코드

scrollImg.tsx

const ScrollImg = () => {
    return (
        <>
        
        <div className="z-50 w-full jus flex items-center justify-center  bottom-5 fixed">
          <span className="absolute animate-ping flex h-16 w-16 rounded-full bg-orange-400 opacity-75"></span>
          <svg className="h-10 w-100 fill-none	stroke-gray-400	" viewBox="0 0 18 35" xmlns="http://www.w3.org/2000/svg">
            <path d="M10.7799 28.0179H7.06376C3.72819 28.0179 1 25.7215 1 22.9143V12.1314C1 9.32429 3.72886 7.02783 7.06376 7.02783H10.7792C14.1148 7.02783 16.843 9.32429 16.843 12.1314V22.9143C16.843 25.7215 14.1141 28.0179 10.7792 28.0179H10.7799Z"  stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
            <path d="M12.4582 31.1336L8.95757 34.0803M5.42871 31.1336L8.92938 34.0803M5.42871 3.94669L8.92938 1M12.4582 3.94669L8.95757 1M8.9777 15.3939H8.86495C8.50389 15.3932 8.15787 15.2721 7.90256 15.0572C7.64725 14.8423 7.50342 14.5511 7.50254 14.2471V10.8321C7.50254 10.2016 8.11596 9.68585 8.86495 9.68585H8.9777C9.7267 9.68585 10.3401 10.2016 10.3401 10.8327V14.2483C10.3401 14.8787 9.7267 15.3951 8.9777 15.3951V15.3939Z"  stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
          </svg>
          <p className="ml-3 font-SCDream3 text-gray-400	">스크롤을 내려 Gallendar에 대해서 확인하세요!</p>
        </div>
        </>
    )
}

export default ScrollImg;

index.tsx

import ScrollImg from "../components/scrollImg"

function Home() {
  return (
    <>

      <ScrollImg />
    </> 
  )
}

export default Home

- 이제 반응형!

tailwind는 작은 사이즈 먼저 시작 해서 큰 사이즈로 작업해야 문제가 없다.

그것을 생각하면서 작업을 진행했다

독서

1장은 어느 정도 이해가 됐었는데 네트워크를 만드는 것 이라는 2장은 너무 이해가 안된다
사실 책을 읽을 여유는 없지만 백엔드 분들과 소통 할 때 도움이 될까 싶어 읽기 시작한 것이다. 하지만 2장부터 이해가 잘 가지 않아 가볍게 읽히지 않기 시작했다
다음 주에 책을 추천 해 주신 멘토님께 이해가 잘 되지 않는데 책을 계속 읽는 것이 맞는지 여쭤보아야겠다