본문 바로가기

분류 전체보기

 (396)
왜 axios, SWR와 같은 라이브러리를 사용하면서 별도로 Socket을 사용해야 하나? 출처: GPT, https://velog.io/@somday/RESTful-API-%EC%9D%B4%EB%9E%80 (rest api에 대하여) 요약: 실시간 통신과 같은 상호 작용 유형이 아닌 자원을 제어해야만 하는 상호 작용 유형(RESTful API)을 위해 Socket.io가 아닌 axios를 별도로 사용해 주어야 하는 것이다. 소켓과 Axios의 차이점: 웹소켓은 TCP연결을 통해 실시간 완벽한 양방향 통신 채널을 제공한다(기존의 HTTP에 양방향 통신을 가능하게 한 것이 웹소켓이다). Axios는 브라우저와 Node.js를 위한 약속 기반 HTTP클라이언트이다. 소켓같은 경우 실시간 양방향 통신(real time full duplex communication)을 허용하여 어떤 반응을 기대하지 ..
웹 소켓에 대하여(ing) 참고: https://www.youtube.com/watch?v=MPQHvwPxDUw 웹 소켓이란? 두 프로그램 간의 메시지를 교환하기 위한 통신 방법 중 하나이다. 또한 표준 프로토콜 중 하나임.
Script태그에 대하여 참고: https://shape-coding.tistory.com/entry/JavaScript-Script-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9C%84%EC%B9%98%EB%8A%94-%EC%96%B4%EB%94%94%EA%B0%80-%EC%A2%8B%EC%9D%84%EA%B9%8C (script태그는 어디에 위치해야 좋은가를 말하는글) HTML 문서를 읽고 파싱하는 과정에서 defer도 async와 비슷합니다. 태그를 만나도 HTML 파싱이 중단되지 않고 javaScript 파일과 함께 파싱됩니다. 하지만 다른 점은 javaScript 코드를 실행하는 시점은 HTML 파싱이 모두 완료된 이후입니다. 이처럼 , , 태그를 상황에 맞게 사용하여 스크립트 파일의 파싱 순서를 제어할 ..
React 프로젝트중 발생한 Network에러 cors에러라고 뜨지 않아도 단순히 network 오류여도 cors에러일수 있다. 정말 이렇게 어떠한 에러에서 뱉어내는 에러 메시지에 생뚱 맞은 해결책이 연결되어 있다... 방법은 없다. 구글링을 하는 것밖에. 오류메시지를 그대로 적고 그 오류에 어떠한 해결책이 있는가를 검색하는 방법뿐이 없다. (오류 메시지에는 cors에 관한 언급이 전혀 없었다. 하지만 나는 그 오류가 무엇 때문에 생긴것인지 모르므로 모든 가능성을 열어두어야 하고 모든 가능성을 열어두면 오류 해결에 많은 시간이 걸리니 구글링이 답이라는 것이다) 해결책: cors관련 라이브러리를 서버에 설치해 주었다. https://www.npmjs.com/package/cors
SWR 실습: https://github.com/dhflekddy/React-and-ReactHookPractice/commit/1f12eb529ddf3fe278b0dd961c8c91c0321a46ad mutate를 이용한 Optimistic UI: https://steadily-worked.tistory.com/565 useSWR, mutate에 대하여: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC useSWRInfinite에 대하여: https://velog.io/@code-bebop/SWR-%EC%8B%AC%EC%B8%B5%ED%83%90%EA%B5%AC-useSWRInfinite https://moon-ga.github.io..
(프론트연계)fetch api를 post 방식으로 보내기 출처:https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0 벡단으로 데이터를 전송하고 받아오는 과정을 설명한 글이다. 내 프로젝트에 직접적으로 도움이 되는 글. 설명도 엄청 자세하다 로그인을 할 때 아이디, 비밀번호를 입력하고 로그인 버튼을 누른다. 서버에서는 입력된 아이디, 비밀번호를 데이터베이스와 비교하여 일치 여부를 판단한다. 이번 포스팅에서는 아이디, 비밀번호가 불일치일 때 페이지 전환 없이 ajax를 활용하여..
****중요****Front에서 Back으로 데이터 요청(fetch, push시 사용되는 Fetch API, axios라이브러리에 대하여 관련 실습 코드: https://github.com/dhflekddy/React-and-ReactHookPractice/commits/main/fetchAndAxios    구체적 실습코드 여기에 모두 있으니 꼭보기, Readme도 꼭 보기fetch사용시 데이터를 서버에 post방식으로 전송시 반드시 지켜야 할 것: https://velog.io/@ctp102/SptringBoot-fetch-post-gson%EC%9C%BC%EB%A1%9C-%EC%84%9C%EB%B2%84%EC%97%90-%EB%8D%B0%EC%9D%B4%ED%84%B0-%EC%A0%84%EC%86%A1-%ED%9B%84-%ED%99%9C%EC%9A%A9%ED%95%98%EA%B8%B0그 외에서 웹 애플리케이션 서버로 스프링 부트를 사..
API데이터 전송 확인 툴 postMan 클라이언트와 서버간에 데이터가 잘 전송되는지의 여부를 알기 위해 영상에서 소개하는 postMan이라는 프로그램을 사용해 보았다. 아직까지는 그 필요성을 구체적으로는 느끼지 못하겠다. 그냥 post할때는 서버 파일에 post가 정상적으로 될수 있는지 확인하는 console문구를 해당 함수에 추가하면 되고 Get이 잘 되는지는 브라우저 화면에 res.json혹은 res.send와같은 res.json res.send와 같은 함수를 사용해 주면 되기 때문이다(여기서 클라이언트가 body안에 보낸 값을 확인하기 위해서는 body-parsing middleware인 body-parser를 사용해 주면 된다).

티스토리툴바