#dom

next.js15 img태그에 Link태그 감싸기

안녕하세요 next.js15에서 img태그에 링크를 감싸고 있는데 아예 아무 반응을 하지않습니다.. useRouter도 먹히지않고 브라우저 콘솔에는 DOM에 클래스가 존재하지않는다고 뜨는데 아무리 찾아도 이유를 모르겠습니다

머신러닝,딥러닝을 사용한 석사경험으로 취업준비를 어떻게 할까요?

안녕하세요. 저는 지금 대학원에서 의료영상을 보고 질병을 진단하는 모델링 연구를 진행중인 석사과정생입니다. 위 연구실은 의료영상 자체에 관심이 많은 랩이고, 딥러닝과 머신러닝 알고리즘을 연구하는 순수 AI랩은 아닙니다. 저는 머신러닝(SVM.XG-Boost,Random forest)와 같은 기법들부터 시작해서 Transformer,GNN,GAN,ResNet과 같은 딥러닝 모델을 제 데이터에 적용하는 연구를 진행중입니다. 요지는, 과연 위 모델들을 사용해본 경험으로 취업이 가능할까요? 제가 아직 이 분야에 대해서 자세히 알지는 못하기 때문에 드리는 질문이지만, 알고리즘 자체를 개발하는 엔지니어가 되어야 취업이 되는것은 아닌지 불안해서 여쭤봅니다. 아마 이 문장으로 제 질문이 요약될수도 있을것 같습니다. 딥러닝,머신러닝 모델에 대해서 이해도가 높고 잘 쓰는 사람 VS 딥러닝,머신러닝 알고리즘을 만들어본 사람 회사 입장에서는 어떤 사람을 선호할까요???

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

React Next infinite scroll

A 라는 infinite scroll페이지에서 500개 데이터를 보여주고 scroll은 70프로 내려왔다고 가정했을 때 다른 페이지 갔다가 돌아왔을 때 500개 데이터랑 scroll 위치 그대로 유지하는 좋은 방법 뭐 있을까요? localstorage나 context 이용했을때는 dom을 다시 랜더링하고 state 값을 다시 주입 했을 때 부드럽지 않은 느낌입니다. redux를 이용해서 전역으로 상태값을 저장해 놓고 컴포넌트에서 사용하면 될까요?

webview_flutter 안드로이드 cookie 질문이요...

회사에서 부득이하게 앱개발자 없이 앱개발을 해야하는 상황이라 웹으로 만들고 flutter 웹뷰를 만들었습니다. iOS에서는 쿠키에 jwt가 저장되서 자동로그인 기능이 잘 작동되고 있는데요, 안드로이드에서는 cookie를 따로 관리를 해줘야 한다고 하더라구요... 그래서 webview_cookie_manager 와 flutter_secure_storage를 이용해서 onPageFinished가 될 때 main page이면 cookieManager.getCookies로 jwt를 가져오고 storage.write로 쿠키를 저장해 주고 있습니다. 그리고 initState()할때 Future<void> _loadStoredCookies() async { final jwt = await storage.read(key: 'jwt'); print('jwt : $jwt'); if (jwt != null) { final cookieManager = WebviewCookieManager(); await cookieManager.setCookies([ Cookie('jwt', jwt) ..domain = "메인페이지" ..path = "/" ..secure = true ..httpOnly = true ]); bool hasCookies = await cookieManager.hasCookies(); print('쿠키가 존재하는가? $hasCookies'); } } 이렇게 쿠키를 확인하고 쿠키를 set해주는데 백그라운드에서 앱을 완전히 종료시키고 다시 실행하면 쿠키가 사라지더라고요... 왜 그런건가요...??

마이크로 프론트 구현(Nextjs, React)

요구사항 마이크로 프론트엔드로 A라는 프로젝트에서 B라는 프로젝트의 컴포넌트를 사용하고 싶다 프로젝트 설명 ModuleFederationPlugin 사용해서 expose remote 설정 A 프로젝트 (remote) : react, styled-component 사용 B 프로젝트 (expose) : nextjs, scss 사용 첫번째 오류 styled 이 달라서 nextjs 에서 노드가 불러와지지 않는 것 해결 : <noscript id="**next_css__DO_NOT_USE**"></noscript> → 두번째 오류 발생 오류 내용 Cannot read properties of null (reading 'parentNode') TypeError: Cannot read properties of null (reading 'parentNode') at options.insert (webpack- 두번째 오류 Nextjs 에서 expose 할 때 Page 컴포넌트에 있는 useState를 사용 못한다고함 해결 : peerDependencies 로 nextjs 추가 → 오류동일 오류 내용 TypeError: Cannot read properties of null (reading 'useState') at useState (react.development.js:1623:21) at Page (index.js:8:40) react-dom.development.js:18704 The above error occurred in the <Page> component: 참고 : https://dev.to/omher/building-react-app-with-module-federation-and-nextjsreact-1pkh 두번째 오류를 해결해야 되는데 가능한 방법인지 모르겠습니다. 아시는 분은 댁글 남겨주세요~(코드상에 보안상 문제되는 부분은 a b 로 바꿨습니다.

로그인 구현 관련 질문 subdomain.com

안녕하세요 슬랙처럼 로그인을 하면 워크스페이스 리스트가 나오고 해당 워크스페이스를 클릭하면 해당 워크 스페이스로 로그인이 되는 페이지를 구현하려 하는데요. Next.js를 사용중이고 iron-session 라이브러리 통해서 세션을 저장하고 있습니다. ex) app.oursite.com <- 통합 로그인 페이지 워크스페이스 클릭하면 해당 워크스페이스 로그인을 하고 세션을 저장해서 워크 스페이스 사이트로 redirect 시키려 하는데, const session = await getIronSession<Session>(cookies(), { cookieName: 'cookie', password: IRON_SESSION_SECRET_KEY, cookieOptions: { secure: false, // 로컬 테스트에서는 false, 실제 배포에서는 true로 설정 sameSite: 'Lax', // sameSite 옵션을 Lax로 설정 domain: 'localhost', // 로컬 테스트 시 domain 설정을 제거하거나 localhost로 설정 path: '/', }, }); {workspace1}.ourstie.com {workspace2}.ourstie.com 세션 저장이랑 redirect 처리했을때 세션 저장하고 해당 페이지 확인은 하였는데 해당 페이지에서 로그인 인증은 제대로 되지 않고 있습니다. 로그인 페이지로 이동되더라고요 로그인이 안되는 원인으로 짐작가는게 있으면 알려주시면 감사하겠습니다

jquery, 굳이 버려야 할까요?

안녕하세요. 최근 이직 후에 첫 프로젝트로 cms 리뉴얼 개발을 담당하게 되었습니다. 이직한 회사에서는 jquery와 html, css를 사용하여 전자정부프레임워크에 붙여넣는 방식으로 사용하게 되어 있습니다. 저는 react 프레임워크 사용을 만 3년 이상 하였고, jquery도 학생시절부터 초년생 때 까지 만 1년 이상 사용하여 개발에 큰 문제는 없습니다. 다만, 유지보수 및 확장성에 지속적으로 의문을 갖게 되었고 이에 react로 마이그레이션을 제안하고자 생각했습니다. 제안하기 전에 react로 기술 전환하고 싶은 이유를 몇가지 정리해봤습니다! 1. 인력 수급 : 전자정부프레임워크로 react를 채택하고 있는 만큼 최근 react의 수요와 공급 급증 2. 커뮤니티 : react 등의 프레임워크는 점점 커지고 있는 강력한 커뮤니티를 가지고 있음 3. 확장성, 최적화 : 가상 DOM, 대용량 데이터 및 트래픽 처리 용이, 속도 최적화, 경량화, 대규모 애플리케이션 확장성 등에 유리함 4. 테스트 및 문서화 : 다양한 테스팅 라이브러리, 컴포넌트 단위의 테스트 및 문서화에 유리함 정도로 최소 4가지의 이점을 가질 수 있다고 판단했는데요! 반대로 생각해보면 jquery를 굳이 버려야 할까요? 1. 인력 수급 : 예전만큼은 아니지만 아직도 jquery를 사용하는 기업 및 웹사이트가 다수 존재함 2. 커뮤니티 : 여전히 버전 업그레이드도 하고있고 십여년의 커뮤니티에 쌓인 정보는 매우 많음 3. 확장성, 최적화 : DOM 접근이 쉬워 개발 속도가 빠름, 또 어떤 것이 있을까요? 도움 부탁드립니다😅 4. 테스트 및 문서화 : 또 어떤 것이 있을까요? 도움 부탁드립니다😅 다소 편향적인 조사지만,,, 팀원들에게 마이그레이션 제안하기 전에 여러 시점의 생각이 궁금했습니다. 잘못된 정보나, 다양한 의견 얘기해주세요! 감사합니다.

react-query로 이미지를 가져올 때, 이미지가 깜빡거리는 문제를 해결하고 싶어요.

React 프로젝트에서 차량 데이터 목록(차량 모델 사진, 차량명, ....등)을 보여주는 웹 프로젝트를 진행하고 있습니다. 차량 데이터 목록 화면에서 react-query를 통해 가져온 데이터는 (예시 데이터) const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식으로 가져와서 map을 통해 CarCard 컴포넌트에 데이터를 props로 보내어 현재 출력하고 있습니다. 여기서 이미지 같은 경우는 백엔드에서 차량 모델 이미지를 가져오는 api를 따로 만들어놓아서, props로 전달받은 car_model_image 즉, 차량 모델 이미지의 id를 통해서 차량 모델 이미지 api에 데이터를 요청해서 이미지를 출력하고 있습니다. 이때. 페이지를 전환하거나, 한 페이지에서 아무동작을 하지 않아도 게속 이미지가 깜빡거리면서 재렌더링이 되고, 계속 무한정으로 이미지를 호출하는 문제가 발생하였습니다. map을 통해 CarCard를 호출하고 CarCard 안에서 이미지를 호출함에 따라서 계속 이미지가 깜빡깜빡 거리는 것 같은데, 컴포넌트 안에서 이미지를 호출할 때 어떻게 하면 무한정으로 이미지를 불러오지 않도록 하고 깜빡거림을 없앨 수 있을까요 ?...어떻게 해결해야 할지 감이 안 잡혀요.... //차량 목록 페이지 한 부분 ... const { data } = useGetCarList(); //useQuery를 통해 서버에서 데이터 전달받음 // const data = [{id: number, car_name: string, model_name, car_model_image: number...}, {.....} ] 이런식 .... return ( <div> data.map((data: CarData) => { return ( <Carcard ascCarData={data} key={Math.random()} handleClick={() => handleClick(data)} isActive={true} /> ); }) </div> ) //Carcard 컴포넌트 const { data: carImage } = useGetCarModeImage(ascCarData.car_model_image); // 이미지 데이터 가져오기

리액트 쿼리 에러 핸들링 이슈

react query를 활용한 에러 핸들링이 안돼서 질문 올립니다... //mainpage.tsx const { data, refetch, isFetching } = FetchData(url); const handleSearch = () => { refetch(); } <QueryErrorResetBoundary> {({ reset }) => ( <ErrorBoundary onReset={reset} FallbackComponent={FallbackUI}> {resultVisible ? ( <Result searchData={searchData} isFetching={isFetching} /> ) : ( <EmptyResult /> )} </ErrorBoundary> )} </QueryErrorResetBoundary> react-error-boundary 라이브러리를 이용해 ErrorBoundary 컴포넌트를 가져왔습니다. ErrorBoundary 하위 컴포넌트 내에서 에러가 발생하면 FallbackComponent의 FallbackUI 컴포넌트가 렌더링 되도록 했습니다. //FallbackUI 컴포넌트 //에러가 발생히면 이 컴포넌트가 렌더링되어야합니다. const FallbackUI = ({ error, resetErrorBoundary }) => { return ( <div> <span>{error.message}...</span> <button onclick={resetErrorBoundary} /> 돌아가기 버튼 </div> ); }; export default FallbackUI; FallbackUI 에서 QueryErrorResetBoundary 에서 제공하는 resetErrorBoundary를 받아와 에러 발생 후 '돌아가기 버튼'을 클릭하면 쿼리오류를 처리하고 리셋해주도록 구현했습니다. //url을 파라미터값으로 받아와 api호출하는 함수 //위에 있는 mainpage.tsx 에서 사용하는 함수입니다. const FetchData = (url: string) => { const { error, data, refetch, isFetching } = useQuery({ queryKey: ["repoData"], queryFn: async () => { const res = await axios.get(url); console.log(res.data); return res.data; }, refetchOnWindowFocus: false, enabled: false, }); return { error, data, refetch, isFetching }; }; 리액트 쿼리를 이용해 api를 호출하는 함수입니다. //main.tsx const queryClient = new QueryClient({ defaultOptions: { queries: { retry: 0, throwOnError: true, }, }, }); ReactDOM.createRoot(document.getElementById("root")!).render( <React.StrictMode> <QueryClientProvider client={queryClient}> <BrowserRouter> <GlobalStyles /> <Provider store={store}> <App /> </Provider> </BrowserRouter> </QueryClientProvider> </React.StrictMode> ); 마지막으로 전역으로 에러 관리를 하도록 세팅해놨습니다. 그리고 QueryClient에 throwOnError 속성이 있어야 에러를 ErrorBoundary로 전달할 수 있다해서 추가해줬습니다. 이렇게 세팅해놨는데 에러발생하면 그냥 하얀색 화면만 나오고 fallbackUI가 나오지 않습니다... 원인이 뭘까요...ㅠㅠㅠ 혹시 몰라서 콘솔 에러코드도 올립니다.. 추가로 궁금한 점 1. useQuery 에서 반환하는 객체중 error 객체는 어떤 존재인지 궁금합니다. 2. useQuery 속성과 QueryClient 속성 모두 throwOnError : true 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

프론트엔드 테스트코드 어떻게 하세요?

안녕하세요. 2년차 프론트엔드로 일하고 있는 주니어입니다. 사내에 테스트코드 도입 전 혼자 해보고있는데요, tdd를 하고 계시는 다른 현직자 분들에게 궁금한점이 있습니다. 유닛 테스트 : jest, vitest E2E 테스트: cypress, playwright 위의 도구로 이것저것 해보고있는데 하면서 까다로운 점이 있습니다. 일반 유틸 함수 같은 것은 유닛테스트가 비교적 간단하지만 프론트 엔드이다 보니 컴포넌트 테스트를 하려면 무조건 DOM 으로 불러와야하고, 사이즈가 큰 컴포넌트는 뭔가 잘 되지도 않고, 이럴거면 그냥 E2E만으로 하면 되지 않나 라는 생각도 들고... 실제로는 unit 테스트 도구로 컴포넌트 dom으로 불러와서하고 e2e도 따로 하시나요? 아니면 e2e로만, unit으로만 이렇게 한가지로만 하시나요??

리액트 타입스크립트 obj[key] 에러

타입스크립트 이제 막 적용해보는 초보입니다.. 코드 내 monitorMenu[type].container 에서 [type]에 에러가 뜨는데 타입 지정이 잘못 된 건지 찾아봐도 원인을 모르겠습니다ㅜㅜ 물어볼 곳이 없어 질문합니다,,! 도움 부탁드립니다...ㅠㅠ // code import React, { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import DashboardContainer from '../containers/DashboardContainer'; import IntegratedContainer from '../containers/IntegratedContainer'; interface IMonitorMenu { [key: string]: { container: string | JSX.Element; }; } const Monitor = () => { const user: any = []; const { type } = useParams<{ type?: string }>(); const navigate = useNavigate(); const [menu, setMenu] = useState('integrated'); const onClickMenu = (name: string) => { navigate(`/monitor/${name}`); }; const monitorMenu: IMonitorMenu = { integrated: { container: <IntegratedContainer /> }, dashboard: { container: <DashboardContainer /> }, }; return ( <div> ... <div>{monitorMenu[type].container}</div> </div> ); }; export default Monitor; // error ERROR in src/pages/Monitor.tsx:37:25 TS2538: Type 'undefined' cannot be used as an index type.

데이터 join후 어디에 담으시나요?

안녕하세요 join한 결과를 repository를 통해 받아올때 다들 어떻게 하시나요?? 어떤 방법을 써야 하는지 모르겠어서 선배님들의 의견과 다른 회사에서는 어떻게 하는지 알고 싶어서 질문 드립니다~ 제가 알기로는 domain은 db테이블과 1대1관계를 가져야 한다?, dto는 request와 response시에만 사용하는것? 으로 알고 있습니다 Mybatis를 통해 두 테이블을 join할때 (예를 들어 게시판 상세페이지에 접속할때 게시판테이블의 정보와 업로드된 파일을 관리하는 테이블의 데이터를 함께 조회함) 그 데이터를 어디에 담아서 repository를 통해 리턴하면 될까요..? 게시판 domain에 파일 정보를 추가해서 조인한 데이터를 담자니 domain이 db와 1대 1관계를 깨는것 같고 dto에 바로 담자니 dto와 domain의 변환 시점이 있는데 규약(?)을 무시하는것 같고 브릿지 테이블을 만드는것도 아닌것 같고.. 회사에서도 여쭤볼 분이 마땅치 않아서 궁금증을 여쭤봅니다ㅜㅜㅜㅜ

sql문 부적합합니다..

spring boot 4 에서 웹개발프로젝트를 진행중입니다.. jsp페이지에서 받아온 searchText값을 쿼리문으로 비교 후 foodinfolist를 반환해주는데 sql developer에서는 SELECT * FROM foodinfolist WHERE food_name LIKE '%' || '치킨' || '%'; 해당 코드가 정상동작 돼서 잘 검색하지만 mapper.xml에서 <mapper namespace="com.springproj.dietwebservice.repository.IFoodInfoDAO"> <select id="findfoodinfo" parameterType="java.lang.String" resultType="com.springproj.dietwebservice.domain.FoodInfoVO">> <![CDATA[ SELECT * FROM foodinfolist WHERE food_name LIKE '%' || #{searchText} || '%' ]]> </select> </mapper> 해당 코드를 실행하면 sql문이 부적합합니다 라고 에러가 발생합니다.. 뭐가 문제인지 모르겠습니다.. searchText: 치킨 으로 데이터도 잘 담겨오는데.. 2024-01-31T16:24:22.500+09:00 ERROR 8208 --- [nio-8090-exec-9] o.a.c.c.C.[.[.[/].[dispatcherServlet]  : Servlet.service() for servlet [dispatcherServlet] in context with path [] threw exception [Request processing failed: org.springframework.jdbc.BadSqlGrammarException: ### Error querying database. Cause: java.sql.SQLSyntaxErrorException: ORA-00900: SQL 문이 부적합합니다 선배님들 조언부탁드립니다..

리액트 프로젝트 vite로 빌드후 서버에 배포시 cannot get...

react-router-dom 을 사용중에있습니다. vite로 빌드하고 서버에 올렸는데... 경로 이동시 cannot get 이 뜹니다. 찾아본결과 서버에서 요청 url을 찾아서 그렇다 , 모든 서버 요청을 /index.html로 리디엑션하도록 하면 된다고 하는데 혹시 vite에서 그런 설정을 할 수 있나요?

react router dom cannot get

const router = createBrowserRouter([ { path: "/", element: <App />, children: [ { index: true, path: "/", element: <Login /> }, { path: "/filelist", element: <FileList /> }, { path: "/fileupload", element: <FileUPload /> }, ], }, ]); 이렇게 작성했는데 빌드후 cannot get이 뜹니다 ㅠㅠ

리액트 useEffect와 unmount에 관해

오늘 회사 스터디를 진행 하면서 제가 공부하면서 느낀 내용에 대해 팀원 분들의 의견이 달라 여기에 궁금해서 끄적여 봅니다... useEffect가 컴포넌트 안에서 선언이 되었을 다고 가정했을 때, 1. 해당 컴포넌트가 mount 되고, unmount 될 때 clean up 함수가 호출 된다. 2. useEffect 내에 state를 변경하는 작업이 존재한다면, react fiber reconciler 에 의해 react fiber 의 작업이 이루어지고, 해당 내용을 변경한 VDOM에 의해 다시 실제 DOM에 바뀐 부분이 새로 그려진다.. === 재렌더링 제가 이해한 게 맞을 까요??

Next.js app router 다크모드 깜빡 거림 문제

혹시 next app router에서 다크모드 설정 깜빡거리는 현상 해결해 보신 분 계신가요? 테마는 로컬스토리지에 저장해서 초기에 보여줍니다. Next 14 + styled-components 사용중입니다. 기존 page router에서는 _document.tsx에서 script 태그 dangerouslySetInnerHTML 사용해서 DOM요소 렌더링 이전에 로컬스토리지 저장된 모드 가져와서 관련 코드 실행 되게 끔 해서 깜빡임 현상을 해결했었습니다. app router에서 layout.tsx에 Script태그 이용해서 똑같이 적용하면 DOM요소가 렌더링 되고나서 실행이 되어서 기존 다크모드설정 후 새로고침 시 깜빡거리는 문제가 발생합니다ㅠㅠ 기존에 _document.tsx랑_app.tsx에 작성된 코드들은 layout.tsx에서 관리하는 걸로 알고 있는데 동작 방식이 다른 건지 기존과 다르게 동작합니다.. 여러 옵션을 사용해봐도 똑같네요... 관련 자료도 너무 없어서 nextjs github issue 뒤져보니까 똑같지는 않지만 비슷한 문제를 겪고 있는 issue가 있던데 해결이 안 된 거 같더라구요.. 이러한 상황에는 어떻게 해야할까요..? 개인 프로젝트고 해결이 된다면 정말 좋겠는데, 면접에서 이렇게 해결하지 못한 상황에 대해서는 어떻게 말해야할지도 고민입니다..

모바일 뷰에서 팝업이, 뒤로가기 제스처를 취했을 때 이전 페이지로 넘어가지 않고 팝업만 닫히게 구현하고 싶어요.

안녕하세요. 이번에 웹뷰 뿐만 아니라 모바일 뷰까지 같이 개발을 진행하고 있는데, 팝업의 기능 구현에 어려움을 겪고 있어 질문을 남깁니다. 웹뷰 같은 경우는 바로 팝업을 닫을 수 있지만, 모바일 같은 경우에는 무심결에 뒤로가기 제스처를 통해서 팝업을 닫으려는 유저가 있을 수 있다고 생각합니다. 그래서 뒤로가기 제스처가 발동 시, 이전 페이지로 렌더링을 시도하는 것을 막고 해당 팝업을 unmount 시키고 싶은데 방법이 잘 생각나지 않네요. **개발환경은 프론트 (react) 입니다. 그냥 간단하게 생각한다면 모바일 뷰일 때를 dom 으로 감지 후에 해당 팝업이 mount 된 상태에서 navigation(-1) 같은 동작을 감지하여, 이전 페이지로 이동 대신 팝업을 unmount 시키게, useEffect 등으로 감시하면 될 것 같은데, 어떻게 구현해야 될까요? + 현재 react-router-dom v6.2를 사용하고 있는데, useBlocker를 활용하면 해결될 것 같습니다..! https://reactrouter.com/en/main/hooks/use-blocker

리액트 내비게이션 초기 데이터값 설정

import React, { useEffect, useState } from "react"; import { Link, useLocation } from "react-router-dom"; import { TbArrowBigUpFilled } from "react-icons/tb"; import useScroll from "../utils/useScroll"; import useProductsQuery from "../useProductsQuery"; const Nav = () => { const { isNavFixed } = useScroll(); const [activeButton, setActiveButton] = useState(0); const handleButtonClick = (index) => { setActiveButton(index); }; const categoryNames = { materials: "소재별 품목", purposes: "용도별 품목", }; const [isScrollMenuVisible, setScrollMenuVisible] = useState(false); const handleMouseEnter = () => { setScrollMenuVisible(true); }; const handleMouseLeave = () => { // console.log("마우스 이탈"); setScrollMenuVisible(false); }; const location = useLocation(); const isloginorsignup = location.pathname === "/login" || location.pathname === "/signup"; const { isLoading, isError, errorMessage, materials, purposes } = useProductsQuery(); const [hoveredOnedepth, setHoveredOnedepth] = useState(null); const [onedepthChildren, setOnedepthChildren] = useState([]); const [hoveredDivision, setHoveredDivision] = useState(null); const [twodepthDivision, setTwodepthDivision] = useState([]); const handleOnedepthMouseEnter = (item) => { setHoveredOnedepth(item); // console.log(setHoveredOnedepth) setOnedepthChildren(item.children); }; const handletwodepthMouseEnter = (child) => { setHoveredDivision(child); // console.log(setTwodepthDivision); setTwodepthDivision(child.divisions); // console.log(child.divisions); }; if (isLoading) return <>로딩 중...</>; if (isError) return <>{errorMessage}</>; return ( <> {!isloginorsignup ? ( <> {/* 대메뉴 */} <nav id="nav" className={`nav ${isNavFixed ? "fixed" : ""}`}> <div className="nav_wrap"> <div className="twobutton_wrap"> {["materials", "purposes"].map((category, index) => ( <Link type="button" className={`twobutton ${ activeButton === index ? "active" : "" }`} key={index} onClick={() => handleButtonClick(index)} to={`/${category}`} > {categoryNames[category]} </Link> ))} </div> {/* 내비게이션 1depth */} <div className="scrollnav"> <ul className="materialnav" style={{ display: activeButton === 0 ? "flex" : "none", }} > {materials.map((material) => ( <li key={material.id} className="materialnav_li" onMouseEnter={() => { handleOnedepthMouseEnter(material); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{material.name}</Link> </li> ))} </ul> <ul className="usagenav" style={{ display: activeButton === 1 ? "flex" : "none", }} > {purposes.map((purpose) => ( <li key={purpose.id} className="usagenav_li" onMouseEnter={() => { handleOnedepthMouseEnter(purpose); handleMouseEnter(); }} onMouseLeave={handleMouseLeave} > <Link to="/">{purpose.name}</Link> </li> ))} </ul> </div> <div className="call_wrap"> <div className="call"> <div className="call_title">견적 상담 · 문의 대표전화</div> <div className="top_button"> <TbArrowBigUpFilled className="top_icon" /> <p>TOP</p> </div> </div> </div> </div> </nav> {/* 2&3depth 호버 메뉴 */} <div className={`scrollmenu ${isScrollMenuVisible ? "show" : ""} ${ isNavFixed ? "fixed" : "" }`} style={{ visibility: isScrollMenuVisible ? "visible" : "hidden" }} onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave} > {activeButton === 0 && ( <div className="scrollmenu_top"> <ul className="depth2_wrap"> {onedepthChildren.map((child) => ( <li key={child.id} className="depth2_menu" onMouseEnter={() => { handletwodepthMouseEnter(child); }} > <div className="depth2_menu_img_wrap"> <div className="depth2_menu_img"> <img src={child.images[0]._links.href} alt={child.name} /> </div> </div> <p>{child.name}</p> </li> ))} </ul> </div> )} <div className="scrollmenu_middle"> <div className="depth3_wrap"> {twodepthDivision.map((division) => ( <Link key={division.id} to="/" className="depth3_menu"> <span className="depth3_menu_img"> {/* images 속성이 없거나 비어 있어도 오류를 방지 */} {division.images && division.images.length > 0 && ( <img src={division.images[0]._links.href} alt={division.division_name} /> )} </span> <p>{division.division_name}</p> </Link> ))} </div> </div> <div className="scrollmenu_bottom"></div> </div> </> ) : null} </> ); }; export default Nav; 현재는 depth2_menu 호버해야만 depth3_menu가 보이는데 초기에 scrollmenu가 보일때부터 depth2_menu가 (onedepthChildren.map의 첫번째 순서의 데이터가) 호버되어있어 그에 매칭되는 division의 내용들이 depth3_menu에 보이게 할수있는 방법 있을까요 ?

자바스크립트 코드작성에 대해 질문있습니다.

안녕하세요 현재 프론트엔드의 자바스크립트 인강을 들으면서 기초를 공부중인데 변수~함수등 기본적인 문법을 배우고 어떤 실습을 하는데 여기서 궁금한점이 있습니다. // 랜덤번호 지정 (컴퓨터쪽) // 유저가 번호를 입력한다. 그리고 go라는 버튼 클릭 // 만약에 유저가 랜덤번호를 맞추면 맞췄습니다. // 만약에 유저가 랜덤번호를 틀리면 틀렸습니다. // 랜덤번호 < 유저 down // 랜덤번호 > 유저 up // Reset을 누르면 게임이 리셋된다. // 5번의 기회를 다 사용하면 게임이 끝난다. (더 이상 추측불가, 버튼이 disable(클릭안됨)) // 유저가 1~100 범위 밖에 숫자를 입력하면 알려준다. 기회를 깍지 않는다. // 유저가 입력한 숫자를 또 입력하면 알려준다. 기회를 깍지 않는다. let compuerNum = 0; // 랜덤번호 저장할 변수 작성 function pickRandomNum() { compuerNum = Math.random(); console.log(compuerNum); } pickRandomNum() 이런 코드가 있는데 궁금한점이, 1. 위 코드에서 랜덤번호를 저정할 변수를 만들었는데 저 코드를 혼자 작성해본다고 했을때 저걸 변수에 우선 담아야 겠다. 뭐 이런 생각조차 나지 않더라구요. 어떻게 하면 쉽게 할수 있을지 궁금하고, 2. 두번째로 밑에 함수를 사용했는데 함수는 재사용, 관련된것끼리 묶어놓는다 이정도로 알고있습니다. 1번 질문과 마찬가지로 이부분은 함수를 사용하면 되겠다 이런 생각도 나지 않는데 혼자서도 코드를 잘 짜는 방법이 있다면 알려주시면 너무 감사드리겠습니다. 문법은 어느정도 이해는 하는데 혼자 코드를 작성을 할려고 하니 너무 막막하더라구요. 초보자가 그래도 조금이라도 코드를 혼자 작성할 정도로 공부를 한다면 어떤식으로 공부를 하면 되는지 선배님들의 조언부탁드리겠습니다.

react-router-dom v6에서 useNavigate의 replace:true속성과 window.location.replace()의 차이점

window.performance.getEntriesByType("navigation")[0]의 type이 back_forward인 경우에 뒤로가기로 진입했다는걸 파악하고 있었는데 페이지 이동시에 useNavigate의 replace:true 속성일 때는 해당 옵션이 안나오고 location.replace로 이동시에만 해당 옵션값으로 판별이 가능한데 두개 차이점이 존재하는걸까요,,?

TestCode에서 객체 상태를 검증하기 위한 방법 (Getter vs equals and HashCode 을 구현한 객체)

순수 Java 언어를 통해서 객체지향을 연습하고자 했고, Domain 객체에서 getter을 최대한 지양한 상태에서 구현했습니다. 로직 검증을 위해 Test Code을 작성하던 중 의문점이 생겼습니다. Test Code을 작성해서 내부 객체의 상태 값을 검증할땐 프러덕션 코드에 제공된 getter가 없어 equals and hashcode을 재정의하여 객체의 상태를 검증하고자 했습니다. (Equals and HashCode는 주로 Value Object에 대해서만 재정의 했습니다.) 하지만 때론, 객체을 생성해서 검증할땐 객체의 주생성자 안에 있는 validate 조건에 의해 객체 자체가 생성하기 어려운 경우가 있어 "객체 대 객체"로 검증하기 어려운 점이 있었습니다. # 1 이런 경우 어떻게 Test을 할 수 있을까요?? 어쩔 수 없이 test code 만을 위해서 내부 상태를 검증하도록 getter을 추가해야 할까요?? # 2 또한 만약 이미 getter가 구현된 상태이고 객체의 validate 조건을 피해서 객체를 만들 수 있다면 "객체 대 객체" 비교 말고 getter을 통해서 상태 검증을 해도 괜찮을까요??

documentFragment를 활용하여 리팩토링 하였지만 오히려 속도가 더 느려졌네요. 원인이 궁금합니다.

<select></select> <select></select> <select></select> ... var targetArr = document.querySelectorAll("select"); var optionArr = [ {CODE_NAME: "one", CODE_ID: 1}, {CODE_NAME: "two", CODE_ID: 2}, ... ]; 이런 환경에서 optionArr을 가지고 모든 select에 option을 넣어주려고 합니다. 기존 소스 : targetArr.forEach(function(target) { optionArr.forEach(function(item) { var option = document.createElement("option") option.setAttribute("value", item.CODE_ID); option.innerText = item.CODE_NAME; target.append(option); }); }); 변경 소스 : var fragment = document.createDocumentFragment(); var option = document.createElement("option"); optionArr.forEach(function(item) { var cloneOption = option.cloneNode(); cloneOption.setAttribute("value", item.CODE_ID); cloneOption.innerText = item.CODE_NAME; fragment.append(cloneOption); }); targetArr.forEach(function(target) { target.append(fragment.cloneNode(true)); }); 이렇게 O(nm)으로 동작하던 기존 소스를 O(n)으로 변경하였고 더하여 직접 DOM을 조작하기 보다 documentFragment를 활용하였으니 더 빨라질 것으로 예상하였으나 더욱 느리게 나오더라구요. cloneNode가 문제인 건지... 이유를 모르겠습니다. 알려주시면 감사하겠습니다.

프론트엔드, 퍼블리셔 React 협업 어떻게 하고 계시나요?

회사에 디자이너분과 퍼블리셔분들이 계셔서 퍼블리셔분이 퍼블까지하고 프론트엔드 개발자로 넘어오는 과정인데요..! 이번에 React, Next.JS로 점차 마이그레이션 하는 과정인데 퍼블리셔분이 어디까지 해주셔야 하는지 감이 안잡히네요... 기존에는 html, css와 jQuery 및 플러그인 사용하셔서 퍼블까지 하셨다고하시는데 React에서 jQuery로 직접적으로 DOM을 조작하는건 의미가 없다고 생각해서...ㅠㅠ어떻게 해야할지 모르겠어요.. 다들 어떻게 협업하고 계시나요?

React와 scss를 사용해서 개발시 style control

React와 scss기반으로 개발시 전체적인 layout과 관련하여 최상위 컴포넌트의 className이나 inline style을 변경해야할 경우에 아래 두 방식중 어떤 것이 좋은 방법일까요?? (1) state(context api) 사용하고 하위 컴포넌트의 전체 재실행 되는 것이 정상이다. (2) querySelector를 통해 직접 DOM 접근하여 하위 컴포넌트의 전체 재실행을 피한다.

시계열 데이터를 예측하는 원리

주가 데이터를 예측하는 과정에서 궁금증이 발생했습니다. 기존에 arima모형을 통해 배운 것은 시간이라는 변수를 놓고 모형을 적합시키고, 예측했습니다. 그런데, lstm 모형을 보니, 독립변수로 시간뿐만 아니라 시가, 고가, 저가, 거래량 등 다양한 변수가 들어갑니다. 학습이야 시킬 수 있지만, 예측하기 위해서는 미래의 시가, 고가, 저가, 거래량이 필요하다고 생각하는데, 어떻게 예측값이 출력되는지 궁금합니다. 또한 decision tree, regression, randomforest도 위와 같은 변수들을 더 넣어서 주가 예측에 사용할 수 있는지 궁금합니다. 답변 남겨주시면, 정말 감사드리겠습니다 🙇‍♂️

크롬 새 탭에 html 요소를 삽입하고 싶습니다.

https://github.com/hbcha0916/QuickSearch 이 아이디어를 크롬 확장 프로그램으로 만들고자 현재 작업 중에 있습니다. 그러나 contents script를 만드는 과정에서 어떻게 크롬 새 탭에 접근할 지가 의문입니다. Manifest.json에서 적용되는 사이트의 주소도 어떻게 해야할 지 의문이고, 자바스크립트로 DOM을 어떻게 조작해서 새 탭에 요소를 삽입해야 할지 잘 모르겠습니다. 다른 분들의 조언을 듣고자 질문 올려봅니다.

this 공부하고 있는데 스코프, 상속 개념이 너무 헷갈리네요. 다음 코드에서 결과가 제 예상과 다르게 나오는 이유가 궁금합니다.

화살표 함수 내부의 this는 상위 스코프의 this를 상속받는 걸로 알고 있는데 document.body.addEventListener('click', () => { console.log(this); }) 의 출력 결과가 document 객체가 아닌 window객체가 나오는 이유가 있나요? 자바스크립트에서의 객체와 브라우저가 렌더링하는 DOM 객체를 다르게 봐야하는 건지 궁금합니다 this 공부하는데 많이 헷갈리네요 ㅠ

react에서 state를 잘 관리하는 방법 질문 드립니다

안녕하세요 왕킹왕짱짱초보 프론트 개발자입니다 현재 react와 recoil을 사용하여 프로젝트를 개발중입니다 구조는 간단하게 도메인별로 (ex pages 디렉토리 하위 login 디렉토리 하위 action, model, component 이런식으로 구조를 잡아뒀습니다 다른 도메인들도 똑같이 잡아서 사용하고있습니다 서론은 저는 recoil을 그저 로그인 데이터나 다국어 정보등 localstorage와 연관된 정보나 말 그대로 프로젝트 전체 범위에 영향을 끼치는 상태들만 관리하는 용도로 사용하고있습니다 그런데 프로젝트를 진행하다보니 각 도메인별로 컴포넌트 개수가 많아지고 특히 Modal을 사용하거나 api호출 시 isLoading과 같은 상탯값을 다룰때 이게 상태가 많아지고 넘기는 값이 많아지니까 제가 만든 코드를 제가 구분하기 힘든 지경에 이르러버렸습니다... 본론은 도메인별로 api, model, compnent를 관리할때 recoil이나 redux같은 전역 상태도 각 domain별로 atoms 디렉토리나 store 디렉토리로 관리해도 괜찮을까요?? 전역 상태 관리 남용이나 오용은 아닌지 걱정도 되고.. 잘 몰라서 해도 되는지 확신이 안 서네요.. 🙇