월 31,240원
5개월 할부 시다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
마지막 프로젝트 데모 페이지가 보이지 않습니다.
데모🎬 :https://noona-netflix-v2.netlify.app/클릭해도 Site Not Found 만 뜹니다.
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
TMDB 사이트 API 가져오기
https://ji-gwang.tistory.com/54참고하기
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
5.리덕스 유용한 툴 소개
npm install --save redux-devtools-extension설치명령어 실행시 에러가 난다면 터미널에서npm install --save @redux-devtools/extension 설치 후 store.js에서 import 하기import { composeWithDevTools } from '@redux-devtools/extension' 출처 누나슬랙 학생분께서 찾으신 자료
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
json-server 최신버전이면 검색이 안나올 수 있습니다.
json-server 터미널에서json-server --version 확인 후 강사님(0.17.0)과 다르다면 검색할 때 제품이 안나올 수 있습니다.npm uninstall -g json-server 서버 삭제 후npm install -g json-server@0.17.0 버전으로 다시 설치 하시면 정상적으로 잘 나오네요
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
연락처 검색 버튼이 작동하지 않아요
import React, { useState } from 'react'; import {Form, Row, Col, Button} from 'react-bootstrap' import { useDispatch, useSelector } from 'react-redux'; const SearchBox = () => { let [keyword, setKeyword] = useState(''); let dispatch = useDispatch() const { contact } = useSelector((state) => state); const searchByName = (event) => { event.preventDefault(); dispatch({ type: "SEARCH_BY_USERNAME", payload: { keyword } }); }; return ( <Form onSubmit={searchByName} className='search-box'> <Row> <Col lg={8}> <Form.Control type="text" placeholder="이름을 입력해주세요" onChange={(event) => setKeyword(event.target.value)} \ /> </Col> <Col lg={4}> <Button variant="dark">찾기</Button> </Col> </Row> </Form> ) } export default SearchBox 위의 코드는 search-box 코드이고const initialState = { contact: [], keyword: "", } const reducer = (state = initialState, action) => { let { type, payload } = action; switch (type) { case "ADD_CONTACT": state.contact.push({ name: payload.name, phoneNumber: payload.phoneNumber, }); break; case "SEARCH_BY_USERNAME": state.keyword = payload.keyword; break; } return { ...state }; }; export default reducer;위의 코드는 reducer.js 코드 import React, { useEffect, useState } from "react"; import SearchBox from "./SearchBox"; import ContactItem from "./ContactItem"; import { useSelector } from "react-redux"; const ContactList = () => { const { contact, keyword } = useSelector((state) => state); let [filteredList, setFilteredList] = useState([]); useEffect(() => { if (keyword !== "") { let list = contact.filter((item) => item.name.includes(keyword)); setFilteredList(list); } else { setFilteredList(contact); } }, [keyword]); return ( <div> <SearchBox /> <div className="contact-list"> num:{filteredList.length} {filteredList.map((item, idx) => ( <ContactItem item={item} key={idx} /> )) } </div> </div> ); }; export default ContactList위코드는 contactList 코드입니다.너무 안되서 선생님 코드를 그대로 복붙하고 아무리 찾아봐도 다른 부분이 없는데 검색 버튼을 눌러도 작동하지 않습니다. 왜 안되는걸까요? 선생님? 이걸로 밤새고 있습니다.
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
영화 API
제공하신 영화 api 홈페이지 주소를 찾을 수 없어요ㅠㅠ 강의에서 한 대로 https://www.themoviedb.org/ 접속한 후에 More에서 API를 선택하면 이런 화면이 나와요
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
더보기..
영상 밑에 더보기 주소가 안보입니다
- 해결됨(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
미니 쇼핑몰 작업하는 중에 리스트가 잘 안나옵니다.
쇼핑몰 프로젝트에서 db.json 파일을 API로 불러오는 코딩을 하였습니다. 그런데 전체 목록(ProductAll.js) 파일에서 부트스트랩으로 한 줄에 4개의 제품을 보여주고 있는데 한 줄에 4개의 제품이 안나오고 한줄에 하나씩만 나옵니다. 어디가 문제인지 모르겠습니다. 소스코드 같이 올려 드립니다.답변 좀 부탁 드립니다. ProductCard.js 파일입니다. import React from 'react' const ProductCard = ({item}) => { return ( <div className="card"> <img width={200} src={item?.img} alt="제품이미지" /> <div>Concious Choice</div> <div>{item?.title}</div> <div>{item?.price}</div> <div>{item?.new === true ? "신제품" : ""}</div> </div> ); }; export default ProductCard App.css 파일입니다. - css는 제가 임의로 작성을 했습니다. .login-button { display: flex; justify-content: flex-end; margin: 20px; } .login-margin { margin-left: 7px; } .image_size { width: 60px; } .nav-section { width: 100; display: flex; justify-content: center; } .menu-list { display: flex; list-style-type: none; } .menu-list li { padding: 10px; } .menu-area { display: flex; justify-content: center; } .search-box { border-bottom: 1px solid black; position: absolute; right: 20px; padding: 5px; } .search-box input { border: none; margin-left: 5px; } .search-box input:focus { outline: none; } .card { border: none !important; margin-bottom: 10px; }ProductAll.js 파일입니다. import React, { useEffect, useState } from 'react' import ProductCard from '../component/ProductCard'; import { Container, Row, Col } from 'react-bootstrap'; const ProductAll = () => { const [productList, setProductList] = useState([]); const getProducts = async () => { let url = "http://localhost:5000/products"; // url에 있는 데이터(json)를 받는 함수. let response = await fetch(url); // JSON 데이터를 javascript 객체로 변환해 주는 함수. let data = await response.json(); setProductList(data); } useEffect(() => { getProducts(); }, []); return ( <div> <Container> <Row> {productList.map((menu) => ( <Col md={3}> <ProductCard item={menu} /> </Col> ))} </Row> </Container> </div> ) } export default ProductAll
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
매칭되는 action이 없을 때 반환값이요
강의에서는 매칭되는 action이 없을 때에도 새로운 객체를 반환하도록 작성 되어 있는데action이 없으면 re-render를 할 필요가 없으니 기존 객체를 반환해야 하는 게 아닌가요?새로운 객체를 반환하는 이유를 알고 싶습니다~
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
openweather api 호출 했는데 401가 나요!
const getCurrentLocation = () => { navigator.geolocation.getCurrentPosition((position)=>{ console.log('위치', position.coords.latitude, position.coords.longitude); // 위치 37.4838677 126.902839 getWeatherByCurrentLocation(position.coords.latitude, position.coords.longitude); }); } const getWeatherByCurrentLocation = async(latitude, longitude) => { let apiKey = '0619cf6a981bec8d01375e5576139e86'; let apiUrl = `https://api.openweathermap.org/data/3.0/onecall?lat=${latitude}&lon=${longitude}&appid=${apiKey}`; let response = await fetch(apiUrl); let data = await response.json(); console.log('data', data); } useEffect(()=>{getCurrentLocation()}, []);이렇게 작성해서 돌려보니이런식으로 401에러가 납니다....원인을 잘 모르겠어요!ㅠㅠ
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
React-Router 설치중오류
누나 안녕하세요~ 유튭으로만 보다가 누나 강의 보고 인프런으로 넘어온 학생입니다~~다름아니라 리액트 라우터를 설치하는 부분에서 오류가 났는데 하루종일 잡고 있어도 해결이 어려워서 질문드려요 ~!제가 시도한방법은 1.강의에서 나온 npm install react-router-dom@6 와npm install react-router-dom 두가지를 시도해보았습니다! 결과는 npm audit을 활용해 내용을 확인해보니이런식으로 나오는데 .. 여기 나와있는 버전들을 업그래이드 해줘야한다는 소리일까요 ? 맞다면 방법을 혹시 여쭤봐도 될까요 ?+추가 시도package.json도 수정해봤지만 똑같은 에러가 뜨기에 막막하군요 ㅠㅠ리액트 라우터 공식 다큐먼트 확인리액트 라우터 공식 다큐먼트를 들어가보니 누나가 영상을 올려주신때와 조금 달라져있어서시도를 해보았지만 보니까 Vite를 이용한방식이여서 영상강의와 차이가 있는듯해보이네요 ㅠㅠ
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
api 인터셉터사용시 post
안녕하세요. api 인터셉터 사용시 post 내용을 전달 하면 백엔드에서 param 값을 못읽어 옵니다.api.post('주소',param) 하면 param 값을 못읽어 와서바로 axios.post('주소',param)으로 일단 진행 했는데 어떻게 수정 하면 될까요? import axios from "axios"; const api = axios.create({ // baseURL: "http://localhost:5000", headers: { "Content-type": "application/json" }, }); api.interceptors.request.use( function (config) { console.log("config : ", config); return config; }, function (error) { console.log("error : ", error); return Promise.reject(error); } ); api.interceptors.response.use( function (response) { console.log("response : ", response); return response; }, function (error) { console.log("error : ", error); return Promise.reject(error); } ); export default api;
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
상세페이지 api
영화 디테일 정보를 이 api 사용하여 호출하면https://developers.themoviedb.org/3/movies/get-movie-details아래와 같은 error가 발생합니다.Access to fetch at 'https://developers.themoviedb.org/3/movies/get-movie-details/movies/663712' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. 어느 부분을 수정해야 하는 지 알려주세요감사합니다.
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
netlify에 REACT_APP_API_KEY 환변경변수 추가하고 배포해도 API_KEY가 없다고 에러가 나옵니다
netlify에 REACT_APP_API_KEY 환변경변수 추가하고 배포해도 API_KEY가 없다고 에러가 나옵니다배포한 주소입니다https://resilient-sorbet-bba9dd.netlify.app/
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
예고편
안녕하세요! 다름이아니라 말씀하신 api통해서 예고편을 가져오는데, 일부 영화는 예고편이 딱 뜨는데, 일부영화는 results값이 7~8개 정도 되는거같더라구요. 그래서 그냥 results[0].key값으로 videoId 주긴 했는데 제가 잘 가져온게 맞을까요?
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
reducer는 함수라고 해서 function을 넣으셨는데...
1. reducer는 함수라고 해서 function을 넣으셨는데...화살표 함수는 안쓰는 이유가 따로있는건가요??아니면 써도 상관없나요?? 2.dispath에 type은 늘 대문자로 쓰시던데...그것도 또한 어느정도 약속이 되어있는 문법인가요??
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
프로젝트 진행하다가 오류가 나서 더이상 진행을 못하고 있습니다 ㅠ
CORS오류가 났는데 어떻게 해결하면 좋을까요 ㅠ??
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
num에 사용한 {}
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요? name에는 문자열인 ''을 사용하셨는데 num에는 {1}가 왜 들어간지 알수 있을까요? num={1}과 num='1'의 차이를 알고싶습니다.
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
여기서 똑같이 썻는데. 저는 에러가 나는데 혹시 해결방법을 알려주실수있을까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지 import { useEffect } from "react"; import "./App.css"; // 1. 앱이 실행되자 마자 현재위치기반의 날씨가 보인다. // 2. 날씨정보에는 도시,섭씨,화씨 날씨상태 // 3. 5개의 버튼이 있다 (1개는 현재위치, 4개는 다른도시) // 4. 도시버튼을 클릭할때마다 도시별 날씨가 나온다. // 5. 현재위치버튼을 누르면 다시 현재위치 기반의 날씨정보가 나온다. // 6. 데이터를 들고오는 동안 로딩스피너가 돈다. const App = () => { const getCurrentLocation = () => { navigator.geolocation.getCurrentPosition((position) => { let lat = position.coords.latitude; let lon = position.coords.longitude; getWeatherByCurrentCoordinate(lat, lon); }); }; const getWeatherByCurrentCoordinate = async (lat, lon) => { let url = "https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=b19ee17e62808d02995ed6135953d5b1"; let response = await fetch(url); let data = await response.json(); console.log("data:", data); }; useEffect(() => { getCurrentLocation(); }, []); return <div>Hello!</div>; }; export default App; -----에러 코드 data: {cod: '400', message: 'wrong latitude'} cod: "400" message: "wrong latitude" [[Prototype]]: Object 키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
- 미해결(2024 최신 업데이트)리액트 : 프론트엔드 개발자로 가는 마지막 단계
Home.js 데이터 출력에러 질문드립니다.
선생님 ! 전 강의에서 리듀서로 데이터를 payload로 보내서 redux devtools 에 state 값이 잘 담기는 것은 확인했는데요. 이번강의때 Home.js에서 데이터를 부르니 다음과 같은 에러가 출력됩니다. 제가 어느부분을 확인해야 하는것일까요?