Webpack - 웹팩 환경 세팅하기 | 시작하기에 앞서, create-react-app 명령어로 리액트 프로젝트를 만들면 자동으로 웹팩 설정이 잡혀서 프로젝트가 만들어져서, 웹팩 관련한 설정을 알기가 쉽지 않다. 예전에는 create-react-app이 없을때는 리액트 프로젝트를 하기위해 웹팩 설정을 일일히 다해줬었다고 한다. 웹팩 관련한 설정은 어떤것이 있는지, 또 웹팩에 대해 더 상세히 파헤쳐보고자 직접 환경을 세팅해 보고 creact-react-app으로 만든 프로젝트를 eject 시켜 비교해보자. http://jusungpark.tistory.com/52 참고 | 프로젝트 시작하기예제 프로젝트를 시작하기에 앞서 package.json 파일을 먼저 만들어준다.package.json 파일은 내가 만..
Webpack - 웹팩(Webpack) http://blog.jeonghwan.net/js/2017/05/15/webpack.html 참고 https://hjlog.me/post/117 참고 | 들어가기전, 리액트를 시작한지 얼마 되지 않아서, create react app 명령어 하나면 웹팩관련설정이나 관련한 설정이 다 된 상태로 리액트 프로젝트가 만들어지기 때문에 웹팩에 대해서 깊이 알지 못했었다. 프론트엔드 개발자라면, 필수적으로 알아야 하는 개념이기 때문에 학습해 보았다. | 웹팩이란? 웹팩이란 것에 대해서 일단 어떤것이기 알기위해 검색해서 여기저기 블로그를 찾아다니며 그 개념에 대해서 찾아 보았다. 그는 아래와 같다. Webpack은 모듈 번들러로서, 큰 파일을 서로간의 종속성을 갖는 여러 작은..
React -redux thunk, redux saga >reudx-saga에 들어가기에 앞서, |redux-thunk란? redux-saga를 적용시키기 전에 redux-thunk를 먼저 사용해봤다면, 왜 redux-saga를 써야하는지 더 쉽게 파악할 수 있으므로, 시간이 있다면 간단히라도 학습하길 바란다. 아래에서 간단히 소개하겠다. :가장 간단히 설명하자면, 이 미들웨어는 객체 대신 함수를 생성하는 액션 생성함수를 작성 할 수 있게 해준다. 리덕스에서는 기본적으로는 액션 객체를 디스패치한다.function increment() { return { type: INCREMENT_COUNTER }; }예전에는 액션생성함수에서 위와 같은 type을 가지는 객체를 생성해 줬었다면 function incr..
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..
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..
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태그안의 텍스트가 바뀌는효과를 적용시킬수있습니다! >적용 예