Expo

기존에는 expo-cli를 통해서 생성한 React Native 앱만 expo sdk를 사용할 수 있었다.
장점은 expo가 정제한 네이티브 모듈을 쉽게 갖다 쓸수 있다는 점이였지만, 모든 네이티브 모듈을 포함하고 있어서 용량이 큰게 단점이였다.

그런데 이 단점을 어느정도 해소시켜줄 unimodules이 나왔다.

네이티브 모듈을 위한 코드가 Expo의 자산인지라, flutter가 나왔을때 React Native를 위해 만든 네이티브 모듈 코드를 재사용하기 위해 Unimodules가 만들어진것으로 보이며 이를 이용하여 expo-cli로 만들지 않은 일반 React Native 앱에서도 필요한 네이티브 모듈만 따로 설치하여 Expo SDK를 사용할 수 있게되었다.

더 읽기

기본 설정

1

npm init

프로젝트를 먼저 생성한 후, storybook와 react패키지등을 설치한다.

1
2
3
4

npm i --save-dev @storybook/react
npm i --save react react-dom
npm i --save-dev @babel/core
npm i --save-dev babel-loader

package.json 에 실행을 위한 명령어를 추가한다.

1
2
3
4
5

{
  "scripts": {
    "storybook": "start-storybook -p 9001 -c .storybook"
  }
}

.storybook/config.js 파일을 아래와 같이 작성한다. (디렉토리가 없을경우 생성해준다)

더 읽기

스튜디오밀의 영상을 보면서 정리한 내용이다.

css의 display 속성

display: block (div, section)

개행처리됨. 부모에게 꽉 참. 박스모델이라 너비 높이 지정 가능

display: inline (a, span, img)

개행처리 안됨. 일반 텍스트 처럼 취급됨. 너비랑 높이 설정 불가

display:inline-block

inline처럼 일반 글자처럼 취급 되나 (바로 옆에 다른 항목이 붙을 수 있다)
너비와 높이를 지정 가능하다.

display: none

메뉴 같은걸 숨길때 유용함

CSS Box Model

box-sizing: content-box (기본값)

실제 컨텐츠 기준으로 크기를 설정한다. padding과 border, margin값은 이 컨텐츠 사이즈 외에 추가로 더 붙게 된다.

더 읽기