묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
백엔드에서 캐싱 코드를 헤더에 넣었지만 불안정합니다.
강사님, 안녕하세요? 현재 백엔드에 캐시 코드를 추가한 상황인데, 3개의 mp3 파일을 받을 때 다음과 같이 네트워크 탭에서 다양하게 기록됩니다. 백엔드에 캐시 코드를 적용했는데, Response Headers에 Cache-Control이 안나옵니다. 두가지가 궁금합니다. 1. 6번 반복적으로 로드하면서, 계속 URL 콜을 하는건지와 2. 3개의 mp3 파일을 받는데, 첫 파일은 282B->0B, 두번째 파일은 disk cache, 세번째 파일은 282B->282B로 6번 진행됩니다. 저는 백엔드의 캐싱이 제대로 적용이 안되었다고 판단되는데, 추가적으로 리액트 프론트엔드(캐시 관련 코드 없음)에 대한 작업이 필요한지 문의드립니다.
-
미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
github 주소좀 알려주실 수 있으신가요?
github 주소좀 알려주실 수 있으신가요?
-
미해결웹 게임을 만들며 배우는 React
바벨에 대한 질문입니다.
바벨을 개발용으로 사용하고 배포용으로 사용안한다는 말이 배포용 프로그램이 babel 말고 다른게 있다는 뜻인가요??
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 기본 강의
concurrently 오류
concurrently 정상 다운 받고 그대로 실행하였는데 아래와 같은 오류가 계속 발생합니다.. 깃허브 : https://github.com/ParkSeYun98/boiler-plate-ko
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
1개의 동영상을 다운로드 받는데 네트워크 탭에서 여러번 받는지, 궁금합니다.
안녕하세요? 강의 재미있게 보고 있는 중에 네트워크 탭에서 같은 동영상 리소스를 계속 받는 여러 탭이 있어서 여쭙니다. 1개의 동영상을 다운로드 받는데 네트워크 탭에서 여러번 받는지, 궁금합니다.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 시 에러가 나는데 해결이 안됩니다..
이것저것 다 시도해보아도 계속 이 에러가 납니다.. 노드 버전의 문제일까요? 현재 12.20 버전쓰고있습니다 ㅠㅠ
-
미해결
maria DB table 생성
안녕하세요. 이번에 새로운 시도를 위해 react, express, mariaDB를 이용하여 개발중인 신입 개발자입니다. 처음으로 백엔드 분야를 시도하는거라 물어볼 사람도 많지 않아 어려움을 겪고 있습니다. 현재 메인페이지에서 새로운 카테고리(ex. test)를 만들면 test라는 테이블이 DB내에서 생성되고, 이후 test내부에서 또다시 카테고리를 만들면 DB내에서 생성 되도록 제작하고 싶습니다. 현재 코드를 이렇게 작성하였지만, 테이블 생성이 안되고 있습니다. 어떻게 하면 좋을까요? app.get("/", (req, res) => { res.send("안녕"); const title = "insert_test11" const sqlQuery = "CREATE TABLE (?) ( `user_key` INT NOT NULL AUTO_INCREMENT, `user_id` VARCHAR(45) NULL, PRIMARY KEY (`user_key`))"; connection.query(sqlQuery, [title], (err, result) => { if(err) { console.log("실패!"); } else { console.log("성공!"); } }) });
-
미해결처음 배우는 리액트 네이티브
헤더에 이미지 추가
헤더에 background 로 넣고 싶은 이미지는 어떻게 할 수 있을까요?? 간단에 예제 코드 부탁드려도 될까요??
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
프론트엔드 쪽 cache-control
안녕하세요. fetch나 axios 에서 요청을 보낼 때, cache-control 설정해서 요청하는거랑 서버에서 설정해서 보내주는거랑 무슨 차이인가요?
-
미해결
리액트 쿠키 관련 문제
리액트로 프론트를 개발하고 있고 친구는 스프링 부트로 백엔드를 개발한 후 포스트 맨을 통해서 api를 제공해 줬는데 토큰을 쿠키에서 받아오는 형식입니다. 그런데 제 localhost의 쿠키를 넣으면 401이 뜨고 백엔드 친구의 url 에 토큰 값을 저장해지만 되는데 어떻게 해결 할 수 있을까요.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
DELETE시 params.id 데이터 타입
// onDelete in MsgList.js ... console.log(typeof id) // number const receivedId = await fetcher("delete", `/messages/${id}`, { params: { userId }, }); // delete handler in messages.js const targetIndex = msgs.findIndex((msg) => msg.id === id); console.log(typeof msg.id, typeof id) // number, string 안녕하세요, 강의에서와는 달리 제 코드에서는 DELETE시 처음부터 서버에서 에러가 발생하여 디버깅 해보니 DELETE 핸들러에서 msg.id는 숫자인데 params.id는 문자열로 들어오고 있습니다. 클라이언트 onDelete에서 보내는 id를 typeof 로 출력해보면 타입이 숫자여서 이해가 어렵습니다. 강의와 똑같이 코드 작성한 것 같은데 어디서 비롯된 문제인지 파악이 어려워 질문 남깁니다. 감사합니다.
-
해결됨[리뉴얼] React로 NodeBird SNS 만들기
next는 파일 확장자
같은 자바스크립트여도 리액트인걸 개발자한테 알려주기위해 jsx 를 쓴다고 무료강좌에서 들었던것 같은데 next js 는 확장자를 보통 js로 하나요?
-
미해결이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
React 관련 궁금한게 있습니다.
리액트 관련해서 질문이 있습니다. 지금까지는 리액트를 로컬에서만 불러오고 있는데요. 외부에서 접근을하려면 서버에 올려야하잖아요? 이런건 어떻게 aws서버에 올리는지 궁금합니다. aws와 react 강의니깐 강의에 맞는 질문 같은데 아니면 알려주세요.
-
해결됨프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat. React) - Part. 2
안녕하세요. 강의 잘 듣고 있습니다. 3-8 강의가 57분으로 구성되어 있는데, 중간에 검은화면이 길게 나옵니다.
확인해 보시면 좋을것 같습니다 :)
-
미해결Slack 클론 코딩[실시간 채팅 with React]
배포 관련 질문입니다
헉 제로초님 저는 서버 강의는 안듣고 클라이언트만 듣고 배포하고 싶거든요 포폴로 사용하려고요 클라이언트만 따로 배포 할 방법은 없을까요?...
-
해결됨Slack 클론 코딩[실시간 채팅 with React]
sleact 폴더 안에 파일이 다 들어있습니다.
깃에서 클론받아서 강의를 진행하고 있는데 front 뿐만 아니라 sleact 폴더에도 전부 만들어져 있는데 어떤식으로 진행해야하나요 초반 셋팅 부분 빼고는 다 삭제 후 만들면 되겟죠..?
-
미해결따라하며 배우는 리액트, 파이어베이스 - 채팅 어플리케이션 만들기[2023.12 리뉴얼]
함수에서 {} 의 유무 차이
제가 초보라서 그러는데 renderChatRooms 함수에서 (chatRooms)를 인자로 받고 => { } 이렇게 중괄호를 쓰지 않고 바로 => 다음에 처리를 해주는건 어떤 이유에서 인가요? {} 사용하면 함수가 처리가 안되던데 어떤 차이때문인지 궁금합니다.
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
pages > index.js에서 궁금한 로직이 있는데요!
import React from 'react'; import MsgList from '../components/MsgList'; import fetcher from '../fetcher'; export default function Home({ smsgs, users }) { return ( <> <h1>SIMPLE SNS</h1> <MsgList smsgs={smsgs} users={users} /> </> ); } export const getServerSideProps = async () => { const smsgs = await fetcher('get', '/messages'); const users = await fetcher('get', '/users'); return { props: { smsgs, users } }; }; 안녕하세요! 강의를 보다가 pages에 있는 index.js에 궁금한 로직이 있습니다. getServerSideProps 함수에서 return 값이 어떻게 위 Home 리액트 컴포넌트에 props로 넘어갈 수 있는건가요? 궁금합니다!! ㅎㅅㅎ
-
해결됨풀스택 리액트 토이프로젝트 - REST, GraphQL (for FE개발자)
안녕하세요! 환경세팅을 깃허브에서 그대로 따라 쳤는데 이상하게 에러가 발생합니다.
안녕하세요! 에러가 발생해서 여쭤보겠습니다. 환경세팅을 한 후에 yarn run client를 실행하면 아래와 같은 에러코드가 발생하는데 어떠한 이유에서 발생하는지 모르겠습니다... 코드는 그대로 똑같이 치고 강사님의 git파일들과도 비교했는데 에러가 발생합니다 ㅠㅠ PS C:\Users\Desktop\Toy Projects> yarn run client yarn run v1.22.11 $ yarn workspace client start internal/modules/cjs/loader.js:888 throw err; ^ Error: Cannot find module 'C:\Users\諛뺣???AppData\Roaming\npm\node_modules\yarn\bin\yarn.js' at Function.Module._resolveFilename ㅂ(internal/modules/cjs/loader.js:885:15) at Function.Module._load (internal/modules/cjs/loader.js:730:27) at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:72:12) at internal/main/run_main_module.js:17:47 { code: 'MODULE_NOT_FOUND', requireStack: [] } error Command failed with exit code 1. info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
-
미해결Slack 클론 코딩[실시간 채팅 with React]
swr 설정 살펴보기 > revalidate 문제
swr 최신버전에서 revalidate가 삭제 된 것 같아서 질문드립니다! 제로초님의 강의를 듣고, 제가 이해한 것은, 기본 swr설정으로 사용을 하면, 지속적으로 데이터를 요청하게 되는데, swr에서 revalidate를 설정해주고, onSubmit의 post의 then에 reavalidate함수를 넣어주면, 그 함수가 실행 되었을 때부터 swr이 작동한다고 이해했는데 그게 맞을지 여쭤보고 싶습니다. swr 공식문서를 읽어보긴 했는데 확실히 이해가 되지 않아서요.. 조건부로 실행시키기 위해서, useSWR()에서 조건을 주어, 조건에 따라 false일 때 url의 위치에 null 안에 조건을 넣어주는 방식으로 공식 문서에 적혀있는데, 이렇게 되면 useState로 조건을 하나 만들어주어야 할까요? 해당 방법이 맞는지와 올바른 코드 예시가 있다면 알려주시면 감사하겠습니다!! ㅠ