본문 바로가기

전체 글

 (359)
Web Server와 WAS의 차이와 웹 서비스 구조 출처: https://gmlwjd9405.github.io/2018/10/27/webserver-vs-was.html Front, Back 분리시 동작 원리 https://flexyduck.tistory.com/363 Front, Back분리시 동작 원리에 대해 설명한 글(매우유용) 목표!! Static Pages와 Dynamic Pages 과정을 이해한다. Web Server와 WAS의 차이를 이해한다. Web 서비스 구조(Web Service Architecture)에 대해 이해한다. 1. Static Pages Web Server는 파일 경로 이름을 받아 경로와 일치하는 file contents를 반환한다. 항상 동일한 페이지를 반환한다. Ex) image, html, css, javascript ..
expected a string (for built-in components) or a class/function (for composite components) but got: object. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports. 리엑트 사용중 위와 같은 에러 메시지가 떳다. 원인중 하나 일수 있는게 import한 문서에서 어떠한 라이브러리가 필요한데 그 라이브러리가 없을때 이러한 에러가 떳다. 나같은 경우 그 라이브러리는 내가 만든 것이었다.
Socket.io 에 대하여 #socket.io-client 출처: https://inpa.tistory.com/entry/SOCKET-%F0%9F%93%9A-SocketIO-%EC%82%AC%EC%9A%A9-%ED%95%B4%EB%B3%B4%EA%B8%B0 ( ****정말 잘쓴 블로그****) https://smaivnn.tistory.com/2#article-1--socket-io-%EC%9D%B4%EB%9E%80? https://velog.io/@fejigu/Socket.IO-client 1. Socket.io 이란? socket.io를 알아보기 전, 웹 소켓에 대해 먼저 알아보자. 웹 소켓은 HTML5에 새로 추가된 실시간 양 방향 데이터 전송을 위한 기술이다. http가 아닌 ws프로토콜을 사용하며, 따라서 브라우저, 서버..
왜 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..

티스토리툴바