프론트엔드/React (5) 썸네일형 리스트형 [React] Chrome에서 video tag autoplay 오류 해결 안녕하세요, 황대성입니다! 이 포스팅은 다음과 같은 순서로 진행됩니다. 목차 발생한 오류 해결 방법 발생한 오류 영상을 자동으로 재생하기 위해 video tag에 autoplay를 준 코드를 작성하였다. 이렇게 코드를 작성해서 다양한 환경에서 테스트를 해보았다. 사파리, 엣지, 파이어폭스에서 정상적으로 잘 작동되었다. 하지만 Chrome(크롬) 브라우저에서만 자동으로 재생이 되지 않았다. 해결 방법 재생하려는 비디오를 음소거하거나, 재생하려는 비디오의 음량이 0이여야합니다. 그래서 위의 코드를 아래와 같이 변경하였습니다. 해결 방법은 굉장히 간단하지만, 원인을 모르면 정말 답답한 오류라서 포스팅 해보았습니다. 모두 즐코합시다~ 참고한 사이트 video 태그 autoplay 재생이 안될때 (Chrome /.. [React] Map과 Filter를 사용하여 배열 다루기 안녕하세요 황대성입니다😊 이번 글에서는 DeliveryHelper를 개발하면서 공부한 React에서 map과 filter 메서드를 사용하여 배열을 다루는 법을 알아보겠습니다. 일단 먼저 map메서드부터 알아보겠습니다. map() 메서드는 배열 내의 모든 요소 각각에 대하여, 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환합니다. 말로는 헷갈릴 수 있지만 예제를 보고 따라 하시면 확실하게 이해하실 수 있습니다. 이제 예시 코드를 봅시다. const array1 = [1, 4, 9, 16]; // pass a function to map const map1 = array1.map(x => x * 2); console.log(map1); // expected output: Array [2, 8, 18, .. [React] Global Style 설정 안녕하세요 황대성입니다😊 이번 글에서는 styled-components와 styled-reset을 사용하여 Global Style 설정 방법을 알아보겠습니다. 사용 방법도 굉장히 쉽고, 한 번 설정해놓으면 효율적인 코드를 작성 할 수 있습니다. 여러분들도 한 번 사용해보셨으면 좋겠습니다. 제일 먼저 초기 세팅을 해줍시다. css 초기화를 위한 styled-reset 설치 createGlobalStyle을 사용하기 위한 styled-components 설치 npm install styled-reset styled-components //or yarn add styled-reset styled-components 이제 실제로 사용해봅시다. styled-components는 local로 동작하기 때문에 Glo.. [React] Redux DevTools 사용하기 안녕하세요, 황대성입니다😁 오늘은 Redux를 조금 더 효율적으로 관리할 수 있는 Chrome 확장 프로그램을 사용해봅시다. 따라하기 굉장히 쉬우니 여러분들도 한 번 사용해보셨으면 좋겠습니다. 제일 처음으로 크롭 앱에서 Redux DevTools를 검색해서 설치합니다. 자신의 프로젝트에서 store를 생성하는 코드에 Redux Devtools Extension을 추가합니다. src/index.js const store = createStore( rootReducer, compose( applyMiddleware(sagaMiddleware), window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__() ) ); 이렇게 하면 Red.. [React] Redux + Saga, API호출 해보기 * 본 글은 Redux와 React에 대한 기본 지식이 필요합니다 사이드 프로젝트로 택배 조회 서비스를 개발하고 있습니다. 이번 프로젝트에 처음으로 Redux Saga를 도입했습니다. Redux Saga를 사용한 Api 호출을 알려드리고 싶어서 글을 작성합니다. 저는 Delivery Tracker Open Api를 사용했습니다. 목차 기본 세팅 action 작성 reducer 작성 saga 작성 store, middleware 세팅 실제 코드에서 사용해보기 기본 세팅을 해줍시다. Redux와 Redux Saga를 설치합니다. npm install redux redux-saga // or yarn add redux redux-saga 설치를 한 후 action, reducer, saga파일을 작성할 mod.. 이전 1 다음
