#web

aws spring boot 배포 오류

안녕하세요 백엔드 공부 중인 학생입니다. aws ec2로 Spring boot 프로젝트를 배포 시도 중에 있습니다. (maven, java 8, jar) java -jar jar파일명.jar 명령어로 배포 시도 중에 에러메세지가 도저히 해결이 안되어서 도움 요청드립니다.. 도와주신다면 감사하겠습니다.. 아 참고로 rds로 데이터베이스 생성하지 않고 mysql(workbench)로 데이터베이스 생성했습니다 <오류메세지> Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled. 2024-02-07 04:33:35.742 ERROR 31012 --- [ main] o.s.boot.SpringApplication : Application run failed org.springframework.context.ApplicationContextException: Failed to start bean 'webServerStartStop'; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server at org.springframework.context.support.DefaultLifecycleProcessor.doStart(DefaultLifecycleProcessor.java:181) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.DefaultLifecycleProcessor.access$200(DefaultLifecycleProcessor.java:54) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.DefaultLifecycleProcessor$LifecycleGroup.start(DefaultLifecycleProcessor.java:356) ~[spring-context-5.3.22.jar!/:5.3.22] at java.lang.Iterable.forEach(Iterable.java:75) ~[na:1.8.0_392] at org.springframework.context.support.DefaultLifecycleProcessor.startBeans(DefaultLifecycleProcessor.java:155) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.DefaultLifecycleProcessor.onRefresh(DefaultLifecycleProcessor.java:123) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.AbstractApplicationContext.finishRefresh(AbstractApplicationContext.java:935) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:586) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:147) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:734) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:408) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.run(SpringApplication.java:308) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1306) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1295) [spring-boot-2.7.2.jar!/:2.7.2] at com.se.social.SocialApplication.main(SocialApplication.java:13) [classes!/:0.0.1-SNAPSHOT] at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_392] at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_392] at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_392] at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_392] at org.springframework.boot.loader.MainMethodRunner.run(MainMethodRunner.java:49) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] at org.springframework.boot.loader.Launcher.launch(Launcher.java:108) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] at org.springframework.boot.loader.Launcher.launch(Launcher.java:58) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] at org.springframework.boot.loader.JarLauncher.main(JarLauncher.java:65) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] Caused by: org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.start(TomcatWebServer.java:229) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.web.servlet.context.WebServerStartStopLifecycle.start(WebServerStartStopLifecycle.java:43) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.context.support.DefaultLifecycleProcessor.doStart(DefaultLifecycleProcessor.java:178) ~[spring-context-5.3.22.jar!/:5.3.22] ... 22 common frames omitted Caused by: java.lang.IllegalArgumentException: standardService.connector.startFailed at org.apache.catalina.core.StandardService.addConnector(StandardService.java:238) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.addPreviouslyRemovedConnectors(TomcatWebServer.java:282) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.start(TomcatWebServer.java:213) ~[spring-boot-2.7.2.jar!/:2.7.2] ... 24 common frames omitted Caused by: org.apache.catalina.LifecycleException: Protocol handler start failed at org.apache.catalina.connector.Connector.startInternal(Connector.java:1077) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.catalina.core.StandardService.addConnector(StandardService.java:234) ~[tomcat-embed-core-9.0.65.jar!/:na] ... 26 common frames omitted Caused by: java.net.SocketException: Permission denied at sun.nio.ch.Net.bind0(Native Method) ~[na:1.8.0_392] at sun.nio.ch.Net.bind(Net.java:461) ~[na:1.8.0_392] at sun.nio.ch.Net.bind(Net.java:453) ~[na:1.8.0_392] at sun.nio.ch.ServerSocketChannelImpl.bind(ServerSocketChannelImpl.java:222) ~[na:1.8.0_392] at org.apache.tomcat.util.net.NioEndpoint.initServerSocket(NioEndpoint.java:275) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.tomcat.util.net.NioEndpoint.bind(NioEndpoint.java:230) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.tomcat.util.net.AbstractEndpoint.bindWithCleanup(AbstractEndpoint.java:1227) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.tomcat.util.net.AbstractEndpoint.start(AbstractEndpoint.java:1313) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.coyote.AbstractProtocol.start(AbstractProtocol.java:614) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.catalina.connector.Connector.startInternal(Connector.java:1074) ~[tomcat-embed-core-9.0.65.jar!/:na] ... 28 common frames omitted <전체> . ____ _ __ _ _ /\\ / ___'_ __ _ _(_)_ __ __ _ \ \ \ \ ( ( )\___ | '_ | '_| | '_ \/ _` | \ \ \ \ \\/ ___)| |_)| | | | | || (_| | ) ) ) ) ' |____| .__|_| |_|_| |_\__, | / / / / =========|_|==============|___/=/_/_/_/ :: Spring Boot :: (v2.7.2) 2024-02-07 04:33:27.975 INFO 31012 --- [ main] com.se.social.SocialApplication : Starting SocialApplication v0.0.1-SNAPSHOT using Java 1.8.0_392 on ip-172-31-39-15 with PID 31012 (/home/ubuntu/socialboardPJ/target/social-0.0.1-SNAPSHOT.jar started by ubuntu in /home/ubuntu/socialboardPJ/target) 2024-02-07 04:33:27.980 INFO 31012 --- [ main] com.se.social.SocialApplication : No active profile set, falling back to 1 default profile: "default" 2024-02-07 04:33:29.591 INFO 31012 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Bootstrapping Spring Data JPA repositories in DEFAULT mode. 2024-02-07 04:33:29.681 INFO 31012 --- [ main] .s.d.r.c.RepositoryConfigurationDelegate : Finished Spring Data repository scanning in 76 ms. Found 1 JPA repository interfaces. 2024-02-07 04:33:30.960 INFO 31012 --- [ main] o.s.b.w.embedded.tomcat.TomcatWebServer : Tomcat initialized with port(s): 80 (http) 2024-02-07 04:33:30.986 INFO 31012 --- [ main] o.apache.catalina.core.StandardService : Starting service [Tomcat] 2024-02-07 04:33:30.987 INFO 31012 --- [ main] org.apache.catalina.core.StandardEngine : Starting Servlet engine: [Apache Tomcat/9.0.65] 2024-02-07 04:33:31.641 INFO 31012 --- [ main] org.apache.jasper.servlet.TldScanner : At least one JAR was scanned for TLDs yet contained no TLDs. Enable debug logging for this logger for a complete list of JARs that were scanned but no TLDs were found in them. Skipping unneeded JARs during scanning can improve startup time and JSP compilation time. 2024-02-07 04:33:31.880 INFO 31012 --- [ main] o.a.c.c.C.[Tomcat].[localhost].[/] : Initializing Spring embedded WebApplicationContext 2024-02-07 04:33:31.880 INFO 31012 --- [ main] w.s.c.ServletWebServerApplicationContext : Root WebApplicationContext: initialization completed in 3717 ms 2024-02-07 04:33:32.215 INFO 31012 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Starting... 2024-02-07 04:33:32.569 INFO 31012 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Start completed. 2024-02-07 04:33:32.659 INFO 31012 --- [ main] o.hibernate.jpa.internal.util.LogHelper : HHH000204: Processing PersistenceUnitInfo [name: default] 2024-02-07 04:33:32.822 INFO 31012 --- [ main] org.hibernate.Version : HHH000412: Hibernate ORM core version 5.6.10.Final 2024-02-07 04:33:33.157 INFO 31012 --- [ main] o.hibernate.annotations.common.Version : HCANN000001: Hibernate Commons Annotations {5.1.2.Final} 2024-02-07 04:33:33.383 INFO 31012 --- [ main] org.hibernate.dialect.Dialect : HHH000400: Using dialect: org.hibernate.dialect.MySQL8Dialect 2024-02-07 04:33:34.255 INFO 31012 --- [ main] o.h.e.t.j.p.i.JtaPlatformInitiator : HHH000490: Using JtaPlatform implementation: [org.hibernate.engine.transaction.jta.platform.internal.NoJtaPlatform] 2024-02-07 04:33:34.266 INFO 31012 --- [ main] j.LocalContainerEntityManagerFactoryBean : Initialized JPA EntityManagerFactory for persistence unit 'default' 2024-02-07 04:33:34.906 WARN 31012 --- [ main] JpaBaseConfiguration$JpaWebConfiguration : spring.jpa.open-in-view is enabled by default. Therefore, database queries may be performed during view rendering. Explicitly configure spring.jpa.open-in-view to disable this warning 2024-02-07 04:33:35.616 WARN 31012 --- [ main] ConfigServletWebServerApplicationContext : Exception encountered during context initialization - cancelling refresh attempt: org.springframework.context.ApplicationContextException: Failed to start bean 'webServerStartStop'; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server 2024-02-07 04:33:35.620 INFO 31012 --- [ main] j.LocalContainerEntityManagerFactoryBean : Closing JPA EntityManagerFactory for persistence unit 'default' 2024-02-07 04:33:35.624 INFO 31012 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown initiated... 2024-02-07 04:33:35.646 INFO 31012 --- [ main] com.zaxxer.hikari.HikariDataSource : HikariPool-1 - Shutdown completed. 2024-02-07 04:33:35.650 INFO 31012 --- [ main] o.apache.catalina.core.StandardService : Stopping service [Tomcat] 2024-02-07 04:33:35.676 INFO 31012 --- [ main] ConditionEvaluationReportLoggingListener : Error starting ApplicationContext. To display the conditions report re-run your application with 'debug' enabled. 2024-02-07 04:33:35.742 ERROR 31012 --- [ main] o.s.boot.SpringApplication : Application run failed org.springframework.context.ApplicationContextException: Failed to start bean 'webServerStartStop'; nested exception is org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server at org.springframework.context.support.DefaultLifecycleProcessor.doStart(DefaultLifecycleProcessor.java:181) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.DefaultLifecycleProcessor.access$200(DefaultLifecycleProcessor.java:54) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.DefaultLifecycleProcessor$LifecycleGroup.start(DefaultLifecycleProcessor.java:356) ~[spring-context-5.3.22.jar!/:5.3.22] at java.lang.Iterable.forEach(Iterable.java:75) ~[na:1.8.0_392] at org.springframework.context.support.DefaultLifecycleProcessor.startBeans(DefaultLifecycleProcessor.java:155) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.DefaultLifecycleProcessor.onRefresh(DefaultLifecycleProcessor.java:123) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.AbstractApplicationContext.finishRefresh(AbstractApplicationContext.java:935) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.context.support.AbstractApplicationContext.refresh(AbstractApplicationContext.java:586) ~[spring-context-5.3.22.jar!/:5.3.22] at org.springframework.boot.web.servlet.context.ServletWebServerApplicationContext.refresh(ServletWebServerApplicationContext.java:147) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.refresh(SpringApplication.java:734) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.refreshContext(SpringApplication.java:408) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.run(SpringApplication.java:308) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1306) [spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.SpringApplication.run(SpringApplication.java:1295) [spring-boot-2.7.2.jar!/:2.7.2] at com.se.social.SocialApplication.main(SocialApplication.java:13) [classes!/:0.0.1-SNAPSHOT] at sun.reflect.NativeMethodAccessorImpl.invoke0(Native Method) ~[na:1.8.0_392] at sun.reflect.NativeMethodAccessorImpl.invoke(NativeMethodAccessorImpl.java:62) ~[na:1.8.0_392] at sun.reflect.DelegatingMethodAccessorImpl.invoke(DelegatingMethodAccessorImpl.java:43) ~[na:1.8.0_392] at java.lang.reflect.Method.invoke(Method.java:498) ~[na:1.8.0_392] at org.springframework.boot.loader.MainMethodRunner.run(MainMethodRunner.java:49) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] at org.springframework.boot.loader.Launcher.launch(Launcher.java:108) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] at org.springframework.boot.loader.Launcher.launch(Launcher.java:58) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] at org.springframework.boot.loader.JarLauncher.main(JarLauncher.java:65) [social-0.0.1-SNAPSHOT.jar:0.0.1-SNAPSHOT] Caused by: org.springframework.boot.web.server.WebServerException: Unable to start embedded Tomcat server at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.start(TomcatWebServer.java:229) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.web.servlet.context.WebServerStartStopLifecycle.start(WebServerStartStopLifecycle.java:43) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.context.support.DefaultLifecycleProcessor.doStart(DefaultLifecycleProcessor.java:178) ~[spring-context-5.3.22.jar!/:5.3.22] ... 22 common frames omitted Caused by: java.lang.IllegalArgumentException: standardService.connector.startFailed at org.apache.catalina.core.StandardService.addConnector(StandardService.java:238) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.addPreviouslyRemovedConnectors(TomcatWebServer.java:282) ~[spring-boot-2.7.2.jar!/:2.7.2] at org.springframework.boot.web.embedded.tomcat.TomcatWebServer.start(TomcatWebServer.java:213) ~[spring-boot-2.7.2.jar!/:2.7.2] ... 24 common frames omitted Caused by: org.apache.catalina.LifecycleException: Protocol handler start failed at org.apache.catalina.connector.Connector.startInternal(Connector.java:1077) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.catalina.util.LifecycleBase.start(LifecycleBase.java:183) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.catalina.core.StandardService.addConnector(StandardService.java:234) ~[tomcat-embed-core-9.0.65.jar!/:na] ... 26 common frames omitted Caused by: java.net.SocketException: Permission denied at sun.nio.ch.Net.bind0(Native Method) ~[na:1.8.0_392] at sun.nio.ch.Net.bind(Net.java:461) ~[na:1.8.0_392] at sun.nio.ch.Net.bind(Net.java:453) ~[na:1.8.0_392] at sun.nio.ch.ServerSocketChannelImpl.bind(ServerSocketChannelImpl.java:222) ~[na:1.8.0_392] at org.apache.tomcat.util.net.NioEndpoint.initServerSocket(NioEndpoint.java:275) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.tomcat.util.net.NioEndpoint.bind(NioEndpoint.java:230) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.tomcat.util.net.AbstractEndpoint.bindWithCleanup(AbstractEndpoint.java:1227) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.tomcat.util.net.AbstractEndpoint.start(AbstractEndpoint.java:1313) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.coyote.AbstractProtocol.start(AbstractProtocol.java:614) ~[tomcat-embed-core-9.0.65.jar!/:na] at org.apache.catalina.connector.Connector.startInternal(Connector.java:1074) ~[tomcat-embed-core-9.0.65.jar!/:na] ... 28 common frames omitted

리액트로 스프링과 웹소켓 채팅방을 구현했는데 자동 랜더링이 안됩니다..

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 A가 B한테 보냈을 때 B가 페이지를 새로고침 하지 않으면 채팅이 자동 랜더링이 되지 않는 상황인데 여러 방법을 참고하고 해봤지만.. 성공하지 않았습니다 어떻게 풀어나가야 할지 잘 모르겠습니다 ㅠㅠ 코드가 길지만 ... 혹시 답변이 가능할까해서 참고해봅니다 좋은 키워드도 추천해주시면 감사하겠습니다!!... export const ChatRoomPage = () => { //메뉴 모달 const [isModalOpen, setIsModalOpen] = useState(false); const [isExitModalOpen, setIsExitModalOpen] = useState(false); const [backgroundPosition, setBackgroundPosition] = useState('static'); const location = useLocation(); const params = location.pathname; const segments = params.split('/'); const RoomUniqueId = segments[4]; const RoomId = segments[5]; const [messageData, setMessageData] = useState([]); const [messageList, setMessageList] = useState([]); const [message, setMessage] = useState(''); const accesskey = Cookies.get('Access_key'); // 채팅방 입장시 안내 문구 기능 const [showModal, setShowModal] = useState(false); const client = useRef({}); useEffect(() => { console.log('유즈이펙트 쉴행'); setShowModal(true); connect('L'); return () => disconnect(); }, []); const connect = type => { client.current = new StompJs.Client({ brokerURL: 'ws://222.102.175.141:8081/ws-stomp', connectHeaders: { Access_key: `Bearer ${accesskey}`, }, debug: function (str) { console.log('str ::', str); }, onConnect: () => { if (type === 'L') { subscribe(); publish(); } else { subscribe1(); publish1(); } }, }); client.current.webSocketFactory = function () { return new SockJS('http://222.102.175.141:8081/ws-stomp'); }; client.current.activate(); return () => disconnect(); }; const subscribe = () => { client.current.subscribe(`/sub/chat/messageList/${localStorage.memberUniqueId}`, message => { // console.log('messageData11 : ', JSON.parse(`${message.body}`)); setMessageData(JSON.parse(`${message.body}`)); const data = JSON.parse(`${message.body}`); setMessageList(data.data.chatMessageList); }); }; const publish = () => { client.current.publish({ destination: `/pub/chat/messageList/${localStorage.memberUniqueId}`, body: JSON.stringify({ chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, page: 0, }), }); }; const closeModal = () => { setIsModalOpen(false); setBackgroundPosition('static'); }; const openModal = () => { setIsModalOpen(true); setBackgroundPosition('fixed'); }; const handleBackdropClick = e => { console.log('e ::', e); if (e.target === e.currentTarget) { closeModal(); } }; const ExitopenModal = () => { setIsExitModalOpen(true); }; const ExitcloseModal = () => { setIsExitModalOpen(false); }; const ReportButtonHandler = () => { alert('곧 업데이트 예정입니다!'); }; // 채팅 보내기 const sendMessage = message => { console.log('message :: ', message); connect(); setMessage(''); return () => disconnect(); }; const subscribe1 = () => { client.current.subscribe(`/sub/chat/message/${RoomUniqueId}`, message => { setMessageData({ ...messageList, message }); }); }; const publish1 = () => { client.current.publish({ destination: `/pub/chat/message/${RoomUniqueId}`, body: JSON.stringify({ memberId: `${localStorage.memberId}`, memberName: `${localStorage.memberName}`, memberUniqueId: `${localStorage.memberUniqueId}`, memberProfileImage: `${localStorage.profileImage}`, chatRoomId: RoomId, chatRoomUniqueId: RoomUniqueId, message: message, }), }); }; const disconnect = () => { client.current.deactivate(); }; console.log('messageList :: ', messageList); return ( <> <div style={{ width: '100%', height: '100%', position: backgroundPosition, }} > <Background> <Topbar> <Link to={`${PATH_URL.PARTY_CHAT}/${localStorage.memberUniqueId}`}> <TopBackDiv> <LeftBack /> </TopBackDiv> </Link> <TopbarName>모임이름</TopbarName> <ModalBtn onClick={() => { openModal(); }} > <RoomMenuIcon /> </ModalBtn> </Topbar> <Container> <Contents> <ParticipantDiv>ㅇㅇㅇ님이 참여했습니다.</ParticipantDiv> {messageList?.map((data, index) => { return ( <OtherDiv key={index}> <div style={{ position: 'relative', }} > <OtherImg> <OtherProfile> <img src={data.memberProfileImage} alt="profile" style={{ width: '100%', height: '100%', borderRadius: '8px', }} /> </OtherProfile> <OtherHostIcon> <PartHostIcon /> </OtherHostIcon> </OtherImg> <OthertInfo> <OtherName>{data.sender}</OtherName> <OtherContents> <OtherChatText>{data.message}</OtherChatText> <OtherChatTime>12:19 pm</OtherChatTime> </OtherContents> </OthertInfo> </div> </OtherDiv> ); })}

채팅 새로고침시 연결 끊기는 문제

안녕하세요. 현재 Websocket과 stompjs v6.0.0을 활용해 채팅을 구현했습니다. roomId로 여러 채팅방을 만들 수 있게 구현했고, 현재 새로고침을 하지 않는 이상 잘 돌아갑니다. 그러나, 새로고침 할 시에는 바로 연결이 끊겨 이전의 채팅 내역도 보이지 않고, 연결, 구독 내역이 사라집니다 ... 어떻게 reconnect 해야할까요? 단순히 채팅 페이지에서 useEffect로 connect를 다시 하니 이미 연결 구독이 된 상태라고 뜨더라구요 .... ㅠㅠ (고민글을 올렸을 때 채팅방이 생성되고, 연결 구독이 됩니다. 채팅 시작 버튼을 눌렀을 경우에는 본인이 연결 구독이 되어 1대 1로 상대방과 채팅이 시작되는 구조입니다. ) import { CompatClient, Stomp } from "@stomp/stompjs"; import { createContext, useContext, useMemo, useRef } from "react"; import { useSetRecoilState } from "recoil"; import { messageState } from "../../states/chatting"; import audio from "../../assets/audios/chatting.mp3"; const ChatContext = createContext( {} as { connect: (roomId: number) => void; disconnect: () => void; send: (roomId: number, message: string) => void; }, ); export const useChatContext = () => useContext(ChatContext); export function ChatProvider({ children }: any) { const setMessages = useSetRecoilState(messageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connect = (roomId: number) => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe( `/sub/chat/room/${roomId}`, (message) => onMessageReceived(message, roomId), { token: token!, }, ); }, ); return client; }; const onMessageReceived = (message: any, roomId: number) => { const audioElement = new Audio(audio); audioElement.play(); setMessages((prevMessages) => { const updatedMessages = { ...prevMessages, [roomId]: [...(prevMessages[roomId] || []), JSON.parse(message.body)], }; return updatedMessages; }); }; // 채팅 나가기 const disconnect = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const send = (roomId: number, message: string) => { if (client.current) { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: roomId, message: message, type: "TALK", }), ); } }; const handlers = useMemo(() => ({ connect, disconnect, send }), []); return ( <ChatContext.Provider value={handlers}>{children}</ChatContext.Provider> ); } ----------이 부분은 connect 하는 부분입니다 --------- const { connect } = useChatContext(); const chatRoomId = worryBoard && worryBoard.chatRoomId; const handleStartChatting = () => { navigate(`/chatting`); connect(chatRoomId!!); }; ------------ 채팅 페이지는 따로 있습니다 --------------

display:-webkit-box 왜 적용이 안될까요?

1. p태그에 말줄임css(display:-webkit-box 포함)를 적용했습니다만 적용이 되지 않고 overflow:hidden처리만 되더라구요... display:box 나 display:block를 적용하거나 display속성을 아예 지워버리면 나오는데 webkitbox가 먹히지 않는 이유가 있을까요? (개발자도구에는 찍힙니다) display:flex로 코드를 짜고 있는데 이것도 영향이 있을까요? 2. 그리고 css에서 display: box와 display: block 두 가지의 차이점이 무엇인가요?? html, css구조 같이 올릴게요! -webkit-box 적용이 안되는 이유 알려주세요 html구조 <section> <div> <div> <div> <div> <p></p> <span></span> </div> </div> </div> </div> </section> css구조(scss) @mixin shortening($line, $lineHeight){ overflow: hidden; text-overflow: ellipsis; @if($line == 1){ white-space: nowrap; }@else{ line-height: $lineHeight; max-height :$lineHeight * $line; -webkit-line-clamp: $line; -webkit-box-orient: vertical; display: -webkit-box; } } section { margin-bottom: 160px; div { div { display: flex; justify-content: space-between; div { width: 200px; div { p { margin: 20px 0 10px; font-size: 18px; color: $titleColor; @include shortening(2, 18px); } div { display: flex; justify-content: space-between; align-items: center; p { font-size: $subTextFont; color: #ff4e43; } span { //아이콘 font-size: 20px; color: #efd942; cursor: pointer; } } } } } } }

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" 답변 부탁드릴게요. 감사합니다^^!

Next.js 에서 fluent-ffmpeg 사용 시 에러 해결 가능할까요?

Next.js 에서 puppeteer를 사용해서 특정 url에 접속하여 애니메이션을 png로 100장 정도 캡처하여 생성하고, fluent-ffmpeg를 사용해서 해당 png 이미지들을 mp4 영상으로 만들려고 하는데요. yarn add puppeteer fluent-ffmpeg @ffmpeg-installer/ffmpeg yarn add --dev @types/fluent-ffmpeg 위와 같이 라이브러리들을 설치했구요. 아래 page.tsx 파일에서 코드를 구현했는데요. dev로 실행해서 해당 페이지에 접속을 하면 아래와 같은 에러가 발생하는데요. 해결이 가능할까요?? 다른 라이브러리를 써야할지 구현한 코드가 문제가 있는지 모르겠네요. 도움 부탁드립니다!! # 에러 코드 # 1 of 1 error Next.js (14.2.3) Server Error Error: Cannot find module '/Users/.../animation-capture/node_modules/@ffmpeg-installer/darwin-arm64/package.json' This error happened while generating the page. Any console logs will be displayed in the terminal window. Call Stack webpackEmptyContext file:///Users/.../animation-capture/.next/server/app/capture/page.js (22:10) eval node_modules/@ffmpeg-installer/ffmpeg/index.js (40:27) (rsc)/./node_modules/@ffmpeg-installer/ffmpeg/index.js file:///Users/.../animation-capture/.next/server/vendor-chunks/@ffmpeg-installer.js (20:1) Next.js eval /./src/app/capture/page.tsx (rsc)/./src/app/capture/page.tsx file:///Users/.../animation-capture/.next/server/app/capture/page.js (286:1) Next.js # 코드 구현부 # import { NextApiRequest, NextApiResponse } from 'next'; import puppeteer from 'puppeteer'; import fs from 'fs'; import path from 'path'; import ffmpeg from 'fluent-ffmpeg'; import ffmpegInstaller from '@ffmpeg-installer/ffmpeg'; ffmpeg.setFfmpegPath(ffmpegInstaller.path); .... 중략.... const outputFilePath = path.resolve("./screenshots/video.mp4"); ffmpeg() .addInput(`${folderPath}/screenshot-%d.png`) .inputFPS(10) .output(outputFilePath) .on("end", () => { res.status(200).send(`Video created successfully at ${outputFilePath}`); }) .on("error", (err) => { console.error("Error generating video:", err); res.status(500).send("Failed to generate video"); }) .run(); } catch (error) { console.error("Error capturing screenshots:", error); res.status(500).send("Failed to capture screenshots"); }

web was 분리 실습관련 질문입니다..

안녕하세요. 20살 대학생입니다. web 서버와 was 서버 분리 관련하여 질문드립니다. web과 was의 개념은 조사하였는데, 이를 실 적용하려니 궁금한 사항이 있습니다. web was 개념파악을 위해 아파치와 톰켓을 사용하여 2개의 서버에 나누어 구축하고 있는데 블로그 등을 조사하니 제가 알던 web은 정적처리, was는 동적인 처리 개념이 아닌 was에서 처리를 전부 하면서 web은 그저 리버스 프록시, 정적 파일(html,css,image 등) 적재 등으로만 사용하는 것 같습니다. (즉, web server는 그저 네트워크 장비같은 역할??) 여기서 궁금한 사항입니다. 1. 정적처리, 동적 처리라는 부분을 구현하고 싶다면 페이지 별로 나누어 구성해야 할까요? (원래는 모든 페이지는 web server에 존재하며 was에서는 동적 처리만 구현하도록 하고싶었으나, 단순하게 구현하자면 정적페이지(html)는 web에서 아파치로 바로, 동적 페이지(jsp)는 was에서 구동하는 식으로 진행할까 생각중 입니다. 이렇게 해도 무방한지 궁금합니다.) 2. 프로젝트마다 구성의 차이는 당연히 있겠지만, 요즘 추세로서는 web,was 분리를 어떤식으로 하는지 궁금합니다. (정적,동적 처리 분류 하거나 모두 was에서 담당하고 web은 프록시, 캐싱 역할만 하는지..) 3. 프레임워크(spring, django, flask 등) 을 was 처럼 사용한 경우가 있을까요? (조사해보니 여러 경우가 나오지만 실제로 많이 사용하는지 궁금합니다.) 긴 글 읽어주셔서 너무 감사합니다.

채팅 기능 client 가 null 값이 돼요

하나의 페이지에서 connectHandler를 작동하고 또다른 페이지에서 sendHandler를 작동하려고 하는데 이렇게 해서는 useChat()이 리렌더링 되면서 client 값이 초기화가 되더라구요 값을 유지하고 싶고 recoil에 client를 담는 건 불가능이라고 떠서... connectHandler와 sendHandler를 다른 hooks로 분리하는 방법도 생각해봤는데 그러면 또 client값이 connect한 값이 아니더라구요 무슨 방법이 있을까요? 제발 도와주세요 ㅠㅠ (한 페이지에서 connectHandler, sendHandler, disconnectHandler 실행하면 잘 작동합니다!) import { CompatClient, Stomp } from "@stomp/stompjs"; import { useRef } from "react"; import { useRecoilState } from "recoil"; import { inputMessageState, messageState } from "../../states/chatting"; export function useChat() { const [messages, setMessages] = useRecoilState(messageState); const [inputMessage, setInputMessage] = useRecoilState(inputMessageState); const token = localStorage.getItem("accessToken"); // 채팅 연결 구독 const client = useRef<CompatClient>(); const connectHandler = () => { client.current = Stomp.over(() => { const sock = new WebSocket("wss://m-ssaem.com:8080/stomp/chat"); return sock; }); client.current.connect( { token: token, }, () => { client.current && client.current.subscribe(`/sub/chat/room/1`, onMessageReceived, { token: token!, }); }, ); }; const onMessageReceived = (message: any) => { setMessages((prevMessage) => [...prevMessage, JSON.parse(message.body)]); }; // 채팅 나가기 const disconnectHandler = () => { if (client.current) { client.current.disconnect(() => { window.location.reload(); }); } }; // 채팅 보내기 const sendHandler = () => { if (client.current && inputMessage.trim() !== "") { client.current.send( `/pub/chat/message`, { token: token, }, JSON.stringify({ roomId: 1, message: inputMessage, type: "TALK", }), ); setInputMessage(""); } }; return { connectHandler, disconnectHandler, sendHandler, }; }

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해주는데 백그라운드에서 앱을 완전히 종료시키고 다시 실행하면 쿠키가 사라지더라고요... 왜 그런건가요...??

WebView로 개발한 앱 개발 경력은 도움이 안될까요?

질문 자체가 우문이라고 생각은 합니다만, 경험이 적다보니 조언을 구하고자 질문합니다. (조언 주시면 달게 받겠습니다ㅠㅠ) Q. iOS 앱 개발로 전문성을 쌓고 싶은데, WKWebView 경력은 채용입장에서 기피하게 되나요? 채용 요건은 대부분 (SwiftUI + TCA / Rxswift) + Tuist + TDD 로 요약될 것 같습니다. 그런데 WKWebview로 프로젝트를 구성하게되면, Tuist 그리고 Rx관련 라이브러리 적용이 일부분 가능하지만, 대부분은 없더라구요. 제가 고민인 것이 WKWebview를 많은 회사에서 사용하지만, 막상 요건에서는 주로 네이티브에 대한 개발 능력을 보다보니, 제가 가진 프로젝트 경력에 부족하지 않은가 라는 생각을 많이 합니다. 채용 입장에서는 이런 부분을 약점으로 보는지 궁금했습니다! Q. (커리어 패스 질문) Flutter 경력이 최근에 많이 있긴한데, WKWebview 경력으로 Native로 나아가기보다는 Flutter 개발로 나아가는게 나을까요? 저는 현재 다음과 같은 개발 경험을 가지고 있습니다. 현재 앱 프로젝트를 8건 - iOS Native 개발 2건 - iOS WKWebview를 통한 하이브리드 앱 2건 - Flutter 앱 개발 4건 다만, 네이티브 개발한지가 2~3년전 경력이다보니, 괜히 움추려드네요ㅠㅠ 최근에는 대부분 Flutter 개발과 WebView 이용한 하이브리드 앱 개발이 전부입니다. 저는 iOS도 너무 재미있고 Flutter도 너무 재미있습니다. 이런 상황이라 어떠한 식으로 커리어패스를 생각해야할지 고민입니다. 먼저 경험이 있으신 분들의 입장에서 어떠한 모습으로 보여질지 궁금하여 질문드렸습니다 긴 글 읽어주셔서 감사합니다. 어떤 조언이든 해주시면 저에게 큰 도움이 될 것 같습니다. 감사합니다 ^-^

환경변수 주입 및 빌드(모노레포)

모노레포 프로젝트 환경 및 요구사항 - 프로젝트는 front(React), back(Node), common 패키지로 구성되어 있으며, 모노레포로 되어있음 - Dockerfile 스크립트에서는 build → run 순서로 실행되도록 구현되어 있음 - 서버 배포 시에는 하나의 포트만 사용해야 하므로 back(Node)에서 front의 정적 파일(index.html)을 실행해야 함 - Docker 빌드 시, front(webpack 빌드)와 back 둘 다 build 스크립트를 실행하고, 이미지 실행 시에는 back만 run 스크립트를 실행하여 back에서 front의 정적 파일을 실행해야 함 - 환경변수는 이미지 실행 시 docker-compose.yml의 env_file 속성을 사용해 외부에서 주입해야 함(환경변수가 바뀌는 상황이 있다면 .env 파일을 수정한 후 다시 빌드해야 합니다.) 예외 상황 Docker 빌드할 때 .env 파일을 포함하지 않고 run 스크립트를 실행(이미지 실행) 시 주입하는데, front 패키지에는 run 스크립트가 존재하지 않습니다. (back에서 front의 정적 파일을 실행) 즉, 환경변수가 주입되지 않고 있음 해결 방법 첫번째는 back에서 front의 dist 파일 호출 시 환경변수 객체를 만들어 value 값을 key 값으로 치환해서 함께 넘기고, index.html의 head에서 window 객체를 활용해 값을 받는 방법 하지만 이 방법은 개발자 도구에서 환경변수 값이 노출되고, window 객체를 활용하기 때문에 새로운 브라우저를 생성할 때마다 사이드 이펙트가 발생할 수 있음 두번째는 모노레포 root 패키지에서 prerun 스크립트로 front의 build 스크립트를 실행하는 방법 스크립트 -> "prerun": "lerna run build --parallel --scope @projectname/front --stream", 이 방법은 빌드를 두 번 실행하므로 자원을 많이 소모하지만, 예외 상황이 없는 것으로 보임 질문 받은 내용 Q. 환경변수를 바꾸는 상황이 존재할까요? A. 회사의 인프라 환경에 따라 다르지만, 포트나 IP가 변경될 수 있는 상황이 있음 예를 들어, 외부 서버에 요청을 보낼 경우 그 서버의 정보가 바뀌면 설정을 변경해야 하며, 다른 서버에 요청할 때 인증 정보를 입력해야 하는데, 토큰이나 사용자 패스워드 값이 변경될 경우에도 수정이 필요함 고민되는 부분 다른 해결 방법이나 비슷한 상황이 있다면 함께 논의하고 싶습니다. ㅎㅎ *프로젝트 구조 root ├── packages │ ├── back │ │ ├── package.json │ │ ├── index.ts │ │ ├── .babelrc │ │ └── ... │ ├── common │ ├── front │ │ ├── public │ │ │ └── index.html │ │ ├── package.json │ │ ├── src │ │ │ └── index.js │ │ ├── src │ │ ├── webpack.config.js │ │ └── ... ├── package.json ├── lerna.json ├── docker-compose.yml ├── Dockerfile * 프로젝트의 중요 정보는 제외했습니다.

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 문이 부적합합니다 선배님들 조언부탁드립니다..

React Spring 배포과정 중 의문의 404

react + spring boot로 진행하는 프로젝트가 현재 cloudtype이라는 플랫폼으로 배포중에 있습니다. 문제는 정확한 서버주소를 호출하는 것 같음에 불구하고 404 에러가 발생하여 해결하지 못하고 있습니다. 현재, 아래 사진과 같은 로그가 클라이언트, 서버에 각각 발생합니다. 서버에서는 다음과 같이 구성되어있고 @RestController @RequestMapping("/v1/login") @RequiredArgsConstructor @CrossOrigin(origins = "https://web-secondchance-front-bug-1cupyg2klvnmgdft.sel5.cloudtype.app") public class KakaoController { private final KakaoService kakaoService; private final Logger LOGGER = LoggerFactory.getLogger(KakaoController.class); @PostMapping("/kakao-login") public ResponseEntity<UserDto> kakaoLogin(@RequestBody KakaoLoginDto kakaoLoginDto) { String code = kakaoLoginDto.getCode(); LOGGER.info("Get Code from FrontEnd : {}", code); LOGGER.info("Request getAccessToken()"); kakaoLoginDto = kakaoService.getAccessToken(code); String accessToken = kakaoLoginDto.getAccess_token(); LOGGER.info("access_token : {}", accessToken); if(accessToken != null){ UserDto userDto = kakaoService.getUserInfo(accessToken); return ResponseEntity.ok(userDto); } else { return ResponseEntity.status(HttpStatus.BAD_REQUEST).body(null); } // accessToken이 null임에도 getUserInfo를 부름. // 안부르게 끔 위의 방법을 포함하여 // 1. map에서 true, false를 사용하여 해봄 // 2. getAccessToken을 map객체로 반환하게끔 하여 accessToken이 있으면 true, 없으면 false로 하여 isEmpty 함수로 체크하여 부름 // 위의 두 방법 전부 소용없음. 그냥 getUserInfo를 부름. } @PostMapping("/kakao-logout") public String kakaoLogout(){ return "ok"; } } 현재 리액트에서는 다음과 같이 axios.post로 접근하여 code를 전달합니다. 무엇이 문제일까요?

web + was 동작 방식 질문

안녕하세요. 골프장&리조트에서 근무중입니다. 웹 개발 전직을 위해 스프링을 공부중에 궁금한 것이 있어 여쭙니다! 태블릿으로 음식 주문하는 포폴을 진행하고 있는중에 어느정도 구현이 되어 테스트 환경, 운영 환경을 구분해보면 좋겠다 싶어 web, was 환경을 구축했습니다. web은 nginx, was는 tomcat으로 구축했는데 여기서 동작 방식이 궁금한게 생겼어요. web은 정적 리소스를 제공해준다고 들었는데 nginx에서 프록시로 was로 요청을 주거든요? 그러면 결론적으로는 client → web으로 요청을 주면 web → was로 요청을하고 was → web → client로 제공해주는 형태 아닌가요? 결론은 종단점인 was까지 요청이 들어가기 때문에 web은 그냥 거쳐가는 경로다 라고 생각이 들어 여쭤봅니다!

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." 제가 인지하기론, 디바이스를 특정짓는 정보는 서버에 전송하는 것을 불법으로 알고 있는데, 제가 암묵지로만 알고 있다보니, 정확한 근거를 찾고 싶어서 질문드립니다! 긴글 읽어주셔서 감사합니다!

마이크로 프론트 구현(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 로 바꿨습니다.

코딩 초보 인터넷 강의 질문드려요!

프론트엔드라는 직군에 도전을 해보고 싶어서 공부를 하려고하는데 비전공자라서 어디부터 어떻게 해야할지 잘 모르던중에 유데미에 강의를 두 개 발견했는데 어떤게 더 좋을지 몰라서 혹시 괜찮으시면 만약에 친구가 코딩 초보인데 시작을 하려고 한다! 고 했을때 어떤걸 더 추천해주실지 궁금합니다. The Web Developer 부트캠프 2024 - https://www.udemy.com/course/the-web-developer-bootcamp-2021-korea/?couponCode=LEADERSALE24A 100일 코딩 챌린지 - Web Development 부트캠프 - https://www.udemy.com/course/100-2022-web-development/?couponCode=LEADERSALE24A 두 강의중에서 엄청 고민하고 있는데 어떤걸 골라야 할지 잘 모르겠습니다. 혹시 시간 괜찮으시면 추천 부탁드립니다!

이력서에 첨삭할 진행했던 프로젝트들 내용을 보다 더 잘 적고 싶어요.

이력서에 첨삭할 지금까지 진행했던 프로젝트들 내용을 적고 있는데 한눈에 보기 쉽게 큰 범주로 적기에는 너무 포괄적으로 적는것 같고 개발한 기능들을 세부적으로 적거나 해당 프로젝트 진행 후 낸 성과들을 다 나열하면 내용이 너무 길어지는것 같아서 어느정도로 구체화해서 적어야될지 헷갈려서 조언을 구해 봅니다. 아래는 지금 작성된 내용입니다. 현재는 프로젝트별로 포괄적으로 적거나 좀 더 디테일하게 적거나 기준점을 못찾은 상황입니다. [ 2022. 12 ~ 2022. 01 • 프로젝트 명 : 집 클릭 • 주요 설명 : 전세임대 지원 사이트로 권리분석을 의뢰할 수 있는 사이트 • 담당 업무 : 자사 서비스 웹 크롤링 기능 개발 -puppeteer 사용 등기부등본 발급 자동화 웹 크롤링 작업 • 기술 스택 : Node.js 2023. 06 ~ 2023. 07 • 프로젝트 명 : 브릭 인프라 • 주요 설명 : 자사 서비스 종합 관리 사이트 • 담당 업무 : 자사 어드민 프론트엔드 개발 • 기술 스택 : React 2023. 08 ~ 2024. 06 • 프로젝트 명 : 키오 솔루션 • 주요 설명 : QR 주문 결제로 보다 편리한 결제 시스템을 이용할 수 있는  솔루션 • 담당 업무 : 자사 솔루션 "키오" 활용 서비스 개발 및 운영 유지 보수 - 메뉴형 결제 서비스 "키오브릭" 프론트엔드 유지 보수 - 금액입력형 결제 서비스 "스마트 노점" 프론트엔드 개발 및 - 해당 서비스 관련 어드민 풀스택 유지 보수 - 자사 어드민 풀스택 유지 보수 • 기술 스택 : React, GraphQL, Node.js, MySQL 2023. 09 ~ 2024. 06 • 프로젝트 명 : 오늘 우리 가게 • 주요 설명 : 자영업자 대상 매출, 리뷰, 주문 현황, 광고 현황 분석 앱 • 담당 업무 : 자사 서비스 오늘 우리 가게 기능 개발 및 운영 유지 보수 - React Native 앱 메인 화면 개발 - 전체 React Native 앱 기반 프로젝트 WebView 기반 프로젝트로 전환 작업 진행 - 리뉴얼 된 WebView 구성 화면 프론트엔드 개발 - 우리 가게 리뷰 듣기 TTS 하이브리드 기능 개발 - 네이버 클라우드 이용 카카오 알림톡 서비스 벡앤드 유지 보수 - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, MobX, React, Redux, TypeScript, Next.js, Node.js, MySQL 2023. 11 ~ 2024. 02 • 프로젝트 명 : 빌딩 CAS • 주요 설명 : 건물 내 입주사들을 위한 공지, 관리비 결제 및 장터 커뮤니티 기능을 제공하는 앱 • 담당 업무 : 외주 서비스 빌딩 CAS 프론트엔드 및 앱 개발 - WebView 기반 프로젝트 초기 환경 구축 및 아키텍처 설계 - React Native 앱 메인 화면 개발 - WebView 주요 기능 프론트엔드 개발(소셜로그인, 회원 정보 관리, 관리비 결제, 문의하기, 중고장터 게시판) - 앱 테스트 및 배포, CodePush 작업 진행 • 기술 스택 : React Native, React, MobX, Node.js, PostgreSQL *** 포트폴리오 링크를 통해 더 자세한 내용을 확인 하실 수 있습니다. ]

국비학원 취준생으로 해당 커리큘럼을 들어도 될까요?

안녕하세요. 현재 국비학원 백엔드 과정을 수료하고 취준을 하고 있습니다. 비록 이력서를 넣기 시작한지는 일주일밖에 되지않았지만, 연락이 안오기도 하고 학원동기들의 얘기를 들으면서 불안해지니 스펙이 부족한 것같고 실력이 부족하다는 생각이 들었습니다. 그래서 이런것을 질문해도 될지 모르겠지만, 아래 링크와 같이 이러한 커리큘럼이 정말 실무에 도움이 되는지 여쭙고 싶습니다.. 실무가 어떻게 돌아가는지 정확히 모르기 때문에 해당 커리큘럼을 진행하는 것보다 개인 프젝이나 팀 프젝을 진행하는게 나을지 고민이 되어서요..! 정말 하루하루를 헛되이 보내기가 아까운 취준생으로서 여쭙고 싶어서 가져오게 되었습니다. 조언 부탁드리겠습니다.. 만약 해당 커리큘럼이 아닌 다른 조언이나 쓴 소리도 달게 받겠습니다. https://www.wanted.co.kr/events/pre_challenge_be_13?utm_source=facebook&utm_medium=da&utm_campaign=kr_career_web_da_application_edu_be&utm_content=pre_challenge_be_13-02&fbclid=PAAaaToYonDy_q-MfKmBheDExOIfqOEv0_jMSV7iaM_ludOG1EhzucsVaURq8_aem_AQhmPAvO5oqwf2nCO3d9k-Mcj-9s5gOItaS0LsJQZNUzDgocdFb5vseT_6_O6eP4NScLGdTcFzaoT7B4bH8cbRKE

자바스크립트의 이벤트 처리 질문

리액트로 이미지 inpainting 컴포넌트를 만들고 있습니다. 사용자가 이미지 업로드를 하면 canvas 영역에 그 이미지가 채워지고 그 이미지에 mask 영역을 칠할 수 있는 이미지 에디터 컴포넌트인데요, 궁금한게 생겨 질문드립니다. 첨부한 코드는 컴포넌트의 코드중 이미지 업로드 시 onChange 이벤트의 처리기인 handleImageUpload 함수와, handleImageUpload 함수에서 호출되는 loadImage 함수의 코드입니다. 사용자가 input 요소에 이미지를 업로드하면 onChange 이벤트가 발생해 handleImageUpload 함수가 실행되고 loadImage 함수가 실행됩니다. loadImage 함수가 실행되면 img 객체가 생성되고 img 객체의 src를 지정하죠. 그러면 브라우저는 이미지 로딩을 시작하고 이미지 로딩이 완료되면 onload 콜백함수가 실행됩니다. 저는 이 과정을 자바스크립트의 콜스택, 이벤트 루프, 태스크큐 구조에서 나타내보자면 다음과 같다고 생각했습니다. 1. 초기상태 콜스택 : [ ] 태스크큐 : [ ] 2. 사용자가 파일을 업로드 -> onChange 이벤트 발생 콜스택 : [handleImageUpload] 태스크큐 : [ ] 3. handleImageUpload 내부에서 loadImage 함수 호출 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] 4. loadImage 내부에서 img 객체 생성 및 src 할당 콜스택 : [handleImageUpload, loadImage] 태스크큐 : [ ] Web API : 이미지 로딩 시작 5. loadImage 함수 종료, handleImageUpload 함수 종료 콜스택 : [ ] 태스크큐 : [ ] Web API : 이미지 로딩 진행중 6. 이미지 로딩이 완료되면 Web API가 onload 콜백을 태스크큐에 추가 콜스택 : [ ] 태스크큐 : [onload] Web API : 이미지 로딩 완료 7. 이벤트 루프가 콜스택이 비어있음을 확인하고 태스크큐에서 onload 콜백을 콜스택으로 이동 콜스택 : [onload] 태스크큐 : [ ] 8. onload 콜백 실행 (캔버스에 이미지 그리기 등) 콜 스택 : [onload, drawImage, ...] 태스크큐 : [ ] 일단 이 과정이 맞나요? 만약 이게 맞다면 생기는 궁금증이 있습니다. Web API에서 이미지 로딩이 진행되는동안 loadImage 함수 및 handleImageUpload 함수가 종료되면 loadImage 함수 내에서 생성된 img 객체는 가비지 컬렉터에 의해 지워져야 하지 않나? 그렇게 img 객체가 GC에 의해 사라지면 이미지 로딩이 완료되었을 시점엔 img 객체의 onload 함수도 없어진것이니 onload 함수의 로직은 실행이 되지 않아야 하는 거 아닌가? 하는 생각이 들어 질문드립니다

이직 준비를 위해 포트폴리오로 작성할 토이 프로젝트를 개발했습니다

5년차 스프링 백엔드 개발자입니다 재직하고 있는 팀 성향과 맞지 않아 이직을 위해 토이 프로젝트를 준비했습니다 사용된 기술 스택은 spring, kotlin, spring data mongoDB 및 querydsl로 개발하였고, 프론트 부분은 vue.js로, 배포는 docker, github actions와 elastic beanstalk로 ci/cd를 구축했습니다 프로젝트의 내용은 riot games의 TFT 게임을 플레이할 때 전략을 지원하는 웹 애플리케이션 개발입니다 원래는 현재 개발된 것보다 좀 더 고도화된 형태로 포트폴리오에 추가하려 했는데, 지인분과 상담했을 때는 그만하면 됐다 하셔서 여기서 멈추고 public url과 github 주소, 그리고 포트폴리오 제출까지만 진행하려 합니다 그런데... 포트폴리오에 어떤 것을 작성해야 좋을지 잘 모르겠습니다 개발한 애플리케이션의 화면 동작 등을 간단하게 소개하면 될까요? 자신이 신경써서 코딩한 코드 일부를 보여주면 될까요? 전체적인 흐름도나 다이어그램 등을 보이면 될까요? 무엇보다 과연 경력자가 회사에서 진행한 자신의 업무로 어필을 하는 것이 아니라, 이런 토이 프로젝트로 어필을 하는 것이 얼마나 효과가 있을지도 의문입니다 하지만 재직중인 현 회사는 주로 spring, java, jpa, mysql 외에 그다지 기술을 깊이있게 쓸 줄 아는 회사가 아닙니다 최대한 이력서에 작성하겠지만, 이곳에서 개발한 경력이 그다지 어필이 되진 않을 것 같아요... 최근 같은 회사 다니다 먼저 이직하신 분이 자신이 있는 곳으로 이력서 제출해보라 권장하십니다 무난하게 합격하실 거라 하셨는데, 그분과 일하는 것이 싫지는 않지만 기왕 이직하는 거 저는 좀 더 욕심을 내고 싶어서, 제가 가진 역량을 최대한 어필할 수 있었으면 합니다 5년차의 실력이라기엔 부끄럽지만, 이력서에 담긴 것만이 제 전부는 아니라서 너무 아쉽습니다 포트폴리오의 작성법, 그리고 이런 포트폴리오가 얼마나, 또 어떻게 어필이 될 수 있을지 이 TFT 게임을 모르는 사람에게는 어떻게 어필할지(TFT 게임이 무엇인지부터 설명해야 하나...) 아직 빌드업중인 프로젝트라 군데군데 부족한 부분이 많은데, 좀 더 완성도를 높여야 할지 조언 부탁드립니다 아래는 지금까지 개발 진행한 github과 배포된 웹 애플리케이션, 작성중인 포트폴리오 url 공유드리겠습니다 [github] https://github.com/jae2274 [애플리케이션 url] http://tftgamingweb-env-3.eba-bghxnbum.ap-northeast-2.elasticbeanstalk.com/view/guide [포트폴리오] https://docs.google.com/presentation/d/13Yri8YqQjAZfKIe-_dH61ezjqc2AIgwmfo4CLReC_WI/edit?usp=sharing

WebVR 구현 목적으로 하는 프론트엔드 개발자입니다. 공부순서는 추천해주실게 있으실까요?

안녕하세요. 2년 6개월 강제(?) 풀스택에서 최근 프론트엔드로 진로를 정한 웹 개발자입니다. 목적은 웹퍼블리싱도 되는 프론트엔드 개발자 입니다. 구현하고자 하는 토이프로젝트는 Interactive Web 구현, 최종 목적은 WebVR 구현입니다. CSS -> Response Web -> Interactive Web -> WebVR(three.js) 로 공부를 할까 합니다. 현재는 강의 보며 토이프로젝트(Response Web)을 만들어 보고, 출근하면 배운거 써먹어보고 있습니다. 현재 제 레벨은 CSS 스킬이 Figma 를 봤을때 머리속에서 마크업 잘 안그려지고, CSS 개발에서 자주 멈칫, 구글링합니다. 구현된거 수정만 해보았어서, 코드스타일이 없었고 구현순서나 임시 스타일가이드를 정해서 작성해보고 있습니다. JavaScript 스킬은 custom Api 만들고 api 통신해서 여러 data 가져와서 좀 다양한 chart, table에 결과물 산출(간단한 산술식을 곁들어서) 정도, 로그인, 세션, validate, router, 필요함수 기능구현이나 리팩토링, 모듈화 정도만 해봤습니다. 질의문은 위 상황에서 추천해주시거나 수정해주고 싶으신 부분이 있으시다면 혹은 요런게 있다 더라 만이라도 알려주시면 참 감사드리겠습니다.

JMeter Websocket테스트 질문드립니다

JMeter로 Websocket 테스트를 구현해야 하는 상황인데 테스트 진행하는 도중 아래 에러가 나서 찾아보니 Single Write Sampler에 Data 인코딩 문제로 추측만 되고 있습니다... Failed to parse TextMessage payload=[SEND desti..], byteCount=242, last=true] in session ujvhyrid. Sending STOMP ERROR to client. org.springframework.messaging.simp.stomp.StompConversionException: Frame must be terminated with a null octet JMeter Sampler 인코딩 UTF-8로 설정하는건 찾아서 해봤는데 그래도 안되네요...ㅠㅠ 정말로 인코딩 문제인지 혹시 동일한 경험이 있으신 분이 계실까요? 구글링을 해도 자료를 못찾겠고.. 사내에 해당 지식을 가지신 분도 전무하셔서 너무 답답해서 질문남겨봅니다....

1시간 안에 네이티브로 웹사이트를 iOS 및 Android용 네이티브 모바일 앱으로 변환하세요.

비즈니스용 모바일 앱을 만드는 데 얼마나 비용이 들까요? 제 경험상, 안드로이드와 iOS 앱을 개발하려면 최소 1만 달러부터 시작합니다. 하지만 한 달에 단 35달러로 모바일 앱을 만들 수 있는 매우 효과적인 방법이 있습니다. 혼자서도 할 수 있고, 팀을 고용할 수도 있는데, 이 방법은 몇 개월이 아닌 며칠 만에, 수천 달러가 아닌 수십 달러로 가능합니다. 제가 말하는 것은 Natively입니다. 이 서비스는 어떤 웹사이트나 웹 애플리케이션도 손쉽게 네이티브 앱으로 변환해 줍니다. 귀하의 웹사이트/웹 앱이 JavaScript 프레임워크로 구축되었든, Bubble, Webflow, Wix, WordPress, Shopify와 같은 노코드 플랫폼을 활용하든, Natively는 모바일 앱으로의 전환을 매끄럽고 간단하게 만들어 줍니다. Natively의 사용은 매우 간편합니다. 사용자 친화적이고 자동화된 프로세스로 인해 기술적 전문 지식 없이도 누구나 몇 분 안에 앱을 만들 수 있습니다. Natively는 푸시 알림, 헬스 키트, 위치 추적, 카메라, 갤러리, 인앱 결제 등 다양한 네이티브 모바일 기능을 설정할 수 있게 해줍니다. 그리고 새로운 기능이 지속적으로 추가되고 있습니다. 1년 전 처음 출시된 이후로 Natively 덕분에 800개 이상의 애플리케이션이 App Store와 Google PlayMarket에서 성공적으로 자리 잡았습니다. Natively의 웹사이트, 리뷰 및 사례는 여기에서 확인하세요: https://www.buildnatively.com/ 오늘날의 디지털 시대에서 네이티브 애플리케이션을 보유하는 것은 사용자를 끌어들이고 유지하는 데 필수적이며, 비즈니스 성장에 큰 도움이 됩니다. 그래서 저는 Natively가 특히 무료로 시작할 수 있다는 점에서 꼭 시도해볼 가치가 있다고 믿습니다. 🌍

백엔드 테스트 와 머신러닝 테스트가 따로 하면 잘되는데 같이 하면 오류가 발생합니다.

저희 프로젝트의 기본적인 골자는 osmd라고 하는 mxl포맷 파일을 악보 형태로 렌더링해주는 라이브러리를 사용하구요, 스트림되는 오디오를 듣고 그걸 머신러닝 파이썬 코드가 처리한 뒤 timestamp라는 값을 반환하면 그에 맞춰 악보의 현재 위치를 가리키는 cursor를 움직이는 프로젝트입니다. 또한 오디오 스트림을 넘겨받기 위해서 aws에다가 쿠렌토 미디어 서버를 만들었구요, 머신러닝 코드는 로컬에서 돌아가고 있습니다. 각기 따로 스트림을 처리했을때(stdin stdout) 잘 되는 것을 확인했습니다(https://github.com/Kurento/kurento-java 쿠렌토 서버의 구현은 이 레포를 참고해서 만들었습니다) 또한 import sys def main(): while True: line = sys.stdin.readline() if not line: break output = line.strip() + '2' print(output) if __name__ == "__main__": main() 이 예제를 활용해서 테스트해봤을 때 문제없이 작동했습니다(쿠렌토) 머신러닝 코드는 wav 파일을 버퍼 잘라서 stdin에 집어넣고 테스트해보았습니다 작동은 둘 다 문제없이 작동했지만 같이 이어서 하게되면 Failed to write data: The pipe is being closed라는 오류 로그가 찍힙니다. (요약) 1. 백엔드에서 Kurento Media Server(webrtc) 인풋 들어온거에 아무거나 붙여서 반환하는거로 테스트 해봤을 때 문제 없이 스트림 처리가 되는 것으로 확인 됨 2. 머신러닝 쪽에서 오디오 스트림 모드를 만들고 stdin으로 들어온 스트림에 대한 결과값을 stdout으로 반환하는 것이 확인 됨 3. 그렇지만 둘을 이제 갖다붙이면 위 에러 로그 발생 이유 아시는 분들은 알려주시면 감사드립니다. 두서없이 장문을 써서 이해가 안되는 부분들 말씀해주시면 설명드리겠습니다. 감사합니다.

monorepo 에서 공통으로 사용하는 컴포넌트들 배포 관리 방법?

현재 FE 일부 서비스를 monorepo 안에서 관리하고 있습니다. 이 안에서 총 4개의 서비스를 운영중이고 서로 공통으로 사용하는 컴포넌트나 helper, util 등은 shared 라는 워크스페이스로 분리하였습니다. - apps ㄴ web1 ㄴ web2 ㄴ web3 ㄴ web4 - pacjages ㄴ shared 배포할때 변경점인 change path에 대한 고민이 있었는데, 현재는 shared가 변경되면 web1,2,3,4 전체가 배포되도록 구성했습니다. 서비스별로 수정된 shared에 의존적인 프로젝트를 특정하기 어려웠기 때문인데요. 혹시 더 나은 방법으로 운영하는 방법이 있을까요?

IT 계열 회사 인턴십과 취업준비에 대한 조언을 구하고 싶습니다

안녕하십니까, 미국의 UCLA 대학에서 1학년으로 재학중인 학생입니다. 유학생으로서 IT 계열 인턴십 및 취업 준비에 대한 조언을 부탁드리고자 질문 드립니다. 한국에 위치한 국제학교를 졸업하여 이제 막 미국 대학 1학년 과정을 시작하였습니다. 제 꿈은 IT 계열 회사에서 일을 하는 것인데, 구체적인 직무와 취업준비에 있어 아직 방향을 잡지 못하였습니다(온라인 강의, 포트폴리오, 부트캠프, 프로젝트 등). 인터넷에서 실제 인턴십에 합격한 사람들의 후기 찾아보아도 명확한 출발점이 보이지 않는 경우가 많으며, 부트캠프나 인턴십의 경우에도 학기 중에는 수강이 불가능한(부트캠프에 투자해야할 시간 + 시차 문제) 경우를 자주 봤습니다. 내년 6월 경에 1학년 과정을 마치고 7월에 군 복무를 하여 2027년도 1월 쯤에 전역할 예정입니다. 전역 후 8월 정도까지 시간이 남을 것 같은데 이 기간 동안 어떻게 시간을 보내야 준비가 잘 될지 의문입니다. 저의 프로그래밍 경험이라고는 중/고등학교 당시 정보 올림피아드 준비를 위한 C언어, 고등학교의 Computer Science 수업 때 들은 Java, web 개발을 위한 HTML/CSS, javascript, 그리고 약간의 Python이 전부입니다. 추가로, 고등학교 당시 친구들과 교육회사를 창업하여 현재 웹사이트 개발 툴(Wix)을 활용한 웹사이트 디자인, 과외 강사등으로 활동하고 있는데 이런 경험도 지원시 도움이 되는지 여쭤보고 싶습니다. (아래는 제 Git Hub 링크입니다) Git Hub(고등학생 당시): https://github.com/qwertyuiop12as/David-Study-Record/tree/main Git Hub(대학생 및 이후 자료): https://github.com/dcho-jaewook 온라인 강의나 프로젝트, 포트폴리오/GitHub 운영법 등에 대한 조언을 해주신다면 큰 도움이 되겠습니다. 시간들여 고민 읽어주셔서 감사합니다. (추가로 현재 컴퓨터 수학과를(Mathematics of Computation) 전공하고 있는데 학사 학위 이후에 석사 학위가 있으면 취업 때 어느정도 이점이 있는지도 궁금합니다)

백엔드 애플리케이션 프레임워크를 개발 중인 학생입니다. 조언을 구하고자 합니다.

[ 서론 ] Low-level 이해도 향상, 객체 지향적 사고 증진, 공부량 증가를 위해 Spring 느낌의 프레임워크를 개발하려 합니다. [ 본론 1 ] 프레임워크 사용자의 편의성 확대를 위해, MVC의 Controller에 해당하는 영역을 어떻게 설계해야할지 고민 중에 있습니다. 아래 코드 블럭에 나열한 코드 중 개발하며 재미를 느끼실 것 같은 항목을 투표 영역에서 투표해주시거나, 답변을 통해 더 나은 방안을 추천해주시면 감사하겠습니다. [ 본론 2 ] (개인적으로 느끼기에) 매우 거대한 프레임워크를 혼자 개발하고 있는 만큼, 많은 문제와 고민에 봉착하고 있습니다. 이와 관련해 현직자 분들의 소중한 조언을 구하고자 합니다. 부디 시간 들여주시어 답변해주시면 감사하겠습니다. [ 결론 ] 프레임워크 개발이라는 저에겐 다소 어려운 길에 있어 조언을 구하고자 합니다. 부디 소중한 시간내어 답변 남겨주시면 정말로 감사드리겠습니다. ... 현재 소프트웨어 계열 고등학교에 재학 중이며, 백엔드 개발자가 되기 위해 공부하고있는 2학년 학생입니다. 최근 들어, 면접을 경험하신 선배 분들과 조금 대화를 나누다보니 제 지식 수준이 매우 낮다는 것을 깨닫게되었습니다. HTTP, TCP 등 (TCP/IP 4계층 모델 기준) 3,4 계층 프로토콜의 통신 과정, 데이터베이스와 Java 애플리케이션의 Low-Level(JDBC, R2DBC 혹은 더 낮은 수준) 통신 과정, 프레임워크를 사용하는 이유, 그 외 기타 등등. 조금은 깊은 지식에서부터, 원초적인 것들까지, 백엔드 개발자로서 알아야할 것들에 대해 제 수준이 턱없이 부족함을 느끼고 있습니다. 그럼에도 불구, 슬럼프와 비슷한 상태에 빠져있어 작년보다 공부량도 적어졌고, 의지와 기운도 많이 상실한 상태입니다. 아마도 구체적인 목표가 없기에 그런 게 아닌가 하여 공부도 겸하고, 저 자신을 자극할만한 거대한 목표를 한 가지 잡았습니다. Java 백엔드 애플리케이션 프레임워크를 만든다는, 저에겐 어쩌면 지나칠 수도 있는 어려운 도전에 임해보려 합니다. 프레임워크 하나를 기획할 시간을 없기에 Spring의 추상적인 틀을 기반으로 개발-수정 프로세스로 진행하고자 합니다. 프레임워크 주도의 IoC 컨테이너, 어노테이션 기반의 모듈(Spring과 Java에서의 Bean 개념) 관리, 클래스 단위의 설정 정보 관리가 프레임워크의 주요 포인트입니다. Spring의 Core 모듈에 해당하는 기반 프레임워크가 IoC 컨테이너를 포함해 부분적으로 구현되어있습니다. 그리고 현재 Spring Web, Spring MVC 등에 해당하는 WAS 프레임워크 구현을 시작한 상태입니다. MVC에서 Controller에 해당하는 부분을 디자인하는 과정에 있는데, 현직자분들의 생각하시는 최선의 Controller 디자인에 대해 의견을 수집하고자 합니다. 포함된 코드 블럭은 대중적인 프레임워크의 Controller/Router 디자인들입니다. 각 디자인별로 선호하시는 항목에 대해 부여된 번호를 투표를 통해 선택해주시면 감사하겠습니다. 또한 이 프로젝트에 대해 조언 혹은 비판, 의견을 답변 혹은 메일, 링크드인 통해 남겨주시면 대단히 감사드리겠습니다. 그 외 개인적인 문의 사항과 제안 또한 환영합니다. leetyxodud312@gmail.com 아래는 프레임워크 깃허브 주소입니다. 문서화 작업은 진행 중에 있어 다소 부끄러운 수준입니다. 양해 부탁드립니다. https://github.com/Project-Smoodi 끝까지 읽어주심에 다시 한 번 감사의 말씀 드립니다.

PostLike 테이블에서의 JPA 관계 설정 (Web, Spring, JPA)

Post 테이블 (Long pno, String cotent) UserInfo 테이블 (String uid, String nickname) PostLike 테이블 (Long pno, String uid) Post에 대한 좋아요 정보를 PostLike테이블에서 관리하고 있습니다. 여기서 PostLike 엔티티를 정의할 때 1) UserInfo userInfo, Post post를 @ManyToOne으로 관리할지, 2) 아니면 그낭 Long pno, String uid로 관리할지 고민입니다. 1번 방법) 장점 : Post, UserInfo를 delete 할때 알아서 관련된 좋아요 정보를 찾아서 삭제해준다는 면에서 무결성 관리가 편함. 단점 : JPA는 where pno=(삭제하는 게시글 id)처럼 쿼리 한 번으로 삭제하지 못 한다. 먼저 PostLike 테이블에 pno가 삭제 게시글 id와 같은 것들이 무엇이 있는지 확인하고, 해당 id에 해당하는 row를 deleteById로 하나하나 삭제하기 때문에 쿼리가 N+1 필요해서 성능 이슈가 생긴다. 2번 방법 ) 장점 : 성능 문제가 해결된다. 쿼리 한 번으로 게시글 혹은 유저를 삭제했을 때 관련 좋아요 정보를 삭제할 수 있다. 단점 : 무결성 관리를 직접 해줘야 해서 프로그래머가 신경써서 관리해야 한다. ◼️ 질문 1 1번 방법과 2번 방법 중에서 2번 방법을 선택하려고 합니다. Trade off를 제대로 한 게 맞을까요? Post와 Comment에서는 @ManyToOne을 사용하고, Follow나 PostLike에서는 @ManyToOne을 사용하지 않는 것이 제멋대로인 것 같아서 고민입니다. ◼️ 질문 2 유저를 삭제할 때 해당 유저가 좋아요를 누른 기록을 유지하는 것이 좋을까요, 삭제하는 것이 좋을까요? 요구사항에 따라 달라진다는 것은 알지만 그래도 일반적으로 사용되는 방법이 궁금합니다.

분야 전향(devops>fullstack) 및 풀스택 커리큘럼

안녕하세요 만23세 주니어입니다. 제가 하고싶은분야는 풀스택쪽인데 생계사유상 입사를 devops로 오게 되었습니다. 입사한지 2주, 파견근무로 atlassian 유지보수를 하는 업체입니다. 아직 판단하기엔 조금 이르지만 그래도 지냇던 2주만큼은 이회사가 회사 운영방식이나 분위기에있어서 좀 맘에 들었고 아무래도 그전에 다녓던 회사들이 물경력에 1년넘는기간이없엇어서 이번회사는 좀 오래 다니고 싶습니다. (vb 2개월, ubuntu(filecoin) idc 유지보수 10개월(주)+react 2개월(부), skt네트워크망 관제 사무직 6개월, 건설안전교육기관 5개월) 다만 우려돼는건 나중에 원래하고싶었던 풀스택으로 전향할때 연봉이나 경력을 초기화해서 다시 신입으로 들어가야 하는건지 아니면 소폭감소나 유지되는지 모르겟어서 이부분좀 알려주시면 좋겟습니다. 또 activex쪽 개발햇던 4년차 지인분이 웹개발 관련해서 해당 커리큘럼을 추천해주셧는데 여기서 보완, 가감할점은 없는지 피드백부탁드립니다. 2021년 기준 1. 모든 개발자를 위한 HTTP 웹 기본 지식 / 김영한 2. 스프링 핵심 원리 - 기본편 / 김영한 3. 스프링 MVC 1편 -백엔드 웹 개발 핵심 기술 / 김영한 4. 자바ORM 표즌 JPA 프로그래밍 - 기본편 / 김영한 5. 초보를 위한 도커 안내서 / subicura 6. 실전! 스프링 부트와 JPA 활용1 - 웹 애플리캐이션 개발 / 김영한 7. 실전! 스프링 부트와 JPA 활용2 - API 개발과 성능 최적화 / 김영한 8. 실전! 스프링 데이터 JPA / 김영한 9. 실전! Querydsl / 김영한 10. DDD-START / 최범균 - ISBN 9788993827446 11. AWS 강의실 / 유튜브 12. Route53 / 생활코딩 13. 스프링 핵심 원리 - 고급 / 김영한 14. ELK 스택으로 데이터 분석 / 허민석 15. 아파치 카프카 for beginners / 데브원영 16. Spring Boot JWT tutorial / 정은구 17. The Red : 비즈니스 성공을 위한 Java/Spring 기반 서비스 개발과 MSA 구축 / 이희창 18. 새차원의 코틀린 / 새차원 19. Kotiln으로 개발하는 Spring Boot Web MVC / 예상국 20. 새차원의 코루틴 / 새차원 21. 코틀린 마이크로서비스 개발 / 후안 안토니오 메디나 이글레시아스 - ISBN 9791161752556 그리고.. react를 하긴햇는데 정작 이번에 취업할때보니 신입기준으로 react보단 vue가 더 많이보이더라고요. 그냥 vue를 하는게 나을까요? 어차피 js기반이니 둘다 상관없을까요?