묻고 답해요
161만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결처음 만난 리액트(React)
(실습) create-react-app 자꾸 오류가 나요,,
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.create-react-app 을 하면 자꾸 이런 오류가 떠서 실습을 못하고 있는데 뭐가 문제일까요..?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
훈훈한 자바스크립트 반복문파트 스크립트 태그의 위치 질문
저는 버튼을 누르면 텍스트 출력은 오류, 콘솔 출력은 null이 뜹니다 원인이 뭐죠? index.html<!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>D-Day-count</title> <link rel="stylesheet" href="./style.css" /> <script src="./script.js"></script> </head> <body> <h1>D-Day</h1> <div id="d-day-container"> <div class="d-day-child-container"> <span id="days">0</span> <span>일</span> </div> <div class="d-day-child-container"> <span id="hours">0</span> <span>시간</span> </div> <div class="d-day-child-container"> <span id="min">0</span> <span>분</span> </div> <div class="d-day-child-container"> <span id="sec">0</span> <span>초</span> </div> </div> <div id="d-day-meassage"></div> <div id="target-selector id"> <input id="target-year-input" class="target-input" size="5" /> - <input id="target-month-input" class="target-input" size="5" /> - <input id="target-date-input" class="target-input" size="5" /> </div> <button onclick="counterMaker()" id="start-btn">카운트다운 시작</button> </body> </html> script.js // const obj = { // name: "Jason", // age: 25, // }; // if (obj.name === "Jason" || obj.age === 25) { // console.log("안녕, " + obj.name + ", 너의 나이는 " + obj.age); // } else { // console.log("넌 우리 멤버가 아니다."); // } const dateFormMaker = function () { const inputYear = document.querySelector("#target-year-input").value; const inputMonth = document.querySelector("#target-month-input").value; const inputDate = document.querySelector("#target-date-input").value; // const dateFormat = inputYear + '-' + inputMonth + '-' + inputDate; const dateFormat = `${inputYear}-${inputMonth}-${inputDate}`; //템플릿 리터럴 return dateFormat; }; const counterMaker = function () { const messageContainer = document.querySelector("#d-day-message"); console.log(messageContainer); messageContainer.textContent = "D-Day를 입력해주세요."; const targetDateInput = dateFormMaker(); const nowDate = new Date(); const targetDate = new Date(targetDateInput).setHours(0, 0, 0, 0); const remaining = (targetDate - nowDate) / 1000; // 만약, remaining === 0 라면, 타이머가 종료되었습니다. 출력 if (remaining <= 0) { console.log("타이머가 종료되었습니다."); } else if (isNaN(remaining)) { //만약, 잘못된 날짜가 들어왔다면, 유효한 시간대가 아닙니다. 출력 console.log("유효한 시간대가 아닙니다."); } const remainingDate = Math.floor(remaining / 3600 / 24); //몇일 남았는지 구하기 const remainingHours = Math.floor(remaining / 3600) % 24; //몇 시간 남았는지 구하기 const remainingMin = Math.floor(remaining / 60) % 60; //몇 분 남았는지 구하기 const remainingSec = Math.floor(remaining) % 60; //몇 초 남았는지 구하기 console.log(remainingDate, remainingHours, remainingMin, remainingSec); };
-
미해결따라하며 배우는 리액트 네이티브 기초
[해결] 아이폰 marginBottom 먹지 않는 이슈
<KeyboardAvoidingView behavior={Platform.OS === "ios" ? "padding" : "height"} keyboardVerticalOffset={Platform.OS === 'ios' && 30} style={styles.addFormContainer} >IOS 일 경우 keyboardVeritcalOffset 에 marginBottom 만큼 추가해 줬더니 작동합니다.
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
Detail.js CSS 관련 강의가 없어진거 같은데요 ?
Update : 게시글 수정하기 강의 들을 차례인데 DetailCSS 부분은 강의 내용이 없는데 값자기 다 적용된체로 수업이 진행 되네요 흐름상 강의가 빠진거 같은데요 ?
-
미해결MERN STACK 커뮤니티 : 시작부터 배포까지 알려주는 React
504 에러
안녕하세요 Reple Upload 파트 에서 에러가 504 에러가 발생 해서 질문드립니다Server -> Router -> reple.js 측에서 20번줄에서 에러가 나고 있는데, terminal에서 더이상 .save callback 을 할수 없다고 뜹니다프론트 쪽에서는 이러한 에러가 뜨고 있는데요 지금 서버랑, 프론트쪽 연결이 되지 않은거 같은데요 어떻게 해결할수 있을까요? 감사합니다mongoose 다운그레이드 해서 해결했습니다
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제
안녕하세요! 회원가입 과제를 풀다가 막혀서 더 이상 진도를 못 나가고 있는 상황입니다. 섹션 7에 파이널 과제를 참고 하라고 하셨는데 회원가입 과제는 섹션7과 다르게 입력칸이 밑줄이라서 어떤 식으로 코드를 쳐야할지 감도 안 오는 상황입니다. 참고식이 아닌 회원가입 과제 부분 코드를 보고 싶은데 혹시 제가 정답 코드를 못 찾는거라면 링크를 첨부해주실 수 있으실까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
강의 초기 셋팅 문제
react를 처음 접해보는 취준생입니다.제가 강의를 보면서 따라하려는데 settings/js 디렉토리의 디렉토리명을 front로 변경해서 사용하고 back 디렉토리에서 npm start로 백앤드 서버 실행시키고 따라하라고 하신거 같아서 그렇게 따라하고 있습니다. 현재 localhost:3095로 접근하면 슬리액 페이지가 잘 나오는데 front 디렉토리에서 코드 수정해도 반영이 안고 있는데 혹시 어떤걸 잘 못 하고 있는지 알 수 있을까요?
-
미해결실무 중심! FE 입문자를 위한 React
4-3 클래스코드를 찾을 수가없습니다
4-3 아코디언 컴포넌트 만들기 실습 코드를 찾을 수 가없습니다 . 4-2코드 링크가 4-3 페이지에 들어있던데 수정부탁 드릴게여!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
싸이월드 만들기1탄 이미지 삽입이 이상합니다.
저는 왜이렇게 나오는걸까요...코드 여러번 재작성 해도 저렇게 나옵니다..ㅠ background-color 넣었을땐 정상적으로 나옵니다..왜 저러는건가요..?그리구 .outerbox 코드에 "outerbox": Unknown word. 가 발생합니다.
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
메인 화면 이미지가 안뜨는 문제 관련
안녕하세요 그랩님! 바로 이전 질문에서 저와 동일한 현상으로 질문 주신것에 답변(하기 스크린샷)대로 변경을 해보았습니다.그랬더니 이번엔 그랩마켓 내의 '상품업로드'를 통해 등록한 키보드2 이미지만 뜨고 이전에 등록한 제품들은 깨져서 보이지 않아 이럴경우엔 어떻게 해결해야 할지 문의드립니다!
-
해결됨코로나맵 개발자가 알려주는 React + Express로 지도서비스 만들기 (Typescript)
styled component 버튼 타입에러
import { ReactNode } from "react"; import { Link } from "react-router-dom"; import styled from "styled-components"; interface ButtonProps { children?: ReactNode; onClick: (e: any) => void; type?: "link" | "button"; url?: string; } const StyledButton = styled.button<ButtonProps>` outline: none; border: none; display: flex; align-items: center; justify-content: center; `; function Button({ children, onClick, type = "button", url }: ButtonProps) { const RealButton = <StyledButton onClick={onClick}>{children}</StyledButton>; const RealLink = ( <StyledButton onClick={() => {}}> <Link to={url!}>{children}</Link> </StyledButton> ); return <div></div>; } export default Button;강의를 보고 진행하던중에 RealLink에서 타입오류나 가서 확인을 해보니button onClick이 없으면 styled componenet에서 에러를 내는 것 같습니다. 링크로 쓰면 onClick이벤트를 전달해주면 안될 것 같은데 ()=>{} 이처럼 의미없는 함수를 넘겨주면 될까요
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
선생님 cloudFront를 사용하게되면 S3는 private으로 사용하는게 좋을까요
s3를 퍼블릭으로 두는것은 좋지 않다고 생각하는데,CDN 주소로 접근하는거면 s3는 private으로 하고 사용할수 있도록 설정이 가능할까요?
-
해결됨처음 만난 리액트(React)
componentDidUpdate 관련 질문
3개의 배열 메세지 모두 동일하게 map함수로 돌리고 화면에 출력하였는데, 1 didupdate call만 두 번 콘솔에 찍히고 3번 didupdate call는 콘솔에 안 찍히는 이유가 궁금합니다
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
jsx 문법이 적용이 안되고있습니다.
안녕하세요 그랩님저번 강의부터 jsx문법으로 상품상세 페이지 아이디 반영하는 부분 부터 문제가 발생하였는데 당시에는 그냥 + index 형식으로 진행해서 문제가 없었는데 계속 Link to부분 이문제가 발생하고있습니다.아래 코드 올려드립니다. 다른 수강생분들에게도 문제 해결에 도움을 줄 수 있도록 좋은 질문을 남겨봅시다 :) 1. 질문은 문제 상황을 최대한 표현해주세요.2. 구체적이고 최대한 맥락을 알려줄 수 있도록 질문을 남겨 주실수록 좋습니다. 그렇지 않으면 답변을 얻는데 시간이 오래걸릴 수 있습니다 ㅠㅠex) A라는 상황에서 B라는 문제가 있었고 이에 C라는 시도를 해봤는데 되지 않았다!3. 먼저 유사한 질문이 있었는지 꼭 검색해주세요!
-
미해결비전공자를 위한 진짜 입문 올인원 개발 부트캠프
axios 주소 변경 이후 화면이 뜨지 않아 문의드립니다!
안녕하세요 그랩님!강의 4:40~4:50 경 axios의 주소를 포스트맨 ulr에서 저희가 구축한 서버 url인 http://localhost:8080/products 로 변경하고 보니 아래와 같이 상품목록이 보이지 않아 개발자 도구를 켜서 확인해보니 에러발생 : AxiosError /Failed to load resource: net::ERR_CONNECTION_REFUSED 라고 뜨고 있는 상황입니다.. >> 이부분은 해결 되었습니다!추가로 잘 작동하였던 서버도 하기와 같이 GET http://localhost:8080/ 404 (Not Found) 오류가 뜨고 있는데 구글링으로 검색해 보아도 문제 해결이 되지 않아 문의글 남겨드립니다..ㅠㅡㅜhttp://localhost:8080/products 경로로 접근시엔 화면이 잘 뜨는데 왜 8080까지의 메인화면에서는 'cannot get' 이란 오류가 뜨는지 알 수 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
학습 자료(노션)에 포트폴리오 리뷰가 안 보입니다.
학습 자료(노션)에 포트폴리오 리뷰가 안 보입니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
url 할당 질문
안녕하세요 강사님 강의 잘 보고있습니다.강사님의 강의를 보고 따로 프로젝트를 만들어 보고 있는데 로컬주소/dashboard를 하면 dashboard가 안열러서 뭐가 잘못됐는지 궁금해서 질문드립니다!일단 프로젝트 구조입니다. urls.py 입니다 dashboard/urls/dashboard.py 입니다 dashboard/views/dashboard.py 입니다. 실행을 하면 url이 없다고 합니다
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
선생님 aws-sdk 모듈을 찾을 수 없다고 합니다.
aws-sdk는 따로 설치를 안해도 괜찮도 하셔서 설치를 안했습니다. 하지만 Cannot find module 'aws-sdk' 에러가 발생합니다.
-
해결됨비전공자를 위한 진짜 입문 올인원 개발 부트캠프
강의 내용 어디서 받을 수 있나요?
안녕하세요..강의 자료나 강의 때 사용하는 소스는 어디서 받을 수 있을까요?아무리 찾아봐도 없네요.알려주세요 ^^감사합니다.
-
해결됨파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트
token을 Cookie에 저장하는 것에 관한 에러 질문
안녕하세요! 강사님의 강의를 듣고 질문 타이틀에 적힌 대로 시도하는 과정에 어려움이 생겨 질문 드립니다.제가 시도한 인증/인가 흐름은 다음과 같이 진행됩니다.클라이언트가 로그인 요청 (성공)서버에서는 이에 대해 access token과 refresh token을 생성하고, access token은 response body에, refresh token은 cookie에 담아 응답을 보냅니다. (성공)클라이언트의 요청에 대해 응답이 성공적으로 들어오면 / 화면으로 redirect되고, response body에 담긴 access token은 변수에 저장되고 (성공), refresh token은 brower cookie에 저장됩니다. (실패)2번까지는 성공했지만 3번에서 cookie에 저장하는 것에 실패했습니다. 코드는 다음과 같습니다.클라이언트단 코드 const onFinish = (values) => { setFieldErrors({}); async function fn() { try { const { data: token } = await Axios.post("http://localhost:8000/accounts/auth", values, { credentials: "include" } ); axios.defaults.headers.common["Authorization"] = `Bearer ${token.access}` navigation("/"); ... 서버단 코드 (accounts/auth)아래 코드를 작성하는데 참고한 django 공식문서는 [여기](https://docs.djangoproject.com/en/3.0/ref/request-response/#django.http.HttpResponse.set_cookie) 입니다.Access-Control-Allow-Credentials의 경우, django-cors-header가 있어도 발생하여 해당 헤더를 추가하니 해결되었습니다. 또한 클라이언트단에도 credentials를 추가했습니다.from rest_framework_simplejwt.views import TokenObtainPairView class AuthView(TokenObtainPairView): def post(self, request, *args, **kwargs)): ... response = Response( {"access": serializer.validated_data.get("access", None)}, status=status.HTTP_200_OK, ) refresh_token = serializer.validated_data.get("refresh", None) response.set_cookie( "refresh", refresh_token, httponly=True, samesite=None, max_age=24 * 60 * 60, secure=False, domain="localhost", ) response.headers["Access-Control-Allow-Credentials"] = True return response 위 코드의 응답 결과는 다음 이미지와 같습니다.response headers에 담긴 전체 정보이고, Set-Cookie에 관한 내용은 다음과 같이 나왔습니다.Set-Cookie:refresh=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ0b2tlbl90eXBlIjoicmVmcmVzaCIsImV4cCI6MTY4ODcxMzE5OSwiaWF0IjoxNjg4NjI2Nzk5LCJqdGkiOiIwZTNkNGYwN2RiZTI0NGUyYWMyMmVlODIzYjAzMzZkMCIsInVzZXJfaWQiOjd9.xAsVsvuoUcukBZ0t2iVo-yIlplDy2JlwE_R4cX1YwmU; Domain=localhost; expires=Fri, 07 Jul 2023 06:59:59 GMT; HttpOnly; Max-Age=86400; Path=/ 그래서 시도한 것들은 다음과 같습니다.httponly, samesite, secure 각 값들에 대해서 하나씩 값을 바꿔가면서 시도했습니다.domain keyword 인자를 없애기도 했습니다. chrome의 캐쉬 설정이 문제인가 하여 third-party cache 허용으로도 바꿨습니다.middleware가 문제인가 하여 django-cors-header와 debug toolbar를 꺼서 시도해봤습니다.application/Cookies 뭔가 남아있으면 삭제하고 다시 로그인으르 시도했습니다.하지만 위 시도들을 했음에도 불구하고도 해결이 되지 않아 강사님에게 여쭤봅니다 ㅠㅠ
