230516_TIL(solo project 진행)

🌱오늘 한 것

• solo project의 개별 아이템 부분을 구현했다.

🌱기억해야할 것

• 1000단위 콤마 찍는 방법!
  const cn1 = n1.toLocaleString('ko-KR');

• styled-component에서 first-child와 last-child 사용하기

const Styled_Button = styled.div`
  button {
    &:last-child { 
      margin-left: 15px; 
    }
  }
`;

• styled-component안에서는 기호 & 가 스스로 (class 컴포넌트안의 this 같은 느낌)를 지칭하기 때문에 & 뒤에 > 기호를 사용해서 접근 가능

const Toggle = Styled.div`
    background:transparent;
    border-color:transparent;

    & > .nav-toggle{
        display:none;
    }
`

• 삼항연산자 중복 사용법 (조건 여러개)
  • axios로 불러온 데이터가 완전히 불러와지기 전에 렌더링을 시도하면
    Cannot read properties of undefined (reading '데이터')
    에러가 뜬다.
  • 이를 방지하기 위해 && 연산법을 사용해 줬다.
  • 그런데 데이터가 완전히 불러와 졌냐 이외에도 조건을 주고 싶어서 if문, switch문 이것 저것 깔짝대다가 삼항연산자를 중복으로 사용해서 해결해 줬다.

      {item && item.type === "Category" && (
        <div key={item.id}>
          <ItemImage
            className="singleItem--img"
            src={item.image_url}
            alt="아이템 이미지"
          />
          <ItemTitleContainer>
            <p># {item.title}</p>
          </ItemTitleContainer>
        </div>
      )}

• event.target.value가 undefined 나올때 해결 법
  • e.currentTarget.getAttribute('얻고자 하는 속성 이름') 로 작성하기.

🌱더 알아볼 것

실시간 세션시간에 강사님이 말씀해 주신 것들에 대해 좀 더 생각해보고 알아보자

• 폴더 구조를 세울 때 고려해야할 것들 중 가장 중요한 것 top3
  • 시스템의 역할을 잘 기억할 수 있는가?
  • 각 기능이 어디에 위치에 있는지 알 수 있는가?
  • 새로 작업할 때 많은 폴더를 안뒤져도 되는가?

• 라우터 6.1 버전의 장점과 단점 (createRouter)에 대해 알아보자.

🌱한 줄 감상

• 위에 hello는 메인 페이지인지 확인하려고 초반에 적어둔 것..무시해주세요.. ^^

오늘은 solo project의 개별 아이템 부분을 구현했다.
가장 곤란했던 부분은 axios로 받아온 데이터를 사용해서 렌더링을 시도하니,
Cannot read properties of undefined (reading '데이터') 에러가 뜬 것...!
그런데 정말 감사하게도 이 에러에 대해 자세하게 기술해주신 블로그 글이 있어서 광명을 찾을 수 있었다... 기록의 힘을 또 한번 느끼고 간다...

그리고 styled-components를 사용하려고 노력했다..! 이렇게 사용하는게 맞는 건지 정확하게는 잘 모르겠지만...확실히 따로 css 파일을 관리하는 것보다는 더 효율적인 것 같다고 느꼈다. 익숙해지도록 노력하자.

그리고 코드를 작성하면 작성할 수록 뭔가 점점 더 지저분해지는 것 같고, 이것보다 더 효율적인 작성법이 있을 것 같다는 생각에 불안해진다...
하지만 다들 초보일 때는 이렇겠지..? 좀 더 클린한 코드를 위해서 더 고민하고 시도해보는 노력을 거듭하자. 그러다 보면 언젠가 나도 시니어 개발자가 되어 있겠지! 파이팅!!

참고 사이트

first-child와 last-child 사용하기

삼항연산자 중첩 사용

⭐⭐Cannot read properties of undefined (reading '데이터') 에러 해결⭐⭐

event.target.value이 undefined일때