섹션 13강의 중 "폰트, 이미지, 레이아웃 설정하기" 강의를 보면,이미지 가져오는 것을 컴포넌트화 하는 부분이 나옵니다.util폴더 아래에 get-emotion- image라는 파일을 만드는 부분인데,해당 파일을 jsx가 아닌 js로 만드는 이유가 궁금합니다.제가 해당 파일을 jsx로 해도 정상 작동이 되던데, 리액트에서 js로 하신 이유가 뭘까요?문의드립니다.

인프런 아이디 : tm.jung인프런 이메일 : tm.jung@brainz.co.kr깃헙 아이디 : kcw2371@gmail.com깃헙 Username : kcw2297

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 강사님과 동일하게 index.js를 수정하고 terminal - new terminal을 하면 저는 경로가 계속 my-app의 상위 경로로 되어있어서 cd my-app을 해주고 npm start를 하는데 (이부분도 저는 왜 계속 이렇게 뜨는지 궁금합니다..my-app을 우클릭 후 터미널을 열면 되긴합니다만..) 이렇게 떠서 계속 새로운 포트를 추가해서 사용하게 됩니다..저도 강사님처럼 실습하고 싶은데 어떻게 하면 될까요..?

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 에네랑 같이 있던데 강의에서 언제 생성을 했었나요? 

안녕하세요. 리액트 강좌를 아주 잘듣고 있는 학생입니다.죄송하지만 이전 강좌를 다시 볼수 없을까요? 글내용을 수정하는 부분이 막혀서요 ㅠㅠ

안녕하세요!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 */ 

2.3) 구조분해할당 강의의 배열의 구조 분해 할당과 객체의 구조 분해 할당 모두 아래 코드의 four와 extra와 같이 추가적으로 존재하지 않는 변수를 만드셨는데요.이렇게 할당 받을 값보다 할당 받을 변수가 더 많은 경우가 실제로도 사용이 되나요?? 사용이 된다면 어떤 목적으로 사용이 되나요?let arr = [1, 2, 3]; let [one, two, three] = arr;let person = { name: "이름", age: 24, }; let { name, age, extra, } = person;

혼자서 찾아보려고 했는데 도저히 모르겠네요 ㅜ 오류메세지는 나오는건 없고 제목과 같습니다. 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(); }

🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.5.3 JSX로 UI 표현하기 편 수강 중, 강의 초반부에 자막 오류가 있는 것 같아 문의 드립니다. 감사합니다.

안녕하세요 선생님. 강의 너무 잘 듣고 있습니다 !!스토리지 강의 끝 부분 듣다가 질문이 생겨 글 남깁니다.  if (isLoading) { return <div>데이터 로딩중입니다...</div>; }위와 같이 작성된 if문은 isLoading이 false가 될 때까지 기다려주나요?if문이 실행되었을 당시에 isLoading이 true여서 데이터로딩중이라는 페이지를 반환한 후에도 여전히 로딩이 끝나지 않았다면,아래 컴포넌트들을 렌더링하는 리턴문을 실행하였을 때 에러가 발생하지는 않나요? 벌써 강의 막바지네요. 선생님의 좋은 강의 덕분에 여기까지 올 수 있었던 것 같습니다.감사합니다 :) 🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨질문 하시기 전에 꼭 확인해주세요- 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다)- 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다)- 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢)질문 하실때 꼭 확인하세요- 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X)- 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지)- 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우)- 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요- 강의의 몇 분 몇 초 관련 질문인지 알려주세요!- 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.

section 12 폴더 내의 파일 구성은 어떻게 해야 하나요?

안녕하세요 원시타입과 객체타입 강의를 보다가 궁금한점이 생겨 질문을 드립니다. let p1 = 1;let p2 = p1;p2 = 2;이렇게 1에서 2로 재할당을 하면 메모리상에는 원래 1이 있었는데 새로운 메모리에 2가 추가가 되면서 해당 공간을 가리키는데 메모리 공간에 저장되어 있던 1은 수정되지 않는다...라고 이해하고 있습니다. 그럼 여기서 1은 수정만 되지 않을 뿐 없어지지 않고 그대로 1이 저장이 되어있는건가요? 그리고 객체타입에서는 값을 변경하면 원본이 바로 변경되므로 안전하게 ... 스프레드로 값을 복사해서 사용한다라는 설명이 맞나요?

안녕하세요 강의 너무 잘 보고 있습니다. 강의를 듣다가 Async와 await에 대해 질문이 있습니다.api요청과 같이 시간이 걸리는 작업은 비동기로 이루어지기 때문에 다른 작업이 먼저 이루어지고 그다음 데이터가 불러오면 그 작업을 해야되므로 비동기로 만들어 주기 위해 async를 붙인다 까지는 이해가 되는데 await은 비동기 작업까지 다 처리되고 결과값을 얻기 위해 사용이 되는건가요? 마지막으로 async는 함수 앞에 작성이 되는데 await은 어디에 작성이 되는것인지 궁금합니다.

안녕하세요. debounce 함수 테스트 관련 강의를 보고 궁금한 점이 있어 문의드립니다.  debouncedFn이 300ms이 지난 후 실행되어야 함을 테스트할 때, 기존에 작성해주신 것 처럼 테스트할 시에는 함수가 300ms 후가 아닌 즉시 실행이 되거나 그보다 작은 시간이 지나고 실행이 되어도 테스트가 통과하게 됩니다. 그에 따라 아래처럼 작성하는 것이 더 정확한 테스트라고 생각이 되는데 이렇게 테스트하지 않는 이유가 있는지 궁금합니다!  it('특정 시간이 지난 후 함수가 호출된다.', () => { const spy = vi.fn(); const debouncedFn = debounce(spy, 300); debouncedFn(); expect(spy).not.toHaveBeenCalled(); // 즉시 호출되지 않았는지 확인 vi.advanceTimersByTime(299); expect(spy).not.toHaveBeenCalled(); // 299ms 후에도 호출되지 않았는지 확인 vi.advanceTimersByTime(1); expect(spy).toHaveBeenCalledTimes(1); // 300ms 후에 정확히 한 번 호출되었는지 확인 expect(spy).toHaveBeenCalled(); });

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.왼쪽의 화면처럼만 뜹니다.그리고 강사처럼 npm start만 하면 이런 오류가 떠서cd my-app , npm start하면 그나마 실행되는데 위의 사진처럼 결과 리액트가 아니라 로딩화면같이 뜹니다. 어떻게 해결해야하나요?

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.어떻게 해결해야할까요?

안녕하세요 선생님SCSS(SASS)+FLEX 실전 반응형 웹 프로젝트 with Figma 강의를구매하고 섹션1all 과 섹션2 몇개 강의 듣고 수강평 남기려고 하는데 작성하는 곳이 없어서 글올립니다..ㄴ 수강평 버튼이 없습니다.. 

말씀하신 것을 어떻게 해야 할지 모르겠습니다.api.json 파일을 생성했는데, 이곳에 어떤 데이터를 넣으면 될까요??아래 링크 주신 것들을 하나하나 넣어봤는데, 되지는 않았습니다. ㅠㅠ

oneToMany mapping와 manyToOne mapping에서 users.tntity.ts에 있는 posts항목에 의문이 생겨 질문 드립니다. PostModel list로 되어있는데 DB table은 2dimension이 되지 않는다고 하신것 같아서요 혹시 내부는 어떻게 구현이 되어 있는지 알 수 있나요