강의를 만들어주셔서 감사합니다.몇가지 질문이 있습니다.Frontend와 Backend폴더를 만든이유가 협업과 소스코드관리를 위한것이라고 생각합니다.그런데 node-modules를 Frontend와 Backend에 각각 설치하신 이유가 있으실까요?company-website에 설치해서 두곳다 이용하는방법도 있을것같은데 Frontend와 Backend를 따로 설치하신이유가 궁금합니다.깃허브에는 node-modules가 저장되게 하지 않았는데요그러면 현재 사용하는 노트북이 아닌 다른 노트북이나 데스크톱에서 현재 개발한것을 이어서하고싶을 경우 Ch0-3과Ch0-4의 설치를 다시 해주면되나요?본강의를 듣고 저만의 웹페이지를 만드는게 목표인데 react에 대해 찾아보다가 Create React App(CRA)로 만드는법과 Vite, Next.js로 만드는방법이 있었습니다. 이중 Vite를 고른 이유가 있을까요?빠르다는 장점으로 선택하신건가요? 선택이유가 궁금합니다.

Context 분리하기 강의 중 3분 55초에 나오는 컴포넌트의 계층 구조 표를 보면,기존의 Context를 TodoStateContext와 TodoDispatchContext로 분리하면서 TodoDispatchContext가 TodoStateContext의 하위에 존재하는 것을 봤는데요,이 부분에서 의문이 생긴 것이 TodoStateContext와 TodoDispatchContext가 형제 위치에 존재하면 안되는걸까요..?제 생각에는 TodoDispatchContext가 하위에 존재하지 않고 StateContext와 형제 위치에 있다면 DispatchContext가 todos에 영향을 받지 않아 리랜더링도 발생하지 않을 것 같은데, 해당 방법이 안되는 이유가 있을까요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.교재 구입해서 강의 들으려고 하는데 커리큘럼이 없어졌어요.이제 못 듣게 된건가요?

C.takeAll에서 궁금한 점이 있습니다.C.takeAll가 추가되기 전에 지연평가를 통해 배열에서 하나씩 fade-in 클래스를 달아주고 있었다면추가한 후에는 배열의 지연평가가 모두 끝난 뒤에 달아주는 동작으로 보이더라구요.시작은 다같이 하지만, 먼저 끝나는 것부터 fade-in 클래스를 달아주는 방식은 어떻게 해야할지 감이 안옵니다.혹여나 앞에 이해가 잘못된 것이 있다면 편하게 알려주세요. 감사합니다!

노션에 있는 소스코드 다운로드 링크의 접속이 안됩니다. 구글과 네이버 두개의 링크로 접속했을때의 사진을 첨부해드립니다.혹시 코드를 받을 다른방법이있을까요? 깃허브를 알려주시면 거기서라도 다운로드하겠습니다

class MainActivity:ReactActivity(){// ...overridefunonCreate(savedInstanceState: Bundle?){super.onCreate(null)}// ...}공식문서와 강의에는 위의 코드로 진행해주셨는데수업노트에overridefunonCreate(savedInstanceState: Bundle?) { if (savedInstanceState == null) { SplashScreen.show(this) } super.onCreate(savedInstanceState) }이렇게 코드가 적혀있어서 문의드립니다. 수업노트 부분의 코드가 맞는 것이지요?

console.log 를 해도 vscode 터미널상에서 로그가 뜨지 않는데,찾아보니 최신 ReactNative버전에선 React Native DevTools를 사용하라는 말이 있더라구요. 혹시 React Native DevTools에서 console.log를 확인하는 방법이 있을까요? 단순히 j눌러서 열고 "회원가입하기" 버튼 눌러도 로그가 안나오네요...ㅠㅠ      // package.json { "name": "community", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "test": "jest --watchAll", "lint": "expo lint" }, "jest": { "preset": "jest-expo" }, "dependencies": { "@expo/vector-icons": "^14.0.2", "@react-navigation/bottom-tabs": "^7.2.0", "@react-navigation/native": "^7.0.14", "expo": "~52.0.37", "expo-blur": "~14.0.3", "expo-constants": "~17.0.7", "expo-font": "~13.0.4", "expo-haptics": "~14.0.1", "expo-linking": "~7.0.5", "expo-router": "~4.0.17", "expo-splash-screen": "~0.29.22", "expo-status-bar": "~2.0.1", "expo-symbols": "~0.2.2", "expo-system-ui": "~4.0.8", "expo-web-browser": "~14.0.2", "react": "18.3.1", "react-dom": "18.3.1", "react-native": "0.76.7", "react-native-gesture-handler": "~2.20.2", "react-native-reanimated": "~3.16.1", "react-native-safe-area-context": "4.12.0", "react-native-screens": "~4.4.0", "react-native-web": "~0.19.13", "react-native-webview": "13.12.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/jest": "^29.5.12", "@types/react": "~18.3.12", "@types/react-test-renderer": "^18.3.0", "jest": "^29.2.1", "jest-expo": "~52.0.4", "react-test-renderer": "18.3.1", "typescript": "^5.3.3" }, "private": true }

강의대로 했는데 왜 오류가 나죠??

안녕하세요 소스 올려진 git링크 알 수 있을까요?

안드로이드로 실행하고 있고 앱 아이콘까지 성공하였습니다. 그런데 app. tsx에function Section({children, title}: SectionProps): React.JSX.Element { useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 1000); }); const isDarkMode = useColorScheme() === 'dark';이 코드를 올리면 Cannot read property 'hide' of null 이라고 뜹니다. 그래서 시도해본 방법은-metro 서버 연겨리도 다시해보고-js hide 호출위치를 app()쪽에도 해보고-mainActivity 코드에 SplashScreen.show(this);코드가 잘 있는지 확인도 하고-gradle.properties에 android.enableJetifier=true추가해보고-androidmanifest의 activity에 android:theme="@style/SplashTheme"이 부분도 추가해보고-styles.xml에resource부분에 <!-- ① 스플래시 화면용 테마 --> <style name="SplashTheme" parent="Theme.AppCompat.Light.NoActionBar"> <!-- launch_screen.xml(layout) 을 배경으로 사용 --> <item name="android:windowBackground">@layout/launch_screen</item> </style> <!-- ② 앱 전체용 기본 테마 --> <style name="AppTheme" parent="Theme.AppCompat.DayNight.NoActionBar"> <!-- 여기에 앱 전체 스타일 아이템들을 넣으세요 --> <!-- 예: 상태바 색상, 기본 버튼 스타일 등 --> </style>이렇게도 넣어보아도 앱이 켜지려다가 바로 꺼져버립니다. 로그도 따로 안남고.. 혹시 이 부분에서 왜 이렇게 되고 해결방안이 있을까요??

localhost:3000 하는데 Home Page 가 안뜨고 Hello world 가 뜨는 이유가 뭔가요 ?  코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

버튼 컴포넌트 onClick={handleClick()} jsx 에서 위처럼 적으면 자바스크립트에서 엔진에서 즉시실행함수로 인식하는것 처럼 인식을 해서 렌더링이 되기도전에 함수를 먼저 실행해버리는 현상이 생기는 이유가 맞을까요? 결국 핸들러 함수의 기능도 하지못하고1회용으로 즉시실행되고 소멸해버리는 함수가 되어버리는 것 같아보이는데 이에 대한 정확한 설명이 있을까요? 제가 생각한 이 부분에 보충적으로 필요한 설명을 혹시 해주실 수 있으실까요?

Stack// 숙제: Stack을 LinkedList로 구현하기(단, 시간복잡도는 O(1)) class Stack { tail = null; length = 0; // 가장 마지막에 노드 추가 push(value) { // 새로운 tail이 될 node 생성 const node = new Node(value); // 바꿔치기를 위해 현재 tail은 curr 변수에 저장 const curr = this.tail; // 새로운 tail을 추가하기 this.tail = node; this.tail.prev = curr; // stack의 길이 추가 this.length++; // 길이 리턴 return this.length; } // 가장 마지막 노드 제거 pop() { if (!this.tail) { // tail이 없는 경우 pop할 값이 없기 때문에 아무 동작도 하지 않음 } else { // pop될 node의 value를 변수에 저장 > 리턴 예정 const value = this.tail?.value; // 현 tail의 prev 값을 변수에 할당 > 새 tail이 될 예정 const prev = this.tail.prev; // 바꿔치기 this.tail = prev; // stack의 길이 줄이기 this.length--; // pop된 기존 tail의 value 리턴 return value; } } // Stack의 가장 마지막 원소 조회 top() { return this.tail?.value; } } class Node { prev = null; constructor(value) { this.value = value; } } const stack = new Stack(); console.log(stack); console.log(stack.push(3)); // 1 console.log(stack.push(1)); // 2 console.log(stack.push(5)); // 3 console.log(stack.push(2)); //4 console.log(stack.push(4)); //5 console.log(stack.pop()); // 4 > pop된 가장 마지막 값 리턴 console.log(stack.top()); // 2 console.log(stack.pop()); // 2 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 5 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 1 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // 3 > pop된 가장 마지막 값 리턴 console.log(stack.pop()); // undefined console.log(stack.top()); // undefined console.log("stack"); Queue// 숙제: Queue를 LinkedList로 구현하기(단, 시간복잡도는 O(1)) class Queue { head = null; tail = null; length = 0; // 가장 마지막에 노드 추가 enqueue(value) { const node = new Node(value); if (!this.head) { this.head = node; } else { let currHead = this.head; while (currHead.next) { currHead = currHead.next; } currHead.next = node; } const currTail = this.tail; this.tail = node; this.tail.prev = currTail; this.length++; return this.length; } // 가장 맨 앞 노드 제거 dequeue() { // head는 다음 값으로 변경 const value = this.head.value; this.head = this.head.next; // tail에 연결된 가장 맨 앞 값 삭제 => 가장 맨 앞에서 두번째의 prev를 null로 만든다 let currTail = this.tail; let prevTail; while (currTail?.prev) { prevTail = currTail; currTail = currTail.prev; } if (prevTail?.prev) { prevTail.prev = null; } else { this.tail = null; } this.length--; return value; } // Queue에서 가장 앞 쪽에 있는 값 조회 peek() { return this.head.value; } } class Node { prev = null; next = null; constructor(value) { this.value = value; } } const queue = new Queue(); console.log(queue.enqueue(1)); // 1 console.log(queue.enqueue(3)); // 2 console.log(queue.enqueue(5)); // 3 console.log(queue.enqueue(2)); // 4 console.log(queue.enqueue(4)); // 5 console.log(queue.peek()); // 1 console.log("dequeue"); console.log(queue.dequeue()); // 1 console.log(queue.dequeue()); // 3 console.log(queue.dequeue()); // 5 console.log(queue.dequeue()); // 2 console.log(queue.dequeue()); // 4 console.log("queue");

10:04에서의 문법을 보면 div안에 {}가 들어간 것이 아니라 {}안에 div태그를 넣는데 제대로 동작하는 것을 보면 그렇다고 생각합니다.

안녕하세요.항상 좋은 인사이트와 경험을 공유해주셔서 감사드립니다.최근 프론트엔드 개발을 공부하면서 "Content Attribute"와 "IDL Attribute"의 사용 방식에 대해 고민하게 되었습니다. 이를 정리해보면서 나름대로 다음과 같은 결론에 이르렀습니다.Content Attribute는 변하지 않는 어트리뷰트 값이나 리소스를 표현할 때 사용하고,그 외, 동적으로 핸들링이 필요한 경우에는 IDL Attribute를 사용하는 것이 맞다고 이해하고 있습니다.이러한 개념을 공부하면서, 현업에서 다양한 코드들을 보게 되었는데요, 특히 주니어 개발자분들이 작성한 코드에서는 Content Attribute를 많이 사용하는 반면, 시니어 개발자나 CTO급 분들의 코드에서는 Content Attribute 사용이 상대적으로 적고, 대부분 IDL Attribute를 적극적으로 사용하는 모습을 많이 볼 수 있었습니다.이런 현상을 보며 자연스럽게 궁금증이 생겼습니다.왜 경험 많은 개발자일수록 Content Attribute 사용이 줄어드는 걸까?Content Attribute 방식과 IDL Attribute 방식에 대해 어떻게 생각하시고, 어떤 기준으로 선택하시는지 궁금합니다.혹시 이 부분에 대해 간단히 의견을 들려주실 수 있다면 큰 도움이 될 것 같습니다.(물론 바쁘시다면 답변 주시지 않아도 괜찮습니다! 이렇게 질문을 정리하는 과정만으로도 많은 공부가 되고 있습니다.)읽어주셔서 감사합니다.좋은 하루 되세요.

2분 22초에서 return 문 앞에 const sunriseData = weatherData ? new Date(weatherData.sys.sunrise);이렇게 코드를 적었는데 이후의 코드에서는 갑자기 보이지 않아 이 코드는 어디가고이후의 return 앞에는 이 코드가 오게 되었는지 궁금합니다.const formatTime = timestamp => { const date = new Date((timestamp - 9 * 3600) * 1000); // UTC timestamp에 9시간 추가 return date.toLocaleTimeString([], {hour: '2-digit', minute: '2-digit'}); // 로컬 시간으로 포맷 }; 제가 이해할 때는 sunriseData가 wetherData의 unixtime을 현재 우리가 보는 시간으로 바꾸어 저장하는 것인데...아래의 formatTime은 sunriseData를 대체한 코드인가요?(시차도 적용한?)

p id =one onclick=show() 1. five 오브젝트를 클릭할때 one onclick 이벤트삭제2. five 오브젝트를 클릭할때 one onclick null 로 재할당2번을 쓰게 되는 경우가 어떤경우가 일까요?1번방법이 일반적으로 쓰게될 것 같다는 생각이 듭니다

 import "./Main.css";나import "../Main.css"; 둘다 해봤는데css를 컴포넌트로 불러오기 오류떠요 ㅠㅠ

./forest.png 파일은 어디서 다운 받을 수 있을까요? 보이지 않는 것 같습니다.

안녕하세요. 리액트 초보입니다. 이해하기 쉽게 설명해주셔서 감사합니다. 11.3) Context 분리하기 강의 약 7분 쯤에서 궁금한 부분이 있어서 질문 남깁니다.  <TodoDispatchContext.Provider> 를 통해 context를 전달할 때, 함수를 캐싱하기 위해 강의에서는 아래와 같이 useMemo를 사용해주셨는데요! const memoizedDispatch = useMemo(() => { return { onCreate, onUpdate, onDelete }; }, []); 우선 최적화하고자 한 이유는 아래와 같다고 이해했습니다. onCreate, onUpdate, onDelete 모두 한 번 생성한 후에 바뀌지 않는 함수로, TodoDispatchContext를 참조하는 자식 컴포넌트들의 리렌더링 방지  그리고 useMemo를 사용하신 부분에서는 마운트 후 onCreate, onUpdate, onDelete는 변하지 않는 함수 이므로 "값을 캐싱한다"는 의미에서 useMemo를 사용해주셨다고 이해했습니다. 다만 useCallback도 mount 후 deps 변경 전에는 함수의 중복 생성을 방지한다는 점에서는 useCallback을 사용해도 좋을 것 같단 생각이 들었는데요, 결론적으로 제가 궁금한 부분은 아래와 같습니다. useMemo 대신 useCallback을 사용해서도 동일하게 최적화 할 수 있다고 이해했는데, 제가 이해한 게 맞을까요? 1번이 맞다면 강의에서 useMemo를 사용해주신 이유는 캐싱하기 위함(의도)을 표현하기 위함이라고 이해하면 될지도 궁금합니다! 실무에서는 useMemo와 useCallback을 모두 사용할 수 있는 경우 어떤 훅을 선택하시는지, 강의에서 useMemo를 통해 캐싱하신 이유가 궁금했습니다 ! 블로그를 찾아봐도 잘 이해가 되지 않아서 질문으로 남깁니다! 답변 주시면 감사하겠습니다!