안녕하세요, Notification 예제를 풀다가 질문이 생겨 질문드립니다. 다른 수강생분께서 올려주신 질문에 대한 답을 읽고 제 코드가 잘못된거 같아서 질문드립니다!소플님께서 설명해주신 것에 따르면, 1번과 2번이 mount가 되면, 재랜더링이 일어나면서 1번이 update가 된다. 또한 1, 2번이 mount된 시점에 3번이 마운트가 되면 1, 2번이 재랜더링이 일어나면서 update하며, 1, 2, 3번이 모두 마운트 된 이후에는 재랜더링이 아닌 unmount가 실행되는 순서라고 봤습니다.하지만 제 코드의 로그를 보면 이 순서가 아닙니다, 혹시 mount-update-unmount의 실행되는 순서가 임의로 바뀔수가 있는지 아니면 단순히 제 코드의 문제인건지 궁금합니다.또한 else{} 구문에 배열을 초기화 시켜주는 코드를 넣으면 Notification3번은 실행되지도 않은채 배열이 초기화 되어버립니다. 이건 왜 그런건지 궁금합니다.

모달 창 만들 때 X 닫기 를 a태그로 사용하셨는데 button 태그로 사용하면 안되나요? 

안녕하세요 선생님:-)강의 끝 부분에 특정 번호를 넣으면그 번호의 문이 열리게 activate 함수를수정해보라고 하셔서 코딩을 해봤는데이 방법처럼 해도 되는지 잘 모르겠어서요~이렇게 해도 되나요? <script> (function(){ const stageElem = document.querySelector('.stage'); let currentItem; //활성화 function activate(elem){ if(typeof(elem) == "number"){ activate(document.querySelector('.door:nth-child('+ elem +')')); return; } elem.classList.add('door-opened'); currentItem = elem; } //비활성화 function inactivate(elem){ elem.classList.remove('door-opened'); } function doorHandler(e){ const targetElem = e.target; //비활성화 if(currentItem){ inactivate(currentItem); } //활성화 if(targetElem.classList.contains('door-body')){ activate(targetElem.parentNode); } } stageElem.addEventListener('click', doorHandler); activate(3); })(); </script> 

피그마 작업파일이 커뮤니티에 공개되는데, 무료회원이라서 그런건가요?깜짝 놀라서, 커뮤니티에 작업 파일 삭제 했는데, 제 원본도 같이 삭제됬더라고요..ㅠㅠㅠㅠㅠㅠ무료회원이어서 그런건지, 제가 설정을 공개로 해놓은건지, 비공개 방법이 있는지 알고싶습니다.

 html이나 css에서는 작성한 코드를 open with live server에서 확인할 수 있었는데 자바 스크립트에서는 그냥 콘솔에만 작성하고 작성된 코를 html처럼 확인할 수 있는 방법은 없나요?

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

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

안녕하세요!vscode에서 emmet 사용법 강좌 끝에 보면 첨부파일에 핵심 단축키 정리된 파일을 다운로드 받으라고 되어 있는데, 아무리 찾아도 다운로드할 파일을 찾지 못하여... 제가 못찾는건지, 다운이 안되는 상황인건지 문의드립니다!

안녕하세요 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로도 해봤지만 잘 안됐습니다..

아무리 구글링 유튜브 찾아 봐도 알수가 없네요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서버 새로 만들어서 붙여 놓으면 안되나요? 몇일동안 매달려도 안되네요.도와주세요.선생님

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none"class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a class="open-madal" href="#none">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <!--modal--> <div class="modal"> <div class="modal-content"> <h2>sns비회원주문하기 종료 안내</h2> <p>안녕하세요 just쇼핑몰 md 홍길동입니다.안타깝게도 비회원주문하기서비스가 한달뒤 종료될 예정입니다 회원가입없이 sns계정을 이용해 그동안 제품주문을 하실수있엇는데 금번 강화된 개인정보보호법 시행령 제 9조 의거, sns를 이용한상품주문/ 결제등이 근래에 많은 부안잇슈로 문제가 되고 있음에 따라 kisa의 권교조치의 일환으로 했습니다 따라서 한달뒤인 2022.05.07일 이후 모든 비회원 고객님들께서는 회원가입으로 전환후 실명인증 하여야하며 모든쇼핑몰 오픈마켓등의 전자상거래서비스의 공통된 사항이라는점 안내해드립니다. </p> <a class=close-modal href="#none">x 닫기</a> </div> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*modal*/ .modal{ background-color:rgba(0, 0, 0, 0.9)); position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: none; } .modal-content{ background-color: #fff; width: 350px; padding: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); border-radius: 10px; } .modal-content h2{ background-color: #000; color: #fff; padding: 5px; text-align: center; } .modal-content p{ line-height: 1.5em; } .close-modal{ border: 1px solid#000; padding: 3px 7px; float: right; } /*modal*/ $('.open-modal').click(function(){ $('.modal').show() $('.close-modal').click(function(){ $('.modal').hide() }) })모달창이 안떠서요 ,,,뭐때매안뜨는지 아무리 봐도 모르겠서요..,.,.ㅜㅜㅠ

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

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

버튼 클릭하면 콘솔 창에 3이 나오도록 해보았는데요, 아래와 같이 입력해봤는데, 콘솔 창에 3이 안 나옵니다..오류가 EventLstener 라고 뜨는데요;;. 제가 뭘 잘못 입력했는지 잘 모르겠어요;;. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script> const a = 3; const Btn1 = document.getElementById("click-button"); Btn1.addEventListener("click", activation); function activation(){ console.log(a); } </script> </head> <body> <button id="click-button">누름</button> </body> </html>

구체적인 에러코드 알려달라 하셔서 대답글에 알려드렸는데 못보신거 같아서 다시 올려봅니다.fatal: unable to access 'https://github.com/깃유저명/깃프로젝트명.git/': Failed to connect to {EC2 PUBLIC IP} port 3000: Connection timed out이라는 에러메시지 발생했으며, 위 사진에서는 git clone으로 인한 에러이지만 pull로 당겨도 동일 에러가 발생합니다. 답변 기다리는동안 틈틈히 찾아봤는데 결국 해결이 안돼서 다시 여쭤보는점 죄송합니다 ㅠㅠ

<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8"> <title>Document</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <header> <div class="header-logo"></div> <div class="navi"></div> </header> <div class="slide"> <div></div> </div> <div class="items"> <div class="news"> <div class="tab-inner"> <div class="btn"> <a href="#none"class="active">공지사항</a> <a href="#none">갤러리</a> </div> <div class="tabs"> <div class="tab1"> <a href="#none">핸드폰수리일정안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 택배일정 안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 현금영수증안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 주문시안내입니다.<b>2022.07.24</b></a> <a href="#none">핸드폰 환불및교환 안내입니다.<b>2022.07.24</b></a> </div> <div class="tab2"> <a href="#none"><img src="images/gallery-01.jpg" alt="gallery1"></a> <a href="#none"><img src="images/gallery-02.jpg" alt="gallery2"></a> <a href="#none"><img src="images/gallery-03.jpg" alt="gallery3"></a> </div> </div> </div> </div> <div class="gallery"></div> <div class="shortcut"></div> </div> <footer> <div class="footer-logo"></div> <div class="copyright"></div> <div class="sns"></div> </footer> </div> <script src="script/jquery-1.12.4.js"></script> <script src="script/custom.js"></script> </body> </html> @charset "UTF-8"; .container{ border: 1px solid #000; width: 1200px; margin: auto; } header{ display: flex; justify-content: space-between; } header >div{ border: 1px solid #000; height: 100px; } .header-logo{ width: 200px; } .navi{ width: 600px; } .slide{} .slide >div{ border: 1px solid #000; height: 300px; } .items{ display: flex; } .items >div{ border: 1px solid #333; height: 200px; } .news{ width: 500px; } .gallery{ width: 350px; } .shortcut{ width: 350px; } footer{ display: flex; } footer >div{ border: 1px solid #333; height: 100px; } .footer-logo{ width: 200px; } .copyright{ width: 800px; } .sns{ width: 200px; } /*tab-inner*/ .tab-inner{ width: 95%; margin: auto; } .btn{} .btn a{ display: inline-block; border: 1px solid #000; width: 120px; text-align: center; border-radius: 5px 5px 0 0; padding: 5px; margin-right: -6px; border-bottom: none; margin-bottom: -1px; background-color: #ddd; cursor: pointer; } .btn a.active{ background-color: #fff; } .tabs{} .tabs div{ border: 1px solid #000; height: 155px; padding: 0 10px; } .tab1{ } .tab1 a{ display: block; color: #000; text-decoration: none; border-bottom: 1px solid #333; padding: 4px; } .tab1 a:last-child{ border-bottom: none; } .tab1 a b{ float: right; font-weight: normal; } .tab2{ display: none; text-align: center; } .tab2 img{ width: 120px; margin-top: 20px; } /*tab content*/ $('.btn a:first-child').click(function(){ $('.tab1').show() $('.tab2').hide() $(this).addClass('active') $(this).siblings().removeClass('active') }) $('.btn a:last-child').click(function(){ $('.tab2').show() $('.tab1').hide() $(this).addClass('active') $(this).siblings().removeClass('active') })추가영상에서 span을 a태그로변경하라하셔서 했는데 브라우저에 공지사항 갤러리 밑에 밑줄이 표시되는데 이렇케 뜨는게 맞을까요?

"상품 업로드 기능 구현-2" 강의 중 잘 따라가다가 후반부에서 경로 문제로 인해 문의드립니다.업로드 페이지에서 업로드는 잘 되나, 업로드 후 메인 페이지에서 등록된 이미지가 나오지 않아 확인해보니 "/" 대신에 콘솔에는 캡처1과 같이 "\\" 가 나오고 DB Browser에서는 캡처2와 같이 "\"가 나옵니다. : 캡처1 입니다. : 캡처2 입니다.원인을 찾아보니 windows에서 파일 경로를 다룰 때 "\\"로 하기 때문에 생기는 문제라고 하는데요...어떻게 해결하면 좋을지 모르겠습니다.해결방법을 알려주시면 감사하겠습니다.