노마드스터디 리액트 10주 5기 7주차 주간회고록

 

7주차

기간:

24.07.29 ~ 24.08.04

 

요약 3줄

• 회사 일로 정신 없었던 한 주... 
• Tailwind CSS를 몇년 전에 써보고 클래스 이름이 길어지고 지저분해 보여서 사용하지 않았다. 하지만 이번 스터디를 통해 다시 써보게 되었고 생각보다 너무 편해서 앞으로 개인 프로젝트는 Tailwind CSS로 할 예정이다.
• 이번주 평일에 못 들은 강의는 주말에 쭉 몰아서 들었다ㅎㅎㅎㅎ 바쁘지만 이렇게라도 스터디를 계속 할 수 있어서 감사하다.

 

---

 

이번주 목표

• 일일 강의, 일일 챌린지, 일일 스프린트 전부 완료하기
• 주간 회의록 작성하고 8월 4일(일) 17시까지 제출하기
• Tailwind Graduation Project 코드챌린지(졸업작품) 제출!

 

결과

평일엔 회사 업무로... 일일 강의와 챌린지를 전부 하진 못했지만 주말이라도 몰아서 하는 중이다. 다음주부터는 다시 정상화 해야지! 다음주는 퇴근 후 약속도 많아서 시간 분배를 잘 해야겠다ㅎㅎㅎㅎ 

 

---

 

일일 스프린트

🔽 2024/07/29 월요일
이번주도 활기차게 으쌰으쌰 보내보자~!! 😎

[⚠️] 캐럿마켓 클론코딩: From #3.0 to #3.5 강의 듣기
[❌] 리액트 공식문서 읽기
[✅] 일일 코드 챌린지
[✅] 프리야 빈야사 요가


🔽 2024/07/30 화요일
회사 프로젝트 배포 전 마무리 단계라 이번 코드 챌린지는 쉬어가야겠다ㅠㅠ

[✅] 회사 프로젝트.....😭 (야근)


🔽 2024/07/31 수요일
[✅] 회사 프로젝트.....😭 (야근)


🔽 2024/08/01 목요일
[✅] 회사 프로젝트..... 😭
[✅] 데드풀과 울버린


🔽 2024/08/02 금요일
[✅] 회사 프로젝트..... 😭
[✅] 친구 청첩장 모임


🔽 2024/08/03 토요일
[✅] 캐럿마켓 클론코딩: From #3.2 to #3.13 강의 듣기


🔽 2024/08/04 일요일

[  ] 헬스
[  ] 주간회고록 작성 및 제출
[  ] Tailwind Graduation Project! 코드 챌린지 제출 

---

이번주 강의 요약

새롭게 알게 된 것 :

1. Introduction

• Utility-First는 Tailwind CSS가 짧고 작은 class 이름을 많이 가지고 있다는 뜻이다. 이러한 class를 결합해서 우리가 원하는 디자인을 생성할 수 있게 한다. 

 

2. IntelliSense

- Tailwind CSS IntelliSense는 VSCode에서 Tailwind CSS를 편하게 사용하기 위한 확장 프로그램이다.

 

- class명에 올려두면 어떤 CSS가 적용되었는 지 확인할 수 있다.

 

3. Card Component

• h-screen은 화면의 높이인 100% viewport height를 제공
• py는 위, 아래에 패딩을 지정해주는 것이다. y축에 패딩을 지정해준다는 뜻
• px는 x축 패딩 설정! (오른쪽, 왼쪽)
• -mb-1 마진값을 음수로 주려면 앞에 -를 붙이면 된다.
•  size-12 너비와 높이를 동시에 설정해줄 수 있다! w-12 h-12와 동일

 

4. Modifiers

• modifier는 다크모드나 라이트 모드에 반응할 수 있게 만들어준다.
• modifier는 큰 화면만을 위한, 중간 화면만을 위한, 작은 화면만을 위한 스타일을 적용할 수 있다. 반응형 디자인을 할 수 있게 도와주는 것
• Tailwind CSS에게 이 스타일은 특정 조건에서만 적용될 수 있게 설명해주는 것이다.
• modifier는 항상 끝에 :(colon)을 가지고 있고 앞에 조건이 충족되면 :뒤에 따라오는 CSS가 적용된다.

// hover시 적용되는 css
hover:green-500

// dark mode시에 적용되는 스타일
// 기본적으로 컴퓨터의 기본 설정을 참조한다!
dark:bg-gray-700

 

5. Tailwind Variables

• ring클래스는 기본적으로 내 객체에 고리를 제공해준다. outline과 비슷해보이지만 우리가 원하는대로 사용자화 할 수 있다.
• 어떤 class는 기본적으로 속성을 정해버리기도 하지만(Ex: w-full) --tw라고 적힌 경우는 우리가 변수를 커스터마이징 할 수 있다. 

 

6. Responsive Modifiers

• Tailwind는 작은 기기 우선으로 적용되고 화면이 커지면 어떤 css를 적용할지 설정할 수 있다.
• 그래서 더 큰 화면에 적용시키는 modifier들이 존재한다.

// sm, md 등등 
// sm: 최소 너비가 640px로 설정된 미디어 쿼리가 만들어지고 우리가 원하는 css를 적용시켜 준다.

@media (min-width: 640px){
// 640 이상 부터 아래 css가 적용된다!
}

 

7. Form Modifiers

• invalid는 hover나 active처럼 sudo class이다!

// 여러개의 modifier를 동시에 사용하는 방법
invalid:focus:ring-red-500

• 형제 선택자 peer

// 형제 선택자가 invalid 할때 빨간 배경 -> valid한 상태에서는 원래 검정색 보여줌
<input type="email" className="peer"/>
<button className="bg-black peer-invalid:bg-red-100">Search</button>

 

8. State Modifiers

//모든 직계 하위 항목을 선택, 하위 항목들에 공통으로 들어갈 css를 부모 항목에서 선언해줌
*:outline-none

 

• has를 사용하면 해당 컨테이너에서 특정 조건을 만족하는 자식을 확인할 수 있다.

// 자식 중에 peer클래스를 가지고 있는 자식이 있다면 적용될 css
has-[.peer]:bg-green-100
has-[:invalid]:bg-green-100

 

9. Lists and Animations

• 리스트 관련 CSS

// 하위 항목들중 홀수 항목들에 css를 적용시킬 때
odd:bg-gray-100

// 하위 항목들중 짝수 항목들에 css를 적용시킬 때
even:bg-cyan-100

// 하위 항목들중 마지막 항목에 css를 적용시킬 때
last:border-0

// 하위 항목들중 첫번째 항목에 css를 적용시킬 때
first:border-0

 

• 애니메이션 관련 CSS

// 360도 반복해서 돌아가는 애니메이션
// loading 아이템 만들 때 유용하다!
animate-spin

// 360도 반복해서 돌아가는 애니메이션
animate-spin

// skeleton은 loading state 같은 것을 의미한다. animate-pulse로 쉽게 구현 가능
// 불투명도가 100에서 50, 100으로 바뀌는 애니메이션
animate-pulse

// 아무것도 없을 때
empty:

 

 

10. Group Modifiers

• group modifier는 아버지의 state에 따라서 자식을 변경하는 것을 도와준다

// group안에 input이 있고 그 input이 focus됐을 때 실행해주는 css
group-focus-within:block

 

11. JIT

• Tailwind는 거대한 css 파일의 모음이 아닌 compiler다!
• 우리가 파일을 저장할 때마다 Tailwind는 파일을 스캔해서 class name들을 추출하고 추출해낸 것들을 실제로 css 코드로 변환시킨다. 미리 생성된 class name 파일은 존재하지 않는다.
• compiler가 우리의 class name을 읽어들여서 class name들로부터 추출해낸 css code를 생성하는 것이 Tailwind의 작동 원리이다.
• Tailwind가 Just in time compiler 로 불리는 이유이다.

내가 원하는 값으로 설정하고 싶을 때

// h-[설정값]
h-[345.22px]
bg-[#d3d3d3]
rounded-[11.34px]

 

Tailwind가 파일에서 클래스 네임을 찾을 위치를 알고 있는 이유는 tailwind.config.ts 덕분이다.

// app, pages, components, src 하위에 {} 확장자를 가지고 있는 파일들은 컴파일해줘!

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./app/**/*.{js,ts,jsx,tsx,mdx}",
    "./pages/**/*.{js,ts,jsx,tsx,mdx}",
    "./components/**/*.{js,ts,jsx,tsx,mdx}",

    // Or if using `src` directory:
    "./src/**/*.{js,ts,jsx,tsx,mdx}",
  ],
  theme: {
    extend: {
      // 클래스 이름을 생성하고 원하는 css를 넣어줄 수 있다!
      margin: {
        orange: "140px",
      },
      borderRadius: "4px",
    },
  },
  plugins: [require("@tailwindcss/forms")],
};

 

12. Directives

// global.css
@tailwind base;
@tailwind components;
@tailwind utilities;


// layer를 확장해주는 역할
@layer base {
	a {
		@apply text-blue-500;
	}
}


// layer를 확장해주는 역할
@layer components {
	.btn {
		@apply w-full bg-black h-10 text-white rounded-sexy-name mt-orange;
	}
}

// layer를 확장해주는 역할
@layer utilities {
	.text-bigger-hello {
		 @apply text-3xl font-semibold
	}
}

• base는 컴파일러가 Tailwind와 함께 제공되는 기본적인 스타일 종류를 두는 곳이다.
  
  • base styles는 Tailwind 가 생성하는 기본적인 reset 및 기본값의 일종이다.
• utilities 안에 컴파일러는 모든 utility class name들을 넣는다 Ex) w-full, border-rounded 등
  • 컴파일러가 생성된 모든 code를 넣는 placeholder이다.
• components
  • 예를들어 버튼 스타일을 형성하기 위한 class 들을 다같이 추상화 하는 컴포넌트이다.
• apply
  • 직접 반복하지 않고 style을 재사용할 수 있는 옵션 중 하나이다.
  • 하지만 컴포넌트 생성해서 컴포넌트를 재사용하는 걸 추천한다.

---

주간 회의와 조별 활동

이번주 활동:

-

 

기억에 남는 것:

-

 

---

칭찬하고 싶은 점

• 주말에 피곤해서 아무 것도 안 하고 쉬고 싶었지만 밀린 강의를 끝까지 들은 것
• 주말 아침에 일찍 유산소 운동으로 하루를 시작한 것

 

고치거나 버려야 할 점

• 업무를 하다가 늦게 잠들어서 아침에 늦게 일어난 것....ㅠ 그렇게 아침 시간을 대충 보냈다... 집중력 골든타임인 아침에 생산선 높은 일을 하자!
• 바쁘다는 핑계로 운동에 소홀했던 것ㅠ