https://github.com/sjk990515/modalTodo (깃허브 파일 링크) GitHub - sjk990515/modalTodo Contribute to sjk990515/modalTodo development by creating an account on GitHub. github.com 반응형 투두리스트 실행방법 1. 다운로드하신 후 파일로 들어가 터미널을 연 후 npm i 로 필요한 파일을 설치해 줍니다. (사용 기술 : react, typescript, react-query, axios, json-server, styled-components, react-router-dom, styled-reset, uuid) 2. 파일 안에 터미널을 추가로 한 개 더 연 후 하나는 npm star..
웹페이지가 브라우저에 랜더링되는 과정 도메인 이름 확인: 브라우저는 DNS(도메인 이름 시스템)를 사용하여 URL을 IP 주소로 변환하여 요청을 보낼 위치를 알 수 있습니다. HTTP 요청: 브라우저는 웹 페이지에 대한 HTTP 요청을 서버로 보냅니다. 서버 응답: 서버는 웹 페이지를 표시하는 데 필요한 HTML, CSS 및 JavaScript 코드가 포함된 응답을 브라우저로 다시 보냅니다. HTML 구문 분석: 브라우저는 HTML 코드를 구문 분석하여 페이지의 DOM(문서 개체 모델)을 만듭니다. 렌더링: 브라우저는 DOM과 CSS를 사용하여 페이지를 렌더링하고 사용자 화면에 표시합니다. Restful API에 대해, GET,POST 외에 메소드와 그 기준, RESTful API 가 아닌 것들에 대해...
SteamPlus 프로젝트 링크 (https://steam-plus-theta.vercel.app/) Steam Plus steam-plus-theta.vercel.app 🏡 아키텍쳐 🎲기술적 의사 결정 사용기술 기술 설명 recoil 리코일은 매우 간단한 코드로 상태를 관리할 수 있습니다. 리덕스와 비교해 상태를 업데이트하기 위해 액션 타입, 액션 생성자, 리듀서를 작성할 필요가 없으며, 상태 업데이트 로직을 작성할 때도 상태 객체 자체를 직접 수정할 수 있었습니다. socket.io Socket.io는 다양한 이벤트를 지원하여 클라이언트에서 서버로 데이터를 전송하고 서버에서 클라이언트로 데이터를 전송할 수 있습니다. 이러한 특징으로 인해, Socket.io는 실시간 채팅기능을 구현하는 데 매우 유용합..
깃 잔디가 안심어진다.. 그동안 소스트리와 터미널을 이용해 깃을 사용해왔다. 그중 소스트리가 대부분을 차지했는데 깃 잔디가 제대로 심어지지않는 문제가 있었다. 알아보니 소스트리의 아이디와 깃의 아이디가 달라서 잔디가 심어지지 않는 것이였다. 일단 깃 작성자를 바꾸는 방법은 터미널에 이런식으로 코드를 작성하면 된다. old email에는 내 전 이메일을넣고 correctname에는 바꿀 이름을 넣어주면 그동안의 커밋을 찾아서 작성자를 바꿔준다. git filter-branch --env-filter ' OLD_EMAIL="your-old-email@example.com" CORRECT_NAME="Your Correct Name" CORRECT_EMAIL="your-correct-email@example.c..
친구 채팅 알림 (트러블 슈팅) 지난번에 만든 친구 채팅의 알림이 각각 왔으면 좋겠다는 생각이 들었다. 그래서 처음에는 온 채팅이 state에 배열의 형식으로 들어가는데 그것의 친구 id를 filter해서 해당 친구에게 알림이 얼마나 왔는지 length를 구해주었다. 그런데 이렇게 하니까 실시간으로 알림이 오기는 하지만 친구 채팅방에 들어가도 알림이 사라지지않고, 들어갈때 알림이 사라지게 하더라도 친구와 채팅을 하는 중임에도 알림이 오는 일이 발생하였다. 그래서 다시 로직을 짜게 됐다. 생각한 방법은 친구에게 온 채팅을 추가해주는 state이외에 다른 알림용 state를 또 만들어 그곳에 추가해 주는 것이였다. 추가해 준 후 똑같이 상대 id를 filter해서 length를 보여주었고 달라진 점은 해당 ..
CORS 배포 공개 api를 가져와서 사용할때 혹은 node.js socket.io 서버를 배포했을때 cors문제로 데이터를 못 가져오는 문제가 있었습니다. 그래서 개발을 할때에는 heroku cors 데모 서버(https://cors-anywhere.herokuapp.com/corsdemo)와 구글 익스텐션을 사용하여 개발을 했었습니다. 이렇게 하면 위에 것을 설치한 개발자만이 사용할 수 있게 되기 때문에 배포할때 문제가 생길게 예상됐습니다. 그래서 배포할때에는 cors를 해결해 줄 수 있는 서버를 따로 배포하여 api 혹은 node서버를 우회 시켰습니다. cors서버를 배포후 사용하는 법은 아래처럼 사용하면 뒤에 있는 주소의 cors문제를 해결할 수 있었습니다. `${cors우회서버}/www.nave..
친구기능 트러블 슈팅 문제 친구 로직은 useQuery를 사용해 불러온 데이터를 상황에 맞게 filter해주고 useMutation으로 친구 요청, 수락, 삭제등의 이벤트가 일어나는 구조 입니다. 친구 로직 에서 친구 요청 혹은 수락, 삭제, 취소를 누르면 바로 렌더링이 안되는 문제가 있었고 상대방 입장에서도 새로고침을 하지않는 이상 친구 요청 온게 바로 보이지 않았습니다. 해결 방법 문제를 해결 하기 위해 우선 useMutation안의 이벤트가 일어난 후 작동하는 onSuccess에 refetchQueries혹은 invalidateQueries를 사용해 요청을 누른 유저 입장에서 바로 업데이트 해줬습니다. 그리고 요청이 오는 상대방 입장에서 바로 확인 할 수 있게 socket.io를 사용해 이벤트를 클..
socket.io 친구 개인 채팅2 어제 것을 이어서 하면 일단 서로의 소켓 방은 연결이 됐다. 이제 서로 채팅을 보내줘야 하는데 일단 react로 채팅방은 미리 만들어줬다. 그리고 input에 값을 넣어 보낼 때 일어날 함수를 만들어줬다. 보낼 정보를 만들어 준 후 socket에 보내줬다. 보낼 정보엔 방 이름도 넣어서 보내줬다. const chatInputOnSubmit = (e: any) => { e.preventDefault(); //빈칸 예외 처리 if (textInput === "") { return; } //채팅으로 보낼 시간 const now = new Date(); const hours = now.getHours(); const minutes = now.getMinutes(); const..
