#log

nextjs middleware 에서 protected route 처리 하는 방법이 궁금합니다

middleware 에서 토큰 인증에 따른 redirect 를 구현 할려고 합니다 제가 생각한 로직은 인증이 필요한 페이지는 accesstoken을 쿠키에서 받아오고 토큰이 없거나, 인증이 실패하면 login 페이지로 이동, 토큰이 만료된 경우에는 refresh 요청이후 accesstoken,refreshtoken 재발급 이후 원래 이동할려는 페이지로 이동 이렇게 생각중인데 다만 하나 걸리는게 middleware에서 refresh api 요청을 하는게 과연 올바를까? 궁금합니다 그럼에도 굳이 middleware 에서 할려는 이유는 page단 에서 처리할경우에는 결국에는 한번 그 페이지로 이동했다가 처리되는거라 깜빡이는 이슈가 생겨서 그렇습니다 보통 어떤식으로 처리하는지 궁금해요

게시글 이미지 업로드를 구현하는데 궁금한 점이 있습니다.

velog를 참고하여 Spring + Vue를 이용하여 마크 다운 기반 게시글을 구현하고 있습니다.. 글을 쓰는 도중에 이미지를 올리면 s3에서 url를 반환하여, 이것을 통째로 Post 테이블 Content 필드에 저장하여 순서를 보장하는 식으로 진행하고 있습니다. 로직 흐름은 이렇습니다. 1. 사용자가 이미지를 올린다면, 클라이언트에서 글쓰기 버튼을 눌렀을 때 미리 만들어 놓은 UUID와 이미지를 서버로 보낸다. 2. 서버에서는 s3객체에 임시 저장 여부를 확인하는 isTemp를 태그를 넣어서 서버를 걸쳐서 S3에 쏜다. 3. S3에서 객체를 찾아서 key값과 클라이언트에서 보낸 uuid를 Image 테이블에 저장해서 Post와 간접적으로 연관 관계를 맺는다. 4. 글쓰기를 누른다면 내용과 UUID를 보내서 UUID를 Post의 primary key로 사용하고, UUID 기반으로 Image 테이블에서 key들을 갖고 와서 S3 객체의 isTemp 태그를 false로 바꾼다. 4-1 . 뒤로 가기나 임시 저장을 눌렀을 때는 isTemp를 true로 설정하고 저장한다. 5. 30일이 지날 때마다, Post에 있는 isTemp를 통해 임시 여부를 확인하여 임시 저장된 글을 삭제하고, S3에서는 수명 주기를 설정하여 태그를 기반으로 true인 이미지들을 삭제한다. 객체를 삭제하는 이유는 불필요한 데이터가 공간을 차지하는 것이 별로라고 판단했습니다. UUID는 글을 다 쓰기도 전에 서버로 쏘기 때문에, 어떤 게시글에서 쓰였는지 확인하기 위해서 사용했습니다. 성능이나 용량 면에서 안 좋다고 하지만, 이는 데이터를 넣어 놓고 조회를 하여 성능을 확인하였고 현재 프로젝트 크기를 생각했을 때 접목해도 상관없을 것 같아 넣었습니다. 하지만 이런 식으로 진행하니, 만약 사용자가 중간에 이미지 링크를 삭제한다면? 이라는 시나리오를 생각했을 때 이를 대처할 방도가 떠오르지 않습니다. 다른 분들은 어떤 식으로 처리했는지, 제가 너무 어렵게 생각하고 짜는지 궁금합니다.

선배님들의 고견을 여쭙고자 합니다.

안녕하십니까!!... ​ 저는 최경호 라고 하며, 현재 울산에서 MRO소모성 자재(건설업) 납품업체 에서 건축자재 및 공구 또, 산업.안전용품 의 유통회사 에서 배송납품 기사 로 일하는 40대 남성 입니다. ​ 건설업 MRO 라는 키워드 로 검색을 하게되었고, 정확한 내용은 아래 링크 를 보시면 더 자세하실 겁니다. https://blog.naver.com/mmoonhs91hy/221934607016생활안전시장_안전용품 ​ 다름이 아니오라, 제가 현재 일하고 있는 회사는 울산지역 에서 S-oil 이나 금호석유화학, SK에너지 등의 회사의 협력업체들 에게 공구 및 작업복 흔히 말하는 산업.안전용품 기타 관련용품들 을 배송.납품 하는 업무를 하고있습니다. ​ 제가 문의글을 올리게 된 이유는, ​ 울산의 공구상가 에서 (사업자 를 가진 회사에게 도매 가격으로 판매를 하고, 개인고객 에게는 소매가격으로 판매를 하는) 업장을 방문해서 물건을 구입후 에 배송을 하고 있습니다. 여러 카테고리 가 있다보니. 품목에 따라 다른 업체들을 방문하여 물건구입 후 배송을 하는데, 저희 회사자체 의 창고에서 물건을 찾아서 가는 경우는 거의 없습니다. (원체 많은 품목들이 있고, 판매를 될지 안될지 모르는 제품들이기에 창고에 미리 갖추고 있을 여유는 없습니다.) ​ 또한 KEP(코리아이플랫폼) 라는 MRO회사의 네트워크 에 가입이 되어있고-실제 배송.납품건이 많지는 않은것 같습니다. 크레텍 책임&웰딩 이라는 대구에 본사를 둔 회사에서 공구 관련 품목을 납품 받고, 기타 타지역에서 화물로 물건을 받아 그때그때 주문에 맞추어서 발주를 하고 물건을 받아,판매하고 있습니다. KEP 나 서브원 같은 대기업 에서 운영하는 MRO업체들 에게서 물건을 납픔받아 재판매를 하는 식 입니다. 구비하고 있는 기계? 를 일정기간 임대 하고 비용을 받는 부분도 있는것 같습니다. ​ 제가 대표님 에게 듣기로는, 울산 이라는 지역에서 같은 업을 하는 경쟁사 가 약250여개 가 된다고 합니다. 아주 오래된...지금 의 7~80대 어르신 들이 예전에 하던 유통방식 에서 달라진것이 없는 상황 입니다. (물론 연합을 해서 이 물건은 이 가격에 팔자! 라는 방식은 잘 모르겠으나, 공구상가 주변에 모여들어 사업자가 있는 사람에게는 도매가로 판매하고 개인에게는 소매가 로 판매를 하는..) ​ 또한, 건설 프로젝트 를 대기업에서 입찰을 해서 공사를 시작하게 되면 그 협력업체 사람들과의 인맥 과 또 그를 통한 다른 인맥을 만들며 공사에 참여하여 자재를 납품 합니다.. 인맥이 없으면, 장사를 못한다! 라는 그런 이야기 도 들은것 같습니다. ​ 이런 현 상황에서 소상공인들이 대부분 이다보니, 정부에서 기관을 만들어 지원해 주는 경우도 있는데 대부분이 마케팅 과 온라인 유통 에 관련된 교육들이고, 사업자 가 있어야 참여를 할수가 있더군요.. ​ 온라인 유통에 대해 아는것이 없습니다.. 전문성 을 어필하기 위해 홈페이지 에서 구독서비스 를 만들고 공구나 기타자재 들도 풀필먼트 라는 물류시스템을 빨리 갖추어야 한다! 라는 이야기를 들었습니다만... ​ 홈페이지 에서 클릭해서 장바구니 담고 택배로 물건 보내준다.. 건축자재 들이 원체 부피가 크고 무게가 많이 나가다보니, 그게 가능한가? 이런 수준의 생각밖에는 못하고 있습니다. ​ 산업.안전용품 를 유통하는 회사로써, 유통업,서비스업 의 범주에 포함된다고 생각합니다만, ​ 이 업계에서 저희 회사의 포지셔닝 부터 찾아야 한다고 생각을 하고, 포지셔닝 을 찾은후에 다른 경쟁사 와 다른 저희 회사만의 KSF(Key success factor) 를 만들수 있다고 생각합니다. ​ 저의 짧은 생각으로는, 서비스업 의 특징은 , 고객이 이미 가지고 있는 기대치 를 넘어서는 무언가를 제공해 줄수 있어야 한다고 생각 합니다. 정확하고 빠른 배송 과 친절함? 이런 부분은 누구나 다 생각하고 가지고 있다고 생각 합니다. ​ 유통업 에서 포지셔닝 을 찾기위해 어떤 부분들이 고려되어야 하는지? 저희만의 KSF를 가지기 위해 무엇을 할수있는지? 이 부분에 대해 여쭙고자 합니다. ​ 저는 타 경쟁사 와 다른 저희만의 독점성 을 가지기 위해 개인적으로 해외소싱,구매 를 생각하고 있습니다. 그 이유는 한국에서 산업,안전용품 은 보급품 이라는 이미지 가 있다고 생각을 하고있으며, 품질적인 부분은 아직 국제사회에서 경쟁을 할 정도는 아니다.라고 알고있습니다. ​ 그리고 항상 편안함 과 안전 이라는 부분이 가장 우선시 되기에. 타업계에 비해 품목의 트렌드 에 영향을 많이 받지는 않는다고 생각합니다. ​ 그러나 중소기업 의 부족한 부분을 채워주기 위해. 이미 많은 대기업들이 MRO를 하기에, 해외소싱 이 저희만의 KSF가 되어줄수 있을지에 대해서 더 많은 고민이 필요하다고 생각합니다. ​ 현재 국내에 유통이 되지않는, 그런 품목이 필요하다고 생각만 하고있습니다. 많은 전문가 분들은 산업,안전용품 과 공구 등은 해외소싱 및 구매를 할 만한 아이템이 이젠 거의없고 또 아이템 마다 너무다른 방식들이 많아서 그다지 좋은 방법은 아니라고 합니다. ​ 소모성자재 이니 만큼 건설업 만이 아닌. 자동차 ,조선업 ,입찰,항공 또한 조달..등의 이야기 와 온라인 유통에 대해 많은 지식을 갖추라고 이야기 하십니다. ​ 제가 얻은 답변 중 회사의 일원으로써 갖추어야 하는 능력은.. AI UI/UX 설계 데이터 분석 어디서 부터 어떻게 시작해야 하는지 어떤 커리큘럼 을 가지고 따라갈수 있을지 문의 드리고자 합니다. 제가 현재 많은 지식을 갖추고 있는 사람이 아닌지라, 어리석은 우문 만 드리게 되었습니다만, 여기 계신 분들의 고견을 부탁 드려도 될런지요?

iOS NEpacketTunnelProvider https 패킷 감지

안녕하세요! iOS NEPacketTunnelProvider 프로젝트를 진행하며 어려움이 있어 여쭈어봅니다. 터널링을 이용해 vpn 프록시 서버를 로컬로 두고, 해당 터널에 지나가는 네트워크 패킷을 캡쳐해보고 있습니다. https 요청의 경우 암호화가 되어 있다보니 full path(ex. https://google.com/login) 경로를 알아낼 수 없는 것으로 알고 있습니다. 그래서 SNI를 추출하여 도메인(ex. https://google.com) 정도만 출력해보고 싶은데 관련 경험이 있거나 Network Extension을 잘 아시는 분 계신가요?? 도와주신다면 커피 기프티콘으로라도 보답드리겠습니다! 감사합니다.

개발자 취준- 블로그를 꼭 작성해야할까요?

저는 웹 프론트 엔드 개발자를 반년 넘게 준비중인 취준생입니다. 부트캠프에서나 인터넷에서나 개발자로 취업을 하려면 velog에 자기가 공부했던 것, 막혔던 부분들을 꼭 기록하라고 하시더라구요. 근데 제가... 뭔가 부끄럽습니다... 인터넷이지만 글솜씨도 없고 누군가가 지나가다 제 블로그를 본다는 것에 민망하기도 하구요. 저는 노션에다가 따로 정리는 아니고 메모식으로 하는 편인데 블로그를 꼭 써야할까요..? 써야한다면 지금이라도 쓰는게 좋은 걸까요? 혹시나 정말로 꼭 써야한다면 용기내서 써보려합니다..

이직 시 기술 블로그의 필요성에 대하여

풀스택이라하고 프론트 비중이 더 높은 3년차입니다. 이직을 계획하여 토이프로젝트를 개발하고 있던 중 문득 저만의 기술 블로그가 없다는 사실을 깨달아버렸습니다. 첫 취업 자체도 국비 지원을 통해 운 좋게 성공했고, 한 번의 이직도 가벼운 토이프로젝트로 성공했습니다. 그렇게 바로 취업을 하다보니 다른 사람들처럼 깃헙에 무성한 잔디를 심지도, 노션이나 velog같은 블로그를 운영한 적이 없네요. 아무튼 빠르게 결론만 얘기하자면, '이직 과정에서 개발 블로그가 도움이 되는건가?' 입니다. '수없이 많은 이력서를 검토하는 면접관이 구구절절하게 포스팅 되어있는 기술 블로그를 진짜로 보긴 볼까? 차라리 간단명료하게 작성되어있는 이력서 혹은 경력 기술서나 포트폴리오를 확인하겠지' 라는 생각을 계속 하게 됩니다. 이력서를 검토하신 경험을 가지고 계신 개발자나 인사 담당자분들에게 여쭤보고 싶습니다. 진짜 보시나요?

NavigationContainer 중첩 오류

안녕하세요, RN(Expo)로 React Navigation을 적용하다 오류가 해결되지 않아서 질문드립니다. expo를 통해 다음과 같이 index.js에 React Navigation을 적용했습니다. import { store } from "@/redux/store"; import MainScreen from "./screens/MainScreen"; import { Provider } from "react-redux"; import { NavigationContainer } from "@react-navigation/native"; import { createNativeStackNavigator } from "@react-navigation/native-stack"; import LoginScreen from "./screens/LoginScreen"; export default function HomeScreen() { const Stack = createNativeStackNavigator(); return ( <Provider store={store}> <NavigationContainer> <Stack.Navigator> <Stack.Screen name="Main" component={MainScreen} /> <Stack.Screen name="Login" component={LoginScreen} />{" "} </Stack.Navigator> </NavigationContainer> </Provider> ); } 그러나 다음과 같은 오류가 뜨며 빈화면만 보이더라구요ㅠ Error: Looks like you have nested a 'NavigationContainer' inside another. Normally you need only one container at the root of the app, so this was probably an error. If this was intentional, pass 'independent={true}' explicitly. Note that this will make the child navigators disconnected from the parent and you won't be able to navigate between them. 찾아보니 NavigationContainer가 중첩되었다는 것 같은데, 저는 계속해서 그대로 강의를 따라가고 있었고, 따로 NavigationContainer를 적용한 파일이 존재하지 않습니다 ㅠ 다음 속성을 추가해도 오류가 해결되지 않습니다 ㅠ 아마 어디선가 부모에서 NavigationContainer가 적용된 것 같은데 찾을 수가 없네요 ㅠㅠ independent={true} 조금 더 찾아보니 expo-router랑 충돌이 난 거일 수도 있다는데 정확하게 모르겠네요 ㅠ

Next.js SSR CSR에서의 캐시 문제

메인 페이지의 컴포넌트는 무한 스크롤을 이유로 SSR안에 CSR이 작동하는 구조입니다. 거기서 제품 상세 페이지를 들어가면 현재 페이지는 RSC + 클라이언트 컴포넌트를 통해 이루어진 SSR 페이지입니다. 구매 또한 RSC / 클라이언트 컴포넌트를 구분 지어놓은 상태입니다. 구매를 하면 메인으로 와지구요. 이 경우 다시 제품 상세 페이지로 들어갔을 때 fetching을 다시 안하는 이슈가 있어(next-server 캐싱 문제) 동적 페이지로 작동해야하기 때문에 force-dynamic과 no-cache header를 달아줬습니다. 그 이후에 제대로 작동하는듯 하였는데 상세 페이지에서 클라이언트 컴포넌트에서 console.log를 찍었을 때 구매 한 이후에도 수량이 변하지 않는 것을 확인하였습니다. 이러한 문제를 해결하기 위해서 구매 페이지에서 onSuccess 됐을 때 router.refresh()를 해줬을 시에는 상세 페이지에서의 클라이언트 컴포넌트 console이 제대로 찍히는걸 확인하였습니다. 이에 대해 궁금점은 메인 페이지로 가는 router 이후 refresh를 하였고 메인에서 변경된 상황만 refresh 되는걸로 알고 있었는데 별개의 페이지인 상세 페이지에서 console이 제대로 찍히는 이유가 뭔지 모르겠습니다. 이러한 전처리를 하지 않으면 새로고침을 하지 않으면 이전의 data가 그대로 console에 찍힙니다. 또한 force-dynamic을 해줬는데도 불구하고 console.log를 SSR 페이지에서 찍었을 때 최초의 접근 할 때는 가져오지만 그 이후에 다시 들어올 때는 메인에서 refresh를 하고 나서도 console이 안찍히는데 왜 이런지 궁금합니다. next-server에서 매번 data를 fetching하지만 ui의 변경이 없다고 판단되면 클라이언트로 데이터를 보내지 않아 찍히지 않는걸까요.

Expo SQLite WHERE 조건 한글 안됨

React Native Expo에서 앱을 개발중에 sql문이 오류가 뜹니다. 코드는 아래와 같습니다. async function SearchName() { console.log("load data"); try { const db = await SQLite.openDatabaseAsync("MountBedge.db"); const data = await db.getAllAsync(`SELECT * FROM HikingData WHERE Name = '가';`); setLoadedData(data); } catch (error) { console.error("Error testing database connection:", error); } } 문제가 되는 부분은 getAllAsync의 WHERE부분입니다. 한글로 검색한 부분을 영어로 변경하면 오류도 뜨지 않고 검색도 잘 됩니다. 한글로 검색 시 뜨는 오류는 아래와 같습니다. Error testing database connection: [Error: Calling the 'prepareAsync' function has failed → Caused by: Error code 1: near "'ㄱ'": syntax error] 혹시 해결할 방법을 아시는 분이 계시나요? 이게 expo에서는 해결이 가능한건지, 아니면 react native cli로 넘어가야 하는건지 모르겠습니다. 추가로 expo에서 sql문으로 데이터를 저장 시 db가 어디에 있는지 알 수 있는 방법이 있다면 알고싶습니다. 영어를 못해 영어로는 검색을 거의 안해봤지만 자료가 너무 없네요...

토큰 관리, 로그인 유지를 현업에서는 어떻게 진행하는지 궁금합니다

안녕하세요 토이프로젝트로 인증/ 인가 파트를 맡게되었습니다 이전의 프로젝트에서는 로컬스토리지과 전역 상태 관리 라이브러리의 persist를 활용하여 토큰과 로그인상태를 로컬스토리지에 저장하여 진행하였습니다 하지만 이번에 새롭게 진행하는 프로젝트를 위해 다양한 웹사이트를 개발자도구로 참고하였지만 토큰이나 isLogined와 같이 로그인 여부 상태를 로컬, 세션 스토리지에서 관리하는 사이트를 확인할 수 없었고, 검색을 통해 보안을 위해 Http Only 쿠키를 통해 액세스 토큰과 리프레시 토큰을 관리하는 방법이 일반적이란것을 알 수 있었습니다 이러한 방법에서 몇 가지 궁금증이 생겨 질문을 드리고 싶습니다 1. 현업에서는 어떠한 방식으로 토큰을 관리하고 로그인 상태를 유지하나요? 2. 만약 http only 쿠키를 사용하게 된다면, 쿠키에 저장된 토큰을 클라이언트에서 조작할 수 없으니, 매번 페이지를 렌더링 할 때마다 토큰이 유효한지 api 호출을 통해서 로그인 상태를 유지해야하는걸까요? (api를 통해 토큰이 유효하다면 로그인 유지, 아니라면 로그인 페이지 리다이렉션) 3. http only 쿠키 외에 인증 / 인가를 위해서 클라이언트 단에서 보안적으로 신경써야하는 부분은 어떠한것이 있을까요? 가장 기본적이지만 가장 어려운 인증/인가 부분 현업 선배님들께서는 어떻게 진행하시는지 답변해주시면 감사하겠습니다

쿠버네티스에서 pod삭제 및 pod재스케쥴링 불가

쿠버네티스에서 pod들이 삭제가 안되고 재스케쥴링도 안됩니다... 별이상없다가 갑자기 발생했습니다. deploy로 만들어놓은 pod를 삭제했더니 terminating과 containercreating상태가 유지되거나 helm으로 deploy한 pod들이 init, containercreating, terminating상태 유지되고 더 이상 진행이 안됩니다. pod의 describe, event, log node상태(Ready상태, 각 리소스 확인)도 모두 이상없고 파이널라이저 설정은 따로 하지 않았습니다. 문제가 무엇일까요?

[쿠버네티스] 로그 관련2

애플리케이션이 STDOUT 및 STDERR 대신 파일에 직접 로그를 작성하는 경우 /var/log/containers/에 로그가 남지 않게 됩니다. 그리고 스케쥴링된 노드 어느 path에도 로그가 남지 않습니다. 이 경우 컨테이너 내부의 로그를 수집해야하는데 promtail로 어떻게 설정해야 컨테이너 내부의 로그를 수집할 수 있나요?

[쿠버네티스] 로그 관련

애플리케이션이 STDOUT 및 STDERR 대신 파일에 직접 로그를 작성하는 경우 /var/log/containers/에 로그가 남지 않게됩니다. 애플리케이션이 100개이상이라고 가정할 때 파일에 직접 로그를 작성한 경우를 빠르게 찾는 명령어나 알 수 있는 방법 더 나아가 promtail에서 어떻게 설정해야 파일에 직접 로그를 작성한 경우도 수집하는지 알려주세요

[쿠버네티스 질문] #pod #log #stdout

pod가 스케쥴링되면서 표준출력이 스케쥴링된 노드의 특정path(/var/log/containers/)에 남는데 안 남는 경우는 어떤 경우가 있을까요? 해당 pod내에 컨테이너로 접속해서 로그를 직접 보는것도 가능하며 kubectl logs 명령어로도 로그는 존재합니다. 그러다보니 promtail이 해당 노드에 존재함에도 로그데이터를 못 가져오는 일이 생기고 로그데이터를 수집하는 입장에서 모든 pod들의 마운트를 하나씩 설정할 수는 없는노릇이지 않나요..

useState와 useEffect에 대해 너무 헷갈립니다.

안녕하세요 useState와 useEffect를 공부중인데 아직 초보자라 너무 헷갈리더라구요. 제가 이해한 것은 우선 useState는 클릭했을 때 모달창이 나온다거나, 사용자가 input에 입력한 값처럼 무언가를 동적으로 변경이 되게 할 때 사용하고 또 API를 사용할 때 이 데이터를 저장할 때 사용한다...로 알고 있고 useEffect는 컴포넌트가 처음 렌더링 될 때 html 부분이 먼저 화면에 그려진 후 데이터가 실행되게 할 때 useEffect를 사용한다...까지만 이해하고 있습니다. 여기서 궁금한점이 첫번째로, useState는 제가 설명한대로만 사용하면 되는지 궁금합니다. 두번째로, useEffect는 이 안에 작성한 코드는 한번만 실행이 된다라고 하는데 이 한번만 실행이 된다라는게 무슨 말인지 그리고 useEffect안에 console.log()와 useEffect 밖에 console.log() 이렇게 했을 땐 뭐가 다른것인지 너무 헷갈립니다. 제가 아직 초보자라 정말 정말 쉽게 설명해주시면 너무 감사드리겠습니다. ㅜㅜ

react-query,

안녕하세요. 리액트쿼리 최신v5를 사용하면서 어려움에 처해 글을 남기게 되었습니다. 제가 만든 코드는 아래와 같습니다. Home.jsx (맨처음 데이터를 받아서 List에 뿌려주는 역할) const { data, error, isLoading } = useFilteredApartmentData(); console.log('home data',data) <List data={data.speechCommands} /> Search.jsx (사용자 검색) const { updateFilters } = useFilteredApartmentData(); //커스텀훅 const handleSubmit = (filter) => { updateFilters(filter); }; useFilteredApartmentData .jsx (훅) const useFilteredApartmentData = () => { const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["apartments", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); console.log("훅안에서 새로운데이터", data); const updateFilters = (newFilters) => { console.log(newFilters); setFilters((prevFilters) => ({ ...prevFilters, ...newFilters, })); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 저의 계획은 search.jsx에서 사용자의 검색을 받으면 훅의 updateFilters 를 실행시키고 useState가 바뀌니 useQuery의 재 시작과 함께 새로운 데이터를 받아 List에서 새로운 데이터를 뿌리는 것이었습니다. 그런데 console.log("훅안에서 새로운데이터", data); 이 부분도 새로운 데이터로 잘 찍히는데 문제는 Home.jsx 에서 console.log('home data',data) 이부분은 안찍히네요 결과적으로, 리스트의 변동이 없습니다. 혹시 아시는분 답변주시면 정말 감사하겠습니다 ㅠㅠ

리액트쿼리 데이터 리패칭 이렇게 하는거 아닌가요?

home.jsx const { data, error, isLoading } = useFilteredApartmentData(); <List data={data.result} /> 훅.jsx const useFilteredApartmentData = () => { const queryClient = useQueryClient(); const [filters, setFilters] = useState({ skip: 0, take: 15 }); const { data, error, isLoading } = useQuery({ queryKey: ["aaa", filters], queryFn: () => fetchFilteredApartmentData(filters), placeholderData: keepPreviousData, enabled: !!filters, }); const mutation = useMutation({ mutationFn: (filter) => { fetchFilteredApartmentData(filter); }, onSuccess: () => { queryClient.invalidateQueries({ queryKey: ["aaa", filters] }); }, }); const updateFilters = (newFilters) => { console.log(newFilters); setFilters(newFilters); mutation.mutate(newFilters); }; return { data, error, isLoading, updateFilters, }; }; export default useFilteredApartmentData; 여기서 처음에 데이터 패칭은 잘 이루어 지는데 fillter가 바뀌면 훅의 updateFilters 가 동작하여 새로운 데이터를 list에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

벨로그를 어떻게 유지하는게 좋을까요??

1년 전 처음 개발공부를 시작했을때부터 벨로그에 글을 올려와서 벨로그가 글 무덤이 되어버렸어요 ㅎ 지금이라도 재정비하는 시간을 가져아하는지 아니면 이대로 그냥 가도 될지가 고민입니다. 제 벨로그 주소입니다 https://velog.io/@sseohyun_0v0/posts 먼저 제 벨로그의 문제점은 다음과 같습니다 1. 표준화되어있지 않다 처음에는 별생각없이 쓰다보니 이미지도 없고 제목도 엉망진창입니다.. 2. 퀄리티가 낮은 글들이 많다 일단 가독성이 낮은 글이 많습니다 특히 초기에 작성한 글은 이모티콘 남발로 인한..^^ 도대체 무슨 글인지 안읽힐때가 많습니다. 3. 너무 기초적인 내용이 많습니다. 그리고 그런 글들은 기초적인 내용에서 끝납니다. - 공부를 시작할때부터 써와서 HTML태그와 HTTP 내용도 가득 담겨있습니다. 이런 글들이 읽는 사람으로 하여금 아니 이걸 모른다고..? 생각이 들게 하지 않을까. 걱정이 됩니다. 4. 글의 깊이가 떨어집니다. 제 수준에서는 강의도 보고, 책도 보고 인터넷도 참고하면서 정리했다고 생각했는데 몇달이 지나서 돌아보면 부족한 점이 많이 보이는 것 같습니다. 클론코딩을 하면서 적어둔 글들이 특히 그런데, 따라가는 것에 조급해서 클린코드나 복잡도는 신경을 많이 못쓴게 티가 많이 납니다. 초반에 적었던 글도 마찬가지이고요 5. 위 이유들로 인해 오히려 전문성이 떨어진다. 실제로 떨어지긴합니다. 최근 글의 수준이 딱 제 수준이 맞습니다. 그러나 예전에 작성했던 너무 기본적인 내용의 글과 깊이가 부족한 많은 글 때문에 오히려 저평가 될까봐 걱정입니다. 앞으로는 저는 어떻게 해야할까요? 1. 그냥 유지 한다. 2. 자신 있는 글들은 유지하고 나머지 글들은 지운다. 일년동안의 노력이 담긴글이라 아쉬운 마음도 있긴 합니다. 그러나 지우는게 맞다는 결론이 나면 무조건 지울 생각입니다. 3. 부족한 글들을 보완한다. 음... 이러면 가장 좋겠지만 현실적으로 어렵기도 합니다. 저는 기초를 다져나가는 중에 제 부족한 점을 발견하는 중이라서 보완할 점은 새로 작성하는 글에 담고 있습니다. 내가 잘못알고 있었던 점을 발견해도 해당 내용을 다시 찾아서 수정 보완하기에는 시간이 너무 많이 소요됩니다.. 또한 다른 분들이 생각하시는 좋은 개발 블로그에 대해서 궁금합니다.

Next.js axios patch메서드 cors error

현재 마이스터고 재학 중인 2학년 학생입니다. 학교에서 Next.js를 사용하여서 서비스를 만드는 프로젝트를 하고있습니다 이 프로젝트 중 서버와의 통신을 위한 axios를 customAxios로 만들었고 기존 put메서드로 수정 api를 호출했을 당시엔 요청이 갔는데 patch메서드로 하니 CORS에러가 계속 뜹니다. velog와 wrtn등을 이용하여 withCredentials: true도 줘보고 package.json에 "proxy"도 줘봤는데 계속 CORS에러가 뜨네요.. 혹시 몰라서 postman으로 호출했을때는 정상적으로 호출이 가는데 이 경우는 무엇이 문제일까요? 도와주시면 감사하겠습니다.. ㅠㅠ

개인 프로젝트 Git 관리

혼자서 게시판 프로젝트를 하려고 합니다. 국비학원에서 팀플할때는 일반적인 Git flow를 따라서 main - develop - feature (bugfix는 따로 하지 않았음) 이런식으로 진행했었는데 혼자서 할때도 feature까지 필요할까요? 일단 크게 Member와 Board를 develop 브랜치로 나누려고 합니다. 그 안에서 signup, login, logout, list 등 세부적인 기능마다 feature를 만들어야할지 아니면 그냥 develop 정도만 나누고 기능은 구현할 때마다 commit하면 될지 고민입니다. 혹시 너무 복잡해져서 꼬일까봐 걱정도 됩니다. (git 꼬이면 많이 힘들어지잖아요..ㅎ) 지금 이력서에 제출할 포트폴리오 용으로 만드는거라 면접관 관점에서 봐주시면 좋을 것 같습니다. 개인 프로젝트지만 git flow를 열심히 따랐다 vs 굳이 그렇게까지 필요하지 않다(중요하지 않다) 조언해주시면 감사하겠습니다.

콜백함수부분에 대해 질문있습니다.

안녕하세요 현재 자바스크립트를 공부하고 있는 초보자입니다. 현재 위치를 보여주는 코드를 작성하면서 궁금한 점이 생겼습니다. const askForLocation = function () { navigator.geolocation.getCurrentPosition((position) => { console.log(position); }); }; askForLocation(); 이러한 코드가 있는데 제가 알기론 ()=>{} 콜백함수에 매개변수로 position이 있고 제일 마지막에 askForLocation() 함수 호출하는게 있는데 이 함수 호출부분에서 인자로 아무것도 전달되는것이 없어서 console.log(position)를 했을 때 undefined가 나올 것을 예상했는데 geolocation의 객체정보가 콘솔창에 나오더라구요. 그래서 매개변수로 전달 될 만한것이 없는데 어떻게 콘솔창에 객체정보가 나오는지 궁금합니다. 초보자 입장에서 정말 쉽게 설명해주시면 너무 감사드리겠습니다.

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"); }

RCE 보안공격 질문입니다!

안녕하세요 백엔드 취업 준비생입니다 최근 프로젝트를 진행중에 배포서버를 구성해봤습니다 aws ec2에 docker compose로 nginx, WAS, redis를 컨테이너화해 동작시키고, nginx에 의해 3개의 WAS가 로드밸런싱 된 상태입니다(WAS 는 sping boot+spring security+JPA를 사용중입니다) route 53으로 Gabia에서 구매한 도메인을 연결해둬 도메인 접근을 허용해둔 상태입니다 배포 서버가 정상적으로 동작하는지 확인하기 위해 log를 보고 있었는데 이상한 요청이 보였습니다 요청 url에 `chmod 777`이라던지 `rm -rf`가 보여서 식겁해서 일단 서버는 내려뒀습니다 알아보니 RCE라는 공격 방식 같더라고요 그래서 RCE를 막는 최선의 방법이 무엇인지 궁금합니다 또 통상적으로 알고있으면 좋은 보안 방어 기법에는 어떤것들이 있을지 궁금합니다! (가능하면 AWS 과금이 없는방법이면 더 좋을거같아요 😊 😊)

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 를 가지고 있던데 어떤 차이점인지 궁금합니다. 답변주시면 정말 감사하겠습니다!!!

Docker Container에 실행중인 Jar에서 Logback

logback-spring.xml 파일을 작성하고, jar파일로 패키징해서 ec2에 도커로 서버를 띄워둔 상태입니다. 컨테이너에서 실행중인 java application에서의 file logging을 ec2 내부로 곧바로 할 수 있나요?

스프링부트 ServiceInterface에 요청문 작성

안녕하세요 MSA아키텍처를 적용한 개인프로젝트 진행중에 궁금한 사항이 생겨서 글 작성합니다 회원정보 수정을 한 뒤 수정이 정상적으로 완료되었을 때 클라이언트에 완료되었다는 메세지와 함께 로그아웃 메서드를 실행시키고 싶어서 public interface IUserInfoService { @PostMapping(value = "security/v1/logout") void logout(); } 이렇게 서비스 인터페이스에 작성을 해두고 컨트롤러에서 userInfoService.logout(); 으로 호출하여 실행하는데 권장되는 방법인지, 더 좋은 방법이 있는지 궁금해서 질문드립니다

호이스팅 관련하여 질문

TDZ: 선언위치부터 초기화되는 구간에서 호출 시 참조에러발생 (초기화 전 호출시 에러) 아래 예시에서 호이스팅에 의해 let a 가 먼저 실행되는건똑같은데 왜 1번은 언디파인드이고 2번은 참조에러인지 이해가안가네요. 특히 2번에서도 let a 는 호이스팅돼서 1번과 동일한 형태가 된다고 생각하는데, 확실하게 이해가안갑니다. 1. let a; console.log(a); a = 3; 2. console.log(a); let a = 3;

JS는 {변수}로 사용하면 객체가 나오나요?

React를 급하게 독학하고 있는데 JS 문법에서 막혀서 여쭤봅니다. 강의들 찾아보면 {}를 사용해서 변수처럼 쓸 수 있는데 (ex. <div>{contents}</div>) 이걸 JS 표현식이라고 해서 JS 문법이라고 들었습니다. 일반적으로 객체를 변수에 할당시키면 리터럴이 아니라 주소가 담기잖아요. 왜 a를 찍는데 객체 리터럴이 보이고, {a}를 하면 객체 value로 객체가 들어가는 것처럼 표현되나요? 이 개념 찾아보고 싶은데, 뭐라고 검색해야 되는지 막막합니다... -------------------------------- let a = {a:"asfd", b:"erw"}; let b = "ast"; console.log(a); // 출력1: { a: 'asfd', b: 'erw' } console.log(b); // 출력2: ast console.log({a}); // 출력3: { a: { a: 'asfd', b: 'erw' } } console.log({b}); // 출력4: { b: 'ast' } 위 코드는 myCompiler에서 실행해봤습니다. https://www.mycompiler.io/ko/new/nodejs

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