172만명의 커뮤니티!! 함께 토론해봐요.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 선생님 오류는 아니고 쫌 엉뚱한질문인데 다이어리 로컬스토리지 로딩 기능 구현중에 function App () { const [IsLoading, setIsLoading] = useState(true); 이 state가 true 이면 if (IsLoading) { return <div>로딩 중</div>; } 화면에 로딩중으로 렌더링 하게 코딩을 했는데 아무리 새로고침 해봐도 화면에 로딩 중 찍히는 걸 볼 수 가 없는데 이유는 너무 빨리 지나가서 제가 볼 수가 없는건가요? 그렇다면 유즈이팩트 사용 여부에따라 마운트 할 때 화면을 두번 그리게 되는건가요?
해결됨
Next.js 시작하기
안녕하세요 강의 잘 보고 있습니다. Layout.jsx 에서는 대문자를 사용하고, pages 안에 파일들은 carts.jsx 소문자로 사용하는것 같은데 관례상 그런건지 규칙이 있는건지 궁금합니다. 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
해당 코드 커스텀 훅스로 만들어서 Edit이랑 Diary 컴포넌트에서 useDiary 임포트해서 const curDiaryItem = useDiary(params.id); 이 코드 넣자마자 해당 Diary 화면이 나오지않고 useEffect is not defined 만 나와요.. 코드 자세히 찾아봤는데 의미를 알수가 없어요.. ㅠ이해할 수가없어서 더이상 진도를 나갈수가 없습니다. 도와주세요 .. ㅠㅠ
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 섹션 2 > 레이아웃 클론 강의를 수강 중에 로고에 inline-block 을 사용하신 부분이 있어서요 block 으로 해도 비슷한 노출이 되는 듯해서, 어떤 의도가 있으셨을지 또는 다른 효과가 있는지 궁금합니다 :) .logo { display: inline-block; height: 56px; margin-top: 2px; }
해결됨
Slack 클론 코딩[실시간 채팅 with React]
커스텀 훅에서 사용된 제네릭에 대해서 공부하다가 궁금한게 생겨서요. 아래 테스트 코드 에서 '+' 연산자는 'T' 및 'T' 유형에 적용할 수 없습니다. 라는 에러 코드가 발생하는 이유가 이해가 안 가서요 위 함수는 사용한다면 아래 처럼 숫자 또는 문자인 타입으로 쓰일텐데, 그러면 return 값에서 + 연산자가 number + number 또는 문자열 + 문자열로 실행되어 문제가 없을 것 같은데 에러가 뜨는 이유가 모르겠어서요 add<number>(1, 2); add<string>('1', '2'); 지피티에 질문해보니 함수 오버로드를 쓰거나 return 값에 any를 쓰라곤 하는데 잘못된 방법 같고 extends로 타입 제한을 걸어도 같은 에러가 뜹니다 function add<T extends number | string>(x: T, y: T): T { return x + y; } 제가 참고한 제네릭 레퍼런스 자료입니다 https://inpa.tistory.com/entry/TS-%F0%9F%93%98-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-Generic-%ED%83%80%EC%9E%85-%EC%A0%95%EB%B3%B5%ED%95%98%EA%B8%B0#%EC%A0%9C%EB%84%A4%EB%A6%ADgenerics_%EC%86%8C%EA%B0%9C
미해결
처음 만난 리액트(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 이렇게 오류가 나고 있는데 해결 방법이 있을까요
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요 강의 잘 듣고있습니다. 강의를 듣다가 궁금한 점이, browser.ts와 http.ts 두개를 만든 점 입니다. next는 CSR과 SSR을 둘다 사용하기에, 서버에서도 데이터 처리를 하려고 http.ts를 통해 서버 데이터 처리를 하는 게 맞나요? 아래 코드는 브라우저 환경일 때만 brower.ts를 실행시키고 http.ts를 브라우저 환경이든 아니든 항상 켜져있는건가요? if (typeof window !== 'undefined') { if (process.env.NEXT_PUBLIC_API_MOCKING === 'enabled') { // eslint-disable-next-line global-require require('@/mocks/browser') } } 그렇다면 만약 react에서 사용하게 되면 CSR만 한다는 가정하에 http.ts는 필요 없게 되는건가요?
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
import type { Meta, StoryObj } from "@storybook/react"; import { fn } from "@storybook/test"; import TagList from "../components/TagList"; // 버튼 컴포넌트의 메타 정보를 나타냄 const meta = { // 경로 title: "List/TagList", component: TagList, parameters: { layout: "centered", }, tags: ["autodocs"], argTypes: { tagList: { control: "array", description: "태그 리스트", docs: ["tag1", "tag2", "tag3"], }, onTagClick: { action: "clicked", description: "버튼 클릭 이벤트", }, }, args: { onTagClick: fn(), }, } satisfies Meta<typeof TagList>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { tagList: ["tag1", "tag2", "tag3"], }, }; 위와 같이 코드를 작성했을 떄, tagList의 control 부분에서 타입 에러가 발생합니다. TS2322: Type "array" is not assignable to type Control | undefined 어쨰서 undefined가 들어갈 수 있는지 알고 싶습니다.
미해결
이미지 관리 풀스택(feat. Node.js, React, MongoDB, AWS)
이미지 등록시에 아래 사진과 같이 이미지가 리스트에 등록이 되긴하는데 이미지 형태가 깨져서 등록이 됩니다. 새로고침을 해야 정상적으로 반영되는 오류가 있는데 어느 코드가 잘못된지를 모르겠습니다ㅠㅠ https://github.com/jjeongdong/ImageUpload_front
미해결
처음 만난 리액트(React)
리액트 한 번도 공부한 적 없어서 리액트 기초 공부하려는 목적입니다. 기초 강의 찾던 중에 알게 되었습니다! 리액트 버전 업데이트가 있었다고 알고 있는데 입문자 레벨이라면 강의 수강해도 별 문제 되지 않을까요?
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강사님이 하시는데로 했는데 썸네일 이미지가 안뜨는데, 카카오에 가서 확인을 해봐도 안되어 있어서 혹시 경로가<meta property="og:image" content="/public/thumbnail.png" /> /public 경로를 빼도 안되고 넣어도 안되고/.... 시간이 좀 걸린다 해서 카카오에 가서 캐시초기화해서 확인했는데도 이미지가 뜨지 않습니다. <meta property="og:image" content="/public/thumbnail.png" />
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
vite로 react + typescript 설치 후 storybook 설치시 위와 같은 에러가 발생하는데 해결방법이 있을까요?
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
이 부분에서 wrapper__left__body가 튀어나온 이유가, wrapper__left가 정렬되지 않아서라고 하셨고, 그래서 자동으로 div가 block단위이고 한 줄 띄어진 것처럼 된 거다 라고 하셨습니다. 근데 div가 block단위이고 한 줄 띄어진 것처럼 되는 게 이해되지 않습니다.. 한 줄 띄어진거면 바로 밑으로 붙여져서 안 튀어나가야하지 않나요? wrapper__left__body크기가 어차피 부모 height에서 wrapper__left__header부분을 뺀 크기의 100%라면요! 아니면 혹시 정렬을 해야지만 부모 height에서 wrapper__left__header부분을 뺀 크기의 100%라고 이해할 수 있는 걸까요? 정렬을 따로 설정하지 않으면 그냥 부모 height의 100%를 가져와서 튀어나가는 걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
[싸이월드만들기1탄]에서 wrapper 사이즈가 어떻게 된 건지 궁금합니다. 부모-속성을 보면 background -> outerbox -> wrapper -> wrapper__left, wrapper__right입니다! 이때, background와 outerbox는 따로 크기를 지정해주었는데, wrapper는 따로 크기를 지정하지 않았더라고요! 그러면 wrapper크기는 자동으로 지정되나요? 부모클래스인 outerbox의 width와는 동일한데 height는 달라서요! 혹시 어떻게 지정되는 건지 알 수 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
게시글 등록 화면에서 작성자, 비밀번호, 제목, 내용 값이 입력되면 등록하기 버튼의 색을 변경해주시고 반대로 값이 입력되지 않았다면 다시 원래 색인 회식으로 되돌리기 freeboard_frontend 게시글 목록 화면을 구현해주세요. 게시글 상세 화면에서 삭제하기 기능을 구현해주세요. 이게 포폴과제인데, section11의 포폴리뷰 영상에는 오직 2번에 대한 내용만 있는듯하고 1,3번에 대한 내용은 아예 빠져있네요. github에 삭제쿼리 한줄조차 없네요. 너무 부실한거 아닌가 싶습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
감정일기장은 아니지만 앞서 연습한 todolist 를 일단 배포해보고싶어서 vercel 에 회원가입을 하고 로그인까지 해놓고 다시 vscode에서 터미널에서 vercel login 을 입력하고 엔터를 치면 아래와 같이 에러메시지가 떠서 더이상의 진행을 못했는데요, 혹시 다른 뭔가를 더 해야 하는건지요 F:\★수업★\WEB수업\웹퍼블리싱\11-Front-End\React\react-study\6-todolist>vercel login 'vercel'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
TodoServiceImpl에서 PageResponseDTO<TodoDTO> getList 부분에서 오류가 발생합니다. PageResponseDTO 혹시 PageResponseDTO 에서 제가 놓친 부분이 있을까요??
해결됨
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요 강사님 강의에서 react는 대부분 함수로 선언하지 않고, 화살표 함수를 선언해서 사용해주고 계시는데요, 함수가 아닌 화살표 함수를 사용하는 이유가 따로 있는지 궁금합니다. 함수를 사용하지 않는 이유가 있다면 그 이유도 설명해주시면 감사하겠습니다.
미해결
습관부터 바꿔주는 React 기초
섹션 0 의 강의소개 첫번째 1분미만 컨텐츠가 완료가 안됩니다.
해결됨
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
질문을 온전히 이해할 수 있도록, 모든 맥락을 전달해주세요. 질문은 질문자가 번거로워야 보다 좋은 답변을 얻으실 수 있습니다. 시행착오를 알려주시면 곧바로 원하는 문제에 집중할 수 있습니다. 오류 메시지는 일부만 알려주시기보다 전체 오류 메시지를 캡처해서 주시면, 오류 파악에 도움이 됩니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-) 인프런 서비스 운영 관련다문의는 1:1 문의하기를 이용해주세요. 강의를 쭉 따라가면서 실습 중입니다. 강의 자료를 그대로 복사 붙여넣기 하였는데, reviews/new reviews/<pk>/ reviews/<pk>/edit 는 정상 작동하나 reviews/ 의 경우, localhost:8000/accounts/login/?next=/blog/reviews/ 로 redirect 되고 accounts/login이 정의되지 않아 404 not found 에러가 발생합니다 강의 순서 상 profile edit만 accounts app에 구현되어 있는 상황입니다. 하기와 같이 잘 복사해서 사용하였는데 왜 이런 오류가 발생할까요? # views.py review_list = ListView.as_view( model=Review, ) # urls.py path("reviews/", views.review_list, name="review_list"),
