inflearn logo
강의

강의
N
챌린지

챌린지
멘토링

멘토링
N
클립

클립
로드맵

로드맵
지식공유

묻고 답해요

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

런타임 에러 ㅠㅠ

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

- 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요. import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" import styled from "styled-components"; export default function Banner() { const [movie, setMovie] = useState([]); const [isClicked, setIsClicked] = useState(false); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_response: "videos"}, }); setMovie(movieDetail); } const truncate = (str, n) => { return str?.length > n ? str.substr(0, n - 1) + "..." : str; } console.log('movie', movie); if(!isClicked) { return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover", }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play" onClick={() => setIsClicked(true)} > Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ); } else{ return ( <Container> <HomeContainer> <Iframe width="640" height="360" src={`https://www.youtube.com/embed/${movie.videos.results[0].key}?controls=0&autoplay=1&loop=1&mute=1&playlist=${movie.videos.results[0].key}`} title="YouTube video player" allow="autoplay; fullscreen" ></Iframe> </HomeContainer> </Container> ); } } const Iframe = styled.iframe` width: 100%; height: 100%; opacity: 0.65; border: none; &::after { content:""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; }` const Container = styled.div` display: flex; justify-content: center; align-items: center; flex-direction: column; width: 100%; height: 100vh; ` const HomeContainer = styled.div` width: 100vw; height: 100vh;`

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
hundo1217 댓글 1 좋아요 0 조회수 120

초기 접속 요청시 js 번들러 질문!

해결됨

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

이전의 사전 렌더링에서 이런식으로 동작한다고 이해하고 초기접속시 JS 번들러에 남은 컴포넌트를 담아서 준다고 이해했는데 여기서는 페이지 이동 요청시 JS 번들러가 오는데 헷갈립니다.

  • react
  • typescript
  • next.js
강수영 댓글 1 좋아요 0 조회수 117

PUT, DELETE 등의 http 메소드 질문있습니다.

해결됨

React, Node.js, MongoDB로 만드는 나만의 회사 웹사이트: 완벽 가이드

안녕하세요. 오늘도 좋은강의 정말 감사히 듣고 있습니다. 제가 웹개발자가 아니라서 정확하게는 잘 모르긴 합니다. 6-3에서 문의글 상태변경, 삭제할때 PUT, DELETE 인 http메소드를 사용하시던데 제가 알기로는 PUT, DELETE는 보안에 취약한것으로 알고 있는데 사용해도 상관은 없는지 궁금합니다. 만약 사용하지 않는다면 상태변경, 삭제할때 GET과 POST방식만으로 어떤식으로 사용해야할지 로직정도만 알려주시면 감사하겠습니다.

  • HTML/CSS
  • javascript
  • react
  • node.js
  • mongodb
초보자 댓글 2 좋아요 0 조회수 431

onKeyDown event로 onSubmit 을 하는 이유에 대해 궁금해요

해결됨

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

2.8) 페이지별 레이아웃 설정하기 안녕하세요 한입 nextjs 강의 잘 보고 있는데요! 하나 궁금한 게 생겨서 질문 남겨요! 20분쯤에 나오는 onKeyDown 으로 키보드 이벤트를 감지하여 처리하는 이유가 있을까요? 해당 부분만 form 으로 감싸면 자동으로 enter 클릭시 감지해서 요청을 보내게 되는데 onKeyDown으로 함수를 빼서 input 이벤트를 핸들링 하는 이유는 무엇인가요! submit 직전 다른 데이터를 핸들링 할 때 form은 바로 submit이 일어나기 때문에 그런 부분에 있어서 확장성? 을 위한건가용?

  • react
  • typescript
  • next.js
박준희 댓글 2 좋아요 0 조회수 109

강의대로 따라갔는데 에러보다 api키로 들어간 넷플릭스? 그런게 렌더링 되지 않습니다 ㅠ

미해결

따라하며 배우는 리액트 A-Z[19버전 반영]

강의대로 따라갔는데 강의처럼 렌더링이 되고 있지 않습니다 ㅠㅠ 어디가 문제일까요 chatgpt는 서버가 없다 뭐 이렇다는데 ㅠㅠ 출력 화면 Nav.js import React, { useEffect, useState } from 'react' import"./Nav.css" export default function Nav() { const [show, setShow] = useState(false); useEffect(() => { window.addEventListener("scroll", ()=> { console.log('window.scrollY', window.scrollY); if(window.scrollY > 50) { setShow(true); } else { setShow(false); } }) return () => { window.removeEventListener("scroll", ()=> {}); }; }, []); return ( <nav className={`nav ${show && "nav__black"}`}> <img alt = 'Netflix logo' src = "https://upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/960px-Netflix_2015_logo.svg.png" decoding="async" width="799" height="216" srcset="//upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1198px-Netflix_2015_logo.svg.png 1.5x, //upload.wikimedia.org/wikipedia/commons/thumb/0/08/Netflix_2015_logo.svg/1597px-Netflix_2015_logo.svg.png" className='nav__logo' onClick={() => window.location.reload()} /> <img alt = "User logged" src = "https://occ-0-3077-988.1.nflxso.net/dnm/api/v6/vN7bi_My87NPKvsBoib006Llxzg/AAAABTZ2zlLdBVC05fsd2YQAR43J6vB1NAUBOOrxt7oaFATxMhtdzlNZ846H3D8TZzooe2-FT853YVYs8p001KVFYopWi4D4NXM.png?r=229" className="nav__avatar" /> </nav> ); } Nav.css .nav{ position: fixed; top: 0; width: 100%; height: 30px; z-index: 1; padding: 20px; display: flex; justify-content: space-between; align-items: center; transition-timing-function: ease-in; transition: all 0.5s; } .nav__black { background-color: #111; } .nav__logo{ position: fixed; left: 40px; width: 80px; object-fit: contain; } .nav__avatar { position: fixed; right: 40px; width: 30px; object-fit: contain; } Banner.js import axios from "../api/axios"; import React, { useEffect, useState } from 'react' import requests from '../api/requests'; import "./Banner.css" export default function Banner() { const [movie, setMovie] = useState([]); useEffect(() => { fetchData(); }, []); const fetchData = async() => { //현재 상영중인 영화 정보를 가져오기 (여러 영화) const request = await axios.get(requests.fetchNowPlaying); //여러 영화 중 영화 하나의 ID를 가져오기 const movieId = request.data.results[ Math.floor(Math.random() * request.data.results.length) ].id; //특정 영화의 더 상세한 정보를 가져오기 (비디오 정보도 포함) const {data: movieDetail} = await axios.get(`movie/${movieId}`, { params: {append_to_reponse: "videos"} }); setMovie(movieDetail); } const truncate = (str, n) => { return str?. length > n ? str.substr(0, n - 1) + "..." : str; } return ( <header className="banner" style={{ backgroundImage: `url("https://image.tmdb.org/t/p/original/${movie.backdrop_path}")`, backgroundPosition: "top center", backgroundSize: "cover" }}> <div className="banner__contents"> <h1 className="banner__title"> {movie.title || movie.name || movie.original_name} </h1> <div className="banner__buttons"> <button className="banner__button play">Play</button> <button className="banner__button info">More Information</button> </div> <h1 className="banner_description"> {truncate(movie.overview, 100)} </h1> </div> <div className="banner--fadeBottom"></div> </header> ) } Banner.css .banner{ color: white; object-fit: contain; height: 448px; } @media (min-width : 1500px) { .banner{ position: relative; height: 600px; } .banner--fadeBottom{ position: absolute; bottom: 0; width: 100%; height: 40rem; } } @media (max-width : 768px) { .banner__contents{ width: min-content !important; padding-left: 2.3rem; margin-left: 0px !important; } .banner--description{ font-size: 0.8rem !important; width: auto !important; } .info{ text-align: start; padding-right: 1.2rem; } .space{ margin-left: 6px; } } axios.js import axios from "axios"; const instance = axios.create({ baseURL: "https://api.themoviedb.org", params: { api_key: "eea00451962aefe6185011d467944242", language: "ko-KR", }, }); export default instance; requests.js const requests = { fetchNowPlaying: "movie/now_playing", fetchNetFlixOriginals: "/discover/tv?with_networks=213", fetchTrending: "/trending/all/week", fetchTopRated: "/movie/top_rated", fetchActionMovies: "/discover/movie?with_genres=28", fetchComedyMovies: "/discover/movie?with_genres=35", fetchHorrorMovies: "/discover/movie?with_genres=27", fetchRomanceMovies: "/discover/movie?with_genres=10749", fetchDocumentaries: "/discover/movie?with_genres=99", } export default requests;

  • react
  • redux
  • tdd
  • typescript
  • next.js
  • 소프트웨어-테스트
hundo1217 댓글 1 좋아요 0 조회수 132

웹뷰내에서 카메라 접근이 가능할까요?

해결됨

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

aws face liveness라는 서비스를 써야하는데 리액트, 코틀린, 스위프트만 지원하는듯 합니다. 네이티브 단은 건들 엄두가 안나서 웹뷰로 띄워서 카메라를 연결하려고 하는데 이론적으로 가능할까요?

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

서브밋할때 어떻게해야하나요

미해결

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

eas submit --platform ios Select a build from EAS ❯ Provide a URL to the app archive Provide a path to a local app binary file Provide a build ID to identify a build on EAS 이렇게 뜹니다 어떻게해야하나요?

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

앱 빌드 문의드립니다.

해결됨

[2025] 비전공자도 가능한 React Native 앱 개발 마스터클래스

앱 빌드 중에 문제가 생겨 문의드립니다. 아래 알려주신 명령어를 입력하면 로컬이 아니라 expo.dev 사이트에서 앱이 빌드 되는 것을 확인 했습니다. 무료 계정 기준으로 빌드 시간이 30분~1시간 소요됩니다... npx eas build --platfo rm android --profile development 바쁘시겠지만 로컬에서 빌드하고 AVD에 설치하는 과정을 알려주시면 감사하겠습니다. 저와 같은 문제가 발생하시는 분들은 npm run android 또는 npm run ios 를 입력하시면 앱이 설치가 됩니다. 이게 정석인지는 잘 모르겠습니다..

  • javascript
  • react
  • node.js
  • react-native
  • typescript
권한준 댓글 3 좋아요 0 조회수 154

Next의 route handler에 대한 질문이 있습니다.

미해결

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

안녕하세요 Next app router 관련해서 질문드립니다. 현재 사이드프로젝트에서 route handler를 적극활용하고 있는데요. 제가 인프라나 백엔드 관련 지식이 없다보니 좀 헷갈리는게 있습니다. 현재 저희 서비스에서 특정 API는 클라이언트 컴포넌트에서 route handler로 API 호출 -> route handler에서 외부 백엔드 API 호출 이런 형태로 사용되고 있는데요, 이때 실제로 route handler 서버가 아래의 사진 중 어느 형태로 운용되는 것인가요? 즉, Next 프로젝트를 배포했을 때 각 유저마다 route handler 서버가 할당되는 것인가요? 아니면 모든 유저의 요청을 오직 하나의 route handler서버에서 대응하는 것인가요? 아니면 이게 배포 환경에 따라 달라지는것인가요?

  • react
  • next.js
  • react-query
  • next-auth
  • msw
kraf 댓글 2 좋아요 0 조회수 121

들여쓰기 정리되는거 확장프로그램인가요?

해결됨

한 입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지

강의 보다보면 저장했을 때 들여쓰기가 다 정리되던데 단축키 인가요 확장프로그램인가요??

  • javascript
  • react
  • node.js
이지언 댓글 1 좋아요 0 조회수 123

prd 내용이 강의노트에 없습니다.

미해결

코딩 몰라도 OK! CursorAI로 시작하는 개발 생활 (웹/초급)

안녕하세요. 강의를 잘 듣고 있습니다. prd 자료가 강의 노트에 없습니다. 가능하면 citymir@naver.com으로 자료를 부탁드립니다.

  • react
  • 웹-디자인
  • firebase
  • no-code
  • cursor
  • vercel
nick jung 댓글 1 좋아요 0 조회수 91

useActionState에서 반환값 필드 생략 시 조건에 따라 에러 발생 여부가 다른 이유

해결됨

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

안녕하세요! 강의 잘 듣고 있습니다. 제가 혼자 실습하다가 createPostAction 의 반환값에 success 필드를 넣은 후에 useActionState 의 initialState 에도 이 필드를 아래와 같이 추가했었는데요, const [state, formAction, isPending] = useActionState(createPostAction, { message: '', errors: {}, formData: { title: '', tag: '', content: '', }, success: false, }); useActionState 훅을 사용할 때 initialState 에 포함된 필드 중 일부를 이후 action 함수의 반환값에서 생략하면 어떤 경우에는 에러가 발생하고, 어떤 경우에는 아무 문제 없이 동작하는 게 잘 이해가 되지 않아서요. 예를 들어 initialState 에는 success 필드가 있지만, 유효성 검사 실패 시 반환 객체에서 success 를 생략하면 에러가 발생합니다. if (!validatedFields.success) { return { errors: validatedFields.error.flatten().fieldErrors, message: 'Validation failed', formData: rawFormData, success: false, // 없으면 useActionState 에서 에러 발생 }; } 그런데 try...catch 문에서는 success 없이 반환하면 에러가 발생하지 않는 걸 확인할 수 있었습니다. try { const { title, tag, content } = validatedFields.data; await createPost({ title, tag, content }); revalidateTag('posts'); return { success: true, // 없어도 에러 안남 message: 'Post created successfully', }; } catch (e) { return { message: 'Failed to create post : ' + e, formData: rawFormData, }; } formData 필드도 비슷하게 행동하는데 이 차이가 왜 발생하는지, 어떤 기준으로 반환 객체의 필드 구조를 검사하고 에러를 발생시키는지 궁금합니다. useActionState 에서 반환 객체의 필드가 initialState 와 구조적으로 정확히 일치해야 하는 조건이 언제 적용되는 건가요?

  • react
  • next.js
e_sun 댓글 2 좋아요 0 조회수 103

Expo 패키지 혹은 React native 패키지를 사용하는 기준

미해결

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

안녕하세요 Expo 패키지 혹은 React native 패키지를 사용하는 기준이 무엇인가요? 예를 들어 Image도 react native 패키지로도 가져올 수 있고 expo로도 가져올 수 있는데 강의에서는 expo를 사용하셨더라구요 혹시 그 이유를 알 수 있을가요?

  • react
  • react-native
  • 하이브리드-앱
  • typescript
  • expo
YU NA Joe 댓글 1 좋아요 0 조회수 115

private component 관련 질문

미해결

Next.js 완벽 마스터 (v15): 노션 기반 개발자 블로그 만들기 (with 커서AI)

루트 page.tsx에서 사용하는 컴포넌트는 pages/_components/ 여기에 바로 넣으셨는데 그럼 about 페이지에서만 사용하는 컴포넌트는 pages/_components/about/ 이 경로에 배치하면될까요?

  • react
  • 블로그
  • next.js
  • cursor
  • cursorai
김진규 댓글 2 좋아요 0 조회수 67

useNavigate 테스트 시, 검증 대상 질문입니다.

미해결

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

뒤로 이동 버튼을 눌러 페이지 전환이 잘 되었음을 검증하고 싶으면 history web api 등을 이용해서 검증하는게 더 올바르지 않나요?? 왜 useNavigate 의 반환 함수의 인자로 검증하는지 궁금합니다~

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

강의교안 노션에 접속이 안되요

미해결

React 완벽 마스터: 기초 개념부터 린캔버스 프로젝트까지

무한로딩 되면서 접속이 안되요 ㅠㅠ

  • react
  • React-Context
  • react-router
  • tailwindcss
  • react-query
skyileftgy12 댓글 2 좋아요 0 조회수 295

ErrorBoundary component 를 server component 에서 사용하는것

해결됨

Next.js 15로 완성하는 실전 YouTube 클론 개발

ErrorBoundary component ( react-error-boundary ) 는 client component 인데 수업에서는 server component 에서 사용하고 있는걸로 확인됩니다. 괜찮을까요?

  • react
  • postgresql
  • 클론코딩
  • next.js
  • tailwindcss
  • drizzle
hanbrang 댓글 2 좋아요 1 조회수 221

socialLoginSpa1703 스프링 실행 오류납니다.

미해결

스프링 부트와 리액트로 구현하는 소셜 로그인

socialLoginSpa1703 소스코드를 다운받고 인텔리제이로 프로젝트를 열었습니다. jdbc 설정대로 mysql을 생성하였고 bootRun으로 실행시키면 프로젝트는 실행됩니다. 강의와같이 localhost:8080 이 접속이 안되고 localhost 에 대한 액세스가 거부됨 이 페이지를 볼 수 있는 권한이 없습니다. HTTP ERROR 403 가 뜹니다. 확인 부탁드려요 2025-06-07T13:23:42.478+09:00 INFO 46412 --- [ restartedMain] c.e.demo.SocialLoginSpa1703Application : Starting SocialLoginSpa1703Application using Java 17.0.15 with PID 46412 (C:\Users\HP\Desktop\�Ǽ�ȣ\Project\SocialLoginSpa1703\build\classes\java\main started by HP in C:\Users\HP\Desktop\�Ǽ�ȣ\Project\SocialLoginSpa1703) 2025-06-07T13:23:42.483+09:00 INFO 46412 --- [ restartedMain] c.e.demo.SocialLoginSpa1703Application : No active profile set, falling back to 1 default profile: "default" 2025-06-07T13:23:42.566+09:00 INFO 46412 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : Devtools property defaults active! Set 'spring.devtools.add-properties' to 'false' to disable 2025-06-07T13:23:42.566+09:00 INFO 46412 --- [ restartedMain] .e.DevToolsPropertyDefaultsPostProcessor : For additional web related logging consider setting the 'logging.level.web' property to 'DEBUG' 2025-06-07T13:23:44.141+09:00 INFO 46412 --- [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2025-06-07T13:23:44.275+09:00 INFO 46412 --- [ restartedMain] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 119 ms. Found 2 JPA repository interfaces. 2025-06-07T13:23:45.451+09:00 INFO 46412 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port 8080 (http) 2025-06-07T13:23:45.477+09:00 INFO 46412 --- [ restartedMain] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2025-06-07T13:23:45.478+09:00 INFO 46412 --- [ restartedMain] o.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/10.1.39] 2025-06-07T13:23:45.585+09:00 INFO 46412 --- [ restartedMain] o.a.c.c.C.[Tomcat].[ localhost ].[/] : Initializing Spring embedded WebApplicationContext 2025-06-07T13:23:45.587+09:00 INFO 46412 --- [ restartedMain] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3018 ms 2025-06-07T13:23:45.876+09:00 INFO 46412 --- [ restartedMain] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [name: default] 2025-06-07T13:23:46.037+09:00 INFO 46412 --- [ restartedMain] org.hibernate.Version : HHH000412: Hibernate ORM core version 6.5.3.Final 2025-06-07T13:23:46.427+09:00 INFO 46412 --- [ restartedMain] o.h.c.internal.RegionFactoryInitiator : HHH000026: Second-level cache disabled 2025-06-07T13:23:47.214+09:00 INFO 46412 --- [ restartedMain] o.s.o.j.p.SpringPersistenceUnitInfo : No LoadTimeWeaver setup: ignoring JPA class transformer 2025-06-07T13:23:47.301+09:00 INFO 46412 --- [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2025-06-07T13:23:47.595+09:00 INFO 46412 --- [ restartedMain] com.zaxxer.hikari.pool.HikariPool : HikariPool-1 - Added connection com.mysql.cj.jdbc.ConnectionImpl@3419a5dd 2025-06-07T13:23:47.600+09:00 INFO 46412 --- [ restartedMain] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2025-06-07T13:23:49.656+09:00 INFO 46412 --- [ restartedMain] o.h.e.t.j.p.i.JtaPlatformInitiator : HHH000489: No JTA platform available (set 'hibernate.transaction.jta.platform' to enable JTA platform integration) 2025-06-07T13:23:49.824+09:00 INFO 46412 --- [ restartedMain] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default' 2025-06-07T13:23:50.469+09:00 INFO 46412 --- [ restartedMain] o.s.d.j.r.query.QueryEnhancerFactory : Hibernate is in classpath; If applicable, HQL parser will be used. 2025-06-07T13:23:51.243+09:00 WARN 46412 --- [ restartedMain] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open -in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open -in-view to disable this warning 2025-06-07T13:23:52.357+09:00 INFO 46412 --- [ restartedMain] o.s.b.d.a.OptionalLiveReloadServer : LiveReload server is running on port 35729 2025-06-07T13:23:52.418+09:00 INFO 46412 --- [ restartedMain] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat started on port 8080 (http) with context path '/' 2025-06-07T13:23:52.428+09:00 INFO 46412 --- [ restartedMain] c.e.demo.SocialLoginSpa1703Application : Started SocialLoginSpa1703Application in 10.793 seconds (process running for 11.915) 2025-06-07T13:24:32.032+09:00 INFO 46412 --- [nio-8080-exec-2] o.a.c.c.C.[Tomcat].[ localhost ].[/] : Initializing Spring DispatcherServlet 'dispatcherServlet' 2025-06-07T13:24:32.032+09:00 INFO 46412 --- [nio-8080-exec-2] o.s.web.servlet.DispatcherServlet : Initializing Servlet 'dispatcherServlet' 2025-06-07T13:24:32.035+09:00 INFO 46412 --- [nio-8080-exec-2] o.s.web.servlet.DispatcherServlet : Completed initialization in 2 ms 2025-06-07T13:24:32.090+09:00 INFO 46412 --- [nio-8080-exec-2] c.e.d.security .JwtAuthenticationFilter : doFilterInternal

  • react
  • java
  • spring-boot
  • jpa
  • spring-security
뚜루뚜루 댓글 1 좋아요 0 조회수 181

탭 전환 안됨

미해결

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

강의 잘 따라가다가 로그인까지 성공했는데 20강부터 갑자기 add,activity,user탭을 눌러도 전환이 안돼요.. home이랑 search만 전환이 됩니다. 에러도 안떠서 어디부터 잘못된건지 감이 안 오는데 어떤 파일을 확인해야 할까요? app/(tabs)_layout.tsx 입니다 import { Ionicons } from "@expo/vector-icons"; import { type BottomTabBarButtonProps } from "@react-navigation/bottom-tabs"; import { Tabs, useRouter } from "expo-router"; import { useContext, useRef, useState } from "react"; import { Animated, Modal, Pressable, Text, TouchableOpacity, View } from "react-native"; import { AuthContext } from "../_layout"; export default function TabLayout(){ const router=useRouter(); const [isLoginModalOpen,setIsLoginModalOpen]=useState(false); const {user}=useContext(AuthContext); const isLoggedIn = !!user; const openLoginModal=()=>{ setIsLoginModalOpen(true); }; const closeLoginModal=()=>{ setIsLoginModalOpen(false); }; const toLoginPage= ()=>{ setIsLoginModalOpen(false); router.push("/login"); } const AnimatedTabBarButton=({ children, onPress, style, ...restProps }: BottomTabBarButtonProps)=>{ const scaleValue=useRef(new Animated.Value(1)).current; const handlePressOut=()=>{ Animated.sequence([ Animated.spring(scaleValue,{ toValue:1.2, useNativeDriver:true, speed:200, }), Animated.spring(scaleValue,{ toValue:1, useNativeDriver:true, speed:200, }), ]).start(); } return ( <Pressable onPress={onPress} onPressOut={handlePressOut} style={[{ flex: 1, justifyContent: "center", alignItems: "center" }, style]} android_ripple={{ borderless: false, radius: 0 }} > <Animated.View style={{ transform: [{ scale: scaleValue }] }}> {children} </Animated.View> </Pressable> ); } return ( <> <Tabs backBehavior="history" screenOptions={{ headerShown:false, tabBarButton: (props)=><AnimatedTabBarButton {...props}/>, }} > <Tabs.Screen name="(home)" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="home" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="search" options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="search" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="add" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } } }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="add" size={24} color={focused ? "black":"gray"}/> ), }} /> <Tabs.Screen name="activity" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="heart-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="[username]" listeners={{ tabPress:(e)=>{ e.preventDefault(); if(!isLoggedIn){ openLoginModal(); } }, }} options={{ tabBarLabel:()=>null, tabBarIcon:({focused})=>( <Ionicons name="person-outline" size={24} color={focused ? "black":"gray"}/> ), }}/> <Tabs.Screen name="(post)/[username]/post/[postID]" options={{ href:null, }} /> </Tabs> <Modal visible={isLoginModalOpen} transparent={true} animationType="slide" > <View style={{ flex:1, justifyContent:"flex-end", backgroundColor:"rgba(0,0,0,0.5)" }}> <View style={{backgroundColor:"white",padding:20}}> <Pressable onPress={toLoginPage}> <Text>Login Modal</Text> </Pressable> <TouchableOpacity onPress={closeLoginModal}> <Ionicons name="close" size={24} color='#555'/> </TouchableOpacity> </View> </View> </Modal> </> ); }

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

인기 태그

인프런 TOP Writers

주간 인기글