파피루스

WebSocket만 써보고 SockJs는 처음 써보기에, 하나씩 기록해보려 한다.  1. install sockjs-clientyarn add sockjs-client @types/sockjs-client  2. socket 연결부의 예제 코드 추가import React, { useEffect, useRef, useState } from 'react';import SockJS from 'sockjs-client';const SocketTest = () => {  const [messages, setMessages] = useState([]);  const socketRef = useRef(null);  useEffect(() => {    socketRef.current = new SockJS('서버주소..

git tag 조회하기git tag  원격에 tag 올리기git push origin v1.0.3  https://git-scm.com/book/ko/v2/Git%EC%9D%98-%EA%B8%B0%EC%B4%88-%ED%83%9C%EA%B7%B8 Git - 태그와일드카드를 사용하여 Tag 리스트를 확인하려면 -l, --list 옵션을 지정 단순히 모든 Tag 목록을 확인하기 위해 git tag 명령을 실행했을 때 -l 또는 --list 옵션이 적용된 것과 동일한 결과가 출력된다.git-scm.com

문제 상황- tailwind css 공식문서에서 하라는 대로 했지만, tailwind가 적용되지 않아 브라우저에서 보면 스타일이 다 깨져있다.더보기참고) 나의 개발 환경은...- vite, react, typescript, scss 를 사용하고 있다. (sass를 tailwind로 교체 중)- local 은 vite를 사용해 테스트하고, dev, prod 는 express 서버를 이용한다.- ci 는 jenkins, docker 파일을 이용해 구현되어 있으며, install 과 build가 분리되어 있으며, 서버를 내리지 않고 container 교체 방식으로 진행된다.  우선 어디가 문제인지 보자⬇️결론은 맨 아래 ⬇️  왜 스타일이 깨질까? 생각해 아래와 같은 가설을 만들었다.[가설 1] tailwin..

요약해서 말하면, axios와 fetch의 기본 설정이 달라 같은 요청처럼 보여도 다른 처리가 되고 있기 떄문이다. 나는 이런 Gateway 문제였고, 따로 설정 하지않고 그냥 내가 prefix를 붙여주는 방식으로 해결했다.Gateway로 API요청을 보내면, api path를 보고 사용자면 auth server로, project라면 project server로 요청을 보낸다.요청을 분기 쳐줄 때, api의 path에 api path의 prefix를 붙여준다. (ex. http://gateway-host.com/api/login -> http://auth-host.com/auth/api/login)origin 주소가 요청한 내 주소(localhost) 가 아닌 gateway의 주소가 들어가 CORS가 발..

1. 정의: 서버와 클라이언트와의 연결 상태: 서버에서 관리하는 사용자의 상태 저장소 ❗) 단어의 사용처를 통해 여러가지 뜻으로 쓰인다는 것을 알았고, 생각보다 정의를 적기 어려웠다. - 세션이 끊겼다/세션 만료/세션 종료 = 세션(서버와 클라이언트 사이의 연결 상태)가 끊겼다. (끊기면 데이터도 삭제된다.)- 세션에 OO 정보를 저장했다/담았다 = 세션(사용자 상태 저장소)에 저장했다.  2. 특징- 일정 시간이 지나면 세션에 저장한 데이터가 삭제된다.- 서버는 session에 데이터는 저장 및 관리한다.- 클라이언트는 서버에서 발행한 sessionId를 받아 쿠키에 저장하고, 이를 서버 통신할 때 사용한다.- sessionId를 탈취당하면 보안 위협(ex.세션 하이재킹)이 발생할 수 있다. (HTTP..

해결책 3개 다해보고 결국 1번으로 해결했습니다.prettier.rc 파일을 수정하는 등, commit해야하는 것들은 제거했습니다. 1. vscode 우측 하단의 CRLF 설정을 LF 으로 변경   2. vscode setting eol : auto 로 변경   3. vscode Prettier : End Of Line

세션 부분과 이벤트 핸들러에 공부하고, 추가 글 쓸 예정 면접 질문과 나의 대답1. 브라우저 주소창에 네이버를 검색하면?: 넣은 주소를 프로토콜이랑 도메인, 포트랑 분리한다. dns 서버에 해당 도메인을 넘겨서 ip주소를 받아온 뒤, 그 주소의 서버와 통신한다. 뭐 tcp 통신을 할텐데, 아무튼 그 통신을 해서 그 서버에서 전달해준 html, js 파일들을 받아온다. 그 받아온 파일들을 브라우저가 렌더링하는 것으로 알고 있다. 2. html, js 파일을 가져와서 브라우저를 렌더링한다고 했는데, js 파일은 어디에 있을까요?: 예를 들어 html 에 script, style 태그들에 보면 js 파일 위치가 들어가 있잖아요? 거기에 있지 않을까요?   3. 브라우저가 데이터 타입(html, pdf, ima..

1. 설치하기npm i typescript @types/react @types/react-dom  2. 최초 설정하기npx tsc --init 생성된 tsconfig 파일에서 "jsx" 옵션을 줘야함: jsx가 자바스크립트 파일에서 내보내지는 방식을 제어하는 옵션 preserve: jsx를 변경하지 않고 .jsx 파일을 내보낸다.react: React.createElement 호출로 변경된 jsx로 .js 파일을 내보낸다.react-native : preserve와 같이 jsx를 변경하지 않지만 .js 파일을 내보낸다. 3. 기존 파일 확장자 변경하기- js 파일들 tsx/ts 확장자로 변경 4. 문제 생긴 부분 수정 + 필요하면 lib 추가 설치- js 파일들 tsx/ts 확장자로 변경 5. 끝! 프로..