포시코딩

https://adhithiravi.medium.com/why-you-dont-need-redux-anymore-ed75da418936 Why You Don’t Need Redux Anymore? Redux has been tied with React projects for many years now. I even see job postings for React, that require Redux experience and knowledge… adhithiravi.medium.com 1. Local state 2. Props 3. React Context 4. React Query

개요 pressEnterHandler(e)}/> function pressEnterHandler(e) { if (e.key === "Enter") { console.log('pressEnterHandler 실행'); test(); } } function test() { console.log('test'); } 위와 같은 코드를 사용할 때 input에서 엔터를 누르면 이렇게 두 번씩 실행되는 에러를 경험했다. 이리저리 다양한 방법으로 시도해보았는데 해결할 수 없었고 검색을 하다보니 한글 입력 시 이런 현상이 있다는 사실을 알게 되었다. 확인해보니 숫자나 영어 입력 시에는 정상 작동을 하는 것을 확인할 수 있었다. 해결 방법 https://github.com/vuejs/vue/issues/10277#issu..

개요 React에서 무한스크롤 구현할 일이 있어 여기저기 검색해봤는데 나오는 블로그마다 죄다 어렵게만 설명하고 있어서 답답해가지고 내가 직접 간단하게 구현해본 방법을 공유해본다. fetcher, React query, Throttle 이딴거 죄다 필요없다. JavaScript에서 기본 제공하는 Intersection Observer API를 통해 구현하는 법을 알아보자 React가 아닌 일반 JS에서 구현하는 방법을 아래 참고 https://4sii.tistory.com/377 [IntersectionObserver] 무한 스크롤 (Infinite scroll) https://github.com/10-10-gaza/wonbin GitHub - 10-10-gaza/wonbin Contribute to 10..

https://anerim.tistory.com/221 [리액트 React] 리액트 로딩화면(스피너) 추가하기 / api 호출 시 로딩화면(스피너) 넣기 안녕하세요. 디자인도 하고, 개발도 하는 '디발자 뚝딱'입니다. 이번 포스팅에서는 리액트에서 api 호출했을 때 로딩화면/스피너 넣는 방법에 대해 공유하겠습니다. 어렵지 않으니 차례대로 따라 anerim.tistory.com 여기서 나온 방법 그대로 따라하면 완성

문제 발견 // 설명을 위해 요약된 코드 state.group.members.map((member, i)=>{ {test(e)}} value={member}/> }) redux state에 members 라는 Object Array가 있고 거기서 하나씩 꺼내 input value에 넣어줬는데 클라이언트든 서버든 계속 object Object로 출력되고 안에 내용을 꺼낼 수도 없는 상태가 되버려 한참을 헤맸다. 해결책 도출 value 값에 JSON.stringify()로 넣어주기 꺼내온 값을 value에 그대로 박아 넣는 과정에서 문제가 생긴거라 판단해 JSON.stringify로 감싸봤다. state.group.members.map((member, i)=>{ {test(e)}} value={JSON.st..

적용이유 더보기 리액트를 쓰는 프론트에서 node인 백으로 요청을 보낼 때, 개발환경이다보니 똑같은 /list GET 요청임에도 구동하는 컴퓨터일 경우엔 localhost:8080/list 개발 및 구동은 노트북으로 하면서 데스크탑으로 페이지 확인만 하는경우 노트북ip:8080/list build 해서 볼 경우엔 그냥 /list 이런식으로 다 달라지는데 /list 만 아니라 /login 등등 아직 페이지가 몇개 없어서 그렇지 그때그때 수정해줘야하는 곳이 있어서 워낙 귀찮다는 느낌을 받았다. 여러방법을 찾아봤는데 concurrently 를 쓰는 방법은 아닌거같고 예전 회사에서 했었듯이 env 파일에 개발환경, 테스트환경, 배포환경마다의 서버주소를 다르게 세팅할까 했는데 찾아보니 훨씬 사용하기 쉽게 되어있..

function getList(){ let session_user = JSON.parse(localStorage.getItem('session_user')); axios.get('http://localhost:8080/list', { _id: session_user._id, }).then((result)=>{ console.log(result.data); }).catch(()=>{ console.log('axios 통신실패') }) } app.get('/list', (req, res)=>{ let _id = ObjectId(req.body._id); db.collection('group').find({ members: { $elemMatch: { _id: _id} } }).toArray().then((r..

상단 목록이 모여있는 Navs.js 파일에서 사용하지 않는 let navigate = useNavigate(); 코드가 있는거 때문에 useEffect() 안에서 사용해달라는 제일 위 노란 바탕의 경고가 떠있는 상태로 작업을 진행중이었다. 간단한 코드수정 후 react 의 자동 재렌더링이 되고나니 갑자기 이런 에러가 무한으로 발생하였다. 당장은 useNavigate() 가 Navs.js 에서 사용하지 않는 코드라 제거 후 작업중인 상태다. 추후 Navs.js 이기 때문에 무조건 사용할 날이 올거니깐 그 때 제대로 해결방법을 확인할 생각 내 생각엔 useEffect() 를 통해 렌더링이 이루어진 후 진행되어야될 상황이 코드 수정으로 인한 재렌더링이 되고, 되는 와중에 뭔가 진행되어 꼬여버린 케이스가 아닐까..

상품명 상품설명 상품명 상품설명 상품명 상품설명 이렇게 반복되는 코드를 state 값으로 반복문을 돌리는 과정중에 img 태그 src 에 넣을 값중 숫자 부분만 바꾸면 되는걸 못해가지고 한참 헤맸다. ``도 써보고 다 해봤는데 안됨.. 결국 영어로 구글링하다 발견한 내용을 적용하니 해결했다. 아래는 중복되는걸 정리한 코드 { shoes.map((a, i)=>{ return ( {shoes[i].title} {shoes[i].content} {shoes[i].price} ) }) } template literals `` 중괄호 {} 값 앞에 $ 표시 3가지가 위와같이 다 들어갔을 때 비로소 값이 제대로 표기가 된다. *추가내용 이 코드를 다시 컴포넌트화 시켜보았다. { shoes.map((a, i)=>{ ..