#alt

Aws 로드밸런스를 통해 https로 변환시 오류가 발생합니다.

정말 몇일째 잡고있는데 도저히 실행이 되지 않아, 질문글을 올립니다. 도와주시면 정말 감사드리겠습니다 ㅠㅠ... 현재 상태에 대해서 말씀드리겠습니다. 1. AWS Route 53을 통해서 도메인 구매 2. 도메인과 ec2에서 인스턴스를 생성한 ipv4와 연결 레코드 생성해서 ip주소 3.39.xxx.xx와 도메인 do-prove.com을 연결하는것까지는 확인 3. Aws Certification Manager를 통해서 인증서 발급 완료 4. 대상그룹 생성과 로드밸런스설정 완료 여기까지 한 상태입니다. 스프링을 그대로 사용하여서 8080포트를 사용하였습니다. 대상그룹에서 상태가 정상으로 뜨고, 상태확인이 healthy로 뜹니다. 인스턴스가 정상적으로 실행으로 뜨고, 3.39.xxx.xx:8080으로 접속시 제대로 접속됩니다. 또한 8080포트를 열어두었습니다. 로드밸런서 상태는 정상이고, 리스너는 해당 사진처럼 설정하였습니다. route53 호스팅영역의 아래 레코드 사진을 첨부하였습니다. https://do-prove.com:8080/으로 접속을 하려면 접속이 안됩니다. http://3.39.226.33:8080/으로 인스턴스로 접속하면 이건 또 됩니다. route53호스팅 레코드에서 A dual-stack지우고 do-prove.com으로 하고 3.39.226.33으로 설정해서 http://do-prove.com:8080/으로 접속하는것이 되는건 확인했습니다. 도대체 어디서 잘못되서 연결이 안될까요.. 부탁드립니다 사람하나 살려주세요 ㅠㅠㅠ

Next.js 코드 가독성..

안녕하세요 프론트앤드 1년차에 다가가고 있는 신입 개발자입니다. 현재 Next14를 사용하고 있으며 코드의 가독성, 효율성을 많이 고려하면서 코드를 짜려고하는데 너무 고민이 되네요 저보다 앞서서 달려가고 있는 개발자 선배님의 생각을 듣고싶습니다 ㅠㅠ... 2가지가 궁금합니다. 먼저 첫번째 이미지처럼 Version에 관련된 파일을 저렇게 분리했을 때 저는 Version의 최상위 Layout.tsx에서 모든 것을 선언하기가.. 너무 오히려 가독성이 안좋다고 생각을 하고 있습니다 즉, 변수나 함수를 모두 최상위 Layout.tsx에서 선언 및 정의를 해두고 props로 내려주는게 이상하다고 생각을 합니다. 변수, 함수, useEffect 모두 직접 해당 변수나 함수를 컨트롤하는 부분에서 선언 및 가공을 하는게 맞다고 생각을 합니다. 최상위 Layout.tsx가 너무 무거우면 오히려 나는 VersionDataTable에 관련된 변수나 함수만 보려고 하였으나 최상위 Layout.tsx를 보고 아 이게 VersionDataTable에 필요하구나 뭐가 필요없구나, useEffect의 의존성 배열까지 고려하는것이 불필요하다고 생각을 하고 있습니다.. 근데 같이 프론트 앤드 개발하시는 분께서는 '단기적으로 절대 코드가 변하지 않는다고 생각하면 그 말씀이 맞는데 그건 아니잖아요? 우리는 계속 유지보수를 할거고 그러면 결과적으로 A에서만 사용하던 변수나 함수들을 A,B,C에서 같이 사용할 수 있게 변경하게 되면 그때 변경하면 유지보수 측면에서 너무 안좋습니다. 최상위에 모두 선언이나 정의를 해두고 props로 내려주는게 맞다 이런 형식으로 코드를 작성하면 몇개월 뒤에 코드를 수정할 때 A가서 수정했다가 C가서 수정했다가 D가서 수정하실 거에요? 바로 알아보실 수 있겠어요?' 라고 말씀을 하시더라구요.. 물론 몇개월 뒤에 코드를 보거나 하면 제가 작성한 코드인데도 저는 헷갈리는 경우가 많습니다. 그러나 최상위에 모두 선언 및 정의해둬도 마찬가지 아닌가..? 유지보수 측면에서 뭐가 안좋은거지..? 라고 생각되게 됩니다.. 선배님의 말씀을 따라가고는 싶은데 이해가 안돼서요 제가 아직 기본기가 많이 부족한 상황이라 이 상황에서 말씀드리면 이론부터 말하며 설득시키기가 부족하다고 생각하기 때문에 말씀드리면 오히려 '저는 이렇게 생각해요 틀렸는데요?' 라고 말하는 것 같아 말다툼이 될 것 같습니다. 2. 밑 사진을 보면 modalTemplate라는 폴더, ConfirmTemplate이라는 폴더가 존재하는데요 이것에 대해서 저는 사용하는 용도에 따라서 Create면 Create Create와 Update를 동시에 할 수 있는거면 BundleCreateAndUpdate 이런 형식으로 각각의 파일을 생성을 하고 문법상 공유되는 부분은 중복이 되어서 실제로 보여주는 부분을 영역으로 나눠서 BasicOptions, SelectList, VersionDetail, VersionOptions로 나누고 각각의 파일에서 사용하는 부분만 불러와서 쓰는 형식으로 코드를 작성했습니다. 그러나 이렇게 용도에 따라 구분하지 않고 최상위 Layout.tsx파일 하나만 만들고 ModalType이라는 props를 받아서 ModalType이 create, update, create&update, delete ... 등 JSX에서 삼항 연산자를 써서 처리를 할수도 있습니다. 저는 ModalType으로 처음에 구분하다보니 나는 'create' 속성일 때 어떤 형식으로 되는지 코드로 보고싶은데.. 그러면 너무 뜯어서 봐야하더라구요 그래서 용도에 맞게 파일을 만들고 거기서 form을 불러오기만해서 중복 코드를 줄이는 방식을 택했습니다.. (더 나은 코드라고 생각했습니다.) 그랬지만 선배님께서 'ModalType으로 나누는게 더 좋아요 저렇게 지으면 가독성이 너무 떨어지고 파일의 이름이 너무 길어지잖아요 이상하지 않나요?' 라고 말씀을 하시더라구요... 물론 가독성은 사람마다 다른거 알고있습니다. 그러나 ModalType으로 나누기 시작하면 한도 끝도없이 나누고 ModalType이 delete일 때만 사용하는 함수, create일 때만 사용하는 함수 등 필요없는 함수도 너무 많아져서 용도에 맞게 파일을 구분하고 거기서 중복 코드만 최대한 줄이자! 라고 생각하여 코드를 작성했는데 이 내용도 말씀드려 봤지만 '가독성' 이라는 이유 하나만으로 너무 안좋다고 합니다.. 진짜 안좋은건가요..? Next 도 그렇고 프론트 앤드 너무 어렵습니다..

Recoil Atom Effect 적용 기: 팀 내 설득 및 구현 조언

안녕하세요!! 현재 진행 중인 프로젝트에서 회원가입 시 필요한 정보를 입력하는 중 새로고침 시 session 및 localstorage를 이용하여 상태유지를 하려고하는데 recoil과 관련하여 atom effect를 사용하면 우아하게 처리할 수 있음을 알았습니다. 따라서, 각 atom에 effect를 하나하나 추가하는 방법을 생각했는데 동일한 logic을 행하는 코드의 양이 방대해지고 localstorage에 각 atom에 해당하는 key-value로 저장되므로 가독성 측면에서 좋지 않다고 판단하여 아래와 같은 과정을 생각했습니다. 각 atom을 하나로 묶어 객체로 관리하자. 객체로 관리하게 되면 불필요한 re-rendering이 촉발되므로 객체로 선언한 atom의 각 property에 접근 및 수정을 위한 selector를 정의하자. 객체에 내의 property에 1대1로 selector를 정의하면 객체로 묶기 전 atom의 갯수만큼 selector를 선언해주어야 하므로 selectorFamily를 사용하자. 이것저것 찾아보면서 1 → 2 → 3 단계로 생각을 정리했습니다. 아래는 현재 사용되는 atom입니다. <ATOM> // signup.store.ts 👇 회원가입에 대한 user state들 - SignUpProfileTypeAtom - SignUpProfileRentalTypeAtom - SignUpProfileRegionsAtom - SignUpProfileDepositPriceAtom - SignUpProfileTermAtom - SignUpProfileMonthlyPriceAtom - SignUpProfileSmokingAtom - SignUpProfilePetAtom - SignUpProfileAppealsAtom - SignUpProfileGenderAtom - SignUpProfileMatesNumberAtom - SignUpProfileMateAppealsAtom // 👇 위의 atom들을 한 번에 access 및 update - SignUpProfileSelector 하지만, 다른 팀원이 저렇게 atom을 구성한 상황 제 생각을 그대로 적용하고자하면 팀원의 코드를 마음대로 바꾸는 거 같아서 조심스럽습니다. 협업함에 있어 설득도 하나의 중요한 스킬임을 갈수록 깨닫게 됩니다.(다들 어떻게 설득하시나요?) 팀원이 기존의 코드는 안 바꿨으면 좋겠다 하면 각 atom에 effect를 추가하는 것이 맞겠죠???? 현재 현업에 계신 분들은 이러한 상황에서 어떻게 설득하며 어떻게 하는 것이 좋을까 자문을 구하고 싶어서 글 올려봅니다!!🥲🥲 짧지 않은 글이지만 읽어주셔서 감사하고 많은 의견 주시면 감사하겠습니다!!😄😄😄 ```typescript import { SignUpType } from '@/types/signUp.type'; // ? type 집 유형 0: 원룸/오피스텔, 1: 빌라/연립, 2: 아파트, 3: 단독주택 @number export const SignUpProfileTypeAtom = atom<SignUpType['type']>({ key: 'signUpProfileTypeAtom', default: undefined, }); // ? rental_type 집 대여 유형 0: 월세, 1: 전세, 2: 반 전세 @number export const SignUpProfileRentalTypeAtom = atom<SignUpType['rental_type']>({ key: 'signUpProfileRentalTypeAtom', default: undefined, }); // ? regions 유저가 찾는 지역 >도시 (region) + 구(district) 형태의 배열 @string[] export const SignUpProfileRegionsAtom = atom<SignUpType['regions']>({ key: 'signUpProfileRegionsAtom', default: [], }); // ? deposit_price 보증금 (전세 혹은 월세) 범위 [최소 금액, 최대 금액] (0만원~10000만원) @[number, number] export const SignUpProfileDepositPriceAtom = atom<SignUpType['deposit_price']>({ key: 'signUpProfileDepositPriceAtom', default: [0, 10000], }); // ? term 유저가 살 기간 [최소기간, 최대 기간] (0 ~ 24)범위 @[number, number] export const SignUpProfileTermAtom = atom<SignUpType['term']>({ key: 'signUpProfileTermAtom', default: [0, 24], }); // ? monthly_rental_price 월세 [최소 금액, 최대 금액] (0만원, 500만원) @[number, number] export const SignUpProfileMonthlyPriceAtom = atom<SignUpType['monthly_price']>({ key: 'signUpProfileMonthlyPriceAtom', default: [0, 500], }); // ? smoking 흡연 여부 @boolean export const SignUpProfileSmokingAtom = atom<SignUpType['smoking']>({ key: 'signUpProfileSmokingAtom', default: undefined, }); // ? pet 펫 여부 0: 상관없음, 1: 좋음, 2: 싫음 @number export const SignUpProfilePetAtom = atom<SignUpType['pet']>({ key: 'signUpProfilePetAtom', default: undefined, }); // ? appeals 유저의 어필할 매력(배열형태) @string[] export const SignUpProfileAppealsAtom = atom<SignUpType['appeals']>({ key: 'signUpProfileAppealsAtom', default: [], }); // ? gender 상대방의 성별 0: 상관없음, 1: 남성, 2: 여성 @number export const SignUpProfileGenderAtom = atom<SignUpType['gender']>({ key: 'signUpProfileGenderAtom', default: undefined, }); // ? mates_number 인원수 0: 상관없음, 1: 1명, 2: 2명, 3: 3명이상 @number export const SignUpProfileMatesNumberAtom = atom<SignUpType['mates_number']>({ key: 'signUpProfileMateNumberAtom', default: undefined, }); // ? mate_appeals 유저가 원하는 상대방의 매력 (배열형태) @string[] export const SignUpProfileMateAppealsAtom = atom<SignUpType['mate_appeals']>({ key: 'signUpProfileMateAppealsAtom', default: [], }); ```

앱(Flutter)에서 JSON데이터를 검색하려고 합니다

안녕하세요 Flutter를 이용하여 식단 및 체성분 관리 앱을 개발 중인 대학생입니다! json형식의 식품영양성분 공공데이터 안에서 사용자가 입력한 식품명 검색어를 기준으로 데이터를 불러오려고 합니다. DB는 Google Firebase를 사용 중이며, 위와 같은 목적으로 데이터를 사용 할 때에 적합하지 않다면 다른 DB를 사용 할 의향도 있습니다. 사용자의 검색어로 시작하는 특정 데이터만이 아니라, 검색어를 "포함"하는 데이터도 불러오고 싶습니다. 현재 어느 정도 그려 본 방법입니다. 영양성분 JSON 다운로드 ↓ Python을 이용하여 필요한 데이터만 가공 ↓ Firebase Realtime Database / Storage에 저장 ↓ 저장된 JSON을 API 호출을 통해 String으로 불러옴 / 앱 내부에 .json 파일로 저장 ↓ Map으로 변환 후 캐싱 ↓ 사용자가 검색어 입력 ↓ 검색어를 포함하는 데이터만 별도 리스트에 추가 여기서 데이터를 불러오는 과정에서 필터링을 거치지 않는 이유는 Firebase Realtime Database에서는 검색어를 "포함"하는 것이 아닌, 사전 순으로 검색어 기준 뒤에 있는 데이터만 가능하다고 합니다.. 그래서 결국 JSON파일로 직접 사용하기로 했습니다 혹시나 저의 부족함이 보이시는 분들의 조언과 피드백을 듣고 싶습니다! 더 나은 방법이 있다면 무차별 폭격 및 질문 부탁드립니다! 미리 감사드립니다 (_ _)

react에서 상태업데이트 로직 자체가 실행이 안되는 경우도 있나요?

React에서 Modal이 Modal을 호출하는 다중 Modal 구현중 난제를 만나게 되어 질문을 올립니다 소스의 경우 복붙보다는 github 주소를 남기는것이 좋을것 같아서 github링크로 대체하는점 양해부탁드립니다. https://github.com/graylobo/modalTest (간단해서 clone후 바로 실행가능합니다) 로직에 대해 설명을 하자면 아래와 같습니다. 편의상 음슴체로 하는점 양해부탁드립니다. 1. 전역에서 사용될 기본Modal 을 정의 (BaseModal) 2. BaseModal의 on/off의 경우 recoil로 관리 3. useModalStack 을 사용하여 custom modal (TestModal1,2)을 열수있음 4. custom modal은 다른 custom modal을 호출할수 있으며, modal 호출자는 피호출자의 상태를 공유할수 있음. 즉 SomeComponent가 TestModal1을 호출하고, TestModal1이 또다시 TestModal2를 호출했을때, TestModal2의 상태값을 TestModal1에서 받을수 있으며, TestModal1의 상태값을 SomeComponent에서 받을수 있음 위 기능까지는 문제없이 동작하며, SomeComponent의 경우 TestModal1에서 자신의 로컬상태(inputData)가 있고 확인버튼 클릭시 currentModal.handleConfirm?.(inputData) 가 호출되고 SomeComponent의 handleConfirm에 지정한 콜백로직이 실행되면서 setReceivedData를 통해 receivedData의 상태 업데이트가 TestModal1에서 전달한 inputData로 정상적으로 업데이트가 됨. 또한 SomeComponent가 TestModal1을 호출한 프로세스와 마찬가지로, TestModal1에서 TestModal2 를 호출하고 TestModal2에서 자신의 로컬상태(inputData)가 있고 확인버튼을 클릭하여 currentModal.handleConfirm?.(inputData)를 호출하면 TestModal1의 handleConfirm에 지정한 콜백로직이 실행되면서 TestModal2에서 전달한 inputData를 받는것 까지는 정상적으로 동작하는데 여기서 문제는 TestModal1의 setReceivedData를 통해 receivedData의 상태가 TestModal2에서 전달한 inputData로 업데이트가 되어야 하는데 디버깅시 setReceivedData 자체가 아예실행이 되지않음. react개발하면서 useState의 set함수에 전달하는 콜백함수 자체가 실행이 안되는거는 처음 겪어보고 레퍼런스도 없어서 혹시 저와 동일한 문제를 겪거나 해결방안을 알고 계시는 분이 있다면 조언주시면 매우 감사하겠습니다.

Springboot 환경의 암복호화 질문

민감정보인 비밀번호의 경우 스프링 시큐리티가 제공해주는 password encoder를 써서 단방향 암호화를 한 뒤 일치여부를 체크하면 되지만 이름, 전화번호같이 다시 복호화해서 보여줄 필요가 있는 데이터들은 보통 어떤 라이브러리를 이용해서 처리들 하시는지 궁금합니다. @Bean public StandardPBEStringEncryptor jasyptStringEncryptor() { StandardPBEStringEncryptor encryptor = new StandardPBEStringEncryptor(); encryptor.setPassword(password); encryptor.setSaltGenerator(new StringFixedSaltGenerator(salt)); return encryptor; } 지금 만들고있는 사이드 프로젝트에서는 jasypt 라이브러리의 StandardPBEStringEncryptor를 사용하여 salt값을 고정하여 사용중인데 맞는 방법인지 모르겠고.. jasypt에 대해 검색해보면 properties나 yml파일 암호화 관련된 이야기가 대부분이던데 혹시 엉뚱한 라이브러리를 사용하고있는건 아닌가 싶네요.. 다른 분들은 어떤걸 사용하시는지가 궁금해서 질문 드립니다.

AWS 로드밸런서 504 오류

안녕하세요. 혼자 해보다가 도저히 해결이 되지않아 도움을 구하고자 글을 작성합니다. Express로 구축한 서버를 배포하기위해 AWS EC2를 이용해 ubuntu 인스턴스를 생성한 후 Nginx를 인스턴스 내에 설치하고 Express를 pm2로 구동한 후 Nginx와 proxy를 연결하여 정상적으로 작동됨을 확인했습니다. (Curl 확인 및 퍼블릭 ip주소 접근) 그런데 ACM을 통해 발급받은 SSL인증서를 연동하여 HTTPS연결이 가능하게하려고 로드밸런서를 생성하였는데 cdn접속시 504 오류가 나옵니다. 또, 대상그룹도 아래 사진과 같이 Unhealthy, Request timed out이라 나옵니다 (인스턴스 퍼블릭 IP주소는 정상적으로 접근이 가능함) 어떻게해야 ssl인증서를 연동하여 https연결이 가능하게 할까요 ㅜㅜ 제발 살려주세요 12시간 넘게 삽질중입니다.ㅑ

Oracle 21c 에서 default tablespace 지정해주는데 오류가 납니다.

안녕하세요. Oracle 21c에서 tablespace를 새로 생성하여 새로 만든 계정에 default tablespace로 지정해주려 하는데, 오류가 납니다. window cmd 창에서 sys as sysdba 로 접속했습니다. --------------------------- 오류 내용--------------------------------- SQL> ALTER USER C##SSO_USER DEFAULT TABLESPACE SSO_DB; ALTER USER C##SSO_USER DEFAULT TABLESPACE SSO_DB * 1행에 오류: ORA-65048: 플러그인할 수 있는 데이터베이스 XEPDB1에서 현재 DDL 문을 처리하는 중 오류가 발생했습니다. ORA-00959: 테이블스페이스 'SSO_DB'이(가) 존재하지 않습니다. --------------------------------------------------------------------- SELECT tablespace_name FROM DBA_TABLESPACES; 를 하면 TABLESPACE_NAME ------------------------------------------------------------ SYSTEM SYSAUX UNDOTBS1 TEMP USERS TEST_UP SSO_DB 라고 잘 뜨는데.. 왜 PDB 인 XEPDB1 에서 처리하는지 의문입니다. sys as sysdba로 접속 후 따로 PDB로 접속하진 않았거든요 이전에도 동일한 작업(tablespace 생성, 다른 계정이 default tablespace로 지정) 을 했었는데, 그땐 잘 됐거든요..

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

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에 보이게 할수있는 방법 있을까요 ?

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를 렌더링 해야합니다.

키보드 후킹 관련 질문

개인적으로 키보드 Hooking 프로그램을 제작 해 보았습니다 예를 들면 1번키를 누르면 키 조합 Alt + Left 가 실행되는 프로그램입니다, 키 로그를 통해 들어가는 입력 값들도 확인해서 정상인 것을 확인하였습니다. 문제는 윈도우 내레이터를 실행하고 브라우저에서 설정한 키 들을 사용하면 발생합니다 키보드 Hooking으로 처리한 동작이 동작 하지 않습니다.(일부는 작동함) 제 예상으로는 내레이터가 Hooking 보다 먼저 처리가 되고 그 다음 Hooking이 처리되는 것 같은데 내레이터 같은 윈도우 프로그램보다 먼저 처리되게 할 수는 없을까요?

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

안녕하세요! 현재 웹소켓으로 스프링과 채팅기능을 구현중에 있습니다 채팅방에서 채팅을 보내고 받는 건 가능한 상태인데 같이 채팅방에 입장해서 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> ); })}

img태그에 alt는 왜 넣어야 하나요?

초보 코린이 프론트엔드 개발자 입니다. img 태그를 사용할 때 alt 속성을 넣지 않으면 아래와 같은 경고가 나오는데요 img elements must have an alt prop, either with meaningful text, or an empty string for decorative images. 왜 alt속성을 넣어줘야 하나요? 어차피 안보이는거... 고수님들 부탁드립니다.

리액트 컴포넌트 타입을 그대로 사용하는 방법

안녕하세요! 리액트와 타입스크립트에 대한 질문입니다. img 태그를 사용해서 컴포넌트를 하나 만드려고 하고 있습니다. 이미지 태그가 받을 수 있는 타입을 컴포넌트가 그대로 사용하게 하고 싶은데 interface를 선언한뒤 이미지 태그가 받을 수 있는 모든 타입을 명시해주어야 할까요? src, alt... 시간이 너무 많이 드는 것 같아서 혹시 이런 경우 어떤식으로 처리하시는지 궁금합니다! 감사합니다.

react에서 axios, map 함수를 통한 api 호출

api를 axios를 통해 불러와서 map 함수로 뿌려주려고 합니다. 다음과 같은 api 형태이구요(이미지 url은 익명글이기 때문에 가짜로 넣었습니다) { isSuccess: true, code: 1000, message: "요청에 성공하였습니다.", result: [ { bannerIdx: 1, bannerImgUrl: "https://abcde.png", bannerTitle: "프리온보딩", bannerContent: "실무에서 사용할 수 있나요?" }, ] } 이 api를 다음과 같은 함수형 컴포넌트로 호출하는데 불러와지지가 않습니다. 아래 url은 제가 제 정보보호를 위해 가짜로 넣어놓았구요. console에는 정상적으로 api 내용이 출력되고는 있습니다. 그런데 화면에 표시가 안됩니다. 왜 안될까요? function TopBanner() { const [bannerData, setBannerData] = useState([]); useEffect(() => { getBannerData(); }); const getBannerData = async () => { const result = await axios({ method: "GET", url: "https://abcde/abc/abc", }).then((response) => { console.log(response.data); setBannerData(response.data.result); }); setBannerData(result); }; return ( <Base> <Container> <StyledSlider {...settings}> {bannerData && bannerData.map((banner) => ( <div className="slick-slide"> <div key={banner.data.result.bannerIdx} imgUrls={banner.data.result.bannerImgUrl} alt={banner.data.result.bannerTitle} className="banner-image" /> </div> ))} </StyledSlider> </Container> </Base> ); } export default TopBanner;

캐러셀에서 다중 이미지 로드시 스켈레톤을 보여주는 방법

캐러셀 안에서 이미지 컴포넌트를 map으로 그려주고 있습니다. 이미지 컴포넌트가 로드중일 때 스켈레톤을 보여주고 싶은데 이슈가 있습니다. 이슈: 여러 이미지 컴포넌트를 그릴 때 이미지가 하나라도 로딩중이면 스켈레톤 + 컴포넌트가 동시에 보임 컴포넌트 예시 ex) const imageRef = useRef(null); const isComplete = imageRef.current?.complete; {!isComplete && <Skeleton />} <img alt={alt} src={src} ref={imageRef} /> 위와 같은 코드를 작성했는데 ref값이 세팅되기 전에 isComplete가 undefined인 순간이 있어서 그런 것 같습니다... 그래서 코드를 다음과 같이 수정했는데 스켈레톤이 무한으로 로딩되네요.. {!isComplete ? <Skeleton /> : <img alt={alt} src={src} ref={imageRef} />} 로딩시에 스켈레톤을 보여줄 수 있는 좋은 방법이 있을까요?