#string

자바 SMS 일본어 포멧팅문제 질문드립니다.

일본어로 SMS발송을 테스트중입니다. 발송할 내용 템플릿을 작성해놓고, SMS를 발송하고 있습니다. 근데 로그상으로는 문자가 깨지지않는데 발송된 문자를 폰에서 확인하면 중간중간 한자가 ?로 나오는 문자들이 있습니다. 코드는 대략 아래와 같고 message를 그대로 전송합니다. 검색도 해보고 다양하게 테스트 해봤습니다. message = new String(message.getBytes(StandardCharsets.UTF_8), StandardCharsets.UTF_8); 와 같은 식으로도 이것저것 테스트해봤는데 안되네요. 혹시 해결방법이 있을까요?

리액트 네이티브 릴리즈로 배포 시 build.gradle 설정대로 동작 안하는 이유가 뭔지 궁긍합니다.

안녕하세요. 현재 리액트 네이티브로 프로젝트를 진행하고 있습니다. 막바지 단계에 거의 도달해서 이제 배포 준비를 하려고 하는데요, 마지막으로 테스트를 하기 위해 stagingRelease 로 apk 를 만들어서 테스트를 하려고 하니, .env.staging 을 읽지를 못하고 있네요. 이상한건 stagingDebug 로 할 때에는 이런 문제가 없었습니다. 지금 환경변수는 루트 디렉토리에 env 폴더가 있고, 해당 폴더 내에는 3개의 환경변수 파일이 존재합니다. .env.development .env.staging .env.production 이렇게 3개 입니다. project.ext.envConfigFiles = [ productiondebug: "env/.env.production", productionrelease: "env/.env.production", developmentrelease: "env/.env.development", developmentdebug: "env/.env.development", stagingrelease: "env/.env.staging", stagingdebug: "env/.env.staging" ] 위의 코드는 제가 설정한 환경변수 매핑하는 부분입니다. 실제로 stagingrelease 로 빌드 시에 flavor 값이 stagingrelease 로 뜨는 걸 확인했습니다. node_modules 에서 react-native-config 폴더를 찾아서 dotenv.gradle 에서 찍으니까 확인이 가능하더라고요. 제가 궁금한 점은 왜 루트에서 .env 파일만을 읽어서 BuildConfig.java 에서 사용하려고 하는걸까요? .env.staging 을 참조하지 않는 이유가 궁금합니다. 아래는 dotenv.gradle 파일입니다. import java.util.regex.Matcher import java.util.regex.Pattern def getCurrentFlavor() { Gradle gradle = getGradle() def pattern = Pattern.compile("(?:.*:)*[a-z]+([A-Z][A-Za-z0-9]+)") def flavor = "" gradle.getStartParameter().getTaskNames().any { name -> Matcher matcher = pattern.matcher(name) if (matcher.find()) { flavor = matcher.group(1).toLowerCase() return true } } println "Current flavor: $flavor" return flavor } def loadDotEnv(flavor = getCurrentFlavor()) { def envFile = project.hasProperty("defaultEnvFile") ? project.defaultEnvFile : ".env" if (System.env['ENVFILE']) { envFile = System.env['ENVFILE'] } else if (System.getProperty('ENVFILE')) { envFile = System.getProperty('ENVFILE') } else if (project.hasProperty("envConfigFiles")) { project.ext.envConfigFiles.any { pair -> if (flavor.startsWith(pair.key.toLowerCase())) { envFile = pair.value return true } } } println "Reading env from: $envFile" def env = [:] File f = new File("$project.rootDir/../$envFile"); if (!f.exists()) { f = new File("$envFile"); } if (f.exists()) { println "Found env file: $f" f.eachLine { line -> def matcher = (line =~ /^\s*(?:export\s+|)([\w\d\.\-_]+)\s*=\s*['"]?(.*?)?['"]?\s*$/) if (matcher.getCount() == 1 && matcher[0].size() == 3) { env.put(matcher[0][1], matcher[0][2].replace('"', '\\"')) // 각 환경 변수 키-값 쌍 출력 println "Loaded env variable: ${matcher[0][1]} = ${matcher[0][2]}" } } } else { println("**************************") println("*** Missing .env file ****") println("**************************") } project.ext.set("env", env) } loadDotEnv() android { defaultConfig { project.env.each { k, v -> def escaped = v.replaceAll("%","\\\\u0025") buildConfigField "String", k, "\"$v\"" resValue "string", k, "\"$escaped\"" println "Set buildConfigField and resValue: $k = $v" } } } 안드로이드 스튜디오 터미널에서 ./gradlew assembleStagingRelease 명령어를 치게 될 경우, Current flavor: stagingrelease Reading env from: .env.staging ************************** *** Missing .env file **** ************************** 이런 로그가 뜨고 있습니다.

채팅 디비 설계 질문이요!

안녕하세요:) 저는 ! 웹소켓과 관계형디비+프리즈마 를 이용해서 백엔드를 구성하고, 리액트로 만든 프론트 와 양방향 채팅 서비스를 만들려고 합니다! 채팅방 DB스키마를 작성하는데 어려움을 겪어 질문을 남깁니다. 현재 프리즈마에서 model ChatRoom { id Int @id @default(autoincrement()) name String creatorId Int users ChatRoomUser[] messages Message[] createdAt DateTime @default(now()) updatedAt DateTime @updatedAt } model ChatRoomUser { id Int @id @default(autoincrement()) userId Int // 외부 API에서 가져올 사용자 ID chatRoomId Int chatRoom ChatRoom @relation(fields: [chatRoomId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @default(now()) @@unique([userId, chatRoomId]) } model Message { id Int @id @default(autoincrement()) chatRoomId Int senderId Int // 외부 API에서 가져올 사용자 ID receiverId Int? // 선택적 필드, 단체 채팅에서는 null content String timestamp DateTime @default(now()) chatRoom ChatRoom @relation(fields: [chatRoomId], references: [id]) createdAt DateTime @default(now()) updatedAt DateTime @default(now()) } 이런식으로 구현하였는데 조언좀 부탁드립니다.ㅠㅠ

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 유저를 삭제할 때 해당 유저가 좋아요를 누른 기록을 유지하는 것이 좋을까요, 삭제하는 것이 좋을까요? 요구사항에 따라 달라진다는 것은 알지만 그래도 일반적으로 사용되는 방법이 궁금합니다.

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

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

React 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를 전달합니다. 무엇이 문제일까요?

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

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

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: [], }); ```

react-navigation navigate 파라미터 type

안녕하세요, @react-navigation의 useNavigation을 통해 페이지 이동을 하는 함수를 만들던 중 타입 설정이 되지 않아서 질문 드립니다. navbar와 같은 곳에서 사용할 목적으로 navigateTo와 params 를 받아 스크린을 이동시켜주는 함수를 만들고 싶지만 params의 타입에서 에러가 나고 있어서 이 부분에서 어떻게 해줘야 하는지 질문드려요.. 에러 내용을 보면 아래와 같이 나오는게 각 페이지 별 type이 일치하지 않아서 그런걸로 보이는데 각 메뉴마다 navigation.navigate('Login', {~~}); navigation.navigate('Foo'); 이런식으로 하게되면 동작은 하지만 너무 중복된 코드가 되는 것 같아 pgae를 받는 함수로 만드려고 하는 중인데 잘 안되네요..! Argument of type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to parameter of type '[screen: "Login"] | [screen: "Login", params: { page: string; data?: object | undefined; } | undefined] | [screen: "Foo"] | [screen: "Foo", params: undefined] | [screen: "Bar"] | [screen: "Bar", params: undefined]'. Type '[keyof RootStackParamList, { page: string; data?: object | undefined; } | undefined]' is not assignable to type '[screen: "Login", params: { page: string; data?: object | undefined; } | undefined]'. Type at position 0 in source is not compatible with type at position 0 in target. Type 'keyof RootStackParamList' is not assignable to type '"Login"'. Type '"Foo"' is not assignable to type '"Login"'.ts(2345)

COPY(PG) GC 오버헤드 에러

안녕하세요. 대용량의 텍스트 파일을 postgreSql에 적재하는 모듈을 개발하고 있습니다. copy 함수를 활용하여 텍스트 파일('|'으로 구분되어 있는)을 테이블에 insert 하는데 헤더 스킵을 위해 csv로 parsing하려고 합니다. 근데 파일이 커서 그런가(8GB정도) 'OutOfMemoryError : gc overhead limit exceeded' 에러가 계속 발생합니다.. (어떨 땐 에러 없이 잘 들어가기도 합니다) 코드 중에 불필요한 구문이 있는 건지 판단이 잘 안됩니다... 또 csv로 파싱하지 않고 텍스트 파일의 첫째 줄을 지우고 copy로 밀어 넣는 방법이 있을까요? --------구현 코드-------- try ( BaseConnection c = dataSource.getConnection().unwrap(BaseConnection.class)) { try ( PGCopyOutputStream os = new PGCopyOutputStream(c, "COPY " + tableName + " FROM STDIN WITH (FORMAT CSV)"); CSVPrinter writer = new CSVPrinter(new OutputStreamWriter(os, StandardCharsets.UTF_8), CSVFormat.POSTGRESQL_CSV); CSVParser reader = new CSVParser(new InputStreamReader(inputStream, charset), CSVFormat.INFORMIX_UNLOAD.withFirstRecordAsHeader())) { for (CSVRecord row : reader) { for (String col : row) { if (col != null && StringUtils.hasText(col.trim())) { writer.print(col.trim()); } else { writer.print(null); } } writer.println(); } } } *inputStream은 해당 파일 BufferedInputStream 객체입니다.

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

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

react에서 복잡한 상태를 관리할때.. 한번에 관리? 분리해서 관리? (jotai, recoil, useState)

안녕하세요 react를 이용해서 복잡한 작성 페이지를 만들고있습니다. 아래의 타입은 예시입니다. type payload = { name: string; message: string; type: string; url: { pc: string; mobile: string; }; contents: { images: { url: string; name: string; }[]; buttons: { name: string; url: string; }[]; }; conditions: { ... }, .... }; 위처럼 복잡한 데이터를 서버로 보내줘야해서 데이터를 관리해야하는데 현재는 페이지내에 구조가 복잡하고 컴포넌트도 매우많아 props drilling이 너무 심해질거같아서 recoil, jotai와 같은 상태관리 라이브러리를 이용해서 작업을 진행하고있습니다. 이러한 상황에서 관리하는 데이터를 한객체에 모아서 관리하는게 좋은지 아니면 const nameAtom = atom(''); const messageAtom = atom(''); const typeAtom = atom(''); const urlAtom = atom({ pc: '', mobile: ''}); .... 처럼 일일히 쪼개서 관리하는게 맞는 방향인지 모르겠어서 질문드립니다 ! (사수가없어서 물어볼곳이없어요...) 현재는 아래와같이 쪼개서 작업한뒤 submit시에 합쳐주는 방식으로 구현해놓았는데 atom 갯수가 20개 정도 되버리니까 너무 복잡해보여서 이게맞나... 싶어서 질문드리게되었습니다.

프론트에서는 관계형디비로 되어있는 백엔드에서 주는 응답 그대로 타입으로 써야하나요?

안녕하세요 예를들어 서버에서 아래와같이 응답을 준다고 할떄 end point : aimal/[id] response : { id:1 name:'코끼리', weight:1000, color: 'grey' } end point : getAnimals response:{ total_length:1, data:[{ id:1 name:'코끼리', weight:1000, } ] } 물론 위의 예시처럼 갑자기 배열로 호출시 특정 키(위 예시에서는 color)를 빼는 경우는 없겠지만, 비즈니스 로직을 처리하다보면 위와 같이 특정 api에서는 딱히 필요없는 값이라서 특정키가 빠지는 경우가 있더라구요 그런데 프론트엔드 입장에서 type Animal = { id:number; name:string; weight:number; color:Color } 이런식으로 타입을 정의해놓으면 특정 키가 들어오지 않았을 때 대응이 안되서 결국 모든 키를(id같은 특수 키 제외)nullable하게 해야하는것 같은데 좀 이상하기도 하고... 일반적으로 이런경우는 어떻게 해결하시나요?

타입스크립트 'value' is possibly 'null' 에러 옵셔널체이닝으로 해결안되는 이슈

import DateRangePicker from "@wojtekmaj/react-daterange-picker"; import { useDispatch } from "react-redux"; import { dateFetch } from "components/feature/FetchSlice"; import styled from "styled-components"; type ValuePiece = Date | null; type Value = ValuePiece | [ValuePiece, ValuePiece]; export default function CustomCalendar() { const dispatch = useDispatch(); const [value, onChange] = useState<Value>([new Date(), new Date()]); return ( <CalendarBox> <Calendar>조회 기간</Calendar> <StlyedDateRangePicker onChange={onChange} value={value} onCalendarClose={() => { dispatch( dateFetch({ startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), }) ); console.log(value); }} /> </CalendarBox> ); } <StlyedDateRangePicker>는 styled component로 만든 DateRangePicker 라이브러리 컴포넌트입니다. DateRangePicker 에서 날짜 2개를 선택하면 value라는 배열에 Date 객체 2개가 들어갑니다. 그리고 onCalendarClose 함수가 동작하면서 redux로 만들어놓은 startDate, endDate 객체에 각각 date를 toISOString() 처리한 값이 할당되는 로직입니다. 날짜를 선택하기 전에는 value={value}의 value 배열요소인 Date객체 값이 null 값이니까 type ValuePiece = Date | null; 타입지정을 해줬습니다. startDate: value[0]?.toISOString(), endDate: value[1]?.toISOString(), 근데 위 코드의 value[0], value[1] 에러가 나더라구요. 'value' is possibly 'null'.ts(18047) Element implicitly has an 'any' type because expression of type '0' can't be used to index type 'Date | [ValuePiece, ValuePiece]'. Property '0' does not exist on type 'Date | [ValuePiece, ValuePiece]'. null 값일 수도 있다길래 옵셔널체이닝을 줬는데 여전히 에러가 발생합니다.. 해결방법을 도무지 모르겠네요.. 도와주시면 진심으로 감사하겠습니다ㅠㅠㅠ

여기서 의존성 주입이 어떻게 이뤄질 수 있는 지 궁금합니다.

안녕하세요 이제 막 스프링부트 공부를 시작한 3학년 학생입니다. 다름이 아니라 스프링부트를 공부하던 중 아래와 같은 의문이 생겨 질문드립니다. @SpringBootApplication @ConfigurationPropertiesScan public class SburRestDemoApplication { public static void main(String[] args) { SpringApplication.run(SburRestDemoApplication.class, args); } } @ConfigurationProperties(prefix = "greeting") class Greeting { private String name; private String coffee; public String getName() { return name; } public void setName(String name) { this.name = name; } public String getCoffee() { return coffee; } public void setCoffee(String coffee) { this.coffee = coffee; } } 제가 이해하기로는 @Component(service, repository, controller 등) 어노테이션이 클래스에 부착되어 있어야 해당 클래스의 객체를 스프링 컨테이너에 의해 의존성 주입을 할 수 있다고 알고 있는데, @ConfigurationProperties 어노테이션은 내부를 아무리 찾아도 위에서 언급한 어노테이션을 가지고 있지 않았습니다. 하지만, @RestController @RequestMapping("/greeting") class GreetingController { private final Greeting greeting; public GreetingController(Greeting greeting) { this.greeting = greeting; } @GetMapping String getGreeting() { return greeting.getName(); } @GetMapping("/coffee") String getNameAndCoffee() { return greeting.getCoffee(); } } @RestController 에 의해(@RestController는 내부에 controller 어노테이션이 있더라구요) 스프링 컨테이너로부터 의존성 주입을 받을 수 있는 GreetingController는 greeting 객체를 받아서 생성자 메서드를 실행하므로 스프링 컨테이너에서 Greeting 클래스의 객체를 의존성 주입 받을 수 있는 지 확인해보고 위에서 언급한대로 Greeting은 등록되어 있지 않으므로 오류가 날거라 예상했습니다. 하지만, 아무런 문제없이 자동으로 public GreetingController(Greeting greeting) { this.greeting = greeting; } greeting 객체가 주입이 되었고 실행되었습니다. 제가 이해한 내용이 어디서 틀렸는 지 궁금합니다.

Jpa 커스텀 리포지토리 다중 상속 문제

커스텀 리포지토리 사용중 문제가 발생하여 질문 드립니다. @Repository public interface UserRepository extends JpaRepository<User, Long>, CustomRepository { Optional<User> findByUserId(String userId); } public interface CustomRepository { Long search(User user); } public class ACustomRepositoryImpl implements CustomRepository { @Override public Long search(User user) { return 1L; } } 이런식으로 코드를 작성하고 실행 시키면 아래와 같은 에러 메시지가 나옵니다. 그런데 ACustomRepositoryImpl 구현체 이름을 CustomRepositoryImpl 이렇게 바꾸면 정상적으로 실행됩니다. 명명규칙이 그저 개발자들 간의 약속 인줄 알았는데 규칙을 무조건 지켜야 하는 건지 궁금하여 질문 드렸습니다. Caused by: org.springframework.data.mapping.PropertyReferenceException: No property 'search' found for type 'User' at org.springframework.data.mapping.PropertyPath.<init>(PropertyPath.java:90) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:443) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:419) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.lambda$from$0(PropertyPath.java:372) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.concurrent.ConcurrentMap.computeIfAbsent(ConcurrentMap.java:330) ~[na:na] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:354) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:332) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.Part.<init>(Part.java:81) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$OrPart.lambda$new$0(PartTree.java:259) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$OrPart.<init>(PartTree.java:260) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$Predicate.lambda$new$0(PartTree.java:389) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$Predicate.<init>(PartTree.java:390) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree.<init>(PartTree.java:100) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.jpa.repository.query.PartTreeJpaQuery.<init>(PartTreeJpaQuery.java:100) ~[spring-data-jpa-3.2.2.jar:3.2.2] ... 79 common frames omitted

JpaRepository 다중상속 오류

JpaRepository에 다중상속으로 CustomRepository를 상속하려고 합니다. 근데 자꾸 에러가 나서 질문 드립니다. @Repository public interface UserRepository extends JpaRepository<User, Long>, CustomRepository { Optional<User> findByUserId(String userId); } public interface CustomRepository { void search(); } 에러 메시지 ========================================================= Caused by: org.springframework.data.mapping.PropertyReferenceException: No property 'search' found for type 'User' at org.springframework.data.mapping.PropertyPath.<init>(PropertyPath.java:90) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:443) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.create(PropertyPath.java:419) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.lambda$from$0(PropertyPath.java:372) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.concurrent.ConcurrentMap.computeIfAbsent(ConcurrentMap.java:330) ~[na:na] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:354) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.mapping.PropertyPath.from(PropertyPath.java:332) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.Part.<init>(Part.java:81) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$OrPart.lambda$new$0(PartTree.java:259) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$OrPart.<init>(PartTree.java:260) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree$Predicate.lambda$new$0(PartTree.java:389) ~[spring-data-commons-3.2.2.jar:3.2.2] at java.base/java.util.stream.ReferencePipeline$3$1.accept(ReferencePipeline.java:197) ~[na:na] at java.base/java.util.stream.ReferencePipeline$2$1.accept(ReferencePipeline.java:179) ~[na:na] at java.base/java.util.Spliterators$ArraySpliterator.forEachRemaining(Spliterators.java:992) ~[na:na] at java.base/java.util.stream.AbstractPipeline.copyInto(AbstractPipeline.java:509) ~[na:na] at java.base/java.util.stream.AbstractPipeline.wrapAndCopyInto(AbstractPipeline.java:499) ~[na:na] at java.base/java.util.stream.ReduceOps$ReduceOp.evaluateSequential(ReduceOps.java:921) ~[na:na] at java.base/java.util.stream.AbstractPipeline.evaluate(AbstractPipeline.java:234) ~[na:na] at java.base/java.util.stream.ReferencePipeline.collect(ReferencePipeline.java:682) ~[na:na] at org.springframework.data.repository.query.parser.PartTree$Predicate.<init>(PartTree.java:390) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.repository.query.parser.PartTree.<init>(PartTree.java:100) ~[spring-data-commons-3.2.2.jar:3.2.2] at org.springframework.data.jpa.repository.query.PartTreeJpaQuery.<init>(PartTreeJpaQuery.java:100) ~[spring-data-jpa-3.2.2.jar:3.2.2] ... 79 common frames omitted

react에서 에러 status에 따라 에러 모달을 가져오는 법

안녕하세요. 지금 api를 호출 후에 api에서 에러가 났을 때, 해당 에러의 status를 저장하여 해당 status에 맞는 에러 모달을 띄워주려고 하고 있습니다. ``` catch (error: unknown) { if (error instanceof AxiosError) { handleErrorModal(error.response?.status); } return null; } ``` 이렇게 fetchData에서 에러가 발생했을 때, handleErrorModal로 에러 status를 전달하고 있습니다. ``` const [errorType, setErrorType] = useRecoilState(errorDataState); const handleErrorModal = (errorStatus: string | number | null) => { setErrorType(errorStatus); }; ``` 그리고 handleErrorModal 함수는 이와 같이 작성을 해놓은 상태이고요. 근데, setState가 비동기로 작동해서인지 errorStatus가 저장이 되지 않아서 계속 초기값인 null을 띄워줍니다. 그리고, 계속 ``` Warning: Can't perform a React state update on a component that hasn't mounted yet. This indicates that you have a side-effect in your render function that asynchronously later calls tries to update the component. Move this work to useEffect instead. ``` 이 오류를 띄우네요. 이 문제를 해결하기 위해서는 useEffect를 쓰는 방법외에는 다른 방법이 없는걸까요?

TS 고수님, TS에서 타입 캐스팅 'as', 이렇게 이해해도 될까요

안녕하세요, 타입스크립트 고수님들에게 타입스크립트의 키워드 "as"에 대해서 문의 드립니다. 관건은 'as' 인데요 as의 의미를 다음의 순서대로 풀어보았습니다. 아래 코드에서 as의 역할/의미를 아래 순서대로 이해하는게 맞을까요? (=똑 떨어지는 설명이 없다보니, 나름 의미를 풀어서 이해해봤습니다.) 1.*[k in keyof O as O[K] 만약 k가 k in keyof o의 첫번째 값으로 'who'가 들어오고, 텍스트 'who'를 타입을 string이라고 합니다(as는 왼쪽의 값을 오른쪽의 값으로 '간주'하기 때문에) 라고 종종 서적에서 볼 수 있습니다. 2.*k in keyof O == O[K] 저는 as를 "=="이라고 이해하는데요, who(k in keyof O)는 string이라는 타입값이라고 간주합니다(=who는 string 입니다 라는 확정적인 의미가 아니라, "이렇게 할래" 이런 어조로 말입니다.) 3.[핵심!] who ==(비슷하다라고 간주하다) string 이기 때문에, who를 쓰는건 곧 "잠재적?"으로 string이라고 이해해도 될까요??.. (즉, who라고 쓰고 who라는 자리에 타입 string이라고 읽는다..처럼 말이죠...) 4.*who(==string) extends T(number) ? never : K(who) 텍스트 who는 곧(==) string 타입이기 때문에, 3번에서 말한 것처럼, who의 타입은 string이기 때문에 never가 아닌, K즉 who로 종료된다 요약하면, as를 쓰면 위 코드 상에서는 2가지 의미가 떠오르는데요, 1.k라는 텍스트를 o[k]의 타입으로 바인딩을 시키고 2.k는 o[k]라는 타입을 갖게 되어(= 타입 캐스팅), k를 사용하는 건 곧, k의 타입 o[k]를 사용하는 것이다 라고 이해했습니다. k라고 쓰고 o[k]라고 읽는 다 처럼 말이죠, as가 as 이하의 타입으로 "만든다" 라고만 생각하면, 위의 3번 내용이 생각이 나질 않습니다. 아래 코드에서 as를, 코드"순서대로" 이해해보려 하니 조금은 억지스러운 면이 있었지만, 조금은 컴퓨터 답게? as를 제대로 이해하고 있는지 고수님들에게 조언을 듣고 싶습니다! 감사합니다!

클라이언트(프론트)에서 api return 처리를 어떻게 하시나요?

안녕하세요 클라이언트(프론트)단에서 axios 사용해 REST api return 스펙정리를 해서 서버단과 이야기해 수정을 하려고 합니다. 고려사항 등 도움을 주시면 감사하겠습니다. Method - GET : 정보조회시 - POST : 저장시(회원, 주문, 아이템 등) - PUT : 수정시 - DELETE : 삭제시 현 구현 - HTTP status 200은 성공, 그 외 에러처리 => 서버단에서 보내주는 msg 혹은 프론트에서 하드코딩으로 문자열 출력(alert) 문제점 1) 성공과 실패 및 실패 사유에 대한 return 구조체가 생각 이상으로 깊은 구조이며 일관성이 없음. ex1) response.data = { 객체 정보 } ex2) response.data = "Success"; -- 여기부터 문제 -- ex3) response.data.detail = "Faile"; ex4) response.data.detail[0].msg = "Faile"; // 기타 다른정보들 포함됨 ex5) response.data.messages "문자열" 2) 몇개의 api는 return 값으로 status가 200으로 string 혹은 object가 날라옴. 3) 사용자 정보제공(문자열) 하드코딩 다국어 설정도 고려하고 있기에.. 실패시 정보를 연상코드로 리턴받을까합니다.(개인 생각) 작성하고 보니 어떻게 문제점은 보이는데 좋은 개선점이 있으시면 의견주시면 감사하겠습니다.

Next.js 14 서버액션을 사용한 폼 데이터 처리 중 질문입니다.

next.js 14의 서버액션을 사용해서 사용자로부터 form으로 데이터를 입력받아 DB에 저장하고 첨부파일을 서버에 업로드하는 모듈을 개발중입니다. 문제점은, 첨부파일을 input으로 입력받아 서버액션 함수로 formData로 넘겨주는데, 서버액션 함수에서 첨부파일의 파일명에 한글이 포함됐을 경우 파일명의 한글이 유니코드로 보이는 문자열로 찍히고 있습니다. // Form.jsx "use client"; // [other code] export default function Form() { const [formState, formAction] = useFormState(inquiryAction, { success: undefined, message: "", }); const { register, handleSubmit, reset, formState: { errors }, } = useForm(); const onSubmit = (data) => { const formData = new FormData(); const jsonData = JSON.stringify(data); formData.append("jsonData", jsonData); data.attachment[0] && formData.append("attachment", data.attachment[0]); formAction(formData); }; return ( <form action={handleSubmit(onSubmit)}> // [other code] <FileInput label="첨부파일" {...register("attachment")} error={errors} resetTrigger={resetTrigger} /> // [other code] </form> ); } // inquiryAction.js "use server"; import { connectDB } from "./connectDB"; export async function inquiryAction(prevState, formData) { const fields = JSON.parse(formData.get("jsonData")); const attachment = formData.get("attachment"); console.log(attachment); } Form 컴포넌트는 클라이언트 컴포넌트이고, react-hook-form과 next14의 서버액션을 사용하기 위해, form의 action에는 react-hook-form의 handleSubmit함수에 onSubmit 함수를 인자로 전달합니다. onSumbit 함수에서 서버액션 함수를 가져와 처리를 하고 있습니다. 그런데 여기서 서버함수쪽에서 첨부파일을 받을 때 한글 파일명이 다 깨지고 있네요... 기존에 api route와 fetch api를 사용했을 땐 문제가 없었는데.. 제가 놓치고 있는 부분이 있을까요?

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

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

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파일 암호화 관련된 이야기가 대부분이던데 혹시 엉뚱한 라이브러리를 사용하고있는건 아닌가 싶네요.. 다른 분들은 어떤걸 사용하시는지가 궁금해서 질문 드립니다.

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

json parse error 문제입니다.

리엑트에서 {userId : id} 이렇게 보내는데 컨트롤에서 Resolved [org.springframework.http.converter.HttpMessageNotReadableException: JSON parse error: Cannot deserialize value of type int from String "[object Object]": not a valid int value] 에러가 발생합니다. User VO로 맴버필드도 int 타입으로 선언되어있는데 파싱에러가발생... @RequestBody User user 로빼고 있는데 이유가 뭘까요?.. 예전에도 비슷한 문제가 있었던거 같은데 검색해도 못찾겟습니다 ㅠㅠ 알려주세요 ㅠ

InnerHtml을 안전하게 사용하면 괜찮겠죠?

Editor를 만드는데 Notion처럼 안쪽 내용을 드래그해서 그 드래그한 내용을 mark같은 태그로 감싸주는 기능을 만드려고 합니다 기능구현은 문제가 없지만 데이터를 저장할때 html태그가 포함된 string으로 저장할 방법밖에 생각이 안납니다 그래서 저장전 혹은 태그로 감싸기전 여러 확인작업을 거칠것이긴하나 XSS공격이 조금 무섭네요 혹시 다른 아이디어가 있을까요?

리액트 로그인 jwt 구현중 나타나는 에러

제가 jwt를 통해서 로그인을 구현하고 있는데요. 서버에서 jwt토큰을 가져오면 그 토큰을 디코딩해서 사용하고 있습니다. 로그인 코드를 짜놓고 실행을 시키면 저렇게 에러 코드가 나오고 let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); 이부분을 지우면 화면이 잘 나타나게 되고 저상태로 아이디랑 비밀번호를 넣어 로그인 버튼을 누르면 jwt토큰이 잘 들어옵니다. 토큰이 들어온 상태서 다시 let payload = testGetCK.substring(testGetCK.indexOf('.')+1,testGetCK.lastIndexOf('.')); let dec = JSON.parse(base64.decode(payload)); console.log(dec.id); console.log(dec.nickname); 이 코드를 넣으면 작동이 되는데 예외 처리를 해서 작업을 해야하나요??..

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 순서까지 똑같이 했고 다른점이 없어서 더 멘붕이에요 ㅠ 계속 첫번째 화면만 보여요... 도와주세요 ㅠ

for문을 이용한 중복체크 방법

public MemberDTO doRegist() { sc.nextLine(); System.out.println("*****************************************************"); System.out.print("아이디를 입력하세요 : "); String id = sc.nextLine(); System.out.print("비밀번호를 입력하세요 : "); String pwd = sc.nextLine(); System.out.print("이름을 입력하세요 : "); String name = sc.nextLine(); System.out.print("나이를 입력하세요 : "); int age = sc.nextInt(); System.out.print("성별을 입력하세요 : "); char gender = sc.next().charAt(0); sc.nextLine(); System.out.print("핸드폰 번호를 입력하세요 : "); String phone = sc.nextLine(); System.out.print("이메일을 입력하세요 : "); String email = sc.nextLine(); System.out.println("*****************************************************"); MemberDTO user = null; if(answer == 'Y') { user = new MemberDTO(id, pwd, name, age, gender, phone, email); }else { System.out.println("로그인 페이지로 돌아갑니다."); mainLogin(); } return user; } 여기에 for 문으로 아이디 중복체크를 넣고 싶은데 어떻게 넣어야 할까요...ㅠㅠ...

리액트 네이티브 flatlist 관련 질문 받아주실 분 있으실까요?

제가 리액트 네이티브로, 위아래로 슬라이드 하면 한 달씩 넘어가는 캘린더를 만들고 있습니다. 그래서 전체를 FlatList로 만들고 스크롤 시 y인덱스를 받아와서 한 달씩 랜더하는 식으로 코드를 구현하였습니다. const handlePageChange = (newPage: number) => { if(newPage !=0) { const newDate = new Date(currentDate); newDate.setMonth(newDate.getMonth() + newPage); setCurrentDate(newDate); } }; return ( <FlatList data={[...Array(1).keys()]} keyExtractor={(item) => item.toString()} renderItem={({ item }) => ( <CalendarMonth currentDate={{ currentDate }} ClickedDate={{ ClickedDate }} setClickedDate={setClickedDate} /> )} horizontal={false} pagingEnabled= {true} showsVerticalScrollIndicator={false} scrollEventThrottle={100000} onScrollEndDrag={(event) => { const offset = event.nativeEvent.contentOffset.y; const direction = offset === 0 ? 0 : offset > 0 ? 1 : -1; handlePageChange(direction); }} /> ); 이런 식으로 코드를 구현하였는데 위로 잡아 올렸을 때 빈칸이 보이는데 저는 스크롤 시 모션은 보이지 않고 바로 다음 달력으로 넘어갔으면 합니다. 혹시 스크롤 시에 달력이 움직이지 않고 바로 넘어갈 수 있는 방법이 있을까요?