묻고 답해요
158만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결타입스크립트 입문 - 기초부터 실전까지
live server 설치 오류
플러그인과 웹에서 Live Server를 검색해도 나오지않고 five server만 뜹니다. 깃에 올려져있는 링크로 들어가면 오류가 뜨는데 어떻게 해야하나요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
특정 API, 특정 IP 허용 (단일경로에 CORS 활성화)
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>
-
미해결비전공자를 위한 풀스택 맛집지도 만들기 프로젝트!: Front, Back-end 그리고 배포까지
카카오맵API 지도 관련
.category-item에서 width를 24%로 해야 4등분이 되고 25%로 하면 3등분이 됩니다. 이건 제가 질문하려는 내용과 뭔가 관련이 있는 것 같아서 말씀드리는거고 css #map에서 height를 픽셀로 안하면 지도가 나오지도 않고 픽셀로 해도 지도가 일부분만 나옵니다. 지도자체를 인용하는거는 문제가 없어보이는데 왜 안나올까요?@font-face { font-family: 'ChosunCentennial'; src: url('https://gcore.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/ChosunCentennial.woff2') format('woff2'); font-weight: normal; font-style: normal; } *{ padding: 0; margin: 0; box-sizing: border-box; } html{ font-size: 10px; font-family: 'ChosunCentennial'; } nav{ background-color: white; } .nav-container{ padding: 1rem 0; display: flex; flex-direction: row; justify-content:space-between; align-items: center; } .nav-title{ font-size: 3rem; } .nav-contact{ font-size: 2.5rem; border: 0; background: none; cursor: pointer; font-family: inherit; } .category-title{ font-size: 3.5rem; } .category-item{ width: 24%; height: 5rem; background: none; border: none; font-family: inherit; font-size: 1.6rem; } .category-item:hover { color: orange; cursor: pointer; } .inner{ padding: 0 1.5rem; } @media all and (min-width: 1024px){ .inner{ max-width: 1024px; margin: 0 auto; } } /*카카오맵 css*/ body{ height: 100vh; } nav{ height: 59px; } main{ padding-top: 1.5rem; height: calc(100%-59px); display: flex; flex-direction: column; } #map{ flex-wrap: 1; width: 100%; height: 100px; }
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
name을 넣지 않을 경우 input에 입력되지 않는 이유
안녕하세요 강사님수업 도중에 input 태그에 name을 넣지 않을 경우 아무런 입력이 되지 않는걸 확인했습니다.그래서 onChange 함수에서 에러가 발생해서 이벤트가 도중에 끊겼을 것이라고 예상하고 try catch로 감았는데도 exception이 발생하지 않더라구요.혹시 왜 입력이 되지 않는 것인지 알 수 있을까요?감사합니다~~! import { useState } from "react"; const Register = () => { const [input, setInput] = useState({ name: "", birth: "", country: "", bio: "" }) const onChange = (e) => { try { setInput({ ...input, [e.target.name]: e.target.value }) } catch (err) { console.log(err); } // setInput({ // ...input, // [e.target.name]: e.target.value // }) } //const onChangeName = (e) => { // setInput({ // ...input, // name: e.target.value // }) //}; //const onChangeBirth = (e) => { // setInput({ // ...input, // birth: e.target.value // }) //}; //const onChangeCountry = (e) => { // setInput({ // ...input, // country: e.target.value // }) //}; //const onChangeBio = (e) => { // setInput({ // ...input, // bio: e.target.value // }) //}; return ( <div> <div> <input // name="name" value={input.name} //onChange={onChangeName} onChange={onChange} placeholder={"이름"} /> {input.name} </div> <div> <input name="birth" value={input.birth} //onChange={onChangeBirth} onChange={onChange} type="date" /> {input.birth} </div> <div> {/* <select value={input.country} onChange={onChangeCountry}> */} <select value={input.country} name="country" onChange={onChange}> <option value=""></option> <option value="kr">한국</option> <option value="us">미국</option> <option value="uk">영국</option> </select> {input.country} </div> <div> {/* <textarea value={input.bio} onChange={onChangeBio} /> */} <textarea value={input.bio} name="bio" onChange={onChange} /> {input.bio} </div> </div> ); }; export default Register;
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
만약 구현해야 할 페이지가 많아지면 Router를 효율적으로 사용하는 방법이 있나요?
안녕하세요. 좋은 강의 공유해주셔서 감사합니다. 덕분에 실무에 잘 활용하고 있습니다. 12.4) 페이지 라우팅 강의를 듣던 중 궁금한 점이 생겨 질문 드립니다. 예시 프로젝트엔 페이지가 3개로 비교적 적은 페이지수라서 App 컴포넌트 밑에 Router 로 경로를 지정해줄 수 있지만 몇 십개씩 혹은 몇 백개씩 넘어가는 페이지를 만들어야 할 때는 Router를 어떻게 활용해야 하나요? Router가 아닌 다른 방법이 있나요?
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
.
.
-
미해결인터랙티브 웹 개발 제대로 시작하기
perspective 문의
perspective : 800px을 .stage에 넣으면, 다르게 회전이 되어야 하는데저는 .door에 넣은 것처럼 똑같이 일정하게 회전 됩니다.이유를 모르겠어요~
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
web APIs 랑 web API랑 혹시 다른 말일까요?
뒤에 s만 소문자로 붙은게 신기해서 구글링을 조금 해봤는데 전부 web API로만 나와서요. 혹시 미세한 차이 같은게 있는지 궁금해서 질문해 봅니다.
-
미해결애플 웹사이트 인터랙션 클론!
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?
선생님 캔버스 width 크기는 이미지 크기에맞게 해줘야하나요?선생님은 <div class="sticky-elem sticky-elem-canvas"> <canvas id="video-canvas-0" width="1920" height="1080"></canvas> </div> 이렇게 주셨는데만약 제가 따로 실습할때의 이미지 최대크기가 1280x720 이라면캔버스 width 크기를 1280으로 해줘야하는게 맞나요? 예제 코드 그대로 쓰고 캔버스 width값 1920하니까 이미지가 왼쪽으로 좀 치우쳐져 있어서어제오늘 계속 애쓰다가 캔버스 width값을 이미지 최대크기값만큼 1280으로 주니까 해결이됬어요.. 그러면 이제 궁금한게 모바일일때 화면에 꽉 채우게하고싶은데 어떻게 줘야할지 감이안잡힙니다 ㅠ-ㅠ
-
미해결만들면서 배우는 리액트 : 기초
강의노트
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.안 보이는데 어디서 찾을 . 수있나요?
-
미해결TS/JS 디자인 패턴 with Canvas: 제로초에게 제대로 배우기
[섹션1/사전에 알아두면 좋은 TS/JS 지식]영상 재생 관련 질문 드립니다.
현재 [섹션 1/사전에 알아두면 좋은 TS/JS 지식] 영상이 검은 화면에 음성만 재생되는데 확인 부탁드립니다.감사합니다!
-
미해결처음 만난 리액트(React)
npx create-react-app my-app
npx create-react-app 까지는 잘 되는데 그 밑으로는 이런 오류가 뜨면서 되지가 않습니다..
-
미해결처음 만난 리액트(React)
jsx 코드 작성해보기에서 index.js 수정 후 에러 뜹니다.
ERROR in ./src/chapter_03/Library.jsx 5:0-24Module not found: Error: Can't resolve 'Book' in '/../my-react1/src/chapter_03'Did you mean './Book'?Requests that should resolve in the current directory need to start with './'.Requests that start with a name are treated as module requests and resolve within module directories (node_modules, /../my-react1/node_modules).If changing the source code is not an option there is also a resolve options called 'preferRelative' which tries to resolve these kind of requests in the current directory too.어떻게 해야 할까요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
index.mjs를 index.js로 바꾸려면 어케해야하나요
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
강의화면은 index.js인데 왜 샌드박스코드에서는 index.mjs인지 궁금해요
index.mjs 를 index.js로 바꾸려면 어케해야하나요
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
하이라이트 변경이 없는데요?
메모를 적용 하기 전의 화면(대략 1분55초 정도) 에서의 하이라이트와 적용한 후(대략 4분45초 정도)의 하이라이트에 무슨 차이가 있나요? 저만 그런가요? 테스트 작성한 로컬에서도 하이라이트 변화는 없는데요?
-
미해결비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
LinkedList로 스택, 큐 구현하기 숙제
스택 부분class Stack { head=null; tail=null; length=0; push(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } pop() { let value = this.tail?.value; if (!this.tail) { // 값 존재 x return null; } if (this.tail === this.head) { // 값이 하나 this.head = null; this.tail = null; } else { // 값이 여러개 this.tail = this.tail.prev; this.tail.next = null; } this.length--; return value; } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const stack = new Stack(); stack.push(1); stack.push(3); stack.push(5); stack.push(2); console.log(stack.push(4)); // length 리턴 5 console.log(stack.pop()); // 4 console.log(stack.pop()); // 2 console.log(stack.pop()); 큐 부분class Queue { head = null; tail = null; length = 0; enqueue(value) { if (this.head) { this.tail.next = new Node(value); this.tail.next.prev = this.tail; this.tail = this.tail.next; } else { this.head = new Node(value); this.tail = this.head; } this.length++; return this.length; } dequeue() { let value; if (!this.head) { return null; } if (this.head === this.tail) { // 한 개 value = this.head.value; this.head = null; this.tail = null; } else { // 여러 개 삭제 value = this.head.value; this.head = this.head.next; this.head.next.prev = null; } this.length--; return value; } } class Node { prev = null; next = null; constructor(value) { this.value = value; } } const queue = new Queue(); queue.enqueue(1); // 1 queue.enqueue(3); // 3 queue.enqueue(5); // 5 queue.enqueue(2); // 2 queue.enqueue(4); // 4 console.log(queue.enqueue(7)); // 7 console.log(queue.dequeue()); // 1 console.log(queue.dequeue()); // 3 console.log(queue.dequeue()); // 5 console.log(queue.dequeue()); // 2 console.log(queue.dequeue()); // console.log(queue.dequeue()); // console.log(queue.dequeue()); // 큐 부분에서 콘솔 로그로 찍어 봤을 때 deque가 1,3,5,2 까지 진행 되고 그 이후에this.head.next.prev = null; ^TypeError: Cannot set properties of null (setting 'prev')이런 에러가 발생하는데 이유가 궁금합니다.
-
미해결생활코딩 - 자바스크립트(JavaScript) 기본
강의 교안은 따로 없을까요?
찾아봐도 안 보여서요
-
미해결처음 만난 리액트(React)
Chapter_05 터미널, 리액트 에러
안녕하세요, 챕터 05 강의를 듣고 실습 중에 있었는데요.local 3000에서는 이런 에러 메시지가 뜨고,터미널에서는 이런 메시지가 뜹니다.CommentList.jsxindex.js 헷갈리는 부분이 많은데 설명 부탁드립니다!
-
해결됨입문자를 위한, ES6+ 최신 자바스크립트 입문
공부를 하면서 질문이 있습니다.
현재 짐코딩님의 자바스크립트와 리액트를 구입해 열심히 듣고 있습니다. 궁금한점이 강의를 듣고 나중에 혼자서도 코드를 작성할줄 알아야 실력이 느는데 자바스크립트 강의를 다 보고 자바스크립트로 혼자 만들어 보는게 좋을까요? 나중에 혼자서도 생각하는 것을 코드로 작성을 할만큼 실력을 키우려면 어떻게 공부를 해야좋을지 조언부탁드리겠습니다.
