https://cdn.openai.com/research-covers/language-unsupervised/language_understanding_paper.pdf

https://arxiv.org/abs/2106.09685

https://arxiv.org/abs/2307.09288

https://arxiv.org/abs/2302.13971

PaliGemma는 이미지와 텍스트를 동시에 입력받아 텍스트를 생성하는 경량의 비전-언어 모델(VLM)입니다. 이 모델은 PaLI-3에서 영감을 받아 SigLIP 비전 모델과 Gemma 언어 모델과 같은 오픈 소스 구성 요소를 기반으로 구축되었습니다. ​

Synced | AI Technology & Industry Review+6Home- Google Developers Blog+6캐글+6

PaliGemma의 아키텍처는 이미지 인코더와 텍스트 디코더로 구성되어 있습니다. 이미지 인코더는 SigLIP 모델을 활용하며, 텍스트 디코더는 Gemma 2B 모델을 기반으로 합니다. 이러한 결합을 통해 이미지와 텍스트 입력을 처리하여 다양한 비전-언어 과제에서 우수한 성능을 발휘합니다. ​

Home- Google Developers BlogHome- Google Developers Blog+1Medium+1Synced | AI Technology & Industry Review+1Medium+1

PaliGemma는 이미지 캡션 생성, 시각적 질문 응답, 객체 탐지 및 세분화 등 다양한 작업에 적용될 수 있습니다. 또한, 다국어를 지원하여 글로벌한 활용이 가능합니다. ​

허깅페이스

최근에는 PaliGemma 2라는 업데이트 버전이 출시되어, Gemma 2 모델의 기능을 통합하고 다양한 비전-언어 작업에서 최첨단 성능을 달성하고 있습니다. ​

캐글+2허깅페이스+2허깅페이스+2

PJMA 모델 학습, 평가, 배포 과정 정리

PJMA 모델을 학습시키고 평가한 후 배포까지 진행하면서 얻은 결과들을 정리해본다.

📌 모델 학습 과정

모델은 총 64 스텝 동안 학습을 진행했다. 학습이 진행될수록 **학습률(Learning Rate)**과 **손실값(Loss)**이 변하는데, 이를 통해 모델이 점점 더 최적화되고 있는지를 확인할 수 있다.

특히, 8 스텝마다 검증 데이터셋에 대한 예측 결과를 출력하는데, 이 과정을 통해 학습이 제대로 이루어지고 있는지를 직관적으로 파악할 수 있었다.

초기에는 예측 결과가 엉망이었다.

• 감지해야 할 객체 수가 너무 많거나 너무 적은 경우가 발생했고,
• 클래스가 잘못 감지되거나,
• 객체를 구분하는 기호(예: 세미콜론 ;)가 빠지는 등의 오류가 있었다.

그러나 스텝이 증가하면서 모델이 점점 더 안정적인 예측을 수행하기 시작했고, 64 스텝이 끝났을 때는 거의 정답(Annotation)과 일치하는 수준으로 결과가 나왔다.

학습 시간은 T4 GPU 기준으로 몇 분 정도 소요되었으며, 하드웨어 성능이나 데이터셋 크기에 따라 달라질 수 있다.

📊 모델 평가 결과

학습이 완료된 후 검증 데이터셋에서 16개의 샘플을 테스트했다.

✅ 예측 정확도는 꽤 높았고, 단 한 번만 오답(5를 8로 잘못 인식)이 발생했다.
✅ **평균 정밀도(mAP)**는 0.9로, 높은 수준의 성능을 보였다.
✅ **혼동 행렬(Confusion Matrix)**을 확인해 본 결과, 대부분의 예측 값이 대각선에 위치하여 정확한 분류가 이루어졌음을 확인할 수 있었다.

🚀 모델 배포 및 테스트

학습된 모델을 저장한 후, 배포를 진행했다.

1. 모델을 로컬 하드 드라이브에 저장
2. Roboflow Universe에 업로드
   • 업로드 시 Polyma 3EB PT 224 타입을 선택
   • 완료되면 모델이 API를 통해 배포 가능한 상태가 됨

이후 Gradio 앱을 활용한 테스트를 진행했다.

• 직접 손으로 숫자를 적고 사진을 업로드하여 모델이 이를 인식하는지 확인
• 결과: 모든 숫자를 정확하게 감지

추가로, "개(dog)"를 감지할 수 있는지도 확인해 보았는데, 기존 학습 데이터셋에 포함되어 있었기 때문에 여전히 인식이 가능했다.
이는 PJMA 모델이 기존 CNN 기반 감지 모델과 달리, 새로운 데이터셋으로 미세 조정(Fine-Tuning)하더라도 기존의 객체 감지 능력을 유지할 수 있다는 점을 보여준다.

❗ 한계점 & 해결해야 할 문제

테스트 중 몇 가지 문제점도 발견되었다.

예를 들어, 단순한 숫자 감지는 잘 수행했지만, "5 + 3 = ?" 같은 수식 이미지는 제대로 인식하지 못했다.
이유를 분석해 보면,

• 원래 학습 데이터셋에는 여러 개의 기호나 숫자가 동시에 있는 경우가 없었음
• **데이터 증강(Data Augmentation)**을 활용하지 않았음

이런 요소들 때문에 모델이 복잡한 수식을 감지하는 데 어려움을 겪은 것으로 보인다.

📢 추가 실험과 발견

처음에는 숫자 인식이 아닌 다른 데이터셋(예: 포커 카드 데이터셋)을 사용해 보았으나, mAP가 0.25 이상 올라가지 않는 문제가 발생했다.

이유를 분석해 보면,
1️⃣ 이미지에 포함된 객체 수가 너무 많아 모델이 한꺼번에 너무 많은 바운딩 박스를 예측해야 했음.
2️⃣ 모델이 바운딩 박스를 특정한 순서로 예측해야 하는데, 순서가 다르면 오답으로 처리되었을 가능성.
3️⃣ Attention Layer만 미세 조정(Fine-Tuning)하는 것으로는 부족했을 수도 있음.
4️⃣ 모델이 너무 작아서 더 큰 모델을 학습해야 할 필요가 있음.

이 문제를 해결하기 위해서는 데이터셋을 정리하거나, 학습 방식을 조정할 필요가 있다.

🎯 결론 & 앞으로의 방향

PJMA 모델을 자동 데이터 라벨링에도 사용할 수 있을까?

테스트해 본 결과, 제로샷(Zero-Shot) 성능이 뛰어나지는 않았다.
예를 들어, 차량 감지 데이터셋에서는 mAP가 0점으로 나왔는데, 이는 사전 학습 데이터에 차량 관련 정보가 없었기 때문으로 보인다.

하지만,
✅ 트위터 게시글 이미지
✅ 열화상 강아지 데이터
✅ 안전 헬멧 감지
✅ 동전 감지

같은 특정 데이터셋에서는 50% 이상의 mAP를 기록하며 어느 정도 성능을 보였다.
즉, PJMA는 반드시 **미세 조정(Fine-Tuning)**이 필요한 모델이라는 점을 다시 한 번 확인할 수 있었다.

실시간 영상 스트리밍에서 객체를 추적하고, 해당 객체가 특정 영역에 머무는 시간을 계산하는 방법과

특히, 정적 비디오 파일과 실시간 스트리밍의 차이를 강조하면서 실시간 영상 스트리밍에서 발생할 수 있는 문제를 해결하는 방법을 알아보자.

주요 내용:

1. 정적 비디오 파일 처리 vs. 스트리밍 처리:
   • 정적 비디오 파일의 경우, 프레임률(FPS)이 일정하여, 단순히 프레임 수를 세고 FPS로 나누어 시간 계산을 할 수 있음. 하지만 스트리밍에서는 FPS가 일정하지 않기 때문에, 실시간으로 프레임을 처리하는 모델이 속도를 따라가지 못하면 문제가 발생할 수 있기도 함.
2. 스트리밍에서의 문제점:
   • 실시간 스트리밍에서는 모델의 처리 속도보다 스트리밍의 FPS가 높을 수 있음. 이 경우, 모델이 프레임을 처리하는 속도가 스트리밍 속도보다 느리면, 프레임이 버퍼에 쌓여서 지연(latency)이 발생하고, 너무 많은 프레임이 쌓여 버퍼가 가득 차면 시스템이 멈추게 됨.
   • 이를 해결하려면 피드백 루프를 사용하여 모델의 처리 속도를 측정하고, 버퍼에 들어가는 프레임 수를 제한하는 방법을 사용해야함.
3. 시간 계산 방법:
   • 실시간 스트리밍에서는 FPS 기반으로 시간을 계산하는 대신, 시스템 시간을 사용하여 객체가 특정 영역에 들어갈 때 시간을 기록하고, 각 프레임에서 그 시간을 빼서 체류 시간을 계산.
4. 구현 방법:
   • FPS 기반 타이머: 비디오 파일에서 FPS가 일정하므로, 각 프레임의 번호를 세고 이를 FPS로 나누어 시간을 계산.
   • 시계 기반 타이머: 스트리밍에서는 각 객체가 영역에 들어갈 때 시스템 시간을 기록하고, 각 프레임에서 이 시간을 빼서 체류 시간을 계산.
5. 프로젝트 설정 및 코드 작성:
   • 코드 구현 과정에서는 모델을 로드하고, 객체를 추적하여 결과를 화면에 표시합니다. 또한, 객체가 특정 영역에 들어왔을 때 그 객체의 시간을 계산하고 이를 화면에 표시하는 방법으로 처리.
   • 'supervision' 패키지와 'inference' 패키지를 사용하여 객체를 추적하고, 감지된 객체에 대해 라벨을 붙여 시각화.
6. 영역 설정:
   • 사용자가 자신의 영역을 정의할 수 있도록 도와주는 도구를 제공하여, 특정 영역 내에서만 객체를 추적하고 해당 객체의 체류 시간을 계산.

실시간 비디오 스트리밍에서 객체 추적 및 시간 계산을 어떻게 효율적으로 처리할 수 있는지에 대해 확인해보자.

1. FPS 기반 타이머 (정적 비디오 파일 처리)

• 정적 비디오 파일에서는 FPS(초당 프레임 수)를 기반으로 시간을 계산.
  각 프레임의 번호를 세고 FPS로 나누어 객체가 특정 구역에 머무는 시간을 측정. 이를 위해 supervision 패키지의 video info를 사용하여 FPS를 추출하고, 각 구역별로 타이머를 초기화.
• 객체가 구역에 머무는 시간을 계산한 후, label annotator를 사용하여 결과를 화면에 표시.

2. 스트리밍 처리에서 FPS의 문제

• 실시간 스트리밍에서는 FPS가 일정하지 않아서 FPS 기반 타이머를 사용할 수 없습니다. 영상 스트리밍에서는 프레임이 계속해서 들어오므로, FPS가 모델의 처리 속도보다 빠르면 지연(latency)이 발생. 이 문제를 해결하려면 피드백 루프를 추가해야 하며, 이를 통해 스트리밍 처리를 안정적으로 할 수 있음.

3. 스트리밍 처리 구현

• 비디오 스트리밍을 처리하려면 정적 파일 대신 RTSP URL을 통해 실시간 스트리밍을 받아야 함. 이를 위해 get stream frame generator 함수를 사용하여 스트리밍에서 프레임을 받아 처리.
• FPS 기반 타이머 대신, 시스템 시간을 사용하는 clock-based timer로 변경하여 실시간 스트리밍에서도 시간 계산을 할 수 있도록 함.

4. 스트리밍 테스트

• RTSP 스트리밍을 실시간으로 테스트하려면 Docker와 같은 도구를 사용하여 비디오 파일을 로컬에서 RTSP 스트리밍으로 전환할 수 있음. VLC와 같은 소프트웨어를 통해 스트리밍이 잘 송출되는지 확인할 수 있다고 함.

5. 효율적인 스트리밍 처리 (Inference Pipeline 사용)

• 스트리밍에서 발생하는 지연 문제를 해결하기 위해 Inference Pipeline을 사용.
  이 유틸리티는 여러 스레드를 사용하여 비디오 스트림을 효율적으로 처리하며, 프레임을 처리할 때마다 지정된 콜백 함수를 실행.
• 이 방법을 사용하면 모델의 처리 속도가 스트리밍 FPS와 맞지 않더라도 안정적으로 스트리밍을 처리할 수 있음.

6. 코드 리팩토링

• 기존의 코드를 리팩토링하여 Inference Pipeline을 활용한 비디오 스트리밍 처리로 전환하고. 이를 위해 CustomSync 클래스를 정의하고, on_prediction 메서드를 통해 각 프레임에 대해 추적 및 시간 계산을 처리.
• 이 방식으로 여러 스레드를 활용하여 스트리밍을 처리하고, 지연을 최소화.

7. 중요 고려 사항

• 카메라 설정: 카메라는 고정되어 있어야 하며, 줌 인/아웃이나 팬(회전)을 하면 구역이 정확하게 맞지 않게 되므로 카메라 각도를 잘 설정하는 것이 중요함.
• 스트리밍 품질 문제: 실시간 스트리밍에서 발생하는 네트워크 불안정성이나 압축으로 인해 객체 감지의 품질이 떨어질 수 있기에. 이로 인해 객체 추적이 불안정해지고, 타이머가 리셋될 수 있음.
• 테스트 환경: 모델을 실제 하드웨어와 환경에서 테스트하여 예상되는 조건에서 잘 작동하는지 확인하는 것이 중요함. 이를 통해 실제 운영 환경에서 모델이 객체를 정확하게 감지할 수 있도록 함.

8. 결론

• 정적 비디오 파일 처리에서 실시간 스트리밍 처리로 전환하는 과정과, 스트리밍 처리에서 발생할 수 있는 지연 문제를 해결하는 방법을 확인해봤는데. Inference Pipeline을 활용하면 여러 스레드를 사용하여 효율적으로 스트리밍을 처리할 수 있으며, 이를 통해 안정적인 객체 추적과 시간 계산이 가능함.

YOLO-World: 실시간 Zero-Shot 객체 탐지 모델

1. YOLO-World란?

YOLO-World는 Zero-Shot Object Detection 모델로, 별도의 데이터 학습 없이 다양한 객체를 실시간으로 탐지할 수 있음. 기존 객체 탐지 모델보다 20배 빠른 속도를 제공하며, 저가형 GPU(Nvidia T4)에서도 원활하게 동작함.

2. 기존 객체 탐지 모델과의 차이점

기존 객체 탐지 모델(Faster R-CNN, SSD, YOLO 등)은 사전에 학습된 데이터셋(예: COCO, 80개 클래스) 내에서만 탐지가 가능함. 새로운 객체를 탐지하려면 추가 데이터셋을 구축하고 학습해야 하는 단점이 있음.

이를 해결하기 위해 Zero-Shot Object Detection 모델이 등장했으며, YOLO-World는 기존 모델 대비 속도가 빠르고 정확도가 높은 특징을 가짐.

비교: Grounding DINO vs. YOLO-World

• Grounding DINO: Zero-Shot 탐지가 가능하지만 속도가 느림 (이미지 1장당 1초)
• YOLO-World: Grounding DINO와 동일한 정확도를 유지하면서 20배 빠른 속도 제공

3. YOLO-World 아키텍처 (Prompt-then-Detect 방식)

YOLO-World는 크게 3가지 주요 구성 요소로 이루어짐.

1. YOLO Detector: 입력 이미지에서 멀티스케일 특징 추출
2. CLIP Text Encoder: 입력된 텍스트(탐지할 객체 명)를 임베딩 벡터로 변환
3. Cross-Modality Fusion Network: 이미지와 텍스트 특징을 결합하여 객체 탐지 수행

YOLO-World는 기존 Transformer 기반 탐지 모델과 달리 경량화된 CNN 백본을 사용하여 속도를 향상시킴. 또한 Prompt-then-Detect 방식을 도입하여 텍스트 임베딩을 한 번만 생성하고 재사용함으로써 실시간 탐지를 가능하게 함.

4. YOLO-World 사용법 (Google Colab에서 실행하기)

1. Colab에서 GPU 설정 확인 (nvidia-smi 실행)
2. 필요한 라이브러리 설치
   • roboflow-inference: YOLO-World 실행 패키지
   • supervision: 탐지 결과 필터링 및 시각화
3. 모델 불러오기
   • YOLO-World는 S, M, L, X 4가지 크기로 제공되며, L 버전 사용 가능
4. 객체 탐지를 위한 클래스 설정 (set_classes)
   • 예: "person, backpack, dog, eye, nose, ear, tongue"
   • CLIP 모델을 이용해 클래스 리스트를 임베딩 벡터로 변환
5. 이미지에서 객체 탐지 실행 (infer)
   • 탐지 결과를 supervision을 활용해 시각화

5. 성능 향상을 위한 기법들

(1) 낮은 Confidence Threshold 설정

• COCO 데이터셋 외의 객체를 탐지할 때 Confidence Threshold를 0.03까지 낮추면 더 많은 객체 탐지가 가능함.
• 낮은 Confidence Threshold를 설정할 경우 탐지된 객체 수가 증가하지만, 중복 탐지 문제가 발생할 수 있음.

(2) 중복 탐지 문제 해결 (Non-Max Suppression, NMS)

• 여러 개의 바운딩 박스가 하나의 객체를 나타내는 경우 NMS 기법을 사용하여 중복 탐지 제거
• IOU(Intersection over Union) 임계값 설정 (예: 0.1)

6. 동영상에서 객체 탐지하기

YOLO-World는 이미지뿐만 아니라 실시간 비디오 스트림 처리에도 최적화됨.

• Nvidia V100 GPU에서 최대 50FPS 성능 제공
• Nvidia T4 GPU에서도 15FPS 유지 가능

(1) 특정 객체 탐지 실험 - "노란색 채워진 구멍" 탐지

• 특정 객체를 탐지할 때 색상(Color), 위치(Position) 정보를 활용
• "yellow filling"과 같은 프롬프트를 사용하여 색상을 기준으로 탐지 가능

(2) 불필요한 객체 필터링 (Relative Area Filtering)

• 큰 객체가 탐지될 경우 객체 면적을 기준으로 필터링
• 영상 해상도를 기준으로 객체 크기를 계산하여 일정 비율 이상인 경우 탐지 제외

7. 결론

YOLO-World는 Zero-Shot Object Detection을 실시간으로 수행할 수 있는 혁신적인 모델로, 기존 모델보다 빠르고 정확하며 유연한 탐지 기능을 제공함.

• 사전 학습 없이 다양한 객체 탐지가 가능
• 실시간 비디오 스트림 처리 최적화
• CLIP 기반 텍스트 임베딩을 활용한 Prompt-then-Detect 방식
• 낮은 Confidence Threshold 및 NMS 적용을 통한 탐지 성능 개선

💡 YOLO-World는 다양한 산업에서 즉시 적용 가능하며, 실시간 객체 탐지가 필요한 모든 분야에 활용될 수 있음!

@Value("\${어쩌구저쩌구}")

lsof -i :8080

kill {PID}

config server

yml 설정

dev, beta, prod

spring cloud bus 사용 - mq 사용하면 편함

gateway 에서 당연히 url filter 설정 & token 검증, 등등.. 진

보안 뭐시기 하면서 연결이 안된다면..

entity class 하나 맹글어주고 application.yml 에 jpa 설정 추가해주면 해결 끝

application.yml

jpa:
  hibernate:
    ddl-auto: create-drop
  show-sql: true

User.class

@Entity

public class User {

    @Id

    @GeneratedValue(strategy = GenerationType.IDENTITY)

    private Long id;

}

gradle

implementation 'io.netty:netty-resolver-dns-native-macos:4.1.104.Final:osx-aarch_64'

maven

<dependency>
  <groupId>io.netty</groupId>
  <artifactId>netty-resolver-dns-native-macos</artifactId>
  <version>4.1.104.Final</version>
  <classifier>osx-aarch_64</classifier>
</dependency>

인증, 권한 부여

서비스 검색 통합

응답 캐싱

정책, 회로 차단기 & Qos 다시 시도

속도 제한

부하 분산

로깅, 추적, 상관 관계

헤더, 쿼리 문자열 및 청구 변환

IP 허용 목록 추가 (whitelist)

eureka 에 user service 등록

1. intellij로 실행

vm option 에서 -Dserver.port=포트

2. mvn으로 실행

mvn spring-boot:run -Dspring-boot.run.jvmArguments='-Dserver.port=포트'

3. command로 실행

java -jar -Dserver.port=포트 ./target/user-service-0.0.1-SNAPSHOT.jar

서비스 등록 

Load Balance

서비스 구성확인 (서비스 목록 확인)

python -m pytest

@TestInstance(TestInstance.Lifecycle.PER_CLASS)

테스트 인스턴스 단위를 클래스로 설정하자.

테스트는 메소드 단위이기에...

confluent/etc/kafka 의 server.properties 를

server_01.properties, server_02.properties, server_03.properties 형식으로 복사 후

broker id 변경, 접속 주소 변경, kafka 로그 저장 주소 변경

broker.id = {인식숫자} 1, 2, 3, 4 같이 순번으로

listeners=PLAINTEXT://0.0.0.0:9092    / 0.0.0.0:9093    / 0.0.0.0:9094 형식으로 (외부/내부 접속 가능)

내부만 접속 시 localhost:9092 / localhost:9093 / localhost:9094

advertied.listeners=PLAINTEXT://{ec2 DNS}:9092 / 9093 / 9094

log.dirs=/home/ubuntu/kafka-logs-01 / 02 / 03

으로 변경

실행은 각각 실행

ex) confluent/bin/kafka-server-start confluent/etc/kafka/server.properties <- 위의 파일 순번대로

멀티 브로커 사용시 zookeeper.properties 그대로 사용하지 말고 zookeeper의 dataDir를 별도 구성  

Java Source 상에는 ec2 의 외부 접속 아이피를 적용

예) 15.164.90.79:9092

ec2 내부와 외부를 모두 사용하기 위해서는

ec2 의 kafka 폴더의 etc 안 kafka 폴더에서 server.properties 

listeners=PLAINTEXT://0.0.0.0:9092

advertised.listener=PLAINTEXT://{여기에 ec2의 dns 주소를 쓰고}:9092

하면 끝..

Pandas의 shift method는 DataFrame이나 Series에 적용해서 행의 위치를 일정 칸수씩 이동시킵니다.

바로 예시를 통해 알아봅시다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        7, 8, 9, 10,
        11, 12, 13,
        14, 15, 16
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.shift(-1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     7
7      2    a  2050     8
8      2    b  2000     9
9      2    b  2200    10
10     3    a  3000    11
11     3    a  3100    12
12     3    b  3200    13
13     4    a  4200    14
14     4    b  4100    15
15     4    b  4150    16

    col1 col2    col3  col4
0    1.0    a  1100.0   2.0
1    1.0    a  1200.0   3.0
2    1.0    b  1300.0   4.0
3    1.0    b  1050.0   5.0
4    1.0    b  1100.0   6.0
5    2.0    a  2100.0   7.0
6    2.0    a  2050.0   8.0
7    2.0    b  2000.0   9.0
8    2.0    b  2200.0  10.0
9    3.0    a  3000.0  11.0
10   3.0    a  3100.0  12.0
11   3.0    b  3200.0  13.0
12   4.0    a  4200.0  14.0
13   4.0    b  4100.0  15.0
14   4.0    b  4150.0  16.0
15   NaN  NaN     NaN   NaN
<class 'pandas.core.frame.DataFrame'>

위 예시는 df_test라는 DataFrame을 생성한 후 이 DataFrame에 shift를 적용한 것입니다.

df_shifted를 보면 DataFrame의 모든 행의 값이 하나씩 위로 올라간걸 볼 수 있습니다.

하나씩 위로 올라간것은 shift의 인자로서 -1이 적혔기 때문이고, -1은 위쪽으로 한칸씩 옮기라는 뜻입니다.

현재 index보다 1씩 작은(-1) index의 위치로 옮기라는 것입니다.

그리고 index=15인 행은 다음 행이 없으니 NaN값으로 표시된 것을 알 수 있죠.

또한 shift가 적용된 대상이 DataFrame인 df_test이므로 return되는 데이터도 DataFrame입니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        7, 8, 9, 10,
        11, 12, 13,
        14, 15, 16
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.shift(1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     7
7      2    a  2050     8
8      2    b  2000     9
9      2    b  2200    10
10     3    a  3000    11
11     3    a  3100    12
12     3    b  3200    13
13     4    a  4200    14
14     4    b  4100    15
15     4    b  4150    16

    col1 col2    col3  col4
0    NaN  NaN     NaN   NaN
1    1.0    a  1000.0   1.0
2    1.0    a  1100.0   2.0
3    1.0    a  1200.0   3.0
4    1.0    b  1300.0   4.0
5    1.0    b  1050.0   5.0
6    1.0    b  1100.0   6.0
7    2.0    a  2100.0   7.0
8    2.0    a  2050.0   8.0
9    2.0    b  2000.0   9.0
10   2.0    b  2200.0  10.0
11   3.0    a  3000.0  11.0
12   3.0    a  3100.0  12.0
13   3.0    b  3200.0  13.0
14   4.0    a  4200.0  14.0
15   4.0    b  4100.0  15.0
<class 'pandas.core.frame.DataFrame'>

반면에 shift의 인자로 1을 전달하면 모든 행의 값이 아래쪽으로 1칸씩 밀린 것을 알 수 있습니다.

index=0인 행은 이전 행이 없으므로 NaN으로 표시되었습니다.

이렇게 몇 칸을 옮기고싶은지에 대한 숫자를 shift의 인자로서 전달하면 원하는 만큼 이동이 가능합니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.loc[:, 'col4'].shift(-1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

0      2.0
1      3.0
2      4.0
3      5.0
4      6.0
5      6.0
6      7.0
7      8.0
8      9.0
9     10.0
10    11.0
11    12.0
12    13.0
13    14.0
14    15.0
15     NaN
Name: col4, dtype: float64
<class 'pandas.core.series.Series'>

shift는 DataFrame의 하나의 행에만 적용할 수도 있습니다.

위 예시는 df_test의 col4에만 shift를 적용시켰습니다.

loc[:, 'col4']를 보면 column이름인 col4에 대괄호가 쳐져있지 않으므로 이것은 col4를 Series로 반환합니다.

따라서 위 예시에서 shift는 Series에 적용된 것과 같으므로 shift의 return값도 Series입니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_shifted = df_test.loc[:, ['col4']].shift(-1)
print(df_shifted)
print(type(df_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

    col4
0    2.0
1    3.0
2    4.0
3    5.0
4    6.0
5    6.0
6    7.0
7    8.0
8    9.0
9   10.0
10  11.0
11  12.0
12  13.0
13  14.0
14  15.0
15   NaN
<class 'pandas.core.frame.DataFrame'>

이번엔 loc.[:, ['col4']] 처럼 column이름에 대괄호를 쳐서 loc가 DataFrame을 return하게 했습니다.

따라서 여기에 적용된 shift도 DataFrame에 대해 적용되는 것이므로 shift의 return값도 DataFrame입니다.

shift는 자신이 적용된 대상의 data type과 동일한 data type의 결과를 return합니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_group_shifted = df_test.groupby(by=['col1', 'col2'])[['col4']].shift(-1)
print(df_group_shifted)
print(type(df_group_shifted))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

    col4
0    2.0
1    3.0
2    NaN
3    5.0
4    6.0
5    NaN
6    7.0
7    NaN
8    9.0
9    NaN
10  11.0
11   NaN
12   NaN
13   NaN
14  15.0
15   NaN
<class 'pandas.core.frame.DataFrame'>

shift는 groupby와 함께 사용될 수 있습니다.

위 예시를 보면 col1, col2를 기준으로 groupby를 하고 groupby된 col4에 shift를 적용합니다.

따라서 결과를 보면 shift가 동일한 col1, col2값을 가진 행들의 그룹 내에서 적용된 것을 볼 수 있습니다.

(index=0, 1, 2 행이 동일한 col1, col2 값을 가지고있으므로 index=0, 1, 2에 있는 col4값을 위쪽으로 한 칸씩 올린 모습을 볼 수 있습니다. index=2는 동일한 col1, col2값을 가진 다음 행이 없으므로 NaN으로 표시되는 것도 볼 수 있죠.)

import pandas as pd

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)


df_test.loc[:, 'col5'] = df_test.groupby(by=['col1'])['col3'].shift(-2)
print(df_test)




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

    col1 col2  col3  col4    col5
0      1    a  1000     1  1200.0
1      1    a  1100     2  1300.0
2      1    a  1200     3  1050.0
3      1    b  1300     4  1100.0
4      1    b  1050     5     NaN
5      1    b  1100     6     NaN
6      2    a  2100     6  2000.0
7      2    a  2050     7  2200.0
8      2    b  2000     8     NaN
9      2    b  2200     9     NaN
10     3    a  3000    10  3200.0
11     3    a  3100    11     NaN
12     3    b  3200    12     NaN
13     4    a  4200    13  4150.0
14     4    b  4100    14     NaN
15     4    b  4150    15     NaN

위같은 방식으로 groupby와 shift로 이동된 데이터를 원본 DataFrame의 어떤 column에 할당할 수도 있습니다.

import pandas as pd

dict_test = {
    'col1': [
        1, 1, 1, 1, 1, 1,
        2, 2, 2, 2,
        3, 3, 3,
        4, 4, 4
    ],
    'col2': [
        'a', 'a', 'a', 'b', 'b', 'b',
        'a', 'a', 'b', 'b',
        'a', 'a', 'b',
        'a', 'b', 'b'
    ],
    'col3': [
        1000, 1100, 1200, 1300, 1050, 1100,
        2100, 2050, 2000, 2200,
        3000, 3100, 3200,
        4200, 4100, 4150
    ],
    'col4': [
        1, 2, 3, 4, 5, 6,
        6, 7, 8, 9,
        10, 11, 12,
        13, 14, 15
    ]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_rolling_sum_1 = df_test.groupby(by=['col1', 'col2'])[['col4']].rolling(2).apply(sum)
print(df_rolling_sum_1)
print(type(df_rolling_sum_1))

df_rolling_sum_2 = df_test.groupby(by=['col1', 'col2'])[['col4']].rolling(2).apply(sum).shift(-1)
print(df_rolling_sum_2)
print(type(df_rolling_sum_2))




-- Result
    col1 col2  col3  col4
0      1    a  1000     1
1      1    a  1100     2
2      1    a  1200     3
3      1    b  1300     4
4      1    b  1050     5
5      1    b  1100     6
6      2    a  2100     6
7      2    a  2050     7
8      2    b  2000     8
9      2    b  2200     9
10     3    a  3000    10
11     3    a  3100    11
12     3    b  3200    12
13     4    a  4200    13
14     4    b  4100    14
15     4    b  4150    15

              col4
col1 col2         
1    a    0    NaN
          1    3.0
          2    5.0
     b    3    NaN
          4    9.0
          5   11.0
2    a    6    NaN
          7   13.0
     b    8    NaN
          9   17.0
3    a    10   NaN
          11  21.0
     b    12   NaN
4    a    13   NaN
     b    14   NaN
          15  29.0
<class 'pandas.core.frame.DataFrame'>

              col4
col1 col2         
1    a    0    3.0
          1    5.0
          2    NaN
     b    3    9.0
          4   11.0
          5    NaN
2    a    6   13.0
          7    NaN
     b    8   17.0
          9    NaN
3    a    10  21.0
          11   NaN
     b    12   NaN
4    a    13   NaN
     b    14  29.0
          15   NaN
<class 'pandas.core.frame.DataFrame'>

shift는 rolling과도 같이 사용될 수 있습니다.

위 예시를 보면 col1, col2를 기준으로 그룹화된 DataFrame의 col4에 2개 행(현재행, 그 이전행)에 대해 rolling sum을 진행한 것이 df_rolling_sum_1이고,

여기에 shift를 추가로 적용한게 df_rolling_sum_2입니다.

이 두 결과를 비교해보면 데이터는 똑같으나 shift(-1)이 적용된 결과는 동일한 group(=동일한 col1, col2 값을 가진 행들) 내에서 col4의 rooling sum 값이 한줄씩 위로 옮겨긴걸 볼 수 있습니다.

import pandas as pd

dict_test = {
    'col1': [1, 2, 3, 4, 5, 6, 7, 8, 9, 10],
    'col2': ['a', 'a', 'a', 'a', 'b', 'b', 'b', 'b', 'b', 'b'],
    'col3': [1000, 1200, 1100, 1050, 1300, 900, 1500, 2000, 1800, 1600]
}

df_test = pd.DataFrame(dict_test)
print(df_test)

df_rolling_sum = df_test.groupby(by=['col2'])[['col3']].rolling(2).apply(sum).shift(-1)
df_rolling_sum = df_rolling_sum.reset_index(drop=False, inplace=False)
print(df_rolling_sum)
print(type(df_rolling_sum))

df_test.loc[:, 'new_col3'] = df_rolling_sum.loc[:, 'col3']
print(df_test)
print(type(df_test))




-- Result
   col1 col2  col3
0     1    a  1000
1     2    a  1200
2     3    a  1100
3     4    a  1050
4     5    b  1300
5     6    b   900
6     7    b  1500
7     8    b  2000
8     9    b  1800
9    10    b  1600

  col2  level_1    col3
0    a        0  2200.0
1    a        1  2300.0
2    a        2  2150.0
3    a        3     NaN
4    b        4  2200.0
5    b        5  2400.0
6    b        6  3500.0
7    b        7  3800.0
8    b        8  3400.0
9    b        9     NaN
<class 'pandas.core.frame.DataFrame'>

   col1 col2  col3  new_col3
0     1    a  1000    2200.0
1     2    a  1200    2300.0
2     3    a  1100    2150.0
3     4    a  1050       NaN
4     5    b  1300    2200.0
5     6    b   900    2400.0
6     7    b  1500    3500.0
7     8    b  2000    3800.0
8     9    b  1800    3400.0
9    10    b  1600       NaN
<class 'pandas.core.frame.DataFrame'>

위 예시는 rolling sum과 shift를 적용한 결과를 df_test의 new_col3라는 새로운 컬럼에 할당하고 있는 예시입니다.

보시면 rolling sum + shift(-1)의 결과로 생성된 df_rolling_sum의 col3의 값이 df_test의 new_col3에 그대로 할당된것을 볼 수 있죠.

sudo spctl --master-disable

cd data_directory

mongod --dbpath=data/db

new window

mongo

sudo spctl --master-enable

react-native: 웹 개발자가 한달만에 앱 출시하기

사례

• 페이스북
• 인스타그램
• 디스코드
• 케이크
  • 앱개발자 1명
  • 안드로이드 & iOS 개발기간 1달
  • 매달 정기 업데이트
  • 기존 앱 개발 방식이었다면 가능했을까?

선택의결과

• 투입한 개발 리소스 ↓ = 최종 결과물의 퀄리티 ↑
• 플랫폼간 공유 코드 ↑ = QA & 유지 보수 비용 ↓

빠른 개발 -> 코드 공유 -> 쉬운 개선

React Native는 단 기간에 프로덕션 레벨의 크로스 플랫폼 앱을 만들어야 할 때 고려할 수 있는 여러 선택지 중 가장 가성비가 좋은 프레임워크다.

react-native 완벽한 이해

React Component -> React Native -> Bridge -> Android, iOS

Threading Structure

Bridge 특징

1. Asynchronous

AS-IS Native 동기화 호출: 완료 시점까지 Javascript 처리 대기

TO-BE Native 비동기 호출: 완료 시점까지 Javascript 처리 진행

2. Serializable

AS-IS 독립적으로 운영되는 두 영역 간의 데이터 공유: 많은 관리 이슈 발생

TO-BE 직렬화 된 메시지 교환: 간결해진 구조 대신 성능 저하 발생

3. Batched

AS-IS Native 호출마다 직렬화와 역직렬화의 과정에서 부하 발생

TO-BE 큐에 넣어 5ms 단위로 일괄 처리하는 방식으로 성능 개선

Bridge 모니터링

• MessageQueue 모니터링 방법

import MessageQueue from 'react-native/Libraries/BatchedBridge/MessageQueue'; MessageQueue.spy(true); MessageQueue.spy((info) => console.log("I'm spying!", info));

react-native의 발전방향

Facebook의 개선 방향

1. New Threading model
2. New async rendering capabilities
3. Faster and more lightweight bridge

Cake 프로젝트에 얻은 노하우 &

EXPO(CRNA) 사용 자제

1. 시작만 쉽고 모든 게 어려워짐
2. 기본으로 제공하는 기능은 많지만 앱이 너무 커짐 (기본 25~30MB)
3. 추가적인 Native 모듈을 설치할 수 없음 (제일 큰 이유!)

속 편하게 처음부터 빌드 방식(react-native-cli)으로 시작해라

효율적인 작업 순서

기본적인 작업 (레이아웃, 데이터 연동) -> 복잡한 애니메이션 & 인터랙션 확인 -> iOS에 특화된 UX 작업

중간에 안드로이드에서 확인하지 않으면 나중에 놀랄 수 있음!

Import 경로 지옥 탈출

상대경로 말고 절대경로를 사용하고 싶다면 babel-plugin-root-import를 적용

Optional Chaining

// AS-IS if(data && data.items && data.items.length > 2) { drawList(data); } // TO-BE if(data?.items?.length > 2) { drawList(data); }

Optional chaining operator 사용으로 쉽게 Null Safety 코딩! (0.56 버전부터 가능)

Lock dependencies

잘못된 라이브러리 업데이트는 고통을 불러옴

버전 고정하는 방법

1. 설치마다 고정 버전으로 설치하기

$ npm install --save --save-exact react-native-fbsdk $ yarn add --exact react-native-fbsdk

1. 전역 기본 옵션으로 설정하기

$ npm config set save-exact=true

Flow는 처음부터 꼭 사용해라

Flow를 적용해서 타입을 정의하면 파라미터 타입 오류의 사전 감지가 가능

1. 코드 진단
2. 자동 완성
3. 타입 힌트
4. 빠른 함수 이동

요즘은 타입스크립트도 지원이 많이 되어서 괜찮음

컴파일된 번들 파일 확인

자신이 짠 코드를 babel로 어떻게 변환되는지 확인해보는 것도 의미 있음

$ npm -g install js-beautify

$ react-native bundle --platform android --dev false --entry-file index.js --bundle-output index.android.bundle $ js-beautify index.android.bundle > index.android.bundle.js

성능을 고려한 정적 이미지 사용

AS-IS Javascript packager가 동작하는 방식: Bundle 파일 생성 -> 모듈 ID로 치환

TO-BE App Resources 사용하기

1. 기존 Native 개발 방식(Xcode asset catalogs / Android drawable folder)으로 추가
2. 크기 속성을 꼭 정의

성능을 고려한 리모트 이미지 사용

내장 Image 컴포넌트의 문제

1. Flickering
2. Cache misses
3. Low performances

// SDWebImage (iOS) / Glide (Android) 라이브러리 사용으로 문제점 개선 $ npm install react-native-fast-image

JavaScriptCode의 동작 오류

• Remote Debug 모드는 크롬의 V8 엔진 사용 (JavaScriptCore 엔진은 Date 처리에 문제가 많으므로 moment.js 라이브러리 사용)
• 플랫폼 간에도 다르게 동작할 수 있음 (안드로이드는 오래된 버전의 JavaScriptCore 엔진 사용중임)

플랫폼별 컴포넌트 스타일링

• 재정의 방식으로 스타일 정의하기

import StyleSheet from './PlatformStyleSheet'; const styles = StyleSheet.create({ title: { fontSize: 16, ios: { fontSize: 18 }, android: { fontSize: 17, color: 'red' } } });

import { Platform, StyleSheet } from 'react-native'; const PlatformStyleSheet = { create(styles) { const platformStyles = {}; for (const key in styles) { const { ios, android, ...style } = styles[key]; (ios || android) && Object.assign(style, Platform.select({ios, android})); platformStyles[key] = style; } return StyleSheet.create(platformStyles); }, } export default PlatformStyleSheet;

편리한 Style 자동완성

• atom-react-native-style 패키지 설치

안드로이드 Text 위 아래 패딩 제거

• includeFontPadding 스타일 속성 끄기 (iOS와 동일하게 TextView의 ascent, descent 기준으로 출력)

공용 Text 컴포넌트 사용하기

class Text extends PureComponent { static defaultStyle = Platform.select({ ios: { fontFamily: 'AppleSDGothicNeo-Regular' }, android: { fontFamily: 'sans-serif', includeFontPadding: false } }); render() { const { children, style, ...props } = this.props; return <Text {...props} allowFontScaling={false} style={[Text.defaultStyle, style]}> {children} </Text>; } }

터치 영역 확장하기

• hitSlop으로 최소한 44dp의 터치 영역을 보장해주세요.

<TouchableWithourFeedback hitSlop={{top: 7, right: 7, bottom: 7, left: 7}}> <View .../> </TouchableWithourFeedback>

놓치기 쉬운 최초 화면 렌더링

• render() 함수가 최초에 한 번 실행된다는 걸 잊기 쉬움
• render() -> componentDidMount() -> render()
• 출력 여부 상태 값으로 불필요한 초기 렌더링 제거

화면에 보이지 않지만 동작하는 코드

• 타이머/이벤트 리스너 사용 시 꼭 제거

개발자 도구

• react-native: Perf Monitor(iOS)
• Xocde: View Hierarchy Debugger
• Android Studio: Profiler

60 FPS 보장하기

효율적인 애니메이션 사용

• Javascript Driver 동작 순서

requestAnimationFrame 함수 실행 -> 값 계산 후 View.setNativeProps 함수 실행 -> Bridge로 전달 -> UI 업데이트

• Native Driver 동작 순서

메인 쓰레드에서 프레임마다 실행 -> 계산된 값으로 직접 View 업데이트 호출 -> UI 업데이트

Animated.timing(this._animation, { toValue: 1, duration: 1000, useNativeDriver: true, // add this }).start();

무거운 코드의 올바른 실행 시점

• 애니메이션과 인터랙션이 끝난 후로 실행 지연

반복되는 애니메이션이 있다면 등록한 코드가 실행되지 않거나 실행 시점의 문제 발생

• 다음 프레임으로 실행 지연

현재 프레임의 다른 실행을 보장해서 앱 반응성 개선

import { InteractionManager } from 'react-native'; componentDidMount() { InteractionManager.runAfterInteractions(() => { this.doExpensiveAction(); }); } handleOnPress() { requestAnimationFrame(() => { this.doExpensiveAction(); }); }

FlatList 성능 개선

• getItemLayout 속성 사용

높이가 고정된 구성이라면 레이아웃의 크기를 매번 계산하지 않아서 성능 개선

<FlatList getItemLayout={(data, index) => { { length: ITEM_HEIGHT, offset: ITEM_HEIGHT * index, index } )} />

효율적인 레퍼런스 사용

1. String Refs

Deprecated된 방식으로 사용하지 마세요.

// 레퍼런스 할당 <TextInput ref={'inputField'} /> // 레퍼런스 사용 this._refs.inputField.focus();

1. Callback Refs

컴포넌트에 인라인 함수를 사용하는 건 좋지 않아요.

// 레퍼런스 할당 <TextInput ref={ component => this._inputField = component } /> // 레퍼런스 사용 this._inputField.focus();

1. React.createRef()

React 16.3 버전부터 제공하는 효율적인 방식을 사용하세요.

// 레퍼런스 생성 this._inputFieldRef = React.createRef(); // 레퍼런스 할당 <TextInput ref={this._inputFieldRef} /> // 레퍼런스 사용 this._inputFieldRef.current.focus();

Google Play API Level 26 정책 대응

• 유지보수되지 않는 라이브러리의 빌드 설정

android { compileSdkVersion 23 buildToolsVersion "23.0.1" defaultConfig { minSdkVersion 16 targetSdkVersion 22 } }

• 프로젝트 설정을 사용하는 빌드 설정

def safeExtGet(prop, fallback) { rootProject.ext.has(prop) ? rootProject.ext.get(prop) : fallback } android { compileSdkVersion safeExtGet('compileSdkVersion', 27) buildToolsVersion safeExtGet('buildToolsVersion', '27.0.3') defaultConfig { minSdkVersion safeExtGet('minSdkVersion', 16) targetSdkVersion safeExtGet('targetSdkVersion', 26) } }

안드로이드 APK 최적화

1. Split APK

• CPU 별로 불필요한 코드 제거
• 중복된 JavaScriptCore 라이브러리의 제거로 APK 크기 3~4 MB 감소

// android/app/build.gradle def enableSeparateBuildPerCPUArchitecture = true

1. Proguard 적용

// android/app/build.gradle def enableProguardInReleaseBuilds = true

1. shrinkResources 옵션 사용 금지
2. console.* 코드 제거

$ npm install --save-dev babel-plugin-transform-remove-console

// .babelrc { "env": { "production": { "plugins": ["transform-remove-console"] } } }

1. 불필요한 localized resource 제거

// android/app/build.gradle android { defaultConfig { resConfigs "en", "ko" } }

1. 이미지 최적화

TinyPNG, OptiPNG

앱 크기에 대한 걱정은 오해

네비게이션 모듈 선택

• react-navigation (JS 구현체)
• react-native-navigation (Native 구현체)
• Native 구현체가 JS 구현체보다 성능이 좋으니 무조건 앞선다는 글에 현혹되지 마세요.
• 원하는 수준의 커스터마이징과 트러블 대응이 가능한 모듈을 선택하세요.

복잡한 애니메이션은 Lottie

• 이제 디자이너한테 복잡한 애니메이션도 다 된다고 자신 있게 말하세요.

Adobe After Effects로 작업한 애니메이션을 JSON 형식으로 export하면 끝

<LottieView source={require('./animation.json')} autoPlay loop />

출처

• 발표자료: 링크
• 발표자: 스노우 이성민 개발자님

도움되는 링크

• 코드종님의 네비게이션 모듈 관련 글
• 폰트 스케일 관련 글

npm install -g react-native-cli

or

npm install -g expo-cli

프로젝트 생성

react-native init [프로젝트명]

or

expo init [프로젝트명]

cd [프로젝트명]

=== react-native

npm start ==> 프로젝트 시작

또 다른 창에 (실행했는데 에러난다면)

android/app/src/main 폴더에서 assets 폴더 생성

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

--platform android : 안드로이드 빌드

--dev false: 릴리즈 모드로 빌드

--entry-file index.js : index.js를 시작으로 번들링 할 것

--bundle-output *** : 번들결과 파일 위치 및 파일명 설정

--assets-dest *** : 리소스 경로 설정

끝나면

react-native run-android ==> simulator 가 뜬다

==== expo

yarn start 

빌드는?

번들링 생성 시

cd android

./gradlew bundleRelease

or

cd android && ./gradlew bundleRelease

여러번 빌드하다보면 번들링 결과가 여러번 생성되므로 정리해주자.

cd android && ./gradlew clean && ./gredlew bundleRelease

apk 생성해야한다면 assembleRelease 

cd android && ./gradlew assembleRelease

빌드 후 android/app/build/outputs에 결과 파일 생성

release 버전으로 구동 테스트할 때는 --variant=release 옵션을 넣고 실행하면 된다.

react-native run-android --variant=release

빌드 옵션 상세 ./gradlew bundleRelease 의 상세

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

--platform android : 안드로이드 빌드

--dev false: 릴리즈 모드로 빌드

--entry-file index.js : index.js를 시작으로 번들링 할 것

--bundle-output *** : 번들결과 파일 위치 및 파일명 설정

--assets-dest *** : 리소스 경로 설정

'eyes-movies '개인정보처리방침')은(는) 개인정보보호법에 따라 이용자의 개인정보 보호 및 권익을 보호하고 개인정보와 관련한 이용자의 고충을 원활하게 처리할 수 있도록 다음과 같은 처리방침을 두고 있습니다.

('개인정보처리방침') 은(는) 회사는 개인정보처리방침을 개정하는 경우 웹사이트 공지사항(또는 개별공지)을 통하여 공지할 것입니다.

○ 본 방침은부터 2020년 1월 1일부터 시행됩니다.

1. 개인정보의 처리 목적 ('개인정보처리방침')은(는) 개인정보를 다음의 목적을 위해 처리합니다. 처리한 개인정보는 다음의 목적이외의 용도로는 사용되지 않으며 이용 목적이 변경될 시에는 사전동의를 구할 예정입니다.

가. 홈페이지 회원가입 및 관리

회원 가입의사 확인, 회원제 서비스 제공에 따른 본인 식별·인증, 회원자격 유지·관리, 제한적 본인확인제 시행에 따른 본인확인, 서비스 부정이용 방지, 만14세 미만 아동 개인정보 수집 시 법정대리인 동의 여부 확인, 각종 고지·통지, 고충처리, 분쟁 조정을 위한 기록 보존 등을 목적으로 개인정보를 처리합니다.

나. 민원사무 처리

민원인의 신원 확인, 민원사항 확인, 사실조사를 위한 연락·통지, 처리결과 통보 등을 목적으로 개인정보를 처리합니다.

다. 재화 또는 서비스 제공

서비스 제공, 청구서 발송, 콘텐츠 제공, 맞춤 서비스 제공 등을 목적으로 개인정보를 처리합니다.

라. 마케팅 및 광고에의 활용

신규 서비스(제품) 개발 및 맞춤 서비스 제공, 이벤트 및 광고성 정보 제공 및 참여기회 제공 , 인구통계학적 특성에 따른 서비스 제공 및 광고 게재 , 서비스의 유효성 확인, 접속빈도 파악 또는 회원의 서비스 이용에 대한 통계 등을 목적으로 개인정보를 처리합니다.

2. 개인정보 파일 현황

3. 개인정보의 처리 및 보유 기간

① ('개인정보처리방침')은(는) 법령에 따른 개인정보 보유·이용기간 또는 정보주체로부터 개인정보를 수집시에 동의 받은 개인정보 보유,이용기간 내에서 개인정보를 처리,보유합니다.

② 각각의 개인정보 처리 및 보유 기간은 다음과 같습니다.

4. 개인정보의 제3자 제공에 관한 사항

① ('개인정보처리방침')은(는) 정보주체의 동의, 법률의 특별한 규정 등 개인정보 보호법 제17조 및 제18조에 해당하는 경우에만 개인정보를 제3자에게 제공합니다.

② (eyes-movies은(는) 다음과 같이 개인정보를 제3자에게 제공하고 있습니다.

5. 개인정보처리 위탁

① ('개인정보처리방침')은(는) 원활한 개인정보 업무처리를 위하여 다음과 같이 개인정보 처리업무를 위탁하고 있습니다.

② (eyes-movies '개인정보처리방침')은(는) 위탁계약 체결시 개인정보 보호법 제25조에 따라 위탁업무 수행목적 외 개인정보 처리금지, 기술적․관리적 보호조치, 재위탁 제한, 수탁자에 대한 관리․감독, 손해배상 등 책임에 관한 사항을 계약서 등 문서에 명시하고, 수탁자가 개인정보를 안전하게 처리하는지를 감독하고 있습니다.

③ 위탁업무의 내용이나 수탁자가 변경될 경우에는 지체없이 본 개인정보 처리방침을 통하여 공개하도록 하겠습니다.

6. 정보주체와 법정대리인의 권리·의무 및 그 행사방법 이용자는 개인정보주체로써 다음과 같은 권리를 행사할 수 있습니다.

① 정보주체는 eyes-movies에 대해 언제든지 개인정보 열람,정정,삭제,처리정지 요구 등의 권리를 행사할 수 있습니다.
② 제1항에 따른 권리 행사는eyes-movies에 대해 개인정보 보호법 시행령 제41조제1항에 따라 서면, 전자우편, 모사전송(FAX) 등을 통하여 하실 수 있으며 eyes-movies은(는) 이에 대해 지체 없이 조치하겠습니다.
③ 제1항에 따른 권리 행사는 정보주체의 법정대리인이나 위임을 받은 자 등 대리인을 통하여 하실 수 있습니다. 이 경우 개인정보 보호법 시행규칙 별지 제11호 서식에 따른 위임장을 제출하셔야 합니다.
④ 개인정보 열람 및 처리정지 요구는 개인정보보호법 제35조 제5항, 제37조 제2항에 의하여 정보주체의 권리가 제한 될 수 있습니다.
⑤ 개인정보의 정정 및 삭제 요구는 다른 법령에서 그 개인정보가 수집 대상으로 명시되어 있는 경우에는 그 삭제를 요구할 수 없습니다.
⑥ eyes-movies은(는) 정보주체 권리에 따른 열람의 요구, 정정·삭제의 요구, 처리정지의 요구 시 열람 등 요구를 한 자가 본인이거나 정당한 대리인인지를 확인합니다.

7. 처리하는 개인정보의 항목 작성

① (eyes-movies '개인정보처리방침')은(는) 다음의 개인정보 항목을 처리하고 있습니다.

8. 개인정보의 파기('개인정보처리방침')은(는) 원칙적으로 개인정보 처리목적이 달성된 경우에는 지체없이 해당 개인정보를 파기합니다. 파기의 절차, 기한 및 방법은 다음과 같습니다.

-파기절차
이용자가 입력한 정보는 목적 달성 후 별도의 DB에 옮겨져(종이의 경우 별도의 서류) 내부 방침 및 기타 관련 법령에 따라 일정기간 저장된 후 혹은 즉시 파기됩니다. 이 때, DB로 옮겨진 개인정보는 법률에 의한 경우가 아니고서는 다른 목적으로 이용되지 않습니다.

-파기기한
이용자의 개인정보는 개인정보의 보유기간이 경과된 경우에는 보유기간의 종료일로부터 5일 이내에, 개인정보의 처리 목적 달성, 해당 서비스의 폐지, 사업의 종료 등 그 개인정보가 불필요하게 되었을 때에는 개인정보의 처리가 불필요한 것으로 인정되는 날로부터 5일 이내에 그 개인정보를 파기합니다.

9. 개인정보 자동 수집 장치의 설치•운영 및 거부에 관한 사항

① eyes-movies 은 개별적인 맞춤서비스를 제공하기 위해 이용정보를 저장하고 수시로 불러오는 ‘쿠기(cookie)’를 사용합니다. ② 쿠키는 웹사이트를 운영하는데 이용되는 서버(http)가 이용자의 컴퓨터 브라우저에게 보내는 소량의 정보이며 이용자들의 PC 컴퓨터내의 하드디스크에 저장되기도 합니다. 가. 쿠키의 사용 목적 : 이용자가 방문한 각 서비스와 웹 사이트들에 대한 방문 및 이용형태, 인기 검색어, 보안접속 여부, 등을 파악하여 이용자에게 최적화된 정보 제공을 위해 사용됩니다. 나. 쿠키의 설치•운영 및 거부 : 웹브라우저 상단의 도구>인터넷 옵션>개인정보 메뉴의 옵션 설정을 통해 쿠키 저장을 거부 할 수 있습니다. 다. 쿠키 저장을 거부할 경우 맞춤형 서비스 이용에 어려움이 발생할 수 있습니다.

10. 개인정보 보호책임자 작성

① eyes-movies( ‘개인정보처리방침) 은(는) 개인정보 처리에 관한 업무를 총괄해서 책임지고, 개인정보 처리와 관련한 정보주체의 불만처리 및 피해구제 등을 위하여 아래와 같이 개인정보 보호책임자를 지정하고 있습니다.

▶ 개인정보 보호책임자
성명 :조대환
직책 :CTO
직급 :CTO
연락처 :01092090179, head1tonbs@gmail.com,
※ 개인정보 보호 담당부서로 연결됩니다.

② 정보주체께서는 eyes-movies(‘개인정보처리방침) 의 서비스(또는 사업)을 이용하시면서 발생한 모든 개인정보 보호 관련 문의, 불만처리, 피해구제 등에 관한 사항을 개인정보 보호책임자 및 담당부서로 문의하실 수 있습니다. eyes-movies(‘개인정보처리방침) 은(는) 정보주체의 문의에 대해 지체 없이 답변 및 처리해드릴 것입니다.

11. 개인정보 처리방침 변경

①이 개인정보처리방침은 시행일로부터 적용되며, 법령 및 방침에 따른 변경내용의 추가, 삭제 및 정정이 있는 경우에는 변경사항의 시행 7일 전부터 공지사항을 통하여 고지할 것입니다.

12. 개인정보의 안전성 확보 조치 ('개인정보처리방침')은(는) 개인정보보호법 제29조에 따라 다음과 같이 안전성 확보에 필요한 기술적/관리적 및 물리적 조치를 하고 있습니다.

1. 개인정보 취급 직원의 최소화 및 교육
개인정보를 취급하는 직원을 지정하고 담당자에 한정시켜 최소화 하여 개인정보를 관리하는 대책을 시행하고 있습니다.

2. 내부관리계획의 수립 및 시행
개인정보의 안전한 처리를 위하여 내부관리계획을 수립하고 시행하고 있습니다.

3. 개인정보의 암호화
이용자의 개인정보는 비밀번호는 암호화 되어 저장 및 관리되고 있어, 본인만이 알 수 있으며 중요한 데이터는 파일 및 전송 데이터를 암호화 하거나 파일 잠금 기능을 사용하는 등의 별도 보안기능을 사용하고 있습니다.

4. 개인정보에 대한 접근 제한
개인정보를 처리하는 데이터베이스시스템에 대한 접근권한의 부여,변경,말소를 통하여 개인정보에 대한 접근통제를 위하여 필요한 조치를 하고 있으며 침입차단시스템을 이용하여 외부로부터의 무단 접근을 통제하고 있습니다.

5. 비인가자에 대한 출입 통제
개인정보를 보관하고 있는 물리적 보관 장소를 별도로 두고 이에 대해 출입통제 절차를 수립, 운영하고 있습니다.

import tensorflow as tf
from keras.backend.tensorflow_backend import set_session
# tf.compat.v1.disable_eager_execution()

# config = tf.compat.v1.ConfigProto()
# config.gpu_options.per_process_gpu_memory_fraction = 0.1
# set_session(tf.compat.v1.Session(config=config))


config = tf.compat.v1.ConfigProto()
config.gpu_options.per_process_gpu_memory_fraction = 0.1
tf.compat.v1.keras.backend.set_session(tf.compat.v1.Session(config=config))

설치 환경은

Anaconda3 python 3.5

증상

conda install graphviz 로 설치하고

프로그램을 수행하면 아래와 같이 뜬다

No module named graphviz

원인

conda install 하면 graphviz 폴더를 

~/Anaconda3/Library/bin/ 로 설치를 한다

문제는 python interpreter 가 이 위치를 읽지 못한다는 것

해결

graphviz 폴더를 복사해서

~/Anaconda3/Lib/site-packages 하위로 복사해준다

결과

No module 문제는 해결 된다

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

증상

 [dot, ~]가 excutable  하지 않다고 나옴

원인

 graphviz download 사이트에 들어가 찾아보면

 더이상 자동으로 PATH를 잡아주지 않는다고

 dot 명령이 바로 실행 되도록 알아서 PATH를 잡으라고 한다

해결

~\Anaconda3\Lib\site-packages\graphviz 를

PATH에 추가한다

결과

코드가 실행된다 

만약 실행이 안되면 창을 다 닿았다가 다시 실행해보자

그래도 안되면 pip install graphviz 를 해보자 

(사실 설치중에 conda install 과 pip install 이 된 상태여서 이게 결함인지는 모르겠다)

출처: http://livetoday.tistory.com/entry/graphviz-설치-후-오류-Anaconda [Hero]

로그 파일 업데이트 되는 내용을 보려면 tail을 사용하면 된다.

tail -f log.txt

이렇게 하면 log.txt파일에 새로 추가된 내용이 화면에 출력된다.

ssh로 원격에 있는 서버의 로그 파일도 볼 수 있다.

ssh user@host "tail -f /locaion/to/log/file"

서버가 두대여서 터미널 창 두개 열어놓고 보고 있었는데 현진한테 물어보니 multitail을 사용하면 된다고 한다. 찾아보니 관련 글도 많다.

• multitail – 로그 파일 여러개 모니터링 하기
• 리눅스에서 원격지 로그 여러개 같이 보기
• Monitor Multiple Remote Files Using Multitail

일단 맥에는 multitail이 없으니 brew install multitail로 설치한다.

그러고 위의 링크에 나와있는대로 해보면 화면이 분할되어서 로그파일이 나온다.

multitail -l 'ssh user@host1 "tail -f /var/log/apache2/error.log"' -l 'ssh user@host2 "tail -f /var/log/apache2/error.log"'

상하좌우 화면 분할도 자유롭고 보고있는 파일명도 아래에 표시되어서 훨씬 알아보기 쉽다.