티스토리

eunoia

검색하기

블로그 홈

eunoia

mifine.tistory.com/m

아름다운 생각 [개발 오답노트] [평범한 하루]

구독자: 1

방명록 방문하기

728x90

주요 글 목록

[study] 기존 포트 :8081 말고 새로운 포트를 시작하는 방법 한 컴퓨터에서 두 개의 프로젝트가 동작할 수 있도록 하고 싶었다.기존 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 --.. 공감수 2 댓글수 0 2025. 3. 21.
[study] The project is using an incompatible version (AGP 8.8.0) of the Android Gradle plugin. Latest supported version is AGP 8.5.1 새로 만든 프로젝트가 최신 업데이트된 내용이라서 그런지 안드로이드 스튜디오에서 ./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 기준!저걸 눌러보면 확인해 준다.요렇게!업데이트 글자를 누르면 안드로이드 스튜디오 웹사이트로 이동하는데,설치 전에 기존 앱은 삭제하고 받는 것이 좋다.안드로이드 스튜디오를 삭제 후 새 버전으로 업데이트하고, 실행하면.. 공감수 0 댓글수 0 2025. 3. 21.
[study] 포트폴리오 재구성! 새 프로젝트 만들기 시작 프론트엔드 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 .. 공감수 0 댓글수 0 2025. 3. 21.
[study] WebView->React->특정 Url 로 이동하는 방법 기존 앱에서 Webview를 이용하여 리액트 페이지와 연결하여 사용 중이었다.리액트로 만든 페이지를 앱에서 특정 버튼을 눌렀을 때 보여주는 방식이다.문제! : 앱에서 버튼을 누르면 특정 url로 이동해야 한다.! 이경우를 설계 당시 생각했다면 webview의 source에 특정 url을 받는 경우를 특정하여 바로 이동시켰겠지만, 이미 배포된 이후이고,,무조건 리액트 페이지에서 해당 동작을 수행해야 하는 상황이다.처음에는 window.open 메서드를 생각했지만.이 경우는 버튼을 누르는 등의 동작이 있어야 해당 페이지로 이동이 가능했다.useEffect에 담아도 마찬가지로,,, 앱 내에서는 동작하지 않는다. 그러다가 발견하게 된 방법!window.location.href 이다 이것은 특정 url 페이지로 .. 공감수 1 댓글수 1 2024. 11. 27.
[study] android gradle 7.4.2 -> 8.2.0 업데이트과정 패키지에 있는 그래들 버전이 낮아서 안드로이드에서 앱이 실행되지 않는 현상이 발생되었다...!!!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을.. 공감수 3 댓글수 1 2024. 11. 11.
[study] ios에서 스크롤 튕기는 효과 없애는 방법 또는 에서 리스트의 길이가 길지 않을 때에도 ios에서는 스크롤 효과가 적용된다. 아래로 내려지는 게 영 보기 안 이뻐서 알아보던 중 너무 간단한 방법그냥 bounce 속성을 false로 하면 된다. bounces={false} 예) bounce={false} ... /> bounce={false}... > 공감수 0 댓글수 0 2024. 7. 5.
[study] 앱 최적화 방법 useCallback, useMemo 등의 사용 자주 렌더가 일어나는 경우에는 매번 변수 또는 함수 재생산 너무 자주 일어난다면 비정상적인 memory를 가지게 되기 때문에 자주 발생하는 경우 useMemo, useCallback 등 사용 권장 Image 사이즈 처리 : 이미지의 사이즈를 명확히 명시하지 않아 render가 무한히 호출됨. 가급적이면 정수로 되어있는 width, height값 선언 권장 // 또는 FastImage 사용 공감수 0 댓글수 0 2024. 3. 25.
[study] ThunkAction ThunkAction과 ThunkDispatch는 Redux Thunk 미들웨어와 관련된 개념이다. Redux Thunk는 Redux의 비동기 작업을 관리하기 위해 사용되는 미들웨어로, 액션 생성자가 함수를 반환할 수 있게 해 준다. 이를 통해 액션 생성자 내에서 비동기 로직을 실행하고, 완료되면 일반 액션 객체를 디스패치할 수 있다. ### ThunkAction `ThunkAction`은 Redux Thunk 미들웨어에서 사용되는 타입이다. TypeScript와 함께 Redux를 사용할 때, 액션 생성자에서 반환되는 함수의 타입을 정의할 때 사용된다. `ThunkAction` 타입은 비동기 작업의 결과를 처리하기 위해 사용되며, 일반적으로 다음 네 가지 파라미터를 받는다: - `ReturnType`: .. 공감수 0 댓글수 0 2024. 3. 25.
[study] png 파일 사용, 이미지 파일의 내용을 변경했음에도 불구하고, 변경 전 이미지가 표시되는 이유 이미지 파일의 내용을 변경했음에도 불구하고, 변경 전 이미지가 표시되는 이유는 캐시(cache) 때문일 수 있다. 이미지 파일은 일반적으로 로컬 저장소나 원격 서버에서 가져와서 표시되는데, 가져온 이미지는 성능 및 속도 향상을 위해 임시로 캐시에 저장될 수 있다. 캐시는 이전에 로드한 이미지를 저장해 두고, 동일한 파일 경로나 URL을 가진 이미지를 다시 요청할 때 이전에 캐시 된 이미지를 반환한다. 이로 인해 이미지가 변경되었음에도 불구하고 변경 전 이미지가 여전히 표시될 수 있다. 나는 러버독이라는 프로그램을 사용중이고, 파일 이름을 동일하게 저장, 파일 내용은 변경된 상황에서 앱기기에서 reset-cahce를 했음에도 이미지 파일의 내용이 변경되지 않는 경우가 있었다. 이런 경우 또 한 가지 생각해.. 공감수 0 댓글수 0 2024. 3. 25.
[study] RESTful 기반 API를 이용한 웹 서비스 개발 RESTful 기반 API를 이용한 웹 서비스 개발은 웹 애플리케이션을 구축하는 방법 중 하나다. 이 방법은 REST(Representational State Transfer) 아키텍처 스타일을 따르며, 클라이언트와 서버 간의 통신을 위한 API를 개발하는 것을 중점으로 한다. RESTful API는 웹 서비스의 리소스를 고유한 URI(Uniform Resource Identifier)로 표현하고, HTTP 메서드(GET, POST, PUT, DELETE 등)를 사용하여 리소스에 대한 CRUD(Create, Read, Update, Delete) 작업을 수행한다. 이를 통해 클라이언트는 HTTP 요청을 보내고, 서버는 해당 요청에 응답하여 필요한 데이터를 제공하거나 작업을 수행한다. 웹 서비스 개발에서 .. 공감수 0 댓글수 1 2024. 3. 25.
[study] 최적화를 위한 Memorization 최적화를 위한 Memorization :기존에 수행했던 연산, 결과들을 어딘가에 저장한 뒤 동일한 입력값인 경우 재활용하는 것 useMemo : -첫 번째 인자 : 기억할 값을 리턴해주는 함수 -두 번째 인자 : dependency array const variableA = useMemo(()=>{}, [])//useEffect와 비슷한 사용법 (예) export const ComponentA = (props)=>{ //props.a=1, props.b=2; const variableA = useMemo(()=>{ return props.a+props.b }, [props.a, props.b]) }; useCallback: -첫 번째 인자 : 기열 할 함수를 리턴해주는 함수 -두 번째인자 : depend.. 공감수 0 댓글수 0 2024. 2. 15.
[study] 왜 hook을 만들었는가 ?(자주 사용하는 hook) 1. 컴포넌트 간 상태 관련 로직 재사용하기 어려움 매번 같은 상태 관리 로직을 copy&paste 공통화되지 않다 보니 컴포넌트마다 변경사항을 수정해야 하는 어려움 2. 컴포넌트가 커질수록 복잡해지는 로직 단일 책임 원칙에서 벗어남 3. 혼란을 주는 class *hook 사용의 규칙 1. 모든 hook을 사용할 때 최상단에서 호출하여야만 함 함수호출 = 랜더링 2.react 함수에서만 hook을 사용해야 함 자주 사용하는 hook React-native -useWindowDimensions -useBackHandler : 안드로이드에서 back키를 눌렀을 때 / return으로 boolean값을 꼭 해주어야 한다. npm install @react-native-community/hooks (예) exp.. 공감수 0 댓글수 0 2024. 2. 15.
[study] Props-drilling 이란? Props-drilling 이란? 값을 계속해서 하위 컴포넌트의 props로 전달해 주는 것 >>굉장히 복잡해짐. 방지 방법 1. 리덕스 : 상태관리도구 state : React component에서 관리되고 있는 어떤 값 2. 상태관리 라이브러리 활용 redux, context API, recoil 등 공감수 0 댓글수 0 2024. 2. 15.
[study] Gradle 특정 버전 설치하기 gradle-wrapper.properties 파일>> distributionUrl=https\://services.gradle.org/distributions/gradle-{8.0.1}-all.zip 설치하고 싶은 버전이 7.6.1이면 distributionUrl=https\://services.gradle.org/distributions/gradle-7.6.1-all.zip ./gradlew wrapper --gradle-version {8.0.1} 설치하고 싶은 버전이 7.6.1이면 ./gradlew wrapper --gradle-version 7.6.1 완료 후 다시 빌드 호환되는 java가다른 경우 jdk를 맞추어설치해주어야 한다…. 끝이 없는설치지옥 ㅠ0ㅠ 설치 그만.. 에러 그만... 공감수 0 댓글수 0 2024. 2. 15.
[error] 안드로이드 스튜디오에서 빌드가 성공적으로 열리는데, 터미널에서 npm start를 실행하면 빌드 실패(buildFailed)가 발생 이러한 문제는 프로젝트의 의존성이나 환경 설정의 일관성 문제로 인해 발생할 수 있습니다. 다음 몇 가지 단계를 따라 문제를 해결해 볼 수 있다 프로젝트의 의존성을 설치해야 합니다. 프로젝트 디렉터리로 이동한 후에 다음 명령을 실행하여 필요한 의존성을 설치합니다: npm install cd ios && pod install 이후 다시 npm start 하면 열림 공감수 0 댓글수 0 2024. 2. 15.
[study] Object.values Object.values(obj) : Object.values()는 파라매터로 전달된 객체가 가지는 열거 가능한 속성의 값들로 구성된 배열을 반환한다. 배열의 값들이 순서는 오브젝트의 속성을 for in 구문등으로 반복한 결과와 동일. (예) var obj = { a: {a : 'somestring'}, b: 42, c: false, d: 'str' }; Object.values(obj); // [{a : 'somestring'}, 42, false, 'str'] 공감수 0 댓글수 0 2024. 2. 15.
[study] Sentry.captureMessage Sentry.captureMessage는 Sentry라이브러리에서 제공하는 함수로, 오류나 예외 상황이 아닌 메시지를 캡처하고 전송하는 데 사용된다. 이 함수를 사용하여 특정 메시지를 Sentry로 보내면, 해당 메시지는 Sentry 대시보드에서 볼 수 있다. Sentry.captureMessage를 사용하는 경우는 다양하다. 예를 들어, 애플리케이션에서 중요한 이벤트가 발생했을 때, 사용자의 특정 액션에 대한 정보를 기록하고 싶을 때, 또는 사용자들이 경험할 수 있는 특정한 문제점을 추적하고 싶을 때 사용할 수 있다. 이를 통해 애플리케이션의 동작을 모니터링하고 문제를 해결하는 데 도움이 된다. Sentry 대시보드는 Sentry.io라는 웹 기반 서비스에서 제공된다. Sentry.io 웹사이트에 로그.. 공감수 0 댓글수 0 2024. 2. 6.
[study] reactNative 이미지 uri 가 undefiend... 랜더링 속도로 인한 건지, 이미지를 불러오기도 전에 이미지가 포함된 뷰가 리턴되는 경우 이미지 uri가 undefined라며 에러창이 뜬다. 이미지 uri에는 Null Safety코드를 꼭 넣어주어야 한다. (Null Safety 란개발되는 코드가 Null 안전성을 보장한 상태로 개발되게 하고자 하는 개념이다.) 공감수 0 댓글수 0 2024. 2. 2.
[study] reactNative fontAwsome 사용법 npm i --save @fortawesome/react-native-fontawesome @fortawesome/fontawesome-svg-core react-native-svg cd ios && pod install npm i --save @fortawesome/free-solid-svg-icons npm i --save @fortawesome/free-brands-svg-icons npm i --save @fortawesome/free-regular-svg-icons 공감수 0 댓글수 0 2024. 2. 2.
[study] 키보드가 올라오면 TextInput이 가려지는 현상 해결 -KeyboardavoidingView - useEffect(() => { // 모달이 열릴 때마다 TextInput에 focus를 준다. if (modalVisible) { setTimeout(() => { textInputFocusRef.current?. focus(); }, 100); // 약간의 시간차가 있어야 TextInput에 focus가 먹힌다. }}, [modalVisible]); # 안드로이드 기기에서 모달창이 바깥인 경우 잘 보이지 않는 현상이 있다 // 그럴 때는 모달창 밖으로 를 위치하면 된다.\ 예) if (Platform.OS === "ios") { // ios는 그대로 return ( ); } else if (Platform.OS==='android'){ return ( ); 공감수 0 댓글수 0 2024. 2. 2.
[study] 구조분해 구조분해 const renderItem = ({ item: image, index }) => { const { id, uri } = image; //구조분해 : image를 쓸 수도 있고, id, uri도 단독으로 쓸 수 있다. ... } 공감수 0 댓글수 0 2024. 2. 2.
[study] Style || 내비게이션 || 리덕스 240111 Style - justifyContent : (좌-우) 컨테이너의 flex direction 방향에 따라 배치되는 flex 적용 대상들의 사이 간격과 주변의 여백을 지정. 부모컨테이너 내의 자식 엘리먼트들의 위치 지정. 컴포넌트들을 진행 방향에 따라서 어떻게 배치할지 지정 - alignItems : (위-아래) 부모 view 컴포넌트에 선언. flex가 적용 가능한 자식 요소들에 영향을 미친다. 컴포넌트들을 보조축을 따라 어떻게 배치할지를 지정 - alignSelf : 자식요소에 직접 지정 부모 컨테이너에 지정된 alignItems 속성값을 오버라이드 할 때 사용 내비게이션 탭 내비게이션 스택 내비게이션 드로어 내비게이션 # 탭 내비게이션 : 화면의 위나 아래에 탭이 있고, 탭을 누르면 탭과.. 공감수 0 댓글수 0 2024. 2. 2.
[study] mac 환경 세팅 중 만났던 에러 해결 현재 내 상황 컴퓨터 : 맥북 프로 16 -버전 : macOS 14.2.1 xcode : 15 ———————cli 문제 해결 ——————— 프로젝트 설치 전 : npm uninstall -g react-native-cli @react-native-community/cli //cli 삭제 프로젝트 설치 : npx react-native@latest init efenpx //후 최신 버전으로 재설치 react-native doctor // 문제상황 보고서 ———————Pod dependency 문제 해결——————— After upgrading to latest version of gems and cocoa pods. can run any pod commands * sudo gem uninstall acti.. 공감수 0 댓글수 0 2024. 1. 22.
[study] 240122 작은 단위 컴포넌트부터 만들기 Atomic design pattern : 작은단위부터 큰 단위까지 컴포넌트를 조합해 만들어가는 것 (Lego 조립과 비슷) React-natived에서 자주 사용하는 hook -useWindowDimensions // 디바이스별로 화면 크기를 조절할 수 있다. export const ComponentA = (props) => { const {window, height}=useWindowDimensions(); {…etc code} } -useBackHandler npm install @react-native-community/hooks -useAppState npm install @react-native-community/hooks -useNavigation, useRou.. 공감수 0 댓글수 0 2024. 1. 22.
[study] 중복함수실행방지 커뮤니티 기능 구현 중 글쓰기 버튼을 두 번 누르니, 글쓰기 함수가 두 번 실행되어 글이 중복 작성되는 오류를 발견하였다. 구글링 결과 해결방법은 1. state를 만들어 버튼 disabled 속성에 적용한다. 2. 버튼을 눌렀을 때 state값이 true로 변하게 하여 버튼이 눌리지 않게 한다. 3. 혹시나 눌렀을 경우를 대비해 버튼을 눌렀을 때 실행되는 함수에서도 실행되었을 때 state값이 true로 변하게 하여 버튼이 눌리지 않게 한다. //그러면 2번에서 혹시나 중복으로 누르게 되었어도 첫 번째 함수가 실행되었을 때 state값이 true 가 되므로 함수가 두 번 실행되지 않는다. 함수가 끝났을 때는 다시 state가 false로 바뀐다.(state의 기본값) 예) 1. state 값 설정 #.. 공감수 0 댓글수 0 2024. 1. 22.
[study] 240122 - 빈배열인 경우 확인 -->> [삼항 연산자 ] 리스트. length > 0 ? True : false - textInput 에서 placeholder 정렬 -->> padding이용 - 날짜 포맷 변경 -->> .format 사용 {moment(item.regDate). format('YYYY 년 MM월 DD일')} - 맨위로 기능 구현을 위해 useRef를 적용할 때 scrollView는 scrollTo , flatList는 scrollToOffset 이용! (flatList에 scrollTo 하면 undefined!) 공감수 0 댓글수 0 2024. 1. 22.
[study] swiper swiper가 적용이 안되어서, swipeable을 써보기도 하고, 별의별 방법을 며칠 동안 다 시도해 보았다. 결국 버튼을 이용해 개발 업데이트를 진행했는데, 역시나 계속 시도해 보고, 알아보니 해결되었다. 생각보다 간단해 허무하기도 했다. 해결 : swiper를 presseble이 감싸고 있었기 때문에 적용이 안되었던 것. 예) ... TouchableOpacity로 감싸도 마찬가지였다. 페이지에 컴포넌트가 두 개인 상황이었고, 아래 컴포넌트를 이용 중 위 컴포넌트를 눌렀을 때 아래 컴포넌트의 내용이 reset 될 수 있게 하려고 swiper가 있는 위 컴포넌트를 presseble로 감싸 onPress속성으로 setState를 적용하고 있었다. 예) setState(! state)}> ... *st.. 공감수 0 댓글수 0 2024. 1. 11.
[study] .map : array안에 object 형태로 추가하기 - 240111 @ map - array에 object 넣기 문제 : const [images, setImages] = useState([]); const images = res.assets.map( item => { const image= { name:item.fileName, type:item.type, uri:item.uri } return image }) setImages([image]) // images가 빈 배열이라 바로 setImages에 담았고, 하나의 array가 되었다. 다만, 기존에 있는 배열에 image를 추가하고 싶은 경우라면 const images = res.assets.map( item => { const image= { name:item.fileName, type:item.type, uri:.. 공감수 0 댓글수 0 2024. 1. 11.
[study] reactNative - 240111 장점 : -하나의 코드로 관리, 러닝커브 높은 React사용 -코드푸시로 빠른 업데이트 -> 비용절감 -FastRefresh -오픈소스 플랫폼 단점 : -일부기능 Native접근 필요 -오픈소스, 라이브러리 의존도 -성능 -잦은 업데이트 Event를 전달하기 위한 함수를 제공 -onCreate:애플리케이션 실행될 때 최초 호출 -onTerminate:애플리케이션 종료될 때 호출 Manifest : android 앱의 메타정보를 요약해서 선언해둔것 공감수 0 댓글수 0 2024. 1. 11.
[study] 라이브러리가 잘못 되었을 경우 패치하는 방법 >> Patch-package npm install 이후에 스크립트를 사용하여 버전을 비교 한 뒤 지정한 패치내용이 적용되는 것 설치방법 : 1) npm install --save patch-package 2)package.json 의 script 부분에서 postInstall 선언 3) npm i 4) npx patch-package react-native-kakao-share-link 5) rm -rf node_modules // 노드모듈 제거 후 npm i // 하게 되면 공감수 0 댓글수 0 2024. 1. 9.

728x90

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.