도록

정의사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다. 사용 방법우선 각 영역을 section으로 나누고, 나누어진 섹션에 아래 css을 적용시킨다.content-visibility: auto;            // 브라우저에게 해당 요소가 현재 뷰포트에 보이지 않을 때 렌더링을 건너 뛰기contain-intrinsic-size: 1000px;    // 스크롤바가 올바르게 뜨기 위해, 요소의 예상 크기를 설정 conetent-visibility가 가질 수 있는 값의 종류는?- visible : 아무런 효과 없음- hidden : 요소 생략 (dispaly:none처럼, 페이지 내 찾기/user-agent 접..

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('서버주소..

문제 상황- 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가 api prefix를 붙여주는데, 여기에서 오류가 발생하고 있었다.나는 내가 직접 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) ..

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