inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

172만명의 커뮤니티!! 함께 토론해봐요.

승인된 리디렉션 URI등록 이유

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

승인된 리디렉션 URI에서 왜 3가지 https를 등록해 주는것인지 궁금합니다!

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
CHOI 댓글 2 좋아요 0 조회수 253

npm run dev 실행 시 포트가 안뜨는 문제

미해결

웹 게임을 만들며 배우는 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 다시 설치도 해봤는데, 여전히 문제가 동일합니다. 다른 디렉터리에 해둔 강의들은 서버가 잘 출력되는데, 뭐가 문제인지 잘 모르겠습니다 ㅠㅠ 더 필요한 파일이 있다면 올리도록 하겠습니다.

  • react
gmldnjs0402 댓글 2 좋아요 0 조회수 260

스토리북 테스트에 대한 질문

해결됨

실무에 바로 적용하는 스토리북과 UI 테스트

강의 중 스토리북이 테스트를 위한 라이브러리라고 말씀하신 부분이 있는데요, 스토리북 테스트 라이브러리가 yarn pnp와 의존성 간의 충돌이 있는 것으로 보입니다. 혹시 yarn pnp 환경에서 스토리북으로 컴포넌트에 대한 테스트를 진행하고 싶으면 어떻게 진행하면 좋을까요?

  • react
  • typescript
  • tailwindcss
  • storybook
  • ui-testing
김동훈 댓글 2 좋아요 0 조회수 120

2-11 InferGetServerSidePropsType<T> 제네릭 관련 질문

해결됨

한 입 크기로 잘라먹는 Next.js

안녕하세요 getServerSideProps 함수로 반환된 props 타입을 정의하는데 있어서 이해가 잘 가지 않아 질문드립니다. props의 타입을 지정할 때, next js의 내장타입을 사용하면서 해당 타입의 제네릭으로 InferGetServerSidePropsType<typeof getServerSideProps> 이렇게 작성하는데, <typeof getServerSideProps> 의 값은 function인데 어떻게 props 내부의 값을 전달할 파악할 수 있는지 궁금합니다. 제가 제네릭에 대한 이해도가 낮아서 그런거 같기도 한데,,, 답변 주시면 감사드리겠습니다.

  • react
  • typescript
  • next.js
먼재 댓글 2 좋아요 0 조회수 81

커서 강의 질문

해결됨

[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스

선생님 프론트엔드 커서AI활용 코스의 경우에는 커서AI로 일일이 바이브 코딩하는건가요?? AI로 코딩할일이 뭐가 있을지 궁금합니다.

  • react
  • react-native
  • 하이브리드-앱
  • graphql
  • next.js
코드스타크 댓글 2 좋아요 0 조회수 117

Supabase를 사용하여 서비스에 사용자 인증 기능을 구현

미해결

제로베이스부터 배우는 웹개발의 개념과 바이브 코딩

선생님, 안녕하세요. Supabase를 사용하여 제 서비스에 사용자 인증 기능을 구현하려고 합니다. 제가 이해한 내용이 맞는지 확인 부탁드려요! (1)인증 방식 설정: Supabase 프로젝트 대시보드의 Authentication 섹션 내 Providers 탭으로 이동하고, 여기서 제 서비스 사용자들이 이용할 로그인 방식(예: 이메일/비밀번호, Google/Kakao 등의 소셜 로그인, Magic Link 등)을 선택하고 필요한 설정을 완료하여 활성화 한다. (2) 애플리케이션 프론트엔드 구현: 제 웹사이트코드(나 앱의 프론트엔드 예: JavaScript, React, Flutter 등)에서 Supabase 클라이언트 라이브러리를 가져와 사용하고, 사용자들이 회원가입, 로그인, 로그아웃 등을 할 수 있는 UI(예: 로그인 페이지, 회원가입 폼)를 만들고, 이 UI와 Supabase 클라이언트 라이브러리의 함수들 연동하여 실제 인증 기능을 구현한다. (3) 사용자 데이터 관리: 사용자가 위 프론트엔드를 통해 회원가입하면, 그 정보는 Supabase 내의 auth.users라는 전용 테이블에 자동으로 저장되는 것이 맞나요? 결론적으로, 제 서비스의 최종 사용자들은 제가 프론트엔드에 구현한 로그인/회원가입 시스템과 Supabase Auth를 통해 별도의 사용자 계정을 갖고 서비스를 이용하게 되는 구조라고 이해하면 될까요? 혹시 제가 잘못 이해하고 있거나, 추가적으로 고려해야 할 중요한 사항이 있다면 알려주시면 감사하겠습니다.

  • react
  • 웹앱
  • next.js
  • cursor
  • 인공지능(ai)
CHOI 댓글 2 좋아요 0 조회수 414

일반적인 css 꾸미기에서 width와 height의 값?

미해결

비전공자를 위한 진짜 입문 올인원 개발 부트캠프

강의 잘 듣고 있습니다. 질문이 있는데요, 일반적인 css 꾸미기 에서 width와 height의 값 은 개발자가 아닌 웹디자이너가 항상 알려주기도 하나요 ? 즉 만약 vs code에서 파일이 index.html이 있고 index.css가 있다고 한다면, index.html에서 작성한 내용에 index.css에서 꾸며줄 시에 width 값과 height 값이 몇 픽셀인지, 혹은 몇 퍼센트인지 정할 때 잘 모르겠다면 어떻게 해야 하나요? 개발자가 width 값과 height 값을 잘 모른다면 감으로 크기를 늘렸다가 줄였다가 반복 하면서 적당한 width값과 height값을 찾아나가는 건가요? 피그마에서는 보통 디자인이 다 된 결과 값을 보고 vs code에 코딩한다면 상세 정보를 보고 width크기,height크기,폰트 크기, 폰트 weight 등등 다양하게 그대로 css에 적어주기만 하면 되는데요, 그랩 선생님 강의에서는 피그마로 볼 수 있게 추가 안내가 없어서, 스스로 강의 들은 이후 강의 없이 복습 할 시에(그랩마켓 웹화면 구현하기 1~3) 혹시나 각각 css로 꾸밀 때 width, height은 외우거나 혹은 보고 css에 적용하는 방식의 공부법 밖에 없는걸까요? 아니면 실무에서는 웹디자이너가 이미지등등의 경우에 width,height,기타 등등을 알려주기 에 그대로 css에 코딩해주면 되는 것인지요? 그랩님, 답변 부탁드립니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • react-native
  • 머신러닝
  • express
  • tensorflow
isbcom1004 댓글 2 좋아요 0 조회수 120

여기서 디벨롭먼트고 프리빌드 앱을 써도 에러가 발생합니다.

미해결

React Native with Expo: 제로초에게 제대로 배우기

npm ls react npm ls react-native npm ls expo 버전을 알려주시면 질문자분과 동일한 환경에서 답변 드릴 수 있습니다. ERROR Warning: Error: The package '@react-native-kakao/user' doesn't seem to be linked. Make sure: - You rebuilt the app after installing the package - You are not using Expo Go

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
최우뚝 댓글 3 좋아요 0 조회수 214

JWTUtil 에 심각한 버그 존재?

해결됨

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요. 최초 10분이 지난 후 refreshToken 정보를 이용하여, new accessToken 을 발급받는 것을 적용한 이후에는 오랜 시간이 지나도 다시 new accessToken 발급을 하지 않는 현상이 있더군요. 의문을 가지다가 Redis 에 연동하고, ttl JWT:ACCESS: user8@aaa.com 로 accessToken의 남은 시간을 체크해보니 문제가 있다는 걸 확인했습니다. chatGPT 로 점검해서 아래와 같은 코드로 수정한 이후 정상 동작하는 거 같습니다. public static String generateToken(Map<String, Object> valueMap, int min) { SecretKey key = null; try { key = Keys.hmacShaKeyFor(JWTUtil.key.getBytes("UTF-8")); } catch (Exception e) { throw new RuntimeException(e.getMessage()); } // 1. claims 복사 및 exp/iat 제거 Map<String, Object> claims = new HashMap<>(valueMap); claims.remove("exp"); claims.remove("iat"); // 2. 발급시간/만료시간 생성 Date now = Date.from(ZonedDateTime.now().toInstant()); Date exp = Date.from(ZonedDateTime.now().plusMinutes(min).toInstant()); // 3. JWT 생성 return Jwts.builder().header() .add("typ", "JWT") .add("alg", "HS256") .and() .issuedAt(now) .expiration(exp) .claims(claims) .signWith(key) .compact(); }

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
Link 댓글 3 좋아요 0 조회수 124

Tanstack query 구조에 관해 질문 드립니다.

해결됨

아바타 커뮤니티앱 만들기 (React Native Expo)

엔드포인트마다 훅을 만드는 게 가장 좋은 방법일까요? 엔드포인트가 많아진다면 파일이 너무 많아질 것 같은데 더 좋은 방법이 있을까요?

  • javascript
  • react
  • react-native
  • typescript
  • react-query
항상공부하는벌레 댓글 2 좋아요 0 조회수 134

사이트가 막힌건가요?

미해결

제대로 파는 Git & GitHub - by 얄코

🛑 이곳에 질문하지 마세요!!! 질문은 강의페이지에 안내드린 방식으로 이메일로 보내주세요! ⭐ 강의질문은 꼭 이렇게 보내주세요! | 얄코 (yalco.kr) https://www.yalco.kr/lectures/git-github/ 이 사이트가 없다고 뜨는데 이제 막힌건가요?

  • git
  • github
jsh4059 댓글 2 좋아요 0 조회수 320

질문있습니다.

미해결

코드로 배우는 React 19 with 스프링부트 API서버

안녕하세요, 기존 JS기반 강의의 자료는 받을 수 없는 걸까요? 유투브로 올려주시긴 했으나 코드를 보면서 진행해보고 싶습니다...

  • react
  • spring-boot
  • jpa
  • jwt
  • redux-toolkit
별다방 댓글 2 좋아요 0 조회수 51

graphql 접속이 안됩니다.

해결됨

[코드캠프] 부트캠프에서 만든 고농축 프론트엔드 코스

graphql 포트폴리오용 주소는 접속이 되지만 graphql practice 주소와 rest-api practice 주소가 접속이 안되는 것 같습니다. http://practice.codebootcamp.co.kr/graphql http://practice.codebootcamp.co.kr/api-docs 해당 주소로 접속하였을 때 사이트에 연결할 수 없다고 나옵니다.

  • react
  • node.js
  • seo
  • graphql
  • next.js
댓글 2 좋아요 0 조회수 125

진짜에요..?

미해결

React Native with Expo: 제로초에게 제대로 배우기

flutter도 써봤고, react/next도 다 쓰고 있는데요... expo의 라우팅 구조가 진짜 번잡하고 혼란스럽다고 느껴지네요. 혹시 현업에서도 알려주신 라우팅 방법(group 폴더, index.tsx, layout.tsx 등 활용)이 최선인가요? 뭐랄까.. 이상한 스킬들로 겨우겨우 원하는 결과물을 만들어내는 느낌이에요 ㅠㅠ

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
스타트업을 논하는 여우 댓글 3 좋아요 0 조회수 229

expo-location 문제

미해결

React Native with Expo: 제로초에게 제대로 배우기

강의 내용을 진행하던 중 android 시뮬레이터에서 expo-location을 import할 수 없다는 에러가 뜨고 있습니다. expo-go를 통해서 진행하였습니다. 이전 질문도 같은 문제가 있어보여서 해결 방법으로 expo 버전을 조정해도 해결되지 않습니다..ㅠㅠ 버전은 아래와 같습니다. package.json { "name": "threads", "main": "expo-router/entry", "version": "1.0.0", "scripts": { "start": "expo start", "reset-project": "node ./scripts/reset-project.js", "android": "expo start --android", "ios": "expo start --ios", "web": "expo start --web", "lint": "expo lint" }, "dependencies": { "@expo/vector-icons": "^14.1.0", "@react-navigation/bottom-tabs": "^7.3.10", "@react-navigation/elements": "^2.3.8", "@react-navigation/native": "^7.1.6", "expo": "53.0.9", "expo-blur": "~14.1.4", "expo-constants": "~17.1.6", "expo-font": "~13.3.1", "expo-haptics": "~14.1.4", "expo-image": "~2.1.7", "expo-linking": "~7.1.5", "expo-router": "~5.0.6", "expo-splash-screen": "~0.30.8", "expo-status-bar": "~2.2.3", "expo-symbols": "~0.4.4", "expo-system-ui": "~5.0.7", "expo-web-browser": "~14.1.6", "react": "19.0.0", "react-dom": "19.0.0", "react-native": "0.79.2", "react-native-gesture-handler": "~2.24.0", "react-native-reanimated": "~3.17.4", "react-native-safe-area-context": "5.4.0", "react-native-screens": "~4.10.0", "react-native-web": "~0.20.0", "react-native-webview": "13.13.5", "expo-dev-client": "~5.1.8", "expo-location": "~18.1.5" }, "devDependencies": { "@babel/core": "^7.25.2", "@types/react": "~19.0.10", "typescript": "~5.8.3", "eslint": "^9.25.0", "eslint-config-expo": "~9.2.0" }, "private": true }

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
cocococoa 댓글 2 좋아요 0 조회수 193

강의 예시프로젝트 업데이트좀 부탁드립니다.

미해결

실무에 바로 적용하는 프런트엔드 테스트 - 1부. 테스트 기초: 단위・통합 테스트

아니면 강의 설명 동영상에 프로젝트 초기버전 세팅 등 각종 프로젝트 설정을 자력으로 해야한다. 라는 안내문구라도 존재하면 좋겠습니다. 문제 해결을 할수는 있지만 초기 세팅에 시간이 많이 드는건 사실입니다.

  • javascript
  • react
  • 소프트웨어-테스트
  • vitest
댓글 2 좋아요 2 조회수 191

탭제거

미해결

React Native with Expo: 제로초에게 제대로 배우기

href:null을 추가해도 제일 우측 탭이 계속 안없어지는데 이유가 뭘까요..

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
khs1003k 댓글 2 좋아요 1 조회수 116

GA "수명주기" 탭 없음

해결됨

(2025) MBTI 테스트 기반 수익형 웹사이트 만들기 - <코딩 배워 사업하자>

선생님 안녕하세요! GA 관련 강의를 보면서 확인했는데 저는 "수명주기" 탭이 없더라구요?! 혹시 이건 구글 애드센스에서 수익 창출을 받아야 생기는 메뉴인가요? 저는 해당 사진처럼 메뉴가 있습니다!

  • react
  • aws
  • Google-Analytics
  • cloudflare
  • adsense
  • 수익화
asd 댓글 2 좋아요 0 조회수 136

fetch 캐싱과 revalidate 관련

미해결

Next + React Query로 SNS 서비스 만들기

안녕하세요 제로초님 fetch 캐싱과 revalidate 관련해서 궁금한 점이 있어 질문드립니다. await fetch('https://api.example.com/posts', { next: { revalidate: 60 }, }); A가 /posts를 최초 요청합니다. → API에서 데이터를 받아오고, 해당 데이터는 Next.js 서버 캐시에 저장 이후 60초 동안은 다른 누구든지 이 캐시된 데이터를 그대로 받음 그런데 60초가 지나기 전에 DB에서 게시글 1번의 제목이나 내용이 수정 됨 60초가 지나고 A가 다시 목록을 요청 → 이 시점은 revalidate 만료 시점 이후이므로 재검증 타이밍 → 하지만 A는 여전히 이전 캐시 데이터를 먼저 받고 , → A의 요청을 계기로 Next.js가 백그라운드에서 API를 다시 fetch하여 캐시를 갱신 곧이어 B가 /posts를 요청하면 → B는 A 덕분에 갱신된 최신 데이터를 바로 받음 제가 이해한 것이 맞을까요? 만약 저런식으로 동작하면 상세 페이지와 데이터 불일치 문제가 발생할 수 있지 않을까 해서요 만약 상세 페이지 요청도 이렇게 작성되어 있다면 await fetch('https://api.example.com/posts/1', { next: { revalidate: 60 }, }); A는 목록 요청만 했고, 상세 페이지는 요청하지 않음 B는 A 이후에 목록을 보고 → 최신 제목을 확인한 뒤 , → 게시글 1번의 상세 페이지를 클릭 그런데 상세 페이지의 제목은 여전히 수정 전의 이전 제목 으로 보임 → 목록과 상세 페이지 간에 데이터가 불일치 할 수 있음 정리하자면 제가 이해한 Next.js의 fetch + revalidate 캐시 동작이 맞는지 궁금하고 위와 같은 목록-상세의 데이터 불일치 현상은 실제로 발생 가능한 문제인지 궁금합니다. 제가 실제로 테스트해봤을 때 위 시나리오대로 목록과 상세 페이지에서 서로 다른 제목이 보이는 걸 확인했습니다. 혹시 제가 잘못 이해하고 테스트한 부분이 있는 건지, 아니면 실제로도 발생할 수 있는 동작인지 궁금합니다.

  • react
  • next.js
  • react-query
  • next-auth
  • msw
찹찹이 댓글 2 좋아요 0 조회수 119

인기 태그

인프런 TOP Writers

주간 인기글