173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
현재 9.2) 투두리스트 업그레이드 3:30 쯤 useState를 useReducer로 변경을 하며 생긴 문제입니다. onCreate함수는 액션 객체로 변경을 하고 화면에서 렌더링되는 것을 보고 있는데, 강의에서는 onUpdate 함수에 setTodos 상태함수가 정의되어 있지 않다는 에러가 있더라도 잘 렌더링이 되고 있습니다. 하지만 제 코드에서는 렌더링이 되지 않고 에러만 발생하게 됩니다. 확장프로그램을 설치했던 걸로 기억하는데 안 되는 이유를 알 수 있을까요? 추가로, 이 때 생기는 에러는 List 컴포넌트에서 map이 정의되지 않았다고 합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님 오류는 아니고 쫌 엉뚱한질문인데 다이어리 로컬스토리지 로딩 기능 구현중에 function App () { const [IsLoading, setIsLoading] = useState(true); 이 state가 true 이면 if (IsLoading) { return <div>로딩 중</div>; } 화면에 로딩중으로 렌더링 하게 코딩을 했는데 아무리 새로고침 해봐도 화면에 로딩 중 찍히는 걸 볼 수 가 없는데 이유는 너무 빨리 지나가서 제가 볼 수가 없는건가요? 그렇다면 유즈이팩트 사용 여부에따라 마운트 할 때 화면을 두번 그리게 되는건가요?
해결됨
Next.js 시작하기
안녕하세요 강의 잘 보고 있습니다. Layout.jsx 에서는 대문자를 사용하고, pages 안에 파일들은 carts.jsx 소문자로 사용하는것 같은데 관례상 그런건지 규칙이 있는건지 궁금합니다. 감사합니다.
해결됨
웹 애니메이션을 위한 GSAP 가이드 Part.03
안녕하세요 범쌤! 강의 너무 재밌게 잘 듣고 있습니다. 선생님의 강의를 들으면서 사이드 프로젝트에 바로바로 적용해보려고 시도중인데요. 레퍼런스 사이트를 찾아보면서 구현하고 싶은 UI가 있는데 도저히 감이 잡히질 않아 문의드립니다..! https://www.studio-particle.com/ 위 링크의 해당 영역 부채꼴 UI는 어떤 방식으로 그린걸까요.. ㅠㅠ ? (제 개인적인 생각으로는 자식요소들을 부채꼴로 위치를 지정하고 부모요소를 스크롤에 따라 rotate 시키는 방법이 효과적이지 않을까? 하는 생각을 해보았습니다.) 여러방면으로 검색하고 찾아봐도 답이 나오질 않아 문의드려봅니다..! 항상 강의 잘 듣고 있습니다. 친절하고 세심한 강의 감사합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 코드 커스텀 훅스로 만들어서 Edit이랑 Diary 컴포넌트에서 useDiary 임포트해서 const curDiaryItem = useDiary(params.id); 이 코드 넣자마자 해당 Diary 화면이 나오지않고 useEffect is not defined 만 나와요.. 코드 자세히 찾아봤는데 의미를 알수가 없어요.. ㅠ이해할 수가없어서 더이상 진도를 나갈수가 없습니다. 도와주세요 .. ㅠㅠ
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
소셜로그인 부분을 그래프큐엘 가드를 사용해서 적용하면 원인을 도저히 모르겠는 , res.setHeader function이 없다는 에러가 계속 발생하는데요.. 챗지피티 무료버전에 물어보니 소셜로그인 부분은 restapi로 구현한다고하는데.. 챗지피티를 믿을수가없어서요.. 소셜로그인 부분은 restapi로 해야된다. 그래프큐엘로 바꿀수있는데 너가 코드를 잘 못친듯? 1번과 2번중에 어떤건가요?
미해결
JavaScript 베이스캠프
'변수' 강의의 동영상이 검정색 화면으로만 나옵니다... 혹여나 제가 잘못 재생한걸까요 어떻게 해결해야할까요....>
미해결
처음 만난 리액트(React)
import React from 'react'; import ReactDOM from 'react-dom/client'; import './index.css'; //import App from './App'; //import reportWebVitals from './reportWebVitals'; import Clock from './chapter_04/clock'; const root = ReactDOM.createRoot(document.getElementById('root')); setInterval(() => { root.render( <React.StrictMode> <Clock /> </React.StrictMode> ); }, 1000); import React from "react"; const Clock = () => { return( <div> <h1>안녕, 리엑스</h1> <h2>현재 시간: {new Date().toLocaleTimeString}</h2> </div> ) } export default Clock; Failed to compile. Module not found: Error: Can't resolve './chapter_03/Library' in 'C:\reactdeveloper\reactcoding\my-app\src' WARNING in [eslint] src\index.js Line 4:8: 'App' is defined but never used no-unused-vars Line 5:8: 'reportWebVitals' is defined but never used no-unused-vars Line 7:8: 'Library' is defined but never used no-unused-vars Failed to compile. Module not found: Error: Can't resolve './chapter_03/Library' in 'C:\reactdeveloper\reactcoding\my-app\src' WARNING in [eslint] src\index.js Line 4:8: 'App' is defined but never used no-unused-vars Line 5:8: 'reportWebVitals' is defined but never used no-unused-vars Line 7:8: 'Library' is defined but never used no-unused-vars Failed to compile. Module not found: Error: Cannot find file: 'clock.jsx' does not match the corresponding name on disk: '.\src\chapter_04\Clock.jsx'. ERROR in ./src/index.js 10:0-39 Module not found: Error: Cannot find file: 'clock.jsx' does not match the corresponding name on disk: '.\src\chapter_04\Clock.jsx'. webpack compiled with 1 error 이렇게 오류가 나고 있는데 해결 방법이 있을까요
미해결
처음 만난 리액트(React)
리액트 한 번도 공부한 적 없어서 리액트 기초 공부하려는 목적입니다. 기초 강의 찾던 중에 알게 되었습니다! 리액트 버전 업데이트가 있었다고 알고 있는데 입문자 레벨이라면 강의 수강해도 별 문제 되지 않을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 하시는데로 했는데 썸네일 이미지가 안뜨는데, 카카오에 가서 확인을 해봐도 안되어 있어서 혹시 경로가<meta property="og:image" content="/public/thumbnail.png" /> /public 경로를 빼도 안되고 넣어도 안되고/.... 시간이 좀 걸린다 해서 카카오에 가서 캐시초기화해서 확인했는데도 이미지가 뜨지 않습니다. <meta property="og:image" content="/public/thumbnail.png" />
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
챗지피티에 물어보면 , NestJS와 GraphQL 환경에서도 Google OAuth 2.0을 이용한 소셜 로그인을 구현할 수 있습니다. 다만, GraphQL은 주로 데이터를 가져오고 조작하는데 사용되므로, OAuth와 같은 인증 과정은 일반적으로 REST API 엔드포인트를 통해 처리하는 것이 일반적입니다. 이렇게 하면 OAuth 2.0의 리디렉션 흐름을 관리하기가 더 쉽습니다. 라고 하는데용, 그러면 nestjs랑 graphql환경이라고해도 OAuth같은 소셜로그인은 rest-api처럼 컨트롤러를통해서 해주는건가요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장은 아니지만 앞서 연습한 todolist 를 일단 배포해보고싶어서 vercel 에 회원가입을 하고 로그인까지 해놓고 다시 vscode에서 터미널에서 vercel login 을 입력하고 엔터를 치면 아래와 같이 에러메시지가 떠서 더이상의 진행을 못했는데요, 혹시 다른 뭔가를 더 해야 하는건지요 F:\★수업★\WEB수업\웹퍼블리싱\11-Front-End\React\react-study\6-todolist>vercel login 'vercel'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 백엔드 코스
현재 아래와 같은 에러를 마주쳤습니다. my-server_1 | TypeError: res.setHeader is not a function my-server_1 | at JwtGoogleStrategy.strategy.redirect (/myFolder/node_modules/passport/lib/middleware/authenticate.js:340:13) my-server_1 | at stored (/myFolder/node_modules/passport-oauth2/lib/strategy.js:285:14) my-server_1 | at NullStore.store (/myFolder/node_modules/passport-oauth2/lib/state/null.js:5:3) my-server_1 | at JwtGoogleStrategy.OAuth2Strategy.authenticate (/myFolder/node_modules/passport-oauth2/lib/strategy.js:297:28) my-server_1 | at attempt (/myFolder/node_modules/passport/lib/middleware/authenticate.js:378:16) my-server_1 | at authenticate (/myFolder/node_modules/passport/lib/middleware/authenticate.js:379:7) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:88:3 my-server_1 | at new Promise (<anonymous>) my-server_1 | at /myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:80:83 my-server_1 | at GqlAuthGuard.canActivate (/myFolder/node_modules/@nestjs/passport/dist/auth.guard.js:44:32) 제 코드는 다음과 같습니다. auth.resulver.ts 파일의 일부분입니다. @UseGuards(GqlAuthGuard('google')) @Mutation(() => String) loginGoogle( @Context() context: IContext, // ): void { console.log('context::', context); } 그래프큐엘 가드 부분입니다. import { ExecutionContext } from '@nestjs/common'; import { GqlExecutionContext } from '@nestjs/graphql'; import { AuthGuard } from '@nestjs/passport'; // graphql 인가 가드 설정 export const GqlAuthGuard = (name: string) => { return class GqlAuthGuard extends AuthGuard(name) { getRequest(context: ExecutionContext) { const gqlContext = GqlExecutionContext.create(context); return gqlContext.getContext().req; } }; }; jwt google 부분입니다. import { PassportStrategy } from '@nestjs/passport'; import { Strategy } from 'passport-google-oauth20'; export class JwtGoogleStrategy extends PassportStrategy(Strategy, 'google') { constructor() { super({ clientID: process.env.GOOGLE_CLIENT_ID, clientSecret: process.env.GOOGLE_CLIENT_SECRET, callbackURL: 'http://localhost:3001/login', scope: ['email', 'profile'], }); } validate(accessToken, profile) { console.log('profile:', profile); return { ... }; } } 혹시 제가 실수한 부분이있을까요?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
저는 1년 정도 퍼블리싱 경력이 있는데 실무에서 float 를 사용한 적이 없습니다. 부끄럽지만 부족한 실력을 보완하기 위해 강의를 듣고 있는데요. 포트폴리오를 보완하려고 하는데, 강의를 듣다보니 float 를 사용법을 이제라도 익혀서 홈페이지를 만들어야하나 고민이 됩니다. 사실 flex 만 사용하면 정렬 관련해서는 어려울 게 없는데 float 는 너무 어렵게 느껴지네요...
미해결
습관부터 바꿔주는 React 기초
섹션 0 의 강의소개 첫번째 1분미만 컨텐츠가 완료가 안됩니다.
미해결
자바스크립트 알고리즘 문제풀이 입문(코딩테스트 대비)
const solve = (a) => { let p1 = 0, p2 = 1, cn = a[p1], answer = 0; while(p1 < a.length && p2 < a.length) { if (cn < 6) { cn += a[p2]; p2++; } else if (cn === 6) { answer ++; p1 ++; cn = a[p1]; p2 = p1 + 1; } else { p1 ++; cn = a[p1] p2 = p1 + 1 } } console.log(answer) }
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?
미해결
HTML+CSS+JS 포트폴리오 실전 퍼블리싱(시즌2)
다크모드 버튼 만들때 왜 <button> 이 아닌 <div> 를 사용하나요 ? 가끔 <button>, <ul> 대신에 div 를 사용하는 경우가 많은데 웹표준에 어긋나는 게 아닌지 헷갈립니다 ㅜ
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 실행은 되는데 왜이렇게 자꾸 오류가 나는걸까요?
미해결
비전공자의 전공자 따라잡기 - 자료구조(with JavaScript)
prev와 tail을 이용해서 만들어 봤습니다! 궁금한점이 하나 있는데 remove 메서드의 if (current)의 else 부분은 필요하지 않은것 같아서 구현하지 않았는데 문제가 있지는 않나요? class LinkedList { length = 0; head = null; tail = null; add(value) { const newNode = new Node(value); if (this.head) { this.tail.next = newNode; this.tail = newNode; } else { this.head = newNode; this.tail = newNode; } this.length++; return this.length; } search(index) { return this.#search(index)[1]?.value; } prevSearch(index) { return this.#search(index)[0]?.value; } #search(index) { let count = 0; let prev; let current = this.head; while(count < index) { prev = current; current = current?.next; count++; } return [prev, current]; } remove(index) { const [prev, current] = this.#search(index); if (current) { if (prev) { prev.next = current.next; } if (current.next) { current.next.prev = prev; } if (current === this.tail) { this.tail = prev; } } this.length--; return this.length; } } class Node { next = null; prev = null; constructor(value) { this.value = value; } } const li = new LinkedList(); li.add(1); li.add(2); li.add(3); li.add(4); li.add(5); li.add(6); console.log(li.prevSearch(2)); console.log(li.remove(4)); console.log(li.search(4)); console.log(li.tail.value); console.log(li.remove(3)); console.log(li.tail.value); console.log(li.remove(3)); console.log(li.tail.value); console.log(li.remove(2)); console.log(li.remove(1)); console.log(li.tail.value); console.log(li.remove(0));
