TIL#12. 하루이틀 밀리다보니..끝없이 밀리네

후...TIL이여
하루 이틀 밀리고...좀더 정리해서...밀렸던거부터 써야지 하다보니 원 부트캠프 끝날지경
안되겠다.
오늘은 react로 만들어놓은 위스타그램을 서버에 연동하여 회원가입, 로그인기능을 만들었다!
프론트엔드와 백엔드와의 대 화합 🧙‍♂️

[CSS] React에서 SASS 왜 사용하는가?

React는 SPA(Single Page Application)이다보니 최종적으로 index.html에 CSS가 한군데 모여서 충돌을 일으킨다. 이를 방지하기 위해 각 컴포넌트별로 CSS를 분리하고 네스팅을 통해 이름일 같아도 컴포넌트가 다르면 다른 CSS로 구분하며, 가독성을 높여 CSS를 효율적으로 관리하기 위함이다.

[CSS] SASS 활용하여 이벤트속성 Nesting처리

Before

      input {
        width: 100%;
      }
      input::placeholder {
        color: #999999;
        font-size: 12px;
      }
      input:focus {
        border: var(--main-border);
      }

After

네스팅 한 뒤 앞에 &를 써라!

      input {
        width: 100%;
        &::placeholder {
          font-size: 12px;
          color: #999999;
        }
        &:focus {
          border: var(--main-border);          
        }
      }

[HTML] img 태그 내 alt 속성 빈값으로 두지 말자

<img src = "이미지 경로" alt="이미지에 대한 설명 (코멘트)">
<img>태그의 alt값은 필수값이 아니다보니 귀찮아서 적지 않는 경우가 많다.
그렇지만 개발의 좋은 습관을 들이기위해 alt값을 적는 것을 잊지말자

img 태그 내 alt값 역할
1. 검색엔진에 노출될 때 alt 속성값으로 검색에 활용된다
2. 이미지 로드에 문제로 엑박이 뜰때 alt값을 화면에 보여준다.

[CSS] nth-child와 nth-of-type의 차이

• nth-child : 부모 엘리먼트의 모든 자식 엘리먼트 중 n 번째
• nth-of-type : 부모 엘리먼트의 특정 자식 엘리먼트 중 n 번째

ex) 5. p태그3 에 css 스타일을 적용하고 싶다면?!

<div class="box">
    <p>1. p태그1</p>
    <span>2. span태그1</span>
    <p>3. p태그2</p>
    <span>4. span태그2</span>
    <p>5. p태그3</p>
</div>

.box > p:nth-child(5){
    color:red;
}
.box > p:nth-of-type(3){
    color:red;
}