55,000원
다른 수강생들이 자주 물어보는 질문이 궁금하신가요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
http://localhost:3000/ 하면 404에러가 납니다.
npx lite0server --baseDir 1-vanilla터미널에서 실행 후, localhost:3000접속하면Cannot GET / 이라고 뜨고 개발자도구에는 404에러라고 뜹니다. 터미널에도 404 에러구요.. 어떻게 하면 화면 띄울수있을까요?Did not detect a `bs-config.json` or `bs-config.js` override file. Using lite-server defaults... ** browser-sync config ** { injectChanges: false, files: [ './**/*.{html,htm,css,js}' ], watchOptions: { ignored: 'node_modules' }, server: { baseDir: './', middleware: [ [Function (anonymous)], [Function (anonymous)] ] } } [Browsersync] Access URLs: -------------------------------------- Local: http://localhost:3000 External: http://192.168.0.102:3000 -------------------------------------- UI: http://localhost:3001 UI External: http://localhost:3001 -------------------------------------- [Browsersync] Serving files from: ./ [Browsersync] Watching files... 23.09.07 15:29:32 404 GET /index.html 23.09.07 15:29:35 404 GET /index.html 23.09.07 15:33:58 404 GET /index.html
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
프로젝트에 사용할 상태와 로직 관리 라이브러리 훅 사용 질문입니다.
로그인 및 인증,인가(세션,jwt둘다 사용), 게시판(이미지포함), 댓글, 소켓채팅 정도의 기능을 구현하여 테스트 코드와 docker로 띄워서 CI/CD까지 구현하려고 합니다. 상태랑 로직 관리를 useReducer, React Context API, React Query, redux, graphql 정도로 생각하고 있는데 어떤걸로 하는게 좋을까요?!
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
import store 에러
"VM196:1 Uncaught SyntaxError: Cannot use import statement outside a module at Ove (transformScriptTags.ts:99:10) at n (transformScriptTags.ts:173:9) at s (transformScriptTags.ts:204:11) at Lve.t.forEach.e.src.o.onreadystatechange (transformScriptTags.ts:121:9)" 안녕하세요. store.js import 시 이런 에러가 나는데 이유 알 수 있을까요??
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
버전이 어떻게 되는지가 궁금합니다.
이제 배우게 될 리액트는 버전이 어떻게 되는지가 궁금합니다. 최신 버전인 18버전의 강의가 될까요?? 함수형 기반과Class 기반이 있는것 같은데어떤지 궁금해서 질문을 남깁니다...
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
ㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋㅋ
강사님 트름하시는거 너무 웃기네요 ㅋㅋㅋㅋ지루하던참에 덕분에 웃었습니다 감사합니다
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[순수JS 1] 검색결과 2 reset 버튼 이런식으로 하면 문제되는 점이 있을까요?
안녕하세요 선생님 강의 잘 듣고 많이 배워가고 있는 초보자입니다.저는 searchResultView의 element의 innerHTML을 초기화 해버리는 식으로 풀이를 했었는데요, 혹시 이러면 나중에 문제가 발생할 수 있는 부분이 있을까요?
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
HistoryListView 구현 시 KeywordListView 상속 받는 것에 관련해 문의드립니다.
안녕하세요.강사님께서 강의에서 HistoryListView 클래스를 작성하실 때 KeywordListView를 상속 받아서 작성하셨는데요.실무에서도 이와 같이 비슷한(동일한 수준의) 클래스 중 하나를 먼저 구현하고 이를 상속 받아 다른 클래스를 만드는 경우가 흔히 있나요?저는 아래와 같이 공통의 기능을 갖고 있는 또 다른 클래스 (ex. ListView)를 만들고, 각 클래스들(ex. KeywordListView, HistoryListView)이 이 공통의 클래스를 상속받는 것이 좋을 것이라고 생각했었거든요.KeywordListView -> ListView -> View HistoryListView -> ListView -> View강사님께서 사용하신 방법 대로 하면 기존의 코드를 최대한 활용할 수 있다는 장점은 있지만 서로 동일한 수준의 클래스가 서로 상속을 받게 되는 것 같아서요.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
TabLabel의 Key 관련 문의드립니다.
안녕하세요.강사님께서 TabLabel을 아래와 같이 작성하셨는데, Key에 []가 들어가 있는 경우는 처음 보아서요.const TabLabel = { [TabType.KEYWORD]: "추천 검색어", [TabType.HISTORY]: "최근 검색어", };Key를 배열로 선언하신 것인가요? 이와 관련된 문법은 어디서 찾아볼 수 있을까요?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
reset() 함수 작성 관련 문의드립니다.
안녕하세요.저는 아래와 같이 Controller에서는 Store의 reset()함수를 호출만하고, Store에서 상태를 변경하는 방식으로 작성했는데요.// Controller.js export default class Controller { constructor(store, { searchFormView, searchResultView }) { this.store = store; this.searchFormView = searchFormView; this.subscribeViewEvents(); } subscribeViewEvents() { this.searchFormView // .on("@reset", () => this.reset()); } reset() { console.log(tag, "reset"); this.store.reset(); // 작성한 부분 this.render(); } }// Store.js export default class Store { constructor(storage) { console.log(tag, "constructor"); if (!storage) throw "no storage"; this.storage = storage; this.searchKeyword = ""; this.searchResult = []; } // 작성한 부분 reset() { this.searchKeyword = ""; this.searchResult = []; } }강사님 풀이는 다음과 같이, Controller에서 store의 상태값을 직접 넣어주는 식으로 작성을 하셨더라구요.// Controller.js ... reset() { console.log(tag, "reset"); this.store.searchKeyword = ""; this.store.searchResult = []; this.render(); }둘 다 기능상의 차이는 없는 것 같은데, 혹시 둘 중 선호되는 방식이 있는지 궁금합니다.
- 해결됨[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
storage를 동적으로 변경하는 경우 코드 변경 사항 문의드립니다.
안녕하세요.storage를 동적으로 변경하는 경우 현재 기준으로 어떤 부분의 코드를 변경하는 것이 좋을지 문의드립니다.현재 코드에서는 아래와 같이 정적인 데이터(storage.js)를 main.js에서 주입해주는데요.// main.js import Store from "./store.js"; import storage from "./storage.js"; function main() { const store = new Store(storage); new Controller(store, views); } 만약 storage 데이터를 ajax를 통해 동적으로 받아온다면, main.js와 Controller.js는 그대로 두고 Storage.js와 storage.js 파일만 변경하면 되나요?즉, 아래 코드 주석처럼 하면 될까요? 또한, AJAX 요청은 Controller와 Storage 중 어느 부분에 작성하는 것이 일반적인가요?// Controller.js // 변경 없음 export default class Controller { constructor(store, { searchFormView, searchResultView }) { this.store = store; this.searchFormView = searchFormView; this.searchResultView = searchResultView; this.subscribeViewEvents(); } subscribeViewEvents() { this.searchFormView .on("@submit", (event) => this.search(event.detail.value)) // } search(searchKeyword) { this.store.search(searchKeyword); } }// storage.js // 데이터를 빈 배열로 변경 const storage = { keywordData: [], historyData: [], productData: [], }; export default storage;// Store.js export default class Store { constructor(storage) { if (!storage) throw "no storage"; this.storage = storage; this.searchKeyword = ""; this.searchResult = []; } search(keyword) { this.searchKeyword = keyword; this.searchResult = // 여기서 AJAX 요청을 통해 storage.js의 상태 관리? 아니면 Controller에서 AJAX 요청? } }
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
[순수JS1]검색폼 3 질문
강사님, 안녕하세요엔터 키 입력 시submit 동작하는 이벤트는어디에 만들어져있는건가요..??따로 작업한 부분이 없는 것 같은데엔터 입력 시 동작하는 이유를 잘 모르겠습니다..감사합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
SRP
선생님 이 특수화라는 방법을 이용해서 List컴포넌트가 적어도 3가지일을 하고 있는듯이 보이는데 이것은 SRP에 위배되는 것이 아닌가요? 프런트 엔드 개발에서 조건부 렌더링이 필수불가결하다고 하지만 지양하는게 좋은건지 그냥 맘편히 사용해도되는건지 잘 모르겠습니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
store 관련
안녕하세요 강의를 보다가 의문이 들어 질문드립니다. 지금 storage.js 를 보면 여러가지 JSON 형식의 데이터 들이 있는데요 혹시 Axios 를 통해 request 하여 respones 받은 값을 storage.js 와 같은 별도의 js 파일로 관리를 하는 것도 괜찮은 방법인지 궁금합니다. 이런식으로 관리를 하여 response 만 받은 값을 관리하는 js 파일을 사용하는 것이 좋은 것인지 아니면 현재 데이터를 예제로 하기위해 이러한 방식으로 한 것인지 궁금합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
State 끌어올리기 구분.
안녕하세요. state 끌어올리기는 하는 이유는 즉 여러곳에서 사용 할 데이터를 자식에서 부모로 보내 또 다른 컴포넌트에서 사용하도록 하기 위한 것으로 이해가 됩니다. 1. 상태를 여러곳으로 사용하는 경우에는 자식 => 부모로 보내는 패턴을 이용하는 것이 맞는 방법이고 자식에서 계속 상태를 가지고 부모로 보내는 방식을 잘못된 방식인가요? 2. 만약 어떠한 하나의 상태만 공통적으로 사용하는 경우 그 상태만 끌러올려서 사용하는게 맞는 것인지. 아니면 다른 상태도 같이 끌어올려 함수형 컴포넌트로 만든 후 부모로 보내는게 맞는 건가요?만약 어떤건 부모로 어떤건 자식에서 관리를 하면 약간 중구난방의 코드가 될 것 같은데.. 어떠한 방식이 좋은지 궁금합니다. 맞다 틀리다의 영역인지 개발패턴이나 디자인에 영역에 따라 다른 것인지 궁금합니다. 이전 질문 답변 감사했습니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
함수형 컴포넌트 관련
안녕하세요. App.js 라는 것은 extends React.Component 를 하는데 함수형 컴포넌트라서 extends React.Component 를 사용안하는 것이 맞나요 ?
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
각 파일들의 역할에 대해
안녕하세요 index.html, App.js main.js 의 각각 역할이 잘 이해되지 않습니다. index.html 은 최상위 DOM 을 위한 것이고 App.js 는 추후 거대한 서랍장을 만들기 위한 파일이고 main.js 는 React JSX 문법을 사용하기 위한 파일인가요? 궁금하여 질문 드립니다 감사합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
store 를 가져올 때 질문.
안녕하세요 김정환님 수업 잘 듣고 있습니다. Store.js 에서 this.storage = storage 를 하는 이유가 무엇인가요? 이미 import 를 해온 상황이면 바로 storag.XXX 등을 사용하여 바로 사용할 수는 없는 것인가요? 제가 흘려 듣고 넘어갔을 수도 있겠지만 궁금하여 질문드립니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
8080 포트 변경은 어떻게 하나요?
# npm start 하게되면 기본적으로 8080포트로 구동이 되는데 이 포트를 변경하는 방법이 궁금합니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
공부 방법에 대해 문의드려요.
프로그래밍을 공부한지 얼마 안된 학생입니다. 자바스크립트로 무언가를 구현하는 강의를 듣는게 거의 처음인데요, 강의를 적어도 2회는 볼 생각인데, 처음 볼때 강의하시는내용을 함꼐 따라 코딩하면서 공부해야할지 아니면 처음에는 강의에 집중하고 2회차 볼때 따라서 만들며 해야할지 잘 모르겠습니다. 더듬더듬 따라서 강의를 보는 중인데, 똑같이 타이핑하는거에 너무 집착하는거같기도해서요.. 어느게 좋을지 추천 부탁드립니다.
- 미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
기초 질문드립니다.
동그라동그라미 친곳에 파라미터로 event를 받아왔는데, event라고 넣지 않아도 동일하게 작동을 하더라구요. 꼭 event를 파라미터로 넣어줘야하나요?