옛글/Frontend

MAC Node version 변경하기

$ brew unlink node 바꾸고싶은 버전이 10.x라면, $ brew install node@10 $ brew link node@10 --force

[React+Rails] 모델의 Index 페이지를 React로 만들어보자

기존에 Partial을 사용하여 Rails에서 모델의 Index의 list_item을 만들 때에는, 123 Colored by Color Scriptercs 이렇게 사용을 하던 부분을, React로 바꾸고자 합니다. 여기서 고민이 생기는데, 해당 세줄을 통으로 1cs 이렇게 바꿀 것인가.. 123 Colored by Color Scriptercs 이렇게 바꿀 것인가.. 같은 Article 모델이지만 페이지가 뉴스, 주요뉴스, 해외뉴스 등 나뉘어져 있기 때문에, 재사용성을 고려하면 통으로 Article 리스트를 React component로 만드는 것보다, 리스트 아이템 한개씩 Component로 만드는 것이 나을 듯 합니다. 혹여나 해서 이리저리 구글링을 해보니, 컴포넌트 여러개를 사용하는 것에 대한 메..

[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..