세션 9. 최종 프로젝트cityDetail 개발-2 에서https://trip-wiki-api.vercel.app/ 강사님이 알려주셨던 링크에는 상세페이지 이미지와 받는 정보가 없습니다! 어떻게 상세페이지를 출력할 수 있나요? Japan을 검색창에서 검색하고 상세페이지를 눌렀지만 아무런 정보가 출력되지 않고 있습니다! 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, requestCityDetail } 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: window.location.pathname.replace("/", ""), searchWord: getSearchWord(), cities: "", currentPage: window.location.pathname, }; const renderHeader = () => { new Header({ $app, initialState: { currentPage: this.state.currentPage, 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, cities: cities, searchWord: searchWord, }); }, }); }; const renderRegionList = () => { 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, cities: cities, searchWord: "", currentPage: `/${region}`, }); }, }); }; const renderCityList = () => { new CityList({ $app, initialState: this.state.cities, handleItemClick: async (id) => { history.pushState(null, null, `/city/${id}`); this.setState({ ...this.state, currentPage: `/city/${id}`, }); }, handleLoadMore: async () => { const newStartIdx = this.state.startIdx + 40; const newCities = await request( newStartIdx, this.state.region, this.state.sortBy ); this.setState({ ...this.state, startIdx: newStartIdx, cities: { ...this.state.cities, cities: [...this.state.cities.cities, ...newCities.cities], isEnd: newCities.isEnd, }, }); }, }); }; const renderCityDetail = async (cityId) => { try { const cityDetailData = await requestCityDetail(cityId); new CityDetail({ $app, initialState: cityDetailData }); } catch (err) { console.log(err); } }; const render = async () => { const path = this.state.currentPage; $app.innerHTML = ""; // 상세 페이지로 이동 if (path.startsWith("/city/")) { const cityId = path.split("/city/")[1]; renderHeader(); renderCityDetail(cityId); } else { renderHeader(); renderRegionList(); renderCityList(); } }; this.setState = (newState) => { this.state = newState; render(); }; const init = async () => { const path = this.state.currentPage; // 메인 페이지 if (!path.startsWith("/city")) { const cities = await request( this.state.startIdx, this.state.region, this.state.sortBy, this.state.searchWord ); this.setState({ ...this.state, cities: cities, }); } // 상세페이지 else { render(); } }; window.addEventListener("popstate", async () => { const urlPath = window.location.pathname; const prevRegion = urlPath.replace("/", ""); const prevPage = urlPath; const prevSortBy = getSortBy(); const prevSearchWord = getSearchWord(); const prevStartIdx = 0; const prevCities = await request( prevStartIdx, prevRegion, prevSortBy, prevSearchWord ); this.setState({ ...this.state, startIdx: prevStartIdx, sortBy: prevSortBy, region: prevRegion, currentPage: prevPage, searchWord: prevSearchWord, cities: prevCities, }); }); init(); } //API.js 코드입니다!export default function CityDetail({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-detail"; $app.appendChild(this.$target); const getScoreColor = (score) => { // let scoreNumber = parseInt(score); if (score >= 4) return "green"; if (score >= 3) return "yellow"; return "red"; }; this.template = () => { let cityData = this.state.CityDetail; let temp = ``; if (cityData) { temp = `<div class="image-banner"> <img src="${cityData.image}"/> <div class="city-name"> <div class="city">${cityData.city}</div> <div class="country">${cityData.region} / ${cityData.country}</div> </div> </div> <div class="progress-container"> <div class="info-item"> <div class="label">⭐ Total Score</div> <div class="progress-bar" score-color="${getScoreColor( cityData.total )}" style="--score:${cityData.total * 20}%"></div> </div> <div class="info-item"> <div class="label">💵 Cost</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.cost )}" style="--score:${cityData.info.cost * 20}%"></div> </div> <div class="info-item"> <div class="label">😆 Fun</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.fun )}" style="--score:${cityData.info.fun * 20}%"></div> </div> <div class="info-item"> <div class="label">🚓 Safety</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.safety )}" style="--score:${cityData.info.safety * 20}%"></div> </div> <div class="info-item"> <div class="label">🌐 Internet</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.internet )}" style="--score:${cityData.info.internet * 20}%"></div> </div> <div class="info-item"> <div class="label">💨 Air Condition</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.air )}" style="--score: ${cityData.info.air * 20}%"></div> </div> <div class="info-item"> <div class="label">🍜 Food</div> <div class="progress-bar" score-color="${getScoreColor( cityData.info.food )}" style="--score: ${cityData.info.food * 20}%"></div> </div> </div> `; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; /* this.setState = (newState) => { this.state = newState; this.render(); }; */ this.render(); } //cityDetail.js 상세페이지 코드입니다!

저는 맥북을 사용하고 있는데요 맥북 사용자들을 위한 거는 전혀 없는데 그런것도 고려해서 해주셔야 할거 같은데요 지금 mysql 설치 할려고 하는데 이거 맥북에 설치 가능한거에요?

가상환경을 맞추는 작업(확인)을 하지 않으면 어떤 문제가 생기는지요?

안녕하세요,수업자료 pdf는 어디에 있나요?

세션 9. 여행지정보 최종프로젝트 작성 중...CityList 개발 13:25분에서 CityList.js를 작성한 후 localhost:3000을 새로고침해도 전혀 변화없이 빈 화면만 출력이 됩니다!api.js에서 API_URL로 전달받을 https://trip-wiki-api.vercel.app/ 에서 도시 정보 40개 정보가 없더라고요, 그래서 웹 화면에 아무것도 출력되지 않아서 문의드립니다!  server.js 파일도 /*splat 로 변경해서 "start server" 노드 명령어로 터미널에서 출력되도록 수정 완료했지만, 홈페이지 이미지가 출력되지 않고 있습니다!const express = require("express"); const path = require("path"); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, ".."))); app.get("/*splat", (req, res) => { res.sendFile(path.join(__dirname, "..", "index.html")); }); app.listen(PORT, () => { console.log("START SEVER"); }); export default function CityList({ $app, initialState }) { this.state = initialState; this.$target = document.createElement("div"); this.$target.className = "city-list"; $app.appendChild(this.$target); this.template = () => { let temp = `<div class="city-items-container">`; if (this.state) { this.state.cities.forEach((elm) => { temp += ` <div class="city-item" id=${elm.id}> <img src=${elm.image}></img> <div class="city-item-info">${elm.city}, ${elm.country}</div> <div class="city-item-score">⭐ ${elm.total}</div> </div> `; }); temp += `</div>`; } return temp; }; this.render = () => { this.$target.innerHTML = this.template(); }; this.setState = (newState) => { this.state = newState; this.render(); }; this.render(); }

WebSecurityConfigurationAdapter 상속 받아서 작업할려고 했으나 2.1.O 릴리즈 버전에서도 현재는 deprecated 된 상태인데 혹시 그 이후 어떻게 코드를 변경해야하는지 알수 있을까요

현재 제가 동물 앨범 만들기 전체 파일 구조와 index.html 코드는 이렇게 작성하였으며, 강의 내용과 동일하게 작성하였습니다api.js 코드와 TabBar.js 코드입니다. 강의 내용과 동일하게 작성하였습니다.content.js 코드와 index.js 코드를 작성하였습니다.마지막으로 App.js 코드를 작성하였지만, 동물 사진이 웹 화면에 출력이 되지 않고 있습니다!import TabBar from "./components/TabBar.js"; import Content from "./components/Content.js"; import { request } from "./components/api.js"; export default function App($app) { this.state = { currentTab: window.location.pathname.replace("/", "") || "all", photos: [], }; //tabBar const tabBar = new TabBar({ $app, initialState: this.state.currentTab, onClick: async (name) => { history.pushState(null, null, `/${name}`); this.updateContent(name); }, }); //content const content = new Content({ $app, initialState: [], }); //state this.setState = (newState) => { this.state = newState; tabBar.setState(this.state.currentTab); content.setState(this.state.photos); }; this.updateContent = async (tabName) => { console.log(tabName); const name = tabName === "all" ? "" : tabName; const photos = await request(name); this.setState({ ...this.state, currentTab: tabName, photos: photos, }); }; window.addEventListener("popstate", () => { this.updateContent(window.location.pathname.replace("/", "") || "all"); }); const init = async () => { this.updateContent(this.state.currentTab); }; init(); }

python 3.11을 설치했었는데.. 본 강의에 따라 어제 python 3.13을 다시 설치했습니다.강의에 따라 가상환경을 구축하기 위하여 첨부와같이 실행했더니 3.11이 구동됩니다.어떻게 해결해야 할까요?

동물 앨범 만들기 3차 까지 들어서 라이브 코드를 작성하였지만, 강의 내용에서 나오는 웹 실행화면이 출력되지 않고 있습니다.또한, 강사님의 깃 주소에 있는 코드들을 그대로 실행해도 강의 내용처럼 나오지 않습니다.강사님이 동물 앨범 만들기 2차 때는 1차에서 작성한 각 동물들의 js파일과 html 파일을 삭제하라고 하셨는데, 막상 1차때 작성한 파일들을 삭제하니까 동물 사진이 웹에 출력되지 않아서 다시 기재하였습니다그래서, 강사님의 깃 주소에는 1차와 2차, 3차 코드는 중복되게 작성하면 안되는 건가요?강사님처럼 웹 화면에 출력될려면 3차 코드만 있으면 되는 건가요?왜 3차 코드만으로 강의 내용처럼 출력이 안되는 걸까요?1차, 2차, 3차의 모든 코드들을 융합해서 작성해야하나요?다음 강의 node.js와 express.js를 진행할 수 가 없어서 급하게 문의드립니다! !

@ParameterizedTest @CsvSource({ "0, 0, true", "100, 0, false", "0, 100, false" }) public void testFree(int basePrice,int maxPrice,boolean isFree){ // Given Event event = Event.builder() .basePrice(basePrice) .maxPrice(maxPrice) .build(); //When event.update(); //Then assertThat(event.isFree()).isEqualTo(isFree);; }@RunWith(JUnitParamsRunner.class) 는 junit4 여서 사용하지 못하고 junit5 에서는 @Test 로 파라메터 값을 지원하지 않기 때문에 파라메터 테스트를 위해@ParameterizedTest`CvSure`으체해서스트했습니다

dto 타입 날짜에서 엔티티랑 똑같이 LocalDateTime 으로 맞추지 않고 String 으로 다르게 쓰는 이유가있나요 ?

수업한 내용을 바탕으로visual studio에서 배포를 한 후배포한 경로로 iis 세팅을 하였습니다~ view페이지를 수정 할때마다 iis를 재기동 해야하는 문제가 발생하는데 웹폼처럼 view페이지(자바스크립트부분) 만 수정 할 수 있나요? 만약에 view페이지를 수정할때마다 배포를 하고 iis를 잠시 껐다 켜야하면 실무적으로 사용할 수 없는기술이 아닌가 싶어서요 제 질문은 view 페이지의 수정이 빈번하게 발생할때 iis 재기동 없이 업데이트 할 수 있는 방법이 있는지 여쭤보고 싶네요 웹폼처럼.. aspx파일만 수정하면 반영됬으면 좋겠는데...

로그인 후 /member/modify 접근할려고하면302 코드 뜨는데 로그인 인증이 됐는데도 자꾸/member/modify 로 접근하면 로그인폼으로 돌아가는데 뭐가문제일까요 ..?  

MemberEntity updateMember = memberRepository.save(findedMemberEntity);if(updateMember != null) {메일전송} 여기서 if(updateMember != null) 대신try catch 로 묶어서 하는것도괜찮나요 ?

내용을 다 따라한것 같은데 DB에 저장이 안되네요..

강의 잘보고있습니다. 감사합니다 인터셉터와, 필터가있는데인터셉터로 적용한 이유가 있을까요 ?? --그리고 인터셉터 설정할때@Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(memberSigninInterceptor) .addPathPatterns("/member/modify"); }지금 상황에선 excludePathPatterns 설정을 굳이 안해줘도 문제가없지 않나요 ? 강의에서는 해주셨는데

코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.  Typeorm 관련 메서드 설명해주시는 과정에서,위와같이,async 메서드 내부에서 create 메서드를 호출할 땐 await를 붙이지 않고,save 메서드를 호출할 땐 await를 붙이는 이유가 있을까요? 일단, async가 비동기로 메서드를 호출한다는 개념으로 알고 있고,await는 쓰레드가 값을 반환받게 하기위해 비동기 메서드 내부에서 계속 해당 코드에 머무르게끔, 점유하게끔 한다고 생각해서 create 메서드든 save 메서드든 둘다 await가 붙는다고 생각했었습니다. 제가 잘못 이해하고 있는 걸까요?

코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요!+ 오류 메세지도 함께 올려주시면 좋아요 🙂console.log('hello'); https://trip-wiki-api.vercel.app/?start=0브라우저에서 여기로 들어가도 api 호출값이 안나오고 검은색 창이 떠요 그리고 코드 작성했는데, Failed to load module script: Expected a JavaScript module script but the server responded with a MIME type of "text/html". Strict MIME type checking is enforced for module scripts per HTML spec.이런 에러만 console에 찍혀서...코드 사이트에 있는걸로 복사해서 넣어도 마찬가지네요server.js는const express = require('express'); const path = require('path'); const app = express(); const PORT = 3000; app.use(express.static(path.join(__dirname, '..'))); app.get('/*splat', (req, res) => { res.sendFile(path.join(__dirname, '..', 'index.html')); }); app.listen(PORT, () => { console.log('START SERVER'); });/*splat은 /*name 해도 결과가 같아요 ㅠ express는 5.1.0node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다.⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.

안녕하세요 강사님, 'Static File Serving에서 옵션 추가하기' 강좌에서 @nestjs/serve-static 설치하는 과정에서 버전 문제 때문인지 의존성 충돌 문제가 일어나는 것 같습니다.혹시라도 다른 분들도 저와 같은 문제 겪으실까봐 글 작성합니다.-----------------------------------npm add @nestjs/serve-static 실행------------------------------------ 오류: npm add @nestjs/serve-static npm error code ERESOLVE npm error ERESOLVE unable to resolve dependency tree npm error npm error While resolving: cf_sns@0.0.1 npm error Found: @nestjs/common@10.4.17 npm error node_modules/@nestjs/common npm error @nestjs/common@"^10.0.0" from the root project npm error npm error Could not resolve dependency-----------------------------------2. npm install @nestjs/serve-static@4.0.0 // 버전 맞춰서 설치------------------------------------ 브라우저 오류 발생: {"message":"Cannot GET /public/44f57f3f-7afa-4262-b2a3-13ee7053f920.jpg","error":"Not Found","statusCode":404}- npm run start: dev 오류 : no such file directory ~~\.index.html// 정확하지는 않지만 index.html 파일까지 찾아서 jpg 파일을 찾는 것 같아서 claude에게 물어봤더니...------------------------------------ 해결: @Module({ // 다른 모듈을 불러올 때 사용 imports: [ PostsModule, ServeStaticModule.forRoot({ rootPath: PUBLIC_FOLDER_PATH, serveRoot: '/public', serveStaticOptions: { index: false } }),이렇게 하니 해결 됐습니다... 이게 맞는건지 궁금합니다!! 일단 브라우저 요청했더니 jpg 사진은 잘 나옵니다!!코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

spring 설정시 스크린샷과 같이 Spring Boot 3.4.3 버전, JAVA 23 버전이 나타나질 않습니다.참고로 저는 동영상 수업을 따라 설치 중이었습니다.