gipyoo / blog-study Goto Github PK
View Code? Open in Web Editor NEW블로그 스터디
블로그 스터디
알아야 할 도커지식
FROM
에서는 기반이 되는 도커 이미지를 지정COPY
명령으로 빌드할 머신에 있는 파일을 컨테이너에 복사RUN
명령은 빌드 시에 컨테이너에서 명령어를 실행ENTRYPOINT
명령과 CMD
명령은 컨테이너가 기동할 때 실행하는 명령어ENTRYPOINT
에 기본적으로 바꿀 필요가 없는 부분을 정의CMD
에 기본값 인수 등을 정의-t
옵션으로 이미지의 이름과 태그를 지정--squash
옵션을 사용하면 한 개의 레이어로 통합 (아직 실험적 experimental 기능)YAML, JSON 형식으로 작성한 선언적 코드(매니페스트)로 리소스를 관리
같은 이미지 기반의 컨테이너 수를 자동으로 늘리거나 줄여 부하를 분산함
어피니티, 안티어피니티(https://kubernetes.io/ko/docs/concepts/scheduling-eviction/assign-pod-node/#%EC%96%B4%ED%94%BC%EB%8B%88%ED%8B%B0-affinity-%EC%99%80-%EC%95%88%ED%8B%B0-%EC%96%B4%ED%94%BC%EB%8B%88%ED%8B%B0-anti-affinity)을 사용해 워크로드 특징이나 노드 성능을 기준으로 컨테이너를 어느 노드에 배치할 것인지 제어 가능.
쿠버네티스를 사용하면 컨테이너의 이동성과 경량화를 활용한 빠른 개발과 전체 시스템의 배포 자동화를 구현할 수 있다.
생략합니다. 나중에 여유 있으면 하겠음
마스터
와 k8s 노드
로 구성마스터
는 API 엔드포인트 제공, 컨테이너 스케줄링, 스케일링 등을 담당노드
는 컨테이너를 기동시키는 노드컨테이너를 기동하기 위해 사용되는 리소스. 내부적으로 사용하는 것외 사용자가 직접 관리할 수 있는 것은 아래 8가지.
서비스 디스커버리와 클러스터 외부 접속이 가능한 엔드포인트 제공하는 리소스.
설정과 기밀 데이터를 컨테이너에 담거나 영구 볼륨을 제공하는 리소스.
클러스터 동작(보안 관련 설정이나 정책, 클러스터 관리성을 향상시키는 기능)을 정의하는 리소스.
내부의 다른 리소스 동작을 제어하기 위한 리소스.
아래 3가지 이유로 저자는 서비스/스테이징/개발 환경으로 나누는 용도 보단 마이크로서비스를 개발하는 팀 단위로 나눌 것을 추천.
CLI 도구인 kubectl
을 사용해 마스터의 API 요청을 보내 클러스터를 조작
clusters
, users
, contexts
3가지 정보로 구성clusters
는 접속 대상 클러스터 정보users
는 사용자 인증 정보contexts
는 사용할 cluster와 user, 네임스페이스 조합.kubectx/kubens(https://github.com/ahmetb/kubectx) 사용하면 컨텍스트, 네임스페이스 전환이 kubectl 명령어를 사용하는 것 보다 편리함.
create
명령어get pods
명령어로 확인 가능delete
명령어--wait
옵션은 리소스 처리가 끝나고 명령어가 종료됨. (기본은 명령어가 비동기로 실행, 기다리지 않는다)--force
옵션apply
명령어apply
는 kubectl create
와 동일create
따로 사용하는 것 보단 kubectl apply
로 통일하는 것이 편리--server-side
옵션을 사용--field-manager
옵션을 통해 kubectl 이름을 바꿔 충돌감지가 가능함.개인생각 노트: 충돌 해결을 직접해야 하기 때문에 여러 사용자가 동일한 리소스를 관리해야 한다면 매니페스트에 대한 버전 관리가 필요해보임 (argocd?)
rollout restart
로 디플로이먼트 등의 리소스와 연결되어 있는 모든 파드를 재기동.개인생각 노트: 롤 아웃이 레플리카셋과 같은 여러 팟 그룹을 swap하면서 이뤄지기 때문에 단독 팟보다 더 높은 추상화 리소스가 요구되는 것 아닌가하는?
generateName
값에 난수를 붙여 팟 이름을 자동생성개인생각 노트: apply에서 사용할 수 없는 이윤 아마 본래 기존 리소스를 수정하는 기능이니깐 매번 새로 난수 이름 생성하는 내용을 허용하게 되면 본래 기능이 무의미해지기 때문인듯?
wait
명령어는 리소스가 지정한 상태가 될 때까지 대기함.--for
옵션 뒤에 상태 지정--timeout
옵션으로 최대 대기 시간 지정 (기본은 30초)apply
실행 시, 디렉토리 지정 가능-R
옵션은 하위 디렉토리의 매니페스트 파일까지 재귀적으로 적용됨.이전 포스팅에 올렸던 [MVVM in Reactjs]에서 언급했던 다양한 상태관리 라이브러리 중에 가장 최근에 나온 새로운 패러다임의 Recoil에 대해 조금 기본적인 내용들을 알리고자 합니다. 이 글을 읽는 여러분들은 기본적인 Recoil의 사용방법을 익힐 수 있어서 이후 간단한 React 프로젝트에서 사용할 수 있을 겁니다.
‘상태관리’ 라는 키워드가 프론트엔드씬 전반에 중요한 키워드로 자리매김한지 꽤 많은 시간이 지났습니다. 이렇게 상태를 관리하는 방식들 예를 들어 Flux 패턴과 같은 아키텍쳐들은 이런 상태관리들을 잘 하기 위해 나온 패러다임입니다.
다만 이런 단방향 상태 관리 패러다임들은 이를 구현하기에 너무 복잡하고 많은 코드를 작성해야했기 때문에 React에서는 컴포넌트 내부에서 편하고 쉽게 동작하는 Hook을 공개하였고, 이후 Hook처럼 동작하는 전역 상태관리 라이브러리 Recoil을 만들었습니다.
Recoil이 나온 이유는 앞선 문제 뿐만 아니라, 전역 상태관리를 위해 거대한 트리를 다시 렌더링 시키는 경우도 빈번히 발생했다는 점과 단일 값만 저장할 수 있는 컨텍스트에 대한 문제로 인해 코드 분할이 어려운 상황을 야기시켰기 때문입니다.
Recoil의 공식 문서에서는 Recoil이 해낼 수 있는 상황을 [동기] 페이지에 작성해 놓았는데, 개중 중요한 특징들을 가져와 보았습니다.
Recoil로 정의된 상태는 하나의 그래프를 그리게된다. 정의된 atom에서부터 여기서 파생된 selector 그리고 컴포넌트까지 하나의 단일 상태가 이어지게 된다. 이를 알면 추후 상태의 흐름에 대해 조금 더 깊은 이해를 할 수 있게 됩니다.
이제 우리는 Recoil의 기본적인 기능들과 어떻게 사용하면 좋을지 코드와 함께 확인해 보겠습니다.
const UserId = atom({
key: 'User/id',
default: 0
})
atom은 두 가지의 기본 key와 default 속성으로 만들 수 있다. default으로 선언된 값을 초기 화면 렌더링 값에 사용이 가능하다. 이와 관련해서 비동기 데이터 통신과정에서 응용할 수 있는 방법이 있는데, 이는 다음 함수를 안 후에 사용이 가능합니다.
Atom은 앞서 말했듯이 단일 원자의 상태로 이를 다수의 컴포넌트와 파생상태 selector가 구독하게 된다. Atom은 Writable한 상태값으로 컴포넌트 내부에서, useRecoilState, useSetRecoilState, useRecoilValue 등의 다양한 함수를 통해 get, set 인터페이스를 불러올 수 있습니다.
const User = selector({
key: 'User/data',
get: async ({get}) => await getUserData(get(UserId))
})
User라는 selector는 UserId의 파생 상태로 UserId가 변경되면 selector도 컴포넌트처럼 상태를 구독한 상태이기 때문에 변화를 일으키게된다. 예시에 나와 있는 코드는 get이라는 파라미터에 비동기 함수를 사용한 것으로, User라는 selector의 값을 불러올 때 api를 불러온 후 해당 값을 주게 된다. 이런 비동기 로직들을 잘 수행하기 위해서 Loadable이라는 값도 주게 되는데 이부분은 심화편에서 다루도록 하겠습니다.
코드에서 보이듯이 selector는 get과 key를 기본 속성으로 가진 오브젝트를 파라미터로 넣어주어야하는데, get이라는 인터페이스만 존재한다면 Readable 하고, set이라는 속성을 추가로 정의하면 마치 atom처럼 수정을 할 수 있게 됩니다.
우리가 만드는 웹사이트에서 만약 token 방식의 인증을 사용하게 된다면 진입시점에 이미 로그인이 되어 있는 상태로 인식해야합니다. 기존에 우리는 이런 상황에 처했을 때, 저장된 토큰을 사용해 다양한 정보들을 컴포넌트 내부에서 api 호출을 통해 가져오곤 했습니다.
하지만 atom과 selector를 적절히 사용한다면 진입시점에 컴포넌트가아닌 상태 그자체에서 직접호출이 가능합니다.
const User = atom({
key: 'User/data',
default: selector({
key: 'User/dataSelector',
get: async () => await getUserData()
})
})
//getUserData는 저장된 토큰을 가지고 유저 정보를 가져오는 api를 호출한다.
진입시점에 컴포넌트에서 User라는 atom을 구독했다면 api를 호출해 정보를 보여주게됩니다.
###React 컴포넌트에서 Recoil 값 가져오기
// app.tsx
function App(){
return <RecoilRoot><Profile /></RecoilRoot>
}
먼저 상태를 공유할 컴포넌트를 RecoilRoot로 감싼다. 이렇게 되면 recoil 라이브러리를 설치했다면 모든 준비는 마무리 됩니다.
const Profile = () => {
const [name, setName] = useState("")
const [user, setUser] = useRecoilState(User);
const changeHandler = (event) => setName(evant.target.value)
const changeName = async (event) => {
const respnse = await setUserName(name);
setUser((user)=> ({...user, name: response.name}))
setName("")
}
return (
<div>
<ul>
<li>{user.name}</li>
<li>{user.age}</li>
</ul>
<input
value={name}
onChange={onChangeHandler}
>
<button onClick={changeName}>
이름 수정
</button>
</div>
);
}
useRecoilState를 통해 User라는 atom 상태에 대한 get과 set 인터페이스를 불러와 컴포넌트 내부에서 사용할 수 있습니다. 이와 비슷하게 useRecoilValue는 get만 useSetRecoilState는 set 인터페이스만 불러 사용하게 됩니다.
이번 포스팅에서는 간단히 atom과 selector의 사용법에 대해서 알아보았습니다. 하지만 이 글만으로는 Recoil이라는 라이브러리를 이해하는데는 어려움이 있습니다. 때문에 [공식문서]를 읽어보는 걸 추천합니다.
다음 포스팅에서는 예제를 통해 Lodable, Family에 대해 알아보고 어떻게 사용하면 좋을지 이야기 해보겠습니다.
캡슐화된 데이터 요소(implied data element): 객체의 기능은 몇몇 데이터 요소의 존재를 캡슐화한다. 하지만 그 데이터는 직접적으로 접근할수 있지 않고 객체 외부에 불수없다.
데이터는 객체안에 존재하나?: 그럴수있지만 꼭 있어야만하는 규칙은 없다. 객체는 사용자에게 기능집합에 지나지 않기 때문에, 기능에 있어서 필요한 데이터는 존재하지만 데이터가 있는지는 알 수 없다.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.