YoonStudyNote

1. 하나의 애플리케이션엔 하나의 스토어가 있습니다. 2. 상태는 읽기전용 입니다. --> 즉 불변성을 지켜야 한다는겁니다. 3. 변화를 일으키는 함수 리듀서는 순수한 함수여야 합니다. --> 리듀서 함수는 이전 상태와, 액션 객체를 파라미터로 받습니다. 이전 상태는 절대 변경하지 않고, 변화를 일으킨 새로운 상태 객체를 만들어서 반환합니다. 똑같은 파라미터로 호출된 리듀서 함수는 언제나 똑같은 결과값을 반환해야만 합니다. 즉, 동일한 인풋이 있을때 동일한 아웃풋이 있어야 합니다.

1. Action type이 필수이지만, type 외에도 다른값을 설정할 수 있습니다. 즉 업데이트할때 어떻게 업데이트할지 정의하는 객체입니다. 2. 액션 생성함수(Action Creator) 3. Reducer 변화를 일으키는 함수로 2가지 파라미터를 가져옵니다. 4. Store 스토어는 현재앱의 상태와 Reducer가 들어있고 추가적으로 몇가지의 내장함수가 들어있습니다. 그 내장함수중에 하나가 dispatch입니다. 또한 subscribe 함수도 있습니다.

Redux를 생각보다 많이 사용합니다. 1. Context 쓰는거랑 무슨 차이점이 있을까요? --> 미들 웨어라는 기능이 있습니다. 특정 조건에 따라 액션이 무시되게 만들 수 있습니다. 액션이 디스패치 됐을 때 이를 수정해서 리듀서에게 전달되도록 할 수 있습니다. 특정 액션이 발생했을 때 이에 기반하여 다른 액션이 발생되도록 할 수 있습니다. 특정 액션이 발생했을 때 특정 자바스크립트 함수를 실행시킬 수 있습니다. 2. 유용한 함수와, Hooks connect useSelector useDispatch useStore 3. 기본적인 최적화가 이미 되어있습니다. 4. 하나의 커다란 상태가 됩니다. 모든 글로벌 상태를 하나의 객체 상태로 넣어서 사용하는것이 필수입니다. 5. DevTools라는 아주 유용한 ..

1. 비디오 폴더는 무조건 public 폴더 밑에 종속되어야한다. 2. src위치 설정해줄때는 비디오폴더가 어디 있던지 간에 앞에 경로위치 다 무시하고 "/videos/video-2.mp4" 라고 선언해야한다, ----> 즉, 만약 내가 있던 자바스크립트 파일에서 비디오 경로가 "../../videos/video-2.mp4"여도 무조건 "/videos/video-2.mp4"라고 선언해야한다.

developer.mozilla.org/ko/docs/Web/CSS/object-fit object-fit - CSS: Cascading Style Sheets | MDN CSS object-fit 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다. object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 developer.mozilla.org 이 사이트에 들어가서 확인해보세요. 우선 object-fit의 속성은 나 요소와 같은 대체 요소의 콘텐츠 크기를 어떤 방식으로 조절해 요소에 맞출 것인지 지정합니다. object-position 속성을 사용해 대체 요소 콘텐츠가 콘텐츠 박스 내에 위치할 지점을 바꿀 수 있습니다. 나..

CSS Viewport를 기준으로 한 단위가 4개 있습니다.(vh, vw, vmin, vmax) Viewport Height (vh) : viewport의 높이에 근거한다. 1vh는 viewport의 높이의 1%와 같다 Viewport Width (vw) : viewport의 폭에 근거한다. 1vw는 viewport의 넓이의 1%와 같다 Viewport Minimum (vmin) : viewport의 (높이와 너비 중) 작은 쪽의 치수에 기초로한다. viewport의 높이가 폭보다 작은 경우, 1vmin는 viewport의 높이의 1%에 해당한다. 마찬가지로 viewport의 폭이 높이보다 작은 경우, 1vmin는 viewport의 넓이의 1%와 같다 Viewport Maximum (vmax) : vie..

Link 컴포넌트 앱 내에서 다른 라우트로 이동 할 때에는, 일반 foo 형식으로 하면 안됩니다. 왜냐하면, 이렇게하면 새로고침을 해버리기 때문이지요. 새로고침을 하기 위해선, 리액트 라우터에 있는 Link 컴포넌트를 사용해야합니다. 이 컴포넌트를 사용하면 페이지를 새로 불러오는걸 막고, 원하는 라우트로 화면 전환을 해줍니다.

1. 아이콘 추가하는방법 yarn add styled-components react-router-dom react-icons VScode 터미널에서 이렇게 명령어를 쳐보세요. 2. 화살표함수를 제대로 쓰자 다음 화살표 함수를 보면 중괄호로 사용했습니다. 그러자, menuData.js에 있는 내용이 제대로 출력되지 않았습니다. 다음과 같이 소괄호로 사용해야지 menuData.js 내용이 제대로 출력된것을 볼 수 있습니다.