- 강의 영상에 대한 질문이 있으시면, 상세히 문의를 작성해주시면, 주말/휴일 제외, 2~3일 내에 답변드립니다 (이외의 문의는 평생 강의이므로 양해를 부탁드립니다.) - 강의 답변이 도움이 안되셨다면, dream@fun-coding.org 로 메일 주시면 재검토하겠습니다. - 괜찮으시면 질문전에 챗GPT 와 구글 검색을 꼭 활용해보세요~ - 잠깐! 인프런 서비스 운영(다운로드 방법포함) 관련 문의는 1:1 문의하기를 이용해주세요. <meta http-equiv="X-UA-Compatible" content="ie-edge"> 인터넷 익스플로러가 사라진 지금도 쓰이나요?
eslint를 설치하면 이전과 달리 esling.config.mjs로 파일이 설정되며 extend나 rules의 활용이 기존과 다른 방식으로 진행되며 충돌이 일어납니다. stackoverflow나 chatGPT의 도움을 받아 동작은 되지만, 이 부분 다시 설명해주셔야 하는게 아닌지요. (기존에 설명된 부분들도 코드나 적용방식이 달라져서, 플러그인을 활용하도록 합니다) 이 부분을 스스로 혼자 찾아서 수정할 수 있는 역량이 있다면 이 강의를 듣지 않겠지요. 하루 종일 한단원도 나가지 못하고 .. 해결하려다 포기하게 되네요. 2년전에 산 강의를 시간이 없어 이제 듣는 제 문제도 있겠지만.. 이 부분 상세한 설명을 넣어주셔야 할것 같아요.
오늘 카운터앱 강의를 들으면서 새로운 파일 (section06)을 만들었는데요. 가장 기본 세팅을 하고 화면에 카운터앱 이라는 단어를 렌더링 하려고 npm run dev를 한 후 ctrl shift p 를 눌러 페이지에 들어갔는데 글자가 렌더링 되지 않길래 개발자 도구를 켜 보았더니 Failed to load module script : Expected a JavaScript module script but the server responed with a MIME type of "text/jsx". Strict MIME type checking is enforced for module scripts per HTMl spec. 라는 오류가 뜨네요. 오류 해결을 위해 업데이트도 해보고, 파일을 지웠다 새로 만들어도 보고, 지피티에 물어보거나 인터넷에 검색도 해봤는데 도저히 오류가 고쳐지지 않습니다. 혹시나 해서 이번에 새로 만든 파일 말고 section05 파일을 실행시켜 보았더니 어제는 잘 되던 파일이 오늘은 똑같은 오류가 뜨며 실행이 되지 않더라구요. 무슨 오류일까요 ㅠㅠ 제발 도와주세요 엉엉엉엉엉엉엉엉
let currentItem; function activate(elem){ // 활성화 : 문열기 elem.classList.add('door-open'); currentItem = elem; } function inactivate(elem){ // 비활성화 : 문닫기 elem.classList.remove('door-open'); } 이 부분에서요, let, const 변수는 범위가 {} 기준이라고 알고있습니다. 그런데, activate()에서 currentItem에 elem값을 넣어주면서 {} 범위가 끝났는데, inactivate()에서 currentItem의 값을 확인하고 실행한다는게 이해가 잘 안됩니다.
실제 https로 배포된 API를 fetch를 활용하여 SSR을 구현하고있습니다. 문제는 local에서는 yarn build -> yarn start 하고 테스트를 진행하면 fetch가 정상적으로 작동합니다. 하지만 AWS Amplify를 활용하여 Next JS를 배포하고 배포한 사이트에서 fetch(pending 이후에 catch로 빠짐)가 작동하지않습니다. API에 문제가 있나해서 다른 API를 CSR로 테스트를 해보면 정상적으로 200이 됩니다. 원인이 뭘까요?
폴라우트 페이지 2를 보면서 / 인덱스페이지가 강사님은 static 페이지가 아닌 다이나믹 페이지로 빌드가 되는 부분에서 강사님은 fetch에 force-cache를 적용시키면서 이제 다이나믹된 페이지를 static 페이지로 바꾸셨느데 일단 저는 force-cache 옵션을 적용을 안해도 static 페이지이더라구요 강사님과 저랑 다른 점은 api호출하는 함수 부분을 따로 api 폴더에 빼둔거 말고는 다른 점은 없습니다 . 이렇게 따로 빼놓은 뒤 그냥 promis.all로 데이터 패칭을 해서 그대로 화면에 보여줬습니다 (이것저것 시험하느라 Allbook ,RandomBook 컴포넌트를 따로 빼지는 않은 상태입니다. ) export default async function Home() { const [allBooks, randomBooks] = await Promise.all([ fetchBooks(), fetchRandomBook(), ]); 저는 force-cache 를 적용안햇는데도 왜 다이나믹 페이지가 안되고 static 페이지가 되는걸까요 ...
섹션 4. DOM API-1 강의 6:30초 쯤 변수명을 다음과 같이 작성해주셨는데, 이는 미리 소개하신 2가지 방법의 예시를 모두 보여주기 위함인가요? let $animalInfo = document.querySelector('div.animal-info'); let ageElement = document.querySelector('div#age'); 실제 프로젝트에서는 2가지 방법 중 하나를 사용해 통일성을 주는게 좋을 것 같은데 혹시 다른 이유가 있으신지 궁금합니다!
안녕하세요 강사님 목소리가 귀에 쏙쏙박혀 잘듣고있습니다. 강의 내용이 2024년 초 기준이라 1년이 지난 현재시점 node LTS 버전이 20.xx.x 버전에서 지금은 22.xx.x 버전으로 올랐습니다. 버전에 따른 이슈가 있을수도있을것같은데 강의 버전에 맞춰서 진행해야하나요? 아니면 최신버전으로 진행해도 문제없을까요?
안녕하세요. npm create vite@lastest 명령어 입력시 아래와 같이 오류가 발생하고 있습니다. 어떻게 해결해야 하는지 알수있을까요? => 노드 버전 (v22. 12. 0) => 사용자 계정명 영어 오류 발생했을 때 확인 부분 1. npm 버전이 낮아 현재 11버전으로 업데이트 진행 2. npm chche clean --force 진행 후 명령어 재실행 발생한 에러 메세지 C:\Users\dwkim\Desktop\study\React\oneBite-React>npm create vite@lastest npm error code ETARGET npm error notarget No matching version found for create-vite@lastest. npm error notarget In most cases you or one of your dependencies are requesting npm error notarget a package version that doesn't exist. npm error A complete log of this run can be found in: C:\Users\dwkim\AppData\Local\npm-cache\_logs\2025-01-11T02_29_00_002Z-debug-0.log
안녕하세요 강사님 조건문, 반복문에서 또는 커스텀 훅을 사용하기 전에 Hook을 사용하였을 때는 함수 컴포넌트 외부에서 호출했을 때 오류가 발생하는 것 처럼 별다른 오류가 발생하지 않는데 말씀하신 내용으로는 권장사항인걸까요? 조건문, 반복만에서 Hook 호출 시 import { useState } from "react"; const HookExam = () => { //const state = useState(); if (true) { const state = useState(); console.log(state); } for (let i=0; i<1; i++) { const state = useState(); console.log(state); } return <div>HookExam</div> }; export default HookExam; 커스텀 훅 만들기 전에 Hook 호출 시 import { useState } from "react"; function getInput() { const [input, setInput] = useState(""); const onChange = (e) => { setInput(e.target.value); console.log(e.target.value); }; return [input, onChange]; } const HookExam = () => { const [input, onChange] = getInput(); return ( <div> <input value={input} onChange={onChange}/> </div> ); }; export default HookExam; 함수 컴포넌트 외부에서 Hook 호출 시
https://github.com/expressjs/cors?tab=readme-ov-file#enable-cors-for-a-single-route 참고하여 작성 해 보았습니다. * 제일 하단부에는 전체 코드 첨부 하였습니다. * 문제는 2가지 입니다. 1. 단일 경로에 CORS 활성화를 구현하고 싶었으며 corsOptions 에 methods 를 'POST, OPTIONS'만 추가하였음에도 get은 호출시 허용이 되었습니다. app.get('/users/', cors(corsOptions), function (req, res) { 제가 구현하고 싶었던 코드의 의도는 특정 IP만 사용 허용 이기 때문에 위와 같이 구현하고 싶었습니다. 하지만 아래와 같이 호출하여도 허용이 되었습니다. app.get('/users/', (req, res) => { 나머지 문제는 위와 반대로 POST의 경우에는 app.post('/token/phone', cors(corsOptions), (req, res) => { 위처럼 작성 옵션도 적용되었음에도 불구하고 CORS 가 계속 발생합니다. 아래는 작성한 node 코드입니다. import express from 'express' import { createTokenOfPhone } from '../../../section01/01-03-token-api-facade/index.js' import { swaggerUi, specs } from "./swagger/swagger.config.js"; import cors from 'cors' const app = express() app.use(express.json()) // Swagger API app.use("/api-docs", swaggerUi.serve, swaggerUi.setup(specs, { explorer: true })); // 허용할 IP WhiteList const whitelist = [ 'http://127.0.0.1:5500' ]; const corsOptions = { origin: (origin, callback) => { if (whitelist.indexOf(origin) !== -1 || !origin) { // !origin은 로컬 요청을 허용 callback(null, true); } else { callback(new Error('Not allowed by CORS')); } }, origin: whitelist, methods: 'POST, OPTIONS', }; //CORS 설정 // app.use(cors()) // app.use(cors(corsOptions)) // 특정 IP 허용 app.get('/users/', cors(corsOptions), function (req, res) { // app.get('/users/', (req, res) => { res.json({msg: 'getdms 왜 됨?'}) }) // OPTIONS 요청에 대한 응답 처리 app.options('/users/', cors(corsOptions), (req, res) => { res.setHeader('Access-Control-Allow-Origin', req.headers.origin || '*'); res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS'); res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.setHeader('Access-Control-Allow-Credentials', 'true'); res.sendStatus(204); // No Content }); // app.post('/token/phone', (req, res) => { app.post('/token/phone', cors(corsOptions), (req, res) => { const {phoneNo} = req.body; console.log(`phoneNo ${phoneNo}`) const requestToken = createTokenOfPhone(phoneNo); const resultData = { data: requestToken }; res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization'); res.send(resultData); }); app.listen(3000); // 포트번호 아래는 get , options, post 를 호출하는데 사용한 코드입니다. 주석 되어있는 get 호출시에는 호출안되게 옵션 설정해도 호출되고 주석 안한 post 호출시에는 정상 호출되어야 할 것 같은데 안됩니다.... <script> let resultToken = ''; const certification = () => { let myPhoneNo = document.getElementById("phoneNo").value; // let api = axios.options("http://localhost:3000/users"); // let api = axios.get("http://localhost:3000/users"); let api = axios.post("http://localhost:3000/token/phone", {phoneNo: myPhoneNo}); }; </script> <body> <div>휴대폰번호: <input type="text" id="phoneNo"> <button onclick="certification()">인증하기</button> <br/> <div>인증상태</div> <button>회원가입하기</button> </div> </body>
