안녕하세요 선생님 강의 보면서 똑같이 코드를 입력했는데그 이후에 새로고침 하고 체크박스를 누르니까 이런 오류가 발생하네요혹시 무슨 오류인지 알 수 있을까요?

애니메이션 관련해서 깊이 고민해보지 못한 부분(디테일)들을 발견할 수 있어서 의미있는 강의 였습니다.  강의에서 "item3" classname 을 적용하는 과정 중 얻은 인사이트는 컨텐츠 사이즈에 따라 height가 변경되는 애니메이션을 적용할 경우, 닫히는 아코디언 요소와 열리는 아코디언 요소가 이상하게 동작한다는 내용을 다루셨는데 저도 이상하는 느낌은 들었지만 정확한 원인을 모르겠네요.transition-duration:0.3s 은 같기 때문에 같이 닫히는게 동시에 닫히고 있는게 맞는데 왜 이상하게 느껴질까요?"ease" 가 그런 느낌을 주는 원인이 아닐까하고 그냥 넘어갈까 싶은데 혹시나 모르는 부분이 있을까 질문 남겨봅니다.:)

동영상강의에서는 bootstraplink rel에 head 쪽에 있는데선생님의 수업노트에는 style쪽에 표기되어있는데 상관 없나요?!

안녕하세요, 덕분에 재밌게 리액트 공부하고있는 직장인입니다.섹션13 카드 컴포넌트 실습에서 소플님 코드에서는 Inline styling 으로 backgroundColor: backgroundColor || 'white' 라고 적어주셨는데 제가 css.module 스타일파일을 만들어서 style sheet에서 import 해서 쓰고싶으면 prop으로 받은 background 를 style sheet 에 어떻게 넘겨줄수있는지 궁금합니다. 

msw에서 DB를 연결해서 사용하고싶습니다.몽고디비를 연결하고싶은데 타입스크립트를 잘 몰라서 연결을 못하겠습니다 ...구글 찾아봐도 잘 안나오는데 혹시 방법이 있을까요 ?

안녕하세요. 중고마켓 리스트를 무한스크롤로 구현 중에 있는데요.부모 요소를 감싸서 overflow로 스크롤을 주면 height값이 먹혀서 데이터를 20개 가져오고 나서는 더이상 스크롤을 내릴 수가 없네요. 이건 ListWrap인 스크롤 컴포넌트의 부모요소를 없앨때 이구요.  이건 ListWrap을 넣었을 때 저렇게 값이 나옵니다.  어떻게 해야할까요? 아니면 무한스크롤은 아래처럼 overflowscroll을 넣고 구현이 안되는건가요?

ㅠㅠㅠㅠㅠㅠ 강사님 ... ㅠㅠㅠㅠㅠ이번에는 yarn, create-react-app으로 해서 다시 해당 실습 진행해보고 있는데요...(npx로 cra 설치하는데 예전엔 잘 썼었는데 왜인지 모르겠는데 계속 에러가 나서 똑같이는 못했어요...)강의와 동일한 코드인데 에러문구대로 한건지 모르겠는데 import thunkMiddleware from "redux-thunk";의 thunkMiddleware 키워드를 thunk로 변경했더니어제와 같이 vite 패키지 에러가 콘솔창에 뜨더라구여.....살려주세요ㅠㅠ해당 작업한 것까지 커밋한 내용인데 혹시 봐주실 수 있을까요...ㅜㅜhttps://github.com/laurenCho9/soaple-redux-cra

next: { tags: {'posts', id} }nextjs에서의 위의 코드는 nextjs의 캐시를 하는거라면 nextjs는 서버캐시를 하고 react-query는 클라이언트 캐시를 해주는건가요? 둘 다 중복적으로 캐시를 지원해주거 맞죠? 헷갈리네요

GNB를 구성하는 다양한 방법이 있을 것 같은데혹시 널리알려진 정형화 된 방법이 있을까요? 혹은 관련 지식이 프로젝트에서 알려주신 방법이 마음에 들어서 한번 적용해보려고 합니다. 🙂

안녕하세요 제로초님, 로컬상에서 mysql workbench 처럼ec2인스턴스 ubuntu내에 있는 mysql db 데이터들을 시각화해서 관리할 수 있는 툴 같은 건 혹시 없을까요?데이터들을 수정하고 싶을때 query문으로 직접 관리하는 것이 일반적인지 문의드립니다!

카카오 토큰 받기 이후로 많은 오류가 한번에 떠서 질문 드립니다!부트 서버에서도 member.service, impl에 콘솔 찍은것도 에러로 인해 안뜹니다상황마다 500오류 400오류 grant value 오류 등이 계속 뜹니다 ㅜㅜ  부트https://github.com/hyeonbin03/IntelliJHub일단 부트 코드는 선생님 주셨던 파일 참고해서 Member Modify 기능까지 작성 완료 된 상태입니다 리엑트https://github.com/hyeonbin03/WebStromHub깃 주소 남겨드겠습니다 ㅠㅠ

안녕하세요 자바스크립트 배열 중에 email split 따라하면서 콘솔에 있는 내용 복사해서 vb Code에 붙혀 넣고 주석처리 했습니다.근데 주석 뒤에 "codecamp": Unknown word. 라고 나타납니다. 이건 왜 그런가요?

안녕하세요 선생님!선생님 강의를 정말 잘 듣고 있는데요! 강의에 대한 질문은 아니지만 다른 곳에 물어볼 곳이 없어서 선생님께 여쭤봅니다. 제가 이번에 백앤드분들과 프로젝트를 준비하고 있는데 로그인 과정에서 jwt토큰을 사용한다고 합니다. 그런데 access토큰을 누구나 볼 수 있는 localstorage에 저장해도 되나요? 구글에 찾아보니 쿠키에 담는게 가장 안전하다고 하는데 쿠키에 담으면 서버에 보낼시 쿠키에 담긴 토큰을 꺼내서 헤더에 넣어서 서버에 보내야 되나요??  강의 2회 반복중인데 처음에는 너무 어려웠지만 지금은 리액트에 대해 많이 배웠습니다. 항상 좋은 강의 감사합니다!!

안녕하세요 해당 영상을 통해 학습하고 따로 프로젝트를 진행하는 중에 서버 컴포넌트에서 data를 fetch하고 api 상태코드에 따라서 next에서 제공하는 error.tsx에서 해당 에러 상태에 따라 모달에 메세지를 띄우는 작업을 하고 있습니다.로컬 환경에서 실행시켰을때는 정상적으로 error status가 523이 발생했을때 정상적인 메세지를 받아서 error.tsx 화면에서 해당 에러 메세지를 모달에 띄우나 빌드 후 실행시켰을 때에는 An error occurred in the Server Components render. The specific message is omitted in production builds to avoid leaking sensitive details. A digest property is included on this error instance which may provide additional details about the nature of the error.모달안의 메세지에 이러한 문구가 뜹니다. 아무리 찾아봐도 정확한 원인을 모르겠는데 혹시 해결방법을 아실까요?다국어 처리 라이브러리는 next-intl를 사용하였습니다./note/page.tsxasync function fetchSharedNote(guid: string) { try { const res = await fetch( `${process.env.API_SERVER_URL}/v1/...`, { method: "POST", headers: { "Content-Type": "application/json", }, body: JSON.stringify(guid), } ); if (res.ok) { return res.json(); } else { const errorData = await res.json(); throw errorData; } } catch (err: any) { const t = await getTranslations("Index"); if (err.status === RestApiErrorType.notExistResourceException) { throw new Error(t("error523")); } throw new Error(err.message); } } /note/error.tsx "use client"; // Error components must be Client Components import CommonDialog from "@/app/_components/CommonDialog/index"; import { useState } from "react"; export default function Error({ error, }: { error: Error & { digest?: string }; reset: () => void; }) { const [showDialog, setShowDialog] = useState(!!error.message); return ( <CommonDialog isShow={showDialog} contents={error.message} onClick={() => { setShowDialog(false); }} /> ); }

Uncaught SyntaxError: The requested module '/node_modules/.vite/deps/redux-thunk.js?v=c406571d' does not provide an export named 'default' (at store.js:3:8)(내용 수정 및 진행상태 업데이트 2023.03.21 am 02:33)비트로 설치한 모듈에서 제공하지 않는 내보내기라길래해결방법 찾아보다가https://github.com/reduxjs/redux-templates여기에 있는 리드미 내용대로yarn add vite-template-redux설치를 하긴 했는데 Vite, with TypeScript 가 아니라 React로 해서 그런지는 모르겠는데그래도 같은 오류가 뜨네요ㅠㅠㅠ  아래는 각각 입력한 코드 내용입니다store.jsimport { applyMiddleware, compose, createStore } from "redux"; import rootReducer from "./reducers"; import thunkMiddleware from "redux-thunk"; // import asyncFunctionMiddleware from "./middlewares/asyncFunctionMiddleware"; const composeEnhancers = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose; const store = createStore( rootReducer, composeEnhancers(applyMiddleware(thunkMiddleware)) ); export default store;addTodoThunks.jsimport { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, } from "../actions/todoAction"; const TODO_MAX_COUNT = 3; function addTodoThunkActionCreator(text) { return async function addTodoThunk(dispatch, getState) { const state = getState(); if (state.todo.length < TODO_MAX_COUNT) { dispatch(addTodoActionCreator("아이템 추가중...")); setTimeout(() => { dispatch(removeTodoActionCreator()); dispatch(addTodoActionCreator(text)); }, 3000); return; } else { dispatch(addTodoActionCreator("최대 개수 초과!")); setTimeout(() => { dispatch(removeTodoActionCreator()); }, 3000); } }; } export default addTodoThunkActionCreator; TodoAppContainer.jsimport { connect } from "react-redux"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../actions"; // import { // addTodoActionCreator, // removeTodoActionCreator, // removeAllActionCreator, // } from "../ducks/todoDuck"; import { addTodo as addTodoActionCreator, removeTodo as removeTodoActionCreator, removeAll as removeAllActionCreator, } from "../actions/todoAction"; import addTodoThunkActionCreator from "../thunks/addTodoThunks"; import TodoApp from "../../components/TodoApp"; function mapStateToProps(state, ownProps) { return { todoItems: state.todo, }; } function mapDispatchToProps(dispatch, ownProps) { return { addTodo: (text) => { // dispatch(addTodoActionCreator(text)); dispatch(addTodoThunkActionCreator(text)); }, removeTodo: () => { dispatch(removeTodoActionCreator()); }, removeAll: () => { dispatch(removeAllActionCreator()); }, triggerAsyncFunction: (asyncFunction) => { dispatch(asyncFunction); }, }; } const TodoAppContainer = connect(mapStateToProps, mapDispatchToProps)(TodoApp); export default TodoAppContainer;    

안녕하세요! 알림 보고 바로 수강신청했습니다 ㅎㅎ그런데 강의 자료를 열어보니 06_lazyLoading/4_r 이 쓰여지고는 있는데 폴더가 없네요... const LazyImage = dynamic(() => import('@/components/06_lazyLoading/4_r/lazyImage'), { ssr: false }) 실행도 못해보고 터져버린 앱... ㅠㅠ 

안녕하세요00-06 black설치과정에 질문입니다.라이브러리에 추가하고 black 패키지 추가하려고 하니깐활성화가 안되어있습니다..어떻게 조치해야 될까요?

안녕하세요~ backUrl을 수정하여 소스코드가 변동되었으니 github에 commit push를 한 뒤, 우분투 서버에 접속하여 front에서 다시 git pull을 할 경우, 우분투 서버 front에서 build를 또 진행 해야하나요?그리고, 이전에 강의에서 vim으로 .env를 만든것들도 다시 만들어야할까요?

4강 - 챗봇 어플리케이션 만들기#3 구조 설명 & textQuery Route 만들기 강의를 듣고 있던 상황입니다.강의 내용을 따라 postman에서 주소 지정 후 send 버튼을 클릭하면,비주얼 스튜디오 코드 터미널 창에 아래와 같은 에러가 발생합니다.Error while processing text query: Error: 16 UNAUTHENTICATED: Failed to retrieve auth metadata with error: invalid_grant: Invalid JWT SignaturedDialogflow 와 google cloud에 작성된 데이터 모두 확인 시 문제가 없어 보이는데,어느 부분을 더 참고 해봐야 할까요? 참고로 console.log(req.body.text)입력 시, text의 값은 제대로 출력됩니다. router.post("/textQuery", async (req, res) => { console.log(req.body.text); const request = { session: sessionPath, queryInput: { text: { // The query to send to the Dialogflow agent text: req.body.text, // The language used by the client (en-US) languageCode: languageCode, }, }, }; try { const responses = await sessionClient.detectIntent(request); console.log("Detected intent"); const result = responses[0].queryResult; console.log(` Query: ${result.queryText}`); console.log(` Response: ${result.fulfillmentText}`); res.send(result); } catch (error) { console.error("Error while processing text query:", error); res.status(500).json({ error: "Internal server error" }); } }); 

이전 강의인 Reacr.memo 에서 리액트가 기존 prop 과 신규 prop 을 얕은비교(주소값 비교)로 진행하기 때문에, 새로운 객체로 업데이트(생성, 수정, 삭제)로 인해서 수정된 객체 값((새로운 주소값))이 state() 값으로 할당되어 다르게 인식하기 때문에 react.memo 에서 직접 사용자가 비교할 수 있게 따로 로직을 만들었습니다.그런데 이번 강의에서는 단순히 생성, 수정, 제거 함수를 useCallback 으로 제어했을때,react.memo에 직접 prop 값을 비교한 로직은 왜 지우는건가요?state 데이터를 핸들링하는 함수들은 변하지 않음으로 mount 할때만 useCallback을 쓰는건 알겠는데, 이게 왜 state 객체 주소값이랑 연관이 있는지 모르겠어요 ㅜㅜ