173만명의 커뮤니티!! 함께 토론해봐요.
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
인강듣기전에 학습자료를 보고 먼저 따라했는데요. 인강에선 <main> 이부분을 삭제를 안했는데, 학습자료에선 main을 다 삭제 했더라구요. 이부분에서 학습자료를 참고해도 될까요? 아님 다시 복구 해야하나요? 이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
안녕하세요, 2.2)단락 평가 11:28 인수 전달 관련하여 질문 드립니다. function printName(person){ const name= person && person.name; // const age = person && person.age; console.log(name || "person의 값이 없습니다.") // console.log(age || "나이를 추정할 수 없습니다.") } printName({name:"이정환"}); 객체 값을 인수로 전달했을 때 name 변수에 인수로 전달받은 객체 값들이 정상적으로 저장되고 콘솔 창을 통해 출력되잖아요. printName함수의 person라는 매개 변수 형식?을 어디에서도 선언, 정의하지 않았는데 객체 타입으로 함수 호출 시 정상 출력되는 점이 혼란스럽습니다. 이전에 학습한 7가지 Truthy 한 값들 중 객체가 속해 있기에 Truthy 가 나오고, 그런 성질을 이용하여 변수에 name : "이정환" 이 저장되어 콘솔창에서 확인 가능한 결과가 나온다고 이해하면 될까요? 친절히 설명해주셔서 감사합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
<div className="todos_wrapper"> {todos.map((todo) => { return <TodoItem {...todo} />; })} </div> 여기서 <TodoItem {...todo} /> <TodoItem todo= {...todo} /> 두개 차이가 뭘까요 >? import React from "react"; import "../TodoItem.css"; const TodoItem = ({ id, isDone, content, date }) => { return ( <div className="TodoItem"> <input checked={isDone} type="checkbox" /> <div>{id}</div> <div>{content}</div> <div>{isDone}</div> <div>{date}</div> </div> ); }; ({ id, isDone, content, date }) 여기 {}에 넣는거랑 {}을 뺴고 넣는거랑 차이가 뭔지 모르겠어요..
해결됨
Supabase, Next 풀 스택 시작하기 (feat. 슈파베이스 OAuth, nextjs 14)
안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠ db관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요? supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요? 답변 부탁드립니다..
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
현재는 public에서 아이콘을 가져오는데 assets에 가져올때는 어떻게 하나요? import type { Meta, StoryObj } from "@storybook/react"; import { IconButton } from "../../components/IconButton"; const meta = { title: "Buttons/IconButton", component: IconButton, parameters: { layout: "centered", }, tags: ["autodocs"], argTypes: { alt: { control: "text", description: "아이콘의 대체 텍스트" }, iconPath: { control: "text", description: "아이콘의 경로", defaultValue: "", }, onClick: { action: "clicked", description: "아이콘 클릭 시 호출되는 함수" }, }, } satisfies Meta<typeof IconButton>; export default meta; type Story = StoryObj<typeof meta>; export const Default: Story = { args: { alt: "아이콘", iconPath: "ic-delete-dark.svg", onClick: () => {}, }, };
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
import React from "react"; const Viewer = ({ count }) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer; 이걸 했을떄 .. import React from "react"; const Viewer = ( count ) => { return ( <div> <div>현재카운트 : </div> <h1>{count}</h1> </div> ); }; export default Viewer; 두개 차이가 멀까요 계속 해깔리는데 이거.. 구조 분해형태인거 까진 알겠는데 부모에서 import logo from "./logo.svg"; import "./App.css"; import Viewer from "./component/Viewer"; import Controller from "./component/Controller"; import { useState } from "react"; function App() { const [count, setCount] = useState(0); const onClickButton = (value) => { setCount(count + value); }; return ( <div className="App"> <h1>Simple Counter</h1> <section> <Viewer count={count} /> </section> <section> <Controller onClickButton={onClickButton} /> </section> </div> ); } export default App; GPT 물어보니 ({ count }) : 이 방식은 구조 분해 할당 을 사용한 것입니다. 함수의 인자로 객체를 받고, 그 객체의 count 라는 속성을 변수로 바로 할당합니다. 예를 들어, Viewer 컴포넌트가 { count: 5 } 라는 객체를 인자로 받으면, count 변수는 바로 5가 됩니다. (count) : 이 방식은 구조 분해 할당을 사용하지 않은 것 입니다. 함수의 인자로 객체를 받고, 그 객체를 count 라는 이름의 변수로 할당합니다. 따라서 count 는 객체가 되며, count 객체의 속성에 접근하려면 count.count 처럼 접근해야 합니다. 이렇게 하면 const [count, setCount] = useState(0); 에서 count는 객체가 아니라 그냥 변수 아닌가요 ??? <button onClick={() => { onClickButton(-1); }} > <button onClick={ onClickButton(-1);} > 이거 2개의 차이가 멀까요 저는 onClick이 함수니까 함수를 전달해줘야 한다고 생각해서 { } 안에 바로 함수를 넣었거던요 ..후자 . 근데 보니까 ()=>{ } 여기다가 함수를 넣는건 onclick의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 12.13 마지막에서 메인컨테이너가 화면 끝까지 안내려 오는 문제를 해결하기 위해서 index.css의 body 태그 스타일에 flex 를 주셔서 해결하셨는데요. 그 원리를 조금 더 설명해 주실 수 있나요? flex는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.
미해결
[React 1부] 만들고 비교하며 학습하는 React
안녕하세요 우아한형제들 프론트엔드 시니어 개발자의 웹 개발 로드맵 결제를 했는데, 리액트1 부터 들어도 될까요? 아니면 어떤 강의부터 들어야 하나요? 추천을 해줄 수 있을까요? 프론트에 대해서 아예 모르는 상태 입니다.
미해결
파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
07-27 관계를 표현하는 모델 필드 - models.ManyToManyField 커스텀 관계 모델로 이전하기 (실습) 2분 18초쯤에 오류 예시를 보여주셨는데 혹시 에러가 나는 이유가 뭔지 알 수 있을까요? 기존 M2M 필드에 through를 바로 추가할 수 없기 때문인가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데 FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서 API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
23-03-login-check / login-check-success 강의 플레이가 안됩니다. 23-02, 23-04 는 잘나오는데 왜 그럴까요
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
안녕하세요 강의에 사용된 버전이나 pnpm을 사용하는 등 다른게 진행한 부분이 있습니다만 빌드할때 에러가 나는데 이해가 안되는 부분이 있어 질문드립니다. pakage.json "name": "@twosday/ui", "description": "Design System for twosday", "private": false, "publishConfig": { "access": "public" }, "files": [ "dist" ], "main": "dist/index.umd.js", "module": "dist/index.es.js", "types": "dist/index.d.ts", "exports": { ".": { "import": "./dist/index.es.js", "require": "./dist/index.umd.js", "types": "./dist/index.d.ts" }, "./styles": { "import": "./dist/styles/index.css" } }, "version": "0.0.1", "type": "module", "license": "MIT", import { defineConfig } from "vite"; import react from "@vitejs/plugin-react"; import { vanillaExtractPlugin } from "@vanilla-extract/vite-plugin"; import svgr from "vite-plugin-svgr"; import path from "path"; import dts from "vite-plugin-dts"; import { viteStaticCopy } from "vite-plugin-static-copy"; // https://vitejs.dev/config/ export default defineConfig({ resolve: { alias: { "@": path.resolve(__dirname, "src"), }, }, plugins: [ react(), vanillaExtractPlugin({ identifiers: ({ hash }) => `css_${hash}`, }), svgr(), dts(), viteStaticCopy({ targets: [{ src: "src/index.css", dest: "" }], }), ], build: { lib: { name: "@twosday/ui", entry: path.resolve(__dirname, "src/index.tsx"), fileName: (format) => `index.${format}.js`, }, rollupOptions: { external: ["react", "react-dom"], output: { globals: { react: "React", "react-dom": "ReactDOM", }, }, }, sourcemap: true, emptyOutDir: true, }, }); grs04@BOOK-NN36R5QM7J MINGW64 ~/Desktop/sideproject/my-story-book (main) $ pnpm build > @twosday/ui@0.0.1 build C:\Users\grs04\Desktop\sideproject\my-story-book > tsc -b && vite build vite v5.3.5 building for production... src/index.tsx:1:38 - error TS6142: Module './component/LoginForm' was resolved to 'C:/Users/grs04/Desktop/sideproject/my-story-book/src/component/LoginForm.tsx', but '--jsx' is not set. 1 export { default as LoginForm } from "./component/LoginForm"; ~~~~~~~~~~~~~~~~~~~~~~~ src/index.tsx:2:35 - error TS6142: Module './component/Button' was resolved to 'C:/Users/grs04/Desktop/sideproject/my-story-book/src/component/Button.tsx', but '--jsx' is not set. 2 export { default as Button } from "./component/Button"; ~~~~~~~~~~~~~~~~~~~~ ✓ 15 modules transformed. [vite:dts] Start generate declaration files... dist/style.css 0.18 kB │ gzip: 0.15 kB dist/index.es.js 22.47 kB │ gzip: 6.77 kB │ map: 67.56 kB [vite:dts] Declaration files built in 589ms. [vite-plugin-static-copy] Copied 1 items. dist/style.css 0.18 kB │ gzip: 0.15 kB dist/index.umd.js 14.88 kB │ gzip: 5.90 kB │ map: 65.89 kB ✓ built in 1.12s vite.config.ts에서 build 에 작성한 부분을 지우고 기본설정으로 하면 잘 되는데 강의처럼 build부분을 작성을 하면 jsx flag를 설정하라고 나오면서 component 폴더에 d.ts 파일들이 생성이 안됩니다.
미해결
따라하며 배우는 리액트 A-Z[19버전 반영]
next.js를 도입하면 react query가 필요없어서 더 이상 안쓰시는건가요?? fetch를 쓰던 axios를 쓰던 next.js에서 알아서 캐시를 남겨주는건가요?? 아니면 fetch를 써야만 알아서 해주나요??
미해결
코드로 배우는 React 19 with 스프링부트 API서버
WebStorm으로 작업하신다고 하시고 프로젝트 처음에 불러오는 과정이 안나와서 짐작으로 frontend/ch02_start폴더를 만들고 cmd콘솔에서 npm install react-router-dom진행했거든요. 근데 강사님이 실습하는 폴더구조가 다르거든요? 이 과정이 생략되어있어서.. src폴더, public폴더가 자동으로 안생기는데 임의로 src폴더 만들고 그냥 하는건가요? 중간 과정 생략된걸 짐작으로 따라하려다보니 확신이 안들어서 여쭤봅니다
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
tailwind를 실제로 product에 적용해본 경험이 없어서 질문드립니다. 공통된 스타일은 global.css 로그인 페이지 스타일은 login.css 회원가입 페이지를 스타일을 signup.css로 @layout components를 나눠서 작성했을때 코드 스플릿팅이 되나요? 제대로 테스트를 못해봤지만 login.css 작성한 @layout components 클래스를 signup에서 쓰려면 써지는것 같더라구요 안썻을때 빌드시 코드 스플릿이 되는지 궁금합니다. jit 모드 라는게 있던데 프로젝트가 엄청 커졌을때 해당 기능으로 페이지 별로 어느정도 최적화가 되는지 궁금합니다.
미해결
코드로 배우는 React 19 with 스프링부트 API서버
서버 쪽 이랑 이름이 다르면 데이터 바인딩이 안되지 않나요?
미해결
React + GPT API로 AI회고록 서비스 개발 (원데이 클래스)
import React from 'react'; import Counter from './components/Counter'; // Counter 컴포넌트의 경로를 정확히 입력 function App() { return ( <> <Counter /> </> ); } export default App; 이런 오류가 뜹니다 버전이 달라서일까요? 노드는 최신버전을 쓰고있습니다.
해결됨
손에 익는 Next.js - 공식 문서 훑어보기
1. 강사님께서 올려주신 답변들을 봤습니다. " 공식 문서에서 클라이언트 컴포넌트를 트리의 끝에 보내라고 권한다. 서버 컴포넌트를 최대한 활용하기 위한 권장 사항이라고 이해하시면 좋다. "이라고 봤는데 프로젝트를 서버 컴포넌트의 비중을 늘린다면 이점은 무엇인가요? 2. 서버 컴포넌트의 비중을 늘리면 번들 크기의 감소로 사용자 경험을 최적화 하는 것이라서 next.js를 사용하는 것인가요?
해결됨
[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
코드상에서 graphQLClient 자동완성 알될때 부터 이상하였지만 import 하는부분 from 에서는 자동완성이 되었습니다. 하지만 위 이미지 처럼 에러가 발생합니다. package.json 은 아래와 같습니다. node_modules 는 아래와 같습니다. 설치됨을 다 확인하였으나 인식을 못하네요. tsconfig.json 에서 "module": "node" 에서 Bundler로 변경하니 해결되었습니다. 이렇게 수정하여도 문제없을까요? 추가로 해당 이슈에 대해 발생 원인을 알 수 있을까요?
해결됨
[React / VanillaJS] UI 요소 직접 만들기 Part 1
빈페이지로 나오는데 왜그런걸까요? https://github.com/fe-ui-study/ui-study
