개발 기록기록📝

bundle 파일 분석 JS 코드를 다운 받는데 용량이 너무 크다면 (990KB 사이즈를 크다고 보셨음) bundle analyzer 툴을 활용하여 JS 번들을 분석할 수 있습니다. 'cra bundle analyzer'를 검색하여 cra-bundle-analyzer를 설치해줍니다. 설치를 완료한 후, npx cra-bundle-analyzer 명렁어를 이용해서 analyzer를 실행합니다. 잠시 후 다음과 같이 창이 뜨면서 번들 파일에 어떤 파일들이 들어 있는지 보여줍니다. node_modules에 refractor가 약 485KB로 번들에서 꽤 큰 것을 알 수 있네요. refractor를 package-lock.json에서 살펴보니 react-syntax-highlighter에서 디펜덴시로 refra..

다음은 인프런에서 유동균님의 프론트엔드 개발자를 위한, 실전 웹 성능 최적화(feat.React)- Part. 1을 완강하며 공부한 내용입니다. 웹 성능 최적화(=로딩 성능 최적화 & 렌더링 성능 최적화) 웹 성능 최적화는 크게 로딩 성능 최적화와 렌더링 성능 최적화로 구분할 수 있습니다. 로딩 성능 최적화는 클라이언트가 서버로부터 웹 페이지를 그리는데 필요한 리소스들을 다운 받는 로딩 시점에서의 성능을 최적화 하는 것입니다. 로딩 성능 최적화에는 이미지 사이즈 최적화, Code Splitting, 텍스트 압축 등이 있습니다. 렌더링 성능 최적화는 클라이언트 단의 브라우저에서 화면을 그릴 때의 성능을 최적화 하는 것을 말합니다. 렌더링 성능 최적화에는 BottleNeck 코드 최적화 등이 있습니다. 로딩..

Combination1 package step3_step2; import java.util.*; public class Combination1 { public static void main(String[] args) { int[] nums = {1,2,3,4}; //1. 조합(Combination) - visit 배열로 사용 여부 체크하는 방법 boolean[] visit1 = new boolean[nums.length]; combination1(nums, 4, 2, 0, visit1); System.out.println(); //2 조합(Combination) - 재귀 호출로 사용 여부 결정하는 방법 nCr //int[] ans1 = new int[2]; //combination2(nums, ans1 ..

에러 발생 react-native 프로젝트를 ios 시뮬레이터에서 실행하기 위해 yarn ios 명령어 실행하니 다음과 같은 에러가 발생했다. Unable to boot device in current state:Booted 에러 해결 디바이스의 리스트를 본다. xcrun simctl list 리스트 중에 "Booted"인 상태가 있다. 해당 시뮬레이터의 id를 종료해준다! 여기서 시뮬레이터의 id는 디바이스의 이름이다. xcrun simctl shutdown "iPhone 13"

맥북으로 IOS 시뮬레이터 에러를 해결하고 안드로이드 에뮬레이터를 실행해보려고 하니 또 에러가 난다.. 에러내용 :ReactNative:Running ‘[node, -e, console.log(require(‘react-native/cli’).bin);]’ command failed. - Where: Script ‘/Users/…/Desktop/…/node_modules/@react-native-community/cli-platform-android/native_modules.gradle’ line: 154 - What went wrong: A problem occurred evaluating script. > Cannot run program “node”: error=2, No such file or ..

gpu found. vendor id 1414 device id 0x008c checking for bad AMD Vulkan driver version... amdvlk64.dll not found. Checking for amdvlk32... amdvlk32.dll not found. No bad AMD Vulkan driver version found... 메모장에 다음과 같이 쓴 후 C:\Users\...\.android\advancedFeatures.ini 이름으로 해당 경로에 저장한다. # Add the following lines to ~/.android/advancedFeatures.ini (create this file if it doesn't exist already): Vulkan =..

해결방법1) remove node_modules 삭제 후 npm install or yarn npm install --save-dev jetifier npx jetify npx react-native run-android 위 방법의 경우 디펜던시 파일들을 업데이트 하거ㅏㄴ node_modules을 설치시 npx jetify 를 실행해야 한다. *참고 npx jetify를 할 때 아래와 같은 permission에러가 나서 VS Code를 관리자 권한으로 실행해서 하니 에러는 나지 않았다. 해결방법2) react-native run-android --no-jetifier Jetifier is deprecated. Future versions of react-native CLI may not run it by..

An unexpected error occurred: "EPERM: operation not permitted, scandir '...'". npm install로 모듈을 다시 설치하려니 났던 에러이다. --force 옵션을 이용해 문제를 해결했다. npm install --force

expo를 이용해서 앱을 개발할 때 console.log가 터미널에 나오지 않아 당황할 수 있다! expo와 핸드폰이 연결된 상태로 폰을 흔들면 Debug JS Remotely 를 클릭한다 새로운 창이 뜨는데 여기서 f12를 눌러 개발자 모드로 확인할 수 있다

react native 프로젝트를 expo로 만들고 npm start 명령어 수행시 Error: EACCES: permission denied, mkdir '/usr/local/lib/node_modules/expo-cli' 에러발생 sudo npm install --unsafe-perm -g expo-cli 명령어로 수동으로 설치해서 해결