const setPoint=function(){ let one =100; const two = 200; var five=500; if(one){ let seven=700; var nine = 900; }; return function(){ console.log(one+two+nine); // one + two + nine; debugger // one + two + nine; // one, two, nine variable 없음 debugger // seven; }; }; const getPoint =setPoint(); getPoint();debugger로 변수를 개발자도구 콘솔에 찍으니깐요변수를 추적못합니다.신기해서 질문합니다웹브라우저에서는 변수를 찾지 못하고자바스크립트에서는 클로저로 할당된 변수를 찾아서 콘솔에 찍어주는 건가 싶기도하고요언제 변수를 찾느냐의 차이인가요?웹브라우저에서 직접 변수를 찾으면 못찾는다고 하네요이유가 무엇인지 알고 계신가요?

영상 [4:12]에서 console.log()로 delay(3000)의 반환값인 Promise 객체를 출력했는데 어떻게 "3초가 지났습니다."라는 문구가 출력되는 건가요?

 기본 템플릿 생성 rafce 적용할 때 파일명 기준으로 객체 변수(NavBar) 생성 되는데 오타 때문에 삭제하고 재생성(Navbar)하면 처음 만들었던 이름 그대로 유지되는 습성이 있는데 삭제 하고 다시 만들때 바로 적용 되도록 환경 설정 따로 하는게 있는지 궁금합니다.  Components 및 Page 폴더 파일 대소문자 구분 생성 이유가 따로 있는지 아니면 개인적인 개발 습관인지 답변 부탁드립니다.

안녕하세요. 투두리스트 업그레이드 중 "UPDATE" 에서 질문있습니다.업그레이드 하며 체크박스를 선택했을 때 다음과 같은 오류가 발생합니다.업그레이드 이전까지는 잘 돌아가서 업그레이드 하며 오타 문제가 아닐까 하는데 원인을 찾기가 어려워 질문 드립니다.. ㅜ APP.jsx 와 List.jsx 코드 올려드립니다.- APP.jsximport "./App.css"; import Header from "./components/Header"; import Editor from "./components/Editor"; import List from "./components/List"; import { useState, useRef, useReducer } from "react"; const mockData = [ { id: 0, isDone: false, content: "Study React.js", date: new Date().getTime(), }, { id: 1, isDone: false, content: "do laundry", date: new Date().getTime(), }, { id: 2, isDone: false, content: "wanna go home", 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 = (content) => { dispatch({ type: "CREATE", data: { id: idRef.current++, isDone: false, content: content, date: new Date().getTime(), }, }); }; const onUpdate = (targetId) => { dispatch({ type: "UPDATE", targetId: targetId, }); }; const onDelete = (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; List.jsx import "./List.css"; import TodoItem from "./TodoItem"; import { useState } from "react"; const List = ({ todos, onUpdate, onDelete }) => { const [search, setSearch] = useState(""); const onChangeSearch = (e) => { setSearch(e.target.value); }; const getFilteredData = () => { if (search === "") { return todos; } return todos.filter((todo) => todo.content.toLowerCase().includes(search.toLowerCase()) ); }; const filteredTodos = getFilteredData(); return ( <div className="List"> <h4>Todo List 🎈</h4> <input value={search} onChange={onChangeSearch} placeholder="검색어를 입력하세요" /> <div className="todos_wrapper"> {filteredTodos.map((todo) => { return ( <TodoItem onDelete={onDelete} onUpdate={onUpdate} key={todo.id} {...todo} /> ); })} </div> </div> ); }; export default List;

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 환경변수 적용하기 -1 듣고 있는데async registerWithEmail(user: RegisterUserDto) { const hash = await bcrypt.hash( user.password, parseInt(this.configService.get<string>(ENV_HASH_ROUNDS_KEY)), ); const newUser = await this.usersService.createUser({ ...user, password: hash, }); return this.loginUser(newUser); }this.configService.get<string>(ENV_HASH_ROUNDS_KEY 에서 string| undefined 형식의 인수는 string 형식의 매개 변수에 할당될 수 없습니다라는 에러가 뜹니다.강의에서는 위 코드에서 타입 에러가 발생하지 않던데, NestJS 버전 차이로 인해 타입 정의가 바뀐 걸까요? 해결방법이 궁금합니다.

<img src=x onerror=alert(1)>

 let $animalInfo = document.querySelector("div.animal-info"); let ageElement = document.querySelector("div#age"); console.log($animalInfo); console.log(ageElement);다음과 같은 예제 코드를 실행했을 때,이렇게 출력이 되는데요. 강의에서는다음과 같이 태그와 함께 출력되는데 제 크롬 브라우저에서는 왜 다르게 나오는지 궁금합니다! 

const changePage = page => { history.pushState({page}, `Title`, "/${page}" }안녕하세요. 위 예제에서 pushState의 두번째 인자에 title이라고 해주셨는데 mdn을 보니 ununsed 로 되어있어서요. 영상을 봐도 title이 변경되진 않더라구요. 여기 수정이 필요할 것 같습니다. 감사합니다.

❗질문 작성시 꼭 참고해주세요에러 메세지에서 단서를 찾을 수 있는 경우가 많습니다. 에러 메세지를 읽고 한번 검색해보시는것을 추천드립니다.질문글을 작성하실때는, 현재 문제(또는 에러)와 코드나 github을 첨부해주세요.개발중인 OS, ReactNative, Node 버전 등의 개발환경을 알려주셔야합니다.에러메세지는 일부분이 아닌 전체 상황을 올려주세요. 일부만 보여주시면 답변이 어렵습니다.에러 잘라서 올리시면 안됩니다!(에러 일부만 자르거나 일부만 복사하지말아주세요) useGetMe 함수 만드실 때, useQuery 옵션으로 onSuccess, onError 사용 안하시고, useEffect로 사이드 이펙트를 처리하시는 이유가 궁금합니다!

강의 마지막 부분에서 let 으로 count 선언 후, App.jsx에서 <Register/> 를 두 번 호출하면 같은 변수를 쓰면서 같은 Register 함수를 호출하는 것이라 하셨는데 useRef로 선언해도 같은 Register함수를 호출하는 것 아닌가요 ?useRef를 사용하면 const inputRef 로 선언해도 다른 객체로 인식 하는 건지 ..! 궁금합니다.

tailwind css가 편해보이기는 한데, 화면 코드의 많은 부분을 css 클래스로 차지하고 가독성을 헤치는것 같은데요.실무에서도 예제처럼 html 요소 인라인으로 하나하나 class를 넣어두나요?이러면 중복되는 코드도 많고 구조 파악도 어려울 것 같아서요 만약 html 디자이너가 따로 있을때는 tailwindcss를 사용하지 않나요?디자이너랑 협업할때는 css를 따로 만들어 줄것 같은데, 리액트 실무 환경에서 디자인 부분에 대해서 어떤식으로 협업하는지 궁금합니다.

안녕하세요 강의 코드 중에 질문드립니다.상단 네비게이션바 코드 작성시Navbar.jsx 에서 노션에 올려주신 MenuItem 컴포넌트가 올바로 작동하지 않습니다. 다만, 찾아보니 '화살표 함수에서 중괄호를 사용하면 명시적으로 return문을 작성해야 JSX가 반환됩니다.' 라고 하는데...실제로 return 을 추가하면 실행이 됩니다.선생님 강의에서는 MenuItem 컴포넌트 선언시 retrun 명시를 안하신거 같은데 어떻게 개발서버에서 상단 네비바가 보여지나요..? (전 : 노션코드)const MenuItem = ({ path, label, onClick }) => ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); (후-실행됨)const Menuitem = ({ path, label, onClick }) => { return ( <li> <Link to={path} className="hover:text-blue-600 transition duration-300" onClick={onClick} > {label} </Link> </li> ); };

강의를 듣는데 보내주시면 감사드리겠습니다

Node.js 에서 ES 사용시, default 메서드를 import 하는 과정에서 오류가 생깁니다.강의 마지막 부분처럼 import를 한 줄로 선언해도 안되네요 ..

혹시 app/_layout.tsx 파일에서 아래 부분 의미가 뭘까요...?  useEffect(() => { if (loaded) { SplashScreen.hideAsync(); } }, [loaded]); if (!loaded) { return null; }

smooth-scrollbar js 는 scrollerProxy 랑 연동해야하는 귀찮은 문제가있는데Lenis는 scroll 값을 window.scrollY에 그대로 반영하면서 부드러운 스크롤 효과를 주기 때문에, GSAP의 ScrollTrigger랑 자연스럽게 연동되거든요굳이 왜 어려운길을 가는지 이유가 궁금합니다.scrollerProxy 의 학습을 위해서인지 아니면 Lenis의 어떠한 문제가있어서 인지 궁금해서 여쭈어 봅니다.

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 섹션 9 실습에서setIsConfirmed((prevIsConfirmed) => !prevIsConfirmed); 로 setState 정의 했는데prevIsConfrimed라는 state는 어디에서 나온 건가요

안녕하세요소플님 덕분에 리액트 공부 잘하고 있습니다.chapter14 실습영상을 계속 돌려보고 있는데 이해가 안가서요..DarkOrLight 컴포넌트가 ThemeContext MainContent 두개의 컴포넌트를 하위로 가지고 있는거 같은데 return ( <ThemeContext.Provider value={{ theme, toggleTheme }}> <MainContent /> </ThemeContext.Provider> ); ThemeContext.Provider Provider 로 감싼다는 부분이 이해가 잘안되서요 ㅠ Provider 로 감쌌을때 ThemeContext 컴포넌트를 사용한다는 의미인가요? 전체적인 설명 부탁드립니다 ~!!

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 rotateToken(token: string, isRefreshToken: boolean) { const decoded = this.jwtService.verify(token, { secret: JWT_SECRET, });여기를 비롯해서 다양한곳에서 Unsafe assignment of an any value라는 오류가 뜨는데 강사님 영상에서는 따로 이런 에러가 발생하지 않더라고요. 혹시 강의에서 ESLint 설정을 약하게 해두신 건가요? 아니면 verify 결과에 타입을 명시해줘야 하는 건가요? 

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://inf.run/54jjz - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강의에서 알려주신 decodeBasicToken() 함수를 그대로 구현했는데요,다음과 같이 리턴을 명확히 하고 있음에도 불구하고,decodeBasicToken(base64String: string){ // 그냥 공식으로 외우면 됨 const decoded = Buffer.from(base64String, 'base64').toString('utf8'); const split = decoded.split(':'); if (split.length !== 2) { throw new UnauthorizedException('잘못된 유형의 토큰입니다.'); } const email = split[0]; const password = split[1]; return { // email: email, // password: password, email, password, }; }에서 이 함수를 사용하면 TypeScript가 다음과 같은 에러를 표시합니다:Argument of type 'void' is not assignable to parameter of type ...혹시 이 부분은 TypeScript의 일시적인 추론 문제일까요?리턴 타입을 명시하니까 에러가 사라지긴 했는데,강의에서는 따로 리턴 타입 없이도 문제없이 작동하던 것 같아서요!혹시 제가 놓친 부분이 있는지,아니면 단순히 타입스크립트 인텔리센스의 문제인지 궁금합니다 감사합니다!