
## 이노베이션이 아니라 리노베이션이다

- 경영을 위한 체질 개선: 쓸데없는 회의를 하지 말자, 보고서는 한 페이지로 하자, 구두로 보고할 수 있으면 구두로 하자,
우르르 모여서 하는 워크숍도 필요없다. => 정해진 시간에 열심히 일하고 퇴근하자.
- simplification: 보고서도 조직도 단순하게
- 회의는 모두가 반드시 알아야할 것을 공유하는 정도로 최소화. 나머지는 당사자끼리 직접 접촉해 해결
- 스마트 스테이션: 영업직의 사무공간을 줄이고 집, 거래처와 가까운 스마트 스테이션으로 출근해 업무
- simplicity = Core + Compact. 꼭 필요한 것(core)+ 나머지는 과감하게 없앤다(compact)
- 임직원의 빠른 피드백 => 직원들의 '불필요한 기다림'이 사라짐

## 솔직한 문화

- 실무자 선에서 대책 마련하거나 문제를 축소하는 방법을 찾아서 보고하지 말 것
- 문제가 발생했다고 즉시 공유하면, 문제를 오픈한 순간 해결은 CEO의 책임이 되고, 구체적인 대안을 함께 고민할 수 있다
- 소비자들만큼이나 내부 구성원들도 기업에 대해 점점 많은 것을 알고 싶어한다. 
- 사실 대부분의 이슈는 이미 리더의 머릿속에는 정리되어 있지만, 적시에 커뮤니케이션이 되지 않으니 구성원들 입장에서는 서로서로 아는 사실을 짜맞추어 추측한다. 이런 추측이 사실인 양 조직 내에 퍼진다. 그러므로 리더가 알게된 회사의 정보는 대외비가 아닌 한 가급적 빠른 시기에 직원들에게 정확하게 공유하고 공감을 일으켜 한 몸처럼 움직이는 조직을 만들어가야한다.
- 모를 때 모른다고 할 수 있다는 것은 그에게 자신감이 있다는 뜻이다. 다른 것은 알지만 이것은 아직 모른다는 의미다. 

## 업의 본질에 따른 포트폴리오 전략

- 세발자전거론: 생활용품, 화장품, 음료 3가지 사업을 함으로써 내진설계
- 고정된 부분은 최소화한다, 구조물의 무게를 경량화해 외부 충격에도 유연하고 빠른 대응이 가능하도록
- 사업의 흥망과 상관없이 고정비를 최대한 줄인다, 위-아래 간 커뮤니케이션을 간소화해 경영의 스피드를 높인다, 리스크와 성장을 고려해 사업분야를 다각화한다.
- 고정비에는 '조직문화적인 고정비'도 포함됨. (회의 자리 미리 세팅하지 않고 들어오는 순서대로 앉기, 이메일에 인사말 쓰지않기) -> 실용주의 

## 선택과 집중의 럭셔리 추구

- 엘지생건의 발효 컨셉 화장품 '숨'을 런칭할 때 "sk-2가 발효화장품인거 아시죠?" 말함으로써 사람들에게 익숙한 카테고리 리더와 비교해 유니크함을 더함. 
- e.g. 서울: 도쿄같은 곳인데 훨씬 다이나믹하다. 도쿄에서는 사람들이 밤 11시면 귀가하지만 서울에서는 그 시간부터 신난다. 

## 리더십과 레거시

- 패스트 팔로워일 땐 가야할 방향이 확실하므로 관리형 인재가 필요. 시장을 선도하는 리더로서 방향설정 능력이 필요할 땐 사업가형 인재들이 필요.
- 각자가 '사업가처럼 일하는 사람'이 

## 정도경영

- 부하직원에게 경어체 (김대리님, 이 파트장님)
- 외부 사람들에게 무리한 부탁을 하지 말자. 나중에 나에게 어려운 부탁을 할 수도 있다.
- 차 부회장은 직원들과 점심을 먹지 않는다. 밥 먹으면서 개인적인 이야기, 회사 돌아가는 이야기 -> 그들에게 정보가 편중됨. 진급 시에도 그 풀에 있는 사람에게 정이 감 -> 결국 파벌이 되고, 객관적이지 못해짐. 

## 결론

- 회사는 결국 직원, 주주, 소비자들에게 잘하면 된다. 그 외에는 예산과 리소스의 낭비가 크다.
- 많이 팔고 던 버는게 마케팅. 제품이 팔려야 백점짜리 마케팅이다
- 스티브 잡스의 'Stay hungry' 아직도 모른다, 여전히 배고프다고 생각해야함. '우리가 경쟁사보다 낫다'고 생각하면 배고픈 사람에게 진다. 
- '마케팅을 화려하게 구사하는' 경영자 말고 '일이 되게끔 하는' 경영자. 수치적 외적 성장보다 경영시스템을 개선하여 내부 성장의 토대를 만들다.
- 엘지생건은 '더하기'보다 덜어내기와 빼기에 주목해 성장했다.


Simplicity = Core + Compact, 리노베이션이 필요하다.

그로잉 업, 고위 경영진의 이야기와 경영 노하우를 배우다


## 주요 보안 취약점

### 입력데이터 검증 및 표현

: 입력값 검증 누락 또는 부적절한 검증, 데이터의 잘못된 형식 지정으로 인해 발생.

- **크로스 사이트 스크립트 공격(XSS)**: 검증되지 않은 외부입력데이터나 부적절한 스크립트가 포함된 동적 웹페이지가 생성,전송되고 웹페이지에 포함된 부적절한 스크립트가 실행됨
- 사용자 정보유출, 세션도용, 악성코드 유포, 브라우저 무한반복 등의 공격
- request.getParameter("name")하는 코드에서 `<script>alert(document.cookies)</script>`가 입력되면 공격자에게 피해자의 쿠키정보가 전송될 수 있음. => 
`replaceAll()`을 사용해 `<`,`>`,`&`,`"`와 같이 스크립트 생성에 사용되는 모든 문자열을 &lt, &gt 등으로 변경해야 실행하지 못하도록 해야함

### sql injection

: 입력 데이터 유효성 점검하지 않아서 db 쿼리 로직이 변경되어 발생.

- 입력 값이 바로 sql 함수의 파라미터로 전달되지 않게 해야함. 파라미터화된 쿼리를 사용해야함. 
자바의 경우 `preparedStatement` 클래스를 사용해 `setString()`해서 외부의 입력이 쿼리의 구조를 바꾸는 것을 방지해야함

### HTTP 응답 분할

: http 요청 파라미터에 `\r\n`같은 걸 넣어서 http 응답이 분리된다. 첫번째 응답은 개행문자(\r, \n)로 종료시키고 두번째 응답페이지는 공격자가 맘대로 수정 가능하다. replaceAll을 넣어 개행문자를 제거해 응답헤더가 나눠지는 것을 방지해야함

- 버퍼 오버플로우: 프로그램이 버퍼에 저장할 수 있는 것보다 큰 데이터가 들어오지 않도록 입력값과 버퍼의 크기를 비교할 것
- 디렉터리 경로 조작: 파일명을 입력받을 때 상대경로(`\`,`\\` )등을 입력하지 못하도록 `replaceAll()`로 특수문자 제거할 것
- os 명령어 injection: `cmd.exe` 명령어와 다른 명령어 삽입하지 못하도록 입력값에 따른 선택지(white list)를 미리 만들어둘것.
- 자원 injection: service입력값을 소켓번호로 그대로 사용하는 경우 "-2920"과 같은 값이 들어오면 기존에 80 포트에서 구동되는 서비스와 충돌되어 에러 발생. 검사를 하고, 정해진 선택지 중 정해진 값을 할당하여 포트를 부여할 것.
- 동적으로 생성되어 수행되는 명령어 injection: eval 사용할때도 입력값 그대로 쓸 것이 아니라 `&amp;`, `&quot;` 등으로 `replaceAll()`하고 써야함
- 프로세스 제어: 외부 라이브러리 사용시 절대경로 사용할 것.
- 무제한 파일 업로드: 업로드하는 파일 타입과 크기 제한. 업로드 디렉터리를 웹서버의 다큐먼트 외부에 설정. 화이트리스트 방식으로 허용된 확장자만 업로드, 확장자도 대소문자 구분없이 처리.
- URL Redirection 시 url과 도메인의 화이트리스트를 이용하고, 사용자로부터 입력받은 url을 그대로 사용하지 말 것
- 시스템의 상태 정보나 중요한 정보는 서버에만 저장한다. 평문으로 사용자의 유저네임, authenticated값 등을 쿠키에 저장하지 말것.대신 세션에 저장해라. 중요한 정보를 쿠키에 저장할 땐 암호화한다. 외부입력 검사가 js를 통해 브라우저에서 이루어져도 서버 측에서 재검사를 한다.

### API 악용

- 필요한 파라미터가 null인지 검사할 것
- Java에서 동일 객체는 동일한 해시코드를 가져야한다. 따라서 한 클래스내에서 `equals()`와 `hashcode()`는 둘다 구현하거나 둘다 구현하지 않아야한다. ?????????????

### 보안특성

- 하드코드된 패스워드
- 사이트간 요청 위조: CSRF(Cross-site Request Forgery) / 교차접속 요청 위조: 공격자가 웹서버에 CSRF 공격 코드를 등록, 사용자가 웹 서버에 CSRF script 포함된 페이지를 요청, 웹 서버는 CSRF script를 포함하여 사용자에게 응답, 사용자는 CSRF에 사용자 권한으로 사용가능한 서비스를 요청. get을 쓰면 form 전달값이 노출되므로 CSRF 공격에 쉽게 노출될 수 있다. 인풋 폼 작성시 post 사용할 것. 또는 폼과 입력을 처리하는 프로그램 사이에 토큰을 사용해 공격자의 직접적인 url 사용을 막을 것
- 부적절한 세션 만료: 세션이 영원히 끝나지않거나 다른 사용자가 세션을 가로챌 수도 있음. 
일정시간이 흐르면 세션이 종료되도록 `session.setMaxInactivaInterval(12000)`등 양의 정수값 설정.
- 취약한 암호화 알고리즘 사용
- 예측 가능한 난수 사용. Java에서 `Math.random()`은 seed를 재설정할 수 없어 위험하다.
 `java.util.Random` 의 `setSeed(new Date().getTime())`을 사용해 r을 예측 불가능한 long타입으로 설정해라.
- 기밀정보의 단순한 텍스트 전송
- https로만 서비스하는 경우 브라우저 쿠키에 데이터를 저장할때 
반드시 Cookie 객체의 `setSecure(true)` 메서드를 호출해야함. 
보안 속성 설정하지 않으면 단순한 텍스트의 형태로 노출될 수 있다.

### 시간 및 상태

: 프로그램 동작과정에서 시간적 개념을 포함한 개념(프로세스 등)이나 시스템 상태에 대한 정보와 관련된 취약점

- 파일 등의 공유 자원을 여러 스레드가 접근해 사용할 경우, 동기화를 사용해 한번에 하나의 스레드만 접근가능하도록 할 것. 다중 스레드와 공유 변수 사용시 thread safe 함수만 사용, java의 경우 synchronized 사용
- 재귀 종료 잘 되도록 할 것

### 에러 처리

- 패스워드는 강하게 요구할 것. 패스워드 복잡도를 검증할 것
- 오류 메시지를 통한 정보 노출. `e.printStackStrace()`를 출력하지 말것. 
에러 메시지는 정해진 사용자에게 유용한 최소한의 정보만 포함하도록 할 것.

### 코드 품질: 코드가 복잡하면 안전성을 위협할 취약점들이 있을 수도 있다

- signed int를 unsigned int로 변환하면 음수가 큰 양수가 되는데 
이 값이 배열의 인덱스로 사용되면 정수 오버플로우가 일어나 프로그램이 오동작할 수도 있음. 
e.g) C의 `len()` 함수에서 문자열이 null일 경우 -1를 반환하는데 이걸 unsigned int로 변환하면 10억단위가 된다. 
버퍼 오버플로우 취약점을 가질수도 있다. null이면 -1대신 0을 반환하게 한다.
- int를 char로 변환할 때 4바이트->1바이트니 크기 확인하고 변환
- database connection 중 예외가 발생되어도 `finally`를 사용해 할당받은 자원(Jdbc 커넥션)을 반환(close)할 것

### 캡슐화

- 제거되지 않고 남은 디버거 코드. `System.err.print("디버그코드")`
- 민감한 데이터를 가진 내부클래스 사용: 내부 클래스는 컴파일 과정에서 패키지 수준의 접근성으로 바뀐다. 내부클래스를 static 선언해 외부클래스의 private 필드에 접근하지 못하게 한다.
- 변경하면 안되는 public 멤버 변수는 반드시 final 키워드로 선언한다.
- private으로 선언된 배열을 public 메서드로 반환하면 외부에서 배열의 reference를 알 수 있다. 
public 메서드 안에서 private 배열의 카피를 만들어서 그것을 반환하도록 작성하면 private 배열의 수정을 막을 수 있음
- 시스템 데이터 정보 누출: 예외 발생시 `e.getMessage()`같은 것 출력하지말고 IOE exception occured 와 같은 대략적인 정보만 제공.

### 그 외 사용 가능한 방법들

- 동적 SQL: 조건에 따라 쿼리가 다를 경우 프로그램 실행시 전체 쿼리가 만들여서 db에 요청하는 sql
- 상호배제(mutex): 동시 프로그래밍에서 공유 불가능한 자원의 동시 사용을 막기위해 사용되는 알고리즘
- DAP(Lightweight Directory Access Protocol): TCP/IP 위에서 디렉터리 서비스를 조회하고 수정하는 응용 프로토콜


주요 보안 취약점과 이를 막기 위한 코딩 방법

시큐어 코딩 : 보안을 고려해 개발하기


## 내 생각

중학생 때 스마트폰을 사용하기 시작해서 줄곧 안드로이드를 사용했다. 고등학교를 졸업한 이후에야 아이폰을 쓰면서 애플 생태계에 들어갔다.
신기하게도 아이폰을 쓴 이후로는 내 휴대폰에 대한 불만, 새 휴대폰을 향한 열망이 사라졌는데 그 이유는 '갤럭시는 사용할 수록 잔렉이 잦아진다'는 거였다.
휴대폰을 사용한 기간이 길어질 수록 속도가 느려지고, 버벅거리는 듯 했는데 마이크로인터랙션의 부재때문에 그렇게 느껴졌었다는 걸 이 책 덕분에 알게 되었다.
아이폰이 상대적으로 마이크로인터랙션이 풍부하게 적용되어있어 기기의 처리 속도가 느려지더라도 사용자(나)가 덜 느꼈다.
애플은 철저하게 마이크로인터랙션을 배치해 휴대폰을 조작하는 것을 사용자로 하여금 디지털의 무언가를 조작하는 게 아니라
철저히 아날로그적인, 부드러운 무언가를 만지는 듯한 느낌을 느끼도록 했다.
실제로 사용자가 화면을 슬라이드하다가 맨 끝에 다다랐을 때에나 언제든 절도 있게 딱딱 끊어지지않고 부드럽게 (자연스럽게) 만들었다고 한다.
마이크로 인터랙션은 사용자에게 절대 작지 않게 작용한다.

## 1장: 마이크로인터랙션 디자인

- 휴대폰이 매너모드일 때 알람도 음소거돼야하는가? iOS 휴먼 인터페이스 가이드라인 왈
"음소거 스위치를 켜 놓아도, **사용자가 분명한 의도를 가지고 직접 설정한 소리**는 그대로 재생됩니다."
- **마이크로인터랙션: 제품에서 1가지 사용 사례에 해당하는 짧은 순간, 혹은 한가지만 수행하는 작은 기능
(e.g. 설정변경, 데이터 동기화, 비번 설정, 로그인 등)**
- "디테일은 그저 디테일이 아니라 디자인 그 자체다" / Charles Eames

### 마이크로인터랙션을 적용하면 좋은 때

1. 하나의 작업을 수행할 때
2. 기기들을 서로 연결할 때
3. 단순한 정보를 주고 받을 때(주가, 날씨 등)
4. 진행중인 기능을 조정할 때(TV 채널)
5. 설정 변경할 때
6. 간단한 내용을 작성하거나 확인할 때 (상태바)
7. 어떤 기능을 끄고 켤 때

- 발전 단계 초기 기술과 같이 물건을 쓰는 방법보다 무슨 기능을 수행할 수 있는지가 의미있을 때에는 마이크로인터랙션의 중요성이 상대적으로 적다.
이후 시장 내 경쟁이 강해질 수록 마이크로인터랙션은 중요해진다.

### 마이크로인터랙션의 숨겨진 역사

- 크롬에서는 검색 시 검색어가 위치한 부분을 노랗게 표시
- 원래 스크롤 바는 행 단위로 움직였고, 스티브 잡스 이후 픽셀 단위로 움직이게 됨. + 스크롤하지 않고도 문서의 끝으로 바로 갈 수 있는 화살표 버튼 추가.
- 터치스크린에서 문서를 아래로 스크롤할 때 손가락을 위로 움직여야할까, 아래로 움직여야할까?
애플이 아이폰 발표 이후 natural scrolling(자연스러운 스크롤 방식)을 위해 아래 스크롤 명령의 방향을 위로 올리는 방식으로 바꿈
- **"버튼의 등장으로 인간의 동작은 그로 인해 생기는 움직임과 처음으로 완전히 분리될 수 있게 됐다." / 드루시, '버튼의 역사'** => 동작이 추상적인 의미를 갖게 됨

### 마이크로인터랙션의 구조

아름다운 마이크로인터랙션은 4요소를 포함: `트리거(trigger)`, `동작규칙(rule)`, `피드백(feedback)`, `순환모드(loops and modes)`

1. 트리거: 모든 마이크로인터랙션의 1요소.  
⁃ 아이폰에서 벨소리 끌 때는 사용자가 직접 행동해야함.(수동 트리거) and 이것은 수시로&빠르게 수행해야함 =>
언제나 쉽게 접근할 수 있어야하고 무슨 기능을 수행하는 중이든 간에 바로 켜고 끌 수 있어야함 => 음소거 용 물리적 조작 장치 부착

2. 동작규칙  
⁃ e.g. 전등은 스위치가 다시 꺼질때까지 계속 켜져서 밝은 상태를 유지해야한다.
3. 피드백: 우리가 **보고 듣고 느낌**으로써 시스템의 동작규칙을 이해하게 하는 모든 것  
⁃ '문서'를 실제로 '폴더'에 집어넣지 않고, '이메일'이 '수신함'에 실제로 오는 게 아닌 것처럼 모든 것은
그안에서 벌어지는 상호작용을 우리가 이해하기 쉽게 해주는 은유(metaphor)임.  
⁃ e.g. 스위치 올리면 전구에 불이 들어오는 것, 이메일 앱에 읽지 않은 메시지 개수, 네비게이션의 음성, 알림음, 주문 진행표시 막대 등
4. 순환과 모드

### 디자인 철학으로서의 마이크로인터액션

제품에 마이크로인터랙션을 부여하는 방법

1. 마이크로인터랙션을 그때그때 상황에 따라 고려. 하나하나 어떻게 개선할 수 있을지 등 생각해본다. but 범위 제한이 어려움
2. 복잡한 서비스를 쪼개서 각 하나의 마이크로인터랙션을 중심으로 하는 개별적인 제품의 집합으로 만든다.
**대신 1기능만 제대로 제공해야한다. 다른 기능은 다른 제품으로 만든다.** (MVP: Minimum Viable Product, 최소 요건 제품)
4. 기능 전체를 서로 연결된 마이크로인터랙션들의 조합으로 다룬다.

## 2장: 트리거

⁃ 1990년 대 뉴욕 지하철의 회수권 대신 플라스틱 메트로카드를 도입할 때 당시엔 터치 스크린을 사용해본 사람이 적었음.
그래서 그들은 **자판기의 모든 화면이 한번에 1기능만 수행하도록** 함.(대화처럼 1화면 1질문하도록 디자인 => 모든 화면이 각 1마이크로인터랙션)

⁃ 전체 터치 스크린을 하나의 커다란 트리거로 만듦. 대기화면을 '이곳을 터치하세요'로 해둠. but 사실 화면 아무데나 터치하면 거래 시작. 이 때의 **트리거는 시작 버튼**.
사람들이 거래 시작할 때 그 버튼을 누르는 것을 유도하는 시각적 힌트이자 가짜 어포던스(affordance)

### 트리거의 조작부

⁃ 1동작(빨리 감기 등): 그냥 버튼, 탭, 밀기 등  
⁃ 2동작(켜기, 끄기): 토글 스위치(but 현재 상태가 뭔지 알기 힘듦), 그냥 버튼
⁃ 여러동작: 다이얼

⁃ 정해진 범위 내 연속적인 값 조절(음량 조절): 슬라이드 바나 다이얼  
⁃ 폼(form): 빈 양식보다 이전에 입력된 내용이나 사려깊게 준비된 기본값으로 미리 채워져있어야함  
⁃ 트리거는 언제나 같은 행동을 해야함.

## 3장: 동작규칙

- **"단지 차별화하기 위해서 다르게 만들어진 물건이 더 나은 경우는 거의 없다. 하지만 더 좋은 물건을 만들려고 하면 거의 언제나 차별화되는 물건이 나오기 마련이다." / 디터 람스**
- 동작규칙 디자인 전에 마이크로인터랙션의 '목표'를 가장 단순명료한 형태로 정의해야함. 이때 목표는 과정이 아니라 사용자가 원하는 최종 상태여야함

### 동작규칙이 결정하는 것들

1. 트리거 활성화 시 마이크로인터랙션의 반응. 백지에서 시작하지 말 것. 사용자와 그 맥락에 대한 정보를 활용하면 마이크로인터랙션 개선 가능(e.g. 사용중인 플랫폼,기기, 시간, 주변공간의 소음 수준, 배터리 수명, 사용자의 위치와 방향, 화면 밝기 등)
2. 마이크로인터랙션 진행중 사용자가 중간에 조작할 수 있는 항목. (E.g. 다운로드 취소, 음량 조정 등)
3. 동작 순서와 타이밍 (e.g. 사용자가 검색창에 문자를 입력했을 때만 검색 버튼 활성화)
4. 사용되는 정보와 그 목적
5. 관련된 알고리듬의 구성과 변수
6. 피드백 종류와 제공 시기
7. 마이크로인터랙션의 모드 (e.g.날씨 앱의 날씨 확인 도시 입력 모드- 날씨 확인 모드) 모드는 가능하면 피해라.
8. 마이크로인터랙션의 반복 여부와 빈도
9. 마이크로인터랙션이 종료될 때 생기는 일
⁃ 동작규칙 정할 땐 마이크로인터랙션을 위해 수행해야하는 것들을 떠오르는 대로 적는다. (요구사항 정의 비슷한 느낌) -> 미묘한 디테일 추가. 논리 흐름도를 적어보는 것도 좋음
⁃ 사용자가 취하는 행동을 동사로, 그런 행동이 가능하게 하는 물건을 명사로 적어보라.
(e.g. '슬라이드 바'로 사용자가 '음량을 높이거나 낮춘다') 이때 마이크로인터랙션에 포함되는 명사는 모두 유일해야함. 같은 명사를 2개의 마이크로인터랙션에서 쓰면 그 둘을 하나로 합치는 것을 고려하라. 서로 다르게 동작하는 항목(버튼 등)은 서로 다르게 생겨야함.

### 마이크로인터랙션의 3상태

1. 기본 상태
2. 활성화 상태(사용자와 상호작용중)
3. 갱신된 상태(사용자와 상호작용 끝)

- 기본 선택값을 잘 준비하고 사용자가 선택할수있는 '동작규칙을 바꾸는' 항목을 무자비하다 싶을 정도로 줄여야함. (e.g. 생일 입력칸이 직접 문자 입력 방식이면 유효하지 않은 날짜를 입력할 수 있다. 방식을 드롭다운 메뉴로 바꾸면 예외 상황 방지 가능)
- 이용할 조작 장치, 장치를 제시하는 방법을 잘 결정해야함. 특히 문자 입력칸의 경우 '불가피한 다양성'이라고 불리는, 다양한 조건에서 제대로 동작할 수 있는 능력 필요 (e.g.구글 문서에서 표 삽입할 때 표의 크기를 시각적으로 선택할 수 있는 창)
- 동작규칙의 주요 역할 중 하나는 사용자의 오류를 원천적으로 방지하는 것.(e.g. 애플의 라이트닝 케이블. 앞뒷면이 같아 사용자가 플러그가 뒤집어진 것을 모르고 꽂으려는 애쓰는 상황을 원천 방지) 사용자가 잘못 조작하는 여지를 남기지 않고 디자인하여 오직 시스템이 제대로 반응할 수 없을 때만 오류 메시지를 표시하도록 해라. (e.g. 댓글 입력창에 욕설을 입력하면 '고양이'로 바꾸어 결과 표시)
- microcopy. 레이블이나 안내문 같은 문구. 동작규칙을 이해하도록 함. (E.g. 페이스북의 '좋아요' 마이크로인터랙션) 레이블만으로 충분한 경우에는 절대로 안내문을 사용하면 안된다.
- 안내문에 사용된 표현은 조작부의 명칭과 정확히 일치해야함

## 4장: 피드백

- 슬롯머신의 시각 효과와 음향이 사용자의 몰입을 불러일으키는 것처럼 피드백이 마이크로인터랙션에 개성을 부여함.
- 목적: 사용자가 그 마이크로인터랙션의 동작규칙을 이해하도록 돕는 것. 사용자가 버튼을 누르면 2가지를 표시하는 반응이 있어야함(1. 버튼이 눌렸다는 것, 2. 버튼이 눌림으로 인해 생긴 일)
- 원칙 1: 피드백을 통해 사용자에게 지나친 부담을 주지 않는 것(e.g. 워드에서 이탤릭 글꼴 입력할 땐 커서 자체를 기울여서 표시)
- 원칙 2: 뚜렷한 이유없이 제공하면 안됨. 언제나 사용자를 도와주기위한 메시지를 전달해야하고 피드백을 야기한 사용자의 동작과 그 피드백 사이에 밀접한 관계가 있어야함
- 원칙 3: 최소한의 피드백으로 최대 정보 전달
- 원칙 4: 디자인 과정에서 간과하기 쉬운 부분을 메시지 전달 방법으로 활용(스크롤 바, 커서, 프로그레스 바, 툴팁, 마우스 오버 효과 등)
- 피드백은 마이크로인터랙션에 성격,유머를 주입할 수 있게 된다. 사용자는 사람같은 반응을 좀 더 받아들인다. 불쾌한 골짜기(uncanny valley) 현상처럼 지나치게 개성을 드러내는 것보단 약간만.

### 피드백이 일어나야하는 경우

- 수동 트리거가 작동한 직후, 트리거 조작중, 조작 완료시
- 마이크로인터랙션이나 주변 조건에 중대한 변화를 일으킨 시스템 트리거가 작동했을 때. '중대한' 정도의 판단은 맥락마다 다름.
- 사용자가 정의된 동작규칙의 범위를 벗어나려고할 때 (e.g. 목록을 끝까지 스크롤해서 더이상 표시할 항목이 없는 상황)
- 시스템이 명령을 수행할 수 없는 경우
- 시간이 오래 걸리고 중대한 작업의 진행상황을 보여주는 경우(e.g. 다운로드 수행에 필요한 시간을 어림잡아 표시)
- 애니메이션이 가져야하는 특성: 빠름, 부드러움, 자연스러움(중력, 관성 같은 자연의 법칙을 따를것), 간결함, 목적(단지 보기 좋다는 이유는 안됨)
- 피드백 시 직설적이지 않게, 불안감을 줄이는 문구로, 무엇이 잘못 되었는지와 해결 방법을 함께 제시해야한다.
- 음향 피드백은 사용자가 이전에 들었던 소리와 연관시킬 수 있는 음향이 좋다. (e.g. 휙 -맨위로 올라가는 소리)

## 5장: 순환과 모드

- 모드: 앱이 평소와 다르게 동작하는 특별한 부분. 특정 모드동안은 평소와 다른 기능이 수행된다.
- 순환 loop: 하나 이상의 명령이 반복. (앞으로 loop)
- 횟수 기준 루프: 정해진 횟수만큼 반복
- 조건 기준 루프: 조건이 충족되면 계속 반복(e.g. 인터넷 접속돼있으면 1분마다 새로운 트윗 확인)
- 수집 기준 루프: 주어진 집합에 포함된 모든 항목을 대상으로 실행 후 종료(e.g. 안 읽은 이메일마다 새 메일 개수 표시를 늘려가는 것)
- 무한 루프. 가급적 피해야함
- 개방형 루프: 피드백에 반응하지 않고 그냥 실행되고 종료됨(e.g. 매일밤 10시에 조명 켠다)
- 폐쇄형 루프: 자체적인 피드백 기제가 있어 스스로 행동 조정(e.g. 자동차 엔진 소음의 크기를 확인, 카 스테레오의 음량을 그때그때 조정)
- 가장 강력한 루프는 오랜 기간에 걸쳐 일어나며 시간이 지남에 따라 행동에 대한 피드백을 받아들이는 폐쇄형 루프 = 장기적 루프
- 사용자가 점차 마이크로인터랙션에 익숙해지면 단순하게 한다. (e.g. 트윗 올릴때 처음엔 'post'라는 문구가 있다가 이후엔 체크 표시만 남는다)

### 장기적 순환 loop

- Long wow(오래 가는 감탄). 시간이 지남에 따라 마이크로인터랙션을 조정함으로써 점차 사용자에 맞춰 변화하는 듯 보이거나
심지어 완전히 새로운 경험으로 여겨지도록 하는 것 (e.g. spotify에서는 플레이리스트에 곡이 추가된 날짜를 시간이 오래됐을 수록 옅게 표시,
구입 희망 목록에 든 상품을 매주 알려줌, 내 정보 기억하기 체크 박스)

## 6장: 마이크로인터랙션 프로젝트의 사례

### 이미 만들어진 제품에 마이크로인터랙션을 개선 또는 추가하는 법

- 이 경험을 특징적인 순간으로 만들 필요가 있는가? 기억에 남아야하는가?
- 백지에서 시작하려면 어떻게 해야하는가? 사용자나 맥락에 대해 알고 있는 정보를 사용해 마이크로인터랙션을 개선할 수 있는가?
- 해당 ML에 든 정보 중 가장 중요한 부분은 무엇인가? 사용자가 첫눈에 확인해야하는 정보가 있는가?
- 사용자의 실수를 예방하고 있는가?
- 익숙해진 사용자를 위해 보이지 않는 트리거를 사용할 수 있는가?
- 문자와 아이콘을 사용자가 이해할 수 있는가? 마이크로카피는 큰 소리로 알려줄 정도로 중요한 내용인가? 유머 감각을 더할 수 있는가?
- 애니메이션을 추가해 좀 더 동적으로 만들 수 있는가? 화면이나 상태를 전환할 때 사용자를 방해하지 않으면서 다음 단계를 표시할 수 있는 방법은 없는가?
- 피드백을 제공할 때 음향이나 촉감 등 다른 방식을 추가할 수 있는가?

### 마이크로인터랙션의 검증

완료율, 마이크로인터랙션의 전체 수행 시간, 특정 단계에 걸린 수행 시간, 단계의 개수, 클릭/탭/선택의 개수,
시스템 오류(ML 스스로)의 횟수, 사용자 오류의 횟수

## 읽으며 인상적이었던 마이크로인터랙션들

1. MailChimp에선 메일의 가로 크기를 침팬지의 팔로 표현함. 메일침프에서 제공하는 600px를 넘어가면 침팬지의 팔이 끊기는 그림을 보여줌
2. 이메일 배경에 웃는 얼굴의 해가 있다. 꼭 기분 좋은 메시지가 아니어도 임의로 웃는 얼굴을 표시하는 것은 좋지 않은 피드백 사례임


버튼의 등장으로 인간의 동작은 그로 인해 생기는 움직임과 처음으로 완전히 분리될 수 있게 됐다.

마이크로인터랙션


## 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에 대해 더 알아봐야겠다.


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

소프트웨어 장인


## 리액트의 특징

- 컴포넌트로 반복되는 부분을 하나의 구성요소로 만들어 코드를 재사용할 수 있다.
- `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를 잃게 된다.

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