lou@blog $ _

CI/CD pipeline 직접 구축해보기 (1편) https://jizard.tistory.com/405 CI/CD pipeline 직접 구축해보기 (2편, 현재 포스트) https://jizard.tistory.com/410 지난 포스팅에서는 linux 서버에 Bitrise Cli를 설치하고 구동하는 과정을 완성했다. 하지만 "Continuos"가 빠졌다. 지속적 배포를 위해서는 주기적으로 자동으로 돌아가거나 코드를 푸쉬할때 수행되는 장치가 필요하다. 그래서 Node.js Express를 이용해 Github Webhook을 받을 수 있는 웹 서버를 구축해볼 것이다. 앞선 Bitrise 과정도 Docker로 시작할걸...이라는 후회와함께 일단 Docker로 node.js를 구동할 준비를 한다. 전체 프..

styled-components를 이용하여 스타일링하고 Next.js 앱을 켜면 처음에 CSS가 완전히 로딩되지 않은 듯한 모습이 보이게 되는데, 흉한 맨얼굴이 그대로 드러나니 사용자 경험이 꽤 나쁘다. 이것은 스타일이 Client side에서 적용되고 있기 때문이다. 이를 해결하기 위해서는 커스텀 Document를 만들고, ServerStyleSheet를 이용해서 컴포넌트의 모든 스타일을 서버 사이드에서 적용될 수 있도록 바꾸어야한다. babel-plugin-styled-components 설치 먼저 babel-plugin-styled-components를 설치한다. yarn add babel-plugin-styled-components .babelrc에서 SSR를 사용하도록 설정 .babelrc에는 ..

Next.js에서 제공하는 Image 컴포넌트를 사용해서 이미지 로딩을 하는 중, 거의 700ms 정도에 육박하는 충격적인 로딩속도를 보여주어서 구글링 해봤다. 이건 Image 컴포넌트가 사용하는 기본 이미지 프로세서 때문이라고 하는데, sharp 패키지를 설치하면 해결된다. 패키지를 설치하면 정말 빠르게 이미지가 로딩되는 것을 확인할 수 있다. yarn add sharp

Install Hub hub를 이용할 것이다. hub는 Go로 만들어진 cli 툴로, 운영체제별로 다음과 같이 설치할 수 있다. # Mac brew install hub # Windows choco install hub # Debian, Ubuntu sudo apt install hub hub를 사용하기 위해서, github token이 필요한데, https://github.com/settings/tokens에서 Token을 생성 후 얻어와야한다. 새로운 토큰을 생성하고, 적절한 권한을 주자. 나는 release만 이용할 것이기 때문에 우선 repo에 관련된 권한만 주었다. ~/.config/hub 파일을 생성하고 아래와 같이 세팅해준다. github.com: - user: YOUR_USERNAME oa..

Linux의 apt, yum, Mac의 homebrew처럼 Windows에서도 패키지 매니저가있다. Chocolatey, choco...라는 녀석인데 이름이 귀여우니까 써보자. 우선 관리자 권한으로 명령프롬프트나 Powershell을 실행한다. 그리고 아래 "Get-ExecutionPolicy" 명령어를 실행하고, 만약에 Restricted라고 표시가 된다면 Get-ExecutionPolicy AllSigned나 Bypass -Scope Process로 설정해준다. Set-ExecutionPolicy AllSigned 이제 설치 명령어를 실행한다. 아래 스크립트를 복사해서 붙여넣자! Set-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.Servic..

CI/CD pipeline 직접 구축해보기 (1편, 현재 포스트) https://jizard.tistory.com/405 CI/CD pipeline 직접 구축해보기 (2편) https://jizard.tistory.com/410 CI/CD가 왜 필요할까? 일하다보면 빌드 시간이 너무 길게 느껴진다. QA할 버전좀 올려주세요~ 개발서버버전 올려주세요~ 그와 동시에 배포도하고... 프로가드를 사용중인 프로젝트에서 내 컴퓨터로 빌드를하면 10분정도가 걸릴때도 있었다. 무엇보다 개발 열심히 하고있는데 흐름이 끊기는게 가장 큰 문제점이다. CI/CD는 마치 UI/UX처럼 뜻은 다르지만 따라다니는 친구들인데, 앱 개발부터 배포까지 자동화하는 방법이다. CI는 지속적 통합(Continuos Integration)로,..

JAVA 16버전을 사용하는 서버에서 안드로이드 빌드를 하는걸 구현하는 도중 "jlink executable /usr/lib/jvm/java-16-openjdk-amd64/bin/jlink does not exist."라는 오류가 발생했었는데, java-11-openjdk 아래에만 jlink가 설치되어 있었다. 그래서 16에서 11로 버전을 변경하게되었는데, 방법을 살펴보자. 1-1. 빠르고 쉬운 방법 update-alternatives를 이용하면된다. $ update-alternatives --config java 대체 항목 java에 대해 (/usr/bin/java 제공) 2개 선택이 있습니다. 선택 경로 우선순? 상태 ---------------------------------------------..

find # 수정된지 2일 지난 파일 find -mtime +1 # 수정된지 2일 이내의 파일 find -mtime -1 # 수정된지 2일 지난 파일을 삭제 find -mtime +1 -delete # 수정된지 2일 지난 txt 파일을 삭제 find -name '*.txt' -mtime +1 -delete find 명령어를 이용하여 특정한 날짜 기준으로 파일을 삭제할 수 있다. 아래는 find 명령어의 관련 옵션들이다. 옵션명 설명 mtime modification time, 수정시간 (내용) ctime change time, 변경 시간 (속성/권한/크기 변화) atime access time, 접근 시간 (open) name 파일 이름 delete 삭제 crontab에 Task 등록하여 주기적으로 삭제..

국가 코드(ISO-3166-1 Alpha-2 Code)를 사용하여 국기 이모지 유니코드를 얻어오는 방법이다. 반대로, 국기 이모지를 받아서 국가 코드로 변환할 수도 있다. 반드시 countryCode가 제대로 들어온다는 보장이 있어야하기 때문에 "/^[a-z]{2}$/i" 같은 정규식을 추가해 줄 수도 있다. Javascript const OFFSET = 127397; function getFlag(countryCode) { const codePoints = [...countryCode.toUpperCase()].map(c => c.codePointAt() + OFFSET); return String.fromCodePoint(...codePoints); } Kotlin const val OFFSET = ..

Main Thread (UI Thread) 안드로이드는 UI를 업데이트하는데는 메인 스레드만 사용하는, 싱글 스레드 모델이 적용된다. 따라서 I/O나 복잡한 연산이 있는 경우 다른 스레드에서 작업하는 것이 권장된다. 멀티 스레드로 UI를 업데이트 할 경우 일반적인 멀티 스레드 문제에도 직면하게 되는데 Deadlock이나 Race condition등이 대표적인 예시이고, 이는 모든상황에도 그렇지만 특히나 UI에서 발생하면 안되는 문제이다. TextView의 글자를 업데이트 하는데, 여러 스레드에서 동시에 텍스트뷰에 접근해 값을 바꾸는 경우, 어느 한 값은 결국 버려질 수 밖에없다. 따라서 다른 스레드에서 UI를 업데이트 하려고 할 경우 Handler를 이용해 다음 작업때 “이렇게 업데이트 해주세요!”라고 ..