프론트 공부
-
DevOps프론트 공부 2023. 6. 5. 16:42
전통적인 IT 조직 구조 개발팀(Dev) : 소프트웨어의 개발. 운영팀(Ops)이과 관리 및 유지보수. Dev(개발팀)Ops(운영팀) 특징 - 잦은 배포 및 업데이트 - 애플리케이션을 통해 새로운 기능(리소스) 제공 - 프로덕션 앱의 안정성 확보 - 인프라 관리 - 모니터링 및 제어 개발팀이 잦은 업데이트를 통해 제품에 변화를 만들어야 한다면, 운영팀은 이런 서비스의 구성의 변경을 최소화해 안정성을 확보하는데, 이 부분은 꽤 상충이 되는 부분이기 때문에 갈등을 야기하기도 합니다. 이런 갈등이 빚어지는 구조는 현대 IT 시장에는 맞지 않을뿐더러, 제품의 릴리스 주기를 길어지게 만들기도 합니다. DevOps(소프트웨어 개발(Development)) + IT 운영(Operations) 소프트웨어를 자주, 빨리..
-
개발 프로세스의 발전프론트 공부 2023. 6. 5. 16:33
개발 프로세스 개발 프로세스, 즉 소프트웨어 개발 프로세스 모델은 소프트웨어 개발 생명주기(SDLC, Software Develpment Life Cycle)를 기반으로 만들어졌다. 요구분석 및 시스템 명세 작성 : 문제분석 단계라고도 하며, 개발할 소프트웨어의 기능과 제약조건, 목표 등을 사용자와 함께 정확히 정의하는 단계입니다. 개발하고자 하는 소프트웨어의 성격을 정확히 이해하여 이를 토대로 개발 방법과 필요한 자원 및 예산 예측 후 요구명세를 작성합니다. 설계 : 설계단계에서는 앞서 정의한 기능을 실제로 수행하기 위한 방법을 논리적으로 결정합니다. 크게 시스템, 프로그램, UI(User Interface) 설계로 나뉘며, 시스템 구조설계는 시스템을 구성하는 내부 프로그램이나 모듈 간의 관계와 구조를..
-
TypeScript 기초프론트 공부 2023. 5. 30. 18:30
TypeScript(타입스크립트)란 TypeScript는 마이크로소프트에서 개발한 JavaScript의 상위 집합(Superset) 언어입니다. JavaScript에 정적타입 검사와 클래스 기반 객체 지향 프로그래밍 등의 기능을 추가하여 개발된 언어로, JavaScript가 발전하면서 생긴 단점을 보완하기 위해 등장하게 되었습니다. TypeScript의 등장 배경 JavaScript는 처음에는 브라우저에서만 동작하는 스크립팅 언어로 만들어졌었습니다. 시간이 점점 흐르고, JavaScript로 웹 애플리케이션의 상호작용이 증가하면서, 웹 애플리케이션이 필요로 하는 JavaScript 코드의 양이 폭발적으로 늘어나게 되었습니다. 이로 인해 JavaScript의 한계가 부각되기 시작했습니다. JavaScrip..
-
자바스크립트 딥다이브 DOM프론트 공부 2023. 5. 9. 23:17
DOM DOM(Document Object Model)은 HTML 문서의 계층적 구조와 정보를 표현하며 이를 제어할 수 있는 API → 즉, 프로퍼티와 메서드를 제공하는 트리 자료구조 1. 노드 HTML 요소는 HTML 문서를 구성하는 개별 적인 요소 HTML 요소는 렌더링 엔진에 의해 파싱되어 DOM을 구성하는 요소 노드 객체로 변환 HTML 요소 간에는 중첩 관계를 가질 수 있으며 이러한 관계를 반영하여 HTML 요소를 객체화한 모든 노드 객체들을 트리 자료 구조로 구성 노드 객체의 타입 노드 객체는 상속 구조를 가지고 총 12개 종류 문서 노드(document node) DOM 트리의 최상위에 존재하는 루트 노드, document 객체를 가리킴 document 객체는 브라우저가 렌더링한 HTML문서..
-
JavaScript의 구조 분해 할당(Destructuring Assignment)프론트 공부 2023. 4. 25. 11:54
구조 분해 할당 구조화된 배열과 같은 이터러블 또는 객체를 비구조화 하여 1개 이상의 변수를 개별적으로 할당하는것. 배열과 같은 이터러블 또는 객체 리터럴에서 필요한 값만 추출하여 변수에 할당할 때 유용하다. 구조 분해 할당 대상은 이터러블(할당문의 우변)이어야 하며, 할당 기준은 배열의 인덱스 이다. let [a, b] = [10, 20]; console.log(a); // 10 console.log(b); // 20 let arr =[1,2,3] let [a,b,c] =arr console.log(a); // 10 console.log(b); // 20 배열 구조 분해 할당은 REST 엘리먼트 사용이 가능하다. let array = [1, 2, 3, 4, 5]; let [a, b, ...rest] =..
-
고차함수 정리프론트 공부 2023. 4. 17. 19:30
일급 객체 변수나 자료 구조에 할당 할 수 있다. 다른 함수의 인자로 전달 될 수 있다. 다른 함수의 결과로서 리턴이 가능하다. 고차함수 함수를 인자로 받을 수 있고, 함수의 형태로 리턴 할 수 있는 함수이다. 콜백함수 다른 함수의 인자로 전달되는 함수 콜백함수를 전달받은 고차 함수는, 함수 내부에서 이 콜백 함수를 호출할 수 있다. 여러번 호출이 가능, 호출을 하지 않을 수도 있다. 함수를 인자로 받는 경우 function double(num) { return num * 2; } // doubleNum 함수는 고차 함수이다. (다른 함수를 인자로 받음) // doubleNum 함수의 인자 func에 함수가 들어올 경우 // func은 doubleNum의 콜백 함수이다. function doubleNum..
-
클로져프론트 공부 2023. 4. 12. 03:23
클로저 클로저는 외부함수 의 변수에 접근할 수 있는 내부 함수!!!!! 즉 내부함수가 이미 생명주기를 마감한 외부함수의 지역변수에 참조할 수 있다면 !!!! 자바스크립트에서 함수는 태어나면 본인의 내부슬롯에 상위 스코프를 참조를 저장한다. ❗❗❗ function outerFunc() { const x = 10; const innerFunc = function () { console.log(x); }; return innerFunc(); } const ella = outerFunc(); ella(); // 10 실행이 종료된 outerFunc()의 변수 x 에 접근이 가능하기 때문에 innerFunc()는 클로져이다. outer함수가 생명주기가 끝다면서 실행 컨텍스트 스택에서 제거가 되었지만 이너 함수는 ..
-
Section2 기술면접 준비프론트 공부 2023. 4. 10. 11:20
Promise의 기능과 필요한 이유에 대해서 설명해주세요 Promise는 자바스크립트 비동기 처리에 사용되는 객체 입니다. 프로미스는 주로 서버에서 받아온 데이터를 화면에 표시할 때 사용합니다. Promise에는 3가지의 상태가 있는데 각각 Pending(대기) ,Fulfilled(이행), Rejected(실패) 이 있고 저희가 Promise를 활용하여 실질적으로 무언가를 처리를 하는 단계는 ,Fulfilled(이행) 단계 입니다 .then()을 활용하여 처리 값들을 받아올 수 있고, catch()를 활용하여 실패 상태의 값을 받아올 수 있습니다. 또한 프로미스의 또 다른 특징은 여러 개의 프로미스를 연결하여 사용할 수 있다는 점입니다. 이러한 특징을 Promise Chaining이라고 부릅니다. 순수함..