마지막 최적화 강의에서 코드 수정 후에 정환님이 인덱스 페이지가 정적 페이지로 동작된다하셨는데 빌드 때에는 f로 dynamic 페이지로 표시됩니다. 혹시 이 부분은 정적 페이지임을 어떻게 알 수 있을까요?

안녕하세요 조은님! 앞서 작성했던 질문 글에 다 작성하며 너무 길어질 것 같아 이렇게 나눠서 적게 되었습니다 ㅎㅎ; Q3. 강의에서 즉시 실행함수는 스코프를 제한해주기 위해서 사용한다고 이해를 했는데, 이건 혹시 모를 변수 중복 위험을 제한하기 위해서일까요?? 이 외에도 강사님께서 즉시 실행 함수를 사용하는 일반적인 케이스나 즉시 실행함수를 사용하면 좋은 케이스들이 있다면 배워가고 싶습니다! Q4. 추가로 dangerouslySetInnerHTML를 사용하는 이유에 대해서 여쭤보고 싶습니다!제가 찾아봤을 때는 React에서 HTML 사용에 위험성을 알리기 위해서는 dangerouslySetInnerHTML를 사용해라. 라는 것까지는 확인을 했습니다! 하지만 기능적으로 특별한 기능을 하는 것 같지는 않은데.. dangerouslySetInnerHTML이 사용되는 다른 이유가 있을지에 대해 여쭤보고 싶습니다!

안녕하세요. 조은님 :) 이번에 다크 모드 관련 내용을 수강하면서 head 태그를 작성하는 부분에서 작은 의문이 생겨 질문 드리게 되었습니다.  Q1. 이번 강의 중 다크모드 설정을 localStorage에서 가져오는 부분에서 head에서 script를 사용하는 이유에 대해서 알 수 있을까요?? fouc 문제를 막기위해서 저렇게 사용한다고 검색을 통해 알게 되었는데, 이 의도 맞을지 혹시 또 다른 이유가 있을지에 대해서 여쭤보고 싶습니다! Q2. 이어지는 질문으로 관련해서 공부를 하다보니 NextJS에서 제공하는 Head tag와 Script tag가 있는 걸 알게 되었습니다. 혹시 해당 태그들을 사용하지 않고 순수 HTML로 작성하신 이유에 대해서 궁금증이 생겨 여쭤보고 싶습니다! 가능하다면 두 개의 차이점에 대해서도 여쭤보고 싶습니다! 

안녕하세요. 실습 시작 강의에서 node.js설치법이 강의 노트에 있다고 하는데, 안보여서 질문 드립니다.개인적으로 다운 받아 설치 코자 하는데, Docker, fnm 중에서 어떤 걸 선택해야 하는지 모르겠네요혹, 제가 노트에서 못 찾고 있다면 노트 위치를 설명해 주심 감사하겠습니다. 답변 부탁드립니다. 

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.왼쪽의 화면처럼만 뜹니다.그리고 강사처럼 npm start만 하면 이런 오류가 떠서cd my-app , npm start하면 그나마 실행되는데 위의 사진처럼 결과 리액트가 아니라 로딩화면같이 뜹니다. 어떻게 해결해야하나요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.어떻게 해결해야할까요?

모달 구현 후 북 상세 클릭 시 뒤 화면 스크롤이 하단으로 내려갑니다. 정환님 화면에서는 그렇지 않은데, 저는 스크롤이 하단으로 내려가서 부자연스럽게 동작하네요. 차이는 저는 윈도우입니다. 혹시 이유를 아실까요? .

 1) prefetching 이 초기 1회만 발생하는지, 페이지를 이동할때마다 해당 페이지에 맞춰서 발생하는지가 궁금합니다.초기 접속이후에는 CSR 방식으로 동작해서 서버에서 렌더링이 발생하지 않는다고 배웠는데,이동 가능한 페이지에 대해서 prefetching 한다고 하니,인덱스 페이지에서 바로 이동 가능한 페이지가 아닌 경우 (특정 페이지를 통해서만 이동가능한 페이지)의 prefetching은 어떤식으로 처리되는지가 궁금합니다. 2) 초기접속시 전달받는 JS Bundle에는 인덱스 페이지에서 이동 가능한 페이지들에 대한 JS 파일만 구성되어 있는 것인지 궁금합니다. 그 이후에 다른 페이지에 이동 요청을 보내면 필요에 따라 JS Bundle을 추가로 서버에서 전달받는 건가요?

nextjs dev모드로 실행하다가 코드 저장하면 자꾸 서버 다운될 때도 많고, 코드 새로 수정해도 반영 안 될 때가 있어서, 서버 껐다 키는 경우가 빈번한데.. 이런거 해결하는 방법 없나요.. 제 컴퓨터에서는 nextjs가 너무 무거워서 리로드 하는 시간도 너무 오래 걸려서요 ㅠㅠ

말씀하신 것을 어떻게 해야 할지 모르겠습니다.api.json 파일을 생성했는데, 이곳에 어떤 데이터를 넣으면 될까요??아래 링크 주신 것들을 하나하나 넣어봤는데, 되지는 않았습니다. ㅠㅠ

안녕하세요 강의 잘 보고 있습니다. 컨텍스트도 많이 사용하면 성능 저하가 생길 것으로 예상됩니다. 그래서 컨텍스트와 프로퍼티 선택 기준이 궁금한데,실무에선 보통 프로퍼티로 우선 사용하고 하위 컴포넌트들이 특정 개수 이상이 되면 컨텍스트로 변경을 하나요?아니면 처음부터 컨텍스트로 정의해 놓고 불필요한 컨텍스트를 프로퍼티로 변경하나요? 감사합니다

확실히 expo 버전으로 프로젝트를 생성하면, 영상처럼 진행이 되지 않습니다 ㅠㅠ 프로젝트 설치 및 실행 과정은 다음과 같습니다.기종: Androidnpx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기강의와 달리, expo로 빌드하셨다면npx expo install expo-location를 설치해주신 다음에 useEffect 함수 부분을 다음과 같이 변경해주면 됩니다.(Expo는 자체 위치 서비스 API를 제공하므로, @react-native-community/geolocation 대신 expo-location을 사용해야 합니다.)useEffect(() => { const getLocation = async () => { try { // 위치 권한 요청 let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setError('위치 권한이 거부되었습니다'); setLoading(false); return; } // 현재 위치 가져오기 let location = await Location.getCurrentPositionAsync({}); const { latitude, longitude } = location.coords; fetchWeather(latitude, longitude); } catch (err) { setError(err.message); setLoading(false); } }; getLocation(); }, []);다음으로 OpenWeatherMap API는 기본적으로 켈빈 온도를 반환합니다. 따라서 섭씨로 변환하는 코드를 추가해야 합니다.각자 가져오신 API 값 뒤에 &units=metirc 를 추가해주시면 됩니다. 전체 코드는 다음과 같습니다.import { StatusBar } from 'expo-status-bar'; import { useEffect, useState } from 'react'; import { ActivityIndicator, Text, View } from 'react-native'; import styled from 'styled-components/native'; import * as Location from 'expo-location'; const Container = styled.View` align-items: center; margin-top: 40px; background-color: #222222; flex: 1; `; const MainTemp = styled.Text` font-size: 80px; color: white; `; const Addition = styled.View` background-color: #aeaeae; width: 150px; height: 150px; margin: 15px; align-items: center; justify-content: center; border-radius: 15px; `; const App = () => { const [weatherData, setWeatherData] = useState(null); const [loading, setLoading] = useState(true); const [error, setError] = useState(null); useEffect(() => { const getLocation = async () => { try { // 위치 권한 요청 let { status } = await Location.requestForegroundPermissionsAsync(); if (status !== 'granted') { setError('위치 권한이 거부되었습니다'); setLoading(false); return; } let location = await Location.getCurrentPositionAsync({}); const { latitude, longitude } = location.coords; fetchWeather(latitude, longitude); } catch (err) { setError(err.message); setLoading(false); } }; getLocation(); }, []); const fetchWeather = async (latitude, longitude) => { try { const response = await fetch( `https://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&appid=<<개인 API값>>&units=metric` ); // <<>>는 지우셔야 합니다. if (!response.ok) { throw new Error('Network response was not ok'); } const data = await response.json(); setWeatherData(data); } catch (error) { setError(error.message); } finally { setLoading(false); } }; if (loading) { return ( <Container> <ActivityIndicator size="large" color="#ffffff" /> </Container> ); } if (error) { return ( <Container> <Text style={{ color: 'white', fontSize: 20 }} >{`Error: ${error}`}</Text> </Container> ); } if (!weatherData) { return ( <Container> <Text style={{ color: 'white', fontSize: 20 }}>No data available</Text> </Container> ); } const { main: { temp, feels_like, humidity, temp_max, temp_min }, wind: { speed }, weather, } = weatherData; return ( <Container> <StatusBar /> <Text style={{ fontSize: 20, marginTop: 40, color: 'white' }}> {weatherData.name} </Text> <MainTemp>{Math.round(temp)}℃</MainTemp> <Text style={{ fontSize: 24, color: 'white' }}>{weather[0].main}</Text> <View style={{ flexDirection: 'row' }}> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 체감 온도 </Text> <Text style={{ color: 'white', fontSize: 18 }}> {Math.round(feels_like)}℃ </Text> </Addition> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 습도 </Text> <Text style={{ color: 'white', fontSize: 18 }}>{humidity}%</Text> </Addition> </View> <View style={{ flexDirection: 'row' }}> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 최고/최저 온도 </Text> <Text style={{ color: 'white', fontSize: 18 }}> {Math.round(temp_max)}℃/{Math.round(temp_min)}℃ </Text> </Addition> <Addition> <Text style={{ color: 'white', fontSize: 20, marginTop: -40, marginBottom: 30, }} > 풍속 </Text> <Text style={{ color: 'white', fontSize: 18 }}>{speed} m/s</Text> </Addition> </View> <View></View> </Container> ); }; export default App;  

서버 배포후 제공해주는 쿠키의 domain이, .naver.com이고, 만약 로컬호스트로 개발 할 경우 localhost의 도메인을 갖게되어, 둘의 도메인이 달라, 쿠키가 담기지 않는 경우가 발생합니다. 모든 통신 요청을 서버와 직접 진행 할 경우, .naver.com의 쿠키로, 모든것이 공유가 가능하니, 정상적으로 접근이 가능한 것 같은데이제 간혹, 라우트 핸들러나, 미들웨어를 거쳐서, 통신 할 경우 도메인이 localhost가 되어, 401 에러가 발생하게 됩니다!!이를 해결하기 위해, 로컬에서 두개의 서버를 띄워서 테스트하는 방법말고, 보통 실무나, 현업에서는 배포된 쿠키 로그인 방식을 활용할 떄, 어떻게 Next.js에서 환경 구성을 하는지, 로컬호스트가 아닌, 다른 도메인으로 띄울 수 있는 방법이 있는지 궁금합니다.

계산기 앱 개발과 마찬가지로, 다음과 같은 프로젝트 설치 및 실행을 진행하였습니다.<기종 : Android>npx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기이전 강의(레이아웃 구성하기)의 중간(7:23)에 나오는 텍스트 창을 클릭하면 UI가 따라 올라가는 것을 방지하기 위한 설정방법이 제 것에서는 나타나지 않았습니다. 검색 창에 windowsoftinputmode 또는 AndroidManifest를 검색해도 나타나지 않았습니다.(아무래도, 제가 설치를 잘못해서 나타났거나 expo로 빌드했기에 나타나지 않는 것 같습니다. VSCode는 기존에 사용했던 터라 해당되지 않는 것 같습니다.) 이를 해결하기 위해,Picker를 감싸고 있는 View를 Wrapper라고 이름을 변경한 후에, postion: absolute 속성을 부여했습니다. +) 텍스트 입력 글자가 꽤 길어지면, 줄바꿈이 되지 않고 글자가 잘려나가는 현상이 있습니다. 이를 해결하는 방법으로는 multiline={true}를 추가해주면 됩니다.코드는 아래와 같습니다.import { StatusBar } from 'expo-status-bar'; import React, { useState } from 'react'; import { Text, TextInput, View, Dimensions } from 'react-native'; import Translator from 'react-native-translator'; import styled from 'styled-components/native'; import { Picker } from '@react-native-picker/picker'; const Container = styled.View` background-color: #181818; flex: 1; padding-top: 20px; `; const Wrapper = styled.View` position: absolute; top: 40px; left: 0; right: 0; padding-horizontal: 10px; `; const InputView = styled.View` background-color: #606060; height: 250px; justify-content: left; align-items: start; padding: 10px; border-radius: 10px; margin-bottom: 80px; `; const ResultView = styled(InputView)` background-color: #0084ff; margin-bottom: 10px; `; const App = () => { const [value, setValue] = useState(''); const [result, setResult] = useState(''); const [fromLang, setFromLang] = useState('en'); const [toLang, setToLang] = useState('ko'); return ( <Container> <StatusBar style="light" /> <Translator from={fromLang} to={toLang} value={value} onTranslated={(t) => setResult(t)} /> <Wrapper> <Picker style={{ marginBottom: 10, backgroundColor: '#606060' }} selectedValue={fromLang} onValueChange={(itemValue) => setFromLang(itemValue)} > <Picker.Item label="한국어" value="ko" /> </Picker> <InputView> <TextInput style={{ fontSize: 24, color: 'white' }} value={value} onChangeText={(t) => setValue(t)} multiline={true} placeholder="번역할 텍스트 입력" /> </InputView> <Picker style={{ marginBottom: 10, backgroundColor: '#0084ff' }} selectedValue={toLang} onValueChange={(itemValue) => setToLang(itemValue)} > <Picker.Item label="영어" value="en" /> </Picker> <ResultView> <Text style={{ fontSize: 24, color: 'white' }}>{result}</Text> </ResultView> </Wrapper> </Container> ); }; export default App; ps) 간혹 글자를 입력하면 즉각 번역되지 않고, 번역되는 아래쪽 Picker를 클릭한 후에야 동작하긴 합니다. 이를 해결하기 위해서는 useEffect를 사용하면 해결되지만 강의에서는 다루지 않아 코드에 반영하지 않았습니다. GPT가 잘 알려주니까 궁금하신 분들은 해보시면 좋을 것 같습니다~ ps) 업데이트 하시면서, 영상이 잘못배치된 것 같습니다~ 번역앱 원리와 이해 부분에 코인에 관한 영상이 재생됩니다. 코인 관련, 날씨앱에서는 이상이 없었습니다~ 좋은 강의 감사합니다~!! 덕분에 많은 도움이 되고 있습니다.

제가 설치를 이상하게 했는지, 잘 되지 않아 저는 프로젝트 생성을 다음과 같은 절차로 진행했습니다.npx create-expo-app <앱 이름> --template세 번째(blank) :typescript 선택npx expo start를 실행expo 앱에서 QR 코드로 보기위와 같은 절차를 거쳐, 복붙으로도 진행해봤을 때의 문제점은 안드로이드 기준으로 기호들이 나타나지 않는다는 점이었습니다. 무지성으로 복붙한 것이 문제였는데요. 문제는 margin 값들의 값이 컸기 때문이었습니다. 혹시 저 같이 잘 안 되시는 분들이 있을까 하여, 좀 헤맸던 기록으로 남깁니다~ ps. 아래 별도로 올려주신 코드 중에 const [result, setResult] = useState('') 에서 useState('0')으로 변경이 필요합니다. 그리고 알려주신 코드를 복붙해서 했을 때 제대로 나오지 않아, GPT의 도움을 받아 수정해보았습니다.import React, { useState } from 'react'; import { Text, View } from 'react-native'; import MaterialIcons from 'react-native-vector-icons/MaterialIcons'; import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons'; import Entypo from 'react-native-vector-icons/Entypo'; import FontAwesome6 from 'react-native-vector-icons/FontAwesome6'; import styled from 'styled-components/native'; import { evaluate } from 'mathjs'; const NumberButton = styled.TouchableOpacity` background-color: #b6b6b6; width: 65px; height: 65px; border-radius: 35px; margin: 8px; align-items: center; justify-content: center; `; const OperatorButton = styled(NumberButton)` background-color: #0084ff; `; const NumberText = styled.Text` font-size: 30px; color: white; `; const ResultText = styled.Text` font-size: 65px; padding: 20px; margin-top: 50px; color: white; text-align: right; `; const App = () => { const [input, setInput] = useState(''); const [result, setResult] = useState('0'); const handlePress = (value) => { const newInput = input + value; setInput(newInput); setResult(newInput); // 입력값을 바로 결과창에 표시 }; const handleOperation = (op) => { if (input && !['+', '-', '*', '/'].includes(input.slice(-1))) { const newInput = input + op; setInput(newInput); setResult(newInput); // 연산자도 바로 결과창에 표시 } }; const calculate = () => { try { const calculatedResult = evaluate(input).toString(); setResult(calculatedResult); setInput(calculatedResult); // 계산 결과를 새로운 입력값으로 설정 } catch (e) { setResult('Error'); setInput(''); } }; const clear = () => { setInput(''); setResult('0'); }; return ( <View style={{ flex: 1, backgroundColor: '#181818' }}> <ResultText>{result}</ResultText> <View style={{ flex: 1, justifyContent: 'flex-end', paddingBottom: 20 }}> <View style={{ flexDirection: 'row', justifyContent: 'center' }}> <View style={{ paddingRight: 20 }}> <View style={{ flexDirection: 'row', flexWrap: 'wrap', width: 250 }} > {[...Array(10).keys()].reverse().map((num) => ( <NumberButton key={num} onPress={() => handlePress(num.toString())} > <NumberText>{num}</NumberText> </NumberButton> ))} <NumberButton onPress={clear}> <MaterialIcons name="restart-alt" size={30} color="white" /> </NumberButton> <NumberButton onPress={() => handlePress('.')}> <Entypo name="dot-single" size={30} color="white" /> </NumberButton> </View> </View> <View style={{ marginTop: -81 }}> <OperatorButton onPress={calculate}> <MaterialCommunityIcons name="equal" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('+')}> <Entypo name="plus" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('-')}> <Entypo name="minus" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('*')}> <Entypo name="cross" size={30} color="white" /> </OperatorButton> <OperatorButton onPress={() => handleOperation('/')}> <FontAwesome6 name="divide" size={30} color="white" /> </OperatorButton> </View> </View> </View> </View> ); }; export default App;

revalidateTag를 사용하더라도 결국 Review page가 모두 리렌더링 되는 것으로 보입니다. 이는 자연스러운 동작일까요? 그렇다면,ReviewDetail에서 사용하고 있는 API (책 상세 정보 가져오기)는 굳이 호출될 필요가 없는데 추가 호출이 되는 것 아닐까요? 이런 상황에서 revalidateTag를 사용하는 게 좋은 방법이 맞는지 궁금합니다!

위에 그림이 제가한 코드를 돌렸을떄 나오는 그림인데 강의 실습에서는 버튼이 새로로 정렬되지않고 위에 붙어있는 형식이런 형식으로 나왔는데 코드에 차이점이 아예 없어 뭐가 문제인지 궁금합니다 

섹션 12. Context의 > 11.3 분리하기에 대한 질문입니다.강의에서 처럼 TodoDispatchContext로 분리한 후 함수인 { onCreate, onUpdate, onDelete } 에 대해 useMemo처리를 함으로 재생성이 일어나지 않도록 하는 것에 대해 잘 이해되었습니다.  그런데 궁금한 것은, 그렇다면 위 객체에서 처리한 useCallback은 필요없는 것은 아닌지요? 문의드립니다. 

안녕하세요? 그랩선생님, 수고가 많으십니다.다름이 아니라 강의 [컴포넌트 사용하기] 강의를 진행하던 중 2가지 에러가 발생하여 질문을 하게 되었습니다.첫번째 에러는 아래 사진으로 첨부합니다.첫번째 에러 사진의 크롬 브라우저 제목은 listing directory / 라고 뜹니다.  그다음에 src디렉토리에 가서 App.js를 열면 첨부사진 처럼 입력된 소스화일 내용이 아래와 같이 뜨는데어떻게 해야 크롬 브라우저로 로고까지 뜨게 되나요?그리고 두번째 에러는 실제 소스 파일 폴더에 가서 App.js 파일을 선택 후 엔터(실행)하니 아래 사진과 같은 에러가 발생하였습니다.--> 이 두가지 에러를 어떻게 하면 해결 할 수 있는지 상세한 설명과 자세한 답변 부탁드립니다.감사합니다.

getTime() 메서드 사용 질문드립니다home pivoteDate -> new Date() startTime, EndTime => getTime()new onSubmit -> onCreate ( input.createdDate.getTime(), input.emotion,input.content ) const [input, setInput] = useState({ createdDate: new Date(), emotionId: 3, content: "", });Edit const onSubmit = (input) => { onUpdate( params.id, input.createdDate.getTime(), input.emotionId, input.content ); }; getTime() 메서드를 썼다 안 썼다 하는 것 같은데 언제 쓰고 안 쓰는지 이유가 궁금합니다.