React- Google analytics e-commerce 관련 이벤트 달기 > e-commerce 관련 함수 react에 google analytics e-commerce관련한 docs도 많이 없을뿐더러, 적용에도 많은 애를 먹었어서 기록을 남긴다. function createTransaction(orderData) { const ga = ReactGA.ga(); return ( new Promise(resolve => { // create a timeout to always resolve. this is in case there is a problem // sending the items/transaction const timeout = setTimeout(() => { console.log('G..
Ruby on rails - 좋아요 기능 만들기 실습을 통해 좋아요 기능을 만들어 봅시당!> like 모델 만들기 rails g model like post:references user:referencesLike 모델을 만들어줍니다. 이모델은 post모델과 user모델을 참조하게 됩니다!그이유는 좋아요는 어떠한 user가 좋아요를 눌렀는지, 어떤 게시글에 눌렀는지를 알아야 하기 때문이죠! gem 'devise' bundle install rails g devise:install위와 같이 devise gem을 설치해줍시다. 참고로 이 실습은 post모델과 user모델이 있다는 가정하에 진행됩니다.-모델 관계 설정하기app/models 폴더를 보면 like.rb, post.rb user.rb 이 세가지를 찾..
Frontend Skills-특정 뷰의 body에만 layout적용하기 >어떤 뷰파일에는 background를 입히고, 다른 나머지 뷰파일에는 적용하고 싶지않을때가 있습니다. 그럴때 유용한 방법입니다.! 아래와 같은 코드를 특정 뷰에다가 넣어줍니다.저는 ruby on rails로 프로젝트를 진행하고 있어 알맞은 .html.erb 파일에 위의 코드를 아래와 같이 넣어주었습니다.//이렇게 추가해줍니다. //아래는 기존코드 Are you in CAU-likelion? 다음은 css파일에 추가할 코드입니다. body.login{ background: url('/assets/img/team-bg.jpg') no-repeat center center fixed; -webkit-background-size: co..
ES6-간단히 객체 생성하기, Destructuring array >간단히 객체 생성하기 function getObj(){ const name ="crong"; const getName=function(){ return name; } const setName = function(newname){ name=newname; } const printName=function(){ console.log(name); } return{ getName,setName } } var obj=getObj(); console.log(obj.getName());위와 같이 객체를 쉽게 생성할 수 있다. >Destructuring Array let data=["crong","honux","jk","jinny"]; //아래는 ..
React - 리덕스 미들웨어 리덕스를 사용 하면서 비동기 작업 (예: 네트워크 요청) 을 다룰 때는 미들웨어가 있어야 더욱 손쉽게 상태를 관리 할 수 있습니다. > 미들웨어? | 리덕스 미들웨어 -velopert님 블로그 참고 미들웨어는, 액션이 디스패치(dispatch) 되어서 리듀서에서 이를 처리하기전에 사전에 지정된 작업들을 설정합니다. 미들웨어를 액션과 리듀서 사이의 중간자라고 이해하시면 되겠습니다.리듀서가 액션을 처리하기전에, 미들웨어가 할 수있는 작업들은 여러가지가 있는데요. 단순히 전달받은 액션을 콘솔에 기록을 할 수도 있고, 전달받은 액션에 기반하여 액션을 아예 취소시켜버리거나, 다른 종류의 액션들을 추가적으로 디스패치 할 수도 있습니다.미들웨어에서 할 수 있는건 여러가지가 있습니다. 액..
Redux- 리덕스 총정리하기 > What is Redux? :redux는 flux 아키텍쳐를 편하게 사용할 수 있는 라이브러리입니다. ㅣflux 아키텍쳐를 한눈에 보여주는그림 -velopert님 블로그 참조 > Why we use Redux?:일단 react에서 데이터관리를 할때 redux 를 많이 씁니다. Q) 리덕스를 쓰지않고, 리액트 컴포넌트끼리 직접 데이터를 교류하면 되지 않나요? A)컴포넌트끼리 직접 데이터를 교류할 순 있지만, 코드의 규모가 커지면 구조가 정말 복잡해지고, 잘못하다간 스파게티 코드가 만들어 질 수 있습니다. ㅣ스파게티 코드 -velopert님 블로그 참조 Q)리액트는 단방향 parent-child 구조를 사용하는 것으로 아는데, 그 구조를 사용해 데이터를 교류하면 되지 않을까..
Frontend Skills - interval을 두고 글자가 바뀌는 효과 입히기example.html var text = ['a','b', 'c', 'd','e','f']; function callMe(){ var myText = document.getElementById('mytext'); var curIdx = text.indexOf(myText.innerHTML); myText.innerHTML = text[(curIdx+1)%text.length]; } setInterval(callMe,1000);example.js위와 같이 각각의 html파일,js파일에 넣어주면1초의 interval을 두고 div태그안의 텍스트가 바뀌는효과를 적용시킬수있습니다! >적용 예