#eslint

ReactNative ios build 에러 3일째 해결을 못했습니다.

시뮬레이션을 실행하려고 해도 스크립트 문제, iPhone 버전 범위 문제, 시뮬레이터 문제가 계속 발생합니다. 어떤 도움이라도 감사합니다. ReactNative를 처음 접했습니다. 저희 팀에서 저를 도울 수 있는 사람이 없습니다. #프로젝트 환경 mac M2 ruby -v ruby 2.6.10p210 (2022-04-12 revision 67958) [universal.arm64e-darwin23] node -v v20.10.0 pod --version 1.15.2 package.json { "name": "labts", "version": "0.0.1", "private": true, "scripts": { "android": "react-native run-android", "ios": "react-native run-ios", "lint": "eslint .", "start": "react-native start", "test": "jest" }, "dependencies": { "@react-native-community/async-storage": "^1.12.1", "@react-native-community/cli": "13.6.9", "@react-navigation/bottom-tabs": "^6.6.0", "@react-navigation/native": "^6.1.17", "@react-navigation/native-stack": "^6.10.0", "@tanstack/react-query": "^5.51.5", "@types/react-native-vector-icons": "^6.4.18", "axios": "^1.7.2", "date-fns": "^3.6.0", "immer": "^10.1.1", "react": "18.2.0", "react-native": "0.74.3", "react-native-calendars": "^1.1305.0", "react-native-date-picker": "^5.0.4", "react-native-dotenv": "^3.4.11", "react-native-get-random-values": "^1.11.0", "react-native-image-crop-picker": "^0.41.2", "react-native-image-zoom-viewer": "^3.0.1", "react-native-paper": "^5.12.3", "react-native-permissions": "^4.1.5", "react-native-safe-area-context": "^4.10.8", "react-native-screens": "^3.32.0", "react-native-splash-screen": "^3.3.0", "react-native-tab-view": "^3.5.2", "react-native-vector-icons": "^10.1.0", "react-native-vision-camera": "^4.5.1", "uuid": "^10.0.0", "yarn": "^1.22.22" }, "devDependencies": { "@babel/core": "^7.20.0", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.20.0", "@react-native/babel-preset": "0.74.85", "@react-native/eslint-config": "0.74.85", "@react-native/metro-config": "0.74.85", "@react-native/typescript-config": "0.74.85", "@types/react": "^18.2.6", "@types/react-native-dotenv": "^0.2.2", "@types/react-test-renderer": "^18.0.0", "babel-jest": "^29.6.3", "babel-plugin-module-resolver": "^5.0.2", "eslint": "^8.19.0", "jest": "^29.6.3", "prettier": "2.8.8", "react-test-renderer": "18.2.0", "typescript": "5.0.4" }, "engines": { "node": ">=18" } } PodFile require Pod::Executable.execute_command('node', ['-p', 'require.resolve( "react-native/scripts/react_native_pods.rb", {paths: [process.argv[1]]}, )', __dir__]).strip platform :ios, '12.0' use_frameworks! #use_modular_headers! prepare_react_native_project! linkage = ENV['USE_FRAMEWORKS'] if linkage != nil Pod::UI.puts "Configuring Pod with #{linkage}ally linked Frameworks".green use_frameworks! :linkage => linkage.to_sym end target 'nexlabts' do config = use_native_modules! use_react_native!( :path => config[:reactNativePath], # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) target 'nexlabtsTests' do inherit! :complete # Pods for testing end post_install do |installer| # https://github.com/facebook/react-native/blob/main/packages/react-native/scripts/react_native_pods.rb#L197-L202 react_native_post_install( installer, config[:reactNativePath], :mac_catalyst_enabled => false, # :ccache_enabled => true ) end end 제가 아래 에러 3가지에 대해 제가 해본 방법들입니다. 1. node 재설치 node_module 폴더 삭제, package-rock.json 삭제 후 재설치 npm install --legacy-peer-deps yarn install 2. Xcode가 node 읽을 수 있도록 설정 sudo ln -s "$(which node)" /usr/local/bin/node 3. Podfile 내 platform 설정 수정 platform :ios, '12.0' or platform :ios, '14.0' 4. Pods 재설치 rm -rf ~/Library/Developer/Xcode/DerivedData or rm -rf ~/Library/Developer/Xcode/DerivedData/* rm -rf Pods rm Podfile.lock pod install --repo-update Xcode \> Product \> Clean Build Folder. cd ./ios pod cache clean -all pod install --repo-update cd ../ npx react-native run-ios --no-packager --simulator="iPhone 15" or npx react-native run-ios --simulator="iPhone 15" or yarn start > i(run ios) Err 1. cocoaPods 설치할 때 [!] CocoaPods could not find compatible versions for pod "React-RuntimeHermes": In Podfile: React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) Specs satisfying the React-RuntimeHermes (from ../node_modules/react-native/ReactCommon/react/runtime) dependency were found, but they required a higher minimum deployment target. Err2. iOS 실행할때 run-ios --no-packager --simulator="iPhone 15" Build description signature: fc1341421f84b87c5245d346c2c17b66 Build description path: /Users/nowonjae/Library/Developer/Xcode/DerivedData/nexlabts-argvodqcybjfcybstpulfpghnzvm/Build/Intermediates.noindex/XCBuildData/fc1341421f84b87c5245d346c2c17b66.xcbuilddata /Users/nowonjae/Desktop/project/NeXLabRN/ios/nexlabts.xcodeproj:1:1: error: Unable to open base configuration reference file '/Users/nowonjae/Desktop/project/NeXLabRN/ios/Pods/Target Support Files/Pods-nexlabts/Pods-nexlabts.release.xcconfig'. (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Unable to read contents of XCFileList '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-frameworks-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase 'Bundle React Native code and images' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Embed Pods Frameworks' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-input-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') error: Unable to load contents of file list: '/Target Support Files/Pods-nexlabts/Pods-nexlabts-resources-Release-output-files.xcfilelist' (in target 'nexlabts' from project 'nexlabts') warning: Run script build phase '[CP] Copy Pods Resources' will be run during every build because it does not specify any outputs. To address this warning, either add output dependencies to the script phase, or configure it to run in every build by unchecking "Based on dependency analysis" in the script phase. (in target 'nexlabts' from project 'nexlabts') --- xcodebuild: WARNING: Using the first of multiple matching destinations: { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } { platform:iOS Simulator, id:B5AA2E84-4F83-4749-A986-A1FCE5E398A3, OS:17.5, name:iPhone 15 } ** BUILD FAILED ** ] Err3. Xcode 로 Build 할때 (Any iOS Simulator Device (arm64, x86_64)) Command PhaseScriptExecution failed with a nonzero exit code

NextJS 14 project 시작 단계에서 에러가 발생했어요... 최대한 빠른 답변 부탁드립니다.

npx create-next-app 라는 명령어로 프로젝트를 시작했는데요. 아무것도 건들이지 않은 상태에서 app/layout.tsx 파일을 클릭했는데 맨 위에 에러가 발생해져 있더라구요.. 내용을 보니깐 Parsing error: __classPrivateFieldGet(...).at is not a function eslint 이런 에러가 있고 해당 에러가 tailwindcss.config.ts 파일 맨 윗줄에도 발생해져 있습니다. 어떻게 해야하는 건가요..?

터보레포 ESLint 시스템에 대한 질문

https://stackoverflow.com/questions/74446466/need-help-setting-up-eslint-in-a-monorepo-using-yarn-3-and-typescript?rq=2 터보레포 ESLint에서는 위 링크에 걸려있는 것처럼 eslint-config에 종속성들을 다른 작업공간에서 install 하지 않고, 사용하는 것 같은데 터보레포는 ESLint의 새로운 Config 시스템인 Flat config를 사용하고 있지 않는데 어떻게 가능한 걸까요?

Nextjs dev mode에서 실시간으로 ESLint 경고를 띄울순 없나요?

현재 Nextjs 14.1.0 버전으로 스토리북까지 포함한 템플릿 프로젝트를 만드려고 합니다. Nextjs 프로젝트는 처음인데 이전에 리액트 기반으로 했을땐 dev 모드에서 eslint warning이 실시간으로 보였는데 next에서는 보이지가 않네용.. npm run lint로 확인하는 것 말고 실시간으로 확인할 순 없을까요?

Prettier vs ESLint Stylistic vs DPrint

11월 ESLint 에서 공식적으로 형식 지정에 관련된 규칙을 제거한다고 발표한 지 한달이 지났네요. https://eslint.org/blog/2023/10/deprecating-formatting-rules/ 이 시점에서 다른 팀에선 어떤 포맷터를 사용하는지 또는 사용할 것인지에 대해 문득 궁금해져서 작성해봤습니다! ESLint팀에서 제안하는 포맷터는 총 3개입니다. 사용했던 포맷터와 사용이유에 대해서도 댓글 달아주시면 감사하겠습니다 :)

ESLINT 어떤 것을 수정해야 내용처럼 fix 되는 현상을 막을 수 있을까요?

안녕하세요~ eslint, prettier에서 제가 무엇을 잘못했는지 계속 아래처럼 코드가 수정되고 있습니다. const res = (await request) < User > (context, `/users/${id}`); 어떻게 하면 고칠 수 있을까요? 1. (await request) 소괄호 제거 2. < User > 제너릭 사이 공백 제거 결론: const res = await request<User>(context, `/users/${id}`) 로 만들고 싶습니다.. 아래는 eslint 적용한 내용 입니다. ``` //eslint.config.js module.exports = { env: { browser: true, es2021: true, }, extends: [ 'plugin:react/recommended', 'airbnb', 'plugin:storybook/recommended', ], parser: '@typescript-eslint/parser', parserOptions: { project: ['./tsconfig.json'], ecmaVersion: 2018, sourceType: 'module', createDefaultProgram: true, }, plugins: ['react', '@typescript-eslint', 'prettier', 'import'], rules: { 'react/react-in-jsx-scope': 'off', 'react/jsx-props-no-spreading': 'off', 'import/prefer-default-export': 'off', 'implicit-arrow-linebreak': 'off', 'react/jsx-filename-extension': [ 2, { extensions: ['.js', '.jsx', '.ts', '.tsx'], }, ], 'object-curly-newline': [ 'error', { ObjectPattern: { multiline: true, minProperties: 2, }, ImportDeclaration: 'never', ExportDeclaration: { multiline: true, minProperties: 3, }, }, ], 'import/extensions': [ 'error', 'ignorePackages', { js: 'never', mjs: 'never', jsx: 'never', ts: 'never', tsx: 'never', }, ], 'import/order': [ 'error', { alphabetize: { order: 'asc', }, groups: [ 'builtin', 'external', 'internal', 'parent', 'sibling', 'index', 'object', 'type', ], }, ], 'import/no-unresolved': 'off', }, settings: { 'import/resolver': { typescript: { alwaysTryTypes: true, }, node: { paths: ['src'], }, }, }, }; ```

Top-level에서 function declaration vs function expression

안녕하세요. javascript를 사용하면서, Top-level function을 선언하는 방식에 대해서 질문드립니다. 저는 Vue3를 이용해서 개발을 하고 있는데, vue 파일의 script단을 포함해서 플러그인으로 만드는 ts, js 파일에서도 함수 표현식을 이용해서 함수를 정의해왔습니다. 근데 제가 되게 자주 살펴보는 Anthony Fu라는 분의 eslint-config에서 최근에 Top-level function을 전부 함수 선언식으로 변환하게끔 적용하셨더라구요. 아마 제가 이 코딩스타일을 적용하게되면, 지금까지 모든 함수를 함수 표현식으로 정의 해왔는데, 전부 함수 선언의 형태로 바뀌게 될 것 같아요. 물론 함수 선언형태로 함수를 정의하면 호이스팅과 같은 부분에서 이점이 있긴 할텐데, 그 외의 이점이 크게 와닿지 않고 있습니다. auto import를 위한 global imports를 만드는데 있어서 함수 선언방식으로 정의되는게 tracking하는데 좀 더 편한가(?)라는 추측만 하고 있습니다. 앞에 서론이 길었는데, "top-level에서 function declaration이 가지는 명확한 이점이 있을지?”가 궁금해서 질문 글을 올리게 되었습니다. 여러분들은 Top-level function을 어떤 식으로 정의하시나요? 의견 주시면 감사하겠습니다.

js개발 시 eslint 설정

vsc 내에 eslintrc.js 파일만 작성하면 되나요?? 아니면 따로 추가적으로 설정해야되는게있나요?

기존 프로젝트 리펙토링 관련

안녕하세요 현재 React와 Express로 웹 개발을 하고있는 학생입니다. 프로젝트를 하나 둘 진행 할 때마다 점점 배우는게 많은데요, 예를들어 첫번째 프로젝트에서는 JS를 사용하고 css를 파일 하나에 몰아 관리하며 커밋 메세지 컨밴션이나 브랜치 전략을 제 나름의 방식대로 정하고 했다고 한다면 두번째 프로젝트는 TS를 사용하게되고 Styled-Component를 통해서 스타일을 관리하게 되었고 커밋 메세지나 브랜치 전략 또한 조금더 일반적으로 바꾸어 진행하게 되었습니다. prettier과 eslint도 적극적으로 사용했구요 두 프로젝트 모두 현재 배포되어 있는 상태이고 지속해서 개발하고 있는 상황일 때 첫 번째 프로젝트 전체를 리펙토링(ts를 적용하거나 styled-component 도입 등)하거나, 커밋 컨밴션과 브랜치 전략을 새로 구성하는것이 맞을까요? 아니면 별다른 리펙토링 과정 없이 원래 해왔던 대로 계속 진행해도 상관없을까요?

팀 규모가 커져서 코드 스타일 규칙을 정하려고 합니다.

회사에서 프로젝트를 3개 진행중이고 프론트엔드 개발자가 6명이 되어서 이제는 좀 코드 스타일에 대한 규칙 같은걸 정해보려고 합니다. 어떤 부분을 참고해야 할까요? 지금 정해보고 싶은 것들이 eslint prettier 변수나 함수 네이밍 룰 정도기는 한데 참고하시는 책이나 블로그 글이나 사이트가 있을까요?

WebStorm 에서 ESLint: TypeError: this.libOptions.parse is not a function 오류가 발생합니다.

오랜만에 사이드 프로젝트를 켰는데 린터 기능이 잘 동작을 안하네요. WebStorm IDE 를 사용하고 있는데 모든 파일에서 다음 오류가 보이면서 린터가 동작을 안하고 있는 상태입니다. ESLint: TypeError: this.libOptions.parse is not a function 다른 프로젝트에서는 문제 없이 사용중인 config 이고 IDE 설정도 제대로 적용 했는데 뭐가 문제일지 짐작이 안가네요. 혹시 비슷한 오류 경험하신 분이 있을까요 ? 일단 사용 중인 version 공유합니다. - nodejs - v14.19.0 - npm - v6.14.17 - webstorm v2021.2.1 - eslint v8.14.0"

리액트에서 타입스크립트 사용할 때 이런 경우 타입을 어떻게 줘야할지 모르겠습니다

리액트와 타입스크립트를 연습해보려고 혼자 토이프로젝트를 만드는 중인데 어떤 타입을 지정해줘야 할지 모르겠어서 질문올립니다. 혹시 더 자세한 설명이 필요할 것 같으면 댓글부탁드려요! 상황) 리액트, 타입스크립트를 사용하는 프로젝트에서 부트스트랩 모달을 사용하려고 합니다. 사진1번이 모달을 포함하고있는 부모컴포넌트, 사진2번이 모달컴포넌트 인데 부모컴포넌트에서 모달컴포넌트로 show, onHide라는 2개의 props를 넘깁니다(부트스트랩에서 지정해놓은 프롭스입니다.) 부모컴포넌트에는 모달의 표시 여부를 관리하는 const [showEmptyInputModal, setShowEmptyInputModal] = useState(false); 이라는 상태값이 있고 그게 각각 props로 넘겨지게 되는 것 같습니다. 여기서 문제) 그런데 사진2번에 넘겨주는 props의 타입을 어떻게 설정해야할 지 모르겠습니다... 일단 any로 하면 작동은 되긴하는데ㅠㅠ any는 최대한 쓰지 않는게 좋다고 해서요 사진4번의 빠른 수정을 보면 이런 옵션들이 있던데 unknown이나 never를 사용하면 그 props를 사용하는 곳들에서 에러가 납니다. any를 사용하거나 빠른 수정의 옵션 중 eslint 규칙을 무시하는 선택지밖에 없는 걸까요? state와 setState를 실행하는 함수 props로 넘기려면 타입을 어떻게 줘야하나요...!

Next.js Link 내부의 a 태그 린트 오류

Link 새 탭으로 여는 것과 관련해서 https://careerly.co.kr/qnas/928 글의 답변을 보고 작성했는데 이런 린트 오류가 뜹니다. "ESLint: The href attribute is required for an anchor to be keyboard accessible. Provide a valid, navigable address as the href value. If you cannot provide an href, but still need the element to resemble a link, use a button and change it with appropriate styles." 코드는 답변 해주신 대로 작성했어요. <Link href=''path" passHref> <a target="_blank rel="noreferrer"> </Link> 잘못된 부분이나 해결 방법이 있을까요?

프론트엔드 개발자 이직 고민

안녕하세요. 이직 고민이 깊은 2년차 프론트엔드 개발자입니다. 저는 현재 이천에 본사가 있고 분당 사무실에서 근무 중입니다. 개발 회사가 아니라서 백엔드 하시는 한 분과 2년 가까이 힘들게 개발하고 있고요. 회사 업무로 꾸준히 Vue를 다뤘고, React와 TypeScript 등을 열심히 공부하고 있습니다. 체계가 전혀 없기 때문에 그동안 좋은 개발 회사들을 참고하면서 체계를 잡아가려고 애썼습니다. 프론트엔드 팀이 아닌 혼자이지만, 회사 GitHub 팀 계정을 만들고, Git을 나름대로 feature 별로 branch를 나눠서 개발하고, Prettier와 ESLint 설정 파일 만들어서 관리하고... 그렇게요. 그러다가 최근에 분당에 있는 사무실의 계약이 끝나가서(8월 말) 9월부터 이천 본사로 출근하게 된다는 충격적인 소식을 접했습니다. 강남이나 판교가 아닌, 물류 회사들만 즐비한 이천으로 출근을 시작하게 된다면 커리어가 후퇴할 건 불보듯 뻔한 일이기 때문에 서둘러서 이직 준비를 하고 있습니다. 코딩테스트는 지금 급하게 준비해봤자 한 문제도 제대로 풀지 못해서 과제 테스트를 보는 곳 위주로 지원하고 있습니다. 다행히 이력서를 꾸준히 업데이트 해와서 원티드, 프로그래머스, 리멤버 같은 채널을 통해 바로 지원할 수 있었습니다. 급하게 준비해서 본 기술 면접은 두 건이나 탈락했습니다. 몇주 전에는 서류 통과를 무난하게 했었는데, 최근에 지원한 기업은 계속 탈락하고 있습니다. 그 와중에 정말 열받는 건, 지원한 곳이 감감무소식일 때 앱을 확인해보면 불합격 알람이나 메일도 없이 [불합격] 탭으로 빠져있는 겁니다. 합격해서 면접까지 가는 곳과 불합격한 곳의 차이는 기업 내부 사정이니 그러려니 합니다. 하지만, 개인적으로는 불합격이더라도 최소한 알림은 주는 게 지원자에 대한 예의라고 생각합니다. 사실 저는 지방 SI 회사 출신입니다. 2년간 프로젝트에 참여했고, 이력서에도 경력란에 가장 큰 부피를 차지하고 있습니다. 프론트엔드 개발자를 하고 싶다는 이유 하나만으로 독학해서 수도권으로 이직했거든요. 면접은 답변이 부족하면 떨어질 수 있지만, 서류 탈락의 이유가 전 직장 때문인지도 의문이 들고 괜히 후회스럽고 요즘 마음이 싱숭생숭하네요. 서론이 길었네요. 저의 고민은 이렇습니다. 1. 이대로 면접 준비를 계속 하며 계속 계속 지원해본다. (프론트엔드 기본 지식을 숙련한다) 2. 퇴사하고 부트 캠프에 지원한다. 3. 코딩 테스트를 준비한다. 하향 지원하는 것은 바라지 않고 어떻게든 더 좋은 회사에 가서 더 좋은 실력과 함께 커리어를 쌓고 싶습니다. 읽어주셔서 감사하고 답변 기다릴게요!