[19:00~20:00]

That I want to thank you, as ridiculous as that is.
감사드리고도 싶어요 우스꽝스럽지만요.

You'll get over it.
털어낼꺼야.

The amount of time you spend feeling bad over slitting your enemies' throats will get shorter and shorter in the future until it's barely a fucking blip.
적의 목을 베고 죄책감이 드는 시간은 갈수록 짧아져서 나중엔 잠깐 따끔하고 말거든.

*blip
noun
1.이거임.
an unexpected, minor, and typically temporary deviation from a general trend.
"an upward blip in house prices"
2.
a short high-pitched sound made by an electronic device.
"computer games can drive you crazy with their blips and bleeps"
verb
1.
(of an electronic device) make a short high-pitched sound or succession of sounds.
"big boxes of esoteric electronics hummed and blipped"
2.
open (the throttle of a motor vehicle) momentarily.
"he straddled the bike and blipped the throttle"


Well, Mr.Wagner, we find ourselves across the table once again.
와그너씨, 또 이렇게 마주 앉았군요.
Only this time, you don't have your master to hide behind.
이번엔 주인님 등 뒤에 못숨겠지만요.
I have Neal, here, though.
닐이 있잖아요.

'Fraid that's not going to be much help.
무슨 도움이 되겠습니까.
Oh, you're facing up to 25 years, friend-o.
최대 25년까지 받을 판인데요
Vente-cinco.(스페인어 = 25)
'빈트 싱쿠'요.

Two bits
25 cents
Two bits is an old slang term for 25 cents. It's based on the sense of the word bit that refers to one eighth of a U.S. dollar, or 12 ½ cents.
'fraid(apostrophe까지 포함)
verb INFORMAL
nonstandard contraction of “afraid” or “I'm afraid,” expressing regret.
"'fraid not, doll"


That's what a bank CEO like you who's driven clear over the lane markers of Know Your Customer, smack into the guardrails of Anti-Money Laundering laws, is staring down.
당신 같은 은행  CEO가 고객 알기 제도라는 중앙선을 넘어서 돈세탁 금지법이라는 가드레일을 박으면 그런 처벌(25년)을 받죠.

That's what a bank CEO like you who's driven clear over the lane markers of Know Your Customer, smack into the guardrails of Anti-Money Laundering laws, is staring down.

stare down = 노려보다. or face정도인가.
phrasal verb of stare
look fixedly at someone, typically in a hostile or intimidating way, until they feel forced to look away.
"the two stared each other down after the match"
"Ron DeSantis' hands-off approach to the pandemic by dressing as the Grim Reaper is staring down punishment from the Florida Bar"
staring down punishment로 자주 쓰이는듯.

hands off!
used as a warning not to touch or interfere with something.
"hands off that cake!"

 

import Document, { Head, Html, Main, NextScript } from "next/document";

class CustomDocument extends Document {
  render(): JSX.Element {
    console.log("Document is running");
    return (
      <Html lang="ko">
        <Head>
          <link
            href="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"
            rel="stylesheet"
          />
        </Head>
        <body>
          <Main></Main>
          <NextScript></NextScript>
        </body>
      </Html>
    );
  }
}

export default CustomDocument;
//NextJS앱의 html 뼈대를 짜주는 역할
//안의 Main은 Nextjs가 앱 컴포넌트를 랜덩링 해주는 것.
//HTML 뼈대를 짜주는 역할을 하는 파일이라 서버에서 단 한번 실행 됨.
//<Main>안에서 _app.tsx가 들어간다.

_document.tsx의 역할.
이 페이지는 단 한번 렌더링 됨.
그리고 아래 html은 크롤라나 bot이 올 때 이미 완성되어있다. SEO에 좋다.

아래는 위치

 

_document.tsx


NextJS의 폰트 최적화는 구글 폰트에 한정되어있기 때문에 구글폰트 링크를 써야 함.
어떻게 최적화 해줄까?
개발자모드에선 확인 안됨.
빌드해야 함

일단 구글폰트를 불러오는 링크(<linkhref="https://fonts.googleapis.com/css2?family=Noto+Sans+KR&display=swap"rel="stylesheet"/>)에는 폰트를 불러올 링크들이 또 있다.
따라서 빌드 시에 이 링키들을 열어서 한군데 모아줌. 그러니 이미 폰트들을 불러와 두는거지. 두단계를 건너 뛴다고 보면 되나? 꽤나 도움이 될듯하다.

 

[18:00~19:00]

If you had more than one of me, you'd have gotten rid of the actual me long ago.
저 같은 인재가 많았다면 진작 절 버리셨을 텐데,
But you didn't because I am a special fucking case, as you might put it.
그러진 않으셨죠. 전 존나 특별하니까요, 사장님 말마따나요
Not so special you didn't need me to platform you.
뭐가 특별해? 내 도움이 필요했으면서

*platform 은 명사만 있음. informal한듯.


I propped you up, brought you along, gave you the keys to a fucking space shuttle.
내가 업어가며 키워 줬고 펀드도 운융하게 해줬지
I thought you wanted to get rich together, and I let that fool me.
같이 돈 벌고 싶은 줄 알았떠니 뒤통수를 맞았네
But your problem, as an investor, is that your idealism is at war with your profit drive.
And one day that will ruin you.
근데 투자자로서 네 문제는, 이상과 이윤사이에서 갈등한다는거야.언젠가 그걸로 무너지겠지.

prop
1.
a pole or beam used as a support or to keep something in position, typically one that is not an integral part of the thing supported.
"300 tubular steel props"
Similar: pole,post,beam,support,upright,brace,buttress,stay,shaft,strut,stanchion,shore,pier,vertical,pillar,pile,piling,bolster,truss,column,rod,stick,point
2.
position something underneath (someone or something) for support.
"she propped her chin in the palm of her right hand"
Similar: hold, upshore up, bolster up, buttress, support, brace, underpin, reinforce, strengthen, underprop

prop up
lean something against something else.
"she propped the picture up on the mantlepiece"
provide support or assistance for a person or thing that would otherwise fail or decline.
"these attempts to prop up struggling industries are foolish"
Similar: subsidize,underwrite,fund,finance,maintain,support,give support to,bolster (up),shore up,buttress,help,aid,assist


bring someone/something along
to take someone or something with you:
Can I bring a friend along to the party?


While your problem, as a boss, as a mentor, as a person, is you see my work product, my company, me, as yours to do with as you see fit.
사장으로써, 멘토로써, 사람으로써 당신의 문제는 내 결과물을, 내 회사를, 나를! 보기에 유용하다 싶으면 당신거로 본단거에요.
see fit (phrase of fit)
consider it correct or acceptable to do something.
"why did the company see fit to give you the job?"
see/think fit (idiom)
to choose to do something because one thinks it is right or appropriate.
She can spend her money as she sees fit.
적당하다고 판단하기 때문에 돈쓴다?
They might see fit to make some adjustments.
조율을 하는게 맞다고 보는 것 같다?

do with
would find something useful or would like to have or do something.
"I could do with a cup of coffee"
give up concern for something; have finished with something.
"I should sell the place and be done with it"


Must mean what? Now you're strong? You can lead?
이제  ? 강해졌다는건가? 누굴 이끌만큼?


I did think I'd feel better about it, though, have some sense of victory or accomplishment.
승리나 성취감을 느낄까 싶었는데 생각보단 기분이 별로네요.


You never did react well to competition.
넌 경쟁을 불편하게 여기니까


But I have come to realize I'll do anything for my own autonomy.
근데 자율성을 지키려면 뭐든 해야겠더군요


So you figured you'd let the government freeze everything that's mine, and then go to your pal Chuck Rhoades and break off your piece and go off on your own?
그래서 정부개 내 자산을 죄다 동결하게 두고 척 로즈 동무한테 부탁해서 네 펀드는 독립시키게?

break off
1.
remove something from a larger unit or whole.
"Tucker broke off a piece of bread"
유의어:
snap off, pull off, sever, detach, separate, dissever
2.
abruptly stop talking.
"she broke off, stifling a sob"
stifle a sob
오열을 참다.
*stifle 억누르다

go off on one's own?
It may be grammatically correct but it does not mean the same thing. "She went on her own" just means she was unaccompanied when she went, perhaps to the movies. "She went off on her own" means she left / went away unaccompanied.
완전히 off해서 떨어져 나가다 독립하다 정도의 의미인듯.


Something along those lines.
대강 그런 셈이죠.


 

 

[17:00 ~ 18:00 ]

Catch up with you later.
다음에 또 얘기하지.


That Boyd move with the cannabis company wasn't self-interest or a greed play. You fucking baited me
보이드한테 대마초 회사를 알려준건 사리사욕 떄문이 아니라 날 낚은거잖아.

self-interest [noun]
one's personal interest or advantage, especially when pursued without regard for others. "the assumption that individuals are primarily motivated by self-interest"
People who are greedy are a little too interested in having something.

Similar: self-seeking, self-serving, self-obsession,self-absorption,self-regard,egocentrism,egotism,egomania,introversion,selfishness,lack of consideration,
inconsiderateness,thoughtlessness,unthinkingness,looking after number one
Opposite:
altruism, generosity


You once said to me you didn't think you learned enough from me yet.
유 원섿트미 유디든t 띵ㅋ 유 런드이너프ㄹ 미, 옛 
Seems like now you have.


I thought we'd come together here.
너랑 한편이 된줄 알았는데


You forced me back into working for you practically at gunpoint.
말그대로 총구를 들이대서 억지로 일하게 된거죠.
at gunpoint = under a threat of death by being shot


So along the way, you thought you'd team up with Chuck to fuck me?
그래서 중간에 척과 손잡고 날 엿먹이기로 했나?

along the way / on the way
If something happens on the way or along the way, it happens during the course of a particular event or process.
You may have to learn a few new skills along the way. 

team up
teamed up; teaming up; teams up
to join with someone to work together
They teamed up to get the work done quickly.
—often + with
Several organizations have teamed up with one another in the relief effort.


I decided it right from the start, as you know. I just forgot for a little while.
원래 그럴 결심이었던거 잘 아시잖아요. 제가 깜빡했을 뿐이죠.


Even though it was me that took you in? Just another fucking math nerd? One with potential to be sure, but one of many.
내가 너를 거둬들였는데도? 흔해 빠진 수학 너드를? 물론 잠재력은 있었지만, 그런애들은 널렸는데.

19.2 Dynamic Imports
유저가 실제 그 컴포넌트를 사용할 것이라고 판단 될 때만 불러오는 것.

import dynamic from "next/dynamic"
const Bs = dynamic(() => import("@components/bs"), { ssr: false });
//이런 식으로 Bs 불러서 사용하면 됨.

// 서버단에서 로딩하지 않게 설정 가능.
// 서버에서 로딩한다면 파일위에서 컴포넌트 불러오고 렌더링 해주면
// nextjs는 서버단에서 일반 HTML로 export 해줄거야.
// 그러나 몇몇 라이브러리는 서버단에서 로딩하는게 불가능함. 그래서 서버단에서 불러오면 에러가 생가겠지.
// 이게 위처럼 {ssr:false}가 필요한 상황임.

props는 원래 하던대로 넣으면 됨. typescript에서 complain하지만 상관없음.
<>
  <Bs hello={true} />
  <Input
    name="phone"
    label="Phone number"
    type="number"
    kind="phone"
    required
    register={register("phone")}
  />
</>

물론 모든 컴포넌트를 다 dynamic으로 하지는 마라. 그럼 로딩이 오히려 이상해지겠지.

19.3 Lazy-load Imports 
만약 Dynamic import가 너무 오래걸린다면? 
loader 컴포넌트를 줄 수 있다.
3초동안 컴포넌트를 불러오는 동안, 옵션을 줄 수 있다.
아래는 dynamic 함수 사용하는거고.

const Bs = dynamic(
   () =>
     new Promise((resolve) =>
       setTimeout(() => resolve(import("@components/bs")), 3000)
     ),
   { ssr: false, loading: () => <span>Loading a big component for you!</span> }
 );


아래는 React18 부터 도입된 suspense기능을 사용하기 위한 설정.
true로 해놓으면 됨. 그리고 컴포넌트를 엘리먼트 부분에서 컨트롤 하는거

const Bs = dynamic(
  () =>
    new Promise((resolve) =>
      setTimeout(() => resolve(import("@components/bs")), 3000)
    ),
  { ssr: false, suspense: true }
);
 <>
  <Suspense fallback={<span>Loading something big</span>}>
    <Bs />
  </Suspense>
  <Input
    name="phone"
    label="Phone number"
    type="number"
    kind="phone"
    required
    register={register("phone")}
  />
</>



미들웨어란?
Request ----> Server ----> 서버내 함수(handler = controler()) ----> DB

그런데 로그인이랑 인증 요청을 처리하려면
컨트롤러 전에 믿르웨어를 사용해야 함.
Request ----> Server ----> 1. log() ----> 2. auth() -----> 서버내 함수(handler = controller()) ----> DB

아래 두개가 미들웨어
1. log(): 요청사항을 log해주는 함수
2. auth(): 인증쿠키 처리해주는 함
여기서 틀린게 없으면 인증 미들웨어가 controller에게 요청사항을 전달해줌

중간에 있느 소프트웨어지
어떤 중간에?
처음 유저가 보낸 request와 종착지(controller) 중간에 있는 함수!!!

node.js에서 많이 사용함.
server 파일이 따로 있음.
이 파일안에 사용하고 싶은 미들웨어들을 정리해놓음

근데 next.js는 서버리스임. server파일 없다.
근데 미들웨어 사용 가능!!!

client/useUser hook 모든 페이지에 사용해야 하는데. 이런걸 미들웨어로 만들어야지

pages폴더
루트폴터 안에 미들웨어 함수 적으면 됨.(12.2.0부터 루트에) middleware라고 적음 됨.
코드를 어디에 적느냐에 따라 스코프 설정이 됨.
페이지 바꿀 때마다 동작하게 하고싶다? -> 루트폴더에 미들웨어 작성
또는 프로파일 폴더 안에서만 움직일 때 동작하게 하고싶다? 해당 폴더에 미들웨어 작성
https://nextjs.org/docs/messages/nested-middleware

import type { NextRequest, NextFetchEvent } from "next/server";

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  if (req.nextUrl.pathname.startsWith("/about")) {
    // This logic is only applied to /about
  }

  if (req.nextUrl.pathname.startsWith("/dashboard")) {
    // This logic is only applied to /dashboard
  }
}

이제 그냥 루트에 있는 미들웨어 파일하나로 다 써야함. 경로로 구분 하면 됨.


middleware.ts라는 이름의 파일을 root에 만들어라.

middleware
1. API 핸들러에 요청 보낼 때도 실행 됨.
2. 페이지 이동할 

19.1 Responses and Redirections

import { NextFetchEvent, userAgent } from "next/server";
import type { NextRequest } from "next/server";
import { NextResponse } from "next/server";

export function middleware(req: NextRequest, ev: NextFetchEvent) {
  const ua = userAgent(req);
  // console.log(ua);
  // if (ua?.isBot) {
  //   return new Response("Please don't be bot"); //no longer works
  // }
  if (!req.url.includes("/api")) {
    if (!req.url.includes("/enter") && !req.cookies.has("carrotsession")) {
      return NextResponse.redirect(new URL("/enter", req.url));
    }
    // if (req.nextUrl.pathname.startsWith("/chats")) {
    //   console.log("chats");
    // }
  }
  // req.geo?.country
  // hosting provider 에 따라 다름.
}

[16:00 ~ 17:00 ]

For this next little stretch -당분간은 
stretch: 기간,
They worked in four-hour stretches.
그들은 네 시간씩 달아서 작업을 했다.


So it's goodbye for now while we take cover to fight.
반격을 준비할 동안 열단 여기서 인사하자.

*take cover
protect oneself from attack by ducking down into or under a shelter.
"if the bombing starts, take cover in the basement"


We'll hold it down for you, boss.
회사는 우리에게 맡기세요.

*hold down
1.
prevent someone from moving by holding them firmly.
"I held him down until the police arrived"
2.
INFORMAL
succeed in keeping a job or position for a period of time.
"holding down two jobs was proving tiring for him"


The princely sum of 570 million.
무려 5억 7천만 달러입니다.

*princely 
sumptuous and splendid.
adjective: sumptuous
splendid and expensive-looking.

(of a sum of money) large or generous (often used ironically).
"she's paying a princely sum"


We're gonna need a war chest for this battle.
이번 전투엔 군자금이 필요할거야

war chest
a reserve of funds used for fighting a war.
a sum of money used for conducting a campaign or business.
"the party's election war chest"


I have always had a plan at the ready for this contingency.
이런 비상상태에 대비해서 늘 계획을 세워뒀죠

*at the ready
prepared or available for immediate use.
"the men walk with their guns at the ready"


We'll be back at those good works soon enough.
조만간 그 재주좀 활용해 봅시다.

17.0 Introduction

Live streaming 구현하려면
엄청난 데이터를 처리해야 해서 강력한 서버가 필요하다.
인코딩, format변경(mp4) 해야 함.
데이터 집약적, 컴퓨팅 집약적임.

역시 우린 서버리스이기 때문에 서버가 없다.


OBS 라이브방송 - 리얼 스트리머들많이 사용함.
or
LiveNow 앱

라이브에서는 RTMP (Real-time message protocol) 사용함.

17.1 Streaming From Dashboard
모든 스트리밍을 하면
URL과 key를 줄텐데 이거 가져가면 키드내핑 당함.
일단 클라우드플레어 같은데서 결제하고 라이브 스트리밍을 해.

그리고 앞서 말한 OBS라이브방송이나 LiveNow같은 앱에 url과 key를 입력하면
OBS에서 보이는게 (https://obsproject.com/) cloudFlare에 올라가게 됨.

OBS

30초 가량 딜레이가 있다.

17.2 Streaming API
이제 API 사용서 해보자.
https://developers.cloudflare.com/stream/stream-live/start-stream-live/

 

Start a live stream · Cloudflare Stream docs

You can start a live stream using the Stream dashboard or the API. After you subscribe to Stream, you can create Live Inputs and begin sending your live video …

developers.cloudflare.com

돈내야해서 안하기로 함.

코드는 작성함.

 const {
  result: {
    uid,
    rtmps: { streamKey, url },
  },
} = await (
  await fetch(
    // https://developers.cloudflare.com/stream/stream-live/start-stream-live/
    `https://api.cloudflare.com/client/v4/accounts/${process.env.CF_ID}/stream/live_inputs`,
    {
      method: "POST",
      headers: {
        Authorization: `Bearer ${process.env.CF_STREAM_TOKEN}`,
      },
      body: `{"meta": {"name":${name}},"recording": { "mode": "automatic", "timeoudSeconds":10 }}`,
    }
  )
).json();
cloudflareId: uid, //비디오 보기 위함
cloudflareKey: streamKey, // 방송의 오너에게 줘야 함.
cloudflareUrl: url,// 방송의 오너에게 줘야 함.
sugar댓글

Using the Stream player (스트림 플레이어 사용)
아래 iframe 태그를 사용하여 웹 페이지에 스트림 플레이어를 넣을 수 있습니다.
$VIDEOID에는 비디오 UID(또는 서명된 토큰)을 지정해줍니다.
```
< iframe
src="https://iframe.videodelivery.net/$VIDEOID"
style="border: none"
height="720"
width="1280"
allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
allowfullscreen="true"
>< /iframe>
```
https://developers.cloudflare.com/stream/viewing-videos/using-the-stream-player/

@cloudflare/stream-react
Cloudflare Stream용 공식 React 컴포넌트
https://www.npmjs.com/package/@cloudflare/stream-react

Displaying thumbnails (썸네일 표시)
방법 1) 즉석에서 썸네일 생성
https://videodelivery.net/${VIDEO_ID}/thumbnails/thumbnail.jpg?time=68s&height=270
방법 2) API를 사용하여 기본 썸네일 타임스탬프 설정
방법 3) 애니메이션 썸네일 생성
https://developers.cloudflare.com/stream/viewing-videos/displaying-thumbnails/

스트리머는 아래 사진의 주황색 부분이 보일텐데 URL,Key 갖고 하면 된다.
OBS나 LiveNow에 해당 정보 넣으면 됨.

https://developers.cloudflare.com/stream/stream-live/watch-live-stream/#view-by-live-input-uid

By sugar 댓글

View by live input uid
/lifecycle 엔드포인트에 GET 요청을 보내 비디오 ID 또는 라이브 입력 uid에 대한 추가 데이터를 가져올 수 있습니다.
https://developers.cloudflare.com/stream/stream-live/watch-live-stream/#view-by-live-input-uid

Live viewer counts for third party players (실시간 시청자 수 보기)
스트림 플레이어는 기본적으로 실시간 시청자 수를 완벽하게 지원합니다. third party player와 함께 사용할 라이브 비디오의 시청자 수를 얻으려면 /views 엔드포인트에 GET 요청을 하십시오.
```
// request
https://videodelivery.net/55b9b5ce48c3968c6b514c458959d6a/views

// response
{"liveViewers": 113}
```
https://developers.cloudflare.com/stream/getting-analytics/live-viewer-count/

View by video id (녹화된 비디오 정보 가져오기)
https://developers.cloudflare.com/stream/stream-live/watch-live-stream/#view-by-video-id

Replaying recordings
https://developers.cloudflare.com/stream/stream-live/watch-live-stream/#replaying-recordings


18 Code Challenge
이제 구현은 다 끝났고 nextjs 배워보자.
그 전에,
1. 판매자와 대화하기(Talk to seller),
2. 예약중 기능, 예약날자 지나면 리뷰남겨달라는 버튼을 생성해주자.?실제 당근처럼 하면 되겠지.
인런거 연습하면 매우 좋을듯.
꼭 해야 할듯.

'클론코딩-캐럿마켓 > 전반' 카테고리의 다른 글

16 NEXTJS IMAGES  (0) 2023.01.12
15 CLOUDFLARE IMAGES - 사진 다루기  (0) 2023.01.11
14 Streams - seeding  (0) 2023.01.11
13 Profile  (0) 2023.01.09
12 동네생활  (0) 2023.01.06

+ Recent posts