영어하는개발자산가누렁이

4.9 Responsive Modifiers

일반적으로 반응형은 Desktop먼저 생각하고 mobile로 바꾸는데,
tailwind는 모두 mobile에 먼저 적용된다.

sm:, md:, lg:, xl:, 2xl: ...etc

4.9 Responsive Modifiers part Two - grid속

mobile에서 landscape:, portrait:

4.4 Modifiers

4.5 Transitions,
4.6 Modifiers for Lists (07:00)

4.7 Modifiers for Forms
Group modifier

4.8 More Modifiers 
focus-within:bg-slate-800
required:border-2 border-yellow-400
invalid:border-2 border-red-400
placeholder-shown:border-2 border-red-400
disabled:, valid:

peer modifier - input의 state에 따라 다른 엘리먼트 상태 바꿀 수 있다.

peer는 결국 ~ 셀렉터사용하는 거니까 peer 일리먼트가 먼저 와야 함.
peer-invalid같은건 그 다음 시블링으로 와야하는거지

:marker

file:

4.0 Intro

utility-first css framework
클래스 많이 갖고 있는 엄청 뚱뚱한 css다.

부트스트랩이랑 다른점은뭐지?
=> 부트스트랩으로만들어진 데 가면 다 똑같음.
=> 정해진 스타일이 없고, 조합하면 다르다는거

vscode extension -> tailwind css 받으면 자동완성 됨
https://marketplace.visualstudio.com/items?itemName=bradlc.vscode-tailwindcss
hover하면 tailwind의 소스도 보임

경고도 해줌

4.1 Test Drive part Two
자동완성 안되면 control + i 눌러
치다가 지워서 자동완성 또 안되면 control + space 눌러

4.2 Test Drive part Two, 4.3 Test Drive part Three

vscode에서 이모지나오게 하려면:
Windows: 윈도우+마침표
Mac: 커맨드+컨트롤+스페이스바

nextjs 셋업

https://nextjs.org/docs/getting-started

타입스크립트 사용하는 nextjs 어플 설치(react18버전이 정식출시된 상태라 딴짓 할 필요 없음. 아래처럼 하면 됨.)
타입스크립트 싫으면 --typescript 빼고.

npx create-next-app@latest --typescript

공식 릴리즈 전 코드상태 3단계
1. Alpha
2. Beta
3. RC(Release Candidate)
RC는 확정된 버전임. 다만 오류같은거만 수정하겠지.
강의 당시의 리액트 18은 RC이고, 지금은 정식버전이다.
RC버전 따로 설치하는 방법 있음.

tailwindcss, postcss, autoprefixer 설치

npm install -D tailwindcss postcss autoprefixer

npx tailwindcss init -p

아래 처럼 파일 두개가 생김

참고,
NPM - node package manager
NPX - node package execute
NPX는 Run a command from a local or remote npm package
npm 패키지의 커맨드를 실행 시키는 명령어.
npx는 npm run과 비슷하다는 것.
-p는 npm에서 package의 줄임말.
-p옵션으로 특정된 패치지는 실행 명령의 path에 포함이 된다 = 같이 섞여서 바로 실행된다(?)
로컬 프로젝트에 해당 패키지가 없으면, 실행된 프로세스의 PATH 환경 변수에 추가된,  npm 캐시 안의 폴더에 설치된다.
즉, 바로 설치하고 실행 시킨다는거 같음.
https://docs.npmjs.com/cli/v7/commands/npx

아래처럼 두개가 생김 postcss.config.js 는 안건드려도 됨

tailwind.config.js를 아래처럼 수정해준다.

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [
    "./pages/**/*.{js,jsx,ts,tsx}",
    "./components/**/*.{js,jsx,ts,tsx}"],
  theme: {
    extend: {},
  },
  plugins: [],
}
//tailwind를 어디에서 사용할 것인가 설정
//./pages/**/*.{js,jsx,ts,tsx}의 의미는
//page폴더 아래 모든 폴더(**)의 모든 파일(*)에서 {}안의 확장자들.

그리고 global.css에 아래 내용을 추가한다.

아래 다 있음.
https://tailwindcss.com/docs/installation/using-postcss

계속...

두시간 동안 영어로

오늘의 context: 퇴근 전 두시간 남았으니까 그때까지는 실시간으로 도와줄 수 있고, 퇴근 후에는 메시지 남겨놓으면 최대한 빨리 답장하곘다고 하는 상황.

오늘의 해석: [ 두시간 동안 있을거야, 하지만 언제든 메시지 보내도 돼 최대한 빨리 답장할게 ]

오늘의 blocks: [ for a couple of hours, but you can send a message, I will, be here, and I will respond, any time, as soon as possible ]

오늘의 문장: [ I will be here for a couple of hours, but you can send a message any time and I will respond as soon as possible ]

대부분의 경우 영어로?

오늘의 context: 앞에 어떤 문제가 있고, 경험에 비추어 봤을 때, 단순 한 걸 까먹었을 거라고 말하는 내용.

오늘의 해석: [ 이러한 경우들에는, 대부분의경우 그냥 API call 전에 어떤 값을 세팅하는걸 잊어 버린거야. ]

오늘의 blocks:[ most of the time, some value, in these cases,  we , set, forget,  just, to, before the api call ]

오늘의 문장: [ In these cases, most of the time we just forget to set some value before the api call ]

코드 리뷰하자 영어로?

오늘의 context: 앞으로 코드 리뷰를 어떤식으로 진행 할지 방식에 대해 이야기 하는 상황.

오늘의 해석: 문장이 기니까 두개로 나눴다.
[괜찮다면, 싱크를 맞춘 다음, 만나서 가능성있는 원인들을 리뷰하던가]
[ 빠른 처리를 위해 code snippet으로 코드 리뷰를 해도 된다.]

오늘의 blocks:[ we can meet and review, the possible causes, if you like, after the sync up, ]
[a code review, or do, offline, to accelerate the process, with a code snippet, ]

오늘의 문장: [ If you like after the sync up we can meet and review the possible causes or do a code review offline with a code snippet to accelerate the process. ]

다른 무언가 영어로

오늘의 context: 이슈의 원인을 찾고 있는데, 그 이슈가 발생하기 전에 무언가 이상한 일이 벌어지고 있어서 추측하는 상황.

오늘의 해석: 이슈를 일으키는 call 전에, 발생하는 어떤게 있을거야.

오늘 blocks: [ maybe, there is, else happening, something,  the call, before, causing, the issue.  ]

오늘의 문장: [ Maybe there is something else happening before the call causing the issue.  ]