묻고 답해요
169만명의 커뮤니티!! 함께 토론해봐요.
인프런 TOP Writers
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
앱권한설정 화면이후 api작동 (아이폰)
안녕하세요. 새로 올려주신 강의를 흥미롭게 듣고 있습니다. 저는 아이폰을 이용해서 테스트 중인데, 안드로이드와는 좀 다른 움직임이 있어서 질의드립니다. 권한 설정화면 Link되면 저희가 구성한 하이브리드 앱이 웹뷰로 더 이상 연결되지 않는것처럼 보입니다. 이 부분 어떻게 해결할수 있을까요?그리고 권한 설정화면으로 이동하여 권한을 수정한 후 제거하고 ( 해당 화면은 권한을 설정한다고 해서 사라지거나 하지 않습니다 ) expo로 돌아오면 active가 들어와야 하는데 그렇지 않습니다. 코드에 setInterval을 줬으니 뭔가 주기적으로 수행하지 않을까 싶어서 로그를 줘봤으나 전혀 구동하지 않았습니다. 여러가지 테스트를 해보았는데, 앱권한 설정페이지로 이동하는 쿼리인 openDeviceSystemForSettingSet을 호출하면 앱의 권한 화면이 Link되고, 그러면서 기존의 하이브리드 앱이 웹뷰로 연결되지 않는것 같습니다. 제 코드가 잘못되었나 싶어서 setInterval을 없애고 fetch의 순서를 바꿔봤습니다. openDeviceSystemForSettingSet을 맨뒤에 배치해봤을때는 모든 결과가 잘 들어왔습니다. 그러나 6-2와 같이 openDeviceSystemForSettingSet를 먼저 호출하고 이후에 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet의 fetch를 수행하려 하면 작동하지 않습니다. 인공지능에게 문의하니 상태 구독을 하라고 하여 아래와 같이 구독을 mobile의 index.tsx에 추가하였습니다. React.useEffect(() => { const subscription = AppState.addEventListener("change", (nextAppState) => { if (nextAppState === "active") { console.log("✅ 앱이 다시 활성화됨. WebView에 메시지 전송!"); webviewRef.current?.postMessage("APP_ACTIVE"); } }); 그리고 page.tsx에는 app이 active가 되면 이를 받아올수 있도록 함수를 구성하고 그 안에서 fetchDeviceLocationforPermissionSet이나 fetchDeviceSystemForAppStateSet를 받아오도록 변경했습니다. useEffect(() => { const handleMessage = (event) => { if (event.data === "APP_ACTIVE") { console.log( "🔄 WebView에서 APP_ACTIVE 메시지 수신! fetchApp 다시 실행" ); checkPermissions(); } }; window.addEventListener("message", handleMessage); return () => { window.removeEventListener("message", handleMessage); }; }, []); const checkPermissions = async () => { try { console.log("📡 위치 권한 상태 확인 요청"); const result = await fetchApp({ query: "fetchDeviceLocationforPermissionSet", }); const status = result.data.fetchDeviceLocationforPermissionSet.status; webviewlog(` 위치 권한 상태: ${status}`); const appStateResult = await fetchApp({ query: "fetchDeviceSystemForAppStateSet", }); const isForeground = appStateResult.data.fetchDeviceSystemForAppStateSet.isForeground; webviewlog(` 앱 활성화 상태: ${isForeground}`); } catch (error) { console.error(" fetch 요청 실패:", error); } }; 이렇게 하니 앱이 활성화되면 이벤트 리스너를 통해 결과가 전달되어져 오기는 합니다.강의에서 해주셨던 setInterval설정이 훨씬 간편하지라 아이폰에서 구성하려면 어떻게 해야할지 어떤 이유로 이렇게 되는지 궁금하여 질의드립니다. 2. 그리고, 원두님이 안드로이드를 통해 보여주신 것과 같이 허용함을 다시 묻지 않는데 이런 설정을 별도로 추가해야 하는걸까요? 제가 뭔가 누락한 건지 모르겠습니다. 원두님은 관련코드를 구성하지 않으셔도 사용에 대한 질의가 나타나는데, 저의 경우는 권한 설정기능이 바로 띄워집니다. 일반적인 앱들을 사용하다보면 권한 허용 질의 이후(모달창??)에 허용을 누르고 , 권한설정을 한 후 지도로 들어가고 그렇게 구성되는데 그런 구성이 누락되어 , 웹뷰 연동이 안되는것일까
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
tailwindCss 버전 업그레이드로 인한 질문
안녕하세요! next.js 설치 완료후 package.json을 확인해보니테일윈드가 3.4.1 버전이 아닌 4.0.14 버전이 설치 되어있음을 확인했습니다.강의 내용과 다른점이 있어 node_modules , yarn lock 삭제후 버전 다운그레이드를 시도해보았지만 자꾸 에러가나서.. 테일윈드 독스를 찾아 새로운 버전을 적용시켰어요https://tailwindcss.com/docs/installation/framework-guides/nextjs 다만 기존 강의에서는 tailwind.config.js 에서 변수를 설정하는 법을 알려주셨는데..그 방법에 대해서는 해결방법을 찾지 못하였습니다. 나만의 변수를 만들어 다양한 컴포넌트에서 재사용하는 방법이 테일윈드의 강의의 쟁점이라고 생각해서. global.css에 변수를 만들어 컴포넌트 스타일에 적용시키는 방법으로 비슷하게는 진행해 보았는데이렇게 해도 되는 사항 일까요? 또한 강의 후반부에 @layer로 utilities를 만들어 스타일을 적용시키는 부분에서스타일 자체는 먹지만, 테일윈드 자체에서 제공해주는 반응형 명령어에는 적용이 안돼요 ㅠㅠ좋은 방법이 있을까요.....
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
학습한 내용 이미지와 코드를 블로그에 올려도 되나요??
학습한 내용 이미지와 코드를 블로그에 올려도 되나요??
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
[JS 03-1-1] 스크롤-스크롤 실습 관련 질문입니다.
window.scrollTo({ top: 0, behavior: "smooth" }); 제 화면은 왜 부드럽게 스크롤 이동이 안되는걸까요? behavior 빠졌을 때와 차이가 없어보여요.. 사용 브라우저는 크롬입니다
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
피그마 링크
안녕하세요 ~수업 듣기 시작하고 싸이월드 만들기 1탄에서 피그마가 나오는데 예제자료를 보면서 할수 있는 피그마 링크가 어디에 있는지요 ?
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
기본 세팅 오류
처음 flutter 프로젝트 생성하는데 android쪽 mainactivity.kt에서 오류가 발생해요아무런 코드 건든것도 없이package com.example.eyeforyou_plusimport io.flutter.embedding.android.FlutterActivity class MainActivity: FlutterActivity()이렇게만 되어있는데 embedding과 FlutterActivity()에서 "Unresolved reference: embedding" 이런 오류가 납니다. 프로젝트 생성하고 아무것도 건들지 않았는데 이런 오류가 나는걸 왜일까요??ㅠㅠ
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
책 내용 firebase supabase oauth 인증
flutter: PlatformException(google_sign_in, You must specify |clientID| in |GIDConfiguration|, NSInvalidArgumentException, null) firebase supabase oauth 인증으로 구글 로그인중에 위와 같은 에러가 나면서 셧다운이 됩니다. 구글링, ai 를 써도 해결책이 안나와서 여쭤봅니다.
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
요청하는 Cursor 자체가 사라진 경우.
요청하는 Cursor 자체가 사라진 경우에는 어떤 방식으로 해결해야할까요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
한 달이 좀 넘게 지났는데, 아직 강의 영상은 안올라오는건가요?
보니까 해당 강의 영상이 내려간게 1월 14일 같은데... 아직까지 소식이 없는건가요...?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
node_modules에서 export 오류
수업과 같이 npm에 배포하고 제가 만든 ui를 다운받아 import하는 과정에서해당 이미지와 같이 node_modules에서 export가 나타납니다.1) lib파일과 index.ts파일을 myapp 폴더로 직접 import했을때는 정상적으로 작동하였습니다.2) 해당 수업에서 codecamp-ui가 npm 사이트에 아직 배포중이기에 그것도 시험삼아 다운받아서 import하였지만 똑같은 오류가 나타났습니다.3) node_modules 파일 삭제하고 다시 yarn install로 다운받았지만 같은 오류가 나타났습니다.그 전 수업까지는 동일하게 오류없이 진행했습니다. 무엇이 문제일까요?
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
피그마 링크는 어디 있을까요?!
피그마 링크를 못찾겠어요ㅠ 이미지 다운 받아야 하는데 어디서 볼 수 있을까요?
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
소셜 로그인 질문
강의 내용에 책 내용을 추가하는중입니다. 이번 새로운 flutter v3 책에서 709페이지 Callback URL 을 복사한다고 적혀있는데 이 URL은 어디에 쓰이나요?
-
미해결[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
피그마에서 과제 및 싸이월드 과제를 못찾고 있어요
피그마로 들어갔는데 과제관련한 회원가입을 찾을 수가 없어요. 그리고 섹션을 살펴봤는데요 여긴 섹션3번인데 안보이네요.. 제가 못찾고 있는것 같은데요
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
해당 강의 소스
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM 해당 강의 소스를 받아 볼 수 있나요? - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
숙제 5번인데
"use client"; import styles from "./styles.module.css"; import Image from "next/image"; const IMAGE_SRC = { profileImage: { src: ("/assets/profile_image.png"), alt: "프로필이미지", }, linkImage: { src: ("/assets/link.png"), alt: "링크아이콘", }, locationImage: { src: ("/assets/location.png"), alt: "위치아이콘", }, cheongsanImage: { src: ("/assets/cheongsan.png"), alt: "청산사진", }, neotubeImage: { src: ("/assets/neotube.png"), alt: "너튜브사진", }, badImage: { src: ("/assets/bad.png"), alt: "싫어요", }, goodImage: { src: ("/assets/good.png"), alt: "좋아요", }, hamberger: { src: ("/assets/hamberger.png"), alt: "목록아이콘", }, pencil: { src: ("/assets/pencil.png"), alt: "수정아이콘", }, } as const; export default function BoardsDetailPage() { return ( <div className={styles.detailLayout}> <div className={styles.detailBody}> <div className={styles.detailFrame}> <div className={styles.detailSubject}> 살어리 살어리랏다 쳥산(靑山)애 살어리랏다멀위랑 ᄃᆞ래랑 먹고 쳥산(靑山)애 살어리랏다얄리얄리 얄랑셩 얄라리 얄라 </div> <div className={styles.detailMetadataContainer}> <div className={styles.detailMetadataProfile}> <Image src={IMAGE_SRC.profileImage.src} alt={IMAGE_SRC.profileImage.alt} width={100} height={100} /> <div>홍길동</div> </div> <div className={styles.detailMetadataDate}>2024.11.11</div> </div> <div className={styles.enrollBorder}></div> <div className={styles.detailMetadataIconContainer}> <Image src={IMAGE_SRC.linkImage.src} alt={IMAGE_SRC.linkImage.alt} width={100} height={100} /> <Image src={IMAGE_SRC.locationImage.src} alt={IMAGE_SRC.locationImage.alt} width={100} height={100} /> </div> <div className={styles.detailContentContainer}> <Image src={IMAGE_SRC.cheongsanImage.src} alt={IMAGE_SRC.cheongsanImage.alt} className={styles.detailContentImage} width={100} height={100} /> <div className={styles.detailContentText}> <div>살겠노라 살겠노라. 청산에 살겠노라.</div> <div>머루랑 다래를 먹고 청산에 살겠노라.</div> <div>얄리얄리 얄랑셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>우는구나 우는구나 새야. 자고 일어나 우는구나 새야.</div> <div>너보다 시름 많은 나도 자고 일어나 우노라.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div> 갈던 밭(사래) 갈던 밭 보았느냐. 물 아래(근처) 갈던 밭 보았느냐 </div> <div>이끼 묻은 쟁기를 가지고 물 아래 갈던 밭 보았느냐.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>이럭저럭 하여 낮일랑 지내 왔건만</div> <div>올 이도 갈 이도 없는 밤일랑 또 어찌 할 것인가.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>어디다 던지는 돌인가 누구를 맞히려던 돌인가.</div> <div>미워할 이도 사랑할 이도 없이 맞아서 우노라.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>살겠노라 살겠노라. 바다에 살겠노라.</div> <div>나문재, 굴, 조개를 먹고 바다에 살겠노라.</div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>가다가 가다가 듣노라. 에정지(미상) 가다가 듣노라.</div> <div> 사슴(탈 쓴 광대)이 솟대에 올라서 해금을 켜는 것을 듣노라. </div> <div>얄리얄리 얄라셩 얄라리 얄라</div> <div className={styles.textGap}></div> <div>가다 보니 배불룩한 술독에 독한 술을 빚는구나.</div> <div> 조롱박꽃 모양 누룩이 매워 (나를) 붙잡으니 내 어찌 하리이까.[1] </div> <div>얄리얄리 얄라셩 얄라리 얄라</div> </div> <Image src={IMAGE_SRC.neotubeImage.src} alt={IMAGE_SRC.neotubeImage.alt} width={100} height={100} /> <div className={styles.detailContentGoodOrBad}> <div className={styles.detailGoodContainer}> <Image src={IMAGE_SRC.badImage.src} alt={IMAGE_SRC.badImage.alt} width={100} height={100} /> <div className={styles.detailBadText}>24</div> </div> <div className={styles.detailGoodContainer}> <Image src={IMAGE_SRC.goodImage.src} alt={IMAGE_SRC.goodImage.alt} width={100} height={100} /> <div className={styles.detailGoodText}>12</div> </div> </div> <div className={styles.detailButtonsContainer}> <button className={styles.detailButton}> <Image src={IMAGE_SRC.hamberger.src} alt={IMAGE_SRC.hamberger.alt} width={100} height={100} /> <div>목록으로</div> </button> <button className={styles.detailButton}> <Image src={IMAGE_SRC.pencil.src} alt={IMAGE_SRC.pencil.alt} width={100} height={100}/> <div>수정하기</div> </button> </div> </div> </div> </div> </div> ); } require 를 넣으면 왜 오류인지 require 어떤 기능인지 알 수 있을까요ㅕ?>
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
어느 날 부턴가 이 로그 메시지들이 나오는데, 없애는 방법이 있을까요?
코드팩토리 디스코드에 질문하면 더욱 빠르게 질문을 받아 볼 수 있습니다![코드팩토리 디스코드]https://bit.ly/3HzRzUM - 학습 관련 질문을 남겨주세요. 상세히 작성하면 더 좋아요! - 먼저 유사한 질문이 있었는지 검색해보세요. - 서로 예의를 지키며 존중하는 문화를 만들어가요. - 잠깐! 인프런 서비스 운영 관련 문의는 1:1 문의하기를 이용해주세요.
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
여행 숙박 사이트 부분 질문있습니다.
안녕하세요 강의를 듣다가 여행 숙박 사이트 부분의 강의를 보고 싶은데 이 부분은 어디서부터 보면 되나요?
-
미해결[코드팩토리] [중급] Flutter 진짜 실전! 상태관리, 캐시관리, Code Generation, GoRouter, 인증로직 등 중수가 되기 위한 필수 스킬들!
auth 관련 에러
7강 마지막 들으면서 적용하는데분명 에뮬레이터도 정상동작인데 dio.dart의 onError함수에서 계속 401 auth에러가 발생한다고 표시가 돼서 콘솔로 디버깅을 했습니다. 그런데 마지막 resending하는 부분까지 정상 도달은 하지만 onResponse의 콘솔은 뜨지않고 재시작해서 accessToken을 다시 발급 받았음에도 계속 onError에서 401auth 에러가 발생합니다. 어떤 부분이 문제일까요[요약]토큰만료 =>홈 스크린에 데이터 사라짐 => 재시작 => 홈 스크린에 데이터 불러와짐 => 문제발생 데이터는 불러와지는데 디버그 콘솔에 REQ랑 ERROR표시남(401 AUTH 관련 에러) => 재시작 => 동일 에러 무한[에러 내용]I/flutter ( 4232): [REQ] [GET] http://10.0.2.2:3000/restaurant/I/flutter ( 4232): [ERROR] [GET] http://10.0.2.2:3000/restaurant/I/flutter ( 4232): [ERROR] [MESSAGE] This exception was thrown because the response has a status code of 401 and RequestOptions.validateStatus was configured to throw for this status code.I/flutter ( 4232): The status code of 401 has the following meaning: "Client error - the request contains bad syntax or cannot be fulfilled"I/flutter ( 4232): Read more about status codes at https://developer.mozilla.org/en-US/docs/Web/HTTP/StatusI/flutter ( 4232): In order to resolve this exception you typically have either to verify and fix your request code or you have to fix the server code.dio.dartimport 'package:dio/dio.dart'; import 'package:flutter_secure_storage/flutter_secure_storage.dart'; import 'package:section2/common/const/data.dart'; class CustomInterceptor extends Interceptor { final FlutterSecureStorage storage; CustomInterceptor({ required this.storage, }); /// 1) 요청 보낼 때 /// 요청이 보내질때마다 /// 만약에 요청의 Headers에 accessToken이 true 이면 /// 실제 토큰을 가져와서 기존 accessToken값을 삭제하고 { /// authorization : Beader $토큰} 값을 추가 @override void onRequest( RequestOptions options, RequestInterceptorHandler handler) async { print('[REQ] [${options.method}] ${options.uri}'); if (options.headers['accessToken'] == 'true') { options.headers.remove('accessToken'); final accessToken = await storage.read(key: ACCESS_TOKEN_KEY); options.headers.addAll( {'authorization': 'Bearer $accessToken'}, ); } if (options.headers['refreshToken'] == 'true') { options.headers.remove('refreshToken'); final refreshToken = await storage.read(key: REFRESH_TOKEN_KEY); options.headers.addAll( {'authorization': 'Bearer $refreshToken'}, ); } return super.onRequest(options, handler); } /// 2) 응답 받을 때 @override void onResponse(Response response, ResponseInterceptorHandler handler) { print( '[RES] [${response.requestOptions.method}] ${response.requestOptions.uri}'); super.onResponse(response, handler); } /// 3) 에러 났을 때 @override void onError(DioException err, ErrorInterceptorHandler handler) async { // 401에러 났을 때 (status code) // 토큰을 재발급 받는 시도를하고 토큰이 재발급되면 // 다시 새로운 토큰을 요청한다. print('[ERROR] [${err.requestOptions.method}] ${err.requestOptions.uri}'); print('[ERROR] [MESSAGE] ${err.message}'); // refreshToken이 없는 경우 final refreshToken = await storage.read(key: REFRESH_TOKEN_KEY); if (refreshToken == null) { // 에러 던질때는 handler.reject()사용 return handler.reject(err); } final isStatus401 = err.response?.statusCode == 401; final isPathRefresh = err.requestOptions.path == '/auth/token'; if (isStatus401 && !isPathRefresh) { final dio = Dio(); try { final res = await dio.post( 'http://$ip/auth/token', options: Options( headers: { 'authorization': 'Bearer $refreshToken', }, ), ); final accessToken = res.data['accessToken']; final options = err.requestOptions; //기존 토큰 변경 options.headers.addAll({ 'authorization': 'Bearer $accessToken', }); await storage.write(key: ACCESS_TOKEN_KEY, value: accessToken); // 에러난 요청options에 토큰값을 신규로 변경하여 재전송 final resending = await dio.fetch(options); return handler.resolve(resending); } on DioException catch (e) { return handler.reject(e); } } return handler.reject(err); } }
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
JS 파일이 IDE(Cursor)에서 출력되지 않아요...
사진과 같구요. Node.js, Code Runner 설치했습니다.오류 코드도 구글링해 봤는데 해결 방법을 못 찾겠어서 올려 봅니당...
-
해결됨[코드캠프] 부트캠프에서 만든 '완벽한' 프론트엔드 코스
tsconfig.json 파일에 대해 질문있습니다.
안녕하세요 타입스크립트 강의를 보고 있는 중인데 영상대로 tsconfig.json 파일에{ "$schema": "https://json.schemastore.org/tsconfig", "_version": "2.0.0", "compilerOptions": { "lib": ["dom", "dom.iterable", "esnext"], "module": "esnext", "moduleResolution": "bundler", "target": "es2015", "allowJs": true, "allowSyntheticDefaultImports": true, "esModuleInterop": true, "isolatedModules": true, "jsx": "react-jsx", "noEmit": true, "noFallthroughCasesInSwitch": true, "resolveJsonModule": true, "skipLibCheck": true, "strict": true } }이렇게 넣으니 아래 이미지처럼 오류가 뜨는데 찾아봐도 왜 오류가 뜨는지 잘 모르겠습니다.