react (13) 썸네일형 리스트형 2020.07.24. * 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다. 2020.07.24 오늘의 목표 Delivery Helper 개발하기 동기 JS와 Redux에 대한 깊은 지식을 위해 오늘 Delivery Helper를 개발하면서 얻은 지식입니다. [React] Global Style 설정 [React] Map과 Filter를 사용하여 배열 다루기 Api에서 호출한 값들을 다루는 방법을 알려드리고 싶어서 글을 작성했습니다. Container + Presenter 패턴을 사용하시는 분에게 추천드립니다. styled-components를 사용하는 분들이 사용할 수 있는 Global Style을 설정해보셨으면 좋겠어서 글을 작성했습니다. 2020.07.24. 회고 오늘의 목표를 이루었는.. [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.. 2020.07.23. * 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다. 2020.07.23 오늘의 목표 Delivery Helper 개발하기 동기 JS와 Redux에 대한 깊은 지식을 위해 오늘 Delivery Helper를 개발하면서 얻은 지식입니다. [React] Redux + Saga, API호출 해보기 [React] Redux DevTools 사용하기 이번 프로젝트에서 Redux Saga를 도입했습니다. Redux Saga를 공부하면서 여러분에게 지식을 나누고 싶어, Api 호출 관련 글을 작성했습니다. 이제 Redux Saga에 입문하시는분들이 읽으셨으면 좋겠습니다😊 2020.07.23. 회고 오늘의 목표를 이루었는가? Delivery Helper 개발하기 2020.07.23... 2020.07.14. * 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다. 2020.07.14 오늘의 목표 simplecounter를 활용한 scorecounter 개발 완료하기 Bigstar1108 깃헙 레파지토리 Readme 파일들 정리 동기 class형 컴포넌트가 아닌 함수형 컴포넌트로 개발하고 싶어서 react hooks를 사용한 함수형 컴포넌트 개발에 익숙해지고 싶어서 React Hooks의 기본정보를 알기 위해서는 2020.07.08.과 2020.07.09. 게시글을 보시면 됩니다 😀 어제 scorecounter의 말도 안되는 오류를 접하고 난 후 오늘... 저는 오류를 해결하고 완성했습니다!🎉🎉 오예~ 오늘은 어제의 오류를 해결한 방법과 함께 오늘 코드를 작성하면서 새롭게 얻은.. 2020.07.13. * 아래의 글은 Do Your Best 프롤로그를 먼저 읽으신 후 읽으시기를 권장합니다. 2020.07.13 오늘의 목표 simplecounter를 활용한 scorecounter 개발하기 동기 class형 컴포넌트가 아닌 함수형 컴포넌트로 개발하고 싶어서 react hooks를 사용한 함수형 컴포넌트 개발에 익숙해지고 싶어서 다른 사람들이 포기 편하도록 Readme 파일 정리 React Hooks의 기본정보를 알기 위해서는 2020.07.08.과 2020.07.09. 게시글을 보시면 됩니다 😀 오늘 scorecounter 개발을 완료하고 싶었지만 말도 안되는 오류를 만나서 완성하지 못했다. 그 말도 안되는 오류와 함께 오늘 개발하면서 새롭게 배운 지식들을 적어보려고 한다! 일단 useState로 초기 값.. 이전 1 2 다음
