2024년 11월 13일 Expo SDK52 버전이 출시되었습니다. 모르고 있다가 오늘 프로젝트를 진행하던 도중 업데이트를 진행하라해서 생각없이 진행했는데, 갑자기 알 수 없는 오류 발생하더군요뜬금없이, 이게 도대체 무슨 오류인지는 모르겠지만, 공식문서를 살펴봤습니다새로운 SDK가 출시되고 뭐 어쩌구 저쩌구 하는데,새 아키텍처로 앱 실행할때, 모든 타사 네이티브 라이브러리의 최신 버전을 사용하라고 합니다그래서 제안하는 방법이 npx expo-doctor@latest 를 통해서 마이그레이션 시 문제를 일으킬 수 있는 라이브러리 이슈 체크를 해보라해서, 바로 확인해봤습니다npx expo-doctor@latest 로 프로젝트의 문제점 분석 결과, 대부분 "패키지 버전 충돌", "호환되지 않는 Expo 버전에 ..

React에서 성능 최적화를 위한 useMemo, useCallback, React.memo 이해하기React에서 앱을 만들다 보면 성능이 중요한 문제가 될 때가 많습니다. 특히 많은 컴포넌트가 렌더링되거나 상태가 자주 변하는 경우, 불필요한 리렌더링을 방지하는 것이 성능을 향상시키는 데 큰 도움이 될 수 있습니다. 이를 위해 React는 useMemo, useCallback, React.memo라는 기능을 제공합니다. 이 세 가지는 모두 렌더링 성능을 최적화하는 데 사용되며, 각기 다른 상황에서 유용하게 사용됩니다.useMemouseMemo는 값을 메모이제이션(기억해두기)하는 훅입니다. 주로 계산 비용이 많이 드는 값을 다시 계산하지 않도록 할 때 사용합니다. 컴포넌트가 렌더링될 때마다 모든 코드가 실..

ESLint ESLint는 ECMAscript/javascript 코드에서 발견되는 패턴을 식별하고 보고하기 위한 도구로, 코드의 일관성과 버그 방지를 목표로 합니다Setupnpx expo lintEnvironment configurationExpo 앱의 경우, javascript 소스 코드가 여러 다른 환경에서 실행되기 때문에, ESLint 구성이 복잡해질 수 있습니다.이를 위해 ESLint에게 각 파일이 어떤 환경에서 동작하는지 알려줄 필요가 있습니다예를 들어, Node.js 환경에서 동작한다면 :/* eslint-env node */Run lint 규칙 위반 사항이 출력됩니다 npm run lintPrettier Prettier는 코드 스타일을 자동으로 일관되게 유지해주는 코드 포맷터입니다setup..

자바스크립트 이벤트(event)는 웹페이지에서 사용자가 어떤 행동을 할 때 발생하는 신호라고 생각하면 됩니다. 예를들어, 버튼을 클릭하거나 키보드 키를 누르거나, 화면을 스크롤 하는 등의 이벤트가 발생할 수 있습니다.이때 자바스크립트는 이러한 이벤트를 감지 할 수 있습니다이벤트를 등록하는 3가지 방법인라인 (Inline) HTML 속성에 직접 등록하기 onclick, onmouseover 와 같은 속성클릭이 방법은 간단하지만, HTML과 자바스크립트 코드가 섞여 복잡성이 증가할 수 있어 권장되지 않습니다Property Listener 자바스크립트 코드로 등록하기 element.onclick   const button = document.getElementById("myButton");button.oncl..

시작하기 앞서.HTML5에서 도입된 데이터 속성(data-)은 HTML 요소에 추가적인 정보를 저장할 수 있게 해주는 속성입니다이 속성은 렌더링 과정에서 무시되지만, JavaScript를 통해 동적으로 데이터를 처리하는 데 매우 유용합니다데이터 속성의 특징.렌더링에 영향을 미치지 않는다:data-로 시작하는 속성은 HTML 문서가 렌더링될 때 화면에 표시되지 않습니다. 즉, 이 속성 자체는 웹 페이지의 UI에 영향을 주지 않지만, JavaScript에서 이를 참조하여 다양한 기능을 구현할 수 있습니다.HTML 요소에 추가적인 정보를 저장:data-* 속성은 개발자가 특정 HTML 요소에 임의로 데이터를 저장하고, JavaScript를 통해 그 데이터를 사용할 수 있게 해줍니다.구현할 내용.호랑이사자펭귄#..

.textContent & .innerHTMLh2.textContent = "Feedback"h2.innerHTML = "Feedback"textContent : Feedback 요소가 화면에 노출이 됩니다innerHTML : 태그안에 텍스트만 반환되게 됩니다.setAttribute & .removeAttributeh2.setAttribute('class', "red");h2.removeAttribute("class"); removeAttribute("class") : ("삭제할 속성")setAttribute('class', 'item') : ("부여해줄 속성", "속성 이름")HTML 요소 스타일링h2.style.color = "red"h2.classList.add('red');// css.red { ..

자바 스크립트  사용법첫번째 방법은 HTML 파일 외부에 작성되어 있는 JS 파일을 가져온다는 의미입니다두번재 방법은 HTML 파일 내부에서 직접 script 코드를 작성하는 것 입니다어떤 방법이 더 낫다라고는 할 수 없고, 코드의 복잡도를 줄이기 위해선 첫번째 방법을 많이 사용합니다콘솔과 경고console.log('Hello world')alert('Hello world')콘솔로그 함수는 콘솔 화면에 메세지를 출력하는 용도로 사용되고, 보통 코드 중간중간 사용하여 디버깅하는 용도로 사용됩니다alert 함수는 브라우저에서 경고창을 띄우게 됩니다변수let i = 5;const j = "string";...let i = 10; //가능const j = "string 2" //불가능let 변수 할당은 이후에 ..

클라우드 (Cloud)우리가 알고 있는 클라우드(Cloud)라고 한다면, icloud나 Naver cloud, Google cloud 같이 우리가 가지고 있는 정보, 사진 (데이터) 를 저장하는 저장 공간이라는 개념으로 알고 계실 것 입니다. 사실 클라우드 인프라는 엄청나게 다양한 서비스를 포함하고 있지만, 개발자나 IT 엔지니어가 아닌 일반 사용자의 관점에서 볼 때, 클라우드는 주로 온라인 저장 공간(사진이나 PDF, jpg 등을 저장하는 공간)으로 인식이 되는 경향이 있습니다 일반 사용자의 클라우드 인식: 대부분의 일반인에게 클라우드는 주로 데이터 저장소로 인식됨 예: icloud, Google Drive, Dropbox 등의 서비스 클라우드의 실제 범위(개발자, IT 엔지니어): 저장 공간 외에도 ..