이 durable object는 가만히 없으면 사라짐
저장하려면 durable objects의 저장소를 사용해야 함.

 

웹소켓 페어란?
왼쪽 소켓은 서버, 
오른쪽 소켓은 브라우저
가운데 실은 웹소켓 프로토콜
REAL TIME MESSAGE 

브라우저가 웹 소켓 연결 보내면 백엔드가 요청을 받음.
백엔드는 한쌍의 웹소켓을 만들고 처음꺼는 유저주고 다음꺼는 자기가 받음

왼쪽만 커넥트 누른 상태. 오른쪽은 초기상태
오른쪽도 connect 누르면 기존 내용 불러옴

그러나 cloudflare에서 durable object는 유료가 되었다.

[24:24~]


What is it about me that won't let you break off? Is it Wendy? 'Cause you know I never tried to take her from you.
대체 왜 나한테서 떨어지지 않는건데? 알다시피 난 웬디를 뺏으려 한 적 없어.


And if I have her now, you lost her on your own.
지금 웬디가 나한테 왔다면, 자네가 잃은 탓이지.
It's something to do with her, but it's more.
웬디도 관련은 있지만 그 때문만은 아니라서.


You've accumulated so much you think laws don't apply to you.
높디높은 돈방석에 앉아서 법 위에 있다고 생각하지.
And I'm not talking about the laws of man, the ones written down on paper.
I'm talking about the immutable laws of the universe.
About fairness and right.
법전에 적힌 법이나 말하는 게 아니야. 우주 불변의 법칙 얘기지. 공평과 정의에 관한


Who says we have to live by those? Maybe we can create our own, if we have the audacity.
And who appointed you the keeper of these cosmic rules in the first place? The fucking arrogance.
누가 그걸 지키라는데? 배짱만 있다면 자기만의 법을 만들 수도 있어.
애초에 누가 자네를 진리 지킴이로 삼았는데? 존나 오만하다니까!

au·dac·i·ty [/ôˈdasədē,äˈdasədē/]

noun: audacity
1.a willingness to take bold risks.
"her audacity came in handy during our most recent emergency"
Similar: boldness,daring,fearlessness,intrepidity,bravery,courage,courageousness,valor,valorousness,heroism,pluck,recklessness,adventurousness,enterprise,dynamism,spirit,mettle,confidence,guts,gutsiness,spunk,grit,bottle,ballsiness,moxie,cojones
sand,venturousness,temerariousness
Opposite:
timidity
2.rude or disrespectful behavior; impudence.
"she had the audacity to pick up the receiver and ask me to hang up"
Similar:impudence,impertinence,insolence,presumption,presumptuousness


On my part? You're the one who just said you created your own system of right and wrong, like some fucking deity.
사돈 남말 하시네. 자신만의 가불가 원칙을 만들어? 망할 신도 아니고

de·i·ty [/ˈdēədē,ˈdāədē/]
noun
a god or goddess (in a polytheistic religion).
"a deity of ancient Greece"
Similar: god,goddess,divine being,celestial being,supreme being,divinity,immortal,creator,demiurge,godhead,daemon,numen
avatar,divine status, quality, or nature.
"a ruler driven by delusions of deity"
the creator and supreme being (in a monotheistic religion such as Christianity).
"she raised her head as if appealing to the Deity presiding over the church"


I didn't presume to that. I arrived at it.
의도한건 아닌데 그렇게 된거야.

presume
be 
audacious enough to do something.
"kindly don't presume to issue me orders in my own house"


presumed; presuming
1 to undertake without permission or good reason DARE
presume to question the authority of a superior
2 to expect or assume with confidence feel sure
I presume you'll fly if you do go
3 to suppose to be true without proof
presume a person innocent until proved guilty

A Titan steals fire and gets his liver eaten every day for punishment.
어느 티탄은 불을 훔친 죄로 매일 간을 파먹히고
Another one picks the wrong side in a war and has to hold the world on his shoulders for all time.
엉뚱한 편에서 전쟁한 신은 온 세상을 어깨에 짊어지게됐지
A king tells a secret and has to push a rock up a hill for his trouble.
비밀을 누설한 왕은 그 벌로 바위를 밀며 언덕을 올라야 해
Believe it if you will, or look for the metaphor in it, one thing's for sure.
못 믿겠으면 검색해 봐 다만 확실한 사실은
We are not very good at being fucking happy, are we?
우린 행복을 누리는데 참 소질이 없다는거야
Happy. What's that? Family dinners every night? Playing 18 on the weekend and going to Nevi's at Christmas time?
행복. 매일 가족끼리 저녁먹고 주말엔 골프치고 크리스마스는 네비스섬에서 나는 거?
Some version of it.
대충 그런거


That the kind of happy you're aiming at? No, you know it ain't.
그런 행복을 원하나? 아니, 알면서 그러나
So you gotta aim at me.
그래서 날 노리는군
Right or wrong.
옳고 그르건
And when it's wrong, you gin up some shit to make it work.
자네가 틀렸을 땐 뭐든 지어내고 
Un-fucking-believable! You actually believe you're innocent.
존나 가관이네! 진짜로 자네가 결백하다고 믿는군

gin up - 2번
  1. arouse or intensify strong feelings in someone.
    "the goal of the convention is to gin up the faithful"
  2. generate or increase something, especially by dubious or dishonest means.
    "the trade press has ginned up a controversy"

 

일반적으로 state를 가질 수 없다.
다른 workers간에 공유하고 싶은 데이터의 한 종류
durable objects없이는 불가능해.

해당 코드는 cloudflare의 지역에 복사되어 퍼짐.
근데 한국의 cloudflare접속자와, 독일의 cloudflare접속자 들이 해당 웹사이트 접속하면
해당 지역의 코드가 각각 실행됨. 다른 컴퓨터에서 실행되기 때문에 state를 유지하지 못함
cloudflare workers에 있는 state가 다른 지역으로 복제 되지 않기 때문.
그냥  cloudflare 한정된 얘기임
리턴하면 코드가 죽음.

KV database에 저장하면 해결되긴 함.

모든 사람이 한 방의 채팅방에 연결 되어있다면?
worker코드의 모든 실행들 간에 공유되는  state를 저장 할 수 있는 무언가가 필요 함.
그게 durable object.

durable object와 javascript 클래스를 작성하면, 그 자바스크립트 클래스가 cloudflare에 의해 기억 됨!
이 클래스가 cloudflare메모리로 가게 되고 모든 worker들이 접근 가능하게 되겠지.


carrot market에서 채팅을 할 수 없었던 이유는
next.js에서 실행되는 모든 함수들이 우리가 컴퓨터에 접근 권한이 없는 serverless환경에서 실행되기 때문.
그 환경에서 state는 지속 될 수가 없어. 항상 새 state가 되는거지. durable object는 채팅에 연결된 모든 사람을 유지 시키는 것.

방문자 카운팅 하는 법
홈 경로로 오면 html파일을 주고, 
그 안에 있는 src가 /visit?page=lalala인 이미지를 렌더링 하기 위해
브라우저는 src를 찾아서 request를 하게 되는데
그러면 해당 url(/visit)에서는 DB로 request hit을 했다고 알려준다.

이메일 읽었는지 판단하는 원리
이런 식으로 상대가 메일을 봤는지 안봤는지 확인 할 수 있다.
보이지 않는 이미지 태그를 심어서 메일을 보내면
메일을 읽었을 때 브라우저가 해당 url을 hit하게 됨.
그럼 서버에서는 email이 열렸는지 알 수 있음.

1. wrangler 설치
command line utility  - cloudflare worker 실행 가능

npm install -g wrangler

2. wrangler에서 cloudflare 로그인

wrangler login

그러면 브라우저 뜸. accept하면 됨.

cloudworker는 fetch라고 불리는 javascript function임.

코드를 수정하고 아래를 실행하면 바로 cloudflare 서버에서 publish됨.

npm run deploy

그냥 fetch() 함수임.

export default {
	async fetch(
		request: Request,
		env: Env,
		ctx: ExecutionContext
	): Promise<Response> {
		const url= new URL(request.url)
		if(url.pathname === "/"){
			return new Response(home,{
				headers:{
					"Content-Type":"text/html;charset=utf-8"
				}
			});
		}
		return new Response(null,{
			status: 404
		})
	},
};
// Request 유저가 이동할 url 같은 정보 읬음
// Env에서는 모든 perk를 받음. cloudflare worker에 DB추가 할 떄 사용 가능
// page 방문자 셀 수 있지.

23.3 Workers KV
clourflare는 SQL serverless database에서 작동함.
완전 SQL임.
dev,와 prod을 만들어보자.

//prod 용
wrangler kv:namespace create "view_coutner"
//view_counter는 DB 이름


//dev용
wrangler kv:namespace create --preview  "view_coutner"

그러면 아래처럼 나옴.
binding은 아무거나 해도 됨.

그리고 wrangler.toml에 가서 kv_namespaces를 추가해

23.4 Visit Counter


이 DB의 특징은 eventually consistent(eventual consistency)임.
엄청 많은 숫자의 요청 있으면 모든 업데이트 값이 다를 수 있다.
최종적으로는 마지막 업데이트와 같아진다는 뜻.
cloudflare network내에서 전파되기 때문에 이런 현상 생길 수 있다.


1. 코딩테스트 - 중장기(2일1개?)
1.1 코테 강의수강 이후 프로그래머스 2,3단계 정도 도전!
1.2 Leetcode, Codility, Hackerrank, 프로그래머스 에서 쭉.(들어가고자 하는 기업에서 사용하는 방식 알고있어라.)
대기업 별 
-sk플래닛 - 테스트돔
아래는 카카오 경력 합격잔데, 난이도는 프로그래머스 3.5정도 됐다고 함.
level 1,2의 거의 모든 문제를 꼼꼼히 풀었다고 한다.
https://developer-b.tistory.com/3

2. 테스트 코드 작성 강의(Jest, Enzyme 등 테스트코드 작성 경험과 사용하는 이유 )
유닛테스트를 꼭 작성하자.
테스트 코드는 TDD 같은 거창한 것을 말하지 않아도 중요합니다.
테스트 코드를 작성하는 것은 자신이 구현하려는 코드가 어떤 특성을 가지고 있으며 어떤 위험요소가 있는지를 이해한다는 것이고, 이것이 지속적으로 훈련되어 있다는 것은 좋은 개발자의 특성입니다.

3. Typescript
4. webpack, babel 설정
5. 내가 사용하는 환경 빠삭하게 알기 -  AWS,Lambda,git
6. 클론코딩 강의 다시 듣고 기능달기
7. 새 프로젝트 만들면서 세팅하는 경험
8. CS관련 지식 - 프로그래밍에 대한 서적
9. 코딩에 관한 방법론? - Clean Code(클린 코드) (애자일 소프트웨어 장인 정신)

 

 

'이직준비' 카테고리의 다른 글

이직준비 - 후기모음  (0) 2023.01.31

https://all-dev-kang.tistory.com/entry/%EC%9D%B4%EC%A7%81-4%EB%85%84%EC%B0%A8-%ED%94%84%EB%A1%A0%ED%8A%B8%EC%97%94%EB%93%9C-%EA%B0%9C%EB%B0%9C%EC%9E%90%EC%9D%98-%EC%9D%B4%EC%A7%81-%ED%9B%84%EA%B8%B0

[서류전형]
경력기술서 
프로그래머스나 점핏등 여러 플랫폼에서 글을 작성하면 자동으로  경력기술서를 만들어줌
경력기술서를 노션으로 작성 -  업데이트가 쉽고 링크도 공유하기 쉽고 pdf로 변환이 쉽다.
참고
https://amethyst-fibre-ba3.notion.site/0426d24f9e3f4b33aa2cc53c1d07f610

[포트폴리오]
하지만 저는 자바스크립트, react, next를 테스트해보기 위해 포트폴리오 사이트를 계속 업데이트하고 있었던 만큼 링크로 깔끔하게 제출했습니다.

[과제, 코딩 테스트 전형]
[코딩]
국내 회사의 경우 코딩테스트에 대한 호불호 여부가 많이 갈리고 또 없애고 있는 회사가 생기고는 있지만,
글로벌 빅테크의 경우 실제 면접에서 문제를 던져주고 하는 라이브 코딩 테스트를 많이 한다고 들어서 코테 여부와 상관없이 꾸준히 하려고 노력하고 있습니다.

일주일에 1문제는 풀려고 노력하고 있습니다.

[과제테스트]
스토리북으로 컴포넌트 테스트
Jest와 react testing library로 로직 테스트
바로 커밋 메시지, 컨벤션 지키기, 제대로 된 변수명 쓰기 등 기본적인 것입니다. 
readme 제대로 작성하기입니다
만약 라이브러리나 기술 스택이 제한되어있지 않다면 해당 라이브러리와 스택을 사용한 이유와 기본적인 설계내용을 적어주시면 좋습니다.
vercel 등으로 간단히 배포하고 해당 링크도 함께 보내면 더욱 좋을 것 같습니다



https://code-reading.tistory.com/141
[과제]
1. 순수 자바스크립트 구현
2. 리액트나 뷰를 사용한 구현
3. 자사 서비스의 특정 페이지나 기능에 대한 구현

1. 순수 자바스크립트 구현
- 테스트코드 작성
- 외부 라이브러리 사용 금지
- 모듈단위 개발
- 번들링 사용가능
- ES6 문법 상용
- 반응형으로 구현
- 시멘틱 태그 사용

2. 라이브러리 또는 프레임워크를 사용한 구현
1. 밑바닥부터 직접 구현
해당 회사의 서비스 기능이나 페이지중 일부를 구현해보라고 하는데 실제 기능과 약간의 차이점은 두고 진행이됩니다. 
2. 베이스코드가 주어지고 해당 환경 내에서 구현

환경설정이나 프로젝트 구조가 어느정도 잡힌상태로 전달이 되고 요구사항에 맞춰 구현합니다.

해당 서비스의 가장 주요하고 복잡한 페이지와 기능을 구현하라고 주어집니다.
예를들어 커머스서비스라면 상품리스트 페이지와 상품 상세 페이지 그리고 그 안에있는 필터 같은것들이 될것이고 
특정 정보를 제공하는 서비스라면 그 정보를 제공하는 페이지를 구현하라는 식의 과제입니다. 
리드미는 상세하게 작성하라고 말씀 드리고 싶습니다


https://yohanpro.com/posts/programming/career/2

기술면접(코딩테스트) 보면 됨


개발과제 팁
https://medium.com/@gojbpark/%EA%B0%9C%EB%B0%9C-%EA%B3%BC%EC%A0%9C%EB%A5%BC-%EC%A4%80%EB%B9%84%ED%95%98%EB%8A%94-%ED%8C%81-10%EA%B0%80%EC%A7%80-372d00c3db8


 

'이직준비' 카테고리의 다른 글

이직준비 항목들 - being updated continuously  (0) 2023.01.31

+ Recent posts