172만명의 커뮤니티!! 함께 토론해봐요.
미해결
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
freeboard_frontend 이미지 업로드 부분 진행중인데 upload 버튼 클릭해서 이미지를 선택하면 Cannot destructure property 'url' of 'undefined' as it is undefined. 이라는 안내창이 뜨면서 정상적으로 실행이 되지 않습니다.. 원인을 알 수 있을까요? 다른 분 문의 글을 보고 혹시 apollo셋팅 문제인가 싶어 yarn add apollo-upload-client 와 yarn add -D @types/apollo-upload-client 를 추가로 설치 해봤는데도 문제 해결이 안됩니다..
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
위 사진과 같이 search에 'Terra'를 검색했는데 "usedItem":null 인 정보까지 받아와지는데 왜 이런가요?
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
안녕하세요 저는 현재 딥러닝 개발자로 일하면서 장고 강의를 듣고 있는 초보 개발자입니다. 보통 딥러닝에서 파이썬 가상환경을 구성할 때 anaconda를 이용합니다. 그런데, 선생님께서는 venv를 사용하여 가상환경을 구성하시더라구요! anaconda 가상환경과 venv가상환경의 차이가 뭔지 궁금합니다ㅎㅎ 웹개발에서 venv 가상환경을 사용하는 이유가 있나요?? 항상 좋은 강의 올려주셔서 감사드립니다:) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
해결됨
React Three fiber(R3F)로 배우는 인터렉티브 3D 웹 개발
혹시 웹에서 원하는 곳에 이미지를 애니메이션으로 보내거나 웹을 구성할때 canvas로는 좌표를 찍어 위치를 조정하기 쉬워보이는데 dom / svg를 활용할땐 웹에 원하는 곳으로 배치하기 위해선 그리드를 활용해야하나요 보통?
미해결
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
🚨 아래의 가이드라인을 꼭 읽고 질문을 올려주시기 바랍니다 🚨 질문 하시기 전에 꼭 확인해주세요 - 질문 전 구글에 먼저 검색해보세요 (답변을 기다리는 시간을 아낄 수 있습니다) - 코드에 오타가 없는지 면밀히 체크해보세요 (Date와 Data를 많이 헷갈리십니다) - 이전에 올린 질문에 달린 답변들에 꼭 반응해주세요 (질문에 대한 답변만 받으시고 쌩 가시면 속상해요 😢) 질문 하실때 꼭 확인하세요 - 제목만 보고도 무슨 문제가 있는지 대충 알 수 있도록 자세한 제목을 정해주세요 (단순 단어 X) - 질문의 배경정보를 제공해주세요 (이 문제가 언제 어떻게 발생했고 어디까지 시도해보셨는지) - 문제를 재현하도록 코드샌드박스나 깃허브 링크로 전달해주세요 (프로젝트 코드에서 문제가 발생할 경우) - 답변이 달렸다면 꼭 확인하고 반응을 남겨주세요 - 강의의 몇 분 몇 초 관련 질문인지 알려주세요! - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. 실행은 되는데 왜이렇게 자꾸 오류가 나는걸까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
브라우저에 내용은 모두 잘 입력이 되고 console창에서도 _id가 잘 나왔는데 graphql로 넘어가서 등록된 부분을 확인하려 하니 등록된 게시물이 없다고 나옵니다. 어떤 부분이 문제인걸까요?
해결됨
Next + React Query로 SNS 서비스 만들기
"use client"; 하위의 컴포넌트는 Client로 랜더링 된다고 하신거 같은데, QueryClientProvider가 client에서 랜더링 되는건 아닌가요? 해당 파일을 가보니 'use client'를 사용하고 있어서요. <QueryClientProvider></QueryClientProvider>로 감싸도 그 하위에 컴포넌트들이 SSR가 되는지 궁금합니다. 'use client' import * as React from 'react' import type { QueryClient } from '@tanstack/query-core' export const QueryClientContext = React.createContext<QueryClient | undefined>( undefined, ) export const useQueryClient = (queryClient?: QueryClient) => { const client = React.useContext(QueryClientContext) if (queryClient) { return queryClient } if (!client) { throw new Error('No QueryClient set, use QueryClientProvider to set one') } return client } export type QueryClientProviderProps = { client: QueryClient children?: React.ReactNode } export const QueryClientProvider = ({ client, children, }: QueryClientProviderProps): React.JSX.Element => { React.useEffect(() => { client.mount() return () => { client.unmount() } }, [client]) return ( <QueryClientContext.Provider value={client}> {children} </QueryClientContext.Provider> ) }
해결됨
Next + React Query로 SNS 서비스 만들기
개별적으로 서버를 만들어서 진행중입니다. // 로그인시 서버에서 발급하는 코드 response.cookie('connect.sid', accessToken, { httpOnly: true, sameSite: 'none', secure: false, }); // 프론트에서 아래와 같이 저장 if (res.ok && res.status === 204) { let setCookie = res.headers.get("set-cookie"); if (setCookie) { const parsed = cookie.parse(setCookie); cookies().set("connect.sid", parsed["connect.sid"]); const user = jwtDecode(parsed["connect.sid"]); return { ...user, }; } } // 서버에서 삭제하는 코드 logout(request: any, response: Response) { const { user } = request; response.clearCookie('connect.sid', { httpOnly: true, sameSite: 'none', secure: false, }); ... } 로그인 하면 서버에서 쿠키 설정 -> 프론트에서 저장을 진행한 후, 로그아웃시 위 코드처럼 삭제하도록 하고있습니다. 강의 하단부에 작성해주신것 처럼 아래와 같이 events부분에 작성하였는데 쿠키 삭제가 되지 않습니다 ㅠㅠ events에 넣지 않고 강의 그대로 했을 때는 s%3..으로 바뀌어서 삭제되지 않습니다. events에 넣었을때는 아예 값도 바뀌지 않고 삭제되지 않습니다. 어떤 작업이 필요할까요 ㅠㅠ //auth.ts events: { signOut: async (data) => { const token = cookies().get("connect.sid"); if (!token) return; const res = await logout(token.value); console.log("signOut"); }, }, // logout fetch export const logout = async (token: string) => { const res = await fetch(`${BASE_URL}/logout`, { method: "POST", headers: { Authorization: `Bearer ${token}`, }, credentials: "include", }); return res; };
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
필요한 요소들 다 설치 되어있고, 오타없이 작성했는데도 Unable to find template plugin matching '-typescript' 오류와 함께 types.ts가 생성이 안됩니다. 혹시나해서 >yarn add -D @graphql-codegen/typescript 다시 설치했지만 같은 오류가 뜹니다. >@graphql-codegen/typescript-plugin 도 설치해봤는데 아래와 같은 오류로 설치가 안되네요
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
background-image에 적용하는데 있어서 문의가 있습니다.outerbox.png 이미지 키기는 807px 544px 로 나옵니다.현재 outerbox css class에서 width 888px로 주면서 대략 81px 정도가 이미지가 반복되어서 표시됩니다. 이미지 반복을 없애기 위해서 아래와 같은 css를 추가했는데 이번에는 이미지가 잘려서 보입니다. background-repeat: no-repeat background-size: cover 강사님 처럼 888px 544px div에 다른 이미지를 일치시켜서 표기하려면 어떻게 해야하나요 ?
해결됨
Next + React Query로 SNS 서비스 만들기
안녕하세요~ 직접 만들어보고 비교하려고하는데 의문점이 하나 생겨서요! 서버컴포넌트로 Link를 생성하고 useSelectedLayoutSegment로 active클래스 처리해주려고 합니다! export default function SideBar() { const links = [ { path: "/home", pathName: "Home" }, { path: "/", pathName: "탐색하기" }, { path: "/", pathName: "쪽지" }, { path: "/", pathName: "프로필" }, ]; return ( <div className={classes.nav}> <div>logo</div> <nav> <ul> {links.map((link, idx) => { return ( <li key={`${link}-${idx}`}> <SideLink href={link.path}>{link.pathName}</SideLink> </li> ); })} </ul> </nav> <button className={classes.btn}>게시하기</button> </div> ); } interface SideLinkProps { children: ReactNode; href: string; } export default function SideLink({ children, href }: SideLinkProps) { const segment = useSelectedLayoutSegment(); const isSegment = href.slice(1); return ( <Link href={href} className={segment === isSegment ? classes.active : undefined} > {children} </Link> ); } 근데 랜더링이 Sidebar가 서버에서 초기 랜더링 하고 client에서 class 반영한다 라고 이해하고 있는데용 브라우저에서 "페이지 소스보기"를 했더니 이미 class에 active가 반영된 상태로 랜더링 되어있어요 캐시도 지우고 빌드해서 npm start 해봐도 "/home" path에서 소스보기 했더니 class가 반영된 상태로 서버에서 랜더링 되어옵니다. hook에 의한 할당될 class는 비워진 상태로 html를 생성하고 이후 client에서 hook을 이용한 클래스 부여가 된다고 알고 있었는데 왜 서버에서 세그먼트 훅에 의한 class 처리가 되서 오는건지 궁금합니다! 검색해도 명확한 답이 없어서 질문드려요!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의대로 package.json에 scripts 내 start에 경로 추가 후("node src/index.js) 터미널에 npm run start 입력 시 아래와 같은 error가 발생됩니다. PS C:\Users\HOME\Desktop\oneBite-React\section03> npm run start > section03@1.0.0 start > node src/index.js npm error code ENOENT npm error syscall spawn C:\Program Files\Git\bin\git.exe npm error path C:\Users\HOME\Desktop\oneBite-React\section03 npm error errno -4058 npm error enoent spawn C:\Program Files\Git\bin\git.exe ENOENT npm error enoent This is related to npm not being able to find a file. npm error enoent npm error A complete log of this run can be found in: C:\Users\HOME\AppData\Local\npm-cache\_logs\2024-07-14T05_57_50_914Z-debug-0.log
미해결
실무 중심! FE 입문자를 위한 React
제목 그대로 SurveyPie 기획서 pdf를 어디서 받아야 하는지 모르겠습니다. 처음에 받은 "학습노트_리엑트기초심화.pdf" 파일에서는 디자인 가이드와 코드만 존재합니다. 기획서 어디서 받을 수 있는지 알려주시면 감사하겠습니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요 section08까지 듣고 투두리스트 복습을 하던 중 할일이 한개는 추가가 되는데 그 뒤로는 추가된 할일에 덮어쓰기가 되어 추가가 안되는 문제가 발생하는 문제가 발생하여 어제부터 해결이 안되 질문남깁니다. onCreate함수 내부에 로그를 찍어보면새롭게 저장된 데이터가 아닌 매번 기존에 3개 만들어놓은 mockData가 불러와져서 데이터가 추가되는거 까진 확인하였습니다. 또한 useReducer를 사용하면 강의와 같이 정상적으로 되는데 useState를 이용하면 위와 같은 문제가 발생합니다. 몬가 Context를 사용해서 이런 현상이 발생하는 것으로 추측되는데 어떤 차이 때문에 이런 현상이 발생하는지 궁금합니다. App.jsx import './App.css' import Header from "./component/Header.jsx"; import Editor from "./component/Editor.jsx"; import List from "./component/List.jsx"; import {createContext, useMemo, useRef, useState} from "react"; export const ContextStateData = createContext(); export const ContextDispatchData = createContext(); const mockData = [{ id: 0, isDone: false, content: "Study react", date: new Date().getTime() }, { id: 1, isDone: false, content: "go to bed", date: new Date().getTime() }, { id: 2, isDone: false, content: "play game", date: new Date().getTime() },]; function App() { const [todos, setTodos] = useState(mockData); const idRef = useRef(3); const onCreate = (content) => { const newTodos = { id: idRef.current++, isDone: false, content: content, date: new Date().getTime() } setTodos([newTodos, ...todos]); } const memorizedDispatch = useMemo(() => { return {onCreate} }, []); return (<div className="App"> <Header/> <ContextStateData.Provider value={todos}> <ContextDispatchData.Provider value={memorizedDispatch}> <Editor/> <List/> </ContextDispatchData.Provider> </ContextStateData.Provider> </div>) } export default App 전체 코드 깃허브 주소 https://github.com/ironwhale1014/one-bite-react/tree/main/todo_list_train
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
지금3일차 강의를 듣고 있습니다. 전반적인 내용 설명이 잘 되어 너무 감사합니다. 그런데 제가 프로젝트를 하나 해야 합니다. 3d 모델링 사진을 띄워 주고, 외부에서 json으로 값을 받아 데이터 베이스에 저장합니다. 그리고 저장된 값을 가져와서 계산하고 보여 주는 웹을 만들고 싶습니다. 강의 자료가 너무 많은데 어느 부분을 공부하면 도움이 될까요? 아니면 싶게 만들수 있는 아이디어 부탁을 드립니다. 당신의 파이썬/장고 페이스메이커가 되겠습니다. ;-) 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
미해결
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요 강사님 좋은 강의 잘 듣고 있습니다! 제네릭에 대한 이해를 위해서 따로 문서도 찾아봤는데 궁금증이 해결되지 않아서 질문드립니다. 제네릭 타입을 사용해서 tagList로 넘어온 아이템이 onTagClick으로 전달된다는것을 보증 해준다고 하셨는데, 제네릭의 어떤 기능으로 이것을 보증해주는지 궁금합니다. 그리고 아래처럼 작성한것과 어떤 차이가 있는지 궁금합니다. import { useState } from "react"; import TagButton from "./TagButton"; interface ITagListProps { tagList: string[]; onTagClick: (tag: string) => void; } export default function TagList({ tagList, onTagClick, }: ITagListProps) { const [selectedTag, setSelectedTag] = useState<string>(tagList[0]); return ( <div className="flex gap-x-4" onClick={(event) => { const eventTarget = event.target as HTMLButtonElement; const tag = eventTarget.textContent as string onTagClick(tag) } }> {tagList.map((tag) => ( <TagButton key={tag} isChecked={tag === selectedTag} onClick={() => setSelectedTag(tag)} > {tag} </TagButton> ))} </div> ); }
해결됨
React 기반 Gatsby로 기술 블로그 개발하기 v2
안녕하세요 게시글 렌더링 컴포넌트 구현하기 강의에서 {contentfulPost.slug}.tsx 파일 내에 아래와 같이 graphql을 호출하고 useRenderRichText 훅을 구현시 아래와 같은 에러가 발생합니다. export const query = graphql` query PostPage($slug: String!) { contentfulPost(slug: { eq: $slug }) { title thumbnail { gatsbyImageData(width: 1000) } category date content { raw references { ... on ContentfulAsset { contentful_id title description gatsbyImageData(width: 774) __typename } } } } } `
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
강의 듣고 복습하면서 과제도 푸는 중에 갑자기 인터넷 페이지로 보기 위해 실행을 하니, 500번 오류가 수업(example)랑 과제(practice) 둘다 뜨면서 아무것도 뜨지 않습니다.. import 해오는 부분은 아무 이상이 없고, 과제 같은 경우도 이전에 문제 없었던 페이지에서도 같은 500번 오류가 뜹니다 ㅠ
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
올려주신 코드에서 ManyToMany 관계를 맺기 전에 pk(즉, id) 값이 필요하기 때문에 bulk_create를 수행하고 tag_set.add 매서드를 호출한다고 강의에서 설명해주셨습니다. def create_posts(orig_post_list): """포스팅 생성""" category_dict = {category.name: category for category in Category.objects.all()} tag_dict = {tag.name: tag for tag in Tag.objects.all()} user_list = list(User.objects.all()) post_list = [] for orig_post in orig_post_list: post = Post( category=category_dict[orig_post["category_name"]], author=choice(user_list), title=orig_post["title"], status=choice([Post.Status.DRAFT, Post.Status.PUBLISHED]), content=orig_post["content"], ) post._tag_list = orig_post["tag_list"] post.slugify() post_list.append(post) if post_list: print(f"{len(post_list)} 개의 포스팅 생성") Post.objects.bulk_create(post_list, batch_size=1000) for post in post_list: _tag_list = [tag_dict[tag_name] for tag_name in post._tag_list] post.tag_set.add(*_tag_list) 그러나 해당 코드를 실행 시 여전히 tag_set.add를 위해서는 id가 필요하다고 에러가 발생합니다. 사용 중인 DB는 mysql 이며, 일단 임시 변통으로 bulk_create 전에 id를 직접 할당하여 해결하였습니다. for idx, orig_post in enumerate(orig_post_list): post.id = idx + 1 # id는 0이 될 수 없음 그러나 이는 --clear argument를 주었기 때문에 가능한 행위였습니다. 수정하기 위해서 하기와 같은 방법이 적절할까요? 그리고 왜 제 경우만 에러가 발생하는 걸까요? if post_list: print(f"{len(post_list)} 개의 포스팅 생성") Post.objects.bulk_create(post_list, batch_size=1000) tag_lists = [t for t in orig_post["tag_list"]] post_list = Post.objects.all() # id 로드를 위함 for post, tag_list in zip(post_list, tag_lists): _tag_list = [tag_dict[tag_name] for tag_name in tag_list] post.tag_set.add(*_tag_list)
미해결
Next + React Query로 SNS 서비스 만들기
model 폴더에서 PostImage는 interface를 사용하시고 Post컴포넌트에서는 type을 사용하셨는데 두 개를 다르게 사용하는 강사님만의 기준이 있나요 ? 제가 공부한 바로는 간단한 객체 타입일 경우 둘다 사용해도 상관없다. type은 복잡한 유니언 타입을 지정할때 사용한다 interface는 확장이 필요할 경우 사용한다고
