본문 바로가기

전체 글

(49)

React - 의미 / 장점 / 단점 / 실행 React? : A JavaScript library for building user interfaces. 사용자 인터페이스를 만들기 위한 자바스크립트 라이브러리 사용자와 웹사이트의 상호작용을 돕는 인터페이스를 만들기 위한 자바스크립트 모음집 ** 프레임워크 vs 라이브러리 프레임워크(Framework) 라이브러리(Library) 사용 앵귤러JS 뷰JS React 프로그램 흐름 제어 권한 흐름 제어 권한을 개발자가 아닌 프레임워크 갖음 흐름을 제어하지 않고 개발자가 필요한 부분만 필요할 때 가져다 사용하는 형태 ** SPA : Single Page Application 하나의 페이지만 존재하는 웹사이트 또는 웹 애플리케이션 장점 빠른 업데이트와 렌더링 속도 : 업데이트란 웹사이틀 탐색할 때 화면에 나타나..

JavaScript - Axios 이용한 외부 데이터 연동 Axios : node.js와 브라우저를 위한 Promiss 기반 HTTP 클라이언트 서버사이드에서는 네이티브 node.js의 http 모듈을 사용하고, 클라이언트(브라우저)에서는 XMLHttpReauests를 사용 설치 node.js 설치 : https://nodejs.org/ko/download 다운로드 | Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org node.js 설치 확인 C:\>node -v v18.18.2 C:\>npm -v 9.8.1 작업 디렉터리를 생성 후 , 웹서버를 실행 C:\>mkdir react C:\>cd react C:\react> npm install -g h..

JavaScript - 함수( 화살표 , map(), reduce(),filter()) 1. 화살표 함수 (arrow function) : function 키워드 대신 화살표(=>)를 사용하여 간략한 방법으로 함수를 선언 // 익명 함수 표현식을 이용한 함수 정의 let add = function(a, b) { return a+b }; //화살표 함수 let add2 = (a, b) => { return a+b }; // 한줄일 경우 중괄호를 생략하면 화살표 오른쪽의 결과를 반환 let add3 = (a, b) => a+b; // 파라미터가 하나일 경우 파라미터를 감싸고 있는 소괄호도 생략 가능 let add4 = a => a+4; // 객체를 반환하는 경우에는 소괄호로 감싸야 함 let add5 = (a, b) => {return {result:a+b}}; let add6 = (a, b)..

ES6(ECMAScript 6) - 단축 속성명 / 계산된 속성명 / 전개 연산자 / 비구조화 1. 단축 속성명(shorthand property names) : 객체의 속성값이 이미 변수로 존재한다면 변수이름만 사용하여 객체 생성 가능 let name = "John"; const obj = { age: 21, name: name, getName: function getName() { return this.name; } }; const obj = { age: 21, name,// 속성이름과 속성값을 가지고 있는 변수 이름이 동일한 경우 getName(){// 속성이름과 함수(메소드) 이름이 동일한 경우 => function 키워드와 함께 생략 return this.name; } }; 2. 계산된 속성명(computed property names) : 변수를 이용해서 객체 속성의 키를 생성 // 속..

JavaScript - 객체와 배열 객체 : 키(key)과 값(value)으로 구성된 프로퍼티(Property)들의 집합 // 객체 선언 let person = { "name": 'alswn', 'age': 26, isMarried: false, 'favorite color': ['빨강', '노랑'], hello: function() { return '안녕, 나는 ' + this.name + "이야"; } }; // 객체 참조 console.log(person.name);// 홍길동 console.log(person["name"]);// 홍길동 console.log(person.favorite color); // Uncaught SyntaxError: => key 에 공백이 있는 경우 console.log(person["favorite c..

JavaScript - 함수 선언 방식 1. 함수 선언식 (Function Declarations) : 일반적인 프로그래밍 언어에서의 함수 선언과 비슷 function 함수이름(){ ..... } function add(x , y){ // add => 함수 이름 정의 return x + y; } console.log(add(10,20)); //함수 이름으로 호출 2. 함수 표현식(Function Expressions ) : 자바스크립트 언어의 특징을 활용한 선언 // 익명 함수 표현식 let add = function(x,y){ return x + y; }; let sum = add; console.log(add(10,20)); // 30 console.log(sum(10,20)); // 30 // 기명 함수 표현식 let sum1 = fun..

쿠버네티스 실습 더보기 아래 조건을 만족하는 플라스크 애플리케이션을 개발하고 쿠버네티스 클러스터에 배포해 보세요. 플라스크 애플리케이션은 /whoareyou 요청에 대해 작성자 이름, 호스트 이름, IP 주소를 반환 예) 홍길동, hostname-deployment-7d4f978855-2kkw6, 10.0.0.4 플라스크 애플리케이션을 구동하는 컨테이너 이미지의 이름은 whoami-flask:v1 으로 설정해 본인의 도커 허브에 등록 디플로이먼트의 레플리카는 5개로 설정해서 배포하고, LoadBalancer 타입의 서비스를 이용해서 디플로이먼트를 연동 1) 플라스크 애플리케이션은 /whoareyou 요청에 대해 작성자 이름, 호스트 이름, IP 주소를 반환 가상환경을 만들어 flask 서버를 설치 (whoami-flas..

Github Blog 처음부터 만들어보자(window OS/git 설치x) 수많은 Blog 중 Github을 선택한 이유는 단순하다. 그 전에 블로그를 작성하기로 결심한 이유는 지금까지 내가 해온 활동이 하나도 남아있지 않음과 더불어 공부를 위함이다. 주위에서 Github을 추천하길래 선택했지만 테마까지 적용해놓고 Tistory를 선택하게 되었다. 나중에 github으로 옮길 수 있다고 하니..... 열심히 글이나 쓰자. - 계정 생성 New를 클릭하여 새로운 Repositorie를 만든다. Repository name에 username.github.io 형식으로 작성해줍니다. 별다른 설정없이 Create repository 클릭!! - 컴퓨터에 repository를 clone 하기 ** git이 처음인 사람은 https://git-scm.com/download/win 에서 자..

목록 더보기

티스토리툴바