카테고리

[React+Rails] 타이핑 효과나는 텍스트 제작하기

현재 프로젝트에 속보를 알려주는 타이핑 효과가 나는 텍스트를 리액트 컴포넌트로 바꿔보려 합니다. 구글링을 해보니, 리액트 타이핑 효과를 내는 모듈이 많습니다. 그 중 react-typist 라는 패키지를 사용해보겠습니다. (Typist로만 감싸주면 애니메이션 효과가 나타나는 것이 간단해보여서 선택해봅니다) 1npm install react-typist --savecs npm을 통해 설치합니다. 1234567891011121314151617 속보 100 %> Colored by Color Scriptercs Rails view에서 직접 쿼리를 날려 받아와 작성 된 코드입니다. (지저분..) 해당 코드 외에도 typed.js를 초기화하는 자바스크립트가 존재합니다. 전부 삭제! 하고 1cs 컴포넌트 호출 단을..

[React+Rails] 주기적으로 업데이트 되는 위젯을 만들어보자

지난 번 Rails React 개발 환경을 마친 뒤, Jquery, Rails View, Html로 구성되어 있던 기존 프로젝트의 부분 부분을 변경해보고자 합니다. 가장 먼저 만만하게 잡힌 곳은, 바로 요 부분입니다. 기존에는 Rails view에서 Rails Model에 Query를 요청해서 표시를 했습니다. React로 변경하면, 얻는 이점은 - Rails는 철저하게 백엔드의 역활만 수행하도록 분리한다. (유지보수 측면)- 일정 시간이 지난 뒤 시세를 변경할 때 최소한의 리소스로 빠르고 간견할 코드로 업데이트가 가능하다.(Virtual Dom - 자세한 내용은 여기에)입니다. 일단 React에 대한 별다른 기본 지식이 없기 때문에 기능 구현을 하며 이해하고 정리해봅니다. 기존 코드의 경우 모델에 직접..

Rails + React + WebPack 환경 세팅 및 React 사용해보기

yarn add react react-dom react-prop-types react-router-dom semantic-ui-react react_ujs yarn add babel-core babel-loader babel-preset-env babel-preset-react babel-preset-stage-1 css-loader style-loader html-webpack-plugin webpack webpack-dev-server webpack-cli -D httgem 'webpacker' gem 'react-rails'$ bundle install $ rails webpacker:install # OR (on rails version < 5.0) rake webpacker:install [we..

구글플레이 귀하의 앱은 Android 광고 ID 사용 및 개발자 배포 계약의 4.8 조항을 위반하였습니다 해결방법

해당 이슈는, 구글 플레이 내 개인정보취급방침을 제출하지 않았을 때 앱이 삭제되는 부분이다. https://app-privacy-policy-generator.firebaseapp.com/해당 Generator를 이용하여 개인정보 취급방침을 생성한 후 웹페이지를 하나 제출하면 해결! 추가적으로, Youtube 채널, 혹은 동영상을 링크로 넣었을 경우 아래와 같이 유튜브 정책 위반으로 앱이 삭제된다. * 서버에 youtube link를 저장해서 가져올 경우엔 문제가 없는데 구글 플레이 APK 내부에 소스를 검사하면서 youtube링크가 발견되면 자동으로 삭제되는듯.

편의점 할인정보를 한눈에! 검색까지 "편의점 끝판왕"

몇년 전쯤엔가 만들었던 안드로이드 앱 '편의점 할인정보'를 간만에 제대로 업데이트 했습니다! 웹버전으로 편의점 끝판왕을 만나보실 수 있습니다 :) http://storeboss.co.kr/ 편의점 끝판왕의 첫번째 화면으로 접속하면, 인기 상품과 편의점 관련 커뮤니티 글, 그리고 상품 댓글등을 볼 수 있습니다. 편의점 끝판왕은, 세븐일레븐, GS25, 미니스톱, CU 4가지 편의점의 할인 상품들을 제공합니다. 1+1, 2+1, 증정, 할인 네가지 종류를 제공합니다. "마실걸 사러 집주변 GS25를 가야지!"라는 생각을 했을 때 좀 더 쉽게 찾기 위해, 상품의 타입도 제공합니다.전체, 생필용품, 음료, 음식, 과자, 아이스크림, 애견, 기타로 나누어 좀 더 쉽게 상품들을 찾을 수 있습니다. 반응형으로 만들어..

AWS(아마존) ubuntu 서버에 외장하드 연결하기

볼륨 추가를 합니다! ubuntu 접속 후 mount 명령어를 통해 외장하드 연결 확인 $ mount 혹은 $ lsblk $ df Filesystem 1K-blocks Used Available Use% Mounted on /dev/sda3 30832636 11993480 17249912 42% / none 4 0 4 0% /sys/fs/cgroup ... /dev/sda5 31457280 3948600 25396496 14% /home/bro3886/arch 마운트 해제시에는 $ umount [폴더 이름] 아마존에서 볼륨해제시에는 [볼륨] - [볼륨 분리] 시 ubuntu OS 에서 해제가 됨 볼륨 생성 후 [볼륨] - [볼륨 연결] 클릭하여 연결 볼륨 연결 후 $lsblk 로 새로 추가된 하드드라이브..

블로그에 글쓰고 돈벌자! "리캣(Recat)"

리캣이란 서비스가 오픈했습니다. '리워드를 주는 고양이'라는 의미의 '리캣', 어떤 서비스인지 알아볼게요 :) 리캣은 '마케팅은 사람이 중심이며, 사람들이 참여를 해야 하는데, 이 때 참여에 대한 부분에 대한 리워드를 주어 회사와 참여자 모두 윈윈하는 것을 목표'로 하는 서비스입니다. 이렇게 3가지 카테고리가 있습니다. '행사 후기'와 '블로그 참여' '메신저 참여'가 있네요. 현재는, 베타테스팅 중이라 2가지 주제가 있습니다! 참여방법은 어렵지 않아요~ 참여 신청하기를 누른 뒤, 설명을 읽고 글을 작성 한 뒤, 완료 신청하기를 누르면 쓴 글의 링크를 넣고, 첨부파일에는 블로그의 총 방문자 통계를 넣고 완료하면, 바로 3,000리캣이!! 현재 1리캣은 1원을 의미하네요 :) 신청이 완료되면, 홈페이지 상..

Ubuntu에 Swap memory 설정하기

sudo swapon -sfree -m 디스크 용량 살펴보기 df -h 스왑 파일 만들기 sudo fallocate -l 1G /swapfile ls -lh /swapfile -rw-r--r-- 1 root root 4.0G Apr 28 17:19 /swapfile 출력 확인 후, sudo chmod 600 /swapfile ls -lh /swapfile -rw------- 1 root root 4.0G Apr 28 17:19 /swapfile 로 변경 확인 후, sudo mkswap /swapfile sudo swapon /swapfile sudo swapon -s free -m 스왑메모리가 정상적으로 등록되어 있는지 확인한다. watch -n 5 free -m 으로 메모리 변경되는 부분을 확인할 수 ..