✏️ useState Reference 📌 useState(initialState) 컴포넌트의 최상위 레벨에서 useState를 호출, state 변수 선언 구조 분해 할당으로 state 변수 이름을 지정하는 것이 관례 import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); 📌 매개변수: 초기에 state를 설정할 값으로 모든 데이터 타입을 허용한다. 만약 함수를 전달한다면 순수해야 하며, 인자를 받지 않고, 반드..
정형 기술 검토의 지침으로 틀린 것 (X) 1) 문제 영역을 명확히 표현한다. 2) 참가자의 수를 제한하지 않는다. => 제한한다. 3) 논쟁과 반박을 제한한다. 4) 의제를 제한한다. 소프트웨어 공학에서 워크스루에 대한 설명으로 틀린 것 (X) 1) 단순한 테스트 케이스로 프로덕트를 수작업으로 수행하는 것 2) 사용사례를 확장해 명세하거나 설계 다이어그램, 원시코드, 테스트 케이스 등에 적용한다. 3) 인스펙션과 동일한 의미를 가진다. => 워크스루는 요구사항 명세서 작성자를 포함해 사전 검토 후 짧은 회의 검토를 통해 결함 발견 => 인스펙션은 요구사항 명세서 작성자를 '제외'하고 다른 검토 전문가들이 명세서를 확인해 결함 발견 4) 복잡한 알고리즘 또는 반복, 실시간 동작, 병행 처리와 같은 기능이..
20. 통합 구현 1) 단위 모듈 구현 단위 모듈: SW 구현에 필요한 동작 중 한 가지 동작을 수행하는 기능을 모듈로 구현한 것 모듈화의 원리: 분할과 지배, 정보 은폐, 자료 추상화, 모듈의 독립성(낮은 결합도, 높은 응집도) 구현 단계의 작업 절차 코딩 계획 => 코딩 => 컴파일 => 테스트 2) 통합 개발 환경 - IDE(이클립스, VSC...) - 빌드 자동화 도구(Gradle) - 프로세스: 컴파일 => 패키징 => 단위 테스트 => 정적 분석 => 리포팅 => 배포 => 최종 빌드 - 종류: Gradle(JVM 기반 빌드 도구), Jenkins(Java 기반 오픈소스), Maven(종속성), Ant(아파치, XML 기반 빌드 스크립트) 등 21. 제품 소프트웨어 패키징 1) 애플리케이션 패..
미들웨어에 대한 설명으로 틀린 것 (X) 1) 여러 컴포넌트를 1대1, 1대다, 다대다 등 여러 형태로 연결이 가능하다. 2) 소프트웨어 컴포넌트를 연결하기 위한 준비된 인프라 구조를 제공한다. 3) 미들웨어의 서비스 이용을 위해 사용자가 정보 교환 방법 등의 내부 동작을 쉽게 확인할 수 있어야 한다. 4) 여러 운영체제에서 응용 프로그램들 사이에 위치한 소프트웨어다. 소프트웨어 개발 영역을 결정하는 요소 중 다음 사항과 관련 있는 것 (X) [소프트웨어에 의해 간접적으로 제어되는 장치와 소프트웨어를 실행하는 하드웨어] [기존의 소프트웨어와 새로운 소프트웨어를 연결하는 소프트웨어] [순서적 연산에 의해 소프트웨어를 실행하는 절차] => 인터페이스(Interface) UML 다이어그램 중 정적 다이어그램이..
11. 소프트웨어 설계 모델링 1) 소프트웨어의 설계 기본 원리는 분할과 정복, 추상화, 모듈화 (단계적 통합 X) 상위 설계와 하위 설계로 나뉨 상위 설계는 아키텍처 설계, 예비 설계라고 함 (전체적인 구조) 하위 설계는 모듈 설계, 상세 설계라고 함 (구성 요소의 구체적인 정의) -> 절차 기반, 자료 위주, 객체 지향 설계 방법 소프트웨어 설계 대상은 구조 모델링과 행위 모델링으로 나뉨 구조 모델링: 컴포넌트(모듈)와 같이 구조적인 것. 어떻게 연결할지 행위 모델링: 언제, 어떻게 기능들이 수행되는지 소프트웨어 설계 방법은 구조적 설계와 자료 중심 설계로 나뉨 구조적 설계: 기능적 관점, 알고리즘 등으로 설계 (cf. Coad/Yourdon) 자료 중심 설계: I/O 구조를 파악해 설계 (cf. J..
익스트림 프로그래밍에 대해 틀린 것 1) 구체적인 실천 방법을 정의하고 있으며 개발 문서보다 소스코드에 중점을 둔다. 2) 구동 원리는 상식적인 원리와 경험을 최대한 끌어 올리는 것이다. 3) 대표적인 구조적 방법론 중 하나다. => 애자일 관련 4) 소규모 개발 조직이 불확실하고 변경이 많은 요구를 접할 때 적절한 방법이다. 소프트웨어 설계에서 자주 발생하는 문제에 대한 일반적이고 반복적인 해결 방법 => 디자인 패턴 설계 기법 중 하향식 설계 / 상향식 설계 비교로 옳지 않은 것 (X) 1) 하향식 설계: 통합 검사 시 인터페이스가 이미 정의되어 통합이 간단하다. 2) 하향식 설계: 레벨이 낮은 데이터 구조의 세부 사항은 설계초기 단게에서 필요하다. 3) 상향식 설계: 최하위 수준에서 각 모듈을 설계..
1. 소프트웨어 공학의 개념 소프트웨어의 특징 - 상품성 - 복잡성: 개발하는 과정이 복잡하고 관리가 어려움 - 변경 가능성: 업데이트 및 오류 수정 - 복제성: 유통을 위한 복제 시스템의 개요와 기본 요소 시스템: 하나의 조직 기본 요소: 입력 -> 처리 -> 출력 -> 제어 -> 피드백 소프트웨어 위기 개발 비용의 증가, 개발 기간의 지연, 개발 인력 부족 및 인건비 상승, 성능 및 신뢰성 부족, 유지보수의 어려움 등 소프트웨어 공학 현대적인 프로그래밍 기술 적용 높은 신뢰성 높은 편리성과 유지보수성 지속적인 검증 시행 등등 2. 재공학 재공학(Reengineering) 장점: 개발 시간 및 비용 감소, 품질 향상, 프로젝트 실패 위험 감소(한 번 검증됨) 등 목표: 유지보수 향상, 수월한 재사용으로..
✏️ forwardRef Reference forwardRef(render) 컴포넌트가 ref를 받아 자식 컴포넌트로 전달하려면 forwardRef()를 호출하면 된다. import { forwardRef } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { // ... }); 이전 버전의 React에서는 React.forwardRef()로 사용되었지만, 현재는 forwardRef를 import하는 것이 일반적이다. 매개변수 매개변수로 쓰이는 render는 컴포넌트의 렌더링 함수다. React는 컴포넌트가 부모로부터 받은 props와 ref를 가지고 이 함수를 호출한다. 반환하는 JSX는 컴포넌트의 결과물이 된다. 반환값 fo..
✏️ Describing the UI : JS in JSX with Curly Braces 따옴표로 문자열 전달하기 JSX에 문자열 속성을 전달하려면 작은따옴표 또는 큰따옴표로 묶는다. export default function Avatar() { return ( ); } src나 alt를 동적으로 지정하려면 따옴표를 {}로 대체하면 된다. export default function Avatar() { const avatar = 'https://i.imgur.com/7vQD0fPs.jpg'; const description = 'Gregorio Y. Zara'; return ( ); } JSX 내부에서는 중괄호로 두 가지 방법만 사용할 수 있다. JSX 태그 안에 직접 텍스트로 사용하기(⭕️) Grego..
✏️ Describing the UI : Writing Markup with JSX JSX: Putting markup into JavaScript 웹은 HTML, CSS, JS 기반으로 만들어져왔다. HTML로 콘텐츠, CSS로 디자인, JS로 로직을 작성해 각각의 분리된 파일을 관리했다. 하지만 웹의 상호작용이 많아지면서 '로직이 콘텐츠를 결정하는 경우'가 많아졌다. 그래서 JS가 HTML을 담당하게 되었고, 리액트에서 렌더링 로직과 마크업이 같은 위치의 컴포넌트에 존재하게 되었다. 각 React 컴포넌트는 리액트가 브라우저에 마크업을 렌더링할 수 있는 JS 함수다. React 컴포넌트는 JSX라는 구문 확장자로 마크업을 표현한다. JSX은 HTML과 유사해보이지만 보다 엄격하며 동적으로 정보를 표시..
