FE 61

JS - Throttle 와 Debounce

왜 써야 하는데?짧은 시간에 많은 이벤트가 발생하는 경우 이벤트 핸들러가 과도하게 호출되어서 성능의 문제를 발생시키기 때문에! 나아가 사용자 경험을 헤칠 수 있다  즉! 이벤트 핸들러가 많은 연산을 수행하는 경우에 대해서 제약을 걸어 제어 할 수 있는 수준으로 이벤트를 발생시키는 것을 목표로 함! Throttle입력 주기를 방해하지 않고 일정시간 동안 입력을 모아서 한번에 출력을 제한여러 번 발생하는 이벤트를 일정 시간 동안 최대 한 번만 실행되도록이벤트 발생 시간 이후 일정 시간 동안만 기다리고 이벤트를 실행 후 재차 기다린다는 점입력이 시작되면 일정주기로 게속 실행예시 - 무한 스크롤Debounce입력 주기가 끝나면 출력여러번의 이벤트에서 가장 마지막 이벤트만 실행되도록 만드는 개념마지막 이벤트에서 ..

FE/개념정리 2023.02.02

JS - 스크롤에 따른 DOM요소의 좌표 찾기

수직상의 위치관련 APIelement.getBoundingClientRect() : 뷰포트를 이루는 가장자리와 element와의 거리 정보를 가지고 있는 객체를 리턴하는 메서드입니다. 반환하는 객체에는 top, bottom, left, right 프로퍼티가 있는데 이게 각각 뷰포트와의 방향별 거리를 의미합니다.window.pageYOffset : 수직 방향으로 얼마나 스크롤했는지 픽셀 단위로 알려주는 window의 속성입니다. window.scrollY와 같은 값을 가집니다.위치 시작점에 따른 거리 구하기// 수직으로 스크롤한 정도 + 뷰포트와의 거리const distanceFromHtml = child.getBoundingClientRect().top + window.pageYOffset;// 뷰포트와..

FE 2023.01.17

JS - 원시 타입 vs 참조 타입

원시타입 (Primitive Type)변수들의 데이터 복사가 일어날 때 메모리 공간을 새로 확보하여 독립적인 값을 저장string, number, bigint, boolean, undefined, ES6부터 추가된 symbol변수에 할당될때, 메모리의 고정 크기로 원시 값을 저장값이 변하지 않는 불변성재할당시, 새로운 메모리에 재할당한 값이 저장되고 변수가 가리키는 메모리가 달라졌을 뿐이다. 참조타임 (reference Type)메모리에 직접 접근하지 않고 메모리의 위치 (주소)에 대한 간접적인 참조를 통해 메모리에 접근원시 타입을 제외한 나머지 ( 배열, 객체, 함수 등등)데이터 자체는 별도의 메모리 공간에 저장되고 , 변수에 할당 시 데이터에 대한 주소가 저장됨주소는 특별한 동적인 데이터 보관함(he..

FE/개념정리 2023.01.17

REACT-NATIVE- ios Splash

1. react-native-splash-scr yarn add react-native-splash-screen 2. cd ios/ pod install 실행 3. App.tsx에서 스플래쉬 종료 코드 추가해주기 import SplashScreen from "react-native-splash-screen"; function App() { React.useEffect(() => { try { setTimeout(() => { SplashScreen.hide(); /** 추가 **/ }, 2000); /** 스플래시 시간 조절 (2초) **/ } catch (e) { console.warn("에러발생"); console.warn(e); } }); return ( ); } export default App;..

FE/REACT_NATIVE 2022.10.24

REACT-NATIVE - 아이폰 기본 폰트 사이즈 문제

시뮬레이터를 통해서 앱을 개발하다가 알람 기능을 추가하려고 실기기로 연결했는데 갑자기 모든 폰트가 엄청 엄청 작게 보이는 문제가 발생했다. 시뮬레이터랑 실기기랑 차이가 있나 싶어서 이리저리 확인해봤는데 실제로 디자인이랑 실기기랑 사이즈 크기가 너무 많이 났다ㅠㅠ 다른 건 다 괜찮은데 왜 ,, 폰트 사이즈만 이러지? 회사 사람들 다 불러서 다 같이 고민했는데 답이 안 나와서 한참을 우울해하고 있었는데 문득 아이폰 기본 폰트 설정이 떠올랐고 확안해 보니 그것 때문이었다!!!! ㅠㅠㅠㅠㅠㅠ세상에나 사람들 마다 각자 아이폰 기본 폰트 설정을 다르게 하는걸 잠시 망각,,,, 그래서 구글링 해보니까 기본적으로 리액트 네이티브 에서 사용하는 는 allowFontScaling 프로퍼티가 true로 되어있어서 설정된 폰..

FE/REACT_NATIVE 2022.10.20

RN에러 - Signing for "TOCropViewController-TOCropViewControllerBundle" requires a development team.

xcode에서 실기기로 테스트하고 있는데 오류가 발생했다 ㅠㅠ Signing for "TOCropViewController-TOCropViewControllerBundle" requires a development team. 빌드에 실패 하면서 이런 오류가 떴다. ✔️ 해결 방안 podfile에서 코드 추가 필요 post_install do |installer| installer.pods_project.targets.each do |target| target.build_configurations.each do |config| config.build_settings['EXPANDED_CODE_SIGN_IDENTITY'] = "" config.build_settings['CODE_SIGNING_REQUIRE..

FE/에러노트 2022.10.11

RN에러 - stored properties cannot be marked potentially unavailable with '@available' (카카오 로그인 구현 중 ios 업데이트 문제)

ios 업데이트를 너무 쉽게 했나,, 실기기에서 실행하려는데 카카오 로그인 구현 부분에서 오류가 났다 xcode에서 빌드를 하는 순간 stored properties cannot be marked potentially unavailable with '@available' 어쩌고 하는 에러가 났다. 업데이트 문제있은 거 같아서 이리저리 찾아보다가 일단 임시방편의 해결 방법을 찾았다. ✔️ 해결 방안 내가 선택한 방법은 Xcode를 열어 Pods 폴더에서 KakaoSDKAuth의 AuthController.swift의 코드 수정 두 가지를 수정해야 하는데 1. public var presentationContextProvider: Any? 코드 추가 2. if #available(iOS 13.0, *) { ..

FE/에러노트 2022.09.30