본문 바로가기

programming

 (124)
AWS - EC2(EBS/AZ/ELB) Elastic Compute Cloud ECC -> EC2 유동적인(탄력적인) 컴퓨터 클라우드 EC2 사용시 지불방법 1. on-demand : 시간단위로 가격이 고정되어 있음. 개발 초기단계, 유연한 크기 설정 가능 개발 시작 시간, 개발 끝나는 시간을 알수 없는 경우, 단기간에 개발을 할 수 있는경우, 개발 초기단계에서 EC2인스턴스에 테스트를 해볼때 적합함 2. reserved : 한정된 EC2 용량 사용가능, 지정석, 크기를 늘이고 줄이는 기능 없음, on-demand 보다 가격이 저렴함. 개발의 시작과 끝을 미리 알 수 있는 경우에 적합. 예상가능한 워크로드시 지정해두고 할인받아 사용가능 3. spot : 입찰 가격 적용, 가장 큰 할인률을 적용받을 수 있음. EC2는 어떻게 작동되는가? 무엇으..
[AWS] IAM 이란? (개념과 실습) IAM 이란? 클라우드 사용자(유저)를 관리(권한 등) 1. 유저별로 다른 권한 부여기능(A: 데이터베이스 읽기 권한만 부여/ B: 데이터베이스 테이블 생성 권한만 부여) 2. 모든 유저들에게 비밀번호를 강제로 변경하도록 기한 설정 가능 3. MFA 다중인증 기능 : 루트유저는 필수 루트 유저로 생성할 수 있는 것 1) 그룹 : 유저 묶음 2) 유저 3) 역할 4) 정책 : json 형태로 되어있는 document를 가리킨다. 세밀한 접근권한을 일일히 설정하여 하나의 정책 document 생성 IAM 은 universal 하다 universal (전역적) regional (지역적) IAM 정책 시뮬레이터(IAM과 관련 문제 디버깅하기 위한 툴) 1. 개발환경(Staging or Develop)에서 실제환..
리액트 빌드시 환경(개발/테스트/상용)에 따라 API 주소 설정하기 1. 명령어로 구분 package.json에 script : start/build/test 각각의 스크립트가 있음 -> 배포시 build.gradle에 npm build 명령어가 들어있음 2. .env 파일에서 환경변수 사용 두개의 분리된 dotEnv 파일 생성 .env.development : 개발용 환경변수 .env.production : 상용 환경변수 원리) Creact-React-App으로 리액트를 만들고 npm 스크립트를 실행할 때 스크립트 명령어별로 env 파일의 적용 우선순위가 있다. script 명령어 별 env 파일 우선순위 npm start : .env.development.local, .env.local, .env.development, .env npm build : .env.prod..
얕은복사 & 깊은복사 데이터타입 원시값 String, Number, Boolean, Null, Undefined -> 자동 깊은 복사, 다른 메모리에 값 자체를 할당 참조값 Object, Symbol -> 얕은 복사, 가리키는 주소를 복사 얕은 복사 객체를 가리키는 주소를 같이쓰는것 바꾸면 같이 따라서 바뀌어 버린다 깊은 복사 spread 연산자 사용 (1 depth 까지만) Object.assign() 메소드 사용 (1 depth 까지만) 완벽한 깊은 복사 방법 재귀적으로 깊은 복사 수행 Lodash의 cloneDeep 함수 사용 (라이브러리) JSON.parse()와 JSON.Stringify() 함수 사용 JSON.stringify()는 객체를 json문자열로 변환한다. 이 과정에서 원본객체와 참조가 모두 끊어진다. J..
자바스크립트 프로토타입 Javascript 에서는 객체를 상속하기 위해 프로토타입이라는 방식을 사용한다. 이미 존재하는 생성자에게 메소드를 추가하기 위해 프로토타입 속성을 사용하는 법을 알아보자 자바스크립트는 프로토타입기반 언어라고도 불리운다 모든 객체들이 그들의 프로토타입으로 부터 메소드와 속성들을 상속받는다. 모든 객체들은 최소한 하나 이상의 다른 객체로부터 상속을 받는데, 이때 상속되는 정보를 제공하는 객체를 프로토타입이라고 한다. 동작 순서 : 프로토타입 체인 person 객체가 자체적으로 valueOf() 메소드를 가지고 있는지 체크 person의 프로토타입 객체 Person()의 생성자의 프로토타입에 valueOf() 메소드가 있는지 체크 여전히 없으므로 Person()의 생성자의 프로토타입 객체의 프로토타입 Obj..
자바스크립트의 형 변환(+ null & undefined 차이) 자바스크립트는 느슨한 타입언어, 동적 타입언어, 변수의 타입을 미리 선언할 필요가 없다. 프로그램이 처리되는 과정에서 자동으로 파악되고, 같은 변수라도 상황에 따라 타입이 바뀔 수도 있다. 자바스크립트는 컴파일 과정 없이 실행과 동시에 해석을 하는 인터프리터 언어 자바스크립트의 형변환은 2가지로 일어난다 (명시적형변환/암시적 형변환) 1. 명시적 형변환 string, number, boolean 타입으로 이루어진다 의도적으로 형태를 변형해서 사용하겠다는 것 String(123) String(NaN) Number('') //0 Number('123') //123 ParseInt('123a') //123 Boolean("") //false 2. 암시적 형변환 연산할 때 일어난다. 문자열이 하나라도 포함되면 ..
이벤트 버블링과 캡처링 캡처링과 버블링을 간단히 정의하면 다음과 같다. 캡처링 - window 로부터 이벤트가 발생한 요소까지 이벤트를 전파한다. 버블링 - 이벤트가 발생한 요소부터 window 까지 이벤트를 전파한다. 버블링 버블링과 캡처링 ko.javascript.info 버블링(bubbling)의 원리는 간단합니다. 한 요소에 이벤트가 발생하면, 이 요소에 할당된 핸들러가 동작하고, 이어서 부모 요소의 핸들러가 동작합니다. 가장 최상단의 조상 요소를 만날 때까지 이 과정이 반복되면서 요소 각각에 할당된 핸들러가 동작합니다. 3개의 요소가 FORM > DIV > P 형태로 중첩된 구조를 살펴봅시다. 요소 각각에 핸들러가 할당되어 있습니다. 사례) 테이블의 경우에 테이블 전체(event.currentTarget)에 이벤트를 ..
API, SDK, Library, Framework API API : Application Program Interface all about communication : 다른서비스끼리의 의사소통 방법 응용프로그램에서 운영체제나 프로그래밍언어가 제공하는 기능을 제어할 수 있게 만든 인터페이스 연결, 다리 /naver-map/jamsil 구현과 독립적으로 사양만 정의되어있다 API에 따라 접근권한이 필요할 수 있다 open API : 노출된 API 구성 : 요청, Library 응용 프로그램 개발을 위해 필요한 기능(함수)를 모아놓은 소프트웨어 독립성을 가진다 응용프로그램이 능동적으로 라이브러리를 사용한다 library와 API의 차이점은 구현 로직의 유무이다 SDK SDK : Software Development Kit 소스코드의 모음과 유틸리티 Tool ..
github actions & pages로 Vue.js 프로젝트 build 하고 호스팅하기 (CI/CD 맛보기) CI Continuous Integration CD Continuous Deploy github action 컨테이너를 띄워서 일련의 작업들을 할 수 있도록 해줌, 그 외 여러가지도 가능 github pages github에서 제공하는 호스팅 TODO : vue.js를 스터디한 내용을 github에 push 하고, github action과 github pages를 사용하여 호스팅을 해보려 한다. 1. github push 생략 (add-commit-push) 2. github action 1) 폴더만들고 그안에 main.yaml 생성 폴더 트리 구조와 파일명을 준수해야한다 .github/workflows/main.yaml 2) main.yaml 파일내용 주의점은 [main] -> 배포할 브랜치를 명시,..
[React] react-router-dom으로 레이아웃 구현, 네비게이션 바로 라우팅 구현, useParams로 파라미터 받 TODO Router 아무 path 없을 때는 layout 구현, 그 안에 Route 구현 notFound 페이지 예외 처리 예정 Layout 에서 NavLink로 링크 구현 Outlet으로 랜더할 내용 받아줌 useParams로 parameter 받기 1. 사용할 페이지 간략 내용 views들 생성 /views/About.js /views/About.js /views/NotFound.js /views/UserDetail.js /views/Users.js Layout은 조금 이따가 2. 레이아웃 담당할 Layout.js 작성 react-router-dom이 제공하는 NavLink, Outlet 사용 NavLink는 a태그 역할 링크 역할 Outlet은 Content가 담길 곳 명시하는 것 (react-r..

티스토리툴바