TIL 221217 스터디 피드백

🎆 오늘 한 것

• 테일윈드 스터디 / 피드백 정리 및 복습
• 리덕스 고급 파트 끝낼 것, 리덕스 복습
• 야무님 그리드 강의

🙄 오늘 하려고 했는데 못한 것

• 문제 접근법까지
• 야무님 플렉스 강의

✨ 스터디 복습... 마크업에 대해서😭

월요일부터 금요일까지 협업, 테일윈드 연습 겸 간단한 페이지를 클론코딩 해봤다. 그리고 오늘 오전 피드백을 받았는데... 역시나 좋지 못한 어쩌고 전부 까였음 헤헤😎

마크업은 해도해도 가늠이 잘 안 온다. 어렵다 어려워... 그래도 내가 잘못 알고 있는 것에 대해 피드백을 받을 수 있다는 건 행운이야.

👉 일단 이게 원본 페이지

🎇 헤더 부분

헤더를 보면 이렇게 로고와 Help Center라는 이 페이지를 설명하는 링크가 있다.

이걸 보며 들었던 내 첫 번째 생각은

 <h1>
  <a href="/"></a>
</h1>
<h2>
  <a href="/">Help Center </a>
</h2>

'abstract라는 대제목 아래에 Help Center가 있고, 그 아래에 페이지 내용이 있으니 Help Center는 h2로 지정해줘야 되지 않을까?' 였다. 댓츠노노... 아니었고요.

헤드엔 헤드에 맞는 내용이 있어야 된다고 한다. 이런 상황에선 help center는 그냥 a 태그로만 작성 해놓으면 끝임...

🎇 form

     <form action="/" method="POST" class="어쩌고 스타일">
        <fieldset>
          <legend class="sr-only">검색</legend>
          <div>
            <label for="search"></label>
            <input
              type="search"
              autocomplete="off"
              name="search"
              id="search"
              placeholder="Search"
            />
          </div>
          <button type="submit">
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="36"
              height="36"
              viewBox="0 0 24 24"
              style="fill: rgba(0, 0, 0, 1);"
            >
              <path></path>
            </svg>
          </button>
        </fieldset>
      </form>

요기에서

 <form action="/" method="POST" class="어쩌고 스타일">

이런 식으로 form에 직접적으로 css를 넣었는데, 현업에서 지양하는 방식이라고... form이 문제가 많은 친구인가보다... 주의해야겠다. 생각해보니 수업 시간에도 말씀하셨었음ㅎㅎㅠㅠ

스타일링을 하고 싶으면 div로 한 번 묶어주고 거기다 하는 게 낫다.

아 그리고, 인풋과 레이블은 세트로 같이 다니기 때문에

<label for="">aa</label>
<input type="text" />
<label for="">aa</label>
<input type="text" />

이렇게 묶어주는 어떤 요소 없이 덩그러니 함께 놔두는 것보다는

<div>
   <label for="">aa</label>
   <input type="text" />
</div>
<div>
   <label for="">aa</label>
   <input type="text" />
</div>

이렇게 짝이 되는 친구들끼리 묶어주는 게 낫다.

🎆 내일 할 것

• 알고리즘 강의
• 야무쌤 플렉스 / 반응형 / 헷갈리는 css
• deep dive 클래스

📌 언젠가 해야되는 todo

• preload / modulepreload / prefetch 공부... 언제하지?
• deep dive 19장 프로토 타입
• 테일윈드 다크모드 공부

📚 이번 주 개인 목표

• 프로토타입
• 클로저 ✅
• 타입스크립트 책 보기
• 고급 리덕스 파트 강의 보기 ✅
• 알고리즘 문제 해결 접근법 파트 강의 보기(여유있으면 해결 패턴까지)
• 야무님 강의 플렉스/그리드, 반응형 파트

📝 오늘의 일기

리덕스 툴킷 공부 소감