git clone을 받았는데 vue-news 폴더가 있고 vue-news-ts 폴더가 있습니다. ts는 무엇인가요? 무엇으로 학습해야하는지 문의드립니다. 감사합니다

안녕하세요, 강의 영상을 토대로 .jsx 파일을 chapter_03 폴더에 생성했는데요 영상 속 코드 사진과 다르게 파일을 인식하지 못하는것 같습니다. 이건 어떻게 해결해야할까요?

완강하고 다시 복습했을 떄 자바스크립트만 복습해도 되나요?그리고 깃허브에 올릴떄 배운거 복습한거 올리는 것도 자바스크립트만 올려도 되나요?

안녕하세요! 이제 막 리액트를 배우기 시작한 학생입니다. 다름이 아니라 아주 기초적인 부분인데 .css 파일이 html에 적용되지 않아서요. 이미 질문하기 전에 찾아본 방법으로, 캐시 삭제하기 및 강력 새로고침하는 방법과 herf="styles.css?ver=2"이렇게 새로운 파일임을 인식시켜주는 방법도 사용해보았지만 적용이 되지않습니다. 혹시 이럴땐 어떻게 해야할까요?

안녕하세요 create-react-app을 설치하고create-react-app .를 입력한 후에 계속 이 에러가 떠서 진행을 못하고 있습니다.ㅠEEXIST라는 에러코드인데요.. 일단 저는 sudo npm install -g create-react-app 코드를 이용해서 설치를 했고create-react-app -V라는 코드를 이용해서 create-react-app의 버전이 나옴을 확인해, 설치는 제대로 되었음을 확인했습니다. 그런데 create-react-app . 이 부분을 입력할 때마다 저 에러가 뜹니다.. 어떻게 해결하면 좋을까요?처음부터도 다시 깔아보고, uninstall install도 해보고 npx로도 해봤지만 잘 안됐습니다..

 RestAPI로 배울때 swagger를 만들었던 경험이 있는데, graphql은 그 자체로 swagger의 역할까지 한다고 생각하면 될까요? 뭔가 swagger가 보기에 더 직관적이고 더 설명서 같은 느낌이 있어서 graphql을 사용하면서도 swagger처럼 만들 수 있는 방법이 있는지 여쭤봅니다!

선생님 안녕하세요 ~ 미로탐색(DFS) 문제를 BFS로 풀어보고 싶은데 어떻게 풀어줘야 문제가해결 될까요?? 지나온 길을 체크한 후 BFS에서는 체크를 어떻게 풀어줘야할지 모르겠습니다.. function solution(arr) { let answer = 0; let n = arr.length - 1; let nx = [-1, 0, 1, 0]; let ny = [0, 1, 0, -1]; let queue = []; queue.push([0, 0]); while (queue.length) { let [x, y] = queue.shift(); for (let k = 0; k < 4; k++) { let dx = x + nx[k]; let dy = y + ny[k]; if (dx === n && dy === n) answer++; if (dx >= 0 && dx <= n && dy >= 0 && dy <= n && arr[dx][dy] === 0) { arr[x][y] = 1; queue.push([dx, dy]); } } } return answer; }   

섹션6 '프로젝트 최적화' 강의의 14:30부터 끝 부분까지의 내용 관련 궁금한 점이 있어 질문 드립니다!강의를 들으면서, setstate 함수는 자동으로 useCallback 처리가 되어 반환되는 함수라 생각하면 되고, 따라서 setstate 함수를 props로 전달하면 성능 최적화를 할 수 있다고 이해했는데요,그래서 DiaryEditor 컴포넌트가 자식 컴포넌트인 EmotionItem 에게 onClick={handleClickEmote} 를 props로 전달할 때 onClick={(e) => setEmotion(e)} 와 같이 setEmotion이라는 상태변화 함수를 전달해주면 useCallback을 사용하지 않고도 최적화를 할 수 있을 거라고 생각했습니다!그러나 확인해보니 이 코드로는 최적화가 되지 않는데, 이유가 무엇인지 이해가 잘 되지 않습니다 ㅠㅠ(EmotionItem에 React.memo로 묶어주었습니다!)혹시 제가 잘못 이해한 부분이 있는지 여쭤봐도 괜찮을까요? 아래는 DiaryEditor.js 코드입니다!import { useState, useRef, useContext, useEffect, useCallback } from 'react'; import { useNavigate } from 'react-router-dom'; import { DiaryDispatchContext } from './../App'; import EmotionItem from './EmotionItem'; import MyHeader from './MyHeader'; import MyButton from './MyButton'; import { getStringDate } from '../util/data'; import { emotionList } from '../util/emotion'; const DiaryEditor = ({ isEdit, originData }) => { const contentRef = useRef(); const [content, setContent] = useState(''); const [emotion, setEmotion] = useState(3); const [date, setDate] = useState(getStringDate(new Date())); const navigate = useNavigate(); const { onCreate, onEdit, onRemove } = useContext(DiaryDispatchContext); const handleClickEmote = useCallback((emotion) => { setEmotion(emotion); }, []); const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } if ( window.confirm( isEdit ? '일기를 수정하시겠습니까?' : '새로운 일기를 작성하시겠습니까?' ) ) { if (!isEdit) { onCreate(date, content, emotion); } else { onEdit(originData.id, date, content, emotion); } } navigate('/', { replace: true }); }; const handleRemove = () => { if (window.confirm('정말 삭제하시겠습니까?')) { onRemove(originData.id); navigate('/', { replace: true }); } }; useEffect(() => { if (isEdit) { setDate(getStringDate(new Date(parseInt(originData.date)))); setEmotion(originData.emotion); setContent(originData.content); } }, [isEdit, originData]); return ( <div className='DiaryEditor'> <MyHeader headerText={isEdit ? '일기 수정하기' : '새 일기 쓰기'} leftChild={ <MyButton onClick={() => navigate(-1)} text={'< 뒤로가기'} /> } rightChild={ isEdit && ( <MyButton onClick={handleRemove} text={'삭제하기'} type={'negative'} /> ) } /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className='input_box'> <input className='input_date' value={date} onChange={(e) => setDate(e.target.value)} type='date' /> </div> </section> <section> <h4>오늘의 감정</h4> <div className='input_box emotion_list_wrapper'> {emotionList.map((it) => ( <EmotionItem onClick={handleClickEmote} isSelected={it.emotion_id === emotion} key={it.emotion_id} {...it} /> ))} </div> </section> <section> <h4>오늘의 일기</h4> <div className='input_box text_wrapper'> <textarea ref={contentRef} value={content} onChange={(e) => setContent(e.target.value)} placeholder='오늘은 어땠나요?' ></textarea> </div> </section> <section> <div className='control_box'> <MyButton text={'취소하기'} onClick={() => navigate(-1)} /> <MyButton text={'작성완료'} type={'positive'} onClick={handleSubmit} /> </div> </section> </div> </div> ); }; export default DiaryEditor;

아무리 구글링 유튜브 찾아 봐도 알수가 없네요mock-sever 주소 크롬 주소창에 넣으면 분명히 자료가 잘 나오는데 vs코드에서 실행 하면 위에 처럼 에러가 나옵니다. 선생님 해결좀 부탁드립니다.수업을 나갈수가 없네요. 

넷플릭스 공식사이트 만들기에서 header에 padding 35px 55px을 주니까 가로스크롤이 생깁니다. 어떻게하면 없앨 수 있을까요?

상품 상세 페이지에서 구매 버튼을 누르게 되면,해당 상품의 soldout값이 1로 바뀌게고 적용 완료.그 이후 자동으로 구매 버튼이 회색으로 다시 바뀌겠끔도 구현 완료 그 이후 뒷 페이지로 돌아갔을 때, 상품 목록에서 blur처리 되는 기능이 구현되지 않아 이 방법이 궁금합니다.뒤로가기 버튼을 눌렀을 때는 해당 페이지가 새로 불러와지는 로직이 아닌가요? // Main페이지 코드 import { StatusBar } from "expo-status-bar"; import { StyleSheet, Text, View, Image, ScrollView, Dimensions, TouchableOpacity, Alert } from "react-native"; import React, {useEffect, useState} from "react"; import axios from "axios"; import dayjs from "dayjs" import relativeTime from "dayjs/plugin/relativeTime" import "dayjs/locale/ko" import Carousel from "react-native-reanimated-carousel" import { API_URL } from "../config/constants"; import AvatarImage from "../assets/icons/avatar.png"; dayjs.extend(relativeTime); dayjs.locale("ko"); export default function MainScreen(props) { const [products, setProducts] = useState([]); const [banners, setBanners] = useState([]); const getProduct = () => { axios .get(`${API_URL}/products`) .then((result) => { console.log(result); setProducts(result.data.products) }) .catch((error) => { console.error(error); }); } useEffect(() => { getProduct(); axios .get(`${API_URL}/banners`) .then((result) => { setBanners(result.data.banners); }) .catch((error) => { console.error(error); }) }, []); return ( <View style={styles.container}> <ScrollView> <Carousel data={banners} width={Dimensions.get("window").width} height={200} autoPlay={true} sliderWidth={Dimensions.get("window").width} itemWidth={Dimensions.get("window").width} itemHeight={200} renderItem={(obj) => { return ( <TouchableOpacity onPress={() => { Alert.alert("배너 클릭"); }} > <Image style={styles.bannerImage} source={{ uri: `${API_URL}/${obj.item.imageUrl}`}} resizeMode="contain" /> </TouchableOpacity> ); }} /> <Text style={styles.Headline}>판매되는 상품들</Text> <View sytle={styles.productList}> {products.map((product, index) => { return ( <TouchableOpacity onPress={() => { props.navigation.navigate("Product", { id: product.id }) }}> <View style={styles.productCard}> {product.soldout === 1 && ( <View style={styles.productBlur} /> )} <View> <Image style={styles.productImage} source={{ uri: `${API_URL}/${product.imageUrl}`, }} resizeMode={"contain"} /> </View> <View style={styles.productContents}> <Text sytle={styles.productName}> {product.name} </Text> <Text sytle={styles.productPrice}> {product.price}원 </Text> <View style={styles.productFooter}> <View style={styles.productSeller}> <Image style={styles.productAvatar} source={AvatarImage} /> <Text style={styles.productSellerName} > {product.seller} </Text> </View> <Text style={styles.productDate}> {dayjs(product.createdAt).fromNow()} </Text> </View> </View> </View> </TouchableOpacity> ); })} </View> </ScrollView> </View> ); } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff", padding: 32, }, productCard: { width: 320, borderColor: "rgb(230,230,230)", borderWidth: 1, borderRadius: 16, backgroundColor: "white", marginBottom: 8, }, productImage: { width: "100%", height: 210, }, productContents: { padding: 8, }, productSeller: { flexDirection: "row", alignItems: "center", }, productAvatar: { width: 24, height: 24, }, productFooter: { flexDirection: "row", justifyContent: "space-between", alignItems: "center", marginTop: 12, }, productName: { fontSize: 16, }, productPrice: { fontSize: 18, fontWeight: "600", marginTop: 8, }, productSellerName: { fontSize: 16, }, productDate: { fontSize: 16, }, productList: { alignItems: "center", }, Headline: { fontSize: 24, fontWeight: "800", marginBottom: 24, }, productBlur: { position: "absolute", top: 0, bottom: 0, left: 0, right: 0, backgroundColor : "#ffffffa6", zIndex: 999 }, bannerImage: { width: "90%", height: 200, }, safeAreaView: { flex: 1, backgroundColor: "#fff" } });   // Product 화면 코드 import axios from "axios"; import React, { useEffect, useState } from "react" import {Image, ActivityIndicator, StyleSheet, View, Text, TouchableOpacity, Alert, ScrollView} from "react-native" import { API_URL } from "../config/constants"; import Avatar from "../assets/icons/avatar.png" import dayjs from "dayjs" export default function ProductScreen(props){ const {id} = props.route.params; const [product, setProduct] = useState(null); const getProduct = () => { axios.get(`${API_URL}/products/${id}`) .then((result) => { console.log("product result : ", result.data); setProduct(result.data.product); }) .catch((error) => { console.error(error); }) } useEffect(() => { getProduct(); }, []); const onPressButton = () => { if(product.soldout !== 1) { axios.post(`${API_URL}/purchase/${id}`) .then((result) => { Alert.alert("구매가 완료되었습니다."); getProduct(); }) .catch((error) => { Alert.alert(`에러가 발생했습니다. ${error.message}`); }) } } if(!product){ return <ActivityIndicator /> } return ( <View style={styles.container}> <ScrollView> <View> <Image style={styles.productImage} source={{uri: `${API_URL}/${product.imageUrl}`}} resizeMode="contain" /> </View> <View style={styles.productSection}> <View style={styles.productSeller}> <Image style={styles.avatarImage} source={Avatar} /> <Text>{product.seller}</Text> </View> <View style={styles.divider} /> <View> <Text style={styles.productName}>{product.name}</Text> <Text style={styles.productPrice}>{product.price} 원</Text> <Text style={styles.productDate}>{dayjs(product.createAt).format("YYYY년 MM월 DD일")}</Text> <Text style={styles.productDescription}>{product.description}</Text> </View> </View> </ScrollView> <TouchableOpacity onPress={onPressButton}> <View style={product.soldout ===1 ? styles.purchaseDisabled : styles.purchaseButton}> <Text style={styles.purchaseText}>{product.soldout === 1 ? "구매완료" : "구매하기"}</Text> </View> </TouchableOpacity> </View> ) } const styles = StyleSheet.create({ container: { flex: 1, backgroundColor: "#fff" }, productImage: { width: "100%", height: 300 }, productSeller: { flexDirection: "row", alignItems: "center" }, avatarImage: { width: 50, height: 50, }, productSection: { padding: 16 }, divider: { backgroundColor: "#e9ecef", height: 1, marginVertical: 16 }, productName: { fontSize: 20, fontWeight: "400" }, productPrice: { fontSize: 18, fontWeight: "700", marginTop: 8 }, productDate: { fontSize:14, marginTop: 4, color: "rgb(204,204,204)" }, productDescription: { marginTop : 16, fontSize: 17 }, purchaseButton: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "rgb(255,80,88)", alignItems : "center", justifyContent: "center" }, purchaseText : { color: "white", fontSize: 20, }, purchaseDisabled: { position: "absolute", bottom: 0, left: 0, right: 0, height: 60, backgroundColor: "gray", alignItems : "center", justifyContent: "center" } })

안녕하세요.그랩마켓 상세페이지 만들기 중에서 농구공 이미지 하고postman에서 만든 products/1 내용이 안나오기에 MOCK SEVER를 다시 생성해서 .GET에 복사 붙여 넣기를 했습니다.그랬더니 에러가 나면서 아무것도 안보이게 됐습니다.그래서 lean-all-with -java 페이지로 가서 INDEX.HTML로 에 있는 axios.get ( "https://831a8e94-7b7a-4354-9e1a-eb37becbc7ad.mock.pstmn.io/products"에 가서 보니 예전에 만들은 것들은 그대로 더군요. 그래서 이것도 지우고 새로 만든 mock주소를 넣었더니 이것도 에러가 납니디.원래 mock서버 새로 만들어서 붙여 놓으면 안되나요? 몇일동안 매달려도 안되네요.도와주세요.선생님

해결했는데 글이 삭제가 안되네요 강의 잘 보고있습니다.

 섹션 20. 01-07 이메일 템플릿 생성 4 , 23분 35초에서createUser은 객체를 중괄호에 넣어줬는데sendTemplateToEmail 하고 checkPhone은 왜 중괄호 안 넣어주나요?

콘솔에서 잘못 입력해서 지울 때 어떤 키를 눌러야 지워지고 다시 작성할 수 있나요? 영상에 나오는 콘솔 화면에는 바로 변수와 상수를 칠 수 있지만 제 콘솔 화면에는 영어로 Error 같은 메시지가 뜨네요. 이건 어떻게 해야 수정 할 수 있을까요?  

코드샌드 박스 보니까 선생님께서는 v17로 사용하고 계시는 것 같은데, 버전은 맞추는게 좋을까요?

view-apperance-breadcrumbs를 누르시면 표시됩니다.

 리프레시를 이용해 엑세스를 재발급할때 메서드가 Post인데 Post를 쓰는 이유가 있을까요? 새로운 리소스를 생성하는것이니까 Post를 쓰는것으로 이해하면될까요?

 위에 이미지처럼 에러가 계속 발생하는데 원인을 모르겠습니다 ㅠ..ㅠ

 restapi사용시에는 gql-auth.guard와 같이 별도로 가드폴더에 파일을 만들필요없이 그냥 스트레티지폴더에있는거 그대로 쓰면 되는건가요?restapi사용시에는 contxet 변환이 필요가 없어서 이럴경우 가드를 별도로 만들지않고 그냥 스트레티지 그대로 쓰면 되나요?