개발 용어 정리

라이브러리

• 재사용이 필요한 기능으로 반복적인 코드 작성을 없애기 위해 언제든지 호출하여 사용할 수 있도록 class / function 만들어진 것이다
• 예시: jQuery

프레임워크

• 원하는 기능 구현에만 집중하여 빠르게 개발할 수 있도록 기본적으로 필요한 기능을 갖추고 있는 것으로 라이브러리가 포함되어 있다
• 예시 : Django, Angularjs

아키텍처

• 기획한 내용을 프로그램화 했을 경우 필요한 주요 특징을 기술적으로 설계하고 명시하는 것입니다

플랫폼

• 프로그램 실행 환경
• 예시 : Windows, Linux, macOS

---

Data structure

Array

• 순차적으로 데이터를 저장한다
• 순서가 상관없어도 관련 데이터를 저장할때 자주 사용

다중차원 배열

• [[],[],[]]

단점

remove & add

• 중간 요소가 추가되거나 삭제될때 인덱스를 다시 지정하기 때문에 작업량이 많아진다
• 자주 수정되는 데이터에는 적절치 않은 구조이다

pre-allocation & resizing

• 배열에 일정 메모리를 미리 할당
• 요소가 추가되면 메모리 또한 순차적으로 다시 할당해야 한다
• 때문에 사이즈 예측이 어려운 데이터는 배열이 적절치 않다

주요 활용법

• 순차적인 데이터
• 다차원 데이터
• 고정된 데이터

---

Tuple

• 이 또한 순차적으로 데이터를 저장하지만 수정 불가능
• 소규모 데이터를 저장할 때 사용(좌표데이터)

장점

• 간단한 값을 빨리 표현하고 싶을 때

단점

• 의미가 명확하지 않다

---

React_JSX

• HTML 문법을 javaScript 코드 내부에 써주면 그것이 바로 JSX

JSX attribute

• 태그에 속성을 주고 싶을 때는 항상 ""(쌍따옴표)
• 그리고 실제 HTML 속성명과 다를 수 있으니 공식문서 참조

Self-closin Tag

• <input />, <div /> 라는 표현이 항상 가능하다

Nested JSX

1. 소괄호
2. 무조건 하나의 최고 상위 태그로 감싸주어야 한다

Rendering

• 코드가 눈으로 볼 수 있도록 그려지는 것을 의미한다
  ReactDOM.reder(
  JSX코드,
  부모요소
  );

<div id="root"></div>

const hello = <h1>Hello, world!</h1>;

ReactDOM.render(
  hello,
  document.getElementById('root')
);

Component, props

• 컴포넌트란 재사용 가능한 UI 단위이다
• props 용어는 property 줄임말이다

class Welcome extends React.Component{
  // extend 넣어서 생성해주어야 합니다
  render(){
    // 이 메소드는 무조건 정의해주어야 합니다
    return <h1>Hello, {this.props.name}<h1>;
    // 리턴도 필수 입니다
  }
}

// <Welcome /> 처럼 바로 사용할 수 있습니다

---

200901 세션_react #1

• react 이전의 ui를 저장
• node.js 탈 웹
  프로그램 개발환경에서 주로 활용되기 때문에
• npm(노드 패키지 매니저)

CRA_CreateReactApp

• node_modules : CRA 구성하는 모든 소스코드
• package.json : 추가적으로 설치된 패키지 정보(이름과 버전정보), 소스코드는 node_modules
• gitignore : git 올라가지 않는 파일(node_modules)
• git clone -> npm install 그래야 필요한 패키지,소스코드를 다운받음
  SPA 싱글 페이지 앱

component

• class component
• functional component

JSX

• 최상위 요소로 감싸져 있어야 한다(비어있어도 된다)
• 중괄호 안에 js
• self-closing tag
• {{css}}