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

[22:30]
Better learn to slice the garlic nice and thin for the joint.
깜빵에서 마늘 얇게 잘 자르는 법이나 배워두는게 좋을꺼야.
Only it's gonna be on top of Spam for you two, not steak.
당신네들은 스테이크 말고 스팸위에 얹어 먹겠지만.

joint INFORMAL
an establishment of a specified kind, especially one where people meet for eating, drinking, or entertainment.
"a burger joint"

Shut off your meter.
타이머 꺼요.
Bach really owes me one for this.
바흐가 이 신세를 어찌 갚으려나

I ought to arrest your ass right now.
당장 자네를 체포해야겠어
ought1[/ôt/]
1.
used to indicate duty or correctness, typically when criticizing someone's actions.
"they ought to respect the law"
2.
used to indicate something that is probable.
"five minutes ought to be enough time"

If you could, you would have already.
그럴 수 있었다면 진작 했겠지

Besides, I didn't see any of your cops out there.
게다가 밖에 경찰도 없던데

You gonna chase me down the hallway? 'Cause you can't catch me.
복도 추격전이라도 벌이게? 자넨 나 못잡아

As stipulated by your lawyer. A straight-up bad bankin' charge.
자네 변호사도 자수를 약속했지. 은행 일을 조졌으니까

stipulate stip·u·late1[/ˈstipyəˌlāt/]
verb
demand or specify (a requirement), typically as part of a bargain or agreement.
"he stipulated certain conditions before their marriage"
similar: specify,set down,set out,lay down,set forth,state clearly,demand,require,insist on,make a condition of,make a precondition/proviso of,prescribe,impose,provide

straight-up
straight-up[/ˌstrādˈəp/]
adjective INFORMAL•NORTH AMERICAN
honest and trustworthy.
"you sounded like a straight-up guy"
truly so called; genuine.
"a straight-up suspense tale"

charge
an accusation, typically one formally made against a prisoner brought to trial.
"he appeared in court on a charge of attempted murder"
Similar: accusation,allegation,indictment,arraignment,citation,imputation

The dirty money got dangled in front of you, and you hit it like a rising fuckin' tarpon.
눈 앞에 검은돈을 흔들었더니 수면 위로 날아오르는 타폰처럼 덥석 물더군.
And now you're got dead to rights.
덕분에 빼도박도 못하지

dead to rights INFORMAL
in the act of doing something wrong; red-handed.
"he had me dead to rights, so I meekly suffered the rebuke"

He meekly did as he was told.
그는 온순하게 시키는 대로 했다.

rebuke [rɪˈbjuːk]
힐책[질책]하다, 꾸짖다 (=reprimand)
The company was publicly rebuked for having neglected safety procedures.
그 회사는 안전 규정 소홀로 공개적인 질책을 받았다.

How's it feel?
기분이 어떤가
It feels like maybe I'm gonna start pulling your boat backwards.
자네 배를 내쪽으로 끌어당길까 싶네

'Cause I'm no tarpon. I'm a fucking Great White. Don't you know that yet? 
난 타폰이 아니라 망할 대 백상어니까. 그걸 아직도 모르나?
Well. No matter. Even the biggest get landed.
글쎄, 그래서 뭐. 몸집이 커도 다 육지로 끌려오는걸

Yeah, they end up strung up over the dock with their bellies sliced open and people standing around them smiling for pictures.
결국 뱃가죽이 갈라진 채 부둣가에 매달려서 웃는 사람들에게 둘려싸여 사진이나 찍히지

That's what I've always been to you.
난 자네한테 늘 그런 존재였지

A trophy. The trophy.
트로피. 최고의 트로피 말야.

You can't make anything, build anything, earn anything on your own.
혼자 힘으로 뭘 일구거나 얻을 수 없으니까
So you try to boost yourself up by tearing me down.
날 끌어내려서 위로 올라서려는 거지

No, you said it once a while back, about what happens to a lawman once he puts the star on.
아니, 자네가 전에 말했잖아. 법집행관이 별을 달면 사람이 바뀐다고.
Well, seems you were right.
그 말이 맞나봐.
I am a lawman.
난 법 집행관이고
And that star sunk in deep and reminded me.
그 별이 깊이 박혀서 나를 일깨워줬지.

It's more than that, though, isn't it? There are fights a man measures himself by, fights that take more out of him than even winning gives him back.
그게 다가 아니잖아, 본인의 가치를 결정하는 싸움도 있는 법이지. 이겨서 얻는 것보다 잃는게 많지만
Fights that make him.
인간을 완성하는 싸움.
Ali had Frazier.
알리 대 프레이저 처럼

I'm Ali in this parallel.
여기선 내가 알리지.

parallel noun
1. a person or thing that is similar or analogous to another.
"a challenge that has no parallel in peacetime this century"

2. a similarity or comparison.
"he draws a parallel between personal destiny and social forces"
Similar: similarity, likeness, resemblance,analogy, correspondence

22.4 Preview Deployments

바로 배포 시키기 전에 preview 할 수 있어야 하겠지?
깃에서 브랜치 따서 push 하면 알아서 배포가 된다.
일단  enter-message라는 이름의 깃 브랜치를 따자.

git checkout -b enter-message

그리고 코드 수정하고 바로 커밋하면

git add .
git commit -m "New Welcome Msg"
git push origin enter-message

브랜치에서 보낸 코드가 빌드 되고, 볼 수 있는 preview 도메인이 생긴다.
그리고 prod로 배포 하려면
promote to production 누르면 끝!



22.5 Limits in Vercel
https://vercel.com/docs/concepts/limits/overview

Edge Middleware Invocations는 middleware.ts임
한달에 100만회로 제한. 알아서 잘 활용해라.

아래로 가면 내 앱의 사용현황을 볼 수 있다.
https://vercel.com/dashboard/usage

근데 serverless function은 revalidate할 때도 카운팅 되기 때문에 조심해라.
https://vercel.com/docs/concepts/limits/usage#invocations

Vercel은 NextJS앱을 배포하는 플랫폼에선 압도적 1위임.

두가지 방식이 있다. NextJS를 활용 하는.
1. 풀스택 프레임워크 - api route, 미들웨어, 서버컴포넌트,image컴포넌트 등 전부 활용
2. getStaticProps 만 사용 - HTML을 생성하는 정적사이트 생성기(SSG)로 사용

2번의 경우 어디에 배포해도 상관 없음. 
1번으로 활용한 경우는 배포할 곳이 Vercel밖에 없음.Netlify, cloudflare, github pages, heroku도 안됨.
NextJS를 만든 곳이니까. 

이제 배포를 해보자.
1. Vercel 가입(github으로 가입하면 편함)하고 https://vercel.com/dashboard로 가자.
create a New Project 누르고

2. git을 import한다.

3. .env에서 사용하던 변수들을 아래에 입력한다.

일단 저기에 DATABSE_URL이 들어가야 하는데
Planetscale가서 보자. connect버튼 누르고. Prisma를 선택하고. 아래 스트링을 넣음 된다.

4. 그리고 빌드하면 에러가 난다.
환경 변수들 다 추가해서 고쳐주고,
빌드가 다 돼도 에러난다.
Uncaught SyntaxError: Unexpected token '<'
Uncaught SyntaxError: Unexpected token '<'
js,css로딩이 안된다. 미들웨어의 문제인듯하다.
stackoverflow 검색결과 middleware.ts파일에 아래를 넣어주니 해결 되었다.

export const config = {
  matcher: "/",
};

the problem is Next.js is making some request to /_next/* and you redirect request to the login page, those are requests are needed and are never finished. You need to avoid redirect any requests made to /_next/*
Next.js가 보내는 /_next/라는 리퀘스트를 내 코드가 login페이지르 리다이렉트 시켜서 그렇단다.
https://stackoverflow.com/questions/73229148/uncaught-syntaxerror-expected-expression-got-while-using-next-js-middlewar

[20:50~22:30]
You'll be a senior citizen looking for your Social Security check by the time you get out.
출소할 때쯤엔 연금 받는 노인이 되시겠죠.
If Social Security even exists by then.
그 때도 사회 보장제도가 건재한다면요

All you have to do is place the blame where it belongs and grab on.
책임소재만 확실히 하고 올라타요.

You're talking about me cooperating against Axe?
나더러 엑스를 배신하라는 건가요

Spare us the time and effort of feigning loyalty.
시간하는 척 시간만 낭비하지 말고요.

Just shed that dry, flaking skin like the reptile you are and slither away shiny and new.
파충류답게 그 메마른 껍질을 벗고서 반짝이는 새 피부로 스르륵 빠져나가요.

Tell us how he steered you. How he forced you.
엑스가 어떤 식으로 당신을 조종하고 강요했죠?

How he knew about the bad ton of unregulated marijuana and yet made the bank take the cash on board.
액스가 불법 마리화나를 어떻게 인지했는지 그런데도 왜 그 회사 돈을 예치했는지 말씀하시죠.

Get the papers drawn up while I clear my throat.
내가 마음을 정리할 동안 진술서나 준비해요.

You should probably also relocate me while you're at it.
이왕이면 날 딴데로 보내주고요.
I hear Idaho's a nice place for people with certain beliefs.
아이다호주엔 사이비가 득실댄다죠?
Can you be my case officer?
내 담당 요원이 되어 줄래요?
You should put me someplace where spaghetti marinara is egg noodles with ketchup.
스파게티 마리나라가 케첩뿌린 달결 면인 그런데
Will I get to wear a wire?
도청장치도 차야 돼요?
I hear the batteries make your balls warm and tingly
배터리 때문에 불알이 뜨끈하고 따끔하다고... 

This is a closed meeting. Your presence is improper.
비공개 면담인데 부적절한 출두로군.
You interested in what he's selling, or should I take it from here?
약 파는 소리나 계속 들을래? 아니면 나한테 맡길래?
I leave it in your capable hands.
능력자한테 맡겨야지

DB에서 Index를 만들자
DB는 potato를 찾아달라고 해서 기본적으로 a부터 찾기 시작함. 이게 기본 동작임.
하지만 index를 만들면 I부터 시작하는 식.
기본적으로 MsSQL DB는 relation이 생길 때마다 index 자동 생성해줌.

그러나 pscale은 이렇게 동작하지 않고, index를 생성하지 않기 때문에
User의 모든 Product를 보여달라고 하면
pscale은 DB에서 Product테이블 가서 모든 product를 뒤져서 해당 USER의 id를 가진 product를 골라온다.
너무 느리겠지. 그리고 테이블 읽을 때마다 돈 내기 때문에 비용문제도 생김.
다시말하지만 MySQL은 이런 인덱스를 알아서 생성한다.
인덱스를 통해 DB에 어떤 상품이 있는지 알 수있다.
그래서 새 상품 만들면 DB에 새 상품 데이터가 추가될거고, 추가로 index도 업데이트가 된다.
인덱스는 DB와 분리된 것이라 보면 됨.
그래서 id가 1인 유저가 상품을 등록하면 상품이 DB에 추가되고, 인덱스도 업데이트 된다.
그래서 아이디가 1인 유저의 상품을 조회하면 시간이 오래 걸리는 DB를 검색하는 대신
바로 인덱스를 조회한다.

아래 정리 잘 돼있네.
https://spiderwebcoding.tistory.com/6

아무튼 이렇게 바꾸고, 해당 브랜치에 연결 된 상태에서 기존과 똑같이 아래 명령어를 내리면 된다.

npx prisma db push

그리고 deploy request를 보내자.

깃헙처럼 변경된게 보여진다.

메인 브랜치가 업데이트 된걸로보아 merge가 된거다.
그래서 indexes 브랜치를 지울 수 있음. 역할이 끝났거든.
근데 그냥 dev브랜치 따서 지우지말고 계속 푸시하면되겠찌.

planet scale에서 Database를 dev와 prod로 나누어보자.
prod 브랜치로 promote하면 아래 3가지 좋은 점이 있다.
1, 스키마 직접수정 불가
2. 가용성 증대
3. 자동백업

그리고 브랜치를 만들고 연결해보자.

pscale connect carrot-market indexes
//indexes는 새 브랜치 이름

To update your main branch, you can make schema changes to this branch. Once you're ready, open a deploy request with your changes.

브랜치 바뀌면 데이터도 사라짐. 같은 스키마를 갖고 있지만 data는 다르다.

21 FUTURE: REACT 18
21.0 Suspense
21.1 Server Components
21.2 Promise Me Your Love
21.3 Throwing Our Promise
21.4 Parallelism
21.5 Recap

현재는 SWR, Prisma와 사용불가 (alpha에서)

페이지에 대해 신경 쓸 필요없다. 컴포넌트에 대해 신경 쓴다.
몇몇 컴포넌트를 서버에서 만들 수 있다.
SSR이 아니다. SSR은 페이지에 접속하면 페이지가 서버에서 렌더링이 되는거.
페이지 전체 로딩하는데 시간이 많이 걸림. 

서버컴포넌트를 사용하면 페이지 접근 시
클라이언트에서 렌더링된 모든 컴포넌트를 볼 수 있음. 
뒤에서 서버가 리액트 서버 컴포넌트를 렌더링 한다.
렌더링이 끝나면 HTTP를 이용해 렌더링 결과물을 보내준다.


브라우저 상단의 로딩은
서버에서 브라우저 페이지로 다 전송했는지 알려주는 로딩표시

핵심은 컴포넌트 단위로 서버에서 렌더링 할지 클라이언트에서 할지 고를 수 있게된다는 것.
컴포넌트 단위로 SQL을 사용 할 수 도 있다는 것.
https://reactjs.org/blog/2022/03/29/react-v18.html

server component 아직도 개발중.
next.js 13.0에서는 이름을 xxx.server.js로 짓는다고 servercomponent 안됨.
/app 폴더 안에 있는 컴포넌트만 server component임.
https://nextjs.org/blog/layouts-rfc#react-server-components

서버쪾에서 렌더링을 하니까, 유저쪽에서 처리해야 하는 일은 적어짐.
큰 javascript 들 import할일이 적게 됨.
즉 서버컴포넌트 사용하면 서버에서 렌더링이 이뤄지고 결과물만 프론트로 스트림 됨

코인 list를 주는  API를 콜하고, 불려진 코인의 가격을 알아오는 API를 또 각 코인마다 부를 경우를 예를 들어보자.

CoinsServer라는 서버컴포넌트는 그 안에서 List컴포넌트를 불러온다.
여기서 일단 1차 로딩이 되면
List 컴포넌트 안의 Coin 컴포넌트에서 각 코인의 id를 사용해 가격을 불러오는 수십번의 api콜을 한다.
그리고 각 코인들은 로딩이 되는 순서대로 `Coin ${Coin.name} is loading`에서 각자의 가격을 보여주게 된다.

Suspense는 코드에서 로딩 상태를 나타내는 부분을 제거할 수 있게 해주는 API다.
코드에서 로딩 상태에 대해 신경쓰지 않아도 유저가 로딩 상태 화면을 볼 수 있는것.

getStaticProps, getStaticPaths, getServerSideProps와는 사용 못함.
getStaticProps에는 로딩화면이 없으니까!

그러니 위 props나 nextjs를 사용하지 않는 곳에 사용하면 좋음.

suspense를 사용하면, SWR을 사용한 컴포넌트를 찾는다.그리고 그 컴포넌트는 로딩이 완료 될 때 까지 보이지 않는다.
그래서, header,footer같은 곳에 SWR을 쓰면 로딩 할 때 전체 화면안보이게 됨.
그래서 컴포넌트 추출해서 그곳에서 SWR써라.

<Layout hasTabBar title="나의 캐럿" seoTitle="Profile">
    <div className="px-4">
      <Suspense fallback="Loading Mini Profile">
        <MiniProfile />
      </Suspense>
	</div>
</Layout>

next.js에서 Suspense를 지원하니 저렇게 쓰는거고, 
다른 라이브러리에서는 다르게 써야 할 것이야.