묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
async/await 질문 있습니다.
해당 강의에서 예로 들어주신 부분 코드를 가져와 보면async function getData() { let rawResponse = await fetch("https://jsonplaceholder.typicode.com/posts"); let jsonResponse = await rawResponse.json(); console.log(jsonResponse); } getData();위 코드를 예로 들어 주셨는데요 여기서 질문이 있는데async 내부에서 await은 비동기를 동기적으로 실행하게 하는 거라고 해주셨는데요그러면 위 코드에서 async await 자체를 쓸 필요가 없는거 아닌가 하는 궁금증이 들었는데요혹시 말씀해주신 '비동기를 동기적으로 실행하게 한다' 라는게 해당 함수 내부에서만을 말씀해주신 걸까요??제가 이해한게 맞나 확인 부탁드립니다.코드를 실행 하면 차례대로 한줄씩 실행된다.getDate함수를 호출하는 코드가 실행되면 코드의 실행 순서는 getDate함수로 이동한다.getDate함수 내부의 await을 만나면 거기서 getDate함수의 실행은 멈춘다.getDate함수의 await 작업이 끝날 때까지 getDate함수는 실행을 멈추고 실행은 다시 전체 코드에서 getDate함수를 호출한 부분 이후의 코드가 실행된다.await 작업이 끝나면 실행은 다시 getDate함수 내부의 await 이후 코드가 실행되고 getDate 함수의 실행이 끝나면 다시 실행은 이전까지 실행했던 부분이후로 넘어간다라고 이해 했는데요... 이게 맞을까요??아! 그리고 비동기 함수가 넘어가는 부분도 자바스크립트 처럼 싱글쓰레드라 비동기 함수들을 하나씩 처리하나요?? 아니면 비동기 작업을 처리하는 부분은 멀티쓰레드 형식이라 동시에 비동기작업을 처리하는것이 가능한가요??
-
해결됨떠먹는 Three.js
WebGL 1 지원 중단에 대해
영상 : [손쉬운 조작 OrbitControls] 에서 three의 경로 설정 중 THREE.WebGLRenderer: WebGL 1 support was deprecated in r153 and will be removed in r163WebGL 1 지원은 r153에서 사용 중단되었으며 r163에서 제거될 예정입니다.라는 메세지가 나왔습니다. 질문 : 이게 나중에는 오류가 날 수 있다는 뜻인가요? 맞다면 어떻게 대비를 해야 하는지 궁금합니다.
-
미해결비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
퀴즈 답안
퀴즈 답안지는 따로 제공되지 않나요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
max와 findindex 사용해서 풀어도 되나요?
function solution(arr) { let answer = Array.from({ length: arr.length }, () => 0); let rank = 1, max = Number.MAX_SAFE_INTEGER; for (let i = 1; i <= arr.length; i++) { let idx = arr.findIndex((val) => val === Math.max(...arr)); if (arr[idx] === max) { // 동점자이면 answer[idx] = rank; } else { answer[idx] = i; rank = i; } max = arr[idx]; arr[idx] = -1; } return answer; } let arr = [87, 89, 92, 100, 76]; let arr2 = [20, 20, 20, 10, 50, 15]; console.log(solution(arr)); 저 혼자 풀었을 때 이중 for문이 아닌 위와 같이 풀었는데 혹시 이렇게 풀어도 되는걸까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
find() 에서 password를 숨길때 사용하는 어노테이션 옵션 차이
안녕하세요.아래 두가지 어노테이션 차이가 궁금합니다.@Column({select: false}) password@Exclude() password차이가 뭔가요?둘중 어느것을 써도 find() 에서 password 를 숨겨지는거같은데 용도 차이가 궁금합니다.
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
NestJS Mapped types에 관해 궁금한게 있습니다
NestJS 공식문서에 강의대로 여러가지 Mapped types들이 있더라고요.https://docs.nestjs.com/openapi/mapped-types#pick 강의에서는 PickType(UsersModel, [ 'nickname', 'email', 'password', ]) {이렇게 사용 되는데PickType(CreateCatDto, ['age'] as const)공식 문서에서는 as const 이게 붙더라고요 무슨 차이가 있는 걸까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
강의를 보고 나니 Restful한 api를 설계 하기 위해선
강의를 보고 나니 Restful한 api를 설계 하기 위해선Profile 에 해당하는 프로퍼티가name: string;age: number;address: string;있을때 1. patch[client 요청]{ name: 'codefactory', age: 98000, address: '판교'}프로퍼티를 전체 수정 또는 생성 한다. 해당 resource id값에 해당하는 데이터가 없으면 에러를 던지지 않고 새로 생성한다.모든 프로퍼티를 기입 해야하고 전체 수정이 발생하거나 새로 생성 된다.2. patch[client 요청]{ name: 'codefactory2',}수정 하고자 하는 프로퍼티만 기입해당 resource id값에 해당하는 데이터가 없으면 찾을 수 없다는 error를 던져준다. 제가 이해한것을 정리 해보았고, 궁금한점을 한가지 질문을 적어 보자면그렇다면 만약, 모든 프로퍼티를 보내지만, 데이터가 없을때 새로 생성하지 않고 에러를 던지는 api가 필요하면 이것은 put인가요 patch 일까요?
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
용어에 대해 궁금한게 있어서 질문 남겨보아요
java와 spring을 공부 할때 당시에 사용 했던게 Annotation이라는 용어를 사용 했던걸로 기억합니다.(@Controller, @Service 등) 근데 typescript와 Nestjs를 검색 해보니까 Annotation이라는 용어보다는 Decorator라는 용어로 많이 사용하는것 같던데 Annotation vs Decorator가 같은거라고 보면 될까요?
-
해결됨처음 만난 리액트(React)
[Card 컴포넌트 만들기 강의] 코드질문 있습니다!
강의 너무 잘 보고 배우고 있습니다!! 감사합니다 🙂 카드를 한장이 아니라 여러 장이 나오게 만들고 싶어서 혼자 코드를 수정해봤는데요 key 값이 없어서 오류가 난다고 하는데요 1-1.이 상태에서는 어떻게 key값을 넣어줘야 할까요?1-2. 다른 방법은 없을까요? import Card from "./Card"; const names = [ { id: 1, name: "학생 1", comment: "리액트 공부중입니다" }, { id:2, name: "학생 2", comment: "리액트 공부중임니댜" } ] function ProfileCard(props) { <div> {names.map((name) => { return ( <Card title={name.name} backgroundColor="#B57EDC" comment={name.comment} /> ) })}; </div> } export default ProfileCard;
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
JWT refreshToken 쿠키
Client 에서 Refresh Token 을 localStorage 보다는 cookie 에 저장을 하는게 보안에 더 좋다는 이야기를 들었는데요. 만약에 구현을 하려고 하면 강의에서처럼 로그인 했을때 accessToken 과 refreshToken 을 함께 보내는게 아니라 이런식으로 보내면 될까요?res.cookie( 'refreshToken', refreshToken, { httpOnly: true, secure: true, sameSite: 'strict' }); return {accessToken: '엑세스 토큰'};배포 과정과 강의를 담은 Part 2는 언제 나올까요?
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
sort 함수에 대해 궁금한 점이 있습니다.
sort 함수의 예시에서[1, 9, 7, 5, 3] 을 내부적으로 비교하게 될 텐데비교하는 순서가1, 91, 71, 51, 3 다 비교한 후에9, 79, 59, 3이런 식으로 순차적으로 비교하나요?
-
미해결Do It! 장고+부트스트랩: 파이썬 웹개발의 정석
장고 개발 준비.
안녕하세요 강사님, 섹션 4 장고 개발 준비에서 .idea파일을 ignore에 적으라고 하셨는데, 제 맥북에는 .idea파일이 없는데 그럼 그냥 무시하고 진행하면 되는 걸까요? (이전단계는 강사님이 하신대로 똑같이 따라 했습니다.)
-
해결됨떠먹는 Three.js
index.html 실행 시 CORS 문제
현재 [섹션0]까지 수강 완료하였습니다.index.html 파일 실행 시 이렇게 CORS 문제가 발생됩니다.어떻게 해결할 수 있을까요?ㅠㅠ
-
미해결[코드팩토리] [초급] NestJS REST API 백엔드 완전 정복 마스터 클래스 - NestJS Core
login에서 token 을 받는 이유가 있을까요?
안녕하세요.토큰시스템을 사용하도록 엔드포인트 변경하기 편을 보고 질문드립니다.보통 login api 라고 하면 token 없이 email, pw 만 받아 validation 하는 것을 목적으로 한다고 알고있는데기획에 따라 헤더의 authorization 필드를 사용한 token 로그인도 해야할 수 있다고 하셔서 궁금한점이 생겼습니다.어떤 경우에 그런 상황이 있는지 대략적인 케이스를 소개해주실수있을까요?강의 잘 보고있습니다. 감사합니다.
-
미해결[코드팩토리] [입문] 9시간만에 끝내는 코드팩토리의 Javascript 무료 풀코스
대소관계 비교할 때 문자열과 비교할 경우
console.log(10 > "abc"); console.log(10 < "abc"); 모두 false 가 나옵니다.숫자와 문자를 비교하면 항상 false 를 비교하나요?
-
미해결풀스택을 위한 탄탄한 프런트엔드 부트캠프 (HTML, CSS, 바닐라 자바스크립트 + ES6) [풀스택 Part2]
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10 / 5분20초
모던 HTML/CSS 로 상용화도 가능한 반응형 모던 웹페이지 만들기10 / 5분20초 div태그 사이에 span태그를 넣었는데 span태그가 인라인 태그인건 알겠는데div태그는 블럭 태그라 원래 줄바꿈이 일어나는거 아닌가용 ?어떻게 줄바꿈이 안되고 한줄에 표시되는지 궁금합니다.
-
해결됨Vue 3 시작하기
Hello World(Vue.js 인스턴스)에서 오류가 나옵니다.
<script src=”https://unpkg.com/vue@3/dist/vue.global.js”></script> <div id="app"> {{ message }} </div> <script> Vue.createApp({ data() { return { message: 'hi' } } }).mount('#app'); </script>강의에 나온대로 쳐서 live server로 실행하니 오류가 나옵니다. 화면은 {{ message }}로 나오는데 script를 인식 못하는걸까요??
-
해결됨한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
emotion_img를 못받아오고 있어요
이번에 페이지 구현-일기 쓰기 (/new) 를 듣고 따라 적어보는 중에 잘 해결되지 않는 부분이 있어서 질문을 올립니다! 다른 기능은 정상적으로 작동하고 다른 컴포넌트에서도 img파일을 정확히 불러오는데 DiaryEditor.js 에서만 emotinItem으로 emotion_img를 전달하는데 이미지가 뜨지 않고 오류가 발생합니다 이런식으로 onClick is not a function 이라고 나오고 DiaryEditor에도const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || "";를 추가해봤지만 해결되지 않았습니다 어떻게 해야될까요?import { useRef, useState, useContext } from "react"; import { useNavigate } from "react-router-dom"; import MyHeader from "./MyHeader"; import MyButton from "./MyButton"; import EmotionItem from "./EmotionItem"; import { DiaryDispatchContext } from ".././App"; const env = process.env; env.PUBLIC_URL = env.PUBLIC_URL || ""; const emotionList = [ { emotion_id: 1, emotion_img: process.env.PUBLIC_URL + `/assets/emotion1.png`, emotion_descript: "완전 좋음", }, { emotion_id: 2, emotion_img: process.env.PUBLIC_URL + `/assets/emotion2.png`, emotion_descript: "좀 좋음", }, { emotion_id: 3, emotion_img: process.env.PUBLIC_URL + `/assets/emotion3.png`, emotion_descript: "그럭저럭", }, { emotion_id: 4, emotion_img: process.env.PUBLIC_URL + `/assets/emotion4.png`, emotion_descript: "별로임", }, { emotion_id: 5, emotion_img: process.env.PUBLIC_URL + `/assets/emotion5.png`, emotion_descript: "최악임", }, ]; const getStringDate = (date) => { return date.toISOString().slice(0, 10); }; const DiaryEditor = () => { const contentRef = useRef(); const [content, setContent] = useState(""); const [emotion, setEmotion] = useState(3); const [date, setDate] = useState(getStringDate(new Date())); const { onCreate } = useContext(DiaryDispatchContext); const handleClickEmote = (emotion) => { setEmotion(emotion); }; const navigate = useNavigate(); const handleSubmit = () => { if (content.length < 1) { contentRef.current.focus(); return; } onCreate(date, content, emotion); navigate("/", { replace: true }); // 뒤로가기 막기 }; return ( <div className="DiaryEditor"> <MyHeader headText={"새 일기쓰기"} leftChild={<MyButton text={"< 뒤로가기"} onClick={() => navigate(-1)} />} /> <div> <section> <h4>오늘은 언제인가요?</h4> <div className="input_box"> <input className="input_date" value={date} onChange={(e) => setDate(e.target.value)} type="date" /> </div> </section> <section> <h4>오늘의 감정</h4> <div className="input_box emotion_list_wrapper"> {emotionList.map((it) => ( <div key={it.emotion_id}> <EmotionItem key={it.emotion_id} {...it} onClick={handleClickEmote} isSelected={it.emotion_id === emotion} /> </div> ))} </div> </section> <section> <h4>오늘의 일기</h4> <div className="input_bot text_wrapper"> <textarea placeholder="오늘은 어떤가요?" ref={contentRef} value={content} onChange={(e) => setContent(e.target.value)} /> </div> </section> <section> <div className="control_box"> <MyButton text={"취소하기"} onClick={() => navigate(-1)} /> <MyButton text={"작성완료"} type={"positive"} onClick={handleSubmit} /> </div> </section> </div> </div> ); }; export default DiaryEditor;
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
git hub 업로드가 안되서 여쭤봐요
저같은경우 윈도우를 사용하고 있는데 두가지경우가 나오질 않아서 깃허브에 확인해보니 이렇게 프리캠프는 생성이 되었는데 들어가보니 강의에서 본것처럼 파일이 업로드 되있질 않았어요..어떻게 해야할까요?
-
미해결자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
혹시 예외가 있을까요?
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. function solution(board, moves) { let answer = 0; //count let stack = []; //바구니 //크레인 for문 돌리기 for (const x of moves) { //크레인 위치, index에 맞게 설정 let idx = x - 1; //borad 체크 for (let i = 0; i < board.length; i++) { //인형 const v = board[i][idx]; //0 & null이면 그냥 넘기기 > 다음값을 넣어야 함 //null = 이미 바구니에 들어간 값 if (v !== 0 && v !== null) { //이미 바구니에 있는 경우 if (v === stack.at(-1)) { let pop = stack.pop(); answer += 2; } else stack.push(v); board[i].splice(idx, 1, null); break } } } return answer; } let a = [[0, 0, 0, 0, 0], [0, 0, 1, 0, 3], [0, 2, 5, 0, 1], [4, 2, 4, 4, 2], [3, 5, 1, 3, 1]]; let b = [1, 5, 3, 5, 1, 2, 1, 4]; console.log(solution(a, b));