본문 바로가기

전체 글

(90)

CSS-in-JS와 헤어지는 이유 React용 CSS-in-JS 라이브러리인 Emotion의 두 번째로 활발한 유지보수자인 Sam의 포스트를 번역한 내용입니다. https://dev.to/srmagura/why-were-breaking-up-wiht-css-in-js-4g9b Why We're Breaking Up with CSS-in-JSHi, I'm Sam — software engineer at Spot and the 2nd most active maintainer of Emotion, a...dev.to 이 포스트에서는 왜 CSS-in-JS에 매력을 느꼈는지, 그리고 왜 팀이 여기서 떠나기로 했는지 깊이 있게 다룹니다. 1. CSS-in-JS란 무엇인가?이름에서 알 수 있듯이, CSS-in-JS는 JavaScript나 TypeSc..

CSS-in-JS란 CSS-in-JS를 활용하면 자바스크립트로 스타일을 선언적이고 유지보수할 수 있는 방식으로 표현할 수 있다. 그렇다면 인라인 스타일이 CSS-in-JS일까? 아니다. 두 방식의 차이점에 관해 알아보자. 인라인 스타일 VS CSS-in-JS 먼저 인라인 스타일을 살펴보자.const textStyles = { color: white, backgroundColor: black}const SomeComponent = () => { return ( inline style );}; 위 코드는 브라우저에서 DOM 노드를 다음과 같이 연결한다.inline style 다음으로 CSS-in-JS 방식을 살펴보자.import styled from "styled-components";cons..

기존의 Vite에서 Next.js로 전환하는 이유 팀원과의 논의 끝에 기존의 Vite 애플리케이션을 Next.js로 마이그레이션하기로 결정했다. 전환을 결정한 가장 큰 이유로는 네트워크 폭포 현상을 제거하여 클라이언트 측의 데이터 요청 병목 현상을 근본적으로 해결하기 위함이다. 기존에 작업하던 repository를 유지하고 새로운 브랜치에서 Next.js migration 작업을 진행할 예정이다. 1. 느린 초기 페이지 로딩 속도기본적인 React용 Vite 플러그인으로 애플리케이션을 빌드했다면, 이는 SPA로, 이 방식은 다음과 같은 이유로 초기 로딩이 느려질 수 있다.- 브라우저는 데이터를 불러오기 위한 요청을 보내기 전, React 코드와 전체 애플리케이션 번들이 다운로드되고 실행될 때까지 기다려야 한다.- 새로운 기능과 의존성이 추가될수록 애플리..

Call by Value VS Call by Reference 프로그래밍에서 데이터를 다루는 주요 방식인 참조 방식에 대해서 알아보자.Call by Value: 값에 의한 참조 방식 데이터를 전달할 때 원본 데이터의 '값' 자체를 복사하여 전달하는 방식이다.대부분의 언어에서 기본 타입, 즉 숫자, 문자열, 불리언 등을 전달할 때 사용된다.함수를 호출할 때, 인자로 전달되는 변수의 현재 값을 복사하여 함수의 매개변수에 넣어준다.함수 내부에서 매개변수의 값을 변경하더라도, 원본 변수의 값은 전혀 영향을 받지 않는다. 왜냐하면 함수 내부에서 다루는 것은 원본의 복사본이기 떄문이다.let num = 10;function changeValue(x) { x = 20; // 복사된 값 'x'만 20으로 변경}changeValue(num);// num은 여전히 10입니다. 원본..

Dependent Queries useQuery dependent Query종속(또는 순차적) 쿼리는 이전 쿼리가 완료되어야만 실행될 수 있는 쿼리를 말한다. 이를 구현하는 것은 간단하다. // 사용자 정보 가져오기const { data: user } = useQuery({ queryKey: ['user', email], queryFn: getUserByEmail,})const userId = user?.id// 사용자의 프로젝트 정보 가져오기const { status, fetchStatus, data: projects,} = useQuery({ queryKey: ['projects', userId], queryFn: getProjectsByUser, // userId가 존재할 때까지 쿼리는 실행되지 않는다. enabl..

Parallel Queries "Parallel"(병렬) 쿼리는 fetching 동시성을 극대화하기 위해 병렬로, 즉 동시에 실행되는 쿼리이다. Manual Parallel Queries: 수동 병렬 쿼리병렬 쿼리의 수가 변경되지 않는다면, 병렬 쿼리를 사용하는 데 별다른 노력이 필요하지 않다. TanStack Query의 useQuery 및 useInfiniteQuery 훅을 원하는 만큼 나란히 사용하기만 하면 된다. function App () { // 다음 쿼리들은 병렬로 실행된다 const usersQuery = useQuery({ queryKey: ['users'], queryFn: fetchUsers }) const teamsQuery = useQuery({ queryKey: ['teams'], queryFn: fet..

Lv.3 표 편집 "U X": 현재 선택한 행에서 X칸 위에 있는 행을 선택한다."D X": 현재 선택한 행에서 X칸 아래에 있는 행을 선택한다."C": 현재 선택한 행을 삭제한 후, 바로 아래 행을 선택한다. 단, 삭제된 행이 가장 마지막 행인 경우 바로 윗 행을 선택한다."Z": 가장 최근에 삭제한 행을 원래대로 복구한다. 단, 현재 선택한 행은 바뀌지 않는다.문제를 풀 때 사용할 방법은 실제 배열을 선언하고 삽입과 삭제 연산을 하는 대신, 인덱스만으로 연산하는 것이다. 삭제하는 경우 생각해보기삭제된 행을 저장하는 방법마지막 행이 삭제되었을 때, 바로 위의 행을 선택하는 방법배열을 삭제하지 않고도 인덱스를 활용해서 삭제가 된 것처럼 만드는 방법행 삭제가 완료된 이후, 현재 선택한 행의 위, 아래 행이 서로 붙도록 up..

배열 코딩 테스트 합격자 되기 (자바스크립트 편) 도서 내용을 정리하려고 한다. 배열을 선언하는 3가지 방법리터럴을 이용하는 방법const arr = [0, 0, 0, 0, 0, 0];배열 생성자를 이용하는 방법const arr1 = new Array(6); // [undefined, undefined, ...]const arr2 = [...new Array(6)].map((_, i) => i + 1); // [1, 2, 3, 4, 5, 6]Array.fill() 함수를 이용하는 방법const arr = new Array(6).fill(0); [0, 0, 0, 0, 0, 0] 2차원 배열// 2차원 배열을 리터럴로 표현const arr = [[1, 2, 3, 4], [5, 6, 7, 8], [9, 10, 1..

이전 1 2 3 4 ··· 12 다음

티스토리툴바