174만명의 커뮤니티!! 함께 토론해봐요.
미해결
[리뉴얼] 처음하는 파이썬 백엔드와 웹기술 입문 (파이썬 중급, flask[플라스크] 로 이해하는 백엔드 및 웹기술 기본) [풀스택 Part1-1]
- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.) - 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~ - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
강의 하나로 끝내는 백엔드 모든 지식!
강의 자료 어디서 받을 수 있나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
세션 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 설치 할려고 하는데 이거 맥북에 설치 가능한거에요?
해결됨
실전! Django 입문 [최신 5.2 버전]
가상환경을 맞추는 작업(확인)을 하지 않으면 어떤 문제가 생기는지요?
해결됨
옆집 개발자와 같이 진짜 이해하며 만들어보는 첫 Spring Boot 프로젝트
안녕하세요, 수업자료 pdf는 어디에 있나요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
세션 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(); }
미해결
스프링 기반 REST API 개발
WebSecurityConfigurationAdapter 상속 받아서 작업할려고 했으나 2.1.O 릴리즈 버전에서도 현재는 deprecated 된 상태인데 혹시 그 이후 어떻게 코드를 변경해야하는지 알수 있을까요
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
현재 제가 동물 앨범 만들기 전체 파일 구조와 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(); }
해결됨
실전! Django 입문 [최신 5.2 버전]
python 3.11을 설치했었는데.. 본 강의에 따라 어제 python 3.13을 다시 설치했습니다. 강의에 따라 가상환경을 구축하기 위하여 첨부와같이 실행했더니 3.11이 구동됩니다. 어떻게 해결해야 할까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
동물 앨범 만들기 3차 까지 들어서 라이브 코드를 작성하였지만, 강의 내용에서 나오는 웹 실행화면이 출력되지 않고 있습니다. 또한, 강사님의 깃 주소에 있는 코드들을 그대로 실행해도 강의 내용처럼 나오지 않습니다. 강사님이 동물 앨범 만들기 2차 때는 1차에서 작성한 각 동물들의 js파일과 html 파일을 삭제하라고 하셨는데, 막상 1차때 작성한 파일들을 삭제하니까 동물 사진이 웹에 출력되지 않아서 다시 기재하였습니다 그래서, 강사님의 깃 주소에는 1차와 2차, 3차 코드는 중복되게 작성하면 안되는 건가요? 강사님처럼 웹 화면에 출력될려면 3차 코드만 있으면 되는 건가요? 왜 3차 코드만으로 강의 내용처럼 출력이 안되는 걸까요? 1차, 2차, 3차의 모든 코드들을 융합해서 작성해야하나요? 다음 강의 node.js와 express.js를 진행할 수 가 없어서 급하게 문의드립니다! !
미해결
스프링 기반 REST API 개발
@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 으로 다르게 쓰는 이유가있나요 ?
해결됨
ASP.NET Core MVC +ASP.NET Core +REST API +.NET 8.0
수업한 내용을 바탕으로 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 로 묶어서 하는것도괜찮나요 ?
해결됨
Spring Boot와 React로 배우는 초간단 REST API 게시판 만들기
내용을 다 따라한것 같은데 DB에 저장이 안되네요..
미해결
스프링부트를 이용한 웹 프로그래밍: 웹사이트 이렇게 만드는 거예요!
강의 잘보고있습니다. 감사합니다 인터셉터와, 필터가있는데 인터셉터로 적용한 이유가 있을까요 ?? -- 그리고 인터셉터 설정할때 @Override public void addInterceptors(InterceptorRegistry registry) { registry.addInterceptor(memberSigninInterceptor) .addPathPatterns("/member/modify"); } 지금 상황에선 excludePathPatterns 설정을 굳이 안해줘도 문제가없지 않나요 ? 강의에서는 해주셨는데
해결됨
[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다! [코드팩토리 디스코드] https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Typeorm 관련 메서드 설명해주시는 과정에서, 위와같이, async 메서드 내부에서 create 메서드를 호출할 땐 await를 붙이지 않고, save 메서드를 호출할 땐 await를 붙이는 이유가 있을까요? 일단, async가 비동기로 메서드를 호출한다는 개념으로 알고 있고, await는 쓰레드가 값을 반환받게 하기위해 비동기 메서드 내부에서 계속 해당 코드에 머무르게끔, 점유하게끔 한다고 생각해서 create 메서드든 save 메서드든 둘다 await가 붙는다고 생각했었습니다. 제가 잘못 이해하고 있는 걸까요?
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
코드 관련 질문은 아래와 같이 '코드블럭' 기능을 이용해주세요! + 오류 메세지도 함께 올려주시면 좋아요 🙂 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.0 node는 20 번대 사용중입니다. ⚠ 답변은 평일 오전 10시에 순차적으로 작성해드립니다. ⚠ '질문 해결'은 답변 작성일 기준 1일 이후에 적용됩니다.
