176만명의 커뮤니티!! 함께 토론해봐요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요 현재 맥북을 사용중이고 강의영상처럼 iTerm으로 명령어를 작성해서 폴더를 만들고 비주얼스튜디오까지 열기부분에서 저는 외장하드를 연결해서 배경화면에 있는 외장하드폴더 안에 짐코딩강의라는 폴더 안에 react-test 라는 폴더를 만들어 사용할려고 하는데 이렇게 되면 명령어를 어떻게 작성하면 되는지 궁금합니다.
미해결
Next.js App router 기반 Chat GPT 만들기
// db/index.ts 코드 내용 import { neon } from '@neondatabase/serverless'; import { drizzle } from 'drizzle-orm/neon-http'; import * as schema from './schema'; const sql = neon(process.env.DATABASE_URL!); const db = drizzle(sql, {schema}); export default db; // action/signup.ts 내용 "use client"; import bcrypt from "bcryptjs"; import { getUserByEmail } from "@/data/user"; import { SignUpSchema } from "@/schemas/auth"; import { user } from "@/db/schema"; import db from "@/db"; import { redirect } from "next/navigation"; export const signUp = async(_:any, formData:FormData) => { //1. 필드 중요성 const validatedFields = SignUpSchema.safeParse({ name: formData.get("name"), email: formData.get("email"), password: formData.get("password") }) if(!validatedFields.success){ return { errorMessages: "잘못된 입력값이 있습니다.", }; } //2. 존재하는 사용자인지 체크 const {email, name, password} = validatedFields.data; //4. 성공 여부 반환 try { const existingUser = await getUserByEmail(email); if(existingUser){ return { errorMessages: "이미 가입된 사용자입니다.", }; } const hasehdPassword = await bcrypt.hash(password, 10); //3. db에 insert await db.insert(user).values({name, email, password: hasehdPassword}); } catch(error) { console.error(error) return {errorMessage: "알 수 없는 오류가 발생했습니다."}; } redirect("/login"); }; 회원가입 마무리 코드를 다 입력하고 저장한 뒤에 사이트를 확인했는데, 이런 오류가 납니다. DATABASE URL이 잘못됐나 싶어서 다시 확인해봤지만 이상이 없었습니다. 이전 강의인 회원가입 유효성 검사 기능 제작까지 문제가 없었는데, 문제 해결이 되지 않아 질문 남겨봅니다....
미해결
Next.js App router 기반 Chat GPT 만들기
제가 수업을 기반으로 작성한 코드는 다음과 같습니다. import { NextResponse } from "next/server"; export async function POST(request: Request, {params}: {params: {testId: string}}){ const userData = await request.json(); console.log("server user data", userData); console.log("server param", params.testId); return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); } "use client"; export default function Page({params} : {params: {id:string}}){ const handlerSubmit = async (e:React.FormEvent) => { const response = await fetch('/api/test/1234', { method: "POST", headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({name: 'test name', email: 'test email'}), }); console.log(e); const data = await response.json(); console.log("response data", data); } return (<>다이나믹 라우트 페이지: {params.id} <button type="submit" onClick={handlerSubmit}> 전송 </button> </>); } 에러 메시지는 다음과 같습니다. ✓ Compiled /dashboard/[id] in 1716ms (597 modules) Error: Route "/dashboard/[id]" used `params.id`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at id (c:\study\chatgpt-clone\next-tutorial\app\dashboard\[id]\page.tsx:21:36) 19 | 20 | > 21 | return (<>다이나믹 라우트 페이지: {params.id} | ^ 22 | <button 23 | type="submit" 24 | onClick={handlerSubmit}> GET /dashboard/12345 200 in 2989ms ✓ Compiled /favicon.ico in 406ms (331 modules) GET /favicon.ico 200 in 543ms ✓ Compiled /api/test/[testId] in 337ms (614 modules) server user data { name: 'test name', email: 'test email' } Error: Route "/api/test/[testId]" used `params.testId`. `params` should be awaited before using its properties. Learn more: https://nextjs.org/docs/messages/sync-dynamic-apis at testId (c:\study\chatgpt-clone\next-tutorial\app\api\test\[testId]\route.ts:6:39) 4 | const userData = await request.json(); 5 | console.log("server user data", userData); > 6 | console.log("server param", params.testId); | ^ 7 | 8 | return NextResponse.json({message: "사용자가 성공적으로 생성되었습니다."}); 9 | } server param 1234 POST /api/test/1234 200 in 1402ms 응답은 잘 되는데, 동기? 비동기? 이쪽부분에서 문제가 있는 것 같습니다.. ㅠㅠ 영상이랑 똑같이 따라한 것 같은데.. 뭐가 문제인건지 감이 안잡히네요 ㅠㅠ (혹시 추가로 필요한 코드가 있다면 말씀해주세요 ㅠㅠ )
미해결
Tailwind CSS 실전 포트폴리오 퍼블리싱
<figcaption class="bottom-[-220px] absolute bottom-0 bg-black/70 text-white p-6 w-full group-hover:bottom-0"> <h3 class="capitalize font-semibold">😍 View detail</h3> <p class="my-4"> Mongolia is the world's largest landlocked country that does not border a closed sea, and much of its area is covered by grassy steppe, with mountains to the north and west and the Gobi Desert to the south. Ulaanbaatar, the capital and largest city, is home to roughly half of the country's population. Mongolia is the world's largest landlocked country that does not border a closed sea, and much of its area is covered by grassy steppe, with mountains to the north and west and the Gobi Desert to the south. Ulaanbaatar, the capital and largest city, is home to roughly half of the country's population. </p> <a class="bg-blue-400 block text-center p-2 rounded-md hover:bg-blue-500" href="#none">Learn More</a> </figcaption> figcaption 태그의 마이너스 마진값이 p 태그 텍스트 길이에 따라 달라지는 부분을 p 태그 컨텐츠의 길이에 상관없에 h3 태그만 hover 상태가 아닐때 보이도록 하는 방법은 없을까요?
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
✅ 모든 질문들은 슬랙 채널에서 답변드리고 있습니다. 💡 ”로펀의 인프런 상담소” 슬랙 채널 가입하기 💡 평일중에는 퇴근 이후(저녁 7시)에 답변을 받아보실 수 있고, 주말중에는 상시 답변드리고 있습니다. 깃허브에 올라온 선생님 코드를 모두 복붙해봐도 없어지지 않는데 무엇이 문제일까요? 선생님 코드와 같은데..
해결됨
[풀스택 완성] Supabase로 웹사이트 3개 클론하기 (Next.js 14)
컴포넌트 클라이언트인 ThemeProvider를 최상위 layout의 children을 감싸면 정적인 서버 컴포넌트를 더 이상 활용할 수 없는 제약이 생기지 않나요?? nextjs에서 지향하는 방법인지 잘 모르겠습니다. 이렇게 사용해도 되는것인가요? 아니면 단순 빠른 예제실습을 위해 그렇게 하신건가요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요! 강의 잘 듣고 있습니다!!! 🙂 React Query 공식 문서에 나오는 페이지네이션 기능에 대해 궁금한 점이 있습니다. 제가 직접 시도해봤는데 어려워서 그런데, 혹시 이 기능을 강의에서 다룰 계획이 있으실까요? 선생님께서 설명을 잘해주셔서 강의가 있다면 정말 좋을 것 같습니다. 감사합니다.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
import Card from "../Card.jsx"; import Courseitem from "./Courseitem.jsx"; function CourseListCard({ items }) { return ( <Card title={"강의 목록"}> <div className="courses"> {items.map((item) => { return <Courseitem {...item} />; })} </div> </Card> ); } export default CourseListCard; 강사님과 동일한 코드를 작성했는데도 저는 렌더링이 되지 않습니다 ㅠㅠ
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
export default function FormComponent() { return ( <form onSubmit={handleSubmit}> <input name="first" type="text" value="첫번째" /> <input name="second" type="text" value="두번째" /> <button type="submit">Submit 버튼</button> </form> ); } 위와 같이 input 에 value props 를 설정하면 왜 타이핑이 안되는지 이해가 잘 안됩니다. 순수 HTML 에서는 input 요소의 value 속성은 초기값이고 변화된 현재값은 DOM 의 value 프로퍼티를 통해 가져올 수 있다고 알고있는데 React 에서는 뭐가 달라지길래 value props 를 설정만 하더라도 input 에 입력값이 변화되지 않는 것인지 알고 싶어요!
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
수업내용이 있는 깃주소를 알 수 있을까요? 노션에 찾아봤는데 없는것 같아서요.
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
function HeartIconBtn({ isFavorite = false }) { return ( <button style={{ backgroundColor: 'white', border: 'none', }} > {isFavorite ? ( <img style={{ width: '32px', color: 'red' }} src="/images/heart-fill-icon.svg" alt="" /> ) : ( <img style={{ width: '32px', color: 'red' }} src="/images/heart-icon.svg" alt="" /> )} </button> ); } function LinkIconBtn({ link }) { return ( <> {link ? ( <a href={link} target="_blank"> <img style={{ width: '36px' }} src="/images/link-icon.svg" alt="lecture link" /> </a> ) : null} </> ); } export default function CourseItem({ image, title, description, isFavorite, link, }) { return ( <> <div style={{ display: 'flex', gap: '30px', justifyContent: 'center', alignItems: 'center', }} > <img style={{ width: '20%', borderRadius: '10px' }} src={image} alt={description} /> <div style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center', width: '80%', gap: '10px', }} > <p style={{ fontSize: '16px', fontWeight: 'bold', color: 'black' }}> {title} </p> <p style={{ fontSize: '16px', fontWeight: 'bold', color: 'gray' }}> {description} </p> </div> <div style={{ display: 'flex', gap: '10px' }}> <LinkIconBtn link={link} /> <HeartIconBtn isFavorite={isFavorite} /> </div> </div> </> ); } CourseItem 컴포넌트에서 LinkIconBtn 을 포함하고 있습니다. LinkIconBtn 컴포넌트에서 function LinkIconBtn({ link }) { return ( <> {link ? ( <a href={link} target="_blank"> <img style={{ width: '36px' }} src="/images/link-icon.svg" alt="lecture link" /> </a> ) : null} </> ); } 위 처럼 Fragment 를 사용하거나 <div></div> 를 사용해서 wrapping 을 하지 않으니깐 아래 처럼 오류가 발생하는데 이유를 정확하게 모르겠습니다...
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요~! 지금까지 수업 진도 잘 따라갔는데 [수정] 린캔버스 수정1만 자막이 없네요 ㅠㅠ 자막 언제 나올까요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
'react/self-closing-comp': 'warn' 해당 문구를 추가했음에도 동작하지 않습니다. 재부팅도 해보았습니다만 동작하지 않습니다. 제가 잘못한 것이 있을까요?
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
컬러 및 배경, 보더 처리 00:43 여기보면 tail 만 쳐도 emmit 이라고 해야 되나요. 팝업도움말이 뜨는데 저는 저런게 전혀 뜨지 않는데요. 어떻게 해야 저런 도움말 팝업이 뜰 수 있나요? tailwind css intellisense 플러그인은 설치해놓은 상태입니다.
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
[tailwind.config.js] /** @type {import('tailwindcss').Config} */ module.exports = { content: ['./src/**/*.{html,js}'], darkMode: 'selector', }; [practice-test.html] <!DOCTYPE html> <html lang="ko"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Tailwind CSS</title> <script src="https://cdn.tailwindcss.com"></script> </head> <body class="bg-white dark:bg-gray-900 dark:text-white"> <main class="container max-w-5xl mx-auto min-h-screen flex items-center justify-center" > <div class="flex flex-col items-center"> <h1 class="font-extrabold text-3xl">Tailwind CSS 다크모드</h1> <p class="mt-4">이 페이지는 다크 모드를 지원합니다.</p> <button id="darkmode_btn" class="bg-blue-500 px-4 py-2 rounded-md text-white mt-4" > 다크 모드 전환 </button> <div class="px-10 py-6 bg-white rounded-md shadow-md mt-20 dark:bg-gray-800" > <p>이 박스는 다크 모드에서 배경이 어두운 색으로 변합니다.</p> </div> </div> </main> <script> document.querySelector('#darkmode_btn').addEventListener('click', () => { document.documentElement.classList.toggle('dark'); }); </script> </body> </html> tailwind.config.js 의 경로는 아래 스크린샷으로 첨부하였습니다. 제가 무슨 설정을 빠트린건지 명확히는 모르겠는데 <head> 태그 내부에 <script> 태그로 아래와 같이 설정하면 버튼을 클릭했을 때 다크모드와 원래 상태로 정상적으로 토글이 되는데 tailwind.config.js 로 설정만 하면 토글이 안되네요 모든 페이지에 다크모드를 설정하기 위해서는 tailwind.config.js 를 통해서 다크 모드 활성화를 하는 것이 좋을 것 같아서 질문 남깁니다! 좋은 강의 감사드립니다. tailwind.config = { // darkMode: 'media', // 운영 체제의 모드에 맞게 설정 darkMode: 'selector', // 수동으로 설정 };
미해결
Tailwind CSS 실전 포트폴리오 퍼블리싱
선생님께서, 테일윈드 @layer utilities를 언제 활용하시는지 궁금합니다! 영상을 보며 조금은 짐작이 가는 듯 하지만, 명확하지 않아 선생님의 답변을 구하고 싶습니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
react-toastify를 사용하시는 경우 storybook에서 출력하는데 곤란함을 겪는 분들이 계실 거 같아 자문자답 올려둡니다! package.json "react-toastify": "^10.0.4" "@types/react": "^18.3.12", "@storybook/react": "^8.3.0", .storybook/preview.tsx ( ts가 아닌 tsx ) 17버전 이상이라 import React from 'react'가 안되서 아래와 같이 @jsxImportSource 추가 /** @jsxImportSource react */ import type { Preview } from '@storybook/react'; // react-toastify 관련 import import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; Modal.setAppElement('#storybook-root'); const preview: Preview = { parameters: { actions: { argTypesRegex: '^on[A-Z].*' }, controls: { matchers: { color: /(background|color)$/i, date: /Date$/i, }, }, }, decorators: [ Story => ( <> <Story /> <ToastContainer position="bottom-right" autoClose={3000} hideProgressBar={false} newestOnTop={false} closeOnClick rtl={false} pauseOnFocusLoss draggable pauseOnHover theme="light" /> </> ), ], }; export default preview; tsconfig.json { "compilerOptions": { "jsx": "react-jsx", } }
미해결
TailwindCSS 완벽 마스터: 포트폴리오부터 어드민까지!
수강평 적었는데 쿠폰이 안들어와서 문의 드려요!
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
npm install 설치한 뒤 개발 서버 키기 위해서 npm run dev 입력했는데 이런 에러가 뜹니다. 인터넷 찾아 본 결과 npm install watchman 이거 해줘야 에러 안 나는 거 알고 있지만, 번번이 프로젝트 생성할 때마다 이런 에러가 꼭 뜹니다. 혹시 해결 방법이 있을까요?
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
assets에 있는 파일이 번들링이 된다면 assets에 이미지같은것들을 넣으면 될까요??? public에있는 파일들은 '최종번들에 복사되어진다'고 하셨는데 이말이 무슨뜻인지 잘이해가 안가서그러는데 부가설명해주시면 감사하겠습니다.
