#state

react, rn 리스트 엔트리 구현시 원본 리스트를 수정하는 함수 최적화가 고민됩니다..

리스트 A 엔트리 컴포넌트 B A를 수정하는 함수 C 이렇게 있을 때 B에서 A를 수정해야 하는 상황입니다. 모바일 환경이라 최대한 엔트리 B를 최적화 하고 싶은데 memo를 해야할 때 함수C는 어떻게 최적화 해야할까요 A에 선언하면 A의 최신 값을 얻기 위해 C가 변경될 때 마다 B또한 C의 변경에 의해 재렌더링 될 것이니 기존에는 이런 재렌더링을 막기위해 setA( (prevA) => { ... } ) 와 같은식으로 setA 내부의 callback으로 A의 최신값을 사용해서 A를 C의 의존성 배열에 추가하는 것을 피해왔는데 수정시 api의 res data를 사용할 일이 생기니 setState내에서는 async await 사용이 불가능해서 질문드립니다... 바보같은 저에게 단비 같은 가르침을 내려주세요..

MacBook에서 Windows Docker 서버 접속 시 sudo가 필요한데 원인이 뭘까요?

문제 현재 Windows 데스크톱과 MacBook을 사용 중이며, 두 기기는 동일한 로컬 네트워크에 연결되어 있습니다. - 데스크톱(Windows): 유선 랜(Ethernet)으로 연결 - MacBook: Wi-Fi로 연결 Windows 데스크톱에서 Docker를 이용해 로컬 웹 서버(포트 9000)를 실행 중입니다. 컨테이너는 -p 9000:9000 옵션으로 실행되었으며, 0.0.0.0:9000에서 요청을 받을 수 있도록 설정되어 있습니다. 데스크톱에서는 Chrome를 통해 정상적으로 웹 인터페이스에 접속할 수 있습니다. 그러나 MacBook의 Chrome에서 접속하면 페이지를 찾을 수 없다고 합니다. 이상하게도,,, Chrome을 sudo로 실행하면 페이지가 정상적으로 로드됩니다. 추가 정보 - 데스크톱(Windows)과 MacBook은 같은 서브넷에 속해 있습니다. - 웹 서버는 0.0.0.0:9000에서 요청을 받을 수 있도록 설정되어 있어, 다른 기기에서도 접근 가능해야 합니다. - MacBook에서 nc -zv <데스크톱-IP> 9000을 실행하면 포트가 열려 있음을 확인했습니다. - Python 코드에서 requests.get("http://<데스크톱-IP>:9000")을 실행하면, 일반 실행 시 실패하지만 sudo로 실행하면 정상적으로 작동합니다. - MacBook에는 단 하나의 사용자 계정만 존재하며, 해당 계정은 관리자(Admin) 권한을 가지고 있습니다. - macOS 방화벽은 비활성화되어 있으며 (/usr/libexec/ApplicationFirewall/socketfilterfw --getglobalstate로 확인), sudo pfctl -d로 pf 방화벽을 꺼도 문제가 해결되지 않았습니다. 현재까지 파악한 내용 sudo로 실행하면 정상적으로 동작하기 때문에, 현재 문제는 네트워크 연결 자체의 문제가 아니라 macOS의 보안 정책 또는 네트워크 제한과 관련된 것이 아닐까,, 생각하고 있습니다. 해결하고 싶은 질문 - 왜 Chrome을 sudo로 실행해야만 웹 서버에 접속할 수 있을까요? - 왜 일반 사용자 권한으로 실행한 Python의 requests.get() 요청이 차단되고, sudo를 사용해야만 정상적으로 동작할까요? - macOS에서 일반 사용자 프로세스의 네트워크 접근을 제한하는 정책이 있는 걸까요? 있다면 어떻게 해결할 수 있을까요? 스크립트에 모두 sudo를 붙이면 문제가 해결되긴 합니다만,, 명확한 원인이 궁금합니다. 혹시 비슷한 경험을 하신 적이 있는 분이 계시다면 조언 부탁드립니다! 혹은 힌트 키워드라도 던져주시면 감사하겠습니다!

1년차 신입개발자 고민있어요

제가 약 10개월 정도 SI 회사에서 프론트엔드 개발자로 재직중입니다. 고민은 얼마전 react 프로젝트를 마치고 vue를 처음 시작해보면서 state 변화 감지에 대해 사수에 질문을 했었습니다. 그렇지만 제 예상과는 달리 잘 모르겠다는 말과함께 다른방식으로 접근해보는게 어떻냐는 답변을 받았습니다. 그래서 수긍을 하고 고치는 찰나 방법이 무조건 있을것같다는 생각에 구글링과 챗지피티를 통하여 단순히 computed 연산을 사용하면 된다는 것을 알았습니다. 아무리 함께 성장하는 회사이고 하더라도 이게 맞는가 싶은생각이 들었습니다. 사실상 제 사수는 백엔드 경력이 더 많고 회사에 프론트엔드 개발자가 저와 제 사수뿐입니다. 저는 저의 기술적 성장도 하고싶고 여럿 기술을 어깨넘어 배우시고 싶지만 요즘은 제가 프론트 지식을 더 많이 알고있을수도 있다는 생각이 듭니다... 점점 갈수록 사수에 대한 불신이 커지는 시점에 이직이 옳을까요??

React 리렌더링 질문있습니다.

안녕하세요. React를 사용하는 프로젝트에서 테이블을 생성하여 editable 가능하도록 개발하고 있습니다. 해당 테이블에 input도 있고 switch 기능도 있습니다. editable 테이블의 경우 전체 테이블 값을 다 받아서 업데이트 하는 형식입니다. 원래는 ref를 사용해서 진행하려고 했는데 input 과 switch 가 동시에 있어서 row 단위에 값을 받을 때 문제가 발생됩니다..(rows state 와 ref 와 데이터 불일치가 발생됨) 저는 input 에 1글자 쓸 때마다 리렌더링 되는게 안좋다고 생각해서 ref를 사용한건데 그냥 rows state만 사용하고 memo로 리렌더링을 줄이는게 맞을까요? 고견부탁드리겠습니다(_ _)

Next.js 와 데이터 패칭 관련 React Query SSR

안녕하세요. Next.js 13.4 버전으로 개발중인 주니어 개발자입니다. SSR 관련해서 처음 접하고 개발중인데 Data Fetching 부분에서 조금 이론과 실무 모두 조금 막혀있습니다. 다름이 아니라 서버 컴포넌트/클라이언트 컴포넌트 이렇게 2개로 나뉘는데 accessToken 사용 떄문에 axios를 사용중입니다. 그래서 마이페이지 를 구현중에 데이터를 불러와서 뿌려주는 부분을 구현중인데 클라이언트 컴포넌트에서 useEffect 안에서 불러오면 한 박자 느리게 데이터가 뿌려져서 이질감이 있습니다. 그래서 서버컴포넌트에서 prefetch 해서 react query 사용해서 hydration 방식으로 직렬화 해서 내려주고 클라이언트 컴포넌트에서 const { data } = useQuery(['querykey'], () => queryFn) 형태로 사용해서 뿌려주고싶은데 여기서 이 'data'는 useState에 할당을 못하나요? 마이페이지 데이터 수정시에는 어떻게 활용을 해야되는건지 잘 모르겠습니다...

ios18 popstate 적용

Ios18 업데이트 이후 popstate 적용 안되는 분 계신가요???... window.addEventListener('popstate', function (event){}

파이참 관련 질문드립니다

import pandas as pd import pyautogui score_A = 0 #쾌락 score_B = 0 #사회적환경 score_C = 0 #보복심리 question1 = pyautogui.prompt('난 가정 폭력을 당한적 있다.') #질문1 if question1 == "o": #만약 질문1에 맞다고 대답 한다면 score_B += 1 #환경에 1점 추가 score_C += 1 #보복심리에 1점추가 question2 = pyautogui.prompt('난 학교 폭력을 당한적 있다.') #질문2 if question2 == "o": #만약 질문2에 맞다고 대답한다면 score_B += 1 #환경에 1점추가 score_C += 1 #보복심리에 1점추가 question3 = pyautogui.prompt('난 여아가 이성적 으로 좋다.') #질문3 if question3 == "o": #만약 질문3에 맞다고 대답한다면 score_A += 1 #쾌락에 1점추가 question4 = pyautogui.prompt('난 살인을 할때 쾌락을 느낀다.') #질문4 if question4 == "o": #만약 질문4에 맞다고 대답한다면 score_A += 1 #쾌락에 1점추가 question5 = pyautogui.prompt('나의 범죄는 충동적 이였다.') #질문5 if question5 == "o": question6 = pyautogui.prompt('난 반 사회적 인격 장애를 진단 받은적 있다.') #질문6 if question6 == "o": #질문6에 맞다고 대답한다면 score_A += 1 #쾌락에 1점추가 score_C += 1 #사회적환경에 1점추가 question7 = pyautogui.prompt('나의 인간관계는 좋지않다.') #질문7 if question7 == "o": #질문7에 맞다고 대답한다면 score_B += 1 #사회적환경에 1점추가 question8 = pyautogui.prompt('난 예전에 아동범죄 피해자였다.') #질문8 if question8 == "o": #만약 질문10에 맞다고 대답한다면 score_C += 1 #보복심리에 1점추가 question9 = pyautogui.prompt('나의 범죄는 계획적이였다.') #질문9 if question9 == "o": #질문9에 맞다고 대답했을때 if question5 == "o": #질문5에도 맞다고 대답한다면 print("설문자가 솔직하게 문항에 답하고있지 않습니다.") #설문자가 제대로 설문에 응하고 있지 않다고 판단. answer_list = [] answer_list.append(question1) answer_list.append(question2) answer_list.append(question3) answer_list.append(question4) answer_list.append(question5) answer_list.append(question6) answer_list.append(question7) answer_list.append(question8) answer_list.append(question9) answer_list.append(question10) print(answer_list) survey_dict= {'문항번호': [1,2,3,4,5,6,7,8,9,10], '내용': answer_list, } survey_df = pd.DataFrame(survey_dict).set_index("문항번호") print(survey_df) 이 코드에서 IndentationError: expected an indented block after 'if' statement on line 23 이런 오류코드가 뜨는데 어떤 이유때문일까요?

파이참 관련 질문 드립니다.

IndentationError: expected an indented block after 'if' statement on line 23 이 오류코드가 뜨는 이유가 뭘까요?

React Next infinite scroll

A 라는 infinite scroll페이지에서 500개 데이터를 보여주고 scroll은 70프로 내려왔다고 가정했을 때 다른 페이지 갔다가 돌아왔을 때 500개 데이터랑 scroll 위치 그대로 유지하는 좋은 방법 뭐 있을까요? localstorage나 context 이용했을때는 dom을 다시 랜더링하고 state 값을 다시 주입 했을 때 부드럽지 않은 느낌입니다. redux를 이용해서 전역으로 상태값을 저장해 놓고 컴포넌트에서 사용하면 될까요?

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

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

리덕스에 대해 궁금한점이 있습니다.

안녕하세요 리덕스에 대해 여쭤볼게 있습니다. 리덕스를 사용하면 state를 부모에서 자식으로 계속 내려주는 방법으로 하지 않고 필요한 컴포넌트에 바로 state를 전달 할 수 있다...라고 이해를 했습니다. 여기서 궁금한점이 예를 들어 데이터를 저장하는 state도 있고 모달창을 할때 사용하는 state도 있을텐데 모든 state를 리덕스로 만드는건가요? 아니면 어떤 state만 리덕스로 저장해서 사용하면 되는지 쉽게 알려주시면 너무 감사드리겠습니다.

서로 다른 front end 합치기

Vue로 작성된 a 라는 페이지에서 일부를 React로 작성된 b 라는 페이지를 보여주려면 어떻게 해야 되나요? gpt 물어보니 아래처럼 알려주던데 usestate나 그런 javascript가 잘 실행 안될까봐 걱정이네요

리액트에서 스크롤로 opacity 조절할때, ref vs opacity

안녕하세요. 리액트로 스크롤할 때 opacity를 조절하는 기능을 만들고 있습니다. 이 컴포넌트에는 작성자, 이미지 등 다양한 값들이 존재하는데요. 스크롤할 때는 style의 opacity만 변경됩니다. 그렇다보니.. 굳이 리렌더링을 트리거하는 state로 이걸 관리해야되나 싶긴한데요. 이런 상황이라면 다들 어떻게 개발하시나요?

객체 depth가 깊은 경우 ... 연산자로 복사하면 안좋나요?

안녕하세요. react를 공부 중인 초보자입니다. 현재 recoil 사용하여 recoil state에 객체로 state를 사용하고 있습니다. 그런데 input에서 onChange 이벤트로 state를 변경할 때, 객체의 depth가 깊다면 ... 연산자로 복사하면서 가는게 안좋나요? 예를들어 setState(prev => ({ ...prev, [name]: { ...prev[name], data: { ...prev[name].data, value: value } }, })); 이런 식으로 update 할 경우 ... 연산이 너무 많아져서 비효율적 인가요? 해당 input의 data가 다른 페이지에서 사용 되진 않고 다른 페이지를 갔다 와도 (컴포넌트 이동) 입력된 정보가 남아 있도록 recoil state에 관리하고 있습니다. 초보적인 입장에서 input에 입력 할 때마다 이렇게 하는 건 손해 같아서, input value를 컴포넌트에서 ref로 따로 관리를 하고, useEffect에서 clenup 으로 한번만 setState 하는 방식이 어떨까 하는 의문이 생깁니다. 객체 깊이가 깊어 ... 연산이 많아지는 경우 onChange에서 관리하면 성능적으로도, 클린 코드 (가독성) 면에서도 별로 일까요?

안녕하세요.. 정말 이것저것 다 해봤는데 안되네요 ㅠ

안녕하세요. 리액트와 리액트 쿼리를 이용해 프로젝트를 진행 중 입니다. 저는 일단. src/hooks/useProduct.jsx 라는 커스텀 훅 을 만들었습니다. 제 계획은 1. 맨 처음 최상단 Home.jsx 에서 useProduct 라는 커스텀 훅 호출 2. 자식컴포넌트에 data를 전달 3. Search.jsx에서 받은 filter값으로 커스텀 훅 안의 query 재실행 4. 바뀐 상태는 Home.jsx 가 다시 받고 자식 컴포넌트에게 전달. 1~3까지는 콘솔찍어가면서 잘 되는데 4.는 되지 않습니다. (쿼리 데이터가 바뀌어도 4이 재 실행이 안됨..) ㅠㅠㅠㅠㅠㅠㅠ 쿼리 옵션도 줘보고 전역 상태도 만들어보고 이것저것 다 해봤는데 ㅠㅠ 혹시 아시는분 계신가요..? 어떠한 답변도 정말 감사히 받겠습니다 간략 코드첨부) Home.jsx const Home = ()=>{ const { data, error, isLoading } = useProduct(); return ( <Search /> <List data={data?.product} /> ); }; export default Home; Search.jsx const Search = () => { ```일부코드생략``` const { updateQuery } = useProduct (); const handleSubmit = () => { const searchData = { productId }; updateQuery(productId); }; } return( ```일부코드생략``` <button onClick={handleSubmit}> 조회 </button> ) } export default Search; useProduct.jsx const useProduct = () => { const [queryData, setQueryData] = useState(); const { data, error, isLoading } = useQuery({ queryKey: ["product", queryData], queryFn: () => fetchProduct(queryData), }); const updateFilters = (queryData) => { setQueryData(() => (queryData); }; return { data, error, isLoading, updateQuery , }; export default useProduct ;

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에 다시 뿌리려고하는데 화면에 변화가 없습니다 ㅜㅜ 이렇게 하는거 아닌가요??

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

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

react 전역 상태 관리 도구 사용

안녕하세요~! 최근에 프론트엔드를 배우게 되어서 여쭤봅니다.. react 를 사용하면서 props drilling 을 겪고, 복잡한 코드가 되어 가는 중입니다. 궁금한 점은 zustand를 전역 상태 관리 도구로 사용하고 있는데 zustand를 어떻게 사용해야 잘 사용하는 것 일까요? 렌더링을 조금 깔끔하게 하고 싶어서 문의드립니다. 상황에 따라 다르겠지만 zustand를 많이 써서 state를 store 형태로 보관해서 사용하는게 좋을까요? 전문가들의 고견 부탁드립니다.(_ _)

변수와 state에 대해 질문있습니다.

자바스크립트와 리액트를 현재 공부하고 있는 중인데 변수인 let, const에 대한 부분과 리액트에서 useState에 대한 부분의 설명을 듣고 문법적인 부분은 이해는 했는 상황인데 제가 직접 혼자 코드를 작성을 해보려고 하니 변수와 useState를 어떨때 작성을 하면 되는지 감이 잘 오지 않더라구요. 그래서 혼자 코드를 작성을 할 때 이럴때 변수 또는 useState를 작성하면 되겠구나하고 정말 쉽게 이해할 수 있는 방법이 있을까요? 있다면 쉽게 설명해주시면 너무 감사드리겠습니다.

왜 이렇게 나올까요 ㅠㅠ 도와주세요 ㅠㅠ

Fatal Python error: init_import_site: Failed to import the site module Python runtime state: initialized Traceback (most recent call last): File "<frozen importlib._bootstrap>", line 1176, in _find_and_load File "<frozen importlib._bootstrap>", line 1147, in _find_and_load_unlocked File "<frozen importlib._bootstrap>", line 690, in _load_unlocked File "<frozen importlib._bootstrap>", line 980, in exec_module File "<frozen site>", line 626, in <module> File "<frozen site>", line 612,

Next.js 질문

아직 next의 개념을 잘 몰라서.. 혼란스러움에 질문드립니다..ㅠㅠ 전역상태에서 state를 꺼내서 사용하거나 react-query, pagination같은것들은 모두 csr로 변경해서 코드를 짜야하던데 그러다보니 page가 거의 use client로 도배되었는데요… 그럼 SSR의 장점들을 모두 잃어버리는건가요…? getStaticProps나 getServerSideProps들을 사용해서 이러한 문제들을 해결할 수 있다는데, 이것들로 해결해야하는걸까요..? 🥲

타입스크립트 타입지정

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

리액트 리랜더링 질문

안녕하세요! 제가 개발중에 문제가 생겼는데 혹시 아시는분이 계시면 답변해주시면 정말 감사하겠습니다. 저는 녹음기능을 구현하고 있습니다. A(부모) 컴포넌트에서 상태를 정의하였고 const [mice, setMice] = useState(false) 자식컴포넌트인 A_1, A_2 에게 props로 상태를 넘겨줍니다. A_2에는 시작과 중지 버튼이 있는 컴포넌트 이고 시작버튼을 누르면 setMice를 true로 증지 버튼을 누르면 setMice를 false로 만드는 역할을합니다. A_1은 props로 전달받은 mice에 따라 mice가 true면 녹음내용을 화면에 뿌리고, mice가 false면 녹음을 중지합니다 문제는.. A_2에서 녹음 중지를 누르게 되면 mice가 false가 되고 A_1이 리랜더링 되면서 기존의 커서위치를 초기화 시키는 문제가 있습니다. 이걸 어떻게 해결해야할까요? 글을 좀 못쓴거같은데 읽느라 고생하셨습니다 ㅠㅠ

리액트 투두리스트 체크박스

리액트로 투두리스트를 만들어보고 있는데 삭제 기능은 filter() 메서드로 구현하였고, 체크박스는 input에 css :checked로 구현하였습니다. 문제는 첫번째 항목을 체크하고 난 후에 리스트 앞부분에 새로운 항목을 추가해도 체크박스는 항상 첫번째 항목에 체크되어 있습니다... 인풋 박스를 독립적으로 빼서 컴포넌트로 사용하면 개별로 적용될거 같았는데 결과는 같았고, state로 체크 된 항목을 따로 관리해봤는데 그거또한 결과가 같았습니다...ㅠㅠ 리스트의 key는 map의 index로 사용하고 filter()로 삭제 기능을 구현하니 키는 마지막 순서만 삭제되면서 재렌더링으로 리스트가 변경되서 체크박스가 개별로 적용이 안되는것으로 예상이 됩니다만 너무 어렵네요ㅠ.. 구체적으로 도와주시면 감사하겠습니다ㅠㅠㅠ코드는 첨부했습니다!

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

Next와 React-query의 prefetch에 대해

안녕하세요 ! Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다. Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다. 1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다. 2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다. 현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다. 이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, 'use client' 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 "Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ?" 라는 의문이 생겼습니다. 제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ? 또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ?

사용자 등급에 따라 다른 화면을 보여주고 싶어요.

Next.js 14버전을 사용하고 있습니다. 홈페이지에 접속했을 때, 사용자의 로그인 상태 여부에 따라 각기 다른 컴포넌트를 보여주고 싶습니다. const Main = () => { const isLogin = useRecoilValue(loginStatus); const user = useRecoilValue(userAtom); return ( <> <AuthWrapper> {isLogin && user ? <Login/> : <Logout />} </AuthWrapper> </> ) }; export default Main; isLogin과 user는 로그인 여부와 회원 정보에 대한 전역 변수입니다. isLogin의 default값은 false이고, user의 경우 isLogin이 true일 때만 존재합니다. (로그인 상태일 때 해당 유저 정보를 api로 호출) 그리고 <AuthWrapper>를 통해 해당 전역 변수들을 업데이트 해줍니다. 제가 원하는 건 최초 페이지 접속 시에 AuthWrapper를 통해 state값을 초기화해주고, 이에 알맞게 컴포넌트가 렌더링 되는 것입니다. 하지만 isLogin의 default값이 false이기에 로그인 상태일 경우, 순간적으로 Logout컴포넌트가 출력되었다가 AuthWrapper에서 검증 후 state값이 변경되면 Login컴포넌트가 출력됩니다. 이 순간적인 깜빡임을 없애고 바로 동작할 수 있게 하는 방법이 있을까요? +) 추가로.. 서버 사이드에서 처리하기에는 AuthWrapper 내부에서 storage값을 사용하거나 useEffect등을 사용하기에 불가능했습니다.