69,300원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결실전 리액트 프로그래밍
create-react-app 관련
npx create-react-app cra-test 로 생성을 하였는데 저는 serviceWorker.js는 없고 reportWebVitals.js파일이 생성이 되었습니다 버전이 문제일까요?? 아니면 크게 상관이 없나요? 혹시나 해서 질문을 드립니다
- 미해결실전 리액트 프로그래밍
리덕스 사가의 필요성
export async function addToCart (id) { const body = {id}; const request =await Axios.post(`${USER_SERVER}/addToCart`,body) .then(response=>response.data); return { type :ADD_TO_CART, payload :request } } 안녕하세요 강사님! 위의 코드처럼 actions.js에서 서버와 통신을 하면 비동기 통신이 끝난다고 생각이 드는데요. 이 결과를 redux에 넘겨서 새로운 state를 반환하면 redux-saga나 redux-thunk가 필요없는 게 아닐까 하는 궁금증이 생겼습니다. 이런 방식이 saga를 쓰는 것에 비해 단점이 있어서 안 쓰는건지, 아니면 action객체는 비동기 통신을 해서는 안되서 saga를 사용하는 건지가 궁금합니다. 항상 가려운 부분을 시원히 긁어주셔서 감사합니다.
- 해결됨실전 리액트 프로그래밍
ref 관련 질문있습니다!
<input ref={ref => ref && setText(INITIAL_TEXT)}>라는 코드에서 ref && setText(INITIAL_TEXT) ref 가 <input> 객체를 의미하는 건 알겠는데 이게 어떤 의미고 어떻게 작동하는건지 쉽게 와닿지가 않아서 설명 부탁드려요!
- 해결됨실전 리액트 프로그래밍
immer 패키지 없이 createReducer함수 작성 문의
import { createStore } from "redux"; import { createReducer } from "./createReducer"; export default function Chapter0603() { return <div>실전 리액트</div>; } const INITIAL_STATE = { value: 0 }; const reducer = createReducer(INITIAL_STATE, { INCREMENT: state => (state.value += 1), }); const store = createStore(reducer); let prevState; // store.dispatch 를 호출하여 액션을 발생시켰을 때 // 액션이 끝이나면 store.subscribe 함수가 호출이 된다. store.subscribe(() => { const state = store.getState(); if (state === prevState) { console.log('상탯값 같음'); } else { console.log('상탯값 변경됨'); } prevState = state; }); store.dispatch({ type: 'INCREMENT' }); store.dispatch({ type: 'OTHER_ACTION' }); store.dispatch({ type: 'INCREMENT' });import produce from "immer"; export function createReducer(initialState, handlerMap) { return function (state = initialState, action) { return produce(state, draft => { const handler = handlerMap[action.type]; if (handler) { handler(draft, action); } }); }; };createReducer에서 immer 패키지 사용해서 불변객체로 리턴해주도록 하잖아요.immer 이용하지않는 createReducer를 만들려면 어떻게 해야할까요?그럴려면 직접 불변객체를 만들어줘야하는데, INCREMENT: state => state.value += 1 이 부분을createReducer로 넘겨준 다음에 함수로써 실행하게 하는 부분을 만들지 못하겠네요.
- 미해결실전 리액트 프로그래밍
rootSaga 문의
강사님 안녕하세요. 공부하다가 문의드릴 내용이 생각나서 글 남기고 갑니다. rootSaga 에 'all' effects 를 이용해서 saga 함수들을 모두 등록을 해주고 있는데요. 예를 들어 화면이 1000개인 시스템이 있고, 각 화면마다 Saga 함수가 하나씩 있다고 가정하면 'all' 안에 1000개의 saga 함수가 등록되게 될텐데요.. 이렇게 많은 saga 함수들이 action 을 대기하고 있어도 브라우저에 별 영향이 없는지 궁금합니다. 그리고 rootSaga 에서 1000개의 saga 함수를 등록하려면 라인이 너무 많아질텐데 이렇게 많아지면 단위를 쪼개서 다시 한번 묶어주는 식으로 관리하면 되는 것일까요?
- 미해결실전 리액트 프로그래밍
filter에서 index가 todo객체의 id에 mapping 되는 이유가 궁금합니다 !
잘 이해한 것인지 모르겠지만, filter의 (_,index)는 결국 todoList의 요소 하나하나인 todo 객체를 의미하는데 index가 todo객체의 id에 맵핑이 어떻게 되는건가요 !?!?
- 해결됨실전 리액트 프로그래밍
useEffect 실전 활용법2 부분 질문
끝에 첨부한 코드로 실행하면 작동은 잘 됩니다.window.addEventListener('click', () => { onClickRef.current();});문제는 강의에 나오는 코드인 위 코드로 작성하면 removeEventListener를 반환 해주더라도계속해서 이벤트가 삭제되지 않고 클릭할 때마다 Listener가 계속 생성되면서Count 가 몇 배로 불어나는 버그가 생깁니다.addEventListener에서 화살표함수를 사용하여 OnClickRef.current(); 를 호출해주는이유가 있나요?물론 removeEventListener없이 화살표 함수로 eventListener 를 실행하여도의존성 배열부분에 빈배열로 남기면 당연히 작동은 잘 합니다.그런데 보통 removeEventListener 를 리턴해주는 것이 정석인 것 같은데화살표함수로 호출한 eventListener는 removeEventListener로 제거가 안되더라구요.별거 아닌 코드인데 원인을 모르니 답답하네요.그리고 제가 작성한 코드에서도 이 부분을 ref객체를 useEffect 내에서 수정하지 않으면 문제가 생기는데 왜 그런지 모르겠네요..강의에서 설명해주신 바로는 useEffect 내에서 ref객체를 수정하는 이유는 이후에 있을 concurrent mode로 실행될 때를 대비해 사용하는 것이고,concurrent mode로 실행하지 않을 시에는 문제가 생기지 않을 것이다라고 하셨는데,Component 함수에서 직접 수정 시엔 원인 모를 문제로 웹이 다운 되어버립니다. 느낌상 어떤 부분이 지나치게 렌더링이 되면서 다운 되는 느낌인데 뭔지 모르겠습니다.왜 이런 현상이 일어나는지 알 수 있을까요?import { useState } from "react"; import MyComponent from "./components/MyComponent"; function App() { const [count, setCount] = useState(0); function onClick() { setCount(count + 1); } return ( <div> <MyComponent onClick={onClick}/> <div>{count}</div> </div> ); } export default App;import { useEffect, useRef } from "react"; export default function MyComponent({ onClick }) { const onClickRef = useRef(); useEffect(() => { onClickRef.current = onClick; }); useEffect(() => { window.addEventListener('click', onClickRef.current); return () => window.removeEventListener('click', onClickRef.current); }); return ( <div>테스트</div> ); }
- 미해결실전 리액트 프로그래밍
React, ReactDOM
여담이지만 extension을 통해 확인한 모듈의 크기가 강사님의 파일크기와 왜이렇게 크게 차이가 나는지 여쭤봐도 될까요 !?!? 두개다 약 3배 차이가 나네요 ! ...
- 미해결실전 리액트 프로그래밍
한줄로 길게 되어 있는 코드를 어떻게 정렬시킬 수 있는지 궁금합니다.
6:02에 한줄로 길게 되어 있는데 6:06 코드가 정렬되어서 어떤 단축키인지 궁금합니다.
- 미해결실전 리액트 프로그래밍
HTTPS=true && npm start 하고나서 &&부분이 오류가 뜹니다.
&&부분 때문에 HTTPS로 실행이 안됩니다. PS E:\in\hello-world\cra-test> HTTPS=true && npm start 위치 줄:1 문자:12 + HTTPS=true && npm start + ~~ '&&' 토큰은 이 버전에서 올바른 문 구분 기호가 아닙니다. + CategoryInfo : ParserError: (:) [], ParentContainsErrorRecordException + FullyQualifiedErrorId : InvalidEndOfLine
- 미해결실전 리액트 프로그래밍
setState 비동기 처리관련질문입니다.
제가 setState가 비동기처리이면서 배치이다 라는것을 보면서 궁금한 점이생겼는데요.. onAdd함수를 보면 currentId를 1증가시키고, todo변수에 값을 할당한뒤 setTodoList에 값을 넣어서 렌더링하는 순서인데요. 만약에 동기처리처럼 onAdd버튼을 클릭시 currentId에 1을 증가한후, 그값을 todo에 넣은뒤 그 값을 setTodoList에 반영 하고 싶다고면 어떻게 해야할까요?
- 미해결실전 리액트 프로그래밍
TagList.js 컴포넌트는 언제 만든건가요??
이전 동영상에서도 저 컴포넌트의 세부 코드를 작성하는 내용이 없었는데, 이번 동영상에서는 이미 완성이 되어있던데 이건 언제 만든건지요..??
- 미해결실전 리액트 프로그래밍
4분 6초경에
template literal 부분은 쉼표('')로 감싸는게 아닙니다. 이거 역따옴표(``) 쓰셔야합니다.. 다른분들은 저처럼 실수하지 않길 바라는 마음에서 공유합니다 ex) `${Style.button} ${Style.big}` (ㅇ) '${Style.button} ${Style.big}' (x)
- 해결됨실전 리액트 프로그래밍
CSS 작성 방법에 관해서
강의 내에서 여러 css 작성 방법을 소개해주셔서각각의 장단점은 잘 알게되었습니다. 결국엔 회사 성향이라든지 개발자 개인의 취향에 따라 작성 방법 선택 기준이 나뉘어 질 것 같은데요.그래도 대부분 현업에서 선호하는 css 작성 방식이 있을 것 같은데 추천 해주실 수 있으신가요?추천 해주시는 쪽으로 좀 더 사용해보면서 익숙해져보려 합니다.
- 미해결실전 리액트 프로그래밍
처음에 CSS 파일 작성할때
create-react-app으로 만들어서 진행하는거 맞죠? 그리고 src 파일 원래 있던 것 중에서 이름하고 내용 바꾸는 식으로 하신건가요?
- 실전 리액트 프로그래밍
13분 19초 경에 보시면
삭제된 글입니다
- 미해결실전 리액트 프로그래밍
Property 'search' does not exist on type 'DefaultRootState'.
일단 기능 자체는 잘작동합니다. 데브툴즈에서도 state 입력되는 것 확인했구요 다만 useSelector에서 state의 search가 속성으로 있다는 것을 인식을 못하는것 같습니다. useSelector구문 위에 // @ts-ignore를 추가하거나 아님 react-redux의 index.d.ts의 DefaultRootState를 수정해서 멤버를 수정해야 안뜨는데 왜 강사님 화면에서는 안뜨는데 저는 저런 에러 로그가 뜨는건지 신경이 쓰입니다.
- 미해결실전 리액트 프로그래밍
13분 8초 경에
위에서 import data from './data.json'; 이걸 지우는 이유가 있으신가요? 실제로 지우지 않고 진행하면 작동이 안되긴하는데요. 왜 글씨도 투명해지고 있으면 작동이 안되는지 아세요??
- 미해결실전 리액트 프로그래밍
7분 26초 때에서요
7분 26초 때에서요 npm install @babel/core @babel/cli @babel/preset-react 하니까 node_modules 폴더가 생성되는데 동영상에서는 생성이 안되네요. 무슨 문제가 있는건가요?
- 미해결실전 리액트 프로그래밍
caution.js 렌더링 확인 좀 부탁드립니다.
import React, { createContext, useState, useContext } from "react"; const UserConText = createContext({ username: "unknown", age: 0 }); export default function App() { const [user, setUser] = useState({ username: "마이크", age: 23 }); const [count, setCount] = useState(0); console.log("App render"); return ( <div> <UserConText.Provider value={user}> <Profile /> <button onClick={() => setCount(count + 1)}>증가</button> </UserConText.Provider> </div> ); } const Profile = React.memo(function () { console.log("Profile render"); return ( <div> <Greeting /> </div> ); }); function Greeting() { console.log("Greeting render"); const { username } = useContext(UserConText); return <p>{`${username}님 안녕하세요`}</p>; }