무료
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결처음 만난 리액트(React)
미니블로그 프로젝트 빌드시 오류
안녕하세요 마지막 프로젝트 진행시 오류때문에 질문남겨드립니다. 이러한 오류가 생기는데 해결방법을 잘 모르겟습니다 ㅠㅠ
- 해결됨처음 만난 리액트(React)
chapter_03 Book, Library.jsx 진행시 한글 깨짐 문의드립니다.
안녕하세요 선생님현재 chapter_03 진행 중인데요,jsx 실습 진행중인데,제 코드는 이렇구요, jsx는 이렇게 작성하였습니다. 그리고 npm start로 react-app 실행 시 요렇게 한글이 깨지는데요 혹시 해결 방안을 알 수 있을까요?
- 미해결처음 만난 리액트(React)
node.js 설치
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.node.js 설치를 완료했는데 버전이 안나오는데 왜 그런건가요?
- 해결됨처음 만난 리액트(React)
component관련 질문있습니다.
안녕하세요 🙂React 첫 인강을 소플님의 강의로 시작했습니다.소플님의 인강을 들으면서 유튜브에 올라오는 React 사이드 프로젝트들을 따라하고 있는데 component관련에서 궁금한 사항이 생겨서 늦게나마 질문을 올립니다. 예시) Main component 안에 Button // List // Write 3개의 component가 있다고 가정한다면소플님은 먼저 3개의 작은 component들을 만들고 조합하여 Main component를 완성한다고 말씀하셨습니다.(재사용성 떄문)그런데 어떤분들은 먼저 Main component에서 3개의 작은 component 내용들을 전부다 쓰고 마지막에 3개를 분리하여 각각 해당 component들에 나눠담으시던데 먼저 큰 컴포넌트를 레이아웃을 구성해서 작은 컴포넌트에 나눠 담는게 맞는건지작은 컴포넌트들을 조합해서 큰 컴포넌트를 만드는게 맞는건지 알 수 있을까요? React 처음으로 완강했는데 너무 유익한 강의였습니다 감사합니다:)
- 미해결처음 만난 리액트(React)
버튼은 뜨는데 눌렀을 때 동작하지 않아요.
17, 17.0.0, 18.0.0 다 해봤는데 버튼은 뜨지만 눌렀을 때 글자가 바뀌지 않아요ㅠ 문제가 무엇일까요?
- 해결됨처음 만난 리액트(React)
9장 Conditional Rendering 실습 질문있습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.[Toolbar.jsx][LandingPage.jsx][index.js][결과창]올려주신 영상과 동일하게 작업을 진행했다고 생각하는데 결과창에서 버튼을 선택해도 상태가 변경되지 않습니다.어떤 부분이 문제일까요??react 버전은 18입니다
- 미해결처음 만난 리액트(React)
여기서 백틱으로 감싸주는 이유가 궁금합니다.
const Wrapper = ~~~ 아래에 백틱으로 감싸주는 이유가 궁금합니다.그리고 왜 저는 강사님처럼 안나오고 전부 붉게 나올까요..?
- 미해결처음 만난 리액트(React)
chap05) 저는 왜 폰트가 사진에 딱 붙어서 나올까요?
CSS 코드는 올바르게 짠 것 같은데저는 사진에 착 달라붙어서 폰트가 출력되네요..뭐가 문제일까요?
- 해결됨처음 만난 리액트(React)
알림이 1초마다 두 개씩 뜹니다.
분명히 코드를 그대로 따라 쳤는데 1초에 두 번씩 알림이 나오는 경우도 존재하나요?Warning: Each child in a list should have a unique "key" prop. 오류도 떴습니다. 각각 notification.jsx, notificationList.jsx 코드입니다import React from "react" const styles = { wrapper: { margin: 8, padding: 8, display: 'flex', flexDirection: 'row', border: '1px solid grey', borderRadius: 16 }, messageText: { color: 'black', fontSize: 16 } } class Notification extends React.Component { constructor(props) { super(props) this.state = {} } render() { return ( <div style={styles.wrapper}> <span style={styles.messageText}>{this.props.message}</span> </div> ) } } export default Notificationimport React from 'react' import Notification from './notification' const reservedNotifications = [ { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, { message: '안녕하세요, 오늘 일정을 알려드립니다.' }, { message: '점심식사 시간입니다.' }, { message: '이제 곧 미팅이 시작됩니다.' }, ] var timer class NotificationList extends React.Component { constructor(props) { super(props) this.state = { notifications: [] } } componentDidMount() { const { notifications } = this.state timer = setInterval(() => { if(notifications.length < reservedNotifications.length) { const index = notifications.length notifications.push(reservedNotifications[index]) this.setState({ notifications: notifications }) } else { clearInterval(timer) } }, 1000) } render() { return ( <div> {this.state.notifications.map(v => { return <Notification message={v.message}/> })} </div> ) } } export default NotificationList
- 미해결처음 만난 리액트(React)
chapter 6 실습
같은 실습 코드를 mac에서 돌렸을 경우에는 잘 작동되고 윈도우에서 돌리면 오류는 뜨지 않으나 작동되지 않고 빈화면만 출력되는데 이유가 무엇인가요?
- 미해결처음 만난 리액트(React)
챕터 6 실습 "./Notification" 경고
3번째 줄 "./Notification"에 왜 경고창이 뜨는걸까요? 실행은 잘 됩니다
- 미해결처음 만난 리액트(React)
[chapter_04]시계만들기 오류
안녕하세요 강사님. chapter03을 할때도 있던 문제와 더불어, chapter04를 진행할때도 문제가 생겨 질문드립니다.제가 궁금한 내용은port 3000번이 이미 사용중이라는 메세지가 뜨는이유(초반에 create ~~명령어를 사용해 my-app 폴더를 만들어 cd my-app , npm start를 쓸땐 port 3000번에 강의영상과 같은 화면이 잘 나왔습니다.) 이것 때문에 실행할때마다 포트번호가 3001, 3002, ... 3010 이런식으로 계속 증가합니다chapter3를 실행할땐 나오지 않던 에러페이지가 chapter4를 실행할때 나오는 이유입니다.(2번문제는 해결해서 에러는 확인해서 처리했습니다. 리턴할때 괄호를 붙이고 써서 나온 에러같아서 수정해보니 되더군요)우선 아래는 Clock.jsx파일입니다.import React from "react"; function Clock(props){ return( <div> <h1>안녕, 리액트!</h1> <h2>현재 시간: {new Date().toLocaleDateString()}</h2> </div> ); } export default Clock;그리고 index.js파일입니다.import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; import App from './App'; import reportWebVitals from './reportWebVitals'; import Library from './chapter_03/Library'; import Clock from './chapter_04/Clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(()=>{ root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000) // If you want to start measuring performance in your app, pass a function // to log results (for example: reportWebVitals(console.log)) // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals reportWebVitals(); 이를 새 터미널을 활용해 실행시켜보면 다음과 같이 뜨는데요,여기서 y를 눌러 실행을 해보면 아래와 같이 에러가 뜹니다.에러가 나는 이유와 해결방안이 궁금합니다 감사합니다.
- 미해결처음 만난 리액트(React)
chapter_04 시계만들기에서 오류가 납니다ㅠㅠ
설명보고 따라하였는데 시계가 아닌 오류문구만 뜹니다..무엇이 문제일까요?ㅠㅠ
- 해결됨처음 만난 리액트(React)
context 질문 드립니다
안녕하세요 소플님1 context가 여러 컴포넌트에 접근을 할 수 있다고 하셨는데context는 상태 관리인건가요? 2 현업에서는 스타일 컴포넌트와 scss 중 어느걸 어 많이 사용 하나요?
- 해결됨처음 만난 리액트(React)
미니블로그
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 마지막 미니블로그 테스트만 남았는데코드를 깃헙에서 그대로 가져와 복붙을 하고 실행해도 사파리에서는 null is not an object크롬에서는 Cannot read properties of null (reading 'useContext') TypeError: Cannot read properties of null (reading 'useContext') 오류가 뜹니다 어떻게 해야 할까요?
- 해결됨처음 만난 리액트(React)
useEffect() 안에 함수를 정의하는 이유가 무엇인가요?
안녕하세요, 소플님.챕터 7 나만의 훅 만들기를 공부하다가 궁금한 점이 있어서 질문드립니다. 228쪽 커스텀 훅 추출하기 예제 코드에서function useUserStatus(userId) { //... useEffect(() => { function handleStatusChange(status) { //... } //... }) //... }이런 식으로 useEffect 안에 handleStatusChange 함수를 정의하셨는데,useUserStatus 바로 아래에 정의하지 않고 useEffect 안에 정의하신 이유가 있을까요?어떤 상황에서 useEffect 안에 함수를 정의해야 하는 것인지 궁금합니다. 감사합니다.
- 미해결처음 만난 리액트(React)
섹션0의 3번째, 자바스크립트의 연산자 강의 내용에 오류가 있습니다.
이 부분에서 a -= b와a /= b 부분의 정답을 보여주는 주석에 오류가 있어 문의드립니다. 각각 -2와 0.5가 맞는 답일까요?답변 부탁드립니다!!:)
- 미해결처음 만난 리액트(React)
미니 프로제트에서 map의 요소를 왜 찾지 못하는지 모르겠습니다
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안녕하세요 미니 블로그 실습을 진행하던 중 위와 같은 오류를 발견하였습니다. commentList 파일의 map함수를 보았는데, 분명 배열이여서 map함수가 실행이 되어야 하는데 찾이 못하더라구요 import React from "react"; import styled from "styled-components"; import CommentListItem from "./CommentListItem"; const Wrapper = styled.div` display: flex; flex-direction: column; align-item: flex-start; justify-content: center; & > * { :not(:last-child){ margin-bottom: 16px; } } `; function CommentList(props){ const { comments } = props; return ( <Wrapper> {comments.map((comment, index) => { return <CommentListItem key={comment.id} comment= {comment}/> })} </Wrapper> ) } export default CommentList;혹시 힌트를 알 수 있을까요?
- 해결됨처음 만난 리액트(React)
변경된 input 값이 텍스트로 보이지 않습니다.
개발자 도구로 보면 섭씨에 값 입력 시 화씨 input에도 값이 담기고 변하는데 텍스트는 보이지 않습니다...찾아보니 <input value="{props.temperature}"> 대신 <input defaultValue="{props.temperature}"> 를 쓰면 된대서 defaultValue를 쓰면 텍스트가 잘 나옵니다...아래 사진은 <input defaultValue={props.temperature}>으로 수정했을 때 입니다. 왜 <input value=""> 대신 <input defaultValue="">를 사용해야 정상적으로 나오는지 궁금합니다. TemperatureInput.jsxconst scaleNames = { c: "섭씨", f: "화씨", }; function TemperatureInput(props) { const handleChange = (event) => { props.onTemperatureChange(event.target.value); }; return ( <fieldset> <legend>온도를 입력해주세요(단위: {scaleNames[props.scale]})</legend> <input vaule={props.temperature} onChange={handleChange} /> </fieldset> ); } export default TemperatureInput; Calculator.jsximport React, { useState } from "react"; import TemperatureInput from "./TemperatureInput"; function BoilingVerdict(props) { //물 끓음 감지 if (props.celsius >= 100) { return <p>물이 끓습니다.</p>; } return <p>물이 끓지 않습니다.</p>; } function toCelsius(fahrenheit) { //화씨 계산 함수 return ((fahrenheit - 32) * 5) / 9; } function toFahrenheit(celsius) { //섭씨 계산 함수 return (celsius * 9) / 5 + 32; } function tryConvert(temperature, convert) { const input = parseFloat(temperature); if (Number.isNaN(input)) { return ""; } const output = convert(input); //섭씨 or 화씨로 변환 const rounded = Math.round(output * 1000) / 1000; return rounded.toString(); } function Calculator(props) { const [temperature, setTemperature] = useState(""); const [scale, setScale] = useState("c"); const handleCelsiusChange = (temperature) => { setTemperature(temperature); setScale("c"); }; const handleFahrenheitChange = (temperature) => { setTemperature(temperature); setScale("f"); }; const celsius = scale === "f" ? tryConvert(temperature, toCelsius) : temperature; const fahrenheit = scale === "c" ? tryConvert(temperature, toFahrenheit) : temperature; return ( <div> <TemperatureInput scale="c" temperature={celsius} onTemperatureChange={handleCelsiusChange} /> <TemperatureInput scale="f" temperature={fahrenheit} onTemperatureChange={handleFahrenheitChange} /> <BoilingVerdict celsius={parseFloat(celsius)} /> </div> ); } export default Calculator;
- 미해결처음 만난 리액트(React)
스타일콤포넌트 스크립트의 색상 다르게 보이는 부분 문의 드립니다.
스타일콤포넌트 작성 부분에 백틱 다음 문자열 작성에 소플님의 VS 화면의 css 스타일 코드 부분이 하늘색(?)과 노랑색, 갈색으로 보여서 가독성이 좋아 보입니다.그런데 저는 백틱 다음의 문자열이 모두 갈색으로 보이는데 VS환경설정 기능에 뭔가 있는 건가요?다른 부분은 색깔 구분에 잘되어져 보이는데, 유독 스타일콤포넌트의 백틱 부부분만 색상 구분이 안됩니다.