도록

머리 속 정리하기. 전문 용어 번역기를 주제로 사이드 프로젝트를 하려고 한다. 개발 전 미리 머리 속을 정리하고자 한다.  Why : 주제 선택의 계기는?: 지인이 건강검진에서 의심되는 병이 있어, 여러 검사를 받게 되었다. 그 검사 결과지에 적혀있는 글을 이해하기가 어려웠고, 내용을 이해하기 위해서는 다음 병원 방문일까지 기다려야 했다.  Pain point : 전문 용어는 어렵다.'어렵다'라는 단어가 공부할 때 많이 들어서 그런지, 생각할 겨를도 없이 '쉽게, 혹은 즐겁게!' 가 튀어나왔다.그치만 전문용어를 달달 외울 것도 아닐 뿐더러, 공부하는 것이 목표가 아니다. 공부보다는 커뮤니티 정도로 가벼웠으면 좋겠다 였다.내가 모르는 것을 잠깐 검색, 질문을 통해 해결하고 이러한 행위는 커뮤니티와 유사한 ..

정의사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다. 사용 방법우선 각 영역을 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('서버주소..

git tag 조회하기git tag  원격에 tag 올리기git push origin v1.0.3  태그 삭제git tag -d v1.0.3  remote에 올라간 태그를 삭제할 때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가 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) ..