TIL26 SVN 기초 1. 저장소에서 파일 가져오기 checkoutsvn 저장소에서 로컬로 파일을 처음 가져올 때 사용svn checkout 2. 파일 상태 확인 status현재 작업 중인 파일의 변경 사항을 확인할 수 있다.(수정된 파일, 추가된 파일, 삭제된 파일 등등)svn status 3. 파일 업데이트 update다른 팀원이 저장소에 커밋한 최신 변경 사항을 로컬에 작업 중인 복사본에 반영할 때 사용svn update 4. 파일 추가 add새로운 파일을 추가했을 경우 사용하여 추가svn add 5. 파일 삭제 delete파일을 삭제할 때 svn 명령어를 사용해서 삭제, 추가도 svn 명령어를 사용하여 작업하는 게 좋음svn delete 6. 변경 사항 커밋 commit로컬에서 수정한 내용을 저장소에 반영할 때 .. 2024. 9. 12. tanstack-query(react-query) staleTime과 refetchInterval을 활용한 네트워크 요청 최소화 방법 tanstack-query의 기초를 다시 보면서 전에 팀 프로젝트를 진행할 때 네트워크 요청이 많아 사용량이 다 차버린 생각이 나서 네트워크 요청을 최소화하는 방법을 찾게 되었다. 상황 및 문제점먼저 네트워크 요청을 줄이려면 tanstack-query의 데이터 캐싱을 사용해야 하는데 기존에는 stale time을 설정하지 않아서 0 이였다. 이 값이 0이면 데이터가 fresh 상태가 되지 않고 계속 stale 상태가 되어 계속 요청을 보내게 된다. tanstack-query의 캐싱 기능을 사용하지 않게 되는 것이다. 그런데 staleTime을 조정해서 캐싱되는 시간을 확보하려고 하는데 문제가 되는 점이 있었다. 예를 들어 내가 좋아요 한 글이 있는데 이 글의 제목이나 유저가 좋아요를 취소하는 등의 변경이.. 2024. 8. 12. nextjs/typescript lodash 에러 yarn add lodash 후import _ from 'lodash'; 를 했는데 정상적으로 import 되지 않고 아래와 같은 메시지가 출력되었다. Could not find a declaration file for module 'lodash'. 'c:/codeGit/v-up-ver2/node_modules/lodash/lodash.js' implicitly has an 'any' type. Try `npm i --save-dev @types/lodash` if it exists or add a new declaration (.d.ts) file containing `declare module 'lodash';` 찾아보니 typescript에서 외부 라이브러리를 사용할 때 발생할 수 있으며, t.. 2024. 4. 29. tailwind 로컬 서버랑 배포 서버의 css 우선순위가 왜 다르지? 왼쪽은 개발서버, 오른쪽은 배포 서버인데 같은 코드임에도 다른게 보여졌다. 이유를 모르겠어서 개발자 도구를 서버별로 비교를 해봤는데, 우선순위가 달라서 나타나는 문제였다. tailwind 내부적으로 w-full 클래스 하위에 이미지는 100프로라는 tailwind 규칙이 있었다. 로컬 서버에서는 제대로 나와서 몰랐는데... w-full을 딱 필요한 부분으로 옮겨서 수정을 했다. css 적용되는 범위를 내가 크게 잡은게 문제이긴 하지만... 우선순위가 같아서 개발서버에서도 이렇게 나왔다면 발견했을텐데..ㅠㅠ 아니 왜 다른거지... 흑 이유는 아직 못찾아서 찾게된다면 이 글에 업데이트를 해둬야겠다...ㅠㅠ 2024. 4. 19. 상위 컴포넌트에서 하위 컴포넌트로 늦게 내려오는 문제 마이페이지 내에 마이 플레이리스트라는 컴포넌트가 있는데, 이 컴포넌트에 마이페이지에서 조회한 유저의 정보를 전부 내려준다. 이렇게 했더니 마이플레이리스트에서 노래를 삭제하고 invalidateQueries로 쿼리키를 무효화하는데, 마이페이지의 정보를 조회하는 쿼리만 늦게 가져와져서 마이플레이리스트가 마이페이지 정보가 가져와진 줄 알고 이전 데이터로 조회하는 문제가 있었다. 상위 컴포넌트에서 전달해 주는 데이터는 조회하는 컬럼도 많고 조인 다른 테이블에서 가져오는 데이터도 있어서 비교적 다른 데이터에 비해 무겁긴 했다. 이러한 문제가 있어서 하위 컴포넌트에서 상위 컴포넌트의 데이터에 의존하지 말고 하위 컴포넌트에서 필요한 데이터를 조회하도록 전체적인 코드를 변경했다. 2024. 4. 18. [react/nextjs] 데이터가 있는지 판단 후 insert 또는 update 음악 추천 리스트에서 + 추가 버튼을 누르면 현재 유저의 재생 목록 테이블에 데이터가 추가되어야 하는데 고려해야 할 부분이 있다. 데이터가 있는지 판단하는 이유는 재생 목록에 추가하는 노래 id를 배열에 담기 때문에 한 번이라도 노래를 추가하여 재생한 적이 없다면 재생목록 테이블에 유저의 현재 재생 목록은 없다. (재생 목록 데이터가 있어야 그 데이터의 노래 컬럼에 배열로 재생할 노래를 담을 수 있다) 그렇기 때문에 먼저 이 유저가 현재 재생 목록을 가졌는지 판단 후 insert 또는 update를 해야 한다. 사실 회원가입 할 때 유저의 현재 재생 목록을 가지도록 재생 목록 테이블에 빈 값으로 insert를 하는 건 어떨지 고민도 했다. 만약 이 방법으로 한다면 추가할 때마다 재생 목록이 있는지 판단하.. 2024. 4. 5. react/typescript input checkbox 전체 선택 구현 그동안 프로젝트 진행하면서 구현한 적이 없어서 이번에 연습 삼아 구현하게 되었다. 기능 1. 전체 선택 클릭 시 다른 체크박스 전체 선택/해제 2. 전체 선택 상태에서 다른 체크박스 해제 시 전체 선택 부분도 선택 해제 3. 체크박스 재사용 가능하도록 컴포넌트로 분리 Checkbox 컴포넌트 / Checkbox.tsx 재사용 가능하도록 props를 내려줬다. import React from "react"; const Checkbox = ({ title, name, checked, onChange }: { title: string; name: string; checked: boolean; onChange: React.ChangeEventHandler }) => { return ( {title} ); }; .. 2024. 3. 29. [tailwind css] 반응형 및 color 셋팅 프로젝트를 진행하기 전에 먼저 세팅하면 좋은 tailwind 반응형과 color 셋팅이다. 반응형 셋팅 코드 모바일 퍼스트 버전 tailwind.config.ts /** @type {import('tailwindcss').Config} */ module.exports = { theme: { screens: { 'sm': '640px', // => @media (min-width: 640px) { ... } 'md': '768px', // => @media (min-width: 768px) { ... } 'lg': '1024px', // => @media (min-width: 1024px) { ... } 'xl': '1280px', // => @media (min-width: 1280px) { ... } .. 2024. 3. 29. 이전 1 2 3 4 다음
