2.3 클래스 컴포넌트와 함수 컴포넌트함수 컴포넌트는 0.14 버전부터 존재했으나 정적 렌더링을 목적으로한 무상태 함수 컴포넌트였음16.8 버전에서 훅이 소개된 이후 많이 사용하게 됨 2.3.1 클래스 컴포넌트import React from 'react'// props 타입 선언interface SampleProps { required?: boolean text: string}// state 타입 선언interface SampleState { count: number isLimited?: boolean}class SampleComponent extends React.Component { // constructor에서 props를 넘기고, state의 기본값 설정 private construct..
2.1 JSX리액트가 등장하면서 페이스북(메타)에서 소개한 새로운 구문리액트에 종속적이지 않은 독자적은 문법자바스크립트 내부에서 표현하기 까다로웠던 XML 스타일의 트리 구문을 작성하는데 도움을 주는 문법 자바스크립트 표준이 아니기 때문에 자바스크립트 런타임이 이해할 수 있도록 트랜스파일 과정 필요 2.1.1 JSX 정의JSXElement: JSX 구성 기본 요소. HTML element와 비슷- JSXOpeningElement, JSXClosingElement, JSXSelfClosingElement, JSXFragment JSXElementName: JSXElement의 요소 이름으로 쓸 수 있는 것- JSXIdentifier: 자바스크립트 식별자 규칙과 동일- JSXNamespacedName: JS..
1.6 리액트에서 자주 사용하는 자바스크립트 문법객체 조작, 객체의 얕은 동등 비교 문제를 피하기 위한 객체 분해 할당 등 바벨: 최신 문법을 다양한 브라우저에서 일관적으로 지원할 수 있도록 코드를 트랜스파일트랜스파일의 결과로 어떤 코드가 생성되는지 이해하면 애플리케이션을 디버깅하는데 도움됨 1.6.1 구조 분해 할당배열 구조 분해 할당useState가 배열을 반환하는 이유는 이름을 자유롭게 선언하여 사용하기 위함값이 undefined일 때만 기본값을 사용const array = [1, 2, 3, 4, 5];const [first, second, third, ...arrayRest] = array;// 배열 구조 분해 할당 트랜스파일var array = [a, 2, 3, 4, 5];var first = ..
1.1 자바스크립트의 동등 비교1.1.4 리액트에서의 동등 비교Object.is를 기반으로 shallowEqual이라는 함수를 만들어 사용리액트에서 사용하는 JSX props 객체를 비교하기 위함Object.is로 비교 수행객체 1 depth 비교(얕은 비교) 수행props에 객체를 넘긴다면 렌더링이 예상치 못하게 작동메모이제이션(useMemo, useCallback, React.memo)를 올바르게 사용하기 위해 고려 필요 1.2 함수함수 네이밍useEffect나 useCallback 등의 훅의 콜백 함수에 네이밍을 한다면 디버깅에 도움받을 수 있음useEffect(function apiRequest() { ...}, []); 1.3 클래스정적 메서드정적 메서드 내부의 this는 인스턴스가 아닌 클래..
인덱스 데이터베이스에서 자료를 빨리 찾게 해 줌스택 가드(Stack Guard) 특정값을 저장해두었다가 값이 변경된 경우 오버플로우 상태로 가정하여 프로그램 실행을 중단하는 기술데크(Deque) 리스트 양쪽 끝에서 삽입 삭제 가능. 스택+큐 트리 근노드(Root Node), 차수(Degree 자식수), 단말노드(Terminal Node 마지막노드) 정렬내부 정렬 - 주기억장치외부 정렬 - 보조기억장치 삽입정렬 키값 기준버블정렬 한 번 실행시마다 가장 큰 값이 마지막이 됨선택정렬 뒤의 값 중 가장 작은 값과 현재 값의 위치 변경병합정렬, 퀵정렬(n**2), 힙정렬 검색 방식 종류 이진 검색, 선형 검색, 피보나치 검색, 블록 검색, 이진트리 검색 해싱 속도는 빠르지만 충돌 발생 가능제산 방법, 중간제곱방법..
모듈화의 원리 분할과 지배, 정보 은폐, 자료 추상화, 모듈의 독립성작업 절차 코딩 계획 → 코딩 → 컴파일 → 테스트IDE 종류 이클립스, VS, 엑스 코드, 안드로이드 스튜디오, IDEA 빌드 자동화 도구프로세스: 컴파일 → 패키징 → 단위 테스트 → 정적 분석 → 리포팅 → 배포 → 최종 빌드종류: Gradle(JVM. 안드로이드 기본 빌드 시스템), Jenkins(Java 오픈소스), Makefiles, Ant(Apache), Maven(리스트 형태로 종속성 관리) 패키징 도구 역할불법 복제 방지를 위해 사용 구너한 제어, 패키징, 라이선스 관리, 권한 통제고려사항내부 컨텐츠 암호화, 보안이기종 컨텐츠 및 단말기간 DRM 연동 고려사용자 편의성을 위한 복잡성 및 비효율성 문제 고료구성요소 암호화..
[정처기] 1과목 소프트웨어설계
1과목 소프트웨어설계소프트웨어특징: 상품성, 복잡성, 변경가능성, 복제성시스템 기본요소: 조직, 입력, 처리, 출력, 제어, 피드백소프트웨어 위기- 하드웨어 비용을 초과하는 개발 비용- 개발 기간 지연- 개발 인력 부족 및 인건비 상승- 성능 및 신뢰성 부족- 유지보수 어려움 소프트웨어 공학저비용, 빠르고 쉽고 정확하게 만든느 방법기본요소: 현대적인 프로그래밍 기술 전용, 신뢰성, 사용성, 유지보수성, 지속적인 검증 재공학기존에 만든 것 재사용- 개발 시간 및 비용 감소- 품질, 생산성, 신뢰성 향상- 구축방법 공유- 프로젝트 실패 위험 감소목적- 유지보수성 향상- 복잡한 시스템 다루는 방법 구현- 다른 뷰 생성- 잃어버린 정보 복구 및 제거- 재사용 수월, 소프트웨어 수명 연장과정분석 → 구성 → 역..
코딩 테스트 합격자 되기 자바스크립트편 11. 그래프 11-1 그래프인접 행렬2차원 배열로 구현세로 방향 인덱스: 출발 노드가로 방향 인덱스: 도착 노드값: 가중치 인접 그래프노드 개수 길이의 배열로 구현인덱스: 출발 노드 정점값: 노드- 도착 노드 정점, 가중치, 다음 노드 메모리 사용시간 복잡도기타인접 행렬O(N**2)O(1)구현이 상대적으로 쉬움인접 리스트O(N + M)O(M)M: 간선의 개수 11-2 그래프 탐색깊이 우선 탐색가능한 모든 해를 찾는 백트래킹 알고리즘 구현 너비 우선 탐색최단 경로 1. 다익스트라 알고리즘O(V**2), 우선 순위 큐로 개선하는 경우 O(E*logV)가중치 그래프의 최단 경로를 구할 때 사용*음의 가중치가 있는 경우 알고리즘이 종료되어 최단 경로가 갱신되지 않음 각..
크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저(evergreen browser. 웹 표준을 준수하기 위해 지속적으로 자동 업데이트를 지원하는 모던 브라우저)는 대부분의 ES6 사양을 지원함(98%) IE 11의 ES6 지원율을 11% 매년 새롭게 도입되는 ES6 이상 버전(ES6+)과 ES 제안 사양(ES>NEXT)는 브라우저에 따라 지원율이 제각각 최신 사양으로 작성한 코드를 브라우저에서 문제 없이 동작시키기 위한 개발 환경 구축하기ES6 모듈(ESM)은 대부분의 모던 브라우저에서 사용할 수 있으나아래 이유 때문에 ESM보다 모듈 로더를 사용하는 것이 일반적- IE 포함 구형 브라우저는 ESM을 지원하지 않음- ESM을 사용하더라도 트랜스파일링이나 번들링은 여전히 필요함- ESM이 아직 지원..
모듈애플리케이션을 구성하는 개별적 요소로서 재사용 가능한 코드 조각기능을 기준으로 파일 단위로 분리개별적 존재로 애플리케이션과 분리되어 존재파일 스코프(모듈 스코프)를 가져야 함- 모듈 내 모든 자산은 캡슐화되어 다른 모듈에서 접근할 수 없음- export로 한정적 자산 공개 => 재사용 가능 48.2 자바스크립트와 모듈자바스크립트는 웹페이지의 단순 보조 기능을 처리하기 위한 목적으로 만들어짐import, export를 지원하지 않았음 자바스크립트를 브라우저 환경에 국한하지 않고 범용적으로 사용하려는 움직임이 생기면서CommonJS, AMD(Asynchronous Definition)이 제안됨 브라우저 환경에서 모듈을 사용하기 위해서는 CommonJS 또는 AMD를 구현한 모듈 로더 라이브러리를 사용해야..