0-0Blog

Windows Server Docker 설치

adnin — Wed, 3 Apr 2024 15:07:58 +0900

리눅스에 도커설치는 참 쉬운데..

윈도우는 조금 귀찮은것 같다.

특히 그냥 윈도우10이라면 도커 데스크탑 설치하면 되는거 같은데

서버는 powershall을 통해 설치를 해야한다나 뭐라나..

그래서 윈도우 서버에서 도커를 설치해보았다.

환경은 window server 2019다.

[기존설치방법]

Powershell을 관리자 권한을 실행후 아래를 1줄씩 입력후 재부팅

[Net.ServicePointManager]::SecurityProtocol = [Net.SecurityProtocolType]::Tls12

Install-PackageProvider -Name NuGet

Install-Module -Name DockerMsftProvider

Install-package -name docker -providername DockerMsftProvider -Verbose -Force

그런데 아래와 같은 에러가 발생!

PS C:\Users\Administrator> Install-Package -Name docker -ProviderName DockerMsftProvider
WARNING: Cannot find path
'C:\Users\ADMINI~1\AppData\Local\Temp\2\DockerMsftProvider\DockerDefault_DockerSearchIndex.json' because it does not
exist.
WARNING: Cannot bind argument to parameter 'downloadURL' because it is an empty string.
WARNING: The property 'AbsoluteUri' cannot be found on this object. Verify that the property exists.
WARNING: The property 'RequestMessage' cannot be found on this object. Verify that the property exists.
Install-Package : No match was found for the specified search criteria and package name 'docker'. Try
Get-PackageSource to see all available registered package sources.
At line:1 char:1
+ Install-Package -Name docker -ProviderName DockerMsftProvider
+ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
 + CategoryInfo : ObjectNotFound: (Microsoft.Power....InstallPackage:InstallPackage) [Install-Package], Ex
 ception
 + FullyQualifiedErrorId : NoMatchFoundForCriteria,Microsoft.PowerShell.PackageManagement.Cmdlets.InstallPackage

아니 다들 이렇게하면 된다는데 왜 안되는겨..

그래서 찾아본 결과..

아래와 같은 명령어로 쓰면 된다고 하더라

똑같이 Powershall을 관리자 권한으로 실행하고 그저 명령어를 입력했다

나같은 경우 두번쨰 단계에서 재부팅한다 해서 그러라해서 재부팅했다.

마지막 명령어 입력후에도 다시한번 재부팅해주자.

Install-WindowsFeature -Name Containers


Enable-WindowsOptionalFeature -Online -FeatureName containers -All


Install-Module -Name DockerMsftProvider -Repository PSGallery -Force


Invoke-WebRequest -UseBasicParsing "https://raw.githubusercontent.com/microsoft/Windows-Containers/Main/helpful_tools/Install-DockerCE/install-docker-ce.ps1" -o install-docker-ce.ps1
.\install-docker-ce.ps1


Invoke-WebRequest "https://github.com/docker/compose/releases/latest/download/docker-compose-darwin-x86_64" -UseBasicParsing -OutFile $env:SystemDirectory\docker-compose.exe

설치해두면 프로그램 설치가 짱쉬워지는 docker님을 윈도우에 설치하였다!

이모지 선택을 간편하게! 이모티콘 선택기 javascript 라이브러리 활용하기

adnin — Tue, 6 Jun 2023 22:19:47 +0900

커뮤니티 웹사이트나 채팅 앱에 적용하기위해 아래와 같이 이모티콘을 선택하는 기능이 필요했다.

그런데, 저 수많은 이모지들을 하드코딩하거나 DB에 저장하여 불러오는 것은 좀 아닌거 같단 느낌이 들었다.

이를위해 이모지를 표시해주고 선택하는 라이브러리를 찾았다.

이 라이브러리를 활용하면, 간편하게 이모지 목록을 불러와 사용자에게 제공할 수 있습니다.

이 라이브러리를 사용하는 방법은 매우 간단하다

1. CDN

<script src="
https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.6.4/dist/index.min.js
"></script>

2. 코드 예시

<button id="emoji_btn">이모지_입력</button>
<input type="text" id="message">

<script src="
https://cdn.jsdelivr.net/npm/@joeattardi/emoji-button@4.6.4/dist/index.min.js
"></script>
<script>  
  const button = document.querySelector('#emoji-button');
  const picker = new EmojiButton({
  	/*옵션입력*/
  });

  picker.on('emoji', emoji => {
    document.querySelector('input').value += emoji;
  });

  button.addEventListener('click', () => {
    picker.togglePicker(button);
  });
 </script>

간단한 코드로 이모지 목록을 불러오고 내용을 입력받을 수 있다.

3. 옵션

자세한 옵션은 아래 제작한 사람의 github를 보자.

position 요소를 기준으로 선택기를 표시할 위치

zIndex z-index, 요소의 우선 순위

i18n 다국어로 표시할때 (아래 코드로 사용)

i18n: {
  search: 'Search emojis...',
  categories: {
    recents: 'Recent Emojis',
    smileys: 'Smileys & Emotion',
    people: 'People & Body',
    animals: 'Animals & Nature',
    food: 'Food & Drink',
    activities: 'Activities',
    travel: 'Travel & Places',
    objects: 'Objects',
    symbols: 'Symbols',
    flags: 'Flags'
  },
  notFound: 'No emojis found'
}

적용하면서..

탬플릿이 문제인지 몰라도 zIndex를 아무리 사용해줘도 이녀석의 div뒤에 숨어있었다.

그래서 이모지 셀렉터 표시해주는 버튼을 클릭했을때 javascirpt 코드를 추가해줬다.

  button.addEventListener('click', () => {
    picker.togglePicker(button);
    document.querySelector('.emoji-picker.light').parentNode.style="position: absolute; right: 0; bottom: 0; z-index:9999";
  });

버튼을 눌러서 이모지 셀렉터가 표시될

.wrapper div 안에 .emoji-picker .light라는 div가 생긴다.

.wrapper에 직접 z-index를 줘야했기에 위와 같이 줬다.

자세한 내용은 제작자의 gitHub페이지를 참고하자!

https://github.com/MJRomka/emoji-button

GitHub - MJRomka/emoji-button: Vanilla JavaScript emoji picker component

Vanilla JavaScript emoji picker component. Contribute to MJRomka/emoji-button development by creating an account on GitHub.

github.com

SVG기반의 WEB/APP 아이콘

adnin — Sun, 4 Jun 2023 22:34:38 +0900

사람들이 많이 쓰는 웹 아이콘 하나인 Font Awesome이 있는데

최근 발견한 괜찮은 아이콘 팩이 있다.

이 아이콘 팩은 JavaScript는 물론 React, React Native, Vue, Flutter 등 다양한 웹과 앱 Framework에서 사용할 수 있다.

아래는 lucide의 공식 홈페이지다.

자세한 사용법은 홈페이지에 들어가서 살펴보자

https://lucide.dev/

Lucide

lucide.dev

아무튼 fontawesome은 폰트 기반이지만

lucide는 SVG로 출력되어서 조금 더 유연성이 있다.

순수 javascript 사용시에는 아래와 같이 쓸 수 있다.

<!DOCTYPE html>
<body>
  <i icon-name="volume-2" class="my-class"></i>
  <i icon-name="x"></i>
  <i icon-name="menu"></i>

  <script src="https://unpkg.com/lucide@latest"></script>
  <script>
    lucide.createIcons();
  </script>
</body>

마지막에

lucide.createIcons(); 를 쓰면 svg형식으로 바꿔주는것으로 보인다.

물론 루시드 아이콘 팩이 Font Awesome의 다양한 아이콘 수보다는 적지만

웹과 Flutter, React Native에서도 사용할 수 있는 큰 장점이 있으며,

매력적인 디자인의 아이콘 덕분에 앞으로 좀 더 자주 사용하 될 것 같다.

프로그레시브 웹 앱 (PWA, Progressive Web Apps) 핵심 요약

adnin — Sat, 3 Jun 2023 22:19:05 +0900

제일 핵심적인 요약

장점 : 플레이스토어나 앱 스토어 없이도 앱 형태로 다운로드 받을 수 있다.

단점 : 아이폰에서는 푸시 알림을 받을 수 없다.

핵심적인 특징

응답성 : 모든 기기에 적합하게 동작하며, 빠른 응답성을 보입니다.

오프라인 사용: 서비스 워커(service worker)와 캐시를 이용해 오프라인에서도 동작할 수 있습니다.

앱스토어 없이 설치: 사용자는 웹사이트를 방문하는 것만으로도 PWA를 자신의 기기에 설치할 수 있습니다. 앱스토어를 통하지 않기 때문에 사용자가 앱을 다운로드하고 설치하는 과정이 단순화됩니다.

푸시 알림: 웹 앱이 백그라운드에 있어도 사용자에게 푸시 알림을 보낼 수 있습니다. (안드로이드 한정)

안전: HTTPS를 통해서만 제공되어 정보를 안전하게 보호합니다.

PWA을 위해 필요한 것

manifest.json

service-worker.js

https

PWA기술이 적용된 대표적인 사이트

Twitter

twitter Lite를 통해 다운로드 받을 수 있다.

핀터레스트 또한 PWA로 앱을 다운로드 받을 수 있다.

애플 앱스토어 심사 거부 사례 및 대응 정리

adnin — Wed, 31 May 2023 20:51:25 +0900

iOS 앱을 올리기 위해 심사를 하다보면 많은 이유로 심사 거부 당한다.

다음은 ionic3로 ios앱 개발하며 내가 당한 리젝 내용과 대처 방법, 그리고 다른 사람들이 리젝 당한 사례를 작성한 내용이니, ionic3로 ios 개발할때 참조하면 특히 더 좋습니다.

다른 프레임워크로 개발한다해도 리젝 당하는것은 마찬가지니.. 한번쯤 보면 좋을듯

1. 커뮤니티 기능 ( 유저가 글 작성이 가능하며 모두에게 공개됨 ) 존재 시
게시자 차단 및 신고 기능 필요

리젝 내용

Guideline 1.2 - Safety - User Generated Content

Your app enables the display of user-generated content but does not have the proper precautions in place.

Next Steps

To resolve this issue, please revise your app to implement all of the following precautions:

- Require that users agree to terms (EULA) and these terms must make it clear that there is no tolerance for objectionable content or abusive users

- A method for filtering objectionable content
- A mechanism for users to flag objectionable content
- A mechanism for users to block abusive users

- The developer must act on objectionable content reports within 24 hours by removing the content and ejecting the user who provided the offending content

* 각 게시글에 대한 신고기능과 유저를 차단 및 차단해제하는 기능을 넣으니 통과됨
유저 신고 기능이 필요 없는 경우 => 운영자만 글을 작성할 수 있음
유저가 댓글 작성만 가능한 경우에는 신고/차단 없어도 넘어가는 경우도 있다고 함

2. 이벤트 존재 시 상품 지급 내용 시 주의

리젝 내용

Guideline 5.3.2 - Legal - Gaming, Gambling, and Lotteries

Your app includes a contest or sweepstakes but it does not:

- Include official rules for the 오픈 이벤트 within the app, which is required.
- Indicate that Apple is not involved in any way with the contest or sweepstakes.
- Enforce an app age rating of 17+.

Next Steps
It is necessary to:
- Include official rules of the contest or sweepstakes in the app and ensure the rules are available to users at all times.
- Include an explicit statement in the contest or sweepstakes rules specifying that Apple is not a sponsor.
- Enforce an age rating of 17+.

* 리젝 당시에는 이벤트 기간 내 회원가입 시, 스타벅스 기프티콘 증정하는 이벤트였음.
이벤트 상품 지급 자체를 금지하지 않으나, 앱 연령을 17세 이상으로 높여야하고,
본 이벤트가 애플과 관련이 없다는 내용을 넣어야 한다. ( 17세 이상 올리기엔 적철치 않아, 그냥 심사기간에 이벤트 내용 지우고 재심사 요청하였음. )

3. SNS로그인 존재 시, Apple로 로그인 필수

리젝 내용

Guideline 4.8 - Design - Sign in with Apple

Your app uses a third-party login service, but does not offer Sign in with Apple. Apps that use a third-party login service for account authentication need to offer Sign in with Apple to users as an equivalent option.

Next Steps

Please revise your app to offer Sign in with Apple as an equivalent option for account authentication.

** 애플 로그인 가이드라인을 지키지 않아도 리젝된다.
( https://developer.apple.com/design/human-interface-guidelines/sign-in-with-apple/overview/introduction/ )

** 텍스트는 아래와 같이 꼭 들어가야한다. 안그러면 리젝됨
영문의 경우 : Sign in with Apple
한글의 경우 : Apple로 로그인 또는 Apple로 계속하기

** 애플 로그인이 있다면 본인인증 기능을 넣을 수 없다.
( 애플로그인+본인인증을 경우에 따라 넣으면 승인될 수 있지만, 절차가 복잡한 것 같다. 어떤 커뮤니티 글에 따르면, 전동킥보드 앱에 애플 로그인을 넣고, 운전면허 확인을 위해 PASS앱으로 본인인증 기능을 넣었더니 관련법령까지 요구했다고 하니, 중요한거 아닌 이상 본인인증 삭제 추천 )

** 가입화면에서 애플 계정정보
( 이름, 이메일(선택)) 입력 값이 화면에 보이면 안되는듯한데.. 잘 모르겠다.
나 같은 경우에는 자동으로 입력되있게끔 하고 그냥 화면에 보여주기만 했는데 심사 거절됐다.)

-> 이메일은 공개안하기 설정할 수 있는데 비공개시 원래 eamil@apple-privacy.com 식으로 불러온다는데 ionic3의 플러그인에선 안불러와져서 그냥 이메일 필수값으로 안하고, 애플 로그인 시 이메일 주소 안보이게 수정

4. 카메라, 블루투스, 위치권한 등 해당 기능을 사용하는 이유를
사용자에게 알려줘야한다.

리젝 내용

Guideline 5.1.1 - Legal - Privacy - Data Collection and Storage

We noticed that your app requests the user’s consent to access the camera, but doesn’t sufficiently explain the use of the camera in the purpose string.

To help users make informed decisions about how their data is used, all permission request alerts need to specify how your app will use the requested information.

Next Steps

Please revise the relevant purpose string in your app’s Info.plist file to specify why your app needs access to the user's camera.

You can modify your app's Info.plist file using the property list editor in Xcode.

plist 수정해야하는데 ionic ios빌드 시 plist파일이 다시 작성된다
그래서 config.xml에서 plist 파일이 수정되도록 해야한다.

* 아래의 명령어 참고

* 플러그인 추가
$ cordova plugin add cordova-custom-config

* config.xml에 ios 플랫폼쪽에 추가 / parent는 plist파일을 참고한다.

   <!-- Set message displayed when app requests constant location updates -->
<custom-config-file platform="ios" target="*-Info.plist" parent="NSLocationAlwaysUsageDescription">
<string>This app requires constant access to your location in order to track your position, even when the screen is off.</string>
</custom-config-file>

https://github.com/dpa99c/cordova-custom-config

GitHub - dpa99c/cordova-custom-config: Cordova/Phonegap plugin to update platform configuration files based on preferences and c

Cordova/Phonegap plugin to update platform configuration files based on preferences and config-file data defined in config.xml - GitHub - dpa99c/cordova-custom-config: Cordova/Phonegap plugin to up...

github.com

5. 기타 찾은 사례

1. 회원가입 시 리워드 지급 금지 (쿠폰/포인트 등)
2. 초대 이벤트 금지
3. 게시글이 아무것도 없으면 리젝될 수 있음
4. 게시글에 테스트 게시글이 있음 리젝될 수 있음
5. 개인정보 (성별/주소)가 필수값이여도 리젝될 수 있음
6. 타사 기기, 플랫폼 언급시 리젝될 수 있음

자주 사용할 수 있는 Docker 명령어 간단 정리

adnin — Wed, 31 May 2023 20:43:07 +0900

Docker 명령어 정리를 했습니다.

컨테이너 실행하고 컨테이너 정보, 이미지 빌드 등을 가장 많이 쓰겠지요..

여기서서는 자세한 언급은 없지만 docker-compose를 쓰면 더욱 편한 작업이 됩니다.

docker container run <Docker 이미지 이름> <실행할 명령>

– docker container run : 컨테이너를 작성 및 실행

도커 시스템 정보

– container 수, 도커 버전, 스토리지 드라이버 종류등을 알 수 있음

도커 시스템 df

– docker가 사용하고 있는 디스크의 이용 상황

도커 이미지 ls

– 도커 이미지 목록 (ls 생략가능)

docker container run –name <이름> -p <포트번호>:<포트번호> <이미지 이름>

– -d : detach 백그라운드에서 실행

– -h : hostname 호스트 이름 설정

– -e : env 컨테이너에 환경 변수

– -m : memory 메모리 한계

* docker-compose 사용하면 위 속성을 docker-compose.yml파일에 저장해서 사용할 수 있다.

도커 컨테이너 ps

– 도커 컨테이너 목록 (container 생략 가능)

docker container status <컨테이너 이름>

– 컨테이너의 상태

docker stop <컨테이너 이름>

docker start <컨테이너 이름>

docker image inspect <이미지 이름>

이미지 상세 정보 확인

docker images rm <이미지 이름>

– -f, -force : 강제 삭제

도커 이미지 정리

사용하지 않는 이미지를 삭제합니다.

– -a : 사용하지 않는 이미지를 모두 삭제

– -f : 강제 삭제

iOS,아이폰 CSS 마크업시 고려해야할 사항

adnin — Wed, 31 May 2023 20:35:20 +0900

퍼블리싱 하다보면 안드로이드에서는 잘 작동하였으나 아이폰에서만 문제가 발생한적이 있었습니다. 아래의 문제들은 어쩌면 최신 iOS에서는 따로 적용을 안해도 잘 작동할지도 모릅니다.
하지만, 좋은 퍼블리싱을 만들기 위해서는 구형 아이폰에서도 잘 적용이 되어야겠지요.. 그래서 이전부터 퍼블리싱하면서 나왔던 문제와 사용한 코드를 작성하였습니다.

첫번째. 가로스크롤

테이블 같은 경우 가로 스크롤을 주는 경우가 많습니다.
overflow-x:scroll를 주면 따로 스크립트 없이 가로 스크롤이 잘 적용되긴 하지만 iPhone에서는 스크롤이 부드럽지 못하고 뚝뚝 끊기는 느낌으로 스크롤이 되는 현상이 발생하였습니다. overflow 속성 준곳에 -webkit-overflow-scrolling: touch 를 추가하면 정상적으로 작동합니다.
* 스크롤을 디자인하고, 스크롤에 효과를 준다면 iscroll 사용을 추천드립니다.

 .box {
  overflow: hidden;
  overflow-y: hidden;
  overflow-x: scroll;
  -webkit-overflow-scrolling: touch;
}
.box .inbox {
  width: auto;
}

두번째. 터치 효과

버튼을 클릭하거나 마우스 오버 시 색상 변경과 같은 간단한 효과를 줄 수 있는건 잘 아시는 부분일겁니다.
모바일 기기에서도 버튼 터치 시 색상이 변경되길 원하는 클라이언트도 있었습니다. 안드로이드 기기에서는 :hover나 :active를 하면 버튼 클릭시 PC와 같이 버튼 색상이 바뀌게 할 수 있지만 아이폰에서는 해당 셀렉터로는 작동하지 않았습니다.
이 경우에는 -webkit-tap-highlight-color에 rgba로 색상을 주는것이 좋습니다. 최신 안드로이드 폰에서도 지원하지만 구형 안드로이드폰은 지원하지 않는 경우도 있는 것 같으므로 :active 셀렉터도 같이 추가하면 좋습니다.

.btn {
    background: #353535;
    -moz-tap-highlight-color:rgba(64, 64, 64, 0.3);
    -webkit-tap-highlight-color:rgba(64, 64, 64, 0.3);
}
.btn:active {
    background: #000;
}

세번째. Safe Area

Web이 아닌 Ionic과 같은 하이브리드 앱을 만들때 필요합니다. 노치로 인하여 이 설정을 안하면 버튼이 노치나 하단 제스처 영역(?)과 겹쳐서 원할하게 사용할 수 없습니다.
safe-area-inset-top이 노치, bottom이 하단영역입니다.
padding과 calc 속성을 잘 섞어서 사용하는게 좋을듯합니다

/ iOS 10
constant(safe-area-inset-top)
constant(safe-area-inset-right)
constant(safe-area-inset-bottom)
constant(safe-area-inset-left)
// iOS 11 이상
env(safe-area-inset-top)
env(safe-area-inset-right)
env(safe-area-inset-bottom)
env(safe-area-inset-left)

.btn {
    padding-bottom: calc(constant(safe-area-inset-bottom) + 10px);
    padding-bottom: calc(env(safe-area-inset-bottom) + 10px);
}

0-0Blog

Windows Server Docker 설치

이모지 선택을 간편하게! 이모티콘 선택기 javascript 라이브러리 활용하기

1. CDN

2. 코드 예시

3. 옵션

적용하면서..

SVG기반의 WEB/APP 아이콘

프로그레시브 웹 앱 (PWA, Progressive Web Apps) 핵심 요약

제일 핵심적인 요약

핵심적인 특징

PWA을 위해 필요한 것

PWA기술이 적용된 대표적인 사이트

Twitter

Pinterest

애플 앱스토어 심사 거부 사례 및 대응 정리

1. 커뮤니티 기능 ( 유저가 글 작성이 가능하며 모두에게 공개됨 ) 존재 시게시자 차단 및 신고 기능 필요

리젝 내용

2. 이벤트 존재 시 상품 지급 내용 시 주의

리젝 내용

3. SNS로그인 존재 시, Apple로 로그인 필수

리젝 내용

4. 카메라, 블루투스, 위치권한 등 해당 기능을 사용하는 이유를사용자에게 알려줘야한다.

리젝 내용

5. 기타 찾은 사례

자주 사용할 수 있는 Docker 명령어 간단 정리

iOS,아이폰 CSS 마크업시 고려해야할 사항

1. 커뮤니티 기능 ( 유저가 글 작성이 가능하며 모두에게 공개됨 ) 존재 시
게시자 차단 및 신고 기능 필요

4. 카메라, 블루투스, 위치권한 등 해당 기능을 사용하는 이유를
사용자에게 알려줘야한다.