묻고 답해요
148만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
@types/cors설치
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 22:03 초 부분 에 cors 설치하시는데 요거는 안하셨는데 해야되는거 맞나요??저는 안하니까 오류나서 설치하라고 뜨더라구요..영상에서는 설치안했는데도 오류 안뜨는 거같아서..아님 제가 잘 못본걸 수도 있어서 알려주시면 감사드립니다!
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
React.FC 사용
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Rect.FC의 사용하지않고 아래와 같이해도 무방할까요???
-
미해결BBC 인터랙티브 페이지 "코로나19가 바꿀 사무실의 미래" 클론
오류났을때 참고
안녕하세요 , 23년도에도 듣고 계신 분이 계실지는 모르겠지만.. 강의 들으면서 혹시 막히시는 부분들 제가 수업 들으면서 작성한 코드와 비교해서 본인이 작성한 어떤 부분이 잘못되었는지 확인하시면 문제해결에 도움이 될듯해서요 !birdflies 함수 작성에서 작은 따옴표가 아닌 ` <- 이 부분 (숫자 1 옆의 템플릿 리터럴 ) 활성화 > 비활성화가 되었을 때 다시 돌아오지 않는 부분 이였습니다.위 두가지에서 시간이 좀 잡아먹었는데 저와같은 분들이라면 제 js 랑 비교해보세요 ㅋㅋ( 이 부분은 애니메이션이 완전히 끝까지 완료 후 스크롤을 내려야 다시 활성화 되었을 때 애니메이션이 제자리에서 작동을 하더라구요. )html { font-family: 'Noto Sans KR', sans-serif; } body { margin: 0; } div, section, header, footer, p, h1, h2 { box-sizing: border-box; } a { color: royalblue; } img { max-width: 100%; height: auto; } /* 배경이 되는 이미지들 */ .global-width{ max-width: 620px; margin: 0 auto; padding: 0 1rem; } .scroll-graphic{ overflow-x: hidden; position:sticky; top:0; height: 100vh; } .graphic-item{ display: flex; align-items: center; justify-content: center; position:absolute; left: 0; top:0; width: 100vw; height: 100vh; opacity: 0; transition: 0.5s; will-change: opacity; } .visible{ opacity: 1; } .scene-img{ max-height: 100vh; } .scroll-text{ position: relative; padding-bottom: 1px; } .step{ margin-bottom: 60vh; padding: 0.5rem 1rem; border-radius: 10px; border : 0.2px solid rgba(216,216,216,0.2); box-shadow: rgba(0,0,0,0.3)0 0 3px; background: rgba(255,255,255,0.8); } .bird{ position:absolute; left: 0; bottom:70%; width: 100px; transform:translateX(-100%); transition:1.5s 0.5s linear; } [data-index="5"] .bird{ left: 30%; bottom:30%; } .global-footer{ text-align: center; padding:2rem 0; } .strikethrough{ text-decoration: line-through; }// 전역변수 사용 회피 (() => { const actions = { birdFlies(key){ if (key) { document.querySelector('[data-index="2"] .bird').style.transform = `translateX(${window.innerWidth}px)`; }else{ document.querySelector('[data-index="2"] .bird').style.transform = `translateX(-100%)`; } }, birdFlies2(key) { if (key) { document.querySelector('[data-index="5"] .bird').style.transform = `translate(${window.innerWidth}px, ${-window.innerHeight * 0.7}px)`; }else{ document.querySelector('[data-index="5"] .bird').style.transform = `translateX(-100%)`; } } }; const stepElems = document.querySelectorAll('.step'); const graphicElems = document.querySelectorAll('.graphic-item'); let currentItem = graphicElems[0]; let ioIndex; const io = new IntersectionObserver((entries,observer)=>{ ioIndex = entries[0].target.dataset.index *1 ; console.log(ioIndex); }) for (let i = 0; i < stepElems.length; i++) { io.observe(stepElems[i]); stepElems[i].dataset.index = i; graphicElems[i].dataset.index = i; } function activate(action) { currentItem.classList.add('visible'); if (action) { actions[action](true); } } function inactivate(action) { currentItem.classList.remove('visible'); if (action) { actions[action](false); } } window.addEventListener('scroll', () => { let step; let boundingRect; for (let i=ioIndex-1; i<ioIndex+2; i++){ step = stepElems[i]; if(!step) continue; boundingRect = step.getBoundingClientRect(); if(boundingRect.top > window.innerHeight* 0.1 && boundingRect.top < window.innerHeight*0.8){ inactivate(currentItem.dataset.action); currentItem = graphicElems[step.dataset.index]; activate(currentItem.dataset.action); } } }); window.addEventListener('load',()=>{ setTimeout (() => scrollTo(0,0),100); }) activate(); })();
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
[커뮤니티 페이지 생성하기 강의부분] authRoute 논리연산자를 추가하면 error가 뜹니다.
_app.tsxexport default function App({ Component, pageProps }: AppProps) { axios.defaults.baseURL = process.env.NEXT_PUBLIC_SERVER_BASE_URL + '/api'; axios.defaults.withCredentials = true; const { pathname } = useRouter(); const authRoutes = ['/register', '/login']; const authRoute = authRoutes.includes(pathname); return ( <AuthProvider> {!authRoute && <NavBar />} <div className={authRoute ? '' : 'pt-12'}> <Component {...pageProps} /> </div> </AuthProvider> ); } 해당 부분에서 !authRoute 논리연산자를 추가하면Error: Hydration failed because the initial UI does not match what was rendered on the server.에러가 나옵니다.강사님 파일을 클론 해서 빌드 확인해보니 이런 에러가 안나오길래, 이 강의까지의 나머지 파일도 클론한 것과 모두 같은 것을 확인했는데 왜 저만 이런 에러가 나오는걸까요?해당 에러를 구글링해서 해결책으로 나오는 것들을 적용해봤는데 어느것도 에러를 해결해주지 못했습니다ㅠ어떤 부분을 확인해보면 좋을까요?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
블로그 웹앱 배포 방법
강의에서 배운 내용을 토대로 만들어진 것을 배포하여 사용해보고 싶은데, 어떤 강의를 들으면 실제 구글 플레이스토어에서 다운 받아서 실행해 볼 수 있을까요? android studio에서 app bundle 파일만 뽑아낸다고 배포가 가능한지도 궁금합니다!
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
sizedbox 위젯에 primary = RED_COLOR
'primary' is deprecated and shouldn't be used. Use backgroundColor instead. This feature was deprecated after v3.1.0.. (Documentation) Try replacing the use of the deprecated member with the replacement. primary에 사선으로 줄쳐져서 위의 글 내용이 나와서이렇게 수정하면 될까요?backgroundColor : RED_COLOR,
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
import express 하는 부분에서
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 혹시 아래와 같이 자동완성 사용하는 거랑 같을까요??
-
미해결Slack 클론 코딩[실시간 채팅 with React]
빌드 후 이미지url
nest 백엔드까지 같이 사서 들었는데요 몇일 고민을 해봤는데 해결이 안되서 질문 올립니다.강의에서 말씀하신것처럼 프론트 빌드 한 것을 백엔드 public 폴더 안에 넣었습니다. 파일구조는 back/public안에 dist폴더랑 index.html이렇게 넣었습니다. 먼저 첫번째 질문은 프론트 따로 백엔드 따로 로컬에서 돌릴때는 이렇게 뜨고 제대로 실행이 되는데 백엔드안에 빌드한 내용물을 넣고 로컬에서 돌린 후 이미지를 업로드 하면 액박이 뜹니다. 그래서 주소를 보았는데 위에 있는 백엔드에서 안가져오고 다른 주소에서 가지고 오는데 그 주소가.. http:다른 사람이 배포한 주소/upload\사진.jpg로 뜨더라구요 사진을 올리고 싶은데 다른 사람이 배포한 주소가 떠서 일단 이렇게 설명 드립니다 그래서 결과적으로 프론트에서 proxy를 3095로 했는데 백엔드로 돌릴때도 3095로 되어야 되는데 안됩니다! (이미지 빼고는 다 됩니다)두번째 질문은 이미지빼고는 다 잘 되서 일단 배포를 한번 해봤는데요 이런 에러메세지가 뜹니다. 네트워크를 살펴봤을 때는 app.js에는 200으로 잘 가지고 왔구요 타입문제인줄 알고 이렇게도 해봤는데도 안되서 찾아보니 경로문제인거같은데 .. 경로는 제대로 한거같은데 왜 안되는지 모르겠습니다 (파일구조)
-
해결됨따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
nextJS 설치 시 설정하는게 생겼는데
- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. Eslint는 뭔지 알겠는데 밑에 3개는 처음보네요.. 업데이트 되면서 생긴건가요??마지막은 @components/* 이렇게 설정하라고 하던데 맞나요?? 무슨뜻인가요?? 구글링했습니다
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
개념 강의 순서 질문
안녕하세요 강사님 개념 강의 순서에대해 질문 드리려고 합니다.기본기 강의 수강 이후에 실습을 진행하면서, 객체지향 개념과, 함수, 비동기 관련 개념강의를 틈틈히 들어도 되는건지..아니면 개념강의를 전부 본후에 실습 강의로 넘어가야 되는건지 여쭈어보고 싶습니다.
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
안녕하세요 강사님 오류문의드립니다.
lllll@172 server % npm run dev> server@1.0.0 dev> env-cmd -f .env.development nodemon --exec ts-node ./src/server.ts[nodemon] 2.0.20[nodemon] to restart at any time, enter rs[nodemon] watching path(s): .[nodemon] watching extensions: ts,json[nodemon] starting ts-node ./src/server.ts/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859return new TSError(diagnosticText, diagnosticCodes, diagnostics);^TSError: ⨯ Unable to compile TypeScript:src/routes/subs.ts:139:16 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.139 if (!req.file?.path) {~~~~src/routes/subs.ts:144:22 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.144 unlinkSync(req.file.path);~~~~src/routes/subs.ts:154:26 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.154 sub.imageUrn = req.file?.filename || "";~~~~src/routes/subs.ts:157:27 - error TS2339: Property 'file' does not exist on type 'Request<ParamsDictionary, any, any, ParsedQs, Record<string, any>>'.157 sub.bannerUrn = req.file?.filename || "";~~~~at createTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:859:12)at reportTSError (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:863:19)at getOutput (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1077:36)at Object.compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1433:41)at Module.m._compile (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1617:30)at Module._extensions..js (node:internal/modules/cjs/loader:1308:10)at Object.require.extensions.<computed> [as .ts] (/Users/lllll/study/reddit-clone-app/server/node_modules/ts-node/src/index.ts:1621:12)at Module.load (node:internal/modules/cjs/loader:1117:32)at Function.Module._load (node:internal/modules/cjs/loader:958:12)at Module.require (node:internal/modules/cjs/loader:1141:19) {diagnosticCodes: [ 2339, 2339, 2339, 2339 ]}[nodemon] app crashed - waiting for file changes before starting... client에서는 rpm run dev가 정상적으로 실행되는데 server에서는 npm run dev를 실행하면 상기와 같은 오류가 발생하네요.구글링해보니 server 디렉토리 내의 tsconfig.json 파일이 문제인 것 같은데 여러 세팅을 바꾸어보아도 해결되지않아 문의드립니다.(tsconfig.json 파일은 강사님이 올려주신 소스코드 파일과 같은 파일 사용중입니다)
-
미해결Slack 클론 코딩[실시간 채팅 with React]
라이브러리 질문
이렇게 코드 옆에 설명 나오게 하고싶은데 어떻게 해야될까요?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
내 노트 모아보기
강의 들으면서 유용하게 쓰고 있는 기능이 "노트"입니다!그런데 쓰다보면아래처럼 제가 저장한 강의 시간때를 벗어나서 00:00으로 기록될 때가 있습니다! 혹시 이건 수정이 불가능할까요?보통은 아래처럼 정상적으로 기록이 됩니다!
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
SafeArea (iPhone, Android)
강의에서는 SafeArea를 설명해주시면서 iPhone과 Android를 둘다 보여주시면서 설명해서, 찾아봤는데.. 아이폰은 안보여서요.. ㅠㅠ
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
web view 실행 안됩니다.
빈화면이였다가 시간이 지나면 이런 화면이 나옵니다.특별한 에러도 없습니다. 이유가 뭘까요?
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
랜덤 숫자 생성기 프로젝트 관련
안녕하세요 랜덤 숫자 생성기 프로젝트에서 123, 456, 789 하단에 패딩을 줄 때,마지막 Row 인 789 는 패딩을 주지 않기를 구현하는 과정에서 막혀서 질문 남깁니다!!일단 아래 2개의 스샷은 57번 라인이 다른것 말고는 완전 동일한 코드인데요 첫번쨰 스샷은 정상적으로 에뮬에 반영이 되는데, 두번째 스샷은 에러가 발생해서 질문 남깁니다!! ==============================================================
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
안도르이드 애뮬레이터 질문
초기에 플러터 다운로드방법이 다르게 해서 그런지제가 노트북을 삼성, 아수스 2개쓰고있으며 해당 캡처처럼 자유롭게 움직이는 에뮬레이터를 사용하고싶은데 아수스 노트북에는움직일수가 없이 애뮬레이터가 고정되어있습니다..
-
미해결따라하며 배우는 노드, 리액트 시리즈 - 레딧 사이트 만들기(NextJS)(Pages Router)
postcss-preset-env대신 postcss autoprefixer 설치 해도 될까요?
tailwind.css 공식 홈페이지에는 postcss와 autoprefixer 설치가 나오던데 저걸 대신 설치 해도 될까요?https://tailwindcss.com/docs/guides/nextjs2번째 질문으로 위에 tailwind css 공식 홈페이지대로 하면 잘 되는데 저거 대로 진행해도 될까요?
-
미해결Slack 클론 코딩[실시간 채팅 with React]
DM 전송 테스트시 500 에러
안녕하세요. 해당 강의에서 제가 DM을 확인하려고 전송을 해봤는데 500에러가 나오지만, 다시 데이터를 불러오면 DM 자체는 서버로 잘 간거처럼 나와서요. payload도 정상적으로 보내진거 같은데, 혹시 제가 api 추상화쪽을 잘못했나 싶지만,, 그런거 같지는 않아서 고민하다가 이렇게 질문을 올려보아요 ! 이게 해당 handleSubmut 코드와 API 추상화 코드입니다. 한번 봐주시면 감사하겠습니다.
-
미해결[2024 최신] [코드팩토리] [초급] Flutter 3.0 앱 개발 - 10개의 프로젝트로 오늘 초보 탈출!
super를 사용하는 건, 부모와 자식 클래스의 파라미터 이름이 꼭 같아야하나요?
OOP 상속 부분 강의에서 보면 부모클래스의 파라미터 이름과 자식 클래스 파라미터 이름을 다 같게 쓰시더라구요.혹시 변수 이름 구분을 하면 오류가 나는지 한번 구분을 해보았는데, super뒤의 부모 클래스 파라미터를 적는 부분에서 오류가 나더라구요.두 개를 다르게 지정하면 안되는건가요? 예를 들어 강의에 나온 대로 받은 입력을 2배하는 클래스, 4배하는 클래스를 만들었을 때class Timestwo { int number1; Timestwo(this.number1); int calculate(){ return this.number1 * 2; } } class Timesfour extends Timestwo{ Timesfour(int number2) : super(number1); int calculate(){ return super.number1 * 4; } }밑에서 5번째줄, Timesfour(int number2) : super(number1) 부분에서 number1아래에 빨간줄이 생겨요.저는 Timesfour(int number2)는 Timesfour라는 클래스의 파라미터를 받는 거라 아무 이름이어도 된다고 생각했고,super( )안은 부모클래스(Timestwo)의 파라미터를 받는거라 number1을 써야한다고 생각했거든요.그런데 안되더라구요...?제가 어디를 잘못 이해하고 있는걸까요?