23.06.23
1. react ( to do lsit lv.2 ) 개인 과제 해설
같은 의미 ...
if (title === “” || content === “”) === if (!title || !content)컴포넌트들과 Redux 간의 directory 구조
1. Prop Drilling을 방지하고자 중앙 데이터 관리소를 통해 어느 컴포넌트던지 간에 데이터를 접근할 수 있게 하기 위해 사용하는 '리덕스'
src 폴더
- App.jsx : (1) 리듀서 안에 있는 state값에 접근해서 사용하기 위해선 index.js에 주입시켜야 함
(2) index.js에서 <App />이라는 컴포넌트를 <Provider store={store} /> 라는
(react-redux 안에 있는) 속성으로 변경해주자 = Provider에 의해 store를 사용할 수 있음
redux 폴더
config 폴더
- configStore.js : Store를 설정하기 위한 파일
store를 만들기 위해선 store 내부에 들어갈 리듀서들(= 모듈들)이 필요한데
이 리듀서들을 한데 모을 rootReducer 필요함 -> combineReducers({만든 객체}) 사용
그리고 store를 만듦 -> createStore(rootReducer)
modules 폴더 : 이 내부에 있는 .js 파일에서 만든 리듀서를 configStore를 통해 다른 컴포넌트들에서 사용할 수 있음
- todos.js : 리듀서가 들어있는 파일
action(type, payload)가 들어있는 파일 = action을 지정해서 이렇게 해줘! 라고 보내면 그렇게 해줌
2. 홈과 상세페이지 간의 이동
: (1) 프로젝트에 적용하기 위해선 App.jsx에 주입시켜야 함
(2) functino App() { <Router /> } 라고 작성해주면 됨
shared 폴더
- Router.jsx
pages 폴더
- Home.jsx : <Form /> <List />
- Detail.jsx : useParams() 훅을 사용하여 해당 링크의 파라미터를 가져올 수 있음
useNavigate() 훅을 사용하여 이전 페이지로 이동할 수 있음
* uuid()는 렌더링될 때마다 갱신됨
uuid() 대신 shortid.generate() 사용
3. UI 꾸며주기
components 폴더
todos 폴더
- Form.jsx : useSelector((state)=>{state.todos})라는 훅을 사용하여 todos.js에 있는 리듀서를 가져옴
useDispatch() 훅을 사용하여 action을 받아오냐 보내냐 ?????????
- List.jsx : "
<Link to={/id} /> 를 사용하여 해당 상세페이지로 넘어가게 도와줌
ui 폴더
- Header.jsx
2. Firebase
서비스형 백엔드 BaaS(Backend as a Service) : Baas를 사용하면 개발자는 애플리케이션을 구축하거나 유지 관리할 필요 없이, 애플리케이션의 프런트엔드에 집중하고 백엔드 서비스를 활용할 수 있다.
createUserWithEmailAndPassword() 함수는 비동기적으로 작동, promise를 반환
그러므로 then과 catch 메서드를 통해서 각각 회원가입이 성공했을 때, 그리고 실패했을 때의 처리 로직을 구현할 수 있다.
...
