일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | ||
6 | 7 | 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | 16 | 17 | 18 | 19 |
20 | 21 | 22 | 23 | 24 | 25 | 26 |
27 | 28 | 29 | 30 |
- deep dive
- error
- 모던자바스크립트
- 코드카타
- React
- CORS
- 스파르타코딩클럽
- Next
- 소셜 로그인
- 최적화
- 프로그래머스
- js
- 티스토리챌린지
- git
- 오블완
- domain
- 내일배움캠프
- 코테
- vscode
- 자주 까먹는
- TailwindCSS
- 프로젝트 셋팅
- 코딩테스트
- array정적메서드
- nextjs
- useRouter
- 초기셋팅
- 셋팅
- vercel
- 모던 자바스크립트
- Today
- Total
목록Today I Learned/in dev (38)
도록
문제 상황테스트 페이지가 필요해서 셋팅하던 중, 테일윈드 공식 문서 대로 제일 최신 버전을 설치하니 vite.config.ts 파일에서 아래와 같은 오류가 발생했다.Type 'Plugin[]' is not assignable to type 'PluginOption' 해결책: node_modules 폴더와 lock 파일(ex. pnpm-lock.yaml, package.lock.json, yarn.lock)을 둘다 삭제하고 다시 install 받으면 해결된다. rm -rf node_modules pnpm-lock.yamlpnpm install 출처: https://github.com/tailwindlabs/tailwindcss/discussions/17541
정의사용자의 현재 화면에 보이지 않는 영역은 렌더링을 건너뛰는 속성이다.이를 통해 초기 페이지 로드 시간을 단축해, 사용자 경험을 개선할 수 있다. 사용 방법우선 각 영역을 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) ..