안녕하세요. 수업을 진행하던 도중 오류가 발생하여 문의드립니다. 'npm add mongoose' 를 실행 했는데 Error: EPERM에러가 자꾸 뜨네요. 인터넷에서 찾아가면서 .bin파일을 지워도 보고 npm캐시도 삭제해 보고 oneDrive도 중지 시켜보고 해봤지만 오류가 해결이 안되어서 글 남깁니다.  아래 이미지는 오류 내용 캡쳐했습니다. 

안녕하세요 프론트엔드 개발자로 취업을 준비중입니다. 코딩테스트가 어렵고 또 이 부분에서 자주 떨어져서 강의를 찾다가 결제를 하게 되었는데요 우선 2021년도 Best라고 되어있는데 지금 봐도 무방할까요?

안녕하세요 useEffect에 대해 공부를 하다가 궁금한점이 생겨 질문을 드립니다. 강의처럼 useEffect의 배열에 count를 작성하면 컴포넌트가 마운트 될때 먼저 실행되고 그다음 count가 바뀔때마다 useEffect가 실행이된다... 까지는 이해를 했는데 그럼 의존성 배열에 count를 넣으면 이 count의 값만 바뀔때에만 실행되기 때문에 불필요한 렌더링을 줄여주어서 useEffect를 사용하는건가요?

자바스크립트 강좌 5-2. 랜덤 사용하기 에서Math.random()에 9를 곱하시고 1을 더하시는데왜 그렇게 하시는지 궁금합니다.10을 곱해도 1 rondom()은 1미만의 수이기 때문에 10이 되지는 않으니 10을 곱해도 되는게 아닌가요?(Math.floor가 9.999여도 내림해주니까요?)

강사님께서 말씀주신대로 년월 증가처리에 대해서동일하게 코드를 작성하였습니다.<div> <Header title={`${pivotDate.getFullYear()}년 ${pivotDate.getMonth()+1}월`} leftChild={<Button onClick={onDecreaseMonth} text={"<"}/>} rightChild={<Button onClick={onIncreaseMonth} text={">"}/>} /> <DiaryList/> </div>(질문)Home.jsx에서 Button 구성요소 ">" 클릭시에onClick시에 onIncrease 함수객체가 <Button/> 구성요소가 props형태로 함수객체가 전달되고 있습니다.rightChild={<Button onClick={onIncreaseMonth} text={">"}/>}Button 구성요소에는 전달받은 onClick 전달받은함수객체에 대해서 별도 처리가 없어도 되는것인가요?const Button = ({text, type, onClick}) => { console.log("Button onClick : ", onClick) return ( <button onClick={onClick} className={`Button Button_${type}`}> {text} </button> ) }

📢 질문을 작성하기 전에 꼭 읽어주세요! 📢질문 전에 준비할 것스스로 먼저 확인하기같은 문제를 겪은 사람이 있는지 인터넷에서 검색해보세요. 대부분의 경우 비슷한 사례를 쉽게 찾을 수 있습니다.오류와 코드를 다시 한번 점검하기간단한 실수나 오타가 없는지 확인해보세요. (예: 변수 이름, 함수 호출 방식 등)문제 상황 정리하기본인이 겪고 있는 문제를 정확히 이해하고, 어떤 상황에서 발생하는지 메모해보세요.질문 작성 시 유의할 점간결하고 명확한 제목문제를 한눈에 이해할 수 있도록 제목을 작성하세요. ("React에서 상태값 초기화 문제"처럼 구체적으로!)상황 설명 포함문제가 발생한 맥락과 이미 시도했던 해결 방법을 간략히 정리해서 알려주세요.코드 공유문제가 발생한 코드를 첨부하여 보여주세요.강의 관련 질문강의 내용과 관련된 질문이라면 문제가 발생한 강의의 시간이나 챕터를 반드시 적어주세요.추가 안내사항답변을 받으면 꼭 확인하고 감사 인사를 남겨주세요. 작은 반응도 답변자에게 큰 동기부여가 됩니다!질문 게시판에서는 서로를 존중하며 커뮤니케이션해주세요.강의 외적인 문의(예: 계정 문제, 결제 등)는 고객센터를 이용해주세요.여러분의 꼼꼼한 질문이 더욱 빠르고 정확한 답변으로 이어질 수 있습니다. 😊

안녕하세요~ 커스텀훅을 만들 때, 커스텀훅 안에도 스프레드 연산자를 넣어서 통합핸들러처럼 사용하면 되는걸까요? 커스텀훅을 훅 파일로 만들어 놓으면, 다른 컴포넌트에서도 비슷한 함수면 가져다 쓰는 용도라고 이해했는데 맞는걸까요? 감사합니다.

home으로 들어가서 보이는 화면에는 Home이라고 잘 보이는데주소뒤에 /new나 /diary를 붙여서 검색해봐도 계속 Home으로 고정되어있습니다코드는 밑에와 같은 방식으로 작성하였습니다. import { createRoot } from 'react-dom/client' import './index.css' import App from './App.jsx' import { BrowserRouter } from 'react-router-dom'; createRoot(document.getElementById('root')).render( <BrowserRouter> <App /> </BrowserRouter> ) const Diary=()=>{ return <div>Diary</div>; }; export default Diary; import './App.css' import {Routes,Route} from "react-router-dom"; import Home from './pages/Home'; import Diary from './pages/Home'; import New from './pages/Home'; // 1. "/" : 모든 일기를 조회하는 Home 페이지 // 2. "/new" : 새로운 일기를 작성하는 New 페이지 // 3. "/diary" : 일기를 상세히 조회하는 Diary 페이지 function App() { return <Routes> <Route path="/" element={<Home />} /> <Route path="/new" element={<New />} /> <Route path="/diary" element={<Diary />} /> </Routes>; } export default App

심플 팩토리에서 chrome, safari 등등 if문을 통해서 브라우저환경에 맞는 그림판 인스턴스를 가져올 수 있도록 한 코드가 있었는데, 팩토리 메서드가 그 역할을 대신한다고 이해했습니다. 궁금한점은 결국 크롬이든 사파리든 브라우저환경을 알아내서 main함수에 넘겨줄 수 있어야하는데 그 분기는 어디서 해야하는걸까요?function clientCode(creator: Creator) { creator.someOperation() } clientCode(new ConcreteCreator1())아래의 코드라면 new ConcreteCreator1()를 판단할 수 있는 조건 분기를 결국 어디서는 해야하지 않는가에 대한 고민입니다! 

강의중 설명에서 알려주시는노션 사이트는 어떻게 접속해야 하나요?

질문삭제

안녕하세요이전 memo 강의에서 useCallback를 들고 context 듣다 보니 궁금한 사항이 있습니다.리로딩 방지를 위한 onCreate, onUpdate, onDelete에 이전 강의에 useCallback이 되어있는 상태에서 TodoDispatchContext하는 과정에서 useMemo로 리턴해서 전달하는데  context를 사용시 한번만 리로딩 방지를 위해서는 useMemo와 useCallback를 중복으로 사용 되어야하는걸까요?? 아님 useMemo를 사용하여 useCallback는 사용해도 안해도 무방한지 영상을 보다가 궁금합니다...! 추가적으로 이건 아주 소소한 궁금증인데함수를 쓰실때 카멜표기법과 파스칼표기법을 번갈아가면서 쓰시는데 어떤 용도에 따라서 사용하시는지 궁금합니다..ㅎㅎㅎ 

아래 질문들을 보던 중 Editor 부분이 리렌더링 된다는 글을 보고 제 화면도 확인한 결과 리렌더링 된 걸 확인해서 Editor.jsx 또한 아래와 같이 memo메서드를 감싸줬더니 리렌더링 되지 않는 것을 확인했습니다.import "./Editor.css"; import { useState, useRef, memo } from "react"; const Editor = ({ onCreate }) => { const [content, setContent] = useState(""); const contentRef = useRef(); const onChangeContent = (e) => { setContent(e.target.value); }; const onKeyDown = (e) => { if (e.keyCode === 13) { onSubmit(); } }; const onSubmit = () => { if (content.trim() === "") { contentRef.current.focus(); return; } onCreate(content.trim()); setContent(""); }; return ( <div className="Editor"> <input ref={contentRef} value={content} onKeyDown={onKeyDown} onChange={onChangeContent} placeholder="새로운 Todo..." /> <button onClick={onSubmit}>추가</button> </div> ); }; export default memo(Editor); Editor.jsx의 props가 onCreate 메서드인데 이를 App.jsx에서 useCallback 처리를 해줘서 그냥 export default memo(Editor); 을 해줘도 리렌더링 방지가 가능했던 것인지 궁금해서 질문 남깁니다! App.jsx 코드입니다!import "./App.css"; import { useState, useRef, useReducer, useCallback } from "react"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; const mockData = [ { id: 0, isDone: false, content: "운동하기", date: new Date().getTime(), }, { id: 1, isDone: false, content: "풋살하기", date: new Date().getTime(), }, { id: 2, isDone: false, content: "게임하기", date: new Date().getTime(), }, ]; function reducer(state, action) { switch (action.type) { case "CREATE": return [action.data, ...state]; case "UPDATE": return state.map((item) => item.id === action.targetId ? { ...item, isDone: !item.isDone } : item ); case "DELETE": return state.filter((item) => item.id !== action.targetId); default: return state; } } function App() { const [todos, dispatch] = useReducer(reducer, mockData); const idRef = useRef(3); 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, }); }, []); return ( <div className="App"> <Header /> <Editor onCreate={onCreate} /> <List todos={todos} onUpdate={onUpdate} onDelete={onDelete} /> </div> ); } export default App;

useState는 componet의 구성요소의 상태값일 관리하고상태변환시에 biz처리 및 관련된 자식 구성요소로 props 전달을 하고자 할때 사용하는 것으로 강의를 이해했습니다.반면 useErrect는 라이프싸이클을 통해 biz 로직을 구현하고자 할때 사용하는 것으로 아래 이했습니다.mount - 초기 실행시 (초기 데이터 설정-db select통한 값을 설정 처리 등)update - state에서 관리되는 상태에 대한 실시간 확인과 처리(useState의 setXXXX는 비동기로 실시간 값이 어려워 useEffect를 활용해 v실시간 alidation을 체크하는데 있을것으로 이해하였습니다.질문)실무에서 useEffect의 어떻게 활용하나요?지금은 hook을 배우는 단계라 실무에서 어떻게사용될지도 많이 궁금합니다. 

터미널에서 npx expo start 하면...아래의 오류가 납니다.휴대폰 화면은 뜨는데요.빨간색오류가 뜨면서 Welcome! 화면이 뜨질 않습니다.무엇일까요?   

터미널에서 npm install -g create-react-app 작성 후에아래와 같은 메세지가 뜹니다.이럴 경우 어떻게 해야 하나요??adminui-MacBook-Pro:grab-market-web admin$ npm install -g create-react-appnpm warn deprecated inflight@1.0.6: This module is not supported, and leaks memory. Do not use it. Check out lru-cache if you want a good and tested way to coalesce async requests by a key value, which is much more comprehensive and powerful.npm warn deprecated fstream-ignore@1.0.5: This package is no longer supported.npm warn deprecated uid-number@0.0.6: This package is no longer supported.npm warn deprecated rimraf@2.7.1: Rimraf versions prior to v4 are no longer supportednpm warn deprecated glob@7.2.3: Glob versions prior to v9 are no longer supportednpm warn deprecated fstream@1.0.12: This package is no longer supported.npm warn deprecated tar@2.2.2: This version of tar is no longer supported, and will not receive security updates. Please upgrade asap.changed 64 packages in 968ms4 packages are looking for funding run npm fund for detailsadminui-MacBook-Pro:grab-market-web admin$

function solution(s) { const dic = {} s.split("").forEach((el) => { if (dic[el]) { dic[el]++ } else { dic[el] = 1 } }) const newStr = [...new Set(str.split(""))] return newStr .map((el) => { if (dic[el] && dic[el] !== 1) { return (el += dic[el]) } else { return el } }) .join("") } let str = "KKHSSSSSSSE" console.log(solution(str)) 먼저 오브젝트에 몇 개의 문자가 몇 번 등록되어있는지 저장한 후 set으로 중복을 제거해서 뼈대를 만들었습니다.그 다음으로 반복문을 이용해서 오브젝트를 탐색해 뼈대에 문자열을 합성해주는 방식으로 풀었습니다. 답안에 비해 좀 복잡한 것 같은데 놓치거나 시간,공간복잡성에서 손해가 클까요?

npx eas build --platform android --profile development위의 명령을 치면...장시간 build 작업후에 도스창 같은 것이 2개 뜨다가 오류가 납니다. 그래서 휴대폰 창이 뜨지 않습니다.어떤 상황 일까요?  

투두 리스트 작성 앱 개발에서 다음과 같이 콜백함수에 중괄호를 사용하니 제대로 동작하지 않더군요. 그래서 중괄호를 제거하니 올바르게 작동하는데, 통상적으로는 중괄호를 사용해야 하잖아요. 중괄호를 사용할 때 왜 제대로 작동하지 않는지 그 이유가 궁금합니다. 아래 코드에서 첫 번째 코드는 제대로 동작하지 않는 코드이고, 두 번째 코드는 제대로 동작하는 코드입니다. (아래 코드에서 todos.filter 메서드에 주목해 주세요.) const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => { todo.content.includes(search) }); } const getFilteredData = () => { if(search === "") { return todos; } return todos.filter((todo) => todo.content.includes(search) ); }

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요  안녕하세요 버튼이 안 떠서 질문드립니다 오타는 없는 것 같은데 버튼이 안 나오네요