173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 사진과 같이 index.js 가 실행되지 않습니다. node 버전을 확인 했을 경우에는 v22.11.0 로 정상적으로 설치된 것으로 나오는데... 어떤 부분이 문제일까요? 강의시간 5분 28초 입니다.
해결됨
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요 선생님 강의 잘 듣고 있습니다. 직접 구현한 atom 컴포넌트들의 테스트 범위에 대하여 질문드립니다. Typography, Badge, Divider와 같이 별도의 로직이 존재하지 않는 컴포넌트들은 ProductInfoArea처럼 스토리북으로 확인만 해도 되는 것인지 궁금합니다. 아니면 atom 컴포넌트의 경우에는 props로 전달 받은 값이 잘 반영되는지 검증이 필요할까요? ( className 값이 잘 적용되는지, Typography의 경우 children 값이 화면에 잘 노출되는지 등등)
미해결
[하루 10분|Web Project] HTML/JS/CSS로 나만의 심리테스트 사이트 만들기
// main변수= 문서 내 #main을 찾아서 가지고 와라 const main= document.querySelector("#main"); const qna= document.querySelector("#qna"); // statusbar 위한 엔드포인트 정의 const endPoint =12; // 결과값 const result=document.querySelector("#result"); // 사용자 입력값에 대한 배열 // const select = []; // 사용자 입력값에 대한 배열 new.직접 12개의 배열에 value 0넣기 const select = [0,0,0,0,0,0,0,0,0,0,0,0,0]; // 질문에 따른 답변 계산 // function calresult(){ // var pointArray = [ // 이 부분 data는 data.js로 옮겨서 동물 당 번호로 바꿔줌. // ] // for(let i = 0; i<endPoint; i++){ // // qnalist로 들어가서 a로 들어가고 거기서 select한 값 // var target =qnaList[i].a[select[i]]; // for(let j=0; j< target.type.length; j++){ // for(let k=0; k<pointArray.length; k++){ // if(target.type[j]=== pointArray[k].name){ // pointArray[k].value += 1; // } // } // } // } function calresult(){ // select라는 배열에 index를 반환할건데 최대값을 console.log(select); var result =select.indexOf(Math.max(...select)); return result; } // // value기준으로 정렬 sort // var resultArray = pointArray.sort(function(a,b){ // if(a.value > b.value){ // return -1; // } // if(a.value < b.value){ // return 1; // } // return 0; // }); // console.log(resultArray) // // key값을 도출, 동물의 이름 // let resultword = resultArray[0].key; // return resultworld; function setresult(){ let point = calresult(); const resultName = document.querySelector('.resultname'); resultName.innerHTML = infoList[point].name; var resultImg = document.createElement('img'); const imgDiv = document.querySelector('#resultImg'); var imgURL = 'img/image-'+ point + '.png'; resultImg.src=imgURL; resultImg.alt=point; resultImg.classList.add('img-fluid'); imgDiv.appendChild(resultImg); const resultDesc = document.querySelector('.resultDesc'); resultDesc.innerHTML=infoList[point].desc; } function goresult(){ qna.style.WebkitAnimation = "fadeOut 1s"; qna.style.Animation = "fadeOut 1s"; setTimeout(() => { result.style.WebkitAnimation = "fadeIn 1s"; result.style.Animation = "fadeIn 1s"; setTimeout(() => { qna.style.display = "none"; result.style.display = "block" }, 450)}) setresult(); calresult(); } function addAnswer(answerText, qIdx,idx){ var a = document.querySelector('.answerbox'); var answer = document.createElement('button'); // answer는 클래스나 id값이 없어서 querySelector이용 불가하므로 클래스 만들어주기 answer.classList.add('answerlist'); // qbox, answerlist에 애니메이션 넣기 위해 클래스 만들어주기 answer.classList.add('fadeIn'); // 버튼 간 간격 answer.classList.add('my-3'); answer.classList.add('py-3'); answer.classList.add('mx-auto'); // 답변 클릭할 수 있게 버튼 만들기 그것을 html에서 코드 짜지 않고 // innerhtml을 통해서 넣기 a.appendChild(answer); answer.innerHTML = answerText; // html의 onclick 역할의 addEventListener answer.addEventListener("click", function(){ // 버튼 하나만 클릭해도 모든 버튼이 사라지도록 함 var children = document.querySelectorAll('.answerlist'); for(let i=0; i< children.length; i++){ children[i].disabled =true; children[i].style.WebkitAnimation = "fadeOut 1s"; children[i].style.Animation = "fadeOut 1s"; } setTimeout(() => { // 소,닭 등 각 부여된 select 리스트의 순서를 찾아 value값 1씩 늘려주기 var target =qnaList[qIdx].a[idx].type; for(let i=0; i< target.length; i++){ select[target[i]] +=1; } //// 사용자 입력이 몇 번째인지 인덱스로 넣어주고 idx로 받아주기 -> 몇 번째 질문에서 몇 번째 답변 눌렀는지 select[qIdx] = idx; for(let i=0; i< children.length; i++){ children[i].style.display = 'none'; } goNext(++qIdx); // 버튼이 사라지고 950초쯤 이후 버튼 없어지게 }, 950) }, false); } function goNext(qIdx){ // 결과값 호출하는 함수 if(qIdx === endPoint){ goresult(); return; } // html파일에서 qna 안 qbox가져와라 var q= document.querySelector('.qbox'); q.innerHTML = qnaList[qIdx].q; // 원래는 q.innerHTML =qnalist[0].q; 였는데 0~11번째 질문을 // 하나씩 입력하면 귀찮으니까 let Idx라는 변수 만들어서, for 함수 사용 for(let i in qnaList[qIdx].a){ // answerlist를 하나씩 입력하지 않고 파라미터로 addAnswer(qnaList[qIdx].a[i].answer,qIdx,i); } // status에 따라서 바로 나타내려고 var status = document.querySelector('.statusbar'); status.style.width=(100/endPoint)*(qIdx+1) + '%'; } // 장면 넘어가는 animation function begin(){ main.style.WebkitAnimation = "fadeOut 1s"; main.style.Animation = "fadeOut 1s"; setTimeout(() => { qna.style.WebkitAnimation = "fadeIn 1s"; qna.style.Animation = "fadeIn 1s"; setTimeout(() => { main.style.display = "none"; qna.style.display = "block" }, 450); // 위에서 세운 고넥스트 함수 호출 let qIdx = 0; goNext(qIdx); }, 450); }
해결됨
한 입 크기로 잘라먹는 Next.js
npm run dev로 프로젝트 시작할 때 보면 하이드레이션 오류가 자주 뜨거든요. 페이지 이동했다가 다시 오면 에러가 사라지길래 그냥 강의 들었었는데. 빠트린 코드가 있는가 싶어서 새로 프로젝트를 새로 만들었거든요. 근데. 처음부터 같은 에러가 발생하네요!!!!!!!!!!!!!!!!!! 제 컴퓨터가 이상한건지.... 다른 분들은 에러가 안나는걸까요>??ㅜ_ㅜ 어떻게 했더니 에러가 났다. 이걸 말씀드려야 하는데ㅎㅎ 허허허..... 어디서 왜 에러가 났는지 감이 안오네요 < 에러 > Hydration failed because the server rendered HTML didn't match the client. As a result this tree will be regenerated on the client. This can happen if a SSR-ed Client Component used - A server/client branch if (typeof window !== 'undefined') . - Variable input such as Date.now() or Math.random() which changes each time it's called. - Date formatting in a user's locale which doesn't match the server. - External changing data without sending a snapshot of it along with the HTML. - Invalid HTML tag nesting. It can also happen if the client has a browser extension installed which messes with the HTML before React loaded. See more info here: https://nextjs.org/docs/messages/react-hydration-error 검색해보니까. 뭐 버전차이 이런것도 있는 것 같아서 제 의존성 버전을 봤는데.. 최신 버전으로 설치된건데. 음...이거 말고 next 15.0.3 react 19.0.0은 설치가 안되더라고영 ㅎㅎ.... 원인을 밝히기가 어렵네영. "dependencies": { "react": "19.0.0-rc-66855b96-20241106", "react-dom": "19.0.0-rc-66855b96-20241106", "next": "15.0.3" }, 혹시나 해서 강사님 패키지 봤는데 next가 15.0.0버전이더라고요 이거로 설치했더니 하이드레이션 에러는 안뜨네요!!! 험......... 버전 문ㅈㅔ였나봐요.. "dependencies": { "react": "19.0.0-rc-f994737d14-20240522", "react-dom": "19.0.0-rc-f994737d14-20240522", "next": "15.0.0-rc.0" }, 나름 해결한 것 같긴한데, 뭔가 찜찜해서 ㅎㅎ 버전 차이로도 저와 같은 에러가 발생할 수 있는건가요?? 버전을 바꿔서 install 했는데, 이 상태로 강의를 계속 들어도 되겠죠??? 주저리주저리... 고민의 글을 적어봤습니다ㅎㅎ
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님 안녕하세요! 모든 아나그램 찾기 문제에서 compareMaps에 for문이 있어서 해당 문제 시간복잡도가 O(N*M)이 되지 않나요? 그럼 결국 이중for문의 시간복잡도와 같아지는건 아닌지 궁금합니다~!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
섹션 13강의 중 "폰트, 이미지, 레이아웃 설정하기" 강의를 보면, 이미지 가져오는 것을 컴포넌트화 하는 부분이 나옵니다. util폴더 아래에 get-emotion- image라는 파일을 만드는 부분인데, 해당 파일을 jsx가 아닌 js로 만드는 이유가 궁금합니다. 제가 해당 파일을 jsx로 해도 정상 작동이 되던데, 리액트에서 js로 하신 이유가 뭘까요? 문의드립니다.
미해결
Vue.js 완벽 가이드 - 실습과 리팩토링으로 배우는 실전 개념
인프런 아이디 : tm.jung 인프런 이메일 : tm.jung@brainz.co.kr 깃헙 아이디 : kcw2371@gmail.com 깃헙 Username : kcw2297
해결됨
한 입 크기로 잘라먹는 Next.js
강의를 잘 듣던 도중에 궁금증이 생겨 질문드립니다. #9.1 이미지 최적화 강의를 듣고 나서 생긴 궁금증입니다. 여러 img태그를 next에서 제공하는 Image 태그로 교체함으로써 웹사이트의 이미지를 최적화시킬 수 있다는 점은 잘 이해했습니다. 하지만 이렇게 된다면 이전 강의에서 배운 도서 상세 페이지에서 도서의 표지를 검은색 배경으로 깔기 위해 사용했던 div 태그 내의 css ( BackgroundImage: url(...) ) 부분이 가져오는 이미지는 최적화가 전혀 되지 않을 것 같다는 생각이 들었습니다. 열심히 최적화를 해 봐야 저 부분에서 풀 사이즈의 이미지를 중복해서 가져온다면 성능에 다시 악영향이 갈 것 같다고 생각하였고, 나름의 답을 생각해 보았는데, 어떤 답이 맞는 것인지 잘 모르겠어 이렇게 질문드립니다. 배경 부분도 Image 태그로 불러운 다음 css를 적절하게 사용해 똑같이 배경 느낌으로 만들어 준다. css url로 가져온 이미지는 자주 가져오지 않으므로 최적화하지 않아도 큰 영향은 없다. 사실 고민을 해 보아도 이 두가지 밖에 떠오르지 않아 둘 중에 답이 있는 것인지, 아니라면 어떤 방법을 적용하는 것이 좋은 방법일지 질분드립니다.
미해결
처음 만난 리액트(React)
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요! 강의 듣다가 에러가 발생해서 문의드립니다. 어디가 정확히 에러가 나는지 잘 모르겠어서, 어떻게 해결을 해야할지 모르겟네용... 클라이언트와 서버컴포넌트의 하이드레이션 과정에서 에러가 발생한다고 하는데요ㅠㅠ... 4ch 앱라우터 데이터 패칭 할 때 에러난건데, 서버 에러도 같이 뜹니다!! 아니면 서버의 문제라서 클라이언트-서버컴포넌트 하이드레이션까지 문제가 생긴걸까요?? ( 서버는 건드린 적이 없는데 ㅠㅠ ) < 에러 발생 내용 > hook.js:608 A tree hydrated but some attributes of the server rendered HTML didn't match the client properties. 아래 사진은 서버 vscode 터미널 사진입니당 ㅠ Invalid this.prisma.book.findMany() invocation in C:\Users\82106\Desktop\06_onebite-server-main\src\book\book.service.ts:27:35 24 } 25 26 async findAllBooks() { → 27 return await this.prisma.book .findMany( Error querying the database: FATAL: Tenant or user not found PrismaClientInitializationError: Invalid this.prisma.book.findMany() invocation in C:\Users\82106\Desktop\06_onebite-server-main\src\book\book.service.ts:27:35 at In.handleRequestError (C:\Users\82106\Desktop\06_onebite-server-main\node_modules\@prisma\client\runtime\library.js:122:7154) at In.handleAndLogRequestError (C:\Users\82106\Desktop\06_onebite-server-main\node_modules\@prisma\client\runtime\library.js:122:6188)
해결됨
문법 공부 다음엔, 자바스크립트 프로젝트 101
uncaught syntaxerror: unexpected identifier 'assert' 가 계속 떠요. gpt한테 물어보니까 너무 다른 방향으로 알려주는거 같아서 질문들여용
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
mongoose . connect ( "mongodb://my-database:27017/mydocker" ). then (() => console . log ( "db접속성공" )). catch (( err ) => console . log ( "db접속실패" , err )) 저는 이 부분이 터미널에 db접속이나 db접속 실패가 터미널창에 안 떠요. 터미널창에 왜 안뜰까요?? 우분투라서 sudo docker-compose build sudo docker-compose up 하면 선생님은 db접속유무가 뜨는데 저는 터미널창에 안 떠요 그리고 mydocker이부분은 docker-compass에 들어가면 선생님은 databases에 admin config local 에네랑 같이 있던데 강의에서 언제 생성을 했었나요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요. 리액트 강좌를 아주 잘듣고 있는 학생입니다. 죄송하지만 이전 강좌를 다시 볼수 없을까요? 글내용을 수정하는 부분이 막혀서요 ㅠㅠ
미해결
실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트
안녕하세요! setup, teardown 강의를 보며 실습하고 있습니다. beforeAll 내에 console이 첫번째로 찍히다가 afterAll과 함께 사용할 경우에는 afterAll 바로 직전(마지막 바로 앞)에 찍히고 있습니다. (afterAll을 지울 경우에는 첫번째로 찍히고 있습니다.) beforeEach는 it을 실행하는 횟수만큼 실행되는거 같은데요. describe내에 선언한 beforeEach는 describe내에 호출한 it의 횟수만큼 실행되는게 맞는거 같은데 root의 beforeEach, afterEach도 it의 횟수만큼 실행되는게 맞을까요? 제가 사용한 코드와 출력화면 입니다. import { screen } from '@testing-library/react'; import React from 'react'; import TextField from '@/components/TextField'; import render from '@/utils/test/render'; beforeEach(() => { console.log('2. root - beforeEach'); }); beforeAll(() => { console.log('1. root - beforeAll'); }); afterEach(() => { console.log('5. root - afterEach'); }); afterAll(() => { console.log('6. root - afterAll'); }); describe('placeholder', () => { beforeEach(() => { console.log('3. placeholder - beforeEach'); }); afterEach(() => { console.log('4. placeholder - afterEach'); }); it('기본 placeholder "텍스트를 입력해 주세요."가 노출된다.', async () => { await render(<TextField />); const textInput = screen.getByPlaceholderText('텍스트를 입력해 주세요.'); expect(textInput).toBeInTheDocument(); }); it('placeholder prop에 따라 placeholder가 변경된다.', async () => { await render(<TextField placeholder="상품명을 입력해 주세요." />); const textInput = screen.getByPlaceholderText('상품명을 입력해 주세요.'); expect(textInput).toBeInTheDocument(); }); }); /** 실행 결과 2. root - beforeEach 3. placeholder - beforeEach 4. placeholder - afterEach 5. root - afterEach 2. root - beforeEach 3. placeholder - beforeEach 4. placeholder - afterEach 5. root - afterEach 1. root - beforeAll 6. root - afterAll */
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.3) 구조분해할당 강의의 배열의 구조 분해 할당과 객체의 구조 분해 할당 모두 아래 코드의 four와 extra와 같이 추가적으로 존재하지 않는 변수를 만드셨는데요. 이렇게 할당 받을 값보다 할당 받을 변수가 더 많은 경우가 실제로도 사용이 되나요?? 사용이 된다면 어떤 목적으로 사용이 되나요? let arr = [1, 2, 3]; let [one, two, three] = arr; let person = { name: "이름", age: 24, }; let { name, age, extra, } = person;
해결됨
한 번에 끝내는 자바스크립트: 바닐라 자바스크립트로 SPA 개발까지
혼자서 찾아보려고 했는데 도저히 모르겠네요 ㅜ 오류메세지는 나오는건 없고 제목과 같습니다. 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(); }
해결됨
한 입 크기로 잘라먹는 Next.js
아래와 같은 에러가 발생했는데 무슨 문제인지 알려주시면 감사하겠습니다. Error: Prisma schema validation - (get-config wasm) Error code: P1012 error: Environment variable not found: DATABASE_URL. --> schema.prisma:13 | 12 | provider = "postgresql" 13 | url = env("DATABASE_URL") | Validation Error Count: 1 [Context: getConfig]
해결됨
한 입 크기로 잘라먹는 Next.js
서버컴포넌트에서 필요한 컴포넌트마다 데이터를 페칭하면, 서버에서 받아온 상태에 대해서는 전역상태 관리를 할 필요가 전혀 없는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 5.3 JSX로 UI 표현하기 편 수강 중, 강의 초반부에 자막 오류가 있는 것 같아 문의 드립니다. 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님. 강의 너무 잘 듣고 있습니다 !! 스토리지 강의 끝 부분 듣다가 질문이 생겨 글 남깁니다. if (isLoading) { return <div>데이터 로딩중입니다...</div>; } 위와 같이 작성된 if문은 isLoading이 false가 될 때까지 기다려주나요? if문이 실행되었을 당시에 isLoading이 true여서 데이터로딩중이라는 페이지를 반환한 후에도 여전히 로딩이 끝나지 않았다면, 아래 컴포넌트들을 렌더링하는 리턴문을 실행하였을 때 에러가 발생하지는 않나요? 벌써 강의 막바지네요. 선생님의 좋은 강의 덕분에 여기까지 올 수 있었던 것 같습니다. 감사합니다 :) 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
