
## useEffect

- useEffect: `componentDidMount`, `componentDidUpdate` 이후에 발생하는 코드를 넣음
- 순수 함수는 참조 투명성을 가지는데 (부작용이 없음) useEffect는 이름에서 드러나듯 [함수 컴포넌트가 부작용을 이용하는 도구](https://gyuwon.github.io/blog/2020/07/24/react-has-no-functional-components.html)다.
- 계속 마운트되는 부분의 라이프사이클을 관리
- 클래스 컴포넌트에서는 `componentDidMount()` 등의 함수를 썼었는데 넘 번거로워서 생김

## 직접 써보기

`setInterval`로 1초마다 초를 업데이트하는 함수가 있다.

```javascript
function App() {
  const [second, setSecond] = useState(0);

  setInterval(() => {
    setSecond(second +1);
  },1000);

  return (
    <div>
      <p>{second}초</p>
    </div>
  )
}
```

이 함수의 문제점은 1초마다 함수 전체가 새로 **마운트** 된다는 거다.  
그러면 `setInterval` 함수를 또 시작한다.  

![console log](/images/blog/192021/eff.png)

setInterval 안에서 `console.log` 함수를 찍으면 이렇게 이상한 결과가 나온다.  
`setInterval()` 함수가 대략 1초마다 계속 실행되며 점점 쌓인다.  
이런 경우에 useEffect()를 사용하면 된다!

```javascript
function App() {
  const [second, setSecond] = useState(0);

  useEffect(()=> {
    let interval = setInterval(()=> {
      console.log(second);
      setSecond(second+1);
    }, 1000);

    return () => {
      clearInterval(interval);
    }
  }, [second]);

  return (
    <div className="App">
      <p>{second}초</p>
    </div>
  )
}
```

이렇게 하면 마운트, 언마운트가 반복되며 `second`가 1초마다 1씩 늘어난다.

```javascript
useEffect(() => {
  console.log("mount")
  return () => {
    console.log("unmount')       // 언마운트(cleanup) 안 하면 요청이 반복적으로 발생
  }
}, [second]);                   // mount에 의존적인 변수(dependencies) 삽입
```

추가로, [useEffect 잘못 쓰고 계신겁니다.](https://velog.io/@jay/you-might-need-useEffect-diet)라는 글에 따르면
`리액트18의 strict mode에서는 렌더링을 두번씩 하는데 그럴 경우 불필요한 상태 변경/리렌더링이 있을 수 있으니 useEffect에 클린업함수를 꼭 넣어줘라,
연산이 비싸면 useMemo 써라, react-query 등 캐시된 데이터를 써라`고 한다.



컴포넌트 마운트와 관련해 발생하는 사이드이펙트를 이용하는 리액트 훅!

리액트 Hooks 중 useEffect()에 대해 알아보자


## 머신러닝

: 인간이 경험을 통해 습득한 기능과 같은 것을 인공지능은 인공 신경망을 이용해 절차를 복제하고 기계가 스스로 규칙을 만들도록 한다.
   e.g. 수천개의 이미지를 입력해 데이터로 훈련. 컴퓨터는 그 정보를 가지고 철저히 독자적으로든 아니면 인간의 도움을 받아서든 자기 나름의 알고리듬을 만든다.

### 딥러닝

: 머신러닝이 여러겹으로 이루어진 인공 신경망을 이용해 훈련용 데이터를 학습하는 경우
   e.g. 자연어 처리: 기계가 딥러닝을 통해 손글씨나 사람의 말을 이해하는 것

## 딥러닝이 인기 있는 이유

1. 많은 데이터 수집 가능
2. 컴퓨터 처리능력이 갖춰졌음. (클라우드 컴퓨팅 - 데이터 무제한 저장, 분산처리 분산컴퓨팅으로 거의 실시간으로 빅데이터 분석, 컴퓨터 칩 기술의 발전으로 인공지능 연산처리 기술 성장-> 스마트폰이나 인터넷과 연결된 스마트기기를 통해서도 업무 수행 가능: 사물인터넷Iot 장치에서 엣지컴퓨팅.
인간의 경험을 통한 학습은 강화학습reinforcement learning)을 통해 머신러닝 알고리듬이 복제 가능

### 인공지능이 기업에게 주는 기회

- 고객 이해, 응대하는 방법 결정
- 더욱 똑똑한 상품과 서비스 제공
- 기업활동 절차 개선, 자동화

## 컴퓨터 비전

: 인지 컴퓨팅 기능, 기계의 시각 부분을 연구해 삼차원 정보를 이용하는 컴퓨터과학의 최신분야. 인간의 시각이 하는 기능을 수행하는 자율적인 시스템을 만드는 것이 목표.

1. 알리바바: 세계 최대 전자상거래 웹 포털
    - 중국은 인공지능 지지, 알리바바는 방문객마다 고객페이지뷰 구축, 고객이 구매하는지 다른 품목을 보고 사이트에서 나가는지 등 
    고객의 행동을 관찰해 실시간으로 이 페이지뷰를 조정하며 방문객이 결국 구매할 확률을 높임. 강화학습의 형태인 부분적인 감독 학습의 형태를 설치.
    - 인공지능 카피라이터. 딥러닝 신경망 상으로 운영되는 자연어 처리 알고리듬으로 1초에 2만개 광고 문구를 만들어냄.
    - 자사의 머신러닝, 딥러닝 솔루션을 클라우드 서비스를 통해 제공. 데이터센터들에는 인공지능 알고리듬과 데이터처리 기술을 작동시키는 하드웨어가 설치되어있음.
2. 알파벳: 구글, 베릴리(생명과학), 웨이모(자율주행), 딥마인드, 네스트 등
    - 텍스트, 음성 검색: 자연어 처리 기술, 알고리듬은 사용자 검색문장에서 개별적인 단어의 의미를 파악하기보다 
    각 단어가 다른 단어와 어떻게 연관되어 어떤 의미를 지니는지 파악. *맥락 속의 의미*를 분석함.
    - 구글 번역기는 심층 신경망을 이용해 사용자들이 더 많은 언어에 번역기를 노출시킴에따라 끊임없이 알고리듬을 정교하게 다듬는다. 
    딥러닝을 이용해 해당 언어를 그 언어를 구성하는 기본적인 요소들로 분해함
    - 방대한 양의 데이터뿐 아니라 그 자료를 신속하게 축적하는 네트워크가 머신러닝과 딥러닝의 유용성을 파악하는 열쇠다.
    - 딥마인드: 의 인공지능 기술은 자사 데이터 센터의 기계들에서 뿜어나오는 열기의 냉각효율성을 최적화, 안드로이드 운영체제를 작동시키는 모바일 기기의 배터리 수명 관리
3. 아마존: 설립초기부터 예측분석predictive analytics
    - 데이터 마이닝 기법으로서 기존 데이터를 이용하거나 미래 상황을 가정해 고객이 제안에 반응을 보이거나 특정 제품을 구매할 확률 등 비즈니스 활동 결과를 예측하는 방법
    - 에코: 자연어 알고리듬에 딥러닝 적용. 신경망이 사용자의 각성 단어wake word를 감지. 각성 단어를 들으면 명령에 귀를 기울이고 그 명령을 해석하라고 명령.
4. 애플
    - 머신러닝 기술을 단말기에 장착해 개인정보가 단말기 밖으로 벗어날 필요 없다.
    - Create ML등의 도구를 제공해 앱 개발자들이 머신러닝을 사용하도록 함. homecoat: 카메라를 대면 농구게임 심판판정에 도움
    - 시리의 자연어 처리 기술. 사용자 개인정보를 암호화해 클라우드에 전송
5. IBM
    - 프로젝트 디베이터: 토론하는 인공지능. 논점 발굴,
    argument mining: 인간이 말하는 문장의 의미를 분석하기보다 상대방의 주장이 그릇된 정보를 바탕으로 하고있음을 보여주기위해 권위있는 사실을 인용하거나
     상대방의 주장에서 논리적인 결함을 찾아낸다. 논점 발굴은 논점 포착(논점을 분석해 제시된 주장이 무엇이고 주장의 바탕이 되는 증거가 무엇인지 판단)과 
     논점 입장 분류(그 주장의 구성요소들이 토론의 상반된 입장과 관련해서 어느 위치에 있는지 판단)로 세분화된다.
6. 마이크로소프트: 인공지능의 민주화
    - 사업모델이 기술을 대중에게 보급하는 업무를 중심이었다. Windows 덕분에 Pc 보급, office 등...
    - Project Natick: 데이터센터를 해안도시 근처의 해저에 구축. 미국 인구의 50퍼가 해안도시에 거주하므로 인터넷 속도 향상 가능
    - Renault르노 F1팀과 함께 머신러닝 시뮬레이터를 구축해 F1 레이싱카들의 모든 측면을 분석. 바퀴 소모, 트랙 상태, 엔진 온도 등 모든 정보를 애저 클라우드 서버에 전송. 
    이 서버에서 머신러닝 알고리듬이 도출한 결론이 더욱 정교해져 경기에서 성과 개선 가능
7. 디즈니
    - 매직밴드: 방문객이 식당에 도착하면 이름 부르며 맞아줌, 즉석 퍼레이드를 열어 방문객이 몰려 있는 곳에서 한산한 곳으로 유도, 원하는 식당, 만나고픈 캐릭터 등을 선택하면 대기 시간 줄이는 계획표 제시/ 주파수 ID 식별 기술, 시설들을 데이터 포착 시스템에 통합
8. 페이스북
    - 딥텍스트라는 자연어 처리 기술. 댓글을 구성하는 텍스트를 보고 과거에 괴롭히는 댓글로 경고가 붙은 다른 댓글들과 비슷한 패턴을 보이는지 분석함. 
    딥텍스트는 신경망과 연관된 딥러닝 기술을 이용해 업로드되는 텍스트를 분류, 업로드된 맥락을 이해. 
    딥러닝 시스템은 훈련을 거듭할수록 정확도가 개선되므로 장난인지 의도적인 괴롭힘인지 구분하는 능력이 점점 개선됨.
    각 단어에 의미를 규정하는 태그를 부착할 뿐 아니라 단어의 빈도와 텍스트 안에서의 맥락을 추적, 각 단어가 여러 의미의 관계망에서의 위치를 지정.
    - 일주일 안에 사용자가 7명의 친구를 맺게 하면 페이스북을 장기간 이용하게 될 가능성이 높다.
9. 텔레포니카: 전화, 광대역 통신망, 모바일 네트워크 제공업체
    - 인공지능으로 통신 시설이 미비한 지역사회를 찾아 재정을 투자하고 온라인 서비스를 제공하고자함.
    - 인터넷 파라 토도스 프로젝트. 남미의 20퍼가 모바일 브로드밴드 서비스를 이용하지 못하고 있음. 
    우선 컴퓨터 비전 기술을 이용해 위성사진을 분석하고 어디에 사람들이 거주하는지 파악했다. 
    그다음 해당 지역의 전송망을 분석, 데이터를 이용해 가능한한 많은 사람들을 망라하는 망을 까는 물류 작업을 최적화.
    - 페이스북과 손잡고 고해상도 위성사진의 머신러닝 분석을 이용해 사람들이 사는 위치 지도를 작성. 
    자사의 송신기와 송신탑의 위치 데이터, 인구조사, 위성 데이터로 전송 인프라 시설망을 파악.
10. 바이어컴Viacom: 니켈로디언, MTV 등의 미디어 네트워크
    - 2개 이상의 프로그램에 꽂힌 고객은 장기간 충성도높은 고객이 될 가능성이 350퍼센트 높아진다.
    - 인공지능 알고리즘을 사용해 자사의 온라인 스트리밍 비디오 플랫폼 전체에서 데이터의 흐름과 전송 대역이 확보되어있는지 여부를 모니터한다. 
    비디오 전송 품질을 계속 모니터한다. 그결과 콘텐츠 시청에 가장 큰 변수를 알아낸다. 
    첫 째는. 첫 장면 재생까지 걸리는 시간(time to first frame), 둘째는 비디오가 끊기는 비율(rebuffering rate). 
    인공지능 분석을 이용해 전송대역 경로를 재설정해 이 두 척도가 최적 수준을 유지하도록 함.
11. 인퍼비전Infervision: 중국의 컴퓨터 비전 전문기업
    - 질병 조기 발견에 도움. 딥러닝을 이용해 스캔과 방사선 등 의료 데이터를 해석. 일차적인 데이터 소스는 방사선, CT 스캔 사진이다.
    - 감독형 딥러닝 모델을 이용. 결과가 이미 알려진 데이터 세트를 가지고 훈련을 받는다. 
    알고리듬을 구동하는 심층 신경망에 암을 진단받은 환자의 사진을 입력하고, 건강한 폐의 사진으로 정상적인 폐의 기준을 구축하고, 정상에서 벗어난 데이터를 포착하면 경고.
    - 자사의 기술이 의사를 대체하기보단 의사들이 예전보다 더 신속하고 효율적으로 진단하도록 돕는다고 강조
12. 세일즈포스: 고객관리 인공지능 솔루션 제공업체
    - Saas(서비스로서의 소프트웨어)인 아인슈타인 플랫폼을 제공함. 고객사는 자신의 고객데이터 보안 유지에 매우 민감하기 때문에, 
    실제 데이터 자체가 아니라 메타데이터로 작동하는 머신러닝 알고리듬을 설계했다. 
    고객 데이터를 구성하는 요소들에 표지를 부착해 데이터 준비 절차를 자동화했다는 뜻이다. 
    예를 들어 고객관리 DB 내 한 영역이 이메일이나 마케팅 목적인지 여부를 인식해 표지를 부착. 
    알고리듬이 고객 데이터를 보지 않고도 처리 가능.
    - 판매, 마케팅, 청구서 발송, 재정 기획 등 영업업무를 처리
13. 콘Kone: 엘리베이터, 에스컬레이터 엔지니어링 및 유지보수 업체
    - 에스컬레이터와 엘리베이터의 속도, 온도, 소음 수위, 케이블을 타는 진동의 빈도 등을 감지하는 센서가 있다. 
    데이터를 클라우드에 연결했다. 데이터를 바탕으로 결함, 가동중지 가능성이 높은 기계를 파악하는 지식을 축적.
    - 집단 통제 기능을 사용해 효율적인 엘리베이터 구동. 에너지와 시간이 덜 낭비된다.
14. 미국항공우주국NASA
    - 가장 큰 문제는 우주에서 지구로 정보를 전송할 때 사용가능한 대역이 제한되어있다는 점이다. 오늘날 데이터 용량은 mb단위로 측정.
    - 오픈소스 검색,분석 엔진인 엘라스틱서치가 인공지능 시스템의 중추를 구성하고 토양 수분에 대한 고해상도 데이터를 포착할 때도 사용됨. 
    정상 범위를 벗어난 암석을 큐리어시티의 레이저로 수증기로 만들어 어떤 물질로 구성되어있는지 알아낼 수 있음.
15. 볼보
    - 자율주행 시스템 구축을 위한 업체인 Zenuity를 설립, 딥러닝으로 자동차의 카메라와 센서에서 수집된 데이터를 토대로 주변 사물을 인식하고 반응. 
    실시간으로 상황 지도를 구축해 인공지능 프로세서에게 자동차 주변환경을 360도로 보여준다. 
    컴퓨터 비전, 센서 융합, 의사 결정 및 자동차 제어를 위한 알고리듬이 내장되어 있다. 실시간 시스템인 만큼 방대한 연산능력이 필요하다. 
    델 EMC의 VMWare와의 제휴를 통해 서비스로서의 고성능 컴퓨터에 의존해 데이터를 처리.

## 맺음말

- 인공지능에 전략적으로 접근하라.
- 인공지능에 대한 인식과 기술을 제고하라.
- 적합한 데이터를 확보하라.
- 기술과 IT 시스템을 업데이트하라. 데이터 저장과 처리용량 면에서 최신기술이 필요하다.
- 인공지능을 윤리적으로 이용하라
- 인공지능이 초래할 파괴에 대비하라. 저숙련 기술 일자리나 단순 작업 등


AI를 효과적으로 사용하고 있는 회사들

페이스북은 내가 우울증인걸 알고 있다


## JSX: react element를 생성함. js의 확장된 문법 

React.createElement()보다 HTML 보기에 용이.

## Before JSX

```javascript
React.createElement("div", null, React.createElement("span", null, text)
```

## After JSX

```javascript
<div>
  <span/>
</div>
```

## 바벨(Babel): JS 컴파일러

프론트엔드 개발하시는 분들은 한번쯤 들어보셨을 바벨! 바벨은 바로 **'자바스크립트 컴파일러'**입니다.  
무슨 뜻일까요?

## 자바스크립트 컴파일러?_?

바벨의 옛날 이름은 6 to 5였습니다. 자바스크립트 ES6로 짜여진 코드를 ES5의 문법으로 바꿔주는 역할을 했죠. 그래야 신형 문법으로 코드를 짜도 구버전만 지원하는 브라우저들이 이해할 수 있었기 때문이죠!!

즉 바벨은 **예전 언어만 알아듣는 브라우저를 위한 새로운 문법 통역사** 같은 존재인 겁니다!

- 옛 이름: 6-to-5. (JS 옛 버전을 읽을 수 있도록 컴파일함)
- JSX를 읽으려면 바벨이 필요함

## 웹팩(Webpack.js): 모듈 번들러

- 리액트에서 default 제공
- static asset(js, css, jpg, png) 등으로
- entry point를 config.js에서 정리하면 Js에서 사용하는 것들을 모아 주석, 불필요한 공백 등 없애고 압축해 .dist타입의 output 만듦.
- create-react-app 안에 웹팩+바벨 설정이 들어가있어 사용자가 따로 할 필요 없음. (=boilerplate. 반복작업을 다 한 ..sample같은 것)

## create-react-app가 생성하는 리액트 앱의 구성요소들

### src

- `App.js`: App이라는 최상위 컴포넌트
- `index.js`: entry point. index.js에서 시작해서 app.js를 호출하는 등 다른 파일들이 시행되는 곳
- `App.test.js`: test 용
- `reportWebVitals.js`: web 상태를 report

### public: 기준이 되는 정적 asset들

- `index.html`: 기준이 된다.
- `manifext.js`: 웹 사이트의 기본 정보(로고, favicon 등)
- `robots.txt`: 크롤링 허용/불허 관련 정보

### root

- `package.json`: dependency 정보

yarn eject: 환경 설정을 커스터마이징할 거라는 명령. script config 디렉토리가 추가됨


그리고 CRA가 생성하는 파일들과 구조까지 알아보자.

JSX 사용법과 바벨, 웹팩에 대해 알아보자.


[원문(영어)](https://web.dev/learn/css/box-model/)
공부 내용을 우리말로 기록하되, 원어일 때 이해가 쉬운 부분은 번역하지 않음.

- border-radius를 적용해 원형처럼 보이거나 평범한 텍스트마저도 **CSS로 표현되는 모든 것은 box이다**.  
- CSS 요소는 display 값이나 그 안 내용물 등에 따라 다른 성질을 가진다.

## 내부 요소(contents)가 박스의 사이즈에 영향을 끼치는 경우

```css
p {
  width: 100px;
  height: 50px;
  padding: 20px;
  border: 1px solid;
}
```

이 코드를 작성하면 해당 태그는 width로 입력해준 100px가 아니라 142px의 너비를 가지게 된다.

![extrinsic vs intrinsic](https://images.velog.io/images/hailey99/post/a7b20181-1e01-4a90-916f-43f53996f706/image.png)

## extrinsic sizing

- 사이즈(width)를 직접 정해주는 경우
- extrinsic sizing을 사용하면 내용이 박스의 범위를 넘어버림( = overflow)

## intrinsic sizing

- 브라우저에서 **내용물의 크기를 기반으로, 내부적으로 알아서** 사이즈(width)를 결정 
(위 코드에서는 width: min-content로 내용물을 담기 위한 최소 너비로 지정)
- intrinsic sizing을 사용하면 내용물이 박스에 맞춰짐

![box의 4부분](https://images.velog.io/images/hailey99/post/3e1ac3b5-d418-4fde-83b3-857adfcfeff4/image.png)
box model은 이렇게 4개로 구분된다.

1. **content box**: content(내용물)이 자리하는 곳. 이 내용물이 그 부모(box)의 크기를 결정.
2. **padding box**: content box를 둘러쌈. 이때 `padding`이란 box의 내부를 의미. 
만약 박스가 `overflow: auto`나 `scroll`로 돼있으면 이 부분에도 스크롤 바가 생긴다.
3. **border box**: padding box를 둘러쌈. border edge가 우리가 볼 수 있는 box의 가장 큰 범위.
4. **margin box**: box 겉부분. outline, box-shadow 와 같은 속성이 이부분에서 사용됨. 이 요소들은 box의 사이즈에 영향을 미치지 않음.

Box model을 잘 사용하기 위해선 브라우저에서 일어나는 일을 이해해야함.

- 태그 별로 브라우저에 내장된 스타일이 있는데, `<div>`의 경우 `display` 값이 `block`, `<li>`는 `list-item`, `<span>`은 `inline`이다.
- 인라인 요소는 `block margin`을 가지지만 다른 요소들이 그렇게 고려하지 않음. 
`inline-block`을 사용하면 인라인 요소의 대부분의 특징을 갖지만 다른 요소들이 block margin을 고려해줌.
 **inline, inline-block 요소는 내용물 만큼의 크기**를 가진다.
- block 요소는 남은 인라인 공간을 다 채운다.
- 디폴트로 모든 요소는 **box-sizing: content-box** 이다. 
이 값은 **width와 height을 정할 때 그 값들이 content-box**에 적용된다는 뜻이다. 
`padding`이나 `border`값은 별개로 붙는다.(실제 border edge까지의 박스 너비는 정해진 값보다 커진다.)
- box-sizing: `border-box`를 하면 css `width` 값이 `border`, `padding`을 포함하는 `border-box`에 적용된다.


CSS 박스 모델이란?


## 소프트웨어장인

- 소비자들은 기민한 서비스를 원한다.
- 오늘날의 프로젝트들은 여러가지 기술들을 복합적으로 사용하고 복수의 integration point를 두어 **점진적이고 반복적**으로 개발된다.

### 애자일 매니페스토 원칙 중

- 가치있는 소프트웨어를 **일찍**, 지속적으로 전달하여 고객을 만족시키는 것을 최우선으로 한다.
- 동작하는 소프트웨어를 몇 주에서 몇 개월 단위로 자주 전달한다. **가능한 한 전달주기를 짧게** 한다.

## 애자일

- 시간, 인건비 낭비라며 페어 프로그래밍 (두 명이 한 코드를 작성), 테스트 주도 개발 거부하는 회사나 개발자가 많다. -> 설계 단순화, 코드에 공동의 오너십을 갖기 힘들어진다. -> 오류를 빨리 발견할 수 없다.
- **짧은 피드백 루프**는 기업이 기민해지기 위한 핵심 요소다.
- 애자일 전환이 절차와 도구로 끝나버리는 것을 경계해야한다.(스크럼 도입, 스탠딩업 미팅, 백로그 관리 툴)

## 소프트웨어 장인 정신

- SW 개발자가 **책임감, 프로페셔널리즘, 실용주의, 그리고 자부심**을 갖고 지속적으로 **새로운 도구와 기술**을 익히며 발전하겠다는 마음가짐을 말한다.
- 보이스카웃에는 캠핑 장소를 처음 발견했을때버다 더 깨끗하게 남겨두라는 규율이 있다.
- **멘토링, 프로페셔널 커뮤니티를 조성하기, 경험이 적은 개발자와 지식을 공유하기를 주저하지 않는 사람**
- 적극적으로 **요구사항에 질문하고 비즈니스를 이해하고 개선사항을 제안**하며 고객 또는 고용주와 생산적인 동반자가 되어야한다.
- 고객은 프로페셔널의 지식과 기술에 대한 돈을 지불한다. 나 자신의 커리어의 주체가 될 것.
- 오늘날 우리는 계속해서 늘어만 가는 정보 속에, 계속해서 줄어만 가는 의미를 목도하는 세상에서 살고 있다. / 장 보드리야르

## 동작하는 소프트웨어

- 로컬에서 돌려볼 수 있는 단위 테스트를 작성해야한다.
- 단위 테스트는 우리가 코드를 작성하는 **방식에 이미 녹아있는 것**이지 별도의 작업이 아니다. 구현이 완료되었다고 하려면 테스트까지 통과해야한다.
- 자동화된 테스트!
- 테스트 주도 개발: 테스트가 코딩 방향을 주도하면 복잡한 코드 작성이 어려워지므로 요구 사항만큼만 만족시키는 간결한 코드가 탄생한다.
- 자주 변경되는 부분을 대상으로 리팩토링해야한다.

## 실용주의 장인정신

- 품질은 선택하는 게 아니다.
- 테스트 주도 개발이 항상 필요한 건 아니지만 TDD에 능숙한 사람은 테스트 주도 개발때문에 일정이 지연되지 않는다.
- 모든 테스트를 통과할 것, 중복을 최소화할 것, 명료성을 최대화할 것, 구성요소를 최소화할 것.

## 책을 읽은 후 나의 감상

아직 개발을 시작한 지 얼마 되지 않았지만 온라인에서, 오프라인에서 많은 소프트웨어 장인들을 만났다. 
내가 본 그들의 공통점은 개발에 관한 이야기를 할 때 마냥 밝은 건 아니어도 눈빛이 살아있다는 것, 더 나은 코드를 짜려고 계속 고민한다는 것, 새로운 기술을 적용해보려한다는 것 등이다.
이 책에서 저자가 한 줄로 정리한 '소프트웨어 장인'은 책임감, 프로페셔널리즘, 실용주의, 자부심을 갖고 계속 수련하는 것!!! 
이 중에서 실용주의는 특히 내 기술을 깊고 또 넓게 해야만 가능할 듯하다. 기민함은 내가 속해있는 단체에서 어느정도 지원해줘야겠지만, 
내 스스로도 이를 적용할 방법을 계속 생각해봐야겠지! 테스트 주도 개발을 거의 해보지 않아서 TDD에 대해 더 알아봐야겠다.


품질은 선택하는 게 아니다. 점진적, 반복적으로 개발하자.

소프트웨어 장인


## MySQL과 Oracle의 차이

1. 데이터가 저장되는 스토리지의 구조 차이

- 오라클 DB는 통합된 스토리지 하나를 공유 vs MySql은 물리적인 DB서버마다 독립적인 스토리지를 할당
- 공유 스토리지를 사용하는 오라클은 사용자가 어느 DB 서버에 접속하던 같은 결과가 출력되고 동일한 CRUD 처리 가능
- MySQL은 주로 master-slave 구조. 마스터 노드는 CRUD 수행가능, 슬레이브는 읽기만 가능. = DB 서버마다 각 역할이 나뉠 수 있다.

2. 지원하는 기능 차이

- MySQL은 조인 시 대부분 nested loop join, Oracle은 nested loop join, sort merge join(정렬 병합 조인)과 해시 조인 사용.
- MySQL은 스토리지 엔진이라는 개념을 포함하기에 오픈소스 DBMS를 바로 꽂아 사용할 수 있는 확장성을 지님 (plug & play)
- MySQL은 오라클 대비 낮은 메모리 사용. 저사양 PC에도 적합.
- MySQL은 데이터가 변경되면 메모리의 캐시를 모두 삭제함으로 캐시 기능에 한계

### 스토리지 엔진

- sql query로 db에 저장된 디스크나 메모리에서 필요한 데이터를 가져와 MySQL 엔진으로 보냄
- 데이터 저장 방식에 따라 다름

### SQL 프로세스

SQL 실행 과정에서 핵핵심 오브젝트: 파서, 전처리기(preprocessor), optimizer, 엔진 실행기

- 파서: mysql 엔진에 속함. sql 쿼리를 최소 단위로 쪼개 문법 검사를 하며 트리로 만듦.
- 전처리기: = mysql 엔진. 파서에서 생성한 트리로 구조적 문제가 없는지 검사. (접근 권한 있는지 등)
- 옵티마이저: mysql의 핵심 엔진 중 하나. 전달된 파서 트리에서 **필요없는 조건 삭제, 연산 단순화. 어떤 순서로 테이블에 접근할지, 무슨 인덱스 쓸지 등 실행 계획을 수립** 단, 실행 계획 경우의 수가 너무 많으면 모든 실행계획을 계산하진 않아서 옵티마이저가 선택한 최적의 실행 계획이 무조건 best는 아닐 수도 있음
- 엔진 실행기(engine executor): Mysql 엔진과 스토리지 엔진 영역 모두에 걸침. 실행 계획을 참고해 스토리지 엔진에서 데이터를 가져옴. 이후 읽어온 데이터를 정렬하거나 조인, 불필요한 데이터는 필터링. 따라서 **mysql 엔진의 부하를 줄이려면 스토리지 엔진에서 가져오는 데이터양을 줄이는게 매우 중요**

### DB 오브젝트들

- 인덱스: DB에서 키값으로 실제 데이터 위치를 식별해 데이터 접근 속도를 높이고자 생성되는, 키 기준으로 정렬된 오브젝트
- 뷰: 가상 테이블. 뷰를 만들어 제한된 정보만 제공 가능. 여러 테이블을 join해 최적화된 뷰를 생성하면 좋음
- 쿼리 안에 중첩쿼리 있는 경우 SELECT (스칼라 섭쿼리) FROM (인라인 뷰) WHERE (중첩 섭쿼리)
- 비상관 서브쿼리: 메인, 서브쿼리가 독립적으로 실행가능한 경우. 서브쿼리 -> 메인쿼리 순서로 실행됨
- 상관 서브쿼리: 메인 -> 서브 -> 다시 메인 쿼리 순서로 실행

### 조인 알고리즘

- driving, driven 테이블: join B on A.col = B.col인 것처럼 먼저 접근하는게 드라이빙 테이블, 그 결과로 접근하는 테이블이 드리븐 테이블. **드라이빙 테이블에서 많은 건이 반환되면 그 결과를 가지고 드리븐 테이블에 접근하므로 최대한 적은 결과가 리턴될 것 같은 테이블을 드라이빙 테이블로 구성해야함**
- nested loop join: 드라이빙 테이블의 데이터 1건당 드리븐 테이블을 검색하는 것을 반복해 최종적으로 양쪽 테이블에 공통된 데이터를 출력


업무에 바로 쓰는 SQL 튜닝


## 리액트의 특징

- 컴포넌트로 반복되는 부분을 하나의 구성요소로 만들어 코드를 재사용할 수 있다.
- `state`를 사용할 수 있다.
- `virtual dom`: 페이지 로드 시 연산이 줄어들고 리소스를 재활용하기 좋다. (처음에는 로드하느라 조금 느릴 수 있지만 그다음부터는 페이지 전환이 빠름)
- 단방향 데이터 바인딩

### 단방향 데이터 바인딩

데이터 바인딩 : **화면에 보이는 데이터와 브라우저 메모리에 있는 데이터를 일치시키는 것**

양방향 데이터 바인딩의 경우, 데이터의 변화를 감시하는 `watcher`가 두개라 컨트롤러(자바스크립트)와 뷰(HTML)에서 데이터가 변경될 수 있다.    
단방향 데이터 바인딩의 경우 템플릿과 모델(데이터)을 합쳐 뷰에 반영한다. 자바스크립트의 데이터가 HTML에 표현되므로 
단방향 데이터 바인딩을 하면 데이터의 변화를 예측/감지하기 쉽고, 데이터를 추적하거나 디버깅하는 데 용이하다.

## 리액트의 라이프사이클 함수 (생애주기)

1. `constructor()`
2. `componentWillMount()`
3. `render()`
4. `componentDidMount()`

## 클래스 컴포넌트

- 옛날 문법
- `render()` 안에서 `return`

## 함수 컴포넌트

- 함수(function)를 기반으로 작성
- 클래스 컴포넌트의 `componentDidMount`는 함수 컴포넌트의 `useEffect`로 대체 가능하다.

## 리액트 개발 시 주의할 점

- react 사용할땐 DOM 직접 조작을 피하자. 변경하려는 유일한 것은 `state`여야 한다.
- 리액트에서 `prop`을 주고 받을때 필요한 컴포넌트가 여럿 넓게 펼쳐져 있는 경우, 
주고 받기 복잡하고 유지보수 또한 어려워진다. 그럴땐 리액트 자체 `Context API`를 사용하면 좋다. 
필요한 상태가 있는 컨텍스트를 따로 만들어두고 필요할 때 그때그때 값을 사용할 수 있다.

## 리액트 최적화 방법

1. `useMemo`로 복잡한 연산이 필요한 함수는 캐싱. 함수의 디펜던시(파라미터)가 같을 경우 이전에 리턴했던 참조값을 재사용함.
2. 클래스 컴포넌트에서는 `React.memo`로 메모이제이션 (`useMemo`와 같음)
3. `useCallback`으로 함수 선언을 메모이제이션
4. 자식 컴포넌트에게 `props`를 전달할 때, 새로 객체를 생성해 보내지 말고 `state` 그대로 넘기고, 
필요한 데이터 가공은 자식 컴포넌트 안에서 하자. 
`props` 값이 변경될 때마다 컴포넌트를 렌더링하므로 `state`만 전달해주고 자세한 연산은 자식 컴포넌트 안에서 하도록 하는게 좋다.
5. `map()` 함수 사용시 컴포넌트의 `key`값으로 인덱스 값 넣지 않기. 
배열 중간에 요소가 삽입 또는 수정, 삭제될 경우 그 이후의 요소들은 전부 인덱스가 변경되기 때문이다.


## 리액트 컴포넌트가 리렌더링하는 상황

1. 전달받은 **props가 변경**될 때
2. 자신의 **state가 바뀔** 때
3. **부모 컴포넌트가 리렌더링**될 때
4. **forceUpdate 함수가 실행**될 때


## 컴포넌트 리렌더링 방지법

1. class 형 컴포넌트: shouldComponentUpdate라는 라이프사이클 메서드 사용

2. **함수** 컴포넌트: export 할 때 React.memo() 사용해 컴포넌트의 props가 바뀌지 않은 경우 리렌더링하지 않도록 설정

3. setter 함수에 새로운 상태를 파라미터로 넣지 말고 상태 업데이트('->')를 어떻게 할지 정의하는 업데이트 함수를 넣기 

### [업데이트 전]
![상태 업데이트 전](https://images.velog.io/images/hailey99/post/f986c062-ee23-4aba-a6ce-dc507468da6b/image.png)

### [업데이트 후]
![상태 업데이트 후](https://images.velog.io/images/hailey99/post/13ecc8c4-1296-4339-8390-710aa358305e/image.png)

4. **useReducer 사용**
App.js 내(& 컴포넌트 밖)에 상태 업데이트 로직을 모아둘 수 있음.

### [상태 업데이트 로직]

![상태 업데이트 로직](https://images.velog.io/images/hailey99/post/04dea2b3-57f4-4d45-8627-1c0a1c20112e/image.png)

## useState 써보기

![usestate 예시](/images/blog/192021/usestate.gif)

```javascript
function App() {
    const [text, setText] = useState('감추기');
    // 1

    const buttonClick = () => {
        text==='감추기'? setText("보이기") : setText("감추기")
    }
    // 2

    return (
        <div className="App">
            {text==='보이기' && <MainHeader text='hello'></MainHeader>}  
            <button onClick={buttonClick}>{text}</button>    
        </div>
    );
    //3
}
```

1. useState(초기값), 리턴값은 배열로 [상태데이터, 상태 세터함수]
2. 간결하게 쓴 if문이다!
3. text==='보이기'에 and 연산을 함으로써 해당 조건에 맞으면 ```<MainHeader>``` 컴포넌트를 표시하도록 하였다.

## 변수 객체화

![변수 간단하게 쓰기](/images/blog/192021/rct1.png)

이름의 성(lastname), 이름(first name)과 같이 거의 따로 쓰는 게 없을 때, 위의 코드보단  
객체화해서 아래처럼 쓰는게 좋다.

```javascript
const [name, setName] = useState({
    first: '하은',
    last: '박'
});
```

## useRef()

- input 관리할 때 유용한 함수다.

```javascript
 return (
    <div className="App">
      <h1>{name.last}{name.first}</h1>
      <input name='성' placeholder='성'></input>
      <input name='이름' placeholder='이름'></input>
      <button onClick={confirm}>확인</button>
    </div>
  );
```

위와 같은 코드가 있다고 할때, input에 입력된 값을 저장하거나 받는 함수가 없다.  
그럴 때 쓸 수 있는게 useRef() 함수다!

```javascript
  const firstNameRef = useRef()
  const lastNameRef = useRef()

  const confirm = () => {
    // setName();
    console.log(firstNameRef.current.value)
  }

  return (
    <div className="App">
      <h1>{name.last}{name.first}</h1>
      <input name='성' placeholder='성' ref={lastNameRef}></input>
      <input name='이름' placeholder='이름' ref={firstNameRef}></input>
      <button onClick={confirm}>확인</button>
    </div>
  );
```

이런 식으로 ```<input>``` 태그 ref 속성에 useRef 함수를 넣어주면 그 안에 들어온 인풋값을 참조해올 수 있다.  

![useRef console](/images/blog/192021/rct2.png)

confirm()함수에서 ```firstNameRef.current.value``` 를 콘솔 찍어보니 input으로 받은 값이 나온다!
이벤트 함수에서 e.target.value와 비슷한 원리인 듯 하다.

## useRef를 사용해 인풋 값을 화면에 띄우는 코드

```javascript
function App() {
  const [name, setName] = useState({
    first: '하은',
    last: '박'
  });

  const firstNameRef = useRef()
  const lastNameRef = useRef()

  const confirm = () => {
    setName({
      first: firstNameRef.current.value,
      last: lastNameRef.current.value
    })
  }

  return (
    <div className="App">
      <h1>{name.last}{name.first}</h1>
      <input name='성' placeholder='성' ref={lastNameRef}></input>
      <input name='이름' placeholder='이름' ref={firstNameRef}></input>
      <button onClick={confirm}>확인</button>
    </div>
  );
}

export default App;
```

useRef 함수로 참조해온 값을 setter 함수(setName)에서 바꿔주면 간단하게 완성된다!!


리액트 함수 컴포넌트, 클래스 컴포넌트의 차이와 컴포넌트 리렌더링


[참고글: Input is loosing focus on hooks update](https://stackoverflow.com/questions/56758864/input-is-loosing-focus-on-hooks-update)

## 문제 상황
- 인풋 버튼과 로직이 컴포넌트 밖에 있으면 잘 동작하는데, 
다른 컴포넌트 안에 넣을 경우 `input`이 클릭돼도 `focus`를 잃는다.

## 이유 (해결법)
함수 컴포넌트는 다른 컴포넌트 안에서 정의되면 안된다.  
A 컴포넌트 안에서 B 컴포넌트를 정의하면 클릭이 일어날 때 **리렌더되는게 아니라 재생성(recreate)되게** 한다.   
즉 클릭 이벤트가 있을 때마다 DOM이 사라졌다가 다시 생성되는 셈이다.
그러니 인풋이 클릭됐던 걸 잊고 focus를 잃게 된다.

함수 컴포넌트를 다른 컴포넌트 안에 넣지 말자

Categories