#seo

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

api의 첫번째 호출 이후부터 antd Button 렌더링 안되는 이슈가 있습니다.

```jsx import { Popover, Modal, Button, Image, Result } from "antd"; const [prevImg, setPrevImg] = useState(["any"]); const [loading, setLoading] = useState(false); const [removeImgFiles, setRemoveImgFiles] = useState([]); const combinePrevImages = (prevImages, newImages) => { const combinedImages = [...prevImages, ...newImages]; return combinedImages; }; useEffect(() => { const postSeg = async () => { try { const res = await axios.post( "apiurl", { filepath: filePath, clips: sortableList.map(list => `${list.seg.start}-${list.seg.end}`), frame: frameValue }, { proxy: false } ); return res.data; } catch (error) { console.error("Error posting segments:", error); return []; } finally { setLoading(false); } }; const postSegments = async () => { if (segments[0]?.start === 0 && segments[0]?.end === 0) return; if (sortableList && filePath) { setLoading(true); const res = await postSeg(); const combinedPrevImg = combinePrevImages(prevImg, res.results); setPrevImg(combinedPrevImg); console.log("Post Request Success"); } }; postSegments(); }, [filePath, segments, frameValue]); const handleModalOpen = useCallback(() => setModalOpen(true), []); const handleModalClose = useCallback(() => { setRemoveImgFiles([]); setModalOpen(false); }, []); const handleDeleteButtonClick = async () => { if (removeImgFiles.length > 0) { setPrevImg([...removeImgFiles]); setRemoveImgFiles([]); } else { const result = await showSwal({ title: "Are you sure delete?", showCancelButton: true, confirmButtonText: "Confirm", cancelButtonText: "Cancel", confirmButtonColor: "#3085d6", cancelButtonColor: "#d33" }); if (result.isConfirmed) { setRemoveImgFiles([...prevImg]); setPrevImg([]); } const success = await Promise.all(removeImgFiles.map(deleteFiles)); return success; } } const handleRemoveFinish = async () => { if (removeImgFiles) { for (const filePath of removeImgFiles) { try { await removeFile(filePath); } catch (e) { console.log("File Remove Error", e); } } } setRemoveImgFiles([]); handleModalClose(); }; return ( <motion.div initial={{ x: width }} animate={{ x: 0 }} exit={{ x: width }} transition={mySpring} > <div style={{ fontSize: 12, padding: "0 5px", color: "var(--gray12)", display: "flex", justifyContent: "space-between", alignItems: "center" }} > <FaAngleRight title={t("Close sidebar")} size={20} className="angle-right" role="button" onClick={toggleSegmentsList} /> {header} <FaExpandArrowsAlt title={t("Image Inspection")} size={18} className="expand-arrow-alt" style={{ cursor: "pointer" }} role="button" onClick={!loading ? handleModalOpen : handleModalClose} /> <Modal title={t("Image Inspection")} centered onCancel={handleModalClose} open={modalOpen} footer={[]} width="100%" > <div className="imagecontainer"> <Button danger className="toggle-remove" onClick={handleDeleteButtonClick}> {removeImgFiles.length > 0 ? "Add" : "Remove"} </Button> {prevImg?.length > 10 && prevImg.map(img => ( <Popover key={img}> {removeImgFiles?.includes(img) ? ( <span> <Result className="result" icon={<FaSmile />} subTitle="delete" /> </span> ) : <Image key={uuidv4()} src={img} preview={{ src: img }} alt={uuidv4()} /> )} </Popover> ))} </div> <Button block onClick={handleRemoveFinish}> Finish </Button> </Modal> </div> ) ``` api 호출을 통해 frameValue 개수(여기서는 12개씩) 만큼 이미지를 렌더링 하고 있는데 두번째 호출부터는 Button이 렌더링되지 않아서 어디가 잘못됐는지 알고싶습니다.. 필요한 부분이 imagecontainer 클래스네임인 div를 렌더링 해야합니다.

Next.js SSR + react-query 조합에서의 serializing 에러

안녕하세요! Next.js SSR + react-query 조합을 사용하려고 하는데요, page 컴포넌트 내 getServerSideProps 함수에서 prefetching을 받아온 후에 serializing 에러가 발생합니다. (Next.js는 13버젼입니다.) 에러 내용은 다음과 같습니다. Error: Error serializing `.dehydratedState.queries[0].state.data.headers` returned from `getServerSideProps` in "/top". Reason: `object` ("[object AxiosHeaders]") cannot be serialized as JSON. Please only return JSON serializable data types. 해당 에러 내용으로 구글링을 해보니, 대부분 getServerSideProps 함수 반환 코드에서 return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; 와 같이 dehydrate(queryClient)값을 JSON화 -> Object화를 하라고 하는데요, 이와 같이 사용해도 또 다시 아래와 같은 에러가 납니다. TypeError: Converting circular structure to JSON --> starting at object with constructor 'ClientRequest' | property 'socket' -> object with constructor 'Socket' --- property '_httpMessage' closes the circle Backend API는 Express.js를 사용하고 있으며, res.status(200).json({ data: ~ })와 같은 방식으로 응답을 주고 있습니다. 어떻게 해결할 수 있을까요? 코드 첨부가 안되네요, 아래는 page 컴포넌트가 위치한 파일의 전체 코드입니다. import type { ReactElement } from 'react'; import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query'; import { format } from 'date-fns'; import TopMusicContainer from '~containers/TopMusicContainer'; import Layout from '~layouts/Layout'; import type { NextPageWithLayout } from '~pages/_app'; import TopMusicService from '~services/topMusicService'; import * as MusicType from '~types/musicType'; export async function getServerSideProps() { const queryClient = new QueryClient(); await queryClient.prefetchQuery(['fetchTopMusic'], () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }); return { props: { dehydratedState: JSON.parse(JSON.stringify(dehydrate(queryClient))), }, }; } const Top: NextPageWithLayout = (): JSX.Element => { const { data, isLoading } = useQuery({ queryKey: ['fetchTopMusic'], queryFn: () => { const params: MusicType.ListRequestType = { filter: 'title', keyword: '', page: 1, limit: 25, time: format(new Date(), 'yyyyMMddHH'), }; return TopMusicService.list(params); }, }); return ( <section> <TopMusicContainer /> </section> ); }; Top.getLayout = function getLayout(page: ReactElement) { return <Layout>{page}</Layout>; }; export default Top;

파이썬 오류 좀 고쳐주세요 ㅠㅠ

import time import requests import streamlit as st API_BASE_URL = "http://localhost:8000/qna" # Fastapi로 api 생성 def request_chat_api(user_message: str) -> str: url = API_BASE_URL resp = requests.post( url, json={ "user_message": user_message, }, ) resp = resp.json() print(resp) return resp["answer"] def init_streamlit(): st.set_page_config(page_title='Dr. KHU', page_icon='🩺') if "messages" not in st.session_state: st.session_state.messages = [{"role": "assistant", "content": "안녕하세요! Dr.seo입니다🩺"}] # Initialize chat history if "messages" not in st.session_state: st.session_state.messages = [] # Display chat messages from history on app rerun for message in st.session_state.messages: with st.chat_message(message["role"]): st.markdown(message["content"]) def chat_main(): if message := st.chat_input(""): # Add user message to chat history st.session_state.messages.append({"role": "user", "content": message}) # Display user message in chat message container with st.chat_message("user"): st.markdown(message) # Display assistant response in chat message container assistant_response = request_chat_api(message) with st.chat_message("assistant"): message_placeholder = st.empty() full_response = "" for lines in assistant_response.split("\n"): for chunk in lines.split(): full_response += chunk + " " time.sleep(0.05) # Add a blinking cursor to simulate typing message_placeholder.markdown(full_response) full_response += "\n" message_placeholder.markdown(full_response) # Add assistant response to chat history st.session_state.messages.append( {"role": "assistant", "content": full_response} ) if __name__ == "__main__": init_streamlit() chat_main() 이 코드를 실행시키면 자꾸 AttributeError: st.session_state has no attribute "messages". Did you forget to initialize it? More info: https://docs.streamlit.io/library/advanced-features/session-state#initialization 라고 뜨네요..

타입스크립트 타입지정

리액트 쿼리로 OptimisticUpdate 를 구현했는데 onError 에서 context 타입 지정을 어떻게 해야할지 모르겠습니다 ㅠㅠ context : 타입 하면 오류나고, data : 타입 = context 해도 오류나고 as 를 쓰면 해결되긴 하는데 더 좋은 방법 없을까요? ㅠㅠㅠ 'use client'; import { useState } from 'react'; import { toast } from 'react-toastify'; import { usePostLikeCount } from '@/hooks'; interface LikeContextType { previousLikeCount: number; previousIsLike: boolean; } export const useOptimisticLike = ( boardId: number, initialLikeCount: number, initialIsLike: boolean, refetch: () => void ) => { const [optimisticLikeCount, setOptimisticLikeCount] = useState(initialLikeCount); const [optimisticIsLike, setOptimisticIsLike] = useState(initialIsLike); const { mutate: postMutate } = usePostLikeCount(boardId, { onMutate: async (): Promise<LikeContextType> => { setOptimisticLikeCount((prev) => optimisticIsLike ? prev - 1 : prev + 1 ); setOptimisticIsLike((prev) => !prev); return { previousLikeCount: optimisticLikeCount, previousIsLike: optimisticIsLike, }; }, onError: (err, variables, context) => { const data: LikeContextType = context; if (data) { setOptimisticLikeCount(data.previousLikeCount); setOptimisticIsLike(data.previousIsLike); } toast.error('좋아요 업데이트에 실패했습니다.'); }, onSuccess: () => { refetch(); }, }); const uploadLike = () => { postMutate(); }; return { optimisticLikeCount, optimisticIsLike, uploadLike, }; };

aws 비용이 RDS에서 너무 많이 나가는데 비용절감 방법이 있을까요?

aws Cost Explorer에서 RDS 비용이 다른 항목에 비해 비용이 많이 나가는데요.. 아래 Amazon Web Services Korea LLC 서비스별 요금 정보에서 보면 "USD 0.120 per hour per vCPU running RDS Extended Support for MySQL 5.7 in Year 1, Year 2 2,972 vCPU-hour USD 356.64" 위의 항목이 제일 많이 나가고 있는데요. * 할당량 * DB 인스턴스 (2/40) 할당된 스토리지 (0.08 TB/100 TB) * 인스턴스 정보 * dev-ds MySQL Community ap-northeast-2a db.t3.small DB 엔진 버전 8.0.36 prod-rds MySQL Community ap-northeast-2a db.t3.medium DB 엔진 버전 8.0.36 사용중인 스토리지 양도 적은데 어떤 이유로 과금이 많이 되는걸까요? aws 전문가님들!~ 답변 부탁드릴게요^^~ * 청구서 상세정보 * "Relational Database Service USD 480.57 Asia Pacific (Seoul) USD 480.57 Amazon Relational Database Service for MySQL Community Edition USD 472.71 USD 0.052 per db.t3.small Single-AZ instance hour (or partial hour) running MySQL 744 Hrs USD 38.69 USD 0.104 per db.t3.medium Single-AZ instance hour (or partial hour) running MySQL 744 Hrs USD 77.38 USD 0.120 per hour per vCPU running RDS Extended Support for MySQL 5.7 in Year 1, Year 2 2,972 vCPU-hour USD 356.64 Amazon Relational Database Service Provisioned Storage USD 7.86 $0.00 per GB-month of provisioned GP2 storage under monthly free tier running MySQL 20 GB-Mo USD 0.00 $0.131 per GB-month of provisioned gp2 storage running MySQL 30 GB-Mo USD 3.93 $0.131 per GB-month of provisioned GP3 storage running MySQL 30 GB-Mo USD 3.93 Elastic Compute Cloud USD 143.00 Asia Pacific (Seoul) USD 143.00 Amazon Elastic Compute Cloud NatGateway USD 43.93 $0.059 per GB Data Processed by NAT Gateways 0.448 GB USD 0.03 $0.059 per NAT Gateway Hour 744 Hrs USD 43.90 Amazon Elastic Compute Cloud running Linux/UNIX USD 79.46 $0.026 per On Demand Linux t3.small Instance Hour 744 Hrs USD 19.34 $0.0288 per On Demand Linux t2.small Instance Hour 744 Hrs USD 21.43 $0.052 per On Demand Linux t3.medium Instance Hour 744 Hrs USD 38.69" 답변 부탁드릴게요. 감사합니다^^!

iOS 개발 시, 사용자 개인정보 조회 및 전송 범위에 대한 질문(DevceID/MACAdress/IP)

안녕하세요. iOS 개발하면서 어려움이 있어서 이렇게 질문 남깁니다. Q. iOS 디바이스에서 활동기록을 서버로 전송하고 싶은데, DeviceID 혹은 MAC 주소를 조회해서 서버에 전송하는 행위가 법적이나 애플 약관상 이슈가 없는지 궁금합니다. 제가 검색해보면, Apple 정책은 다음과 같습니다. 링크: https://developer.apple.com/app-store/user-privacy-and-data-use/ "Can I fingerprint or use signals from the device to try to identify the device or a user? No. Per the Apple Developer Program License Agreement, you may not derive data from a device for the purpose of uniquely identifying it. Examples of user or device data include, but are not limited to: properties of a user’s web browser and its configuration, the user’s device and its configuration, the user’s location, or the user’s network connection. Apps that are found to be engaging in this practice, or that reference SDKs (including but not limited to Ad Networks, Attribution services, and Analytics) that are, may be rejected from the App Store." 제가 인지하기론, 디바이스를 특정짓는 정보는 서버에 전송하는 것을 불법으로 알고 있는데, 제가 암묵지로만 알고 있다보니, 정확한 근거를 찾고 싶어서 질문드립니다! 긴글 읽어주셔서 감사합니다!

AWS Beanstalk 배포 하기 전에 신경써줘야 할 것이 있나요 ?

현재 nodejs로 백엔드를 구성하고 EB에 배포하는데 몇 가지 오류가 생겨서 질문 드립니다. 프로젝트 구조는 다음과 같습니다. -customer └ .gitignore └ .dockerignore └ src ( 백엔드 코드 ) └ .gitignore └ Dockerfile └ Package.json -product └ customer 와 동일 -shopping └ customer 와 동일 -proxy └ Dockerfile docker-compose.yaml 리전 ap-northeast-2(seoul region) 로컬에서 빌드하고 작동하는 거 확인 후 위 코드를 모두 압축해서 EB에 올렸습니다. EB에 올리기전에 vpc , igw, 등등 미리 생성해줘야 할 게 있나요? 추가로 .gitignore 같은 파일도 같이 올려도 되나요 ? ( 초보라서 질문의 질이 떨어질 수 있지만 고수분들의 너그러운 양해를 부탁드립니다 .ㅠㅠ ) 에러 로그를 보면 1. ELB Fail -> VPC has no internet gateway 2. Stack named 'awseb-e-33wucpgpey-stack' aborted operation. Current state: 'CREATE_FAILED' Reason: The following resource(s) failed to create: [AWSEBV2LoadBalancer, AWSEBInstanceLaunchWaitCondition] 3. LaunchWaitCondition failed. The expected number of EC2 instances were not initialized within the given time. Rebuild the environment. If this persists, contact support.

안녕하세요 html,css질문입니다 제발 도와주세요

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>중경삼림</title> <script src="//code.jquery.com/jquery-3.3.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.mb.YTPlayer/3.3.1/jquery.mb.YTPlayer.min.js"></script> <script> jQuery( function() { jQuery( '#background' ).YTPlayer(); } ); </script> <link rel="stylesheet" href="style.css"> </head> <body> <div class="jb-box"> <div id="background" class="player" data-property="{ videoURL:'https://www.youtube.com/watch?v=ncT1R2hMpaQ', mute: true, showControls: false, useOnMobile: true, quality: 'highres', containment: 'self', loop: true, autoPlay: true, stopMovieOnBlur: false, startAt: 9.5, opacity: 1 }"></div> </div> <br><br><br> <div id="director"> <br><br><br><br> <h1>왕가위</h1> </div> </body> </html> 이건 html이고, body{ margin: 0; } .jb-box { position: relative; } #background { z-index: -1; } 이건 외부 css파일입니다. 문제는 저 스크립트가 다른 컴퓨터에서 실행했을 때 영상이 재생되지 않는다는 것입니다. '이 동영상은 볼 수 없습니다'로 뜹니다...혹시 저 스크립트에 문제가 있는 것 일까요..?? 도와주시면 정말 감사하겠습니다...

[사이드 프로젝트] 패션 이커머스 플랫폼 '푸츠(PUTS)' 앱 개발팀 모집

프로젝트 소개: ‘푸츠(PUTS)_Pick Up The Style!’서비스는 패션 디자이너 브랜드를 중심으로 BM특허까지 보유한 혁신적인 패션 커머스 플랫폼서비스 입니다. 데모버전까지 외주개발을 통해 개발이 완료되었지만 현시점에서 리뉴얼하여 새롭게 런칭버전을 개발하고자 역량있는 팀원을 모집합니다. <참고> 본 서비스의 시장성은 2024년 약 19조 5천억원(캐주얼) 정도의 시장성을 예상하고 있으며 연간 약 3.5%씩 지속적으로 성장 중에 있습니다. 3-5년이내 시장의 10%이상 점유를 목표하고 있으며 시장을 장악 가능한 비즈니스 모델과 마케팅 능력을 보유하고 있습니다. (참조: https://global.fashionseoul.com/2023-11-10/Korean-Fashion-Market-Size-Anticipated-Highest-Growth-Ever) 우리는 패션과 기술을 접목해 사용자와 소비자에게 최상의 쇼핑 경험과 정보 공유, 소득을 제공하는 서비스로 패션산업의 큰 파도를 함께 일으킬 분들을 모집합니다. 사이드 프로젝트 형태로 진행되며, 유연한 근무 환경에서 협업을 지향합니다. 3-5년이내 엑싯을 목표로 진행됨으로 임금지급 방식이 아닌 지분분배 방식으로 진행됩니다. 프로젝트 완료시 파트별 기여도에 따라 지분설정이 되며 관련 내용은 프로젝트 진행 전 협의를 통해 산정하여 계약진행 예정.(급여를 제공 받고자 하시는 분은 정중히 사양합니다.) 모집 직군: 1. 프론트엔드 개발자 (1~2명) o 주요 업무: 모바일 앱 UI/UX 구현, 웹 랜딩페이지, 사용자 인터페이스, 어드민 프론트엔드 개발 o 기술 스택: React Native 또는 Flutter, JavaScript/TypeScript, HTML/CSS o 우대 사항: 모바일 퍼포먼스 최적화 경험, 패션 커머스 개발 경험 2. 백엔드 개발자 (1~2명) o 주요 업무: 서버 및 데이터베이스 설계, API 개발, 어드민 백엔드 개발 o 기술 스택: Node.js, Django, AWS, PostgreSQL, RESTful API o 우대 사항: 대용량 트래픽 처리 경험, 보안 및 결제 시스템 개발, 이커머스 어드민개발 경험, 포인트관리 및 쿠폰설정 관리 등 3. UI/UX 디자이너 (1명) / 대표자와 함께 진행 또는 대표자가 진행 o 주요 업무: 모바일 앱 디자인, 사용자 경험 설계 o 필수 스킬: Figma 또는 Photoshop, Illustrator o 우대 사항: 패션 브랜드 디자인 경험, 사용성 테스트 및 피드백 반영 경험 근무 형태: • 프로젝트 기반 협업 (파트타임 가능) • 원격 근무 가능 (주 1회 온라인 미팅) • 유연한 일정과 주도적인 업무 환경 우대 사항: • 사이드 프로젝트 경험 • 패션, 커머스에 대한 관심과 열정 • 스타트업 문화에 익숙한 분 • 책임감 강하신 분 지원 방법: • 이력서와 포트폴리오를 [dcode00@naver.com]로 제출 • 지원 시 사이드 프로젝트 경험 및 참여 가능 시간을 명시해 주세요. 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe] • 회사주소: 경기도 안산시 상록구 한양대학로55 제2과학기술관 지하2층 B210호 (한양대학교 에리카캠퍼스 소재) 지원 마감일: [채용 완료시까지] 로켓펀치 참여링크 https://www.rocketpunch.com/jobs/139647 문의: • 이메일: [dcode00@naver.com] • 카카오톡/오픈채팅방: [https://open.kakao.com/o/gi5ixgVe]

react 그리드에서 수정된 부분이 있으면 조회버튼을 눌렀을 때 alert창 띄우기 기능 (useState 비동기 질문)

안녕하세요. react 초보 개발자입니다. 자바스크립트도 처음이라 비동기 관련해서 제 의도와는 다르게 작동할 때마다 당황하는 중입니다🤣 쌩초보임을 감안해 너그럽게 댓글 달아주시면 감사하겠습니다 :) 화면 설명 먼저 드리자면 조회 버튼을 누르면 그리드에 데이터가 뜨고, 데이터를 수정한 후에 저장할 수 있는 화면입니다! 제목과 같이 그리드에서 수정된 부분이 있을 경우에, 저장하지 않고 조회버튼을 누르면 '수정중입니다. 조회를 진행하시겠습니까?' 와 같은 alert창을 띄우는 기능을 구현중에 있습니다. 참고로 그리드는 aggrid 사용중입니다. 1. 우선 변경값 존재여부를 확인하는 변수 isChanged 를 useState로 선언해주었습니다. const [isChanged, setIsChanged] = useState<boolean>(false); 2. 그리드에서 수정된 부분이 있나 체크하는 건 onCellValueChanged 함수를 통해 값이 변경되면 isChanged가 true로 바뀌게 했습니다. const onCellValueChanged = (params: any) => { setIsChanged(true); }; 3. 저장로직에는 setIsChanged(false)가 있습니다. 또한 저장이 제대로 끝난 후에 조회로직을 탑니다. const onClickSave = async () => { // (생략) 저장 로직 // 저장 완료 후 setIsChanged(false); onClickSearch(); } 4. 조회로직에는 isChanged의 값을 확인하고, 변경값이 있다면 alert창이 뜨고, 확인을 누르면 조회를 진행합니다. const onClickSearch = async () => { if (isChanged) { // (생략) 메세지 띄우는 로직. alert창에서 확인을 누르면 조회 진행 setIsChanged(false); } // (생략) 조회 로직 } * 문제점 정상적으로 저장을 한 후에 조회로직을 타는데, isChanged가 false로 변경되기전에 조회로직을 타서 alert창이 뜹니다. 이 문제는 어떻게 해결하는 게 좋을까요..?

next14의 next/headers의 cookies를 이용한 쿠키설정

안녕하세요 현재 데이터시각화 사이트 프로젝트를 진행중입니다. next14와 spring boot(리소스와 인증.인가)를 사용하고 있고, 카카오 소셜로그인을 하면 스프링서버에서 jwt(access 토큰)를 발급해주고 refresh 토큰은 redis를 통해 관리되고 있습니다. 받아온 토큰은 cookie를 통해 관리하고 있습니다. seo를 위해 ssr을 사용하고 있는데, ssr과정에서 데이터를 fetch를 할 때 토큰을 같이 보내고, 만약 액세스 토큰이 만료되고 리프레시 토큰이 살아있다면 응답 헤더에 새로운 액세스토큰을 보내주고 있습니다. 그런데 이때 next/headers의 cookies를 사용하여 쿠키를 세팅하는것이 안됩니다. 데이터 페치중, 혹은 ssr과정중에는 Cookies can only be modified in a Server Action or Route Handler. 라는 오류가 뜨며 cookie를 set 하거나 delete하는게 안됩니다. 이럴 경우는 어떻게 해야할까요?

firebase 호스팅 첫 화면이 세팅화면만 나와요

npm run start 를 할 땐 리액트 결과가 잘 나오는데 public/index.html 파일에 root 잘 연결되어있는 거 확인하고 npm run build를 해보면 build/index.html파일이 root 가진 채로 잘나와요 그래서 잘된거라고 생각하고 firebase hosting으로 연결 쭉 하고 json 파일 내 hostring: public 부분 build 폴더 설정도 했는데 firebase deploy로 호스팅 주소를 받아 테스트를 해보면 " welcome firebase hosting seoup complete" 라는 firsebase 세팅 초기 화면만 반복해서 뜨네요.. 혹시 몰라 새로운 리액트 폴더를 만들어서 다시 연결도 해보고 npm run start로 정상결과 확인 후 다시 npm run build 하고 firsebase deploy다시 치고 할 수 있는건 전부 다 해본것같은데 추가로 여기저기 블로그와 유튜브 까지 모두 검색해봤는데 firsebase init 순서까지 똑같이 했고 다른점이 없어서 더 멘붕이에요 ㅠ 계속 첫번째 화면만 보여요... 도와주세요 ㅠ

AI 빅데이터 부트캠프 질문

안녕하세요. 저는 도시공학과 박사 출신입니다. SPSS, AMOS 등으로 연구를 많이 진행했고, Gephi 로 연구를 해봤습니다. 특히 저는 도시 재난 전문 전공입니다. 해외에서 포닥을 2년 하고 지난주에 한국에 돌아와서 다시 취직을 해야하는데, 제가 논문 갯수가 충족이 되지만 모든 교수직이나, 새로 뽑는 연구원 보직이 AI, Big data 하는 사람만 뽑더라고요. 뿐만 아니라 저도 개인적으로 AI 관련 연구를 하고 싶고 빅데이터를 독학 했더니 답답한 점이 많아서 제대로 공부를 하고 싶습니다. 또한 그 동안 정성연구를 주로 해와서 빅데이터나 AI 를 통한 연구도 하고 싶으며 가능하다면 개발도 하고 싶습니다. 파이썬은 안해봤습니다! 하고싶은 연구 저는 가령 예를 들어 * AI를 어떻게 핵사고 대피를 위해 쓸 수 있는지 * 대형 공연장 화재시 빅데이터/ 리모트 센싱을 사람들에게 출구를 안내하는 것 등등 연구를 하고 싶습니다. * 재난 정보를 알려주는 AI 소프트웨어 개발 현재 내일배움카드는 발급이 가능한데 1) AI, Big data 를 함께 배우는 코스를 추천해주시면 감사드리겠습니다 2)대면/ 비대면 부트캠프가 있던데 해보신 분들은 장단점을 알려주실수 있을지요? (참고로 학회 등 때문에 1주 정도는 해외에 가야 함) 제가 괜찮아 보이는 것을 뽑아봤는데 추천 부탁드려요. A. 코드잇 데이터 분석가 트랙 https://sprint.codeit.kr/admissions/31 B. B. 새싹 (서울시) 산업실무 프로젝트 기반 LLM https://sesac.seoul.kr/course/active/detail.do C. LG전자 DX SCHOOL 2기 https://linkareer.com/https://linkareer.com/activity/202590 D. [LG유플러스] Why Not SW Camp 클라우드 활용 데이터 엔지니어링 3기 https://linkareer.com/https://linkareer.com/activity/205710

current_datetime 열에 시간이 출력이 안되요!

insert into 5_days(name, current_datetime) select '팀회의',convert_tz(now(), 'utc', 'Asia/Seoul')-- 현재 시간 및 날짜를 출력 union all select name, case when weekday(now()) between 0 and 4 then convert_tz(now(),'utc','Asia/Seoul')-- 월요일부터 금요일까지를 시스템 시간으로 변환합니다. else convert_tz(now(),'utc','Asia/Seoul') end from 5_days; 문제가 있나요?

Nextjs를 정적 웹 호스팅(dothome)으로 배포하게 될 때 문제점

안녕하세요. 이번에 맡게된 프로젝트에서 SEO가 중요하다고 판단되어 Nextjs를 사용하여 개발하였습니다. 그런데 저희 팀이 사용하고 있는 웹 호스팅 서버가 dothome입니다. dothome은 정적 웹 사이트 호스팅 서버라고 알고 있는데, 이 서버로 호스팅하게 되면 몇 가지 문제점이 있다고 판단되어 질문을 남기게 되었습니다. 1. dothome에 배포하기 위해 정적 빌드를 하게 되면, 서버 사이드 렌더링(SSR) 기능을 사용할 수 없게 되는데, 이는 NextJS를 사용해서 얻을 수 있는 SEO 측면의 이점을 얻을 수 없게되는 건가요? 그렇게 된다면 SEO를 개선하는 방법이 있을까요? 2. Nextjs에서 제공하는<Image> 태그가 서버 측에서 이미지 최적화기능을 제공하는 것으로 알고 있는데, 정적빌드를 사용하게 되면 일반적인 img 태그와 다를 바가 없어지는 걸까요? 3. 마지막으로 Nextjs를 사용하기 위해서 웹 호스팅을 변경하는 것이 좋을지, 변경해야한다면 어떤 것을 추천하지는 시 여쭤봅니다.

mysql에서 자꾸 에러가 떠요

insert into 5_days(name, current_datetime) select '팀회의',convert_tz(now(), 'utc', 'Asia/Seoul')-- 현재 시간 및 날짜를 출력 union all select name, case when weekday(now()) between 0 and 4 then '월요일 부터 금요일까지'-- 월요일부터 금요일까지를 시스템 시간으로 변환합니다. else '주말' end, convert_tz(now(),'utc','Asia/Seoul') from 5_days; 모르겠어요

aws 비용이 RDS에서 너무 많이 나가는데 할당용량을 변경하면 비용 감소가 가능할까요?

aws Cost Explorer에서 RDS 비용이 다른 항목에 비해 10배이상 비용이 많이 나가는데요.. 사이트 메인화면 쿼리가 너무 느려서.. 영향이 있을것같기도한데.. 아무튼 아래 url의 RDS 쪽 대시보드 확인해보니 https://ap-northeast-2.console.aws.amazon.com/rds/home?region=ap-northeast-2 "Asia Pacific (Seoul) 리전에서 다음의 Amazon RDS 리소스를 사용하고 있습니다(사용량/할당량). DB 인스턴스 (2/40) 할당된 스토리지 (0.08 TB/100 TB)" 위와 같이 할당 스토리지가 100테라?? 씩이나 되는데.. 이게 정상인건지 모르겠네요. 저걸 줄이면 비용이 줄어드는건지 궁금합니다. 근데 어디서 어떻게 줄이는건지 못찾겠네요. 쉽게 줄일 수 있을까요? 그리고 db 인스턴스가 2개인데 각각 30기가, 50기가로 할당되있던데.. 이거랑 대시보드에 나오는 할당량은 또 다른 건지도 궁금하네요. 답변 부탁드릴게요. 감사합니다^^!

React면 되는것을 굳이 Next.js로 구현하는것

SEO나 서버사이드 렌더링이 필요없는 서비스를 구현할 때, 이걸 그냥 React로 개발하는것과 Next.js로 개발하는것의 차이가 있나요? 저는 Next.js를 써야겠다 싶은 경우가 아니면 React로 개발하고 싶은데, Next.js에서 모든 컴포넌트를 그냥 다 클라이언트 컴포넌트로 하면 React랑 똑같은 거 아니야? 라는 질문을 들었을 때 할말이 없더라구요. React만으로 구현할 수 있는걸 굳이 Next.js를 쓰는게, 뭔가 그냥.. 닭잡는데 소잡는 칼 쓰는 느낌이라 굳이 그럴필요 없다 정도로만 생각했는데 정확한 근거를 들어보라니 대답을 못하겠더군요 둘의 차이가 정확히 무엇일까요? 기존의 SPA 앱같은걸 개발할 때 React만 쓰는게 좋은 이유가 있나요?

NextJs에 따로 백엔드를 두는경우

안녕하세요. 토이프로젝트로 글, 댓글, 로그인 기능을 포함한 블로그를 만들어보고있습니다. 원래 프론트엔드는 ReactJs, 백엔드는 Golang으로 만들려고 했는데, 글 기능을 구현하던 중 글기능은 SEO가 필요한데, React는 그게 잘 안되서 원래 React프로젝트 구조를 유지하고 SSR로 렌더링 하기 위해서 NEXTJs로 바꾸려고 합니다. 또 이미지 최적화 기능이나 폴더기반때문에 편하기도 하고요. 근데 Next로 프론트엔드만 바꾸고 GO 백엔드는 유지하려고 하는데, NEXTJS를 프론트로 사용하고 따로 백엔드를 두는게 많이 쓰이는 방식인가요..? NEXT가 백엔드기능까지 제공하는 풀스택 프레임워크로 알고있는데 백엔드서버를 따로 두는게 바보같은 방식인가 궁금합니다.

국비교육 조언부탁드립니다.

전자공학과를 나왔고 과에서 전공에 코딩이 많아서 접하는 일이 많다보니 흥미를 갖게 되었습니다. c언어, java, linux 등 하나를 깊게 배우지 않고 조금씩 접하다 보니 제가 배운게 뭔지 몰라 개발자가 되고싶다는 막연한 생각을 하던 와중에 국비지원을 알게 되었습니다. 저는 대부분 개발자를 접할 때 웹으로 많이 시작을 한다고 해서 저도 백엔드쪽을 집중적으로 공부를 하고 추후에 클라우드도 공부를 해서 데브옵스를 전문적으로 공부를 하고 싶다는 생각을 했습니다. 그래서 여러가지 학원들을 보고 있는데 배우는 내용과 난이도가 어떤지 몰라 조언을 구하려고 합니다. C언어는 다 배웠고 JAVA는 조금 배우고 졸업작품으로 안드로이드 스튜디오로 간단한 어플리케이션 만든정도 입니다. A학원 Database : Oracle DBMS, 설치 및 Admin, SQL 기본과 활용 Programming : Java 환경설정, 기본문법활용, 클래스, 네트워크, JDBC Front-end : HTML/CSS, Javascript, jQuery Back-end: 웹개발 환경구축, 서블릿&JSP, AJAX&MVC패턴, 리눅스&클라우드 Framework: Spring Framwork(DI, JDBC, MVC), Springboot, Mybatis B학원 클라우드 기반 웹 프로그래밍 - 클라우드 기술의 이해 (리눅스, NCP Laas 등) - 웹 프로그래밍 기초 (HTML, CSS, BootStrap) - 자바스크립트 - 리액트 기초프로그래밍 - 자바 프로그래밍 - 데이터베이스 (MySQL, JDBC) - 스프링 입문 - 스프링 데이터 - SaaS API 사용하기 DevOps 프로그래밍 - 네이버클라우드 플랫폼 - DevOps 를 위한 리눅스 - NCP DB&스토리지 - 도커를 활용한 컨테이너 구축 - 운영자를 위한 DevOps - 개발자를 위한 DevOps MSA 기반 프로그래밍 -MSA 개발을 위하 쿠버네티스 - 스프링 클라우드 - 스프링 배치 - 스프링 시큐리

React에서 SEO 적용하는 방법

안녕하세요, React로 서비스를 개발했는데 SEO를 적용하는 방법이 궁금합니다. Next.js 등으로 SSR을 적용하면 된다고 알고 있는데, Next.js로 전환하기에는 시간이 많이 소요될 것 같아서 다른 방법을 알아보고 있습니다. [현재 상황] 1. AWS를 사용하고 있고, EC2에는 백엔드 소스가 올라가 있고, S3에 프론트엔드 소스가 올라가 있습니다. 2. AWS S3에 React로 만든 프론트엔드 소스가 정적 웹 페이지 형태로 올라가 있습니다. [문제점] React 렌더링 방식이 SSR이 아닌 CSR 형태라서 SEO 적용이 되지 않고 있습니다. [질문] 1. https://prerender.io 를 사용해보려고 하는데요, 사이트에서 제공하는 방법 중에 cloundFront를 사용해서 작업하려고 하는데 정확한 방법을 모르고, prerender.io에서 제공하는 적용 예제가 오래되서 걱정이 됩니다. 2. 빠르고 쉽게 SEO를 적용할 수 있는 다른 방법이 있을까요?

flutter 앱 난독화 방법 중 어떤 방법이 더 효율적인가요?

Flutter 앱 개발 중인 학생입니다! 제가 판단했을 때는 앱이 어느정도 갖춰진 것 같아서, 출시를 도전하려고 합니다! 보안도 중요한지라, api key같은 중요한 정보는 디컴파일이나 리버스 엔지니어링으로부터 보호해야 한다고 하더라구요! 프로젝트 firebase-options 파일에 API-Key가 포함되어 있어서 보안 목적으로 난독화를 진행하고 싶은데요! 1. proguard 2. flutter build apk --obfuscate --split-debug-info 제가 잘 몰라서 그러는데, 위 두 방법 중 더 효율적인 방법은 무엇인가요?? 아니면 혹시 1. proguard 파일을 작성 후 2. 터미널 명령어를 이용해서 난독화를 진행하는 건가요?? .env 파일을 이용해서 api key를 숨기는 방법도 있던데, 이 방법은 난독화에 비해서는 보안에 취약한가요?? 고수분들의 도움을 받고 싶습니다!!

혹시 랜딩 페이지를 바꾸게 되면

초기 URL로 진입했을 때 랜딩페이지로 가게되는데 랜딩페이지를 변경하게 되면 seo 자체 순위나 이러한 seo 데이터가 초기화 되는건가요? 랜딩 페이지에 데이터가(접속자 수 이러한 것들) 그래서 많은 플랫폼 회사들이 랜딩페이지를 잘 바꾸지 않나 해서요? 답변해주시면 정말 감사드리겠습니다.! 회사가 분기마다 랜딩페이지를 변경하는데 이해가 안가서 여쭈어 봅니다!

회사 3달안에 회사 홈페이지 제작

신입 기준으로 작성되었습니다. 개발자는 혼자인 상태입니다. 페이지 메인 서브 합치면 50~60개 외부 데이터 180개 db,api 손수 제작, 로그인, 회원가입(OAuth포함), 블로그 게시판, 상담사와 채팅 기능, 반응형, SEO, 도메인연결 등을 3달 안에 하라는 소리를 들었습니다. 달로보면 큰데 12, 1, 2 제가 실제 근무한 주는 10주 정도 됩니다 쉬는 날도 있고 했어 가지고요. 하지만 현재도 퇴근 후 + 주말에도 코드 공부 및 작성하면서 프로젝트를 진행 중인데 계속해서 윗선에서는 외주는 몇주 + 이 금액이면 된다고 하더라 넌 왜 느리냐 어쩌구, 3달인데 페이지 제작이 안되면 얼마나 걸리는거냐, 챗봇 써라 챗봇써도 못만드냐? 이런 소리를 듣는 중 입니다. 제가 50일 정도 제작을 했던 거는 면접 볼 때 포폴용으로 내려고 만든 프로젝트 급 시간인데.. 이것도 부족한 부분이 많았는데 이 양을 50일 안에 하려니까 미치겠습니다. 혹시 신입이나 경력자 분들이 페이지를 제작한다면 기간은 얼마정도 잡는지 대략적으로도 좋으니.. 알려주시면 감사하겠습니다 ㅠㅠ

Next.js 서버 컴포넌트, 클라이언트 컴포넌트 어떤 식으로 분리해야 하나요??

현재까지 React를 사용하다가 SEO측면이나 사용자 경험 등 여러 방면에서 서버 사이드 렌더링이 갖는 장점이 크다 생각하여, Next로 프로젝트를 하면서 공부하는 중입니다. 지금까지 Next로 프로젝트를 진행하면서, 구글에 찾아봐도 명쾌하게 답을 얻지 못한 문제가 있어서 질문드립니다! 공식문서에서는 최대한 서버 컴포넌트로 만들고, 상호작용이 필요한 부문만 최대한 작게 클라이언트 컴포넌트로 만드는 것을 추천하고 있습니다. 이 말은 당연하게도 이해가 잘 되었습니다. 하지만 제가 만들고 있는 프로젝트에는 검색 페이지, 유저 페이지 등이 있습니다. 검색 페이지를 예로 들면, 사용자가 입력한 검색어를 쿼리 파라미터로 검색 결과 페이지에 넘겨주게 되고, 해당 검색어에 해당하는 데이터를 불러와야 합니다. 그 과정에서 검색어를 useParams()를 사용해서 받아오게 되는데, 이러한 훅을 사용하려면 클라이언트 컴포넌트여야 합니다. 그렇게 최상단에서 검색어를 파싱해서 데이터를 불러와 자식 컴포넌트들에게 넘겨주게 되면, 결국 루트가 클라이언트 컴포넌트가 되어 버리는데, 이런 검색 결과 페이지와 같은 경우엔 SSR이 큰 의미가 없나요?? 비슷한 원리로, 유저의 마이페이지와 같은 경우엔 유저 정보를(userId 등) 이용해서 데이터를 불러와 해당 유저의 정보를 보여주게 되는데, 유저 정보를 프론트 서버에서 페이지를 보내주는 시점에는 알 수 없습니다. 때문에 검색 페이지와 비슷하게 recoil의 atom 등과 같은 곳에서 유저 정보를 빼와서 데이터를 불러오게 될텐데, 그럼 이 경우에도 루트가 클라이언트 컴포넌트가 되어 버립니다. 이렇게 동적으로 발생하는 데이터를 이용해서 데이터를 불러오는 페이지는 SSR이 큰 의미가 없는 것인지 궁금합니다!! 개발 초보라 완전히 잘못 이해하고 있는 것일 수도 있지만, 바로 잡아주시면 감사하겠습니다!

SSR을 사용하지 않는 next.js 앱의 장점은 뭐가 있나요?

SSR을 사용해 next.js 앱을 만들었는데 서버 컴포넌트쪽 인증을 처리하지 못해 전체 앱을 CSR로 전환하자는 의견이 나왔습니다. SEO도 필요하지 않은 앱이라 SSR을 사용하지 않으면 라우팅을 제외하곤 next.js의 어떤 장점을 살릴 수 있는지 잘 모르겠습니다. SSR을 적용한 컴포넌트를 CSR로 전환할바에 앱을 리액트로 변환하는게 프론트 서버를 신경써야하는 단점도 없어질 것 같고 시간도 비슷할거 같아서요. 추가적으로 only CSR로 next.js 사용하시는 분도 계실까요?

[next.js] 서버사이드 렌더링을 하는 페이지에서 Swiper.js 컴포넌트를 사용하면 스타일이 깨집니다.

안녕하세요 next.js에서 Swiper.js 라이브러리를 사용할 때 발생하는 이슈 관련해서 도움을 받고자 질문드립니다. SSR 페이지에서 Swiper 컴포넌트를 사용하면 아래와 같은 에러가 나오면서 스타일이 깨지는 이슈가 있습니다. Warning: Extra attributes from the server: style 해당 이슈를 해결하기 위해 dynamic import로 Swiper를 사용하는 컴포넌트를 감싸고 SSR:false를 적용했는데요. 이렇게 하면 스타일 이슈는 해결되지만, 해당 컴포넌트가 서버렌더링 되는 html에 포함되지 않아 SEO 이슈가 있을까 걱정됩니다. 혹시 이런 에러를 겪어본 분이 있을까요? 좋은 해결책이나 원인을 아는분들 답변 부탁드립니다! 감사합니다.

프로젝트 리액트에서 Next js로 넘어갈때 SEO

리액트에서 Next JS로 프로젝트를 하신 이유가 있을까요 하면 SSR과 SEO에 관해서 말을해야하는데 신입 면접때 SEO에 대해 경험을 해보신적이 있으세요? 라고하면 뭐라고 답을 해야할까요..? 어떤식으로 답을 해야할지... 잘 모르겠습니다 ㅠ

프로젝트 기술을 선택할 때, 폴더 라우팅같은 장점들 때문에 ssr을 사용하지 않고 Next를 이용하는 것이 타당한 이유가 될까요?

<프로젝트에 대한 설명을 간단히 드리자면...> 동아리 프로젝트입니다. 학교 학우들을 대상으로 하는 고정 타겟층이기에, ssr을 통해 SEO를 높일 필요가 없고, 서비스 크기가 작은 서비스를 만들려합니다.(앱 내의 웹뷰로만 이용자가 접근 가능하게 하려합니다.) <next를 선택한 이유는 아래와 같습니다.> 1. 이미지 최적화와 같은 자동 최적화 기능과 폴더 구조를 통한 직관적 라우팅 등의 이유 (인터렉션이 많아서 서버 컴포넌트보단 클라이언트 컴포넌트의 사용 비중이 더 높을 것 같습니다.) 2. 채용 공고에서 기업들의 next.js 사용 경험에 대한 선호도 (많은 기업들이 next에 대한 경험을 이력에 요구하기 때문에, 괜스레 next를 실제 서비스에서 한 번쯤을 활용해봐야 하는것은 아닌가 조바심도 듭니다.) <제가 고민하는 부분은...> next를 사용하는 가장 큰 이점은 ssr이라고 생각이 됩니다. 선택한 기술의 가장 큰 이점을 사용하지 않고 다른 이점들을 이유로 기술을 선택했다라는게 이력서를 확인한 면접관 입장에서 과연 수긍할 수 있는 부분일까 의문이 듭니다. 개발을 시작한지 2년이 채 안되가기에, 기술 선택에 있어 확신이 없는 것 같습니다. 현업자 분들의 조언이 정말 큰 도움이 될 것 같습니다!