📗 진행한 공부 📗
- 알고리즘 탐험반 문제
- 개인과제 해설 영상 참고 후 과제 재제출
알고리즘 문제
주어진 문자열을 반전시키시오. 문자열의 각 단어는 그대로 두고 단어의 순서만 반전시키시오. 단, reverse()를 사용하면 안 됨
예시
입력: "the sky is blue"
출력: "blue is sky the"
입력: "hello world"
출력: "world hello"문제 풀이
function reverseWords(s) {
// s를 배열로 만들어줌
const words = s.split(" ");
// reduce 메서드 사용해서 배열을 역순으로 더해줌 (초기값은 빈 배열)
const reversed = words.reduce((arr, cur) => [cur,...arr], []);
// join 메서드로 배열을 다시 문자열로 만듬
return reversed.join(" ");
}다른 분들의 답변을 보니 reduce()를 사용하는 것 외에도 forEach(), for문을 통한 push 등등 여러가지 방법으로 푸는 법도 배웠다.
개인과제 재제출
개인과제 해설 영상을 보고 context를 통한 전역 상태 관리부터 시작했다
Context를 이용한 전역 상태 관리
context 파일을 만들고 그 안에 EveryContext 컴포넌트를 만들어준 뒤, EveryContext.Provider value = {} 안에다가 다른 컴포넌트에서 쓸 State들을 전부 적어줬다.
그 후, State가 필요한 컴포넌트 내부에서 EveryContext를 import하고 구조분해할당을 사용해 const {} = useContext(EveryContext); 로 State 값들을 넘겨줬다.
Redux를 이용한 전역 상태 관리
일단 Context 에서 Redux 로 리팩토링을 하기엔 Context 오류 + Redux 오류가 같이 나오게 된다면 너무 복잡하기도 하고 힘들 거 같아서
따로 레포지토리에서 props-drilling 브랜치만 clone 해왔다.
그 후, src 폴더 내에 redux 폴더를 만들고 그 안에 store.js와 slices 폴더를 만들어서 폴더 내부에 expensesSlice.js를 만들어줬다.
store.js
expensesSlice.js
Add 코드 수정
dispatch를 사용해 수정했고, payload로 newList를 넣어줌
Edit 코드 수정
위와 동일함
Delete 코드 수정
payload로 id를 넣어줌
이렇게 해서 과제 해설 영상을 참고하면서 context를 통한 리팩토링, redux를 통한 리팩토링을 경험해봤는데, 솔직히 context는 강의 보니깐 착착 손에 달라붙고 이해하기도 쉬웠는데 redux는 해설 영상 보면서 따라해도 아직은 나에게 너무 어렵기만 하고, 강의대로 잘 따라하고 있는 건지도 감이 안 잡힌다..
그래도 context 하나라도 감 잡은 거니깐 완전 초럭키비키자나?
