전체 글 232

JS - Throttle 와 Debounce

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

Frontend/JAVASCRIPT 2023.02.02

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

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

Frontend/JAVASCRIPT 2023.01.17

JS - 원시 타입 vs 참조 타입

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

Frontend/JAVASCRIPT 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;..

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

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

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..