하루y

package.json 버전 표기법.

1.버전규칙:

• 규칙 "major.minor.patch"
• major: 하위 호환성이 깨질 때 버전 올림.
• minor: 하위 호환성이 유지되면서, 새기능이 추가할 때 버전 올림.
• patch: 버그 수정 등에 버전 올림.

2.버전 표기법

2.1 Ranges (>, <=, <, <=)

- =version, >version, <version, <=version
예) ">1.2.3": 1.2.3 버전 이상

2.2 Hyphen Ranges ( - )

• " - " 로 범위 버전을 지정하고, " "또는 "||"로 표현이 가능함('or' 의미).
  예)
• "1.2.3 - 2.3.4" := ">= 1.2.3 <= 2.3.4"

2.3 Tilde Ranges (~)

예)

• "~1.2.3" : 1.2.3 이상, 1.3.0 미만
• "~1.2" : 1.2.0 이상, 1.3.0 미만
• "~1" : 1.0.0 이상, 2.0.0 미만

2.4 Caret Ranges (^)

"major.minor.patch" 버전에서 가족 왼쪽에 버전이 0이 아닌 숫자를 수정하지 않는 변경을 허용함.

• "^1.2.3": 1.2.3 이상, 2.0.0 미만
• "^0.2.3": 0.2.3 이상, 0.3.0 미만
• "^0.0.3": 0.0.3 이상, 0.0.4 미만

2.5 X-Ranges (X, *)

와일드 카드 의미.

• "*": 모든 버전을 허용
• " ": 모든 버전을 허용
• "1.2.X": 1.2.0 이상, 1.3 미만

3.참조

https://docs.npmjs.com/cli/v7/using-npm/semver#versions
https://semver.org/
https://semver.org/lang/ko/

1.  XD 개요

youtu.be/1ZGUYwYJFMM

2. 간단한 디자인 만드기

youtu.be/xVwxjo5-x2M

3. 기본 전환을 사용한 프로토타이핑

youtu.be/6W1nVtkWz9s

4. XD에서 공동 작업

youtu.be/1dRPlkaR0-w

5. 구성 요소 만들기

youtu.be/JeMa1TW_5MY

6. 반복되는 요소 만들기

youtu.be/hJZ3ZiO7sRI

7. 간편한 크기 조정

youtu.be/3GsjedyO64E

8. 5단계로 시작하기

1) Introduction

youtu.be/--PikweL_PU?list=PLHjwuoik-ep0Z5NQmb7HyUzqQ4_NY91W5

2) Step 1. Adding and Styling an artboard

youtu.be/aCjbDGkryec?list=PLHjwuoik-ep0Z5NQmb7HyUzqQ4_NY91W5

3) Step 2. Adding content

youtu.be/MNS9X1fsngM?list=PLHjwuoik-ep0Z5NQmb7HyUzqQ4_NY91W5

4) Step 3. Adding interactions

youtu.be/_rwWeCEZfgI?list=PLHjwuoik-ep0Z5NQmb7HyUzqQ4_NY91W5

5) Step 4. Organize and reuse

youtu.be/PjD-gdPA1zc?list=PLHjwuoik-ep0Z5NQmb7HyUzqQ4_NY91W5

6) Step 5. Finishing touches

youtu.be/xmCfwGvDoBY?list=PLHjwuoik-ep0Z5NQmb7HyUzqQ4_NY91W5

1.1), 1.2) 내용을 숙지하고,

 1) UI 디자인은 Adobe XD로 작성하고

 2) supernova로 import후 앱디자인을 수정후 export 해서

 3) Android Studio에서 빌드 및 디버깅 함.

- UI가 간단하면 supernova가 없어도 될 것 같은데, 디자인품질면서 XD작업 후, sueprnova가 없으면 일이 귀찮을 듯함.

1. UI 디자인을 위해서 알아야할 지식

   (한글: flutter-ko.dev/ 사이트, 영문: flutter.dev/ , 현재 영문만 flutter2 문서가 업데이트 되었음)

 1)  flutter-ko.dev/docs 에서 UI 디자인 부분 참조하기. 초보자를 위한 Flutter 관련 서적에 있는 수준임.

 2) 특히, flutter-ko.dev/docs/development/ui/layout 에서 위젯을 이용해서, 레이아웃을 어떻게 구성하는지 알아야 함.

 3) 다양한 디자인은 아래 사이트 참조할 것.

   . flutter.dev/docs/development/ui/widgets : 관련 widget 목록. 가능한 자원을 알아야 레이아웃 구성에 도움이 됨.

 4) 디자인 가이드

 - 구글 가이드 : material.io/design

 - 애플 가이드: developer.apple.com/design/human-interface-guidelines/

                       developer.apple.com/kr/design/tips/#graphics

2. UI 디자인 관련 도구

UI 디자인 관련 유명한 툴은 아래와 같음.

 - Adobe XD : UI 디자인과 와이어프레임 구성이 가능하고, 개인은 무료로 사용이 가능함. 협업까지 하려면, 유료임.

    다양한 라이브러리 자산을 통해서 에셋(디자인부품같은)을 통해서, CSS 처럼 자원을 관리가 가능함.

    디자인 편의성이 많음.

   . 많은 라이블러기 유료로 구매 가능함.

 - Figma: 웹도구로 UI 디자인과 와이어프레임 구성 및 협업이 가능함.  개인 무료, 협의까지 하려면 유료.

 - sketch: UI디자인과 와이어프레임 작성 및 협의 가능. 30일 무료. 이후 유료.

 - supernova : UI디자인 및 export를 통해서 Flutter, iOS, Android,React Native 소스코드를 생성할 수 있음.(export 후 디버깅 필요함)

3. 앱개발 UI 참조사이트

 - screenlane.com/ : 앱 디자인 마켓. 여러 디자인을 참조 할 수 있음.

#관련링크

 - Flutter Visual Design tools for Non Developers

 - Flutter 관련링크 모음

- adobe XD, supernova, andrioid Studio 를 이용한 UI 작업.

www.youtube.com/watch?v=Lldzw4d_tFg

tistory에 Google Adsense 설정을 했는데, "Google Adsense"만 보일 때 해결 방법.

1. 현상

 - 목록이나, 본문에서 "Google Adsense" 배너만 보이고 광고가 표시 되지 않는다.

 - 목록에는 광고가 표시되고, 본문에는 광고가 표시되지 않는다.

 - PC에는 광고가 표시되고, 모바일에는 광고가 표시되지 않는다.

단, "Google Adsense" 설정이 되었다고 가정한다.

 - "Google Adsense"에서 배너 생성하고, 공개할 것.

2. 해결방법

 - 몇가지 테스트 해본 결과, 스킨에 따라 "Google Adsense"의 광고 표시여부가 영향을 받았고,

    게시글에 따라서 일부는 광고가 표시되지 않고, 배너만 보였습니다.

 - 2021년 4월 1일 기준으로 스킨은 PC와 모바일 및 목록, 본문에 정상적으로 표시되는 스킨은 "Book Club"만 가능했습니다.

   . "Book Club"스킨으로 변경 하면, 모바일 광고가 잘 뜹니다. 다를 스킨은 모바일은 목록 및 본문 모두  배너만 뜨네요.

   . 일부 스킨은 목록에서는 광고가 뜨지만, 내용에서는 광고 표시가 안됩니다.

 - 설정 후에도, "Google Adsense"의 바로 광고가 표시안될 수 있는데, 광고 알고리즘 때문 인 것 같습니다. (추측)

   자주 노출이 되거나, 컨텐츠 내용 까지도 분석하고 있는게 아닌가 하는 생각도 드네요.

 1) 스킨을 Book Club 으로 변경한다.

 2) 관리자화면 스킨 > 에드센스 관리 > 광고 에서 목록, 본문 등 광고 노출 설정을 한다.

 3) 필요 시, 스킨편집에서  모양을 편집한다.

end.