안드로이드 설정 과정이 전체가 약간 헷갈려있게 되어있는 것 같아서,,, 이게 맞는지 궁금해서 남깁니다 npm i react-native-splash-screen --save 을 통해서 npm을 설치한다 앱로고와 스플래시 화면을 준비해준다 아래 사이트에서 앱 로고를 만들어준다 EasyAppIcon - Create Mobile App Icon 앱 아이콘들을 android폴더에 넣어준다 android/app/src/main/res의 아래에 mipmap-hdpi~로 시작하는 파일들에 이름에 맞춰서 앱 아이콘들을 넣어준다 스플래시 화면(아마도 이미지)을 android/app/src/main/res/drawable폴더에 넣어준다 반드시 launch_screen이라는 이름으로 넣어준다 -> launch_screen.png android/setting.gradle에 가서 아래처럼 설정해준다 include ':react-native-splash-screen' project(':react-native-splash-screen').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-splash-screen/android') android/app/build.gradle (113번 줄) implementation project(':react-native-splash-screen') android/app/src/main/java/com/coin/MainActivity.kt에 7번째 줄에 import android.os.Bundle; import org.devio.rn.splashscreen.SplashScreen; android/app/src/main/java/com/coin/MainActivity.kt에 12~15번째 줄에 override fun onCreate(savedInstanceState: Bundle?) { SplashScreen.show(this) super.onCreate(null) } . . . /Main Application .kt (14번 줄)에 import org.devio.rn.splashscreen.SplashScreenReactPackage . . . /Main Application .kt (24번 줄)에 SplashScreenReactPackage() 스플래시 화면을 숨겨주기 위해 App.tsx에 아래 내용을 추가해준다 useEffect(() => { setTimeout(() => { SplashScreen.hide(); }, 500); }); // 의존성 배열 없음 - 매 렌더링마다 실행됨 values.colors.xml파일을 만들어서 아래 내용을 추가해준다 <?xml version="1.0" encoding="utf-8"?> <resources> <!-- 다른 색상들이 있다면 유지하세요 --> <color name="status_bar_color">#000000</color> <!-- 원하는 색상 코드로 변경 가능 --> </resources> 질문1. 잘 나오는 것 같기는 한데 총 과정이 이게 맞을까요? 질문2. 그리고 스플래시화면이 뜨기 전에 앱 로고가 전체적으로 뜨고(흰바탕에 설정한 앱 로고가 중앙에 작게 나옴) 스플래시 화면이 뜨는데 원래 이런거 맞나요? 질문3. 그리고 values/colors.xml파일은 왜 설정해주는 건가요?
iOS에서 splash screen을 RN에서 설정해보기 위해서 RN으로 작업을 해봤는데요,,, AppDelegate파일에서 import RNSplashScreen에서 pod install을 하고 진행을 했는데도 모듈을 찾을 수 없다고 뜨더라구요ㅠ podfile에는 RNSplashScreen가 있는거는 확인했습니다.. 그러므로 설치는 된 거 같은데,, 프로젝트가 모듈을 못찾는 것 같아요ㅠ 다른 프로젝트 참고해보려고 해도, 저는 AppDelegate.swift파일이고 .h파일이나 .m파일은 없어서 여기서 설정을 하지를 못하겠어요ㅠ (cf. 찾아보니까 해당 라이브러리가 옛날버전이고 지금 RN의 iOS랑 호환이 되지 않아서 발생하는 문제 같은데, 이때 브릿징 헤더를 설치해야 한다고 본거 같아요 => 이 문제가 맞을까요?) 강의가 android기준으로만 설명되서,,, 혹시 RN으로 어떻게 iOS 스플래시 화면을 설정해야 하는걸까요? 학습에 관련된 질문만 해주세요. 질문은 상세하게 무엇이 궁금한지 작성해주세요. 질문은 '마크다운'을 사용하여 할 수 있습니다. 유사한 질문이 있었는지 살펴보고 질문 해주세요. 부담갖지 말고 강의에서 궁금하신 점 전부 질문해주세요 :)
안녕하세요 return에 대해 질문이 있습니다. const sum = (a, b) => { return a + b } const result = sum(1, 2); console.log(result) 이렇게 간단한 코드에서는 a와 b가 더한 값이 반환되어 호출한 부분으로 전달되서 5가된다라고는 알고 있는데 투두리스트 예제에서 예를 들어 const onUpdate = (targetId) => { setTodos( todos.map((todo) => { if (todo.id === targetId) { return { ...todo, isDone: !todo.isDone, }; } return todo; }) ); }; 이렇게 return {...todo, isDone: !todo.isDone} 부분과 return todo 이 부분이 조금 이해가 되지 않는데 이 부분은 return을 왜 사용하였고 또 어디로 반환이 되는것인지 궁금합니다.
제 프로젝트에 채팅 기능을 넣고 싶어서 듣게 되었습니다. (일반 js, html로 이루어진) view 부분은 아무거나 제가 해서 하면 되겠지만 이 채팅 서버를 api처럼 사용할 예정이에요 이것을 배포할 때는 어떤식으로 해줘야 하는지 잘 모르겠네요. spring 은 톰캣으로 webapp에 war를 넣어서 해당 컨텍스트를 실행시켜주면되고 플라스크는 wsgi 를 사용해서 requirement.txt 에 외부라이브러리 세팅해주고 돌리면 돌아갔는데 이 강의 서버는 리눅스에서 어떤식으로 리눅스에서 돌리면 될까요 ? 도커를 사용할 예정입니다..! 이 웹 어플리케이션을 배포해서 돌리기위한 절차가 궁금합니다!
2강에서 서버 실행시 에러가 발생합니다. 무료 게임 강좌에서는 정상적으로 실행되었습니다. node : 10.15.3 nuxt: 2.8.1 vue: 2.6.10 vue-server-renderer: 2.6.10 [로그 정보] PS C:\vue-nodebird\ch1\front> npm run dev > vue-nodebird-front@1.0.0 dev C:\vue-nodebird\ch1\front > nuxt WARN Address localhost:3000 is already in use. 11:49:13 i Trying a random port... 11:49:13 ╭─────────────────────────────────────────────╮ │ │ │ Nuxt.js v2.8.1 │ │ Running in development mode (universal) │ │ │ │ Listening on: http://localhost:58015/ │ │ │ ╰─────────────────────────────────────────────╯ i Preparing project for development 11:49:14 i Initial build may take a while 11:49:14 √ Builder initialized 11:49:14 √ Nuxt files generated 11:49:14 ERROR Unexpected token . 11:49:14 const r=Object.create(null),i=e=>globalThis.process?.env||undefined||globalThis.Deno?.env.toObject()||globalThis.__env__||(e?r:globalThis),s$1=new Proxy(r,{get(e,o){return i()[o]??r[o]},has(e,o){const E=i();return o in E||o in r},set(e,o,E){const b=i(true);return b[o]=E,true},deleteProperty(e,o){if(!o)return false;const E=i(true);return delete E[o],true},ownKeys(){const e=i(true);return Object.keys(e)}}),t=typeof process<"u"&&process.env&&process.env.NODE_ENV||"",B=[["APPVEYOR"],["AWS_AMPLIFY","AWS_APP_ID",{ci:true}],["AZURE_PIPELINES","SYSTEM_TEAMFOUNDATIONCOLLECTIONURI"],["AZURE_STATIC","INPUT_AZURE_STATIC_WEB_APPS_API_TOKEN"],["APPCIRCLE","AC_APPCIRCLE"],["BAMBOO","bamboo_planKey"],["BITBUCKET","BITBUCKET_COMMIT"],["BITRISE","BITRISE_IO"],["BUDDY","BUDDY_WORKSPACE_ID"],["BUILDKITE"],["CIRCLE","CIRCLECI"],["CIRRUS","CIRRUS_CI"],["CLOUDFLARE_PAGES","CF_PAGES",{ci:true}],["CODEBUILD","CODEBUIL SyntaxError: Unexpected token . at new Script (vm.js:80:7) at createScript (vm.js:274:10) at Object.runInThisContext (vm.js:326:10) at Module._compile (internal/modules/cjs/loader.js:664:28) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3) at Module.require (internal/modules/cjs/loader.js:637:17) at require (internal/modules/cjs/helpers.js:22:18) at Object.<anonymous> (node_modules\@nuxt\friendly-errors-webpack-plugin\node_modules\consola\lib\index.cjs:2:13) at Module._compile (internal/modules/cjs/loader.js:701:30) at Object.Module._extensions..js (internal/modules/cjs/loader.js:712:10) at Module.load (internal/modules/cjs/loader.js:600:32) at tryModuleLoad (internal/modules/cjs/loader.js:539:12) at Function.Module._load (internal/modules/cjs/loader.js:531:3)
강사님 안녕하세요! 리액트 강의 완강 후, 리액트로 개인 프로젝트를 진행하던 중에 리렌더링 관련하여 궁금한 점이 생겨 질문드립니다. 컴포넌트가 리렌더링 되는 조건이 1. 부모 컴포넌트가 리렌더링 될 때 (props 포함) 2. 컴포넌트의 state가 변경되었을 때 이렇게 2가지라고 봤는데요! 문제상황 : Input의 state가 변경되면 Button이 재렌더링됨 부모-자식 관계가 아닌 형제관계인 <Input /> 컴포넌트와 <Button /> 가 서로 재렌더링을 유발하는 원인이 무엇일까 해서 질문드립니다. 실제 브라우저DOM에 커밋되지는 않고 각 컴포넌트 내부에서 console을 찍어봐도 나오지 않는 것을 보아하니 렌더링까지만 되는 것 같아요... (chrome react확장 프로그램에서 highlight됨) 제가 여러가지 케이스로 테스트 해 본 결과, (각 컴포넌트는 props도 받지 않고 내부 state만 있음) div 태그로 감싸져 있을 때 서로 재렌더링을 유발하는 것 같아 아무리봐도 이상해서요 ㅠㅠ 문제 발생코드 <div> <Input /> </div> <div> <Button /> </div> 수정한 코드 <Input /> <Button />
공익을 위해 첨부합니다... Windows의 경우 Mac과 다른 방식으로 경로가 설정되는 탓인지 상품 업로드 후 홈화면에서 상품이미지가 엑박으로 보이는 오류가 발생합니다. 그동안 질문&답변 게시판에 올라온 모든 질문 및 답변을 참고해 해결을 해보고자 하였는데요, 그 어느 답변을 참고해도 해결이 되지 않아 눈물을 머금고 10분짜리 강의에 몇시간동안 매달려있었습니다. 그렇게 알게된 방법은... 저의 경우 (1) 상품 업로드 화면에서 사진을 첨부한 후 개발자 도구의 Network에서 첨부한 사진의 링크를 보면 http://localhost:8080/upload/(상품이름).jpg 이런 식으로 뜹니다. (2) 업로드 버튼을 누른 후 홈 화면으로 이동 (3) 개발자 도구의 Network에서 새롭게 업로드된 사진의 링크를 보면 http://localhost:3000/upload/(상품이름).jpg 이런 식으로 뜹니다. 이를 해결하기 위해, grab-market-web 폴더 (사용자에 따라 폴더 이름은 다를 수 있음) → src → main → index.js에서 product-card 의 product-img 부분을 확인합니다. <div> <img className="product-img" src={`${API_URL}/${product.imageUrl}`} ></img> </div> src 링크를 다음과 같이 변경합니다. 그럼 상품 업로드 화면에서의 이미지와 홈화면에서의 이미지가 localhost:8080로 동일해지기 때문에 상품 사진이 정상적으로 보입니다. 물론 이렇게 코드를 수정하고 나면 기존에 저장해놨던 상품들의 이미지에 엑박이 뜹니다. (images/products/__ 이런 식으로 폴더 내 이미지와 연결해둔 링크들이 http://localhost:8080/images/products/__ 처럼 변경되니 엑박이 뜨는 것으로 추정됩니다.) 어차피 이제 사진을 서버에 직접 업로드하는 방법으로 진행될 예정이니 그냥 기존의 상품들은 삭제하시면 될 것 같습니다. (DB Browser → 데이터 탐색 → 기존 상품 레코드 선택 → 현재 레코드 삭제하기 → 변경사항 저장하기 이용하면 삭제 가능합니다.) 저와 동일한 이유로 엑박 뜨는게 아니라면... 저도 모르겠습니다. 방법을 찾으시면 공유해주세요. 파이팅! +) 상품 상세페이지를 들어가면 다시 엑박이 뜹니다. <div id="image-box"> <img src={`${API_URL}/${product.imageUrl}`} /> {console.log(product.imageUrl)} </div> 이때는 product 폴더의 index.js에 들어가여 image-box 부분을 다음과 같이 변경해주세요. 원리는 위와 동일합니다. 그러면 상세페이지에서도 정상적으로 작동합니다.
