익스트림 프로그래밍에 대해 틀린 것 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과 유사해보이지만 보다 엄격하며 동적으로 정보를 표시..
✏️ useRef Reference useRef(초기값) 컴포넌트의 최상위 레벨에서 useRef를 호출해 ref를 선언한다. 초기값에는 어떤 유형의 값이든 지정할 수 있으며 초기 렌더링 이후 무시된다. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... useRef는 단일 프로퍼티를 가진 객체를 반환한다. 처음에는 전달한 초기값으로 설정되며 나중에 다른 값으로 바꿀 수 있다. ref 객체의 JSX 노드의 ref 속성으로 리액트에 전달하면 리액트는 current 프로퍼티를 설정한다. 아래의 렌더링 사례에서 useRef는 동일한 객체를 ..
✏️ Describing the UI : Importing and Exporting Components The root component file CRA에서는 앱 전체가 src/App.js에서 실행된다. 설정에 따라 루트 컴포넌트가 다른 파일에 위치할 수도 있고, Next.js처럼 파일 기반으로 라우팅하는 프레임워크의 경우 페이지별로 루트 컴포넌트가 다를 수 있다. 리액트에서 루트 컴포넌트는 애플리케이션 내의 최상위 엘리먼트를 의미한다. 일반적으로 리액트 앱에 진입점 역할을 하는 public/index.html 파일 내의 DOM 노드로 표시된다. import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; // ..
✏️ Describing the UI : Your First Components Components: UI building blocks 컴포넌트는 리액트의 핵심 개념 중 하나로 UI를 구축하는 기반이다. 웹에서는 HTML 태그로 풍부한 구조의 문서를 만들 수 있다. 리액트를 사용하면 마크업, CSS, JS를 컴포넌트로 결합해 재사용할 수 있다. 이 때 컴포넌트란 앱에서 재사용 할 수 있는 UI 요소라고 이해하면 된다. 리액트 앱에서 모든 UI는 컴포넌트로 구성된다. 컴포넌트를 재사용하는 것은 여러 가지 이점이 있지만, 가장 대표적으로 빠르게 다양한 화면을 개발할 수 있다는 점이다. n개의 동일한 UI를 만드는 것과 컴포넌트를 사용해 동일한 UI를 n번 사용하는 것을 상상하면 당연히 후자가 빠를 것이다. ..
스토리북 일단 공식 문서에서 확인해보자. (링크) 스토리북은 컴포넌트 기반의 뷰를 위한 독립적인 UI 개발 환경이다. 말이 너무 어렵다. 프론트 단에서 컴포넌트 단위를 개발, 테스트, 문서화 할 수 있는 도구라고 생각하면 된다. 각각의 컴포넌트를 독립된 스토리로 분리해서 개발한다. props를 내려줘 바로바로 디자인이 변경되는 것을 확인, 테스트, 디버깅을 할 수 있다. 문서화 할 수 있어서 재사용성이 높고 개발자나 디자이너 등 팀의 협업을 용이하게 한다. 이전에 만든 바닐라로 MBTI 테스트를 React로 만들고, TS로 마이그레이션도 해보려고 하는데 혼자 컴포넌트도 문서화 해보면 좋겠다는 생각이 들어서 스토리북을 시작해봤다. 설치 필자는 제목처럼 타입 스크립트가 아닌 React, yarn, vite로..
로컬 저장소에 원격 브랜치 가져오기 상황 곰곰 프로젝트 중 백엔드 분의 작업물을 내 로컬에서 돌리고 있다. 새로운 feature를 기획하면서 feature/sort-answer라는 브랜치를 새로 만드셨다. 내 로컬에서 테스트 하기 위해서는 feature/sort-answer 브랜치를 당겨와 실행해야 하는데 내가 클론한 백엔드 분의 작업물에는 main, dev 브랜치 밖에 없다. 이 때 원격에 있는 브랜치를 내 로컬 저장소로 가져오려면 어떻게 해야 할까? 해결 1. git remote update로 원격 저장소에 있는 브랜치들을 로컬 저장소로 업데이트 한다. 2. git branch -r로 원격 브랜치, git branch -a로 모든 브랜치를 확인할 수 있다. 로컬 저장소를 업데이트 했다면 이제 가져와야..
