더블리의 12층

                  {Object.keys(dong_info.layers).map((key, index) => (
                    <Paper className={classes.paper} key={index}>
                      가격:{dong_info.layers[key].price}
                      거래날짜: {dong_info.layers[key].tran_date}
                      타입: {dong_info.layers[key].sale_type}
                    </Paper>
                  ))}

brew를 이용해 아주 간단하게 맥에 mongodb를 설치할 수 있다.

1. 설치할 패키지 주소를 추가한다.

brew tap mongodb/brew

2. mongodb community 버전 4.2를 설치한다. (free)

brew install mongodb-community@4.2

3. 아래 세 개의 파일/디렉토리가 생김을 확인. 

/usr/local/etc/mongod.conf
/usr/local/var/log/mongodb
/usr/local/var/mongodb

4. 설치 완료한 mongodb를 시작한다.

brew services start mongodb-community@4.2

5. mongodb가 잘 떴는지 확인해본다.

 ps aux | grep -v grep | grep mongod

참고. mongodb 공식홈.
https://docs.mongodb.com/manual/tutorial/install-mongodb-on-os-x/

맥북에서 사이드카 기능으로 아이패드를 보조 모니터로 활용할 수 있다.
이런것들이 노트북, 패드, 핸드폰 모두 애플제품이면 넘 좋음..

1. 일단 os가 최신이어야함. catalina os여야하고, 
2. 두번째로 맥북과 아이패드에 연동된 애플아이디가 동일해야하고, icloud설정은 켜야함.
3. 이렇게 해도 device timeout이 나면서 연결이 안됐는데,
    그럴때는 맥북에서 apple id 로그아웃했다가 로그인 하면 된다.
    로그아웃하려고 할때 어느시점에서 아이패드 unlock password를 요구하는데, 
    그러고 나면 실제 로그아웃은 안되고, 사이드카가 된다.

• Input, TextField에서 onChange를 통해서 Enter의 이벤트를 받을수 있다고 생각을 했으나
• 실제로 Enter를 받기 위해서는 onKeyDown 또는 onKeyUp, onKeyPress의 이벤트를 이용해야 한다.
• 하지만 이때 만약 onKeyDown, onKeyUp을 하면 한글로 입력하고 엔터치면 두번 검색되는 문제가 발생한다.
• 그러니 안전빵으로 onKeyPress의 이벤트를 사용하자
• 다시보니 이벤트명이... onKeyPress가 적당해보인다.

참고

• react doc 을 참고
• stackoverflow 를 참고

gradlew run 하는 것이 너무 오래 걸려 커맨드를 강제 종료하였더니,
그 이후부터는 gradlew run도 안되고, gradlew clean 도 안됨.

#에러메세지 양상은 대략 아래와 같음.
FAILURE: Build failed with an exception. * What went wrong: Execution failed for task ':distribution:run'. > Unable to delete directory 'xxxxxxxx' Failed to delete some children. This might happen because a process has files open or has its working directory set in the target directory. - ......

#해결방법.
win+R 버튼,
resmon 을 입력하고 클릭
cpu 탭에서 위의 메시지에 나온 디렉터리 파일중에 실행중인것을 프로세스 종료!
나는 java.exe 종료했더니

그 이후로 gradlew clean 성공함.

• material-ui/styles/
• style library interoperability (아무거나 적용해도 상관 없음!)
  • Plain CSS
  • Global CSS
  • styled Componetns
  • CSS Modules
  • Emotion
  • ReactJSS
• 하지만 material-ui에서는 material-ui/styles의 패키지를 따로 제공한다는.. 어떤걸 사용해도 상관없음
• 그래도 styled components랑 비슷하니 이걸 사용하는게 좋을지도...

styled componets vs material-ui/styles

• styled components는 element별로 변수를 선언
• material-ui/styles은 변수하나에 여러개의 element의 변수를 선언

styled components

import React from 'react';
import { styled } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const MyButton = styled(Button)({
  background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
  border: 0,
  borderRadius: 3,
  boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
  color: 'white',
  height: 48,
  padding: '0 30px',
});

export default function StyledComponents() {
  return <MyButton>Styled Components</MyButton>;
}

material-ui/styles

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles({
  root: {
    background: 'linear-gradient(45deg, #FE6B8B 30%, #FF8E53 90%)',
    border: 0,
    borderRadius: 3,
    boxShadow: '0 3px 5px 2px rgba(255, 105, 135, .3)',
    color: 'white',
    height: 48,
    padding: '0 30px',
  },
});

export default function Hook() {
  const classes = useStyles();
  return <Button className={classes.root}>Hook</Button>;
}

• 기존에 /src/components에서 각각 component를 생성했다면
• component 생성된 녀석들을 가져와서 사용을 해보자

yarn add @material-ui/core

• material-ui/core를 설치
• components에 추가하면 아래와 같은 에러가 난다.

index.js:1 Warning: Failed prop type: The prop `children` is marked as required in `ForwardRef(Button)`, but its value is `undefined`.
    in ForwardRef(Button) (created by WithStyles(ForwardRef(Button)))
    in WithStyles(ForwardRef(Button)) (at Search.js:18)
    in div (created by styled.div)
    in styled.div (at Search.js:16)
    in Search (at AptComplexPage.js:12)
    in div (at AptComplexPage.js:9)
    in AptComplexPage (created by Context.Consumer)
    in Route (at App.js:19)
    in App (at src/index.js:41)
    in HelmetProvider (at src/index.js:40)
    in Router (created by BrowserRouter)
    in BrowserRouter (at src/index.js:39)
    in Provider (at src/index.js:38)

• 어이없게도 <Button> </Button> 사이에 값을 넣지 않았다... 값을 넣지 않으면 children undefined 에러가 생긴다

스타일 적용하기

import { makeStyles } from '@material-ui/core/styles';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
  },
  textField: {
    marginLeft: theme.spacing(1),
    marginRight: theme.spacing(1),
    width: 200,
  },
}));


(...)
   const classes = useStyles();

  return (
    <div className={classes.root}>
      <div>
        <TextField
          id="standard-full-width"
          label="Label"
          style={{ margin: 8 }}
          placeholder="Placeholder"
          helperText="Full width!"
          fullWidth
          margin="normal"
          InputLabelProps={{
            shrink: true,
          }}
        />

• useStyles 각각의 tag별로 정의하고 root의 경우 <div>에 지정
• 나머지 textfield, button등에 스타일을 주면 적용이 된다.

jvm위에 동작하는 분산스토리지를 운영하기 위해, GC개념을 좀 더 정립하고가려한다.

아주 쉽게 정리된 글이 있어, 참고하여 정리해보았다.
https://d2.naver.com/helloworld/1329

1. GC. General Garbage Collection.
java에서 메모리를 두 가지 영역으로 나눈다.
Young 영역과 Old 영역.

Q) old영역에 있는 객체가 young영역의 객체를 참조하는 경우는 어떻게 처리 될까?
A) old영역에는 512바이트의 덩어리로 되어 있는 카드 테이블이 존재.
카드 테이블에는 old영역에 이는 객체가 young 영역의 객체를 참조할 때마다 정보가 표시됨.
young영역의 GC를 실행할 때에는 old 영역에 있는 모든 객체의 참조를 확인하지 않고,
이 카드 테이블만 뒤져서 GC대상인지를 파악한다.
카드 테이블은 write barrier를 사용하여 관리함. 

2. Young 영역의 구성
 young영역은 1개의 eden영역과 2개의 survivor영역으로 나뉘고,
새로 생성한 객체 대부분이 eden영역에 생성됨.

위의 절차를 보면 survivor영역 2개 중 하나는 반드시 비어있는 상태로 남아있어야한다는것을 알수있음.
만약 두 survivor영역에 모두 데이터가 존재하거나, 두 영역 모두 사용량이 0이라면 시스템의 비정상이라고 생각하면 된다.

참고. bump-the-pointer, TLABs(Thread-Local Allocation Buffers)
HotSpot VM에서는 보다 빠른 메모리 할당을 위해 사용하는 기술.
bump-the-pointer는 Eden영역에 할당된 마지막 객체를 추적.
새로운 객체를 생성할 떄 마지막에 추가된 객체만 점검하도록함.
그러나 멀티 스레드 환경이라면?
Thread-safe하기 위해 여러 스레드 사용하는 객체를 Eden영역에 저장하려면, lock이 발생.
lock-contention 때문에 성능 저하.
그래서 TLABs 가 각각의 스레드가 각각의 몫에 해당하는 Eden영역의 작은 덩어리를 가질 수 있도록 하는 것.

3. Old영역에 대한 GC
serial GC, parallel GC, parallel old GC, Concurrent Mark&Sweep GC, G1GC 있다.

JAVA버전 마다 사용가능한 GC방식은 다른데, 
나는 CMS와 G1GC방식만 살펴봐야지.

3-1. CMS GC
Serial GC와 비슷한데, 다른 점은 GC가 발생하면서도 다른 스레드들을 실행중인 상태에서 동시에 진행됨.
클래스 로더에서 가장 가까운 객체 중 살아있는 객체만 찾음
concurrent mark단계에서 방금 살아있다고 확인한 객체에서 참조하고 이는 객체들을 확인.
remark단계에서는 concurrent단계에서 새로 추가하거나 참조가 끊기 객체를 확인.
concurrent sweep단계에서는 쓰레기를 정리하는 작업을 실행.
mark, seep 단계가 concurrent하게 진행됨. 즉, 다른 스레드가 실행되고 이는 상황에서 진행됨.
초기 mark와 remark에서만 stop-the-world갈 발생하므로 짧다!

그런데 단점이 존재하니, 
* 다른 GC방식보다 메모리와 cpu를 더 많이 사용하고,
* compaction단계가 기본적으로 제공되지 않는다.

따라서, 
* CMS GC를 사용할 때에는 신중히 검토한 후에 사용해야함.
* 조각난 메모리가 많아 compaction작업을 실행하면 다른 GC의 stop-the-world시간보다 더 길어질 수 있기에
* compaction 작업이 얼마나 자주, 오랫동안 수행되는지 확인해야한다.

각종 그림은 아래 오라클 기술섹션에서 볼수있다.
https://www.oracle.com/java/technologies/

3-2. G1 GC
지금까지의 Young영역과 old영역을 잊고, 그냥 큰 바둑판의 각 영역에 객체를 할당하고 GC를 실행한다.
어떤 GC보다 빠르고, JDK7에서 정식으로 G1 GC를 포함하여 제공하낟.

--------------

이것으로 오늘 아침 GC 공부를 마침.
나중에 오라클 홈페이지에서 jvm옵션들좀 봐야겠다아.