inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

173만명의 커뮤니티!! 함께 토론해봐요.

useSelector가 초기값만 읽고, 상태변화를 읽지못함

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요. 선생님 늦은 시간인데도 답변해주셔서 감사합니다(꾸벅) 선생님께서 말씀해주신대로 useSelector를 써봤는데요. useSelector가 초기값만 읽고, updateReducer에 의해 상태가 업데이트되면, 업데이트 된 값을 읽지 못합니다.... 1. console.log(title)이라고 썼는데, 아무것도 뜨지 않습니다 2. Modal 컴포넌트에 제목을 입력을 해도 상태 변화를 읽지를 못합니다. 어디서 잘못 된걸까요?? const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const id = useSelector((state)=> state.update.id); const title = useSelector((state)=> state.update.title) const content = useSelector((state)=> state.update.content); const isDone = useSelector((state)=> state.update.isDone) const handleCheck = (id) =>{ dispatch(checkBox(id)); }; console.log(title) return( <SeveralItemContainer> <TodoItemContainer key={id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{title}</div> <img onClick={ () => {handleCheck(id)}} className="noncheck" src = {isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{content}</div> </div> </TodoItemContainer> </SeveralItemContainer> ) }; export default TodoItem; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const rootReducer = combineReducers({ update: updateReducer, check: checkReducer, }); export default rootReducer; const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal;

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
정지은 댓글 1 좋아요 0 조회수 487

리덕스에서 스토어 부분 질문

미해결

Slack 클론 코딩[실시간 채팅 with React]

안녕하세요. 선생님 선생님 말씀대로 useSelector를 사용해 보려고, 로컬스토리지 관련 코드들은 삭제했습니다. 원하는 구현기능) 질문은 Modal 컴포넌트에서 리듀서에 의해 업데이트된 상태를, todoItem 컴포넌트로 가져와서 사용이 가능한가요? todoItem 컴포넌트로 가져와서 todoData에 집어넣고 싶습니다... 그래서 updateReducer에서 ADD_ITEM case를 읽을때 그때 그 상태를 todoItem 컴포넌트로 가져와서 사용이 하고 싶습니다. 질문) 1. 위에 기능을 useSelector만 알면 가능할까요? 2. 리덕스에 4단계 액션, 디스패치, 리듀서, 스토어 중 스토어 부분, 저장했다가 필요할때 꺼내쓰는 부분을 잘 모르겠어요. 어떤 추가적인 개념 공부가 필요할 까요? const Modal = ({onClick}) =>{ const [state, dispatch] = useReducer(updateReducer, initialState) const handleModalClick = (e) => { e.stopPropagation(); // 이벤트 버블링 막기 }; //사용자가 입력한 값을 추적하는 함수 const handleInputChange = (e) =>{ const {name, value} = e.target; dispatch({type: `UPDATE_${name.toUpperCase()}`, payload: value}) }; //클릭으로 적은 모든 내용을 한번에 전달 const addItem = () =>{ dispatch({type:'ADD_ITEM'}); }; return( <ModalBackGround onClick={onClick}> <ModalView onClick={handleModalClick} > <div className = "titleContainer"> <img className="dot" src = {dot} alt="icon"></img> <input value ={state.title} name = "title" className="title" placeholder="메모 제목" onChange={handleInputChange}></input> <img onClick={addItem} className="edit" src={edit} alt="icon"></img> </div> <div className="date"> <div className='일자'>일자</div> <input value ={state.startDate} name ="startDate" className ="start" placeholder="시작일" onChange={handleInputChange}></input> <div>~</div> <input value ={state.endDate} name= "endDate" className ="end" placeholder="종료일" onChange={handleInputChange}></input> </div> <div className='contentContainer'> <textarea value ={state.content} name ="content" className ="content" placeholder="메모" onChange={handleInputChange}> </textarea> </div> </ModalView> </ModalBackGround> ) }; export default Modal; export const updateReducer = (state=initialState, action)=>{ switch(action.type){ case 'UPDATE_TITLE': return{...state, title: action.payload}; case 'UPDATE_STARTDATE': return{...state, startDate: action.payload}; case 'UPDATE_ENDDATE': return{...state, endDate:action.payload}; case 'UPDATE_CONTENT': return {...state, content: action.payload}; case 'ADD_ITEM': return {...state, id: Number(state.id)+1} //여기서 todoItem을 바로 쓸 수 없다. state나 action관련된 변수만 넣어야 한다 // 배열은 가능하지만, 객체는 전개연산자(...)를 쓸 수 없다 default: return state; } }; const TodoItem = () =>{ const [state, dispatch] = useReducer(checkReducer, todoItem) const [todoData, setTodoData] = useState(todoItem); const handleCheck = (id) =>{ dispatch(checkBox(id)); }; return( <SeveralItemContainer> { todoData.map((item)=>{ return ( <TodoItemContainer key={item.id}> <TitleContainer> <img className ="dot" src={dot} alt="icon"></img> <div className="title">{item.title}</div> <img onClick={ () => {handleCheck(item.id)}} className="noncheck" src = {item.isDone ? check: noncheck} alt="icon"></img> </TitleContainer> <div className="contentcontainer"> <div className="content">{item.content}</div> </div> </TodoItemContainer> ) }) } </SeveralItemContainer> ) }; export default TodoItem;

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
정지은 댓글 1 좋아요 0 조회수 396

next.js 13버전에서 express.static('public')이 먹지 않습니다.

미해결

따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)

안녕하세요. 강의를 수강하면서 next 13으로 만들고 있습니다... 노드에서 이미지 정적 폴더를 생성하고, 이미지가 서버에 저장되게끔 하는거는 구현했는데, 아무리 해도 next에서 서버에 있는 이미지를 불러오지를 못합니다. 아래는 제가 시도해본 방법입니다. app.use('/', express.static(__dirname + '/public')); app.use(express.static('public')); express에서 클라이언트 단으로 던져주는 저 app.use 자체가 먹지 않고 있고 아무 에러도 나오지 않아서 너무 답답합니다 ㅠㅠ 어떻게 해야 될까요...?.......

  • react
  • node.js
  • postgresql
  • docker
  • typescript
  • 클론코딩
  • next.js
ha young lee 댓글 1 좋아요 0 조회수 566

함수로 리턴하는 경우와 stateless widget으로 리턴하는 경우의 차이점 문의

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

강의를 들으면서 궁금했던 사항 문의 드립니다. 질의 1. 함수로 정의할때 리턴값타입을 공통적으로 Widget으로 표시하는것과 리턴하는 특정 위젯 타입을 적어주는 것에 차이점이 무엇인가요? 질의 2. 아래와 같이 컬럼에 들어가는 Row 위젯을 함수로 정의하여 사용하는 경우와, Stateless 위젯으로 만들어서 사용하는 경우의 차이점이 무엇일까요?

  • flutter
  • 클론코딩
hyeon 댓글 1 좋아요 0 조회수 411

bottom_navigation 오류

미해결

하울의 안드로이드 인스타그램 클론 만들기

bottom_navigation.setOnNavigationItemSelectedListener()에서 에러가 발생합니다. bottom_navigation이 빨간색 에러로 발생하며 import 부분의 kotlinx.android .~ 에서도 android에서 에러가 발생합니다. activity_main 레이아웃에도 정확히 작성했는데 어떻게 해야할지 모르겠습니다..

  • android
  • kotlin
  • 클론코딩
이다민 댓글 1 좋아요 0 조회수 455

로그인 후 페이지가 뜨지 않습니다

미해결

Slack 클론 코딩[실시간 채팅 with React]

Throttling navigation to prevent the browser from hanging. See <URL>. Command line switch --disable-ipc-flooding-protection can be used to bypass the protection Throttling navigation to prevent the browser from hanging. See https://crbug.com/1038223 . Command line switch --disable-ipc-flooding-protection can be used to bypass the protection 계속 강의 잘 듣고 있었는데 며칠 전부터 이런 에러 메시지가 뜨면서 로그인해서 넘어가면 아무 화면도 뜨지 않습니다. git reset --hard로 이전 코드로 돌려놔봐도 전에는 잘 되던 코드도 지금 안됩니다.구글링해봐도 무슨 말인지 잘 모르겠는데 뭐가 문제일까요....

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
샤브샤브 댓글 1 좋아요 0 조회수 1578

scrollLoop 함수 질문

미해결

애플 웹사이트 인터랙션 클론!

const scrollLoop = () => { prevScroll = 0; // 스크롤값이 다시 0으로 시작하게 for (let i = 0; i < current; i++) { prevScroll += sceneInfo[i].scrollHeight; } console.log('prev', prevScroll) if (currentScroll > prevScroll + sceneInfo[current].scrollHeight) { current++; alert() } console.log('next', prevScroll) if (currentScroll < prevScroll) { current--; } }; 선생님 여기서 prevScroll에 for문으로 돌때 sceneInfo[i].scrollHeight; 여기서 이미 값을 더해줄텐데 왜 if (currentScroll > prevScroll) { current++; alert() } 조건문에 저렇게 하면 작동이 안돼나요 제가 이해를 잘못하고 있는지 ...

  • HTML/CSS
  • javascript
  • 웹-디자인
  • svg
  • 인터랙티브-웹
  • 클론코딩
uphoon 댓글 2 좋아요 0 조회수 497

roomdatabase 설치하면 에러 발생.

미해결

[2023 코틀린 강의 무료제공] 기초에서 수익 창출까지, 안드로이드 프로그래밍 A-Z

안녕하세요? roomdatabase 를 설치하면서 에러가 발생했는데 문제 해결을 위해서 노력을 했지만 지식이 없어서 그런지 해결을 못하고 있습니다. 수업 내용처럼 아래와 같이 설정하였는데 plugins { id 'com.android.application' id 'org.jetbrains.kotlin.android' id 'kotlin-kapt' } def room_version = "2.5.1" implementation "androidx.room:room-runtime:$room_version" // To use Kotlin annotation processing tool (kapt) kapt "androidx.room:room-compiler:$room_version" 이부분만 추가하면 에러가 뜹니다. id 'kotlin-kapt' kapt "androidx.room:room-compiler:$room_version" 아래의 메세지를 위주로 검색하여 이런 저런 방법을 찾아 봤지만 도저히 해결이 안되서 여기에 도움을 요청 합니다. 부디 해결 방법을 제시 해 주시면 감사하겠습니다. Caused by: org.gradle.api.GradleException: 'compileDebugJavaWithJavac' task (current target is 1.8) and 'kaptGenerateStubsDebugKotlin' task (current target is 17) jvm target compatibility should be set to the same Java version. Consider using JVM toolchain: https://kotl.in/gradle/jvm/toolchain

  • android
  • kotlin
  • 클론코딩
한선규 댓글 3 좋아요 0 조회수 1149

Column의 합을 불러오는 query작성

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

Model>schedule.dart 에 IntColumn get couponQty => integer()(); 를 추가 했구요. 저장할 때 마다 수량이 변경 되도록 해놨습니다. Future<int> getCouponQtySum() async{ return await customSelect('SELECT SUM(couponQty) AS total FROM schedules').map((row) => row.read<int>('total')).getSingle(); } 합을 구하는 query는 위와 같이 구성해보았습니다. 그런데 앱바에 GetIt을 써서 아래와 같이 불러와보니 에러만 반환 하더라구요 ㅠ 종일 혼자 고민해보다 올려 봅니다. appBar: AppBar( title: FutureBuilder<int>( future: GetIt.I<LocalDatabase>().getCouponQtySum(), builder: (context, snapshot) { if(snapshot.hasError){ print('에러'); return Text( '쿠폰 수량: 0' ); }

  • flutter
  • 클론코딩
Sun Kwak 댓글 1 좋아요 0 조회수 264

U&I 테마 적용해 보기에서 headline1 에 취소선 제거하는 방법

미해결

[LG유플러스] 앱 만들기 초급 과정 (Flutter)

안녕하세요.^^ 제목과 같이 U&I 테마 적용하고 있는데요 headline1 을 코딩하면 아래 사진과 같이 취소선이 텍스트 위에 표시됩니다. 이것을 없애려면 어떻게 하면 되나요?

  • flutter
  • 클론코딩
정유석 댓글 1 좋아요 0 조회수 358

마우스 Drag로 여러 줄 선택하는 방법

미해결

[LG유플러스] 앱 만들기 초급 과정 (Flutter)

안녕하세요. U&I 디자인 마무리 진행하고 있는데요 강의에서는 Column 영역 선택할 때 마우스로 드래그 하면 선택이 되지만 저는 박스 형태로 소스 영역이 선택이 되고 있습니다. 불편해서 이곳 저곳 알아보는데 방법을 모르겠어서요 마우스 드래그로 여러 라인을 선택해서 복사하려면 어떻게 해야 하나요? 어디 설정에서 바꾸면 될 것 같은데 구글링을 해 보아도 방법을 못 찾겠습니다.

  • flutter
  • 클론코딩
정유석 댓글 4 좋아요 0 조회수 784

웹뷰 라이브러리 적용 방법

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

안녕하세요 플러터를 배우고 싶어서 강의 초급, 중급 모두 구매한 수강생입니다. 강의를 듣다가 pub.dev에서 webview_flutter docs를 읽는데, 강사님이 제공해주신 소스코드의 WebVview( onWebViewCreated : ~ ) 이부분에서 onWebViewCreated는 나와있지 않더라구요. 이런 부분은 혹시 어떻게 찾아서 코드를 작성하신 건지 궁금합니다. 감사합니다.

  • flutter
  • 클론코딩
dhj100 댓글 1 좋아요 0 조회수 403

아이폰 에뮬레이터 생성방법

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

현재 사용 기기는 노트북에 윈도우를 설치 그위에 안드로이스튜디오를 설치하여 테스트용 에뮬레이터는 안드로이드 pixel XL API 33 으로 작업하고있습니다 그런데 수업을 진행할수록 아이폰에뮬이 필요하겟다 생각이 들어 문의드립니다 IOS 장비는 없으며 답변부탁드립니다 !

  • flutter
  • 클론코딩
염호경(hokki) 댓글 1 좋아요 0 조회수 1222

flutter doctor 실행 중 Xcode 오류

미해결

[LG유플러스] 앱 만들기 초급 과정 (Flutter)

이렇게 Xcode 에러가 떠서 CocoaPods를 install 하려고 했으나, 버전이 안맞는다는 메시지가 뜨는데요. 여기서부터 구글링을 해도 해결방법을 모르겠습니다.ㅜㅜ

  • flutter
  • 클론코딩
요키 댓글 1 좋아요 0 조회수 505

Build Fail - Could not resolve

미해결

[LG유플러스] 앱 만들기 초급 과정 (Flutter)

Android Studio에서 'hello_world' 프로젝트를 생성하고, Device를 실행시켜 놓은 상태에서 초록색 'Run' 버튼을 눌렀습니다. 아래 그림과 같이 Count not resolve ~~~ 메시지가 발생하며, Build Fail이 발생합니다. build.gradle에서 kotlin version을 최신 버전으로 1.8.20으로 변경시에도 메시지는 동일합니다. [에러 메시지 출력 문구] A problem occurred configuring root project 'android'. > Could not resolve all files for configuration ':classpath'. > Could not resolve org.jetbrains.kotlin:kotlin-gradle-plugin:1.7.10. ~~~~~~ [build.gradle 및 에러 메시지 출력 화면]

  • flutter
  • 클론코딩
진호준 댓글 1 좋아요 0 조회수 309

1개 파일에 위젯 수에 대한 질문

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

강의를 보다 보면 한개의 파일안에 여러개의 StateLess위젯이나 StateFull 위젯을 작성해서 사용하는 경우도 있고, 별도의 dart파일을 생성해서 정의하는 경우도 있던데, 기준이 있을까요?

  • flutter
  • 클론코딩
hyeon 댓글 1 좋아요 0 조회수 342

초기 세팅이게 맞는건가요?

해결됨

Slack 클론 코딩[실시간 채팅 with React]

알려주신대로 세팅을 해봤는데, 이게 맞는건가요? 강의에 보이는 선생님 세팅과 뭔가 다른것 같아서요 ㅜ 첫번째 사진은 폴더를 펼치지 않은것, 나머지 사진은 폴더를 모두 열어제낀것 입니다 이 상태로 다음 강의 진행해도 문제없을까요?

  • react
  • 웹팩
  • typescript
  • socket.io
  • babel
  • 클론코딩
정지은 댓글 1 좋아요 0 조회수 642

맥북 셋팅 중 flutter doctor - Xcode가 노란색으로 보입니다.

미해결

[LG유플러스] 앱 만들기 초급 과정 (Flutter)

위와 같이 Xcode만 초록색으로 보이지 않아, 위 링크의 가이드대로 진행하였으나 쓰기 권한이 없다는 메세지가 나오며 진행되지 않습니다.

  • flutter
  • 클론코딩
정은지 댓글 1 좋아요 0 조회수 409

아이폰 시뮬레이터를 안드로이드 스튜디오 보다 위로 띄우는 법

미해결

[코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!

강사님 안녕하세요. 강의보면 아이폰 시뮬레이터가 항상 안드로이드 스튜디오 보다 화면 위로 올라와있는데, 이 부분 어떻게 설정하는 거인지 알 수 있을까요?

  • flutter
  • 클론코딩
보로미오 댓글 1 좋아요 0 조회수 651

인기 태그

인프런 TOP Writers

주간 인기글