Frontend/Dev Notes

요약// Badconst queryClient = new QueryClient();queryClient.invalidateQueries();// Goodconst queryClient = useQueryClient();queryClient.invalidateQueries();   React Query에 대한 소개React Query는 데이터 관리와 캐싱을 위한 강력한 도구로, 애플리케이션에서 데이터를 효율적으로 관리하는 데 큰 도움을 줍니다. 그 중요한 부분 중 하나는 QueryClient 인스턴스의 적절한 관리와 사용입니다. React Query의 QueryClient는 앱 전반에서 데이터 캐싱과 관련된 주요 작업을 처리합니다. 이러한 인스턴스는 앱 내에서 하나의 전역적 상태로 유지되어야 하는데, 그 ..

문제 정의CSS 협업을 하다 보면 다른 개발자가 작성한 스타일 코드를 보게 됩니다. 하지만, 사람마다 스타일을 정의하는 방식과 순서가 다르기 때문에 해당 스타일을 찾는 데 시간이 소요됩니다. 이는 작은 시간 차이처럼 보이지만, 프로젝트가 커지면 큰 시간 낭비로 이어질 수 있습니다. 따라서 CSS 컨벤션을 정하여 협업하는 개발자들 간의 혼란을 방지하고, 코드의 가독성과 유지 보수성을 향상해야 합니다. CSS 컨벤션CSS는 축약형으로 작성합니다.// Goodpadding: 0 20px;// Badpadding-left: 20px;padding-right: 20px;CSS in JS를 사용할 때는 paddingY: 20px, py: 20px와 같이 축약형을 사용하는 경우가 있습니다. 이렇게 하면 코드가 간결해..

문법문자보간선택자나 속성은 일반 변수로 처리가 불가능합니다.이를 처리하려면, #{var_name}을 사용하면 코드의 어디든지 변수 값을 넣을 수 있습니다.// SCSS$font-family: "Roboto";@import url("/fonts/#{$font-family}");.header { font-family: #{$font-family};}=== Compile ===// CSS@import url("/fonts/Roboto");.header { font-family: Roboto;} 위 코드는 .header 클래스에 Roboto 폰트를 적용하는 코드입니다. font-family 속성은 일반 변수로 처리할 수 없기 때문에, #{var_name}을 사용하여 변수 값을 넣어줍니다. 가변 인수가변 인수..