0809

• 오노추

  • 스포티파이 크로스페이드 8초로 켜놓고
  • 올리비아딘 the hardest part -> ladies room 들으면 ㄹㅈㄷ

• 이거랑 지금 쓰고잇는 gemini code review bot이랑 뭔 차이지?
  

• 그렇긴해 근데 내 코드는 ㅉㅏ피 ai가 베껴가도 상관 없을 코드라 ㅋ

tailwind

• 클론 프로젝트 리드미를 읽어보면
• "불필요한 CSS를 제거해 번들 사이즈를 최소로 유지하기 위해서" tailwind와 shadcn을 사용했다고 적어놓았다.
• 예전 ossca 과정 때 tailwind에 대해서 잠깐 알아보긴 했는데..
• 얼만큼 제거해주는데? 애초에 tailwind 원리가 뭔데?
  • tailwind는 실제 사용되는 유틸리티 클래스만 생성하는 방식을 사용한다.
  • 어떻게? JIT + Purging을 활용해서
  • 그래서 얼만큼 줄여주는데?
    • 어떤 레딧 유저의 말에 따르면 제대로 성능 측정을 해보진 않았지만,
    • tailwind는 같은 스타일 규칙을 반복해서 안 적어도 되는 반면
    • 일반 css는 여러 클래스에 똑같은 스타일을 적어줘야 한다고 주장한다.
    • 예를 들어 flex box style을 여러 군데에서 쓰는데, 화면 크기가 작을 때는 column으로 정렬하고, 크기가 클 때는 row로 바꾸고 싶다고 가정하자. 요소별로 정렬 스타일도 다르고.
    • 이 때 일반 css를 쓰면 각각의 요소에 클래스를 지정하고 반복해서 적어줘야 되기에 여러번 로딩이 되지만 tailwind를 쓰면 한 번만 로딩 된다는거다.
  • 결론: 일반 CSS를 사용하면 인라인 스타일로 적든, 외부 스타일로 적든 스타일 정보가 HTML 태그마다 중복해서 포함되므로 브라우저가 중복 스타일을 여러번 처리하는 반면, tailwind는 스타일 규칙이 CSS 파일에 한 번만 정의되어 참조하는 이름만 반복되므로 중복 스타일을 줄여준다.
  • https://www.reddit.com/r/tailwindcss/comments/yepc5q/does_tailwind_actually_make_the_bundle_smaller/
• 근데 이게 자동으로 최적화 되는건가?
  • https://v3.tailwindcss.com/docs/optimizing-for-production
  • next.js는 공식문서 보니까 자동으로 optimizing 하는 것 같고,
  • react도 그런가? -> ㅇㅇ
  • 내가 어떠한 프레임워크도 사용하지 않고 순수한 html에 스타일만 tailwind를 사용했더라면? -> 그럼 공식문서에 적혀있는 것처럼 cli 사용하면 해줘야 production 환경에서 optimizing이 되겠지

기초 지식

REST API란

• Representational State Transfer Application Programming Interface의 약자로 웹 서비스에서 클라이언트와 서버간의 통신을 위한 아키텍처 스타일
• https://www.ibm.com/kr-ko/think/topics/rest-apis

html 시맨틱 태그

https://developer.mozilla.org/ko/docs/Glossary/Semantics

article과 section 태그의 차이

• article은 요소의 콘텐츠가 독립적일 때, section은 문서의 구성 요소
• 그래서 처음엔 아 그럼 신문 기사가 있을 때 독립적으로 배포 가능한 부분은 기사 내용밖에 없으니까 얘만 article이고 나머지 댓글 같은건 section이겠네? 라고 생각했는데

The <article> HTML element represents a self-contained composition in a document, page, application, or site, which is intended to be independently distributable or reusable (e.g., in syndication). Examples include: a forum post, a magazine or newspaper article, or a blog entry, a product card, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.

• https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/article
• 댓글도 article로 나타내야 된다고 적혀있음. ㅇㄴ
• 그니까 음 맥락의 의존성을 중점으로 아티클과 섹션을 구분하는 것 같음.
• 댓글만 봐서는 이게 어떤 기사의 댓글인지 알 수 없잖아 (물론 알 수 있는 경우도 있지만) 그니까 독립적인거지. 뉴스기사도 그렇고. 블로그 글도 그렇고. 근데 회사 소개 페이지를 보면 그 회사라는 상위 콘텐츠를 이해하지 않는 이상, 다른 섹션들의 글이 연결이 안되잖아. 이 차이인 것 같음.
• 애초에 article의 뜻을 생각해보면 뭔가 의미가 있는 문장을 의미하잖아 그니까 article이 여러개 뭉쳐서 하나의 section을 만들어낼 순 있어도, section이 여러개 뭉쳐서 하나의 article을 만들어내는 경우는 잘 없는 것 같음. (잘 없다고 했지, 무조건 없다는게 아님)
• https://www.reddit.com/r/webdev/comments/15q5pl9/whats_main_difference_between_section_and_article/