76. 11.3) Context 분리하기 useMemo 를 이용해서 onCreate, onUpdate, onDelete 를 한번만 생성이 되게 한거는 이해 하는데요, 그럼 이 경우에 기존에 사용했던 useCallback 은 삭제 해도 무방 한가요? const onCreate = (content) => { dispatchFunc({ type : "CREATE", data : { id : idRef.current++, isDone : false, content: content, date : new Date().getTime(), }, }); };
안녕하세요. python에서 강의하신대로 코드 입력후 터미널에 python 파일이름.py를 실행하면 아무런 반응이 없이 PS D:\Dev\PYTHON> PS D:\Dev\PYTHON> 글만 다시 뜹니다. (에러코드도 없음) 해결방법을 몰라 진행이 안되는데 코파일럿 통해 질의해도 환경이나, 코드는 정상이라고 합니다. 해결방법을 알려주시면 감사하겠습니다...
안녕하세요. 투두리스트 렌더링하기에서 TodoItem에 key를 넣지 않았을때 웹브라우저에서 에러가 발생하고, 강의 화면에 vscode에서도 보면 해당 소스코드 위치에 Missing "key" prop for element in... 이라고 나오는데, 제 경우에는 소스코드 위치에 Missing "key" prop for element in... 이라는 내용이 나오지 않습니다. Eslint 플러그인도 설치했고, 아래와 같이 설정 했는데, 무슨 차이 때문에 이런 현상이 생기는 걸까요? rules: { "no-unused-vars": "off", "react/prop-types": "off", }, 그래서, 검색을 좀 해보았고 rules에 아래와 같이 내용을 추가해 봤는데도, Missing "key" prop for element in... 이 내용이 나오지 않습니다. rules: { "no-unused-vars": "off", "react/prop-types": "off", "react/jsx-key": "true", }, 참고로 저의 package.json은 아래와 같습니다. { "name": "section08", "private": true, "version": "0.0.0", "type": "module", "scripts": { "dev": "vite", "build": "vite build", "lint": "eslint .", "preview": "vite preview" }, "dependencies": { "react": "^19.1.1", "react-dom": "^19.1.1" }, "devDependencies": { "@eslint/js": "^9.33.0", "@types/react": "^19.1.10", "@types/react-dom": "^19.1.7", "@vitejs/plugin-react": "^5.0.0", "eslint": "^9.33.0", "eslint-plugin-react-hooks": "^5.2.0", "eslint-plugin-react-refresh": "^0.4.20", "globals": "^16.3.0", "vite": "^7.1.2" } }
좋은 강의 잘 듣고 있습니다. 다름이아니라, 이전 강의들에 에러들을 다 해결해서 80강을 듣기 전 까지 상품 상세 페이지 구현 후, 상품 상세 페이지 보기까지 에러 없이 잘 되던 것이 80강을 듣고 코드를 작성 후 부터 ' 상품 상세 페이지 ' 가 뜨지를 않고 있습니다. 아래 사진 첨부 합니다. 사진 1. 아래 사진으로 DB Browser for SQLITE에서 이미지를 작성 해 준 뒤 일단 이미지는 잘 받아 옵니다. 참고로, 사진 1 은 VS CODE 폴더(GRAB-MARKET-SERVER)에서 server.js에 소스 order : [['createdAt','DESC']], 입력을 일단 개인적인 이유로 빼었기 떄문에 , 판매되는 상품 에 순서가 바뀌어 있습니다. order : [['createdAt','DESC']] 을 넣게 된다면 상품 순서는 축구공,농구공,키보드,키보드로 화면에 나타나는데요 , 아래 사진과 같아요. 제일 먼저 축구공을 누르게 되면 localhost:3000/products/4라고 뜨기에요, 원래 제대로 되려면, 축구공을 누르면 localhost:3000/products/1로 되어야 하는거 아닌가요? 그리고 위 첨부한 사진 보면 왼쪽과 같이 에러가 발생하는데요, 어떻게 해야 제대로 작동 할까요? 그리고 잘못 소스코드를 입력하고 실행하다보니 키보드가 2개 생성 되었습니다만 , 이것 을 하나만 남기고 싶은데 어떻게 해야 하는지요? -->DB Browser for SQLite에서 삭제하는 방법이 있나요? 위에 사진 1에서 가장 마지막인 4번째의 축구공을 누르면, 위와 그리고 아래와 같은 에러가 발생하며 상품 정보 상세 페이지 . 즉 상품 정보를 받고 있습니다... 만 그대로 멈춰있고 이전 강의 챕터에서 만든 것(상품상세페이지) 불러올 수 없게 되어 질문을 남깁니다. 즉 상품 정보 상세 페이지가 잘 만들어져서 그대로 에러 없이 잘 해왔는데, 에러가 나서 여쭈어봅니다. -추가 질문 : 상품 정보를 받고 있습니다... 페이지 경우는 POSTMAN 가짜 서버(=mock서버)에서랑 관련이 깊은 건가요? POSTMAN(=mock서버)에서 그랩님의 강의를 따라올때, 다른점들이 몇가지 있었는데요(몇가지 다른점은 에러가 있었습니다 .), 그래서 위 에러가 발생하는 건가요? 다른점이 발생한 경우라면 포스트맨 에러 스샷을 추가로 올리겠습니다. 그럼 봐주실 수 있나요? 아니라면 POSTMAN(=mock서버)과 관련 없이 우리는 Node 서버를 구축 했기에, Mock서버인 POSTMAN과 전혀 상관이 없는 건가요? [상품 상세 페이지] 불러오지 못하는 것은 만일 Node 서버의 문제이지, Postman과 상관 없다면,node 서버측에서는 무엇을 고쳐주거나 어떤 소스를 작성해줘야 에러가 해결될까요? 더불어서 79강 강의 2분 56초 부터 3분 32초 보면, POSTMAN 테스트 를 하는 부분이 나오는데, 여기서 아래 사진을 보면[왼쪽 메뉴 get product] Body 부분에서 그랩 강사님 화면과 다르게 뜨는데, 이것은 왜 그런건가요? 어떻게 해야 http://localhost:8080/products/1 , http://localhost:8080/products/2 , http://localhost:8080/products/3 을 제대로 작동하게 할 수 있나요? 마지막으로 [참고 사진]으로 POSTMAN의 잘 작동하는 [get products]사진 첨부해 봅니다. 어떻게 해야 이 모든 에러 를 해결 할 수 있을지에 대해 자세한 답변 부탁드립니다.
안녕하세요, 좋은 강의 감사합니다. 실행 컨텍스트 부분에서 궁금한 점이 있어서 질문드립니다. 강의에서 Variable Object를 설명해주셨는데, 제가 개인적으로 찾아본 자료들에서는 ES2015부터 실행 컨텍스트가 Lexical Environment, Variable Environment, this binding으로 구성된다고 나와 있더라고요. Variable Object는 그 이전 스펙에서 사용되던 용어인 것 같은데, 혹시 강의에서 이 개념을 선택해서 설명하신 특별한 교육적 의도가 있으셨을까요? 제가 아직 깊이 이해하지 못해서 그런데, 두 방식 중 어떤 것이 JavaScript 동작 원리를 학습하는 데 더 도움이 되는지, 또는 어떤 차이점들이 있는지 알려주시면 감사하겠습니다.
실무에 바로 적용하는 프런트엔드 테스트 - 2부. 테스트 심화: 시각적 회귀・E2E 테스트
안녕하세요 e2e 테스트는 비용이 많이 들어서 어떻게 관리를 하는지 궁금합니다. - 파이프라인에서 매번 CI 에서 돌리기에는 서버나, 시간이 개발 생산성을 잡아 먹을 것 같은데요. 점점 e2e 테스트가 쌓여 나갈떄 어떤 전략을 취할 수 있는지 궁금해요. GPT로 리서치하니까 보통 2가지를 병행해서 스케줄러 + 온디맨드 실행 같이 관리 한다고 하는데, 실제 현업에서는 어떻게 활용하고 계신지, 제가 리서치한 내용 말고 더 효율적이거나, 추천할만한 전략 , 이외의 고려사항 소개해주실 수 있으면 알려주시면 감사하겠습니다. 스케줄 실행 (Nightly/주말 풀스윗) EventBridge → ECS Fargate RunTask (Spot 가능) → Playwright 러너 대상: 스테이징(or PR 프리뷰 URL) b. 산출물: 트레이스/비디오/리포트 S3 업로드, Slack에 요약/링크 온디맨드 실행 (PR 코멘트/수동 트리거) Bitbucket Pipeline에서 aws ecs run-task 호출(또는 ChatOps 슬래시 커맨드) 태그/폴더/샤드 인자 넘김 → 필요한 부분만
mouseenter 마우스 이벤트를 할때 pulse.start(); 대신 pulse.restart();로 처음시작하게 하는것처럼 실습 때 mouseleave 마우스가 벗어날 때 자연스럽게 하려면 pulse.pause(); gsap.to ('button',{scale:0.8,duration:0.4}) 두개를 사용해서 어색하지 않게 구현했는데요, pulse.pause(); gsap.to ('button',{scale:0.8,duration:0.4}) 대신 pulse.reverse();를 사용해도 동일하게 어색하지 않게 줄 수있는 효과인건가요? 차이점은 없는건지 궁금합니다.
다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요. 6강 마지막 화면이랑 7강 첫화면 코드가 달라져서 이 부분은 어떻게 해결하면 될까요?? (안녕하세요->환영합니다) (console.log->alert) 크게 이 두 부분이 다른 것 같습니다. 그냥 이대로 진행하면 될까요? 2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠ ex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다! 3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
안녕하세요 이전에 장기효님 강의 vue2 버전으로 초중급 듣고 온 상태입니다. 근데 오래전부터 이미 뷰2는 지원 끊어져서 많은 회사들도 현재 뷰3를 이용하고 있는 걸로 압니다. 여기서 지금 재가 고민인게 중급 이후의 뷰2 강의를 들어야할지, 뷰3 강의를 처음부터 들어야할지 고민입니다. 근데 또 뷰3 강의 초급을 구매해서 커리큘럼만 살짝봤는데 뷰2 초급이랑 거의 비슷한것 같더라구요? 제가 이후에 들어야할 강의는 뭘로 해야할까요??
안녕하세요 강의를 잘 듣고있습니다. 하지만 개념이 잘 이해가 되지 않은 부분들이 있어서 질문드립니다. context 분리하기 강의 부분입니다!!! 이부분에서 이미 전 시간에 만들었던 useCallback으로 선언했던 함수들이 있습니다. 하지만 왜 app컴포넌트의 렌더링으로 인해 또 함수 선언이 되어 usememo를 써야한다고 하셨는지 문의드려요. const onCreate = useCallback((content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }, []); const onUpdate = useCallback((targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }, []); const onDelete = useCallback((targetId) => { dispatch({ type: "DELETE", targetId: targetId, }); }, []); const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 그동안 다른 컴포넌트에 props를 줄때는 color={color}식으로 주고, 이는 객체형태라고 합니다. 받는 자식 컴포넌트에서는 {color} 이런식으로 구조분해할당을 합니다. 하지만 createContext로 만든 provider value ={} 는 기본적으로 객체형태가 아닌걸까요? 기본적으로 구조분해할당을 하지 않는거같아서 뭐지싶었습니다 <TodoDispatchContext.Provider value={memoizedDispatch}> useEffect, useMemo의 차이점은 무엇인가요? 기본적으로 의존성 배열을 []로 둘때는 처음으로 컴포넌트가 mount 될때만 실행하고 , [todos]를 넣으면 이 변수 state가 바뀔때만 실행하는거같아서 똑같은거같아요