본문 바로가기

분류 전체보기273

[DevOps] 도구와 기술 - 2 1. 컨테이너 기술 - 컨테이너란 ? : 고립된 사용자 공간 사이에 커널이 공유되는 OS 수준의 가상화를 사용하여 항상 동일한 환경을 제공하는 기술이다. * 도커 : 도커(Docker)는 코드, 런타임 환경, 시스템 도구, 라이브러리를 랩핑하는 오픈소스 도구다. - 도커 컨테이너는 실행하는 커널을 공유한다. 따라서 경량 방식으로 바로 실행된다. - 도커 컨테이너는 리눅스 뿐만아니라 윈도우에서도 실행된다. - OS 수준의 가상화로 고려된다. - 각 컨테이너는 호스트 OS상의 사용자 공간에서 격리된 프로세스로 실행된다. (커널) - 각 컨테이너를 위한 별도의 OS가 필요없으므로 컨테이너의 크기가 훨씬 작다. - 각 컨테이너는 커널을 공유하므로 더 많은 자원이 공유 범위에 있다. - 가상 머신은 컨테이너에서 .. 2023. 4. 13.
[O'REILLY] Node & Express - 17장 : 정적 콘텐츠 16장은 Only React에 관한 내용이므로 스킵한다. 1. 정적 콘텐츠의 종류 - HTML : 웹앱에서 뷰를 통해 HTML을 동적렌더링한다면 일반적으로 정적 자원이라고 말하지 않는다. SPA앱은 일반적으로 정적 HTML파일 단 하나를 클라이언트에 전송하며 이런 경우는 HTML을 정적 자원으로 간주한다. - CSS : 포스트CSS가 있더라도 어차피 클라이언트가 받는 css는 정적자원이다. - JS : 클라이언트사이드의 JS는 일반적으로 정적자원으로 간주한다. - 이진 파일 : PDF, 압축파일, 설치파일, 워드문서 등등 - 멀티미디어 : 이미지/비디오/오디오 2. 성능 고려사항 - 성능에서 고려할 점은 요청 숫자를 줄이는 것과 콘텐츠의 크기를 줄이는 것이 중요하다. - 둘 중에서는 HTTP요청 숫자 자.. 2023. 4. 13.
[TS] TS연습하기16 : 다이나믹 타입 지정(완) //타입파라미터를 이용한 다이나믹 타입 지정 type Age2 = T // 타입파라미터 지정 방법 const 에이지:Age2 = '스트링이어야지'; // 타입파라미터 사용 방법 //삼항연산자를 활용한 다이나믹 타입 지정 type Age3 = T extends string ? string : unknown ; const 에이지2:Age3 = '스트링이면' const 에이지3:Age3 = 123; // 에이지3 은 unknown이 된다. //연습하기 type FirstItem = T extends any[] ? T[0] : any //파라미터로 array를 입력할 경우 array의 첫자료의 타입을 그대로 남겨주고 아니면 any 타입 2023. 4. 13.
[TS] TS연습하기15 : index signature, keyof 연산자 //index signature 문법 interface StringOnly { [key : string] : string //모든 문자로된 속성은 string 타입이다. } const car이다:StringOnly = { name : 'carName', age : '32', //string이어야 한다. } //깊은 object의 type (Recursive) : 쓸 일이 거의 없다. interface TypeFont { 'font-size': TypeFont|number } const cssFont:TypeFont = { 'font-size':{ 'font-size':{ 'font-size' : 123 } } } // 조건부 타입변환기(keyof 연산자) type Car1 = { //type을 잘못 지정.. 2023. 4. 13.
[TS] TS연습하기14 : d.ts 1. d.ts - 이름.d.ts - 타입, 인터페이스 등을 담는 곳 2. 자동생성 - tsconfig에 "declaration" : true 로 해주면 ts파일마다 d.ts가 자동으로 생성됨. - d.ts 파일은 export import 해서 사용해야 한다. - override 가 가능하다. - tsconfig에 "typeRoots":["./types"] 이렇게 작성하면 여기에 있는 type들은 글로벌하게 이용이 가능하다. (types/common/이름.d.ts 이렇게 루트를 설정해줘야 한다.) 3. 외부 라이브러리 사용 시 타입정의가 안되어있으면 - typescript 공식 홈페이지에 가서 찾아보면 된다. - npm 설치 시 대부분 들어온다. - typeRoots 옵션을 설정한 경우 node_modul.. 2023. 4. 13.
[TS] TS연습하기13 : declare //외부 .js에 있는 변수를 .ts에서 이용하고 싶은 경우 // declare을 통해 변수를 재정의한다. declare let a:number; //declare 정의 내용은 힌트이므로 js로 변환되지 않음. console.log(a+1) //ts파일 -> ts파일로 변수를 가져다쓰고 싶은 경우 //명시적으로 import export 사용한다. // import {어쩌고} from './data' 이렇게 //global 만드는 방법도 있긴 하다. d.ts 만들지 이건 안쓴다. 다음시간은 d.ts declare global{ type HumanName = string } export{} 2023. 4. 13.
[TS] TS연습하기12 : array와 tuple, rest parameter //array 의 tuple 자료형 const 멍멍:[string, number, string, boolean?] = ['혜자',3,'번 짖는다'] //optional ? 은 맨 뒤에 쳐야한다. //사용 const bark = (...x:[string, number, string, boolean?]):void =>{ //rest parameter의 엄격한 타입지정 console.log(x) } bark(...멍멍); //[ '혜자', 3, '번 짖는다' ] //Spread Operator의 타입지정 let arr = [1,2,3]; let arr2:[number,number, ...number[]] = [4,5, ...arr]; //rest parameter랑 똑같다 // 연습하기 const test:[.. 2023. 4. 13.
[TS] TS연습하기11 : React와 타입스크립트(TSX) 1. React-TypeScript 프로젝트 생성 npx create-react-app 프로젝트명 --template typescript 2. React에서 TS를 사용할 때 주의할 점 - 프로젝트의 사이즈가 큰가 - 협업 시 다른 사람이 짠 코드를 참조할 일이 많은가 - 장기적으로 유지보수에 도움이 되는가 - 나중에 팀원이 더 필요해도 인력수급이 쉽게 가능한가 - 팀원들 학습에 필요한 시간과 비용이 적게 드는가 - 취업/이직하려면 그냥 쓰셈 어차피 배워야함 3. 문법 - 일반 TSX에서의 타입 지정 (HTML요소) - 컴포넌트의 타입 지정 - useState 타입 지정 : 대부분 알아서 해주니 큰 걱정말고 마우스 올려보자. - Redux에서의 타입 지정 Store 사용하기 - 이런식으로 사용하면 된다... 2023. 4. 13.

티스토리툴바