분류 전체보기 검색 결과

해당 글 777건

Google Compute Engine (3): GCE 기본적 운영 (일정, OS patch/policy, NEG ...)

1. 일정 관리 [일정 만들기]를 눌러 인스턴스의 일정을 정하여, 특정 시간대에만 인스턴스가 가동되도록 만들 수 있다. [일정 만들기]를 눌러 직접 살펴보면 아래와 같다. 제출하면 만들어진 것을 확인할 수 있다. 생성된 일정을 눌러 [일정에 인스턴스 추가]를 눌러 특정 인스턴스에 일정을 부여할 수 있다. 2. 로그 보기 이건 회사에서 종종 사용했던 건데, 일단 여기서는 생략. 나중에 로그 쿼리를 다루면서 더 자세히 볼 수 있을 것이다. 3. 모니터링 4. 머신 이미지 만들기 AWS에서 봤던 이미지 그것 그대로이다. 특정 VM 인스턴스의 설정을 그대로 이미지로 만들어 다음번 VM 생성 때 사용할 수 있다. ㅇㅇ 5. 디스크, 스냅샷, 이미지 디스크 = AWS EBS 정도로 생각하면 된다. 나의 VM엔 10..
GCP/☁️ GCP 2021. 9. 14. 21:57

Google Compute Engine (2) : GCE Network 기초 (VPC, Subnet)

생성된 GCE을 감싸고 있는 대략적인 환경 좌측은 GCP GCE를 감싸고 있는 환경이고 우측은 AWS EC2를 감싸고 있는 환경이다. 어느 정도로 자세하게 묘사했느냐의 차이만 있지 사실상 VPC 안에 Subnet있고, 인스턴스 앞단에 방화벽이 있으며 게이트웨이를 통해 연결된다는 사실은 같다. VPC(virtual private cloud) : GCP 입장에서 동일한 컴퓨팅 자원을 여러 사용자에게 할당하면서 분리하기 위한 가상 공간이다. AWS와 같. Subnet : Network IP 주소 대역대를 분할한 것 * NIC(Network Interface Card) 2계층(데이터 링크 계층)의 장치입니다. 컴퓨터를 네트워크에 연결하기 위한 하드웨어 장치. 별명이 많습니다. 랜 카드, 네트워크 인터페이스 컨트..
GCP/☁️ GCP 2021. 9. 12. 20:37

Google Compute Engine (1) : GCE 생성 및 접근

Google Compute Engine을 줄여서 GCE이라고 줄여부르는 듯 하다. 가상 머신이라 VM이라 부르기도 한다. 개념 자체는 AWS의 EC2와 동일하다. 생성한 GCE를 instance라고 부르는 것마저 같다. 그렇다면 EC2...가 아니라 GCE를 생성하고 다뤄보자. 필자는 기본으로 AWS를 사용하고 있기 때문에 AWS의 서비스에 기대어서 GCP의 서비스를 이해하게 된다. https://cloud.google.com/free/docs/aws-azure-gcp-service-comparison AWS와 Azure 서비스를 Google Cloud와 비교 | Google Cloud 무료 프로그램 의견 보내기 AWS와 Azure 서비스를 Google Cloud와 비교 최종 업데이트: 2021년 6월 ..
GCP/☁️ GCP 2021. 9. 12. 10:56

GCP의 Region/Zone, 리소스 계층 구조

Region과 Zone 리전(Region), 리전 내부에 영역(Zone), 그리고 CDN을 위한 엣지(Edge)라는 개념은 AWS와 같다. 리전이 여러 영역으로 구분되어 운영되기에 높은 수준의 가용성(High Availability)를 보장할 수 있다. 구체적인 위치와 리전에 따라 사용 불가능한 몇 서비스 등은 직접 https://cloud.google.com/about/locations 에 가서 확인하면 되겠다. 살펴보니 서울은 asia-northeast3이고, 내부에 a, b, c 세 개의 Zone이 존재한다. 리소스 계층 구조 GCP에 처음 들어와서 조금 당황한 점이, AWS에 없는 Project라는 개념이 존재한다는 것이다. Project 내부에 들어가서 Computer Engine, App En..
GCP/☁️ GCP 2021. 9. 10. 00:55

웹 프론트엔드에서의 MVVM 디자인 패턴에 대해서

회사에서는 hook기반 MVC에서 MVVM로 이전이 진행되고 있다. 지그재그에서도 프론트엔드에서 디자인 패턴으로 MVVM을 채용했다고 한다. (2021년 9월 현재 기준으로는 모르겠다.) 기존 MVC 패턴에 대해서 가장 직관적인 패턴이다. 1. redux에 데이터를 쌓아놓고 2. 필요할 때 useSelector로 container 컴포넌트에서 store값을 불러오고 3. presenter 컴포넌트에서 해당 값을 사용한다. 도대체 왜 이게 문제가 될까? container 컴포넌트가 함수를 선언과 조합이라는 두 가지 역할을 다 하고 있어서 필연적으로 props가 많아질수록 번잡해진다. MVC로 담기에 컴포넌트의 복잡도가 매우 높은 경우다. 회사에서 사용하는 컴포넌트에서 자식 컴포넌트로 넘겨주는 props만해..
React, Next, Redux/⚛ React.JS 2021. 9. 8. 03:34

react dev tools로 profiling하기 및 의존성 배열 관리하기

최초의 렌더를 줄이려면 scaffold, skeleton loader, 부분 렌더링을 해야 함 아래와 같이 "first time component rendered", 즉, 최초 렌더는 어쩔 수 없음. 이 녀석을 방지하려면 필요한 만큼한 렌더해야 함. pagination + infinite scroll, windowing 여러 기법이 있는데 필요한 걸로 사용하면 될 듯. 행동 기반 최적화 경험상 최적화를 미리할 순 없고 (kent 아저씨였는지 누구였는지, 미리 하는 useCallback, useMemo 최적화는 만악의 근원이라더라) 프로덕트가 커지고 완성 단계에서 문제가 있는 부분을 리렌더링을 방지하는 작업을 하게 된다. 이 작업을 처음 할 때 이틀 정도는 useEffect와 props, state와 싸움..
React, Next, Redux/⚛ React.JS 2021. 9. 2. 02:34

func in TS (3) : overloading (오버로딩)

java에서 쓴 글을 가져와보자 (https://darrengwon.tistory.com/1347) 오버로딩(Overloading) : 같은 이름의 메서드 여러개를 가지면서 매개변수의 유형과 개수가 다르도록 하는 기술 오버라이딩(Overriding) : 상위 클래스가 가지고 있는 메서드를 하위 클래스가 재정의해서 사용 OverloadingExam 클래스 내부의 메서드들은, 인자의 타입에 따라 적합한 메서드가 알아서 트리거 된다. // java임 오해 ㄴㄴ public class OverloadingExam { public int calculate(int one, int two) { return one + two; } public long calculate(long one, long two) { retur..
Programming Language/🟦 Typescript 2021. 8. 14. 18:28

func in TS (2) : generic func, 타입 제약

제네릭을 통해 다양한 곳에서 활용될 수 있는 함수 정의 특정 타입이 아닌 제네릭을 잘 활용하면 type-safe하면서도 활용도가 높은 함수를 정의할 수 있습니다. function getFisrtElem (arr: T[]) { return arr[0] } getFisrtElem([1, 2, 3]) // number로 inferred됨 getFisrtElem(['h', 'l']) // string으로 inferred됨 Constraints (타입 제약) 제네릭을 활용하면서도 동시에 특정한 메서드나 프로퍼티가 있는 값만 사용하고 싶을 때가 있을 것입니다. 아래의 경우에는 T라는 제네릭에 lenght라는 프로퍼티가 존재하는지 알 수 없기 때문에 경고를 뱉습니다. function returnLen (a: T) {..
Programming Language/🟦 Typescript 2021. 8. 14. 17:38

func in TS (1) : 함수 시그니처, type(타입 별칭), void

// 타입 생략 (비추천. 특히 함수에서는 타입을 꼼꼼히 달아두자.) let test1 = (a, b) => { return a + b; }; // 타입 주석 let test2 = (a: number, b: number): number => { return a + b; }; // 함수 시그니처 이용. type 키워드를 이용해 타입 별칭 만듦 type addNumber = (arg2: number, arg1: number) => number; let test3: addNumber = (a, b) => { return a + b; }; 함수 시그니쳐 부분을 보시면, 어떤 인자를 받고, 무엇을 리턴하는지를 type으로 만들어 놓은 후 함수에 할당만 하면 되는, 간편한 방법을 보실 수 있습니다. 일일히 타입을 ..
Programming Language/🟦 Typescript 2021. 8. 14. 16:31

[setting] default, QueryClient, Dev tools

react-query 문서에서는 자신들의 핵심적인 기능으로 queryClient, useQuery, useMutation을 소개하고 있다. (https://react-query.tanstack.com/quick-start) 일반적인 프로젝트에서는 이 세 기능을 주로 사용한다고하니 우선 이 세 기능을 익히고서 이후에 필요할 때 심화적인 학습을 하는 방식으로 진행해보자. Important Defaults (중요한 기본값들) Doc : https://react-query.tanstack.com/guides/important-defaults 기본적인 세 기능(queryClient, useQuery, useMutation)을 사용하기 위해서 알고 있어야 하는 기본적인 설정들이다. 문서에 따르면 합당한 수준에서의 ..
State Management/react-query 2021. 8. 9. 02:46