173만명의 커뮤니티!! 함께 토론해봐요.
미해결
Next + React Query로 SNS 서비스 만들기
프라이빗 컴포넌트로 잡은 것과 그냥 컴포넌트로 잡은 것의 차이가 없지 않나요? 컴포넌트를 예로 강의를 찍어 주셨는데 폴더만 더 늘어나고 좋은 예는 아닌듯합니다. 프라이빗 폴더가 어떨 때 왜 필요한지를 알려주는게 더 교육적일 것 같아 글 남깁니다. 컴포넌트 자체가 재사용성을 갖는 것이기에 내부 구성요소만 표기하는 프라이빗은 큰 의미가 없을 것 가은데요. 컴포넌트 외 폴더라고 해도 와닿지는 않습니다. 어차피 컴포넌트로 사용하면 uri 에도 잡히지 않고 말이죠. 전체적으로 폴더 구조만 더 복잡해지는 것 같아요
미해결
React Native with Expo: 제로초에게 제대로 배우기
처음에 제로초님 따라한다고 pnpm build --platform android --profile development 로 한 번 실행을 했습니다. 이 때 go 를 설치하라는 말이 안나와서 '뭔가 이상하다' 했는데요. 이후에는 pnpm run android 로 켜면 development 로 켜집니다. 신기한 건 s 를 누르면 expo go 모드로는 잘 넘어가요. 그런데 Expo Go 앱이 보이지 않아 빌드를 선택해볼 수 가 없습니다. .
미해결
코드로 배우는 React 19 with 스프링부트 API서버
안녕하세요, 강의 잘 수강하고 있습니다 다만 강의랑 자료랑 달라서 물어보고 싶어서 글을 남깁니다. 1. ch3 압축파일에 강의와는 다르게 압축파일에는 search 클래스가 없습니다. ch4 알집파일 todo.d.ts파일에 아래와 같이 writer를 추가하는 게 맞는 건지 궁금합니다. interface TodoModify { tno: number, title: string, writer: string dueDate: string | null, complete: boolean }
미해결
Next + React Query로 SNS 서비스 만들기
안녕하세요~ 강의 잘 보고 있습니다! vanilla-extract 적용해보려고 하는데 패키지 설치하고 config설정까지 했는데 해당 에러가 나서 질문드립니다. next.config.ts파일과 globalTheme.css.ts, layout.ts중에 문제가 있을까요?? 파일 이름도 문제가 없고 코드 그대로 사용했는데도 해당 에러가 나서 next15에서 vanilla-extract 적용을 할 수 없는건지 궁금해서 여쭤봅니다.. 감사합니다 // package.json // next.config.ts import type { NextConfig } from "next"; const { createVanillaExtractPlugin // eslint-disable-next-line @typescript-eslint/no-require-imports } = require('@vanilla-extract/next-plugin'); const withVanillaExtract = createVanillaExtractPlugin(); const nextConfig: NextConfig = { /* config options here */ experimental: { serverActions: { bodySizeLimit: '10mb', // Set the body size limit for server actions } }, async rewrites() { return [ { source: '/upload/:slug', destination: `${process.env.NEXT_PUBLIC_BASE_URL}/upload/:slug`, // Matched parameters can be used in the destination }, ] }, }; module.exports = withVanillaExtract(nextConfig); // globalTheme.css.ts import {assignVars, createGlobalTheme, createGlobalThemeContract, globalStyle} from "@vanilla-extract/css"; export const global = createGlobalThemeContract({ background: { color: 'bg-color' }, foreground: { color: 'fg-color' }, }) const whiteGlobalTheme = { background: { color: 'rgb(255, 255, 255)' }, foreground: { color: 'rgb(0, 0, 0)' }, } const darkGlobalTheme = { background: { color: 'rgb(0, 0, 0)' }, foreground: { color: 'rgb(255, 255, 255)' }, } createGlobalTheme(':root', global, whiteGlobalTheme); // 실제 적용 globalStyle(':root', { '@media': { '(prefers-color-scheme: dark)': { vars: assignVars(global, darkGlobalTheme), } } }) globalStyle('*', { boxSizing: 'border-box', padding: 0, margin: 0, }) globalStyle('html', { '@media': { '(prefers-color-scheme: dark)': { colorScheme: 'dark', } } }); globalStyle('html, body', { maxWidth: '100dvw', overflowX: 'hidden', }) globalStyle('body', { color: global.foreground.color }) globalStyle('a', { color: 'inherit', textDecoration: 'none', }) // layout.tsx import type {Metadata} from 'next' import {Inter} from 'next/font/google' import './globalTheme.css'; import {MSWProvider} from "@/app/_component/MSWComponent"; import AuthSession from "@/app/_component/AuthSession"; if (process.env.NEXT_RUNTIME === 'nodejs' && process.env.NODE_ENV !== 'production' && process.env.MSW_ENABLED !== 'false') { const {server} = require('@/mocks/http') server.listen() } const inter = Inter({subsets: ['latin']}) export const metadata: Metadata = { title: 'Create Next App', description: 'Generated by create next app', } type Props = { children: React.ReactNode, }; export default function RootLayout({children}: Props) { return ( <html lang="en"> <body className={inter.className}> <MSWProvider> <AuthSession> {children} </AuthSession> </MSWProvider> </body> </html> ) }
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
커밋을 하고 나서 sure all&commit changes를 누르면 저렇게 화면이 분활되고 아무것도 작성이 안되는 상태가 되는데 어떤 이유인지 잘 모르겠습니다...
미해결
Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)
강의 영상에서 getPostMetadata 메서드 내부에서 getCoverImage 메서드를 선언하여 커버 이미지를 다루고 있는데, 저는 이 함수가 내부에 선언된 이유를 두 가지로 이해했습니다. 캡슐화 및 스코프 제한 : 외부에서 사용할 필요가 없는 함수이므로 내부에 선언해 함수의 범위를 명확히 제한 가독성 향상 : 커버 처리 로직을 분리하여 주 함수의 가독성을 개선 그런데 영상을 보면서 든 궁금증이 한 가지 있습니다. 현재 코드에서는 getCoverImage 에 page.cover 를 매개변수로 전달하고 있는데, getPostMetadata 내부에서만 사용되는 함수라면, 클로저를 이용해 page 에 직접 접근하는 방식이 더 자연스럽지 않나요? function getPostMetadata(page: PageObjectResponse): Post { const getCoverImage = () => { if (!page.cover) return ''; switch (page.cover.type) { case 'external': return page.cover.external.url; case 'file': return page.cover.file.url; default: return ''; } }; return { coverImage: getCoverImage(), // ... }; } 이렇게 하면 page.cover 를 매개변수로 전달하지 않아도 되어 더 간결하고, 함수 내부에서도 page 에 자유롭게 접근하여 처리할 수 있다고 생각합니다. 물론 정답은 없겠지만 클로저를 활용하여 외부 스코프에 직접 접근하는 방식 명확하게 매개변수를 전달하여 의도를 분리하는 방식 이 두 가지 방식 중 위 상황에서는 어떤 방식이 더 바람직한지, 혹은 상황에 따라 어떤 기준으로 선택해야 하는지 궁금합니다!
해결됨
한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지
package.json 파일에 맨밑 "type": "module" 를 삽입하고 npm run start 를 하면 강의에는 esm과 js모듈을 같이 사용할 수 없기 때문에 오류난다 하셨는데 정상적으로 작동하는 현상이 발생합니다
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
인텔레리제이 세팅환경도 알려주세요
미해결
React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지
안녕하세요. 린캔버스 수정 수업 관련해서 질문이 있어서 문의 드립니다. const handleCanvasChange = async updatedCanvas => { try { await updateCanvas(id, updatedCanvas); setCanvas(updatedCanvas); } catch (err) { alert(err.message); } }; addNote, deleteNote, updateNote 등의 이벤트가 발생할 경우 setCanvas를 통해 useState에 선언된 canvas 값을 바꾸는데 그렇게 되면 CanvasDetail과 그 하위에 선언된 자식 컴포넌트들이 전부 리랜더링되는 것 같은데 강의에서는 그렇게 보이지 않아서 문의 드립니다. const [canvas, setCanvas] = useState(); canvas가 setCanvas 메서드를 통해서 상태가 변하면 리랜더링 되면서 하위 컴포넌트인 Note의 isEditing 값이 다시 false로 초기화되는데 강의에서는 여전히 true값이 남아있는 것 같습니다. 전체적인 코드를 동일하게 작성한 것 같은데 차이점이 발생하는 이유가 무엇일까요?
미해결
React Native with Expo: 제로초에게 제대로 배우기
FlatList로 게시글 작성 모달 강의의 시작과 같은 코드를 어디서 받을 수 있나요? 스크롤해서 보이는 링크에는 완성된 전체 코드만 있어서요. 일일이 지우고 따라치려해도 나머지 부분이 완성되어 있어서 애뮬레이터에서 진행상황을 볼 수가 없어요...
미해결
코드로 배우는 React 19 with 스프링부트 API서버
TodoServiceImpl.java 작성중에 중간에 소스가 갑자기 바뀌었는데요. 그리고 아래와 같이 작성하셔서 따라 작성하였는데요. PageResponseDTO<TodoDto> responseDTO = PageResponseDTO.<TodoDto>withAll() .dtoList(dtoList) .pageRequestDTO(pageRequestDTO) .totalCount(result.getTotalElements()) .build(); 뭘 놓친건지... 위와 같이 에러 나서 진행이 안돼요. 카페 들어가서 해당 강의 소스도 찾아봤는데 수업하신 내용이랑 조금 다르게 되어있긴 하지만 사용법에는 큰 차이는 없어 보이거든요 ㅠ lombok도 많이 안써봐서... 잘 모르겠어요..
미해결
Next.js 15로 완성하는 실전 YouTube 클론 개발
아래와 같은 에러 발생한다면 drizzle-orm 를 최신버전으로 업데이트 하시면 해결됩니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
중급편 homework 과제를 하는데 저번에 할때는과제1피그마, 과제2피그마,,,,, 이렇게있었던것같은데 지금은 안보여서 질문드립니다. 과제숫자별로 노션만 보면 어떤 페이지를 만들어야 하는지 도통 감이 오지 않습니다....
해결됨
Next.js 15로 완성하는 실전 YouTube 클론 개발
프로젝트 하나 남기고 싶어서 강의는 구매했는데 React를 잘 몰라서 공부를 하고 난 뒤 강의를 수강하려고 합니다. 강의 설명에 언급된 React, javascript 외 추가적으로 더 알아야하는 사전 지식이 있을까요?
미해결
처음 만난 리액트(React)
안녕하세요 vscode에서 안드로이드 에뮬레이터를 사용해서 켰는데 이렇게 뜨는데 무슨 오류일까요 ㅠㅠ 계속 안 고쳐지네요ㅠ ㅠ
미해결
제로베이스부터 배우는 웹개발의 개념과 바이브 코딩
승인된 리디렉션 URI에서 왜 3가지 https를 등록해 주는것인지 궁금합니다!
미해결
웹 게임을 만들며 배우는 React
package.json { "name": "tic-tac-toe", "version": "1.0.0", "main": "index.js", "scripts": { "dev": "webpack serve --env development" }, "author": "heewon", "license": "ISC", "description": "", "dependencies": { "react": "^19.1.0", "react-dom": "^19.1.0" }, "devDependencies": { "@babel/core": "^7.27.3", "@babel/preset-env": "^7.27.2", "@babel/preset-react": "^7.27.1", "@pmmmwh/react-refresh-webpack-plugin": "^0.6.0", "babel-loader": "^10.0.0", "react-refresh": "^0.17.0", "webpack": "^5.99.9", "webpack-cli": "^6.0.1", "webpack-dev-server": "^5.2.1" } } webpack.config.js const path = require('path'); const ReactRefreshWebpackPlugin = require('@pmmmwh/react-refresh-webpack-plugin'); module.exports = { name: 'tictactoe-dev', mode: 'development', devtool: 'inline-source-map', resolve: { extensions: ['.js', '.jsx'], }, entry: { app: './client', }, module: { rules: [{ test: /\.jsx?$/, loader: 'babel-loader', options: { presets: [ ['@babel/preset-env', { targets: {browsers: ['last 2 chrome versions']}, debug: true, }], '@babel/preset-react', ], plugins: ["react-refresh/babel"] }, exclude: path.join(__dirname, 'node_modules'), }], }, plugins: [ new ReactRefreshWebpackPlugin(), ], output: { path: path.join(__dirname, 'dist'), filename: '[name].js', publicPath: '/dist', }, devServer: { devMiddleware: { publicPath: '/dist' }, static: { directory: path.resolve(__dirname) }, hot: true } }; client.jsx const React = require('react'); import { createRoot } from 'react-dom/client'; import TicTacToe from './TicTacToe'; createRoot(document.querySelector('#root')).render(<TicTacToe />); npm run dev 실행 시 tic-tac-toe % npm run dev > tic-tac-toe@1.0.0 dev > webpack serve --env development 까지만 터미널에 출력되고, 서버가 켜지지 않습니다. npm 다시 설치도 해봤는데, 여전히 문제가 동일합니다. 다른 디렉터리에 해둔 강의들은 서버가 잘 출력되는데, 뭐가 문제인지 잘 모르겠습니다 ㅠㅠ 더 필요한 파일이 있다면 올리도록 하겠습니다.
해결됨
실무에 바로 적용하는 스토리북과 UI 테스트
강의 중 스토리북이 테스트를 위한 라이브러리라고 말씀하신 부분이 있는데요, 스토리북 테스트 라이브러리가 yarn pnp와 의존성 간의 충돌이 있는 것으로 보입니다. 혹시 yarn pnp 환경에서 스토리북으로 컴포넌트에 대한 테스트를 진행하고 싶으면 어떻게 진행하면 좋을까요?
해결됨
한 입 크기로 잘라먹는 Next.js
안녕하세요 getServerSideProps 함수로 반환된 props 타입을 정의하는데 있어서 이해가 잘 가지 않아 질문드립니다. props의 타입을 지정할 때, next js의 내장타입을 사용하면서 해당 타입의 제네릭으로 InferGetServerSidePropsType<typeof getServerSideProps> 이렇게 작성하는데, <typeof getServerSideProps> 의 값은 function인데 어떻게 props 내부의 값을 전달할 파악할 수 있는지 궁금합니다. 제가 제네릭에 대한 이해도가 낮아서 그런거 같기도 한데,,, 답변 주시면 감사드리겠습니다.
해결됨
[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
선생님 프론트엔드 커서AI활용 코스의 경우에는 커서AI로 일일이 바이브 코딩하는건가요?? AI로 코딩할일이 뭐가 있을지 궁금합니다.
