eunoia

한 컴퓨터에서 두 개의 프로젝트가 동작할 수 있도록 하고 싶었다.기존 8081 말고 새로운 포트를 시작하는 방법은 간단하다! npx react-native start --port=8082 (캐시 최적화를 하려면 뒤에 --reset-cache 이 문장을 붙여주면 된다.npx react-native start --port=8082 --reset-cache 다만, 안드로이드/ ios를 시작할 때에도 port를 명시해주어야 한다.그렇게 하지 않으면 열려있는 port= 8081에 연결되거나 새로 터미널이 열리면서 8081 포트가 실행되었다.나의 경우 조금 시행착오를 겪었었는데, 첫 번째 당황!1.  npm run android / npm run ios를 하면 8081에 연결됨2. npm run-android --..

새로 만든 프로젝트가 최신 업데이트된 내용이라서 그런지 안드로이드 스튜디오에서 ./gradlew clean을 하면 successful인데,try sync를 하려고만 하면 The project is using an incompatible version (AGP 8.8.0) of the Android Gradle plugin. Latest supported version is AGP 8.5.1이 에러가 나온다... 검색해 보니 안드로이드 스튜디오 버전과 맞지 않은 것(?)확인하는 방법 : Mac 기준!저걸 눌러보면 확인해 준다.요렇게!업데이트 글자를 누르면 안드로이드 스튜디오 웹사이트로 이동하는데,설치 전에 기존 앱은 삭제하고 받는 것이 좋다.안드로이드 스튜디오를 삭제 후 새 버전으로 업데이트하고, 실행하면..

프론트엔드 2년 차현재도 공부는 진행 중 학원 다닐 때 만들었던 포트폴리오를 다시 만들어야겠다는 생각이 들었다!내가 구현할 수 있는 부분을 모아 한 프로젝트에 담을 예정이다.이전과 달리 백엔드를 구성해 보기도 하고, 피그마라는 디자인 툴을 이용해보기도 할 것이다. 1. 프로젝트 생성!npx react-native init AwesomeProject오랜만에 만들어서인지 바로 문제가 발생했다.Copying template에서 넘어가지 않는다....(에러 내용 : Copying templateerror Installing pods failed. This doesn't affect project initialization and you can safely proceed.However, you will need ..

기존 앱에서 Webview를 이용하여 리액트 페이지와 연결하여 사용 중이었다.리액트로 만든 페이지를 앱에서 특정 버튼을 눌렀을 때 보여주는 방식이다.문제! : 앱에서 버튼을 누르면 특정 url로 이동해야 한다.! 이경우를 설계 당시 생각했다면 webview의 source에 특정 url을 받는 경우를 특정하여 바로 이동시켰겠지만, 이미 배포된 이후이고,,무조건 리액트 페이지에서 해당 동작을 수행해야 하는 상황이다.처음에는 window.open 메서드를 생각했지만.이 경우는 버튼을 누르는 등의 동작이 있어야 해당 페이지로 이동이 가능했다.useEffect에 담아도 마찬가지로,,, 앱 내에서는 동작하지 않는다. 그러다가 발견하게 된 방법!window.location.href 이다 이것은 특정 url 페이지로 ..

패키지에 있는 그래들 버전이 낮아서 안드로이드에서 앱이 실행되지 않는 현상이 발생되었다...!!!8로 업데이트 되었을 때 중요한 점이 namespace가 필수인 것..!업데이트를 할 때에는 안드로이드 스튜디오에서 진행하였다. 시행착오 끝에 해결된 방법을 적어본다. 1. build.gradle 파일에서buildToolsVersion = "34.0.0"compileSdkVersion = 34targetSdkVersion = 34변경한다.2. gradle-wrapper.properties 파일에서distributionUrl=https\://services.gradle.org/distributions/gradle-8.2-all.zip내가 올리고자 하는 버전으로 변경우선 이렇게 하고 ./gradlew clean을..

또는 에서 리스트의 길이가 길지 않을 때에도 ios에서는 스크롤 효과가 적용된다. 아래로 내려지는 게 영 보기 안 이뻐서 알아보던 중 너무 간단한 방법그냥 bounce 속성을 false로 하면 된다. bounces={false}  예) bounce={false} ... />  bounce={false}... >

useCallback, useMemo 등의 사용 자주 렌더가 일어나는 경우에는 매번 변수 또는 함수 재생산 너무 자주 일어난다면 비정상적인 memory를 가지게 되기 때문에 자주 발생하는 경우 useMemo, useCallback 등 사용 권장 Image 사이즈 처리 : 이미지의 사이즈를 명확히 명시하지 않아 render가 무한히 호출됨. 가급적이면 정수로 되어있는 width, height값 선언 권장 // 또는 FastImage 사용

ThunkAction과 ThunkDispatch는 Redux Thunk 미들웨어와 관련된 개념이다. Redux Thunk는 Redux의 비동기 작업을 관리하기 위해 사용되는 미들웨어로, 액션 생성자가 함수를 반환할 수 있게 해 준다. 이를 통해 액션 생성자 내에서 비동기 로직을 실행하고, 완료되면 일반 액션 객체를 디스패치할 수 있다. ### ThunkAction `ThunkAction`은 Redux Thunk 미들웨어에서 사용되는 타입이다. TypeScript와 함께 Redux를 사용할 때, 액션 생성자에서 반환되는 함수의 타입을 정의할 때 사용된다. `ThunkAction` 타입은 비동기 작업의 결과를 처리하기 위해 사용되며, 일반적으로 다음 네 가지 파라미터를 받는다: - `ReturnType`: ..

이미지 파일의 내용을 변경했음에도 불구하고, 변경 전 이미지가 표시되는 이유는 캐시(cache) 때문일 수 있다. 이미지 파일은 일반적으로 로컬 저장소나 원격 서버에서 가져와서 표시되는데, 가져온 이미지는 성능 및 속도 향상을 위해 임시로 캐시에 저장될 수 있다. 캐시는 이전에 로드한 이미지를 저장해 두고, 동일한 파일 경로나 URL을 가진 이미지를 다시 요청할 때 이전에 캐시 된 이미지를 반환한다. 이로 인해 이미지가 변경되었음에도 불구하고 변경 전 이미지가 여전히 표시될 수 있다. 나는 러버독이라는 프로그램을 사용중이고, 파일 이름을 동일하게 저장, 파일 내용은 변경된 상황에서 앱기기에서 reset-cahce를 했음에도 이미지 파일의 내용이 변경되지 않는 경우가 있었다. 이런 경우 또 한 가지 생각해..

RESTful 기반 API를 이용한 웹 서비스 개발은 웹 애플리케이션을 구축하는 방법 중 하나다. 이 방법은 REST(Representational State Transfer) 아키텍처 스타일을 따르며, 클라이언트와 서버 간의 통신을 위한 API를 개발하는 것을 중점으로 한다. RESTful API는 웹 서비스의 리소스를 고유한 URI(Uniform Resource Identifier)로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 리소스에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행한다. 이를 통해 클라이언트는 HTTP 요청을 보내고, 서버는 해당 요청에 응답하여 필요한 데이터를 제공하거나 작업을 수행한다. 웹 서비스 개발에서 ..