뉴스피드 팀 프로젝트

redux

사용하고 있는 state중 전역state로 관리하면 편할 것을 리덕스로 이식하는 작업을 진행.
feeds의 경우 현재 firebase내에 저장된 정보를 받아서 로컬 state로 선언된 feeds 내에 저장해서 사용하는 방식을 사용하고 있는데 feeds도 리덕스로 돌려야 할지는 좀더 관찰이 필요함.

이전 프로젝트 들에서 데이터 전체가 담긴 배열을 받아서 이런 저런 필터링 조건에 맞춰 filter() 메서드 등으로 필터링 한뒤 화면에 출력하는 것은 이미 시도해 본 방식이기에, 이번엔 새로운 방식을 경험하는 차원에서 필터링 조건을 서버에 보내고 해당 조건에 맞는 데이터만 가져오는 방식을 사용해 보고자 함.

위와 같은 이유로 feeds는 redux를 사용하지 않고 그때그때 서버에서 가져오는 방식을 사용하고 있는데 다른 팀원들이 작업한 것들을 전부 merge했을때 치명적인 문제가 생기거나 구현이 어려운 부분이 있다면 그때 feeds도 redux로 돌릴 예정.

과정

//configStore.js
import { createStore } from 'redux';
import { combineReducers } from 'redux';
import fetchConfig from 'redux/modules/fetchConfig';

const rootReducer = combineReducers({
  fetchConfig
});

const store = createStore(rootReducer);

export default store;





//fetchConfig.js
const initialState = { field: 'CVS', compare: '!=', value: '임시' };

//action types
const GET_ALL = 'fetch/GET_ALL';
const GET_GS = 'fetch/GET_GS';
const GET_CU = 'fetch/GET_CU';
const GET_SEVEN = 'fetch/GET_SEVEN';
const GET_EMART = 'fetch/GET_EMART';
const GET_BY_USER = 'fetch/GET_BY_USER';

//action creators
export const getAll = () => {
  return { type: GET_ALL };
};
export const getGS = () => {
  return { type: GET_GS };
};

export const getCU = () => {
  return { type: GET_CU };
};
export const getSeven = () => {
  return { type: GET_SEVEN };
};
export const getEmart = () => {
  return { type: GET_EMART };
};
export const getByUser = (uid) => {
  return { type: GET_BY_USER, payload: uid };
};

// 리듀서
const fetchConfig = (state = initialState, action) => {
  switch (action.type) {
    case GET_ALL:
      return { field: 'CVS', compare: '!=', value: '임시' };

    case GET_GS:
      return {
        field: 'CVS',
        compare: '==',
        value: 'GS'
      };

    case GET_SEVEN:
      return {
        field: 'CVS',
        compare: '==',
        value: '세븐일레븐'
      };
//            (중략)
    case GET_BY_USER:
      const userId = action.payload;
      return {
        field: 'user', 
        compare: '==',
        value: userId
      };

    default:
      return state;
  }
};

export default fetchConfig;

• 기존에 setChosenCVS state로 선택된 특정 편의점을 필터링 해서 조회할 수 있는 로직을 확장해서 fetch해오는 자료의 필터링 로직 전체를 제어할 수 있도록 함.

• fetchConfig 객체를 redux로 관리하는데, 서버에서 feeds 자료를 불러오는 컴포넌트에서 리덕스의 useSelector 메서드를 이용해 fetchConfig객체에 접근하고 이후 fetchConfig객체 내에 정의된 요소들을 이용해 query의 필드, 비교연산자, 비교값 등을 설정할 수 있도록 함.

      const q = query(collection(db, 'feeds'),
                where(fetchConfig.field, fetchConfig.compare, fetchConfig.value));

• 이후 myPage 등의 컴포넌트에서 로그인 되어있는 유저 본인이 작성한 피드만 조회하고자 하는 경우에도 사용 가능하도록 GET_BY_USER 액션 타입도 정의해둠. 내일 merge 해보고 활용 가능한지 확인할 예정.

연습문제

최대공약수와 최소공배수

출처) https://school.programmers.co.kr/learn/courses/30/lessons/12940

• 두 수를 입력받아 두 수의 최대공약수와 최소공배수를 반환하는 함수, solution을 완성해 보세요. 배열의 맨 앞에 최대공약수, 그다음 최소공배수를 넣어 반환하면 됩니다. 예를 들어 두 수 3, 12의 최대공약수는 3, 최소공배수는 12이므로 solution(3, 12)는 [3, 12]를 반환해야 합니다.

<내 풀이>

function solution(n, m) {
  let G=1;
    for (let i=2;i<=Math.min(n,m);i++)
        if(n%i===0 && m%i===0){
            G=i
        }
    return [G,n*m/G]

1. m과 n의 곱은 언제나 두수의 최소공배수와 최대공약수의 곱과 같다는 것을 이용, 최대공약수만 구하고 최소공배수는 우회적으로 구하는 것을 시도함.
2. 최대공약수를 구하기 위해 i를 2부터 시작해 m,n 둘중 작은수에 도달할까지 1씩 증가시킴. 증가시키는 와중에 n과 m 둘다 i로 나누어 떨어지는지 확인함.
3. 둘다 나누어 떨어진다면 공약수라는 의미이므로 G에 i를 할당.
4. 그렇게 찾아낸 가장 큰 i가 m,n의 최대공약수.
5. 이제 이렇게 찾은 최대공약수 G로 m*n을 나눈 결과가 그대로 최소공배수.