본문 바로가기

전체

iOS 웹뷰 safe area inset 이슈 해결 방법 이슈 상황iOS 앱 내에서 웹뷰로 웹페이지를 그릴 때, 페이지의 전체 높이가 실제 기기 높이값보다 더 크게 잡혀서 상하스크롤이 항상 발생하는 이슈기존 코드 문제점 및 해결기존 코드에는 몇가지 문제가 혼재되어 있었다.첫번째, meta tag viewport 속성meta tag에 viewport 관련 속성을 넣고 있는데, 와 같이 name 이 아닌 property 로 잘못 셋팅하고 있어서 실제로는 적용이 안되고 있었다.viewport 와 같은 속성은 name 으로, open graph 관련 og 태그는 property 로 셋팅해야한다. MDN 문서두번째, iOS 는 상/하단에 상태바/하단바와 같은 기본 영역이 있다는 점을 고려해야한다. 와 같이 viewport-fit: cover 로 셋팅한 웹뷰는, 기기 ..
소개 안녕하세요? 닉네임 가자미로 활동하고 있는 류우림 입니다. 챗봇 플랫폼 및 엔진 개발을 하고 있는 4년차 Software Engineer 입니다 :D GCP, Kubernetes, BigQuery 와 Web Front 및 Performance Optimization 에 관심이 많습니다. ✉️ Email directorryu28@gmail.com Work Experience Kakao, Bot Platform Development Team, Software Engineer KakaoTalk Chatbot Platform & Engine 2018.10 - current Daum News & Harmony Insight 2015.10 - 2017.12 Technical Skills Web Front: Java..
React, Redux, Webpack4, Babel7, Material UI 로 프로젝트 셋팅하기 2 2. React 와 ReactDOM 적용하기React의 DOM 렌더링 과정은 이 문서를 참고하여 공부했습니다. 이와 관련해서 이후 포스팅을 할 예정입니다. React, ReactDOM 설치하기 $ npm install --save react react-dom/index.js 에서 사용해보기import React from "react"; import ReactDOM from "react-dom"; let Hi = () => { return Hi Ryu! }; ReactDOM.render( , document.getElementById("root") ); 이제 React 코드를 어떻게 컴파일해야할지 Webpack 에게 알려주는 역할이 필요합니다. Babel 이 바로 그 역할을 합니다. Babel packag..
React, Redux, Webpack4, Babel7, Material UI 로 프로젝트 셋팅하기 1 팀에서 데이터 조회 및 운영툴이 필요하여 만들게 되었습니다.지금은 데이터 조회 기능이 전부인 작은 서비스이지만, 이후 팀에서 운영이 필요한 부분들을 모두 담을 애플리케이션이라 React, Redux, Webpack4, Material UI 를 스펙으로 서비스 스펙을 설정하게 되었습니다. 세부적인 코드는 업무 내용이라 여기 작성하진 못하겠지만, 기본적인 셋팅과 틀은 어디서나 공통적으로 사용될 내용이라 블로그에 기록을 해두면 좋을것 같아 함께 진행해보려 합니다. 0. 너로 정했다! 우선은 들어가기에 앞서, 많고 많은 Framework와 Library 중에 아래 도구들을 사용하기로 결정한 이유에 대해 정리해보았습니다.React바야흐로 춘추전국시대에서 살아남은 React와 Vue.작년에 Vue 로 팀내 운영툴을..
Celery 시작하기 Celery Getting Started 샐러리 정식 문서 를 기반으로 번역 및 보충하여 작성하였습니다. Celery는 비동기 Task Queue 입니다. Task 를 Message Broker 를 통해 전달하면 Worker가 이를 처리하는 구조입니다. 튜토리얼 단계Choosing and installing a message transport (broker).Installing Celery and creating your first task.Starting the worker and calling tasks.Keeping track of tasks as they transition through different states, and inspecting return values. Step 1. 브로커를 ..
Spark 알아보기 - 제 3장 (장단점 / 함께사용하는 툴 / 사용 사례 / 번외, Storm) 목차제 3장Spark 의 장단점함께 사용하는 툴Spark 을 사용한 다른 서비스 사례번외) Storm, 파케이 etc Spark 장점1. 메모리 기반 → 속도특히 Spark 은 메모리 하둡 이라고도 불리는데, 기존의 하둡이 MapReduce 작업을 디스크 기반으로 수행하기 때문에 느려지는 성능을 메모리 기반으로 옮겨서 고속화 하고자 하는데서 출발했습니다.속도 비교 - 스파크의 메모리 내 데이터 엔진은 다중 스테이지 작업(스테이지 간에 다시 디스크에 상태를 써야하는)과 비교할 때 맵리듀스에 비해 최대 100배 더 빠릅니다. - 데이터가 메모리 내에 완전히 들어갈 수 없는 아파치 스파크 작업도 맵리듀스에 비해 약 10배 더 빠릅니다. - 서버에 메모리를 다는 경우가 많아지면서, 굳이 디스크를 사용하지 않고 ..
Spark 알아보기 - 제 2장 (각 데몬의 역할 Driver, Master, Worker) 목차제 2장각 데몬의 역할 (Driver / Master / Worker)각 데몬의 역할 (Driver, Master, Worker)Spark와 M/R 아키텍처의 차이점 그리고 Spark이 YARN에서 어떻게 동작하는지분산모드에서 Spark는 master/slave 구조로 이루어져 있다.master는 Driver, slave는 Worker/ExecutorApplicationsSpark는 M/R과 유사한 job 개념을 갖고 있지만 “application”이라는 higher-level construct가 있다.application can run multiple jobs, in sequence or in parallel.SparkContext = an instance of applicationM/R과는 다르게..
Spark 알아보기 - 제 1장 목차 제 1장Spark 이란?Spark 의 기능 / 라이브러리 / 병렬 처리 엔진 에 대하여RDD Spark 이란?범용적이고 빠른 빅데이터 연산 작업을 수행하도록 설계된 "분산 클러스터링 플랫폼"메모리 하둡이라고도 불립니다.기존의 하둡이 M/R 작업을 디스크 기반으로 수행하기 때문에 느려지는 성능을 메모리 기반으로 옮겨서 고속화 하고자 하는데서 출발했습니다.이 위에 MapReduce나, 스트리밍 처리등의 모듈을 추가로 올려 사용할 수 있습니다. 요즘은 대부분의 하둡 배포판에 스파크가 포함됩니다.Spark의 엔진 자체만 놓고 보면 클러스터 컴퓨팅을 하기 위한 프레임워크처럼 추상화, 일반화 되어있고 범용적입니다. 기능Map & Reduce (cf. Hadoop)Streaming 데이타 핸들링 (cf. Apa..

티스토리툴바