본문 바로가기

전체 글136

[AWS] 세션 매니저를 통하여 인스턴스에 SSH 접속하기 왜 Session Manager를 쓸까? 인스턴스 별로 Secret Key 관리를 할 필요가 없음 배스천 호스트를 둘필요없음 즉, 보안성 높은 ssh 접속? 이라고 생각하면 편할듯 https 통신을 함 사전 조건 #1. 세션 메니저 정책(Policy)이 추가된 IAM 역할(Role) #2. 위의 Role이 할당된 EC2 인스턴스 VPC의 HTTPS(443)의 아웃바운드 트래픽 허용 (보안그룹) [본 글에서 제외됨] SSM 에이전트가 설치된 인스턴스 [본 글에서 제외됨] 최근에 릴리즈된 이미지에는 포함되어있지만 예전에 만들어진 인스턴스는 직접 설치해줘야함 #1. Role 생성 콘솔 접속 > IAM > 역할 > 역할 생성 태그랑 역할 이름은 적당히 지어준다. #2. 인스턴스 생성 꼭 IAM 역할을 #1에서 .. 2021. 2. 4.
[AWS] Private subnet에 속한 EC2 인스턴스에 session manager 서비스를 이용하여 SSH 접속 방법 이슈 An error occurred (TargetNotConnected) when calling the StartSession operation: {인스턴스 id} is not connected. 열심히 Session Manager 설정을 끝냈더니 Private Subnet에 속한 인스턴스 접속시 에러가 뜬다... #1. VPC 옵션 확인 콘솔 접속 > VPC > 세션 매니저 활성화를 원하는 VPC의 상세 화면 DNS 호스트 이름 편집 - DNS 호스트 이름 활성화 DNS 확인 편집 - DNS 확인 활성화 해당 옵션들이 선택되지 않으면 #3의 엔드포인트 생성이 불가능 합니다. #2. 세션 매니저 전용 보안 그룹 생성 콘솔 접속 > VPC > 보안 > 보안 그룹 > 보안 그룹 생성 보안 그룹 이름, 설명.. 2021. 2. 4.
[Deno Study 1] Getting Started Deno는? Deno는 V8 엔진을 사용하는 Javascript / Typescript를 위한 런타임 입니다. (Rust로 제작됨!) 한마디로 node의 상위 버전이라고 할수있다 Deno의 4가지 특징 안정성(Safety)을 가짐. 사용자가 명시하지 않는 이상 파일, 네트워크 또는 환경에 접근 불가능함. 기본적으로 TypeScript 지원 단일 실행 파일만 제공 의존성 검사(deno info), 코드 포맷터(deno fmt)가 내장되어있음 Deno의 기본 모듈들 (deno.land/std@0.84.0) 설치 MAC만 취급하려고 했는데 윈도우도 설치 쉽더라 # Mac brew install deno # windows in powershell iwr https://deno.land/x/install/inst.. 2021. 1. 25.
[MAC OS] 브라우저/폴더 창에서 주소창 포커싱 명령어 매번 아래에 있는 주소창으로 포커싱 옮길때 마우스로 클릭하기 귀찮았었는데 아래 명령어 한방이면 바로 주소창으로 포커싱이 옮겨져요! # 주소창으로 포커싱 CMD + L 2021. 1. 3.
[TypeScript] React outSideClick Custom Hooks 컴포넌트 밖을 클릭 했을때 callback 함수를 호출하도록 하는 custom hooks import React, { useEffect } from 'react' export function useOutSideClick( ref: React.MutableRefObject, // generic으로 바꿀 예정 handlerCallback: (event?: CustomEvent) => void, ): void { useEffect(() => { // 커스텀 이벤트 선언 const listener = (event: CustomEvent) => { // reference가 없거나 // 클릭한 element가 reference 하위에 속한 element라면 // 함수 종료 if (!ref.current || ref.. 2020. 12. 10.
[TypeScript] 재귀적인 타입 선언 (recursive type) 아래와 같은 재귀적인 데이터 구조를 원했다. const data = [ { label: '기본', value: 'basic' }, { label: '시간', sub: [ { label: '월별', value: 'month' }, { label: '주별', value: 'week' }, { label: '일별', value: 'day' }, ], }, { label: '지역', sub: [ { label: '시별', value: 'si' }, { label: '군/구별', value: 'gun-go' }, { label: '동별', value: 'dong' }, ], }, { label: '유형', value: 'kind' }, ] 이러한 재귀적인 구조에는 아래와 같이 type을 선언해주면 된다. type.. 2020. 12. 10.
Docker Machine vs Docker Desktop (Mac, Window / 도커 머신, 도커 데스크톱 차이, 뭘써야될까요? 종결) 도커 머신 (Docker Machine) macOS와 Windows용으로 docker를 만든 것 VirtualBox나 Parallels와 같은 솔루션으로 가상머신을 만들고 docker용 OS 이미지를 이용 해당 이미지는 최소한으로 공간을 사용하고 최고의 성능을 내기 위해 만들어진 minimul Linux 배포판 해당 가상머신이 docker host의 역할을 함 도커에서는 이렇게 만들어진 docker machine을 관리하기 위한 cli도 제공 도커를 위한 리소스(가상머신의 리소스 - RAM, CPU ..) 확장을 위해서는 가상머신 솔루션에서 설정해야함 docker toolbox로 검색하면 사용 가능 도커 데스크탑 (Docker Desktop) Native Application이기 때문에 Docker ma.. 2020. 11. 25.
ESD 파일 ISO 파일 변환 방법 변환 도구 다운로드 아래 도구를 사용하여 ESD 파일을 ISO 파일로 변환해보겠습니다. 다운로드 링크 예제로 사용할 ESD 파일 다운로드 예제에서 사용할 ESD 파일 다운로드 링크 (MS 업데이트 서버에서 받는 링크 입니다. 안심하세요 :) ) Windows 10 1803 business Edition 다운로드 Windows 10 1803 consumer Edition 다운로드 Windows 10 1903 business Edtion 다운로드 Windows 10 1903 consumer Edition 다운로드 ESD 파일에서 필요한 Edtion만 제외하고 제거 Consumer Edtions (Home + Education + Pro) / Business Editions (Education + Enterp.. 2020. 9. 14.
[MS-WSUSSS] SOAP Request 앱을 통한 서비스 사용 예제 SOAP API 테스트 환경 준비 본 예제는 Google 확장 앱 중 Boomerang API 라는 Tool을 중심으로 작성되었습니다. Google 확장 앱 설치 링크 : 바로가기 SOAP(Simple Object Access Protocol)는 http 프로토콜으로 XML 기반의 메세지를 주고 받는 프로토콜 입니다. http 요청이 가능하고 SOAP 프로토콜에 대한 이해가 있으면 어떤 Tool에서도 테스트 가능합니다. MS-WSUSSS 프로토콜 실습 예제 프로토콜 사용 Example 참고 링크 : 바로가기 해당 문서에서의 설명은 주요 파라미터만 설명 예정이다. 자세한 내용은 각 Method의 공식 문서를 참조 용어 사전 : 바로가기 Requirement 서비스 명설명서비스 링크 Server Sync W.. 2020. 9. 13.
Browser의 기본 구조 및 동작 과정 브라우저란? 웹 서버를 이동(navigate)하며 쌍방향으로 통신하고 HTML 문서나 파일을 출력하는 GUI 기반의 응용 소프트웨어이다. 브라우저의 종류 : FireFox, Chrome, IE, Edge, Opera, Safari 등... 브라우저의 기본 구조 UI (사용자 인터페이스) 주소 표시줄, 이전/다음 버튼, 북마크 메뉴 등, 요청한 페이지를 보여주는 창을 제외한 나머지 모든 부분 브라우저 엔진 (Brower Engine) UI와 렌더링 엔진 사이의 동작을 제어 렌더링 엔진 (Rendering Engine) 요청한 콘텐츠를 표시 통신 (Network) 네트워크 호출에 사용 자바스크립트 해석기 (JavaScript Interpreter) JavaScript 코드를 해석하고 실행한다. JavaScr.. 2020. 9. 10.
React의 Virtual DOM(VDOM)과 Diffing 알고리즘 DOM 이란? DOM은 The Document Object Model의 약어로 직역하자면 문서 객체 모델 입니다. 즉, DOM은 HTML을 객체로 표현한 것이며 외부(JavaScript)와 접속할 인터페이스 입니다. html로 작성된 코드는 HTML 파서에 의해서 DOM이라는 객체가 모인 트리로 변환 됩니다. (DOM 트리) Virtual DOM 이란? React 공식 홈페이지에서 Virtual DOM은 아래와 같이 표한하고 있습니다. "UI로 표현될 객체를 가상 메모리에 저장하고 라이브러리에 의해 실제 DOM으로 동기화 하는 개념" 여기서 UI로 표현될 객체는 DOM을 말하며 라이브러리는 VDOM을 랜더링해주는 ReactDOM같은 것을 말합니다. * 참고 : 바로가기 Virtual DOM의 이점 Rea.. 2020. 9. 9.
[JavaScript] Vanilla JS로 React 만들기 시작하기 전에... Vanilla JS로 Virtual DOM을 랜더링 하는 간단한 유사 React를 만들어보려고 한다. 우아한 테크러닝 3기 (TypeScript & React)에서 김민태님의 강좌를 참고하였습니다. 글을 보기 전에 Virtual DOM, JSX에 대한 개념을 익히고 읽기를 권장 합니다. 기본 React App 만들기 우측의 결과를 가져오는 React Example App을 작성하였습니다. (github commit 바로가기) JS로 우측 앱을 React의 Virtual DOM을 구현하면서 출력하는 프로그램을 작성해 보겠습니다. React Virtual DOM 분석 위 사진은 React Component를 console.log로 출력한 결과 입니다. 해당 결과를 기반으로 virtualD.. 2020. 9. 9.

티스토리툴바