안녕하세요. https 인증서 설정 과정을 따라하고 있는데 아래 설치 명령을 따라하는 과정에서 설치가 안되는 문제가 있습니다. yum install https://dl.fedoraproject.org/pub/epel/epel-release-latest-7.noarch.rpm 위 설치 명령어를 실행하면 아래와 같이 터미널에 나타납니다.윈도우 git bash로 접속해도 동일합니다. 왜 cannot open이라고 나타날까요.. 어떻게 해결해야할가요..?  [내용 추가]위 yum install 뒤에 url을 따라가니 현재 해당 경로에 epel-release-latest-7.noarch.rpm이 없는 것 같습니다. 

Q1. EC2와 로컬 PC의 차이강의를 따라하며 nginx를 셋팅하고 AWS에서 pm2로 실행시켰을 땐,AWS EC2 머신의 주소만으로 포트 없이도 타고들어가면 바로 웹브라우저에서 react SPA가 실행되었습니다. (강의대로 잘 따라감, 비용 때문에 https, 도메인등록 강의 시청만하고 따라하진 않았습니다..) 이해가 안되는 점은 동일한 프로젝트인데 로컬 PC에서 react를 build하고 동일하게 backend/public 폴더 아래 복사하였는데 localhost:4000으로 접속하면 Express, Welcome to Express 페이지가 뜹니다. 물론 로컬 PC에서는 niginx를 셋팅하지 않았다라는 점이 다른점이긴한데 nginx를 설정할 때 이해되기로 접속시 EC2 머신의 localhost:4000으로 연결하는 것 뿐이고EC2 머신 & 로컬 PC 모두 backend express.js 프로젝트 상에서 "/*"으로의 라우팅을 raact build 내 index.html로 연결하는 코드는 동일하게 없다라는 점에서왜 EC2만 react SPA가 실행되는건지 모르겠습니다. Q2. nginx의 필요성pm2로 실행한다고 하면 이미 프로세스를 충분히 관리한다고 생각이 드는데.. nginx의 필요성 궁금합니다.

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂npm error code ENOENT npm error syscall open npm error path C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json npm error errno -4058 npm error enoent ENOENT: no such file or directory, open 'C:\Users\사용자이름\Desktop\animal_album_Main\animal_album-3\package.json' npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\사용자이름\AppData\Local\npm-cache\_logs\2024-12-06T08_26_22_967Z-debug-0.log 안녕하세요 질문드립니다몇일동안 npm init 떄문에 질문드립니다 npm 설치시 해당 프로젝트 파일이 c드라이브 안에만 있어야 되는건가요 ?1번 바탕화면에 프로젝트가 있을떄도 실행이 안됩니다2번 c드라이브 -> User -> (사용자이름) -> github-> 해당 폴더 -> 프로젝트 폴더3번 c드라이브 -> 프로젝트 폴더 3번일때만 되고 1,2번일때는 npm init 설치가 안되는데2번도 가능하게 할려면 어떻게 해야하는지 궁금합니다

영상 7:53 부분에 코드를 완성하면, regionList에 있는 region 클릭 시, 영상처럼 region 별로 cities가 나와야 하지만, 아래 에러가 생겨서 정상적으로 로딩이 안됩니다.혹시 어떤 문제 인지 알려주시면, 너무 고맙습니다. 감사합니다! app.js 코드는 아래와 같이 입력했습니다.import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityList from "./components/CityList.js"; import CityDetail from "./components/CityDetail.js"; import { request } from "./components/api.js"; export default function App($app) { const getSortBy = () => { if (window.location.search) { return window.location.search.split("sort=")[1].split("&")[0]; } return "total"; }; const getSearchWord = () => { if (window.location.search && window.location.search.includes("search=")) { return window.location.search.split("search=")[1]; } return ""; }; this.state = { startIdx: 0, sortBy: getSortBy(), searchWord: getSearchWord(), region: "", cities: "", }; const header = new Header({ $app, initialState: { sortBy: this.state.sortBy, searchWord: this.state.searchWord, }, handleSortChange: async (sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl ); const cities = await request( 0, this.state.region, sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: 0, sortBy: sortBy, cities: cities, }); }, handleSearch: async (searchWord) => { history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}` ); const cities = await request( 0, this.state.region, this.state.sortBy, searchWord ); this.setState({ ...this.state, startIdx: 0, searchWord: searchWord, cities: cities, }); }, }); const regionList = new RegionList({ $app, initialState: this.state.region, handleRegion: async (region) => { history.pushState(null, null, `/${region}?sort=total`); const cities = await request(0, region, "total"); this.setState({ ...this.state, startIdx: 0, sortBy: "total", region: region, searchWord: "", cities: cities, }); }, }); const cityList = new CityList({ $app, initialState: this.state.cities, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); const cityDetail = new CityDetail(); this.setState = (newState) => { this.state = newState; cityList.setState(this.state.cities); header.setState({ sortBy: this.state.sortBy, searchWord: this.state.searchWord, }); regionList.setState(this.state.region); }; const init = async () => { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); console.log(cities); this.setState({ ...this.state, cities: cities, }); }; init(); } regionList.js 코드는 아래와 같이 입력했습니다.export default function RegionList({ $app, initialState, handleRegion }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "region-list"; this.handleRegion = handleRegion; $app.appendChild(this.$target); this.template = () => { const regionList = [ "🚀 All", "🌏 Asia", "🕌 Middle-East", "🇪🇺 Europe", "💃 Latin-America", "🐘 Africa", "🏈 North-America", "🏄 Oceania", ]; let temp = ``; regionList.forEach((elm) => { let regionId = elm.split(" ")[1]; temp += `<div id=${regionId}>${elm}</div>`; }); return temp; }; this.render = () => { this.$target.innerHTML = this.template(); if (this.state) { let $currentRegion = document.getElementById(this.state); $currentRegion && ($currentRegion.className = "clicked"); } else { document.getElementById("All").className = "clicked"; } const $regionList = this.$target.querySelectorAll("div"); $regionList.forEach((elm) => { elm.addEventListener("click", () => { this.handleRegion(elm.id); }); }); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }  

혼자서 찾아보려고 했는데 도저히 모르겠네요 ㅜ 오류메세지는 나오는건 없고 제목과 같습니다. region을 선택하면 해당 cities가 나와야하는데 안나와요 ㅜ import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityDetail from "./components/CityDetail.js"; import CityList from "./components/CityList.js"; import { request } from "./components/api.js"; export default function App($app){ const getSortBy = () => { if (window.location.search){ return window.location.search.split('sort=')[1].split('&')[0]; } return 'total'; }; const getsearchWord = () => { if(window.location.search && window.location.search.includes('search=')){ return window.location.search.split('search=')[1] } //뒤에 있는 값을 반환 return ''; }; this.state={ startIdx : 0, sortBy : getSortBy(), region: '', searchWord: getsearchWord(), cities:'', }; const header = new Header({ $app, initialState:{ sortBy:this.state.sortBy, searchWord:this.state.searchWord }, handleSortChange: async(sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWord ? pageUrl + `&search=${this.state.searchWord}` : pageUrl ); //변경된 정렬기준을 적용한 새로운 데이터를 불러옴 (매개변수로 전달받은 새로운 정렬기준인 sortBy 값을 넣어야함) const cities = await request(0, this.state.region, sortBy, this.state.searchWord); // 변경된 상태값을 업데이트 this.setState({ ...this.state, startIdx:0, sortBy: sortBy, cities: cities, }); }, handleSearch: async(searchWord) => { //웹사이트 주소를 알맞게 변경 history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWord}` ); const cities = await request(0, this.state.region, this.state.sortBy, searchWord); this.setState({ ...this.state, startIdx:0, searchWord: searchWord, cities: cities }) }, }); const regionList = new RegionList({ $app, initialState:this.state.region, handleRegion: async(region) => { history.pushState(null, null, `/${region}?sort=total`); const cities = await request(0, region, 'total'); console.log("cities",cities) this.setState({ ...this.state, startIdx: 0, region: region, sortBy: 'total', cities: cities, searchWord: '', }); }, }); const cityList = new CityList({ $app, initialState:this.state.cities, // 아래는 더보기 버튼을 눌렀을 때 실행되는 것 handleLoadMore: async() => { const newStartIdx = this.state.startIdx + 40; const newCities = await request(newStartIdx, this.state.region, this.state.sortBy, this.state.searchWord); this.setState({ ...this.state, startIdx : newStartIdx, cities:{ cities:[...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, } }) } }); const cityDetail = new CityDetail(); this.setState = (newState) => { this.state = newState; cityList.setState(this.state.cities); header.setState({sortBy:this.state.sortBy, searchWord:this.state.searchWord}); regionList.setState(this.state.region); }; const init = async() => { const cities = await request(this.state.startIdx, this.state.sortBy, this.state.region, this.state.searchWord); this.setState({ ...this.state, cities: cities, //api 호출의 결과인 cities }); }; init(); } export default function RegionList({$app, initialState, handleRegion}){ this.state = initialState; this.$target = document.createElement('div'); this.$target.className = 'region-list'; this.handleRegion = handleRegion; $app.appendChild(this.$target); this.template = () => { const regionList = [ '🚀 All', '🌏 Asia', '🕌 Middle-East', '🇪🇺 Europe', '💃 Latin-America', '🐘 Africa', '🏈 North-America', '🏄 Oceania', ]; let temp = ``; regionList.forEach((elm) => { let regionId = elm.split(' ')[1]; temp += `<div id=${regionId}>${elm}</div>`; }); return temp; }; this.render = () => { this.$target.innerHTML = this.template(); let $currentRegion; if(this.state){ $currentRegion = document.getElementById(this.state); $currentRegion && ($currentRegion.className = 'clicked'); } else { document.getElementById('All').className = 'clicked'; } const $regionList = this.$target.querySelectorAll('div'); $regionList.forEach((elm) => { elm.addEventListener('click', () => { this.handleRegion(elm.id); }); }); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }

 input 값은 나오는데 select 값은 출력이 안돼요 ㅠ 오류 메세지도 따로 나오는 건 없고 console.log로 cities 값을 볼려고 했는데 빈 Array가 나옵니다 ㅠ import Header from "./components/Header.js"; import RegionList from "./components/RegionList.js"; import CityDetail from "./components/CityDetail.js"; import CityList from "./components/CityList.js"; import { request } from "./components/api.js"; export default function App($app){ const getSortBy = () => { if (window.location.search){ return window.location.search.split('sort=')[1].split('&')[0]; } return 'total'; }; const getSearchWorld = () => { if(window.location.search && window.location.search.includes('search=')){ return window.location.search.split('search=')[1] } //뒤에 있는 값을 반환 return ''; }; this.state={ startIdx : 0, sortBy : getSortBy(), searchWorld: getSearchWorld(), region: '', cities:'', }; const header = new Header({ $app, initialState:{ sortBy:this.state.sortBy, searchWorld:this.state.searchWorld }, handleSortChange: async(sortBy) => { const pageUrl = `/${this.state.region}?sort=${sortBy}`; history.pushState( null, null, this.state.searchWorld ? pageUrl + `&search=${this.state.searchWorld}` : pageUrl ); //변경된 정렬기준을 적용한 새로운 데이터를 불러옴 (매개변수로 전달받은 새로운 정렬기준인 sortBy 값을 넣어야함) const cities = await request(0, this.state.region, sortBy, this.state.searchWorld); console.log(cities) // 변경된 상태값을 업데이트 this.setState({ ...this.state, startIdx:0, sortBy: sortBy, cities: cities, }); }, handleSearch: async(searchWorld) => { //웹사이트 주소를 알맞게 변경 history.pushState( null, null, `/${this.state.region}?sort=${this.state.sortBy}&search=${searchWorld}` ); const cities = await request(0, this.state.region, this.state.sortBy, searchWorld); this.setState({ ...this.state, startIdx:0, searchWorld: searchWorld, cities: cities }) }, }); const regionList = new RegionList(); const cityList = new CityList({ $app, initialState:this.state.cities, // 아래는 더보기 버튼을 눌렀을 때 실행되는 것 handleLoadMore: async() => { const newStartIdx = this.state.startIdx + 40; const newCities = await request(newStartIdx, this.state.sortBy, this.state.region, this.state.searchWorld); this.setState({ ...this.state, startIdx : newStartIdx, cities:{ cities:[...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, } }) } }); const cityDetail = new CityDetail(); this.setState = (newState) => { this.state = newState; cityList.setState(this.state.cities); header.setState({sortBy:this.state.sortBy, searchWorld:this.state.searchWorld}); }; const init = async() => { const cities = await request(this.state.startIdx, this.state.sortBy, this.state.region, this.state.searchWorld); this.setState({ ...this.state, cities: cities, //api 호출의 결과인 cities }); }; init(); } 

프로젝트 작성할 때 ,APP.js와 components폴더 안의 js모듈로 보통 구성을 하시는데,왜 APP.js에서 $app을 매개변수로 받을 때는 소괄호에서 바로 받는데,다른 컨포넌트 내부 js모듈에서는 중괄호로 받는건가요? export default function App($app) {} export default function CityList({ $app, initialState,handleLoadMore }) {}  APP의 경우 전달받는게 하나인데, CityList의 경우 APP에서 여러개의 매개변수를 받아오기 떄문에 구조분해로 받아오는 건가요? 만약 그렇다면 한개만 매개변수로 받아오는 경우, CityList도 (소괄호)안에 {중괄호}없이 바로 매개변수를 써도 되는 건가요?

안녕하세요! 동물앨범 수업 따라가던 중 질문이 생겨 문의드립니다.require함수 작성시 밑줄이 생기며 require is not defined라는 에러가 뜨는데, 저대로 실행을 하면 정상 작동하긴 합니다. 구글링을 해보니 package.json파일에 "type":commonJs를 추가하라고 하여 했는데도 똑같이 밑줄이 생깁니다. 어떤게 문제일까요? 

express 파일까지 설치하고 server.js에 코드를 작성해 주었습니다.그런데 웹을 새로고침한 경우Cannot GET /penguin이런 에러가 계속 발생합니다. 이 에러를 해결하기 위해서 express를 설치한 것 같은데..무엇이 문제인 걸까요?혹시 몰라 깃의 코드를 확인해 봤는데, 코드상 문제는 없었습니다. import Content from "./components/Content.js"; import TabBar from "./components/TabBar.js"; import { request } from "./components/api.js"; export default function App($app) { this.state = { currentTab: window.location.pathname.replace("/", "") || "all", photos: [], }; //tab const tab = new TabBar({ $app, initialState: this.state.currentTab, onClick: async (name) => { history.pushState(null, null, `/${name}`); this.updateContent(name); }, }); const content = new Content({ $app, initialState: [], }); // 상태 업데이트 함수 this.setState = (newState) => { this.state = newState; tab.setState(this.state.currentTab); content.setState(this.state.photos); }; this.updateContent = async (tabName) => { try { const currentTab = tabName === "all" ? '' : tabName; const photos = await request(currentTab); this.setState({ ...this.state, currentTab: tabName, photos:photos, }) } catch (error) { console.log(error) } }; window.addEventListener("popstate", () => { this.updateContent(window.location.pathname.replace("/", "") || "all"); }); const init = async () => { this.updateContent(this.state.currentTab); }; init(); }  const express = require('express'); const path = require("path"); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, ".."))); app.get("/*", (req, res) => { res.sendFile(path.join(__dirname, "..", 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER') })++추가질문port주소를 3000으로 변경하면 해당 오류가 발생하지 않는 것을 확인했습니다. 라이브서버를 자동으로 실행하면 port가 5500이어서 오류가 발생한 것 같습니다.1) port는 자동으로 3000으로 변경이 안되나요?2)server.js에서 port를 새로 지정해준 이유가 궁금합니다. 그대로 5500을 하면 안되나요?

안녕하세요! 강의 너무 잘 수강하고 있습니다.App.js 컴포넌트에서  onClick함수를 저렇게 정의하면 올바르게 동작하는 건 알겠는데이런식으로 코드를 작성해 tabbar 컴포넌트에서 onClick함수를 실행하면 오류가 뜨는 이유가 궁금합니다!

export default function TabBar({$app, initialState, onClick }) { this.state = initialState; this.onClick = onClick; this.$target = document.createElement('div'); this.$target.className = 'tab-bar'; $app.appendChild(this.$target); // 필요한 버튼 this.template = () => { let temp = `<div id="all">전체</div> <div id ="penguin">펭귄</div> <div id ="koala">코알라</div> <div id="panda">판다</div>`; return temp; }; this.render = () => { this.$target.innerHTML = this.template(); //$currentTab변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소 할당 let $currentTab = document.getElementById(this.state); //$currentTab ? ($currentTab.className = "clicked") : ""; $currentTab && ($currentTab.className = "clicked");동물 앨범 만들기 2-2 강의부분에서$currentTab 변수에 현재 state값과 동일한 아이디를 갖는 버튼 요소를 할당한다고 하셔쓴데,왜 this.state가 들어가는지 이해가 가지 않습니다.this.state값은 initialState이고 initialState은 APP컴포넌트에서 빈문자열이었는데...그 뒤로 추론이 되지 않아서....흐름? 좀 알려주세요ㅡㅠ

package.json을 설치할때 해당파일의 설치 위치가 꼭 server파일의 상위폴더인 TRIP-WIKI폴더여야하나요?server파일안에 설치해도 상관없는건지 상관있으면 무엇이 다른건지 알수 있을까요?

안녕하세요우선 강의 잘 듣고 있습니다^^동물 앨범 만들기 2-2를 진행하다가 문의 사항이 있어 글을 남겨 봅니다.아래 코드에서 this.setState에 ...this.state 값을넣어주면서"spread(…) 연산자를 사용해서 기존의 상태를 유지해주고" 라고 설명을 해주셨는데요이 부분이 이해가 잘 가지 않아서요~this.setState({ ...this.state,currentTab: name, photos: await request(name), });setState 함수 newState 매개변수에 { ...this.state,currentTab: name, photos: await request(name), } 객체 값이 들어가면서 ...this.state 값은 어디 값에 들어가게 되서기존 상태를 유지한다고 봐야 될까요??export default function App($app) { 7 this.state = { 8 currentTab: 'all', 9 photos: [], 10 }; 11 12 const tabBar = new TabBar({ 13 initialState: '', 14 onClick: async (name) => { 15 this.setState({ 16 ...this.state, 17 currentTab: name, 18 photos: await request(name), 19 }); 20 }, 21 }); 22 23 const content = new Content(); 24 25 this.setState = (newState) => { 26 this.state = newState; 27 tabBar.setState(this.state.currentTab); 28 content.setState(this.state.photos); 29 }; 30} 

this.template = () => 에서 temp에 태그들을 넣어주고 하는 부분에 input에는 클로징태그가 필요없는 건가요?클로징태그를 작성시 input에 value에 자동으로 /값이 들어가게 되는 상태가 되어 클로징태그가 필요 없는 부분인가?필요 없는 이유는 무엇인지..에 대한 궁굼증이 생겨 질문드립니다<div class='search'> <input type="text" placeholder="Search" id="search" autocomplete="off" value=${searchWord} > </div>

자바스크립트로 SPA 하는법을 꼭 배우고싶었는데강의가 너무 좋아요!   섹션8부터 상태관리하면서 SPA 방식으로 코드를 리팩토링하는데강의에서 알려주시는 방법이약간 리액트의 동작방식과 비슷하다고 봐도 되는걸까요?! 제가 리액트를 얼마전에 배웠는데뭔가 리액트의 내부 동작을 구현하는 느낌으로 생각해도 되는건지..아니면 아예 다른 방식으로 하는건지 궁금해서 여쭤봅니다!!

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); 안녕하세요.혹시 Live Server 질문도 같이 올려도 될까요..?효빈님께서 라이브 서버 실행하실 때 127.0.0.1:5000 으로 실행이 되시는데 저는 제 아이피 주소 뒤로 공부하는 폴더의 경로가 전부 찍히게 되어서 window.location.pathname 이 콘솔 창에 안찍히게 되더라구요..VSC에서 Live Server Extensions을 싹 다 지우고 다시 설치해도 초기화가 안되네요..(전에 한 번 Live Server 설정을 건들인 적이 있습니다ㅜㅜ)

안녕하세요 파일에 package.json은 있는데 어떤 내용들 넣으셨어요???

template = [] template = ""문자열로 초기화 안하고 배열로 초기화 하는 이유가 뭔가요?

안녕하세요 2-6 강의부터 4개- 5개 강의 정도 화면이 검정으로 나오는데저만그런것인지 확인 가능할까요??

(a,b)가 어떤걸 의미하는지 모르겠고-1, 1, 0을 반환했을때 배열내부적으로 어떻게 처리되는지도모르겠습니다. let colors = ["green", "blue", "purple"]; const compare = (a, b) => { if (a > b) return -1; else if (a < b) return 1; else return 0; }; colors.sort(compare); console.log(colors);