묻고 답해요
141만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
playground에서 이상한 하얀색 코드가 생기고 안 없어 집니다
playground에서 입력한 곳에 이상한 하얀색 코드를 없애는 법 좀 알려주세요
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
Vite 에서 리액트 앱 생성시 Select a variant: 타입스크립트 선택
안녕하세요 선생님강의 잘 보고 있습니다. 다름이 아니라, 리액트 앱 생성시Vite에서 프레임 워크: React 생성후자바스크립트가 아닌 타입스크립트로 생성해도 강의를 수강하는데는 문제가 없는지 알고 싶습니다..!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
회원가입 과제입니다!
안녕하세요 디자인 전공생입니다! 웹디자인 배우면서 html은 맛보기로 공부했었는데, 강의 듣고 깔끔하게 다시 한번 정리할 수 있어 좋았습니다. 혹시라도 코드에 보완할점이 있을까 싶어 올립니다!!그리고 checkbox와 radio button에서 색이랑 테두리 등의 속성을 변경하고 싶을땐 어떻게 해야하는지 궁금합니다!<!DOCTYPE html> <html lang="ko"> <head> <title>과제</title> <style> .page{ width: 1920px; height: 1080px; display: flex; align-items: center; padding: 60px 625px 60px 625px; } .pb{ width: 670px; height: 960px; border-radius: 20px; border: 1px solid #AACDFF; background-color: #FFF; box-shadow: 7px 7px 39px 0px rgba(0, 104, 255, 0.25); display: flex; flex-direction: column; justify-content: space-evenly; padding: 72px 100px 70px 100px; } h1{ color: #0068FF; font-size: 32px; font-style: normal; font-weight: 700; line-height: normal; } .name{ color: #797979; font-family: "Noto Sans CJK KR"; font-size: 16px; font-style: normal; font-weight: 400; line-height: normal; } .gender{ text-align: center; } .agree{ text-align: center; font-size: 14px; border: 0; border-bottom: 1px solid #E6E6E6; padding: 0 0 24px 0; } button{ color: #0068FF; text-align: center; font-size: 18px; height: 75px; border-radius: 10px; border: 1px solid #0068FF; background: #FFF; } input{ border: 0; font-size: 30px; padding: 0 0 12px 0; border-bottom: 1px solid #CFCFCF; } </style> </head> <body> <div class="page"> <div class="pb"> <h1>회원 가입을 위해<br> 정보를 입력해주세요</h1> <br><br> <div class="name">* 이메일</div><br> <input type="text"><br> <div class="name">* 이름</div><br> <input type="text"><br> <div class="name">* 비밀번호</div><br> <input type="password"><br> <div class="name">* 비밀번호 확인</div><br> <input type="password"><br> <div class="gender"> <input type="radio" name="gender">여성 <input type="radio" name="gender">남성 </div> <br><br> <div class="agree"> <input type="checkbox"> 이용약관 개인정보 수집 및 이용, 마케팅 활용 선택에 모두 동의합니다.<br> </div> <button>가입하기</button> </div> </div> </div> </body> </html>
-
미해결Slack 클론 코딩[실시간 채팅 with React]
npm run dev 시 빌드가 매우 느려졌습니다
안녕하세요 제로초님점점 npm run dev 할 떄마다 빌드 속도가 엄청 느려지는 것 같아서요아래 단계에서만 한 5분 있어야 success 뜨더라구요구글링, 지피티로도 알아보았지만 해결되지 않아 질문 드립니다단서 될만할지는 모르겠지만 제 윈도우 pc 사양이랑 설치된 패키지 내역입니다// package.json { "name": "sleact-ts-front", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "dev": "webpack serve --env development", "build": "cross-env NODE_ENV=production webpack" }, "author": "ZeroCho", "license": "MIT", "dependencies": { "@emotion/react": "^11.13.0", "@emotion/styled": "^11.13.0", "@loadable/component": "^5.16.4", "@mui/icons-material": "^5.16.5", "@mui/material": "^5.16.5", "@types/gravatar": "^1.8.6", "@types/react": "^18.2.42", "@types/react-dom": "^18.3.0", "autosize": "^6.0.1", "axios": "^0.26.1", "core-js": "^3.15.1", "cross-env": "^7.0.3", "gravatar": "^1.8.2", "react": "^18.2.0", "react-dom": "^18.2.0", "react-router": "^6.25.1", "react-router-dom": "^6.25.1", "socket.io-client": "^2.5.0", "swr": "^2.2.5", "typescript": "^4.4.2" }, "devDependencies": { "@babel/core": "^7.13.8", "@babel/preset-env": "^7.13.8", "@babel/preset-react": "^7.12.13", "@babel/preset-typescript": "^7.13.0", "@pmmmwh/react-refresh-webpack-plugin": "^0.5.0-rc.0", "@types/autosize": "^4.0.3", "@types/fork-ts-checker-webpack-plugin": "^0.4.5", "@types/loadable__component": "^5.13.9", "@types/node": "^16.11.26", "@types/react-router-dom": "^5.3.3", "@types/socket.io-client": "^1.4.35", "@types/webpack": "^5.28.0", "@types/webpack-dev-server": "^4.0.3", "autoprefixer": "^10.4.19", "babel-loader": "^8.2.2", "css-loader": "^6.2.0", "eslint": "^8.13.0", "eslint-config-prettier": "^8.1.0", "eslint-config-react-app": "^7.0.1", "eslint-plugin-flowtype": "^8.0.3", "eslint-plugin-import": "^2.29.1", "eslint-plugin-jsx-a11y": "^6.9.0", "eslint-plugin-prettier": "^4.2.1", "eslint-plugin-react": "^7.35.0", "fork-ts-checker-webpack-plugin": "^7.2.3", "postcss": "^8.4.39", "postcss-loader": "^8.1.1", "prettier": "^2.2.1", "react-refresh": "^0.12.0", "sass": "^1.77.8", "sass-loader": "^15.0.0", "style-loader": "^3.2.1", "tailwindcss": "^3.4.4", "ts-node": "^10.0.0", "webpack": "^5.24.2", "webpack-cli": "^4.5.0", "webpack-dev-server": "^4.0.0" } }
-
미해결Next + React Query로 SNS 서비스 만들기
NextAuth를 활용한 소셜 로그인 시 authorization code 발급 방법
안녕하세요 강의 수강 후에 자체 프로젝트를 진행하고 있는데 소셜 로그인 처리 중 궁금한 점이 있어 질문 드립니다.기존에는 Google, Naver, Kakao, Facebook 등 5가지 소셜 로그인을 각각 OAuth 리디렉션 방식으로 구현했으나, 이번에는 NextAuth를 활용하여 간편하게 통합적으로 구현하려고 합니다.소셜 로그인은 authorization code 발급용으로만 사용하고 실제 access, refresh token 발급은 자체 서버에서 처리를 하려고 합니다. 따라서 인가 과정만 next auth를 활용하고 callbacks 내부에서 인가 코드를 전달하여 access token 발급 과정을 진행하려 했습니다./api/auth/[...nextauth]/route.ts const authOptions = { // Configure one or more authentication providers providers: [ GoogleProvider({ clientId: process.env.GOOGLE_ID ?? "", clientSecret: process.env.GOOGLE_SECRET ?? "", }), ], callbacks: { async signIn({ account, profile }: any) { if (account.provider === "google") { const response = await fetch( `${process.env.GATEWAY_SERVER_URL}/auth/v1`, { method: "POST", headers: { "Content-Type": "application/json", devicetype: "1", }, body: JSON.stringify({ sns_type: "GOOGLE", key: 인가코드, }), } ); } return true; // Do different verification for other providers that don't have `email_verified` }, }, }; const handler = NextAuth(authOptions); export { handler as GET, handler as POST };하지만 알아본 결과 NextAuth의 callbacks에서는 access token이 발급되고 authorization code는 받을 수 없게 되어있는 것 같은데 authorization code 발급용으로만 사용하기에는 next auth를 사용하는것이 적합하지 않은 것인지 궁금합니다.또한 authorization code를 받을 수 있는 방법이 있다면 알려주시면 감사하겠습니다!
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
보일러 플레이트
인강듣기전에 학습자료를 보고 먼저 따라했는데요.인강에선 <main> 이부분을 삭제를 안했는데,학습자료에선 main을 다 삭제 했더라구요.이부분에서 학습자료를 참고해도 될까요?아님 다시 복구 해야하나요?이 부분 뿐만아니라 인강에서는 삭제를 안했는데, 학습자료에선 삭제된 부분이 꽤 있어서 걱정이 되어 문의를 드립니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
2.2)단락 평가 11:28 인수 전달 관련하여 질문드립니다.
안녕하세요, 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 : "이정환" 이 저장되어 콘솔창에서 확인 가능한 결과가 나온다고 이해하면 될까요? 친절히 설명해주셔서 감사합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(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)
DBeaver는 왜쓰는 건가요?
안녕하세요..!! 제가 백엔드나 db관련해서 지식이 없어서 잘 이해가 안되네요 ㅠdb관리를 supabase 사이트로 들어가서 확인하면 되는데, 왜 클라이언트 툴인 DBeaver를 쓰는건가요?supabase 서버에 접근하지 못하는 클라이언트들이 테스트를 할때 쓰는것일까요?답변 부탁드립니다..
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
svg를 public 말고 src>assets안에 넣는다면 import를 어떻게해야하나요?
현재는 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: () => {}, }, };
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(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의 매개 함수의 리턴값으로 함수를 넣는건데 ..두개의 차이가 뭔지좀 궁금합니다.
-
해결됨[2024] 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
강의 12.13 마지막에 flex 스타일 관련 질문
강의 12.13 마지막에서 메인컨테이너가 화면 끝까지 안내려 오는 문제를 해결하기 위해서 index.css의 body 태그 스타일에 flex 를 주셔서 해결하셨는데요. 그 원리를 조금 더 설명해 주실 수 있나요?flex는 요소들을 한줄에 배치하기 위해서 사용 하는데 여기선 요소가 다음 줄 까지 덮도록 쓰여진것 같아 좀 헷갈립니다.
-
미해결[리액트 1부] 만들고 비교하며 학습하는 리액트 (React)
어떤거를 먼저 들어야 하는지 도와주세요
안녕하세요우아한형제들 프론트엔드 시니어 개발자의 웹 개발 로드맵 결제를 했는데, 리액트1 부터 들어도 될까요? 아니면 어떤 강의부터 들어야 하나요? 추천을 해줄 수 있을까요? 프론트에 대해서 아예 모르는 상태 입니다.
-
미해결파이썬/장고 웹서비스 개발 완벽 가이드 with 리액트 (장고 4.2 기준)
커스텀 모델 생성 시 에러 발생 이유
07-27 관계를 표현하는 모델 필드 - models.ManyToManyField 커스텀 관계 모델로 이전하기 (실습) 2분 18초쯤에 오류 예시를 보여주셨는데 혹시 에러가 나는 이유가 뭔지 알 수 있을까요? 기존 M2M 필드에 through를 바로 추가할 수 없기 때문인가요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
상품 CountISold에 대한 pagination 질문입니다.
FetchBoardsCount는 search를 입력 받아 검색 결과에 대한 개수를 가져오는데FetchUsedItemsISold는 내가 등록한 상품에 대한 전체 개수만 반환하고 있어 검색 결과에 대한 page 개수를 가져오지 못해 pagination에 검색 결과가 1개여도 내가 등록한 상품의 전체 개수를 한 page가 표시 됩니다. 검색 결과에 대한 refetch를 게시글이 없을 때까지 해주고 그걸 토대로 page 구성하기는 아닌 것 같아서API의 search의 Count에 의존 하지 않고 page를 해결할 수 있는 방법이 있을까요?
-
해결됨[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스
23-03-login-check / login-check-success 강의 플레이가 안되네요? 저만 그런가요
23-03-login-check / login-check-success 강의 플레이가 안됩니다. 23-02, 23-04 는 잘나오는데 왜 그럴까요
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
index.tsx 빌드 오류
안녕하세요 강의에 사용된 버전이나 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 필요없는지
next.js를 도입하면 react query가 필요없어서 더 이상 안쓰시는건가요?? fetch를 쓰던 axios를 쓰던 next.js에서 알아서 캐시를 남겨주는건가요?? 아니면 fetch를 써야만 알아서 해주나요??
-
미해결코드로 배우는 React with 스프링부트 API서버
섹션1의 첫번째강의에서 WebStorm으로 프로젝트 진행할때의 질문
WebStorm으로 작업하신다고 하시고 프로젝트 처음에 불러오는 과정이 안나와서 짐작으로 frontend/ch02_start폴더를 만들고 cmd콘솔에서 npm install react-router-dom진행했거든요. 근데 강사님이 실습하는 폴더구조가 다르거든요? 이 과정이 생략되어있어서.. src폴더, public폴더가 자동으로 안생기는데 임의로 src폴더 만들고 그냥 하는건가요? 중간 과정 생략된걸 짐작으로 따라하려다보니 확신이 안들어서 여쭤봅니다
-
해결됨실무에 바로 적용하는 스토리북과 UI 테스트
tailwind css 코드 스플릿팅이 가능한가요?
tailwind를 실제로 product에 적용해본 경험이 없어서 질문드립니다. 공통된 스타일은 global.css로그인 페이지 스타일은 login.css 회원가입 페이지를 스타일을 signup.css로@layout components를 나눠서 작성했을때 코드 스플릿팅이 되나요?제대로 테스트를 못해봤지만 login.css 작성한 @layout components 클래스를 signup에서 쓰려면 써지는것 같더라구요 안썻을때 빌드시 코드 스플릿이 되는지 궁금합니다.jit 모드 라는게 있던데 프로젝트가 엄청 커졌을때 해당 기능으로 페이지 별로 어느정도 최적화가 되는지 궁금합니다.
