any 타입은 타입스크립트의 타입 체킹 기능을 비활성화하기 때문에, 가능한 한 좁은 범위에서만 사용해야 합니다. - 위의 내용은 이 본문 전체를 관통하는 이야기이다. 글쓴이는 any를 써야 한다면 최대한 좁게 만들라는 이야기를 계속해서 반복한다. 다음은 any 타입을 사용하는 두 가지 방법이다: // 나쁜 예 function f1() { const x: any = expressionReturningFoo(); // bad processBar(x); }; // 좋은 예 function f2() { const x = expressionReturningFoo(); processBar(x as any); // good }; | processBar 함수의 매개변수에서만 any 타입을 사용하는 것이 좋다. 이는 다..
Next.js Conf에서 발표했듯이, Next.js 14는 우리의 가장 집중적인 릴리즈이에요: Turbopack: App & Pages Router에 대한 5,000개의 테스트가 통과됨 53% 더 빠른 로컬 서버 시작 Fast Refresh와 함께 94% 더 빠른 코드 업데이트 Server Actions (안정화): 점진적으로 향상된 변화 캐싱 및 재검증과 통합 단순한 함수 호출, 또는 폼과 자연스럽게 작동 Partial Prerendering (미리보기): 빠른 초기 정적 응답 + 동적 콘텐츠 스트리밍 Next.js Learn (신규): App Router, 인증, 데이터베이스 등을 교육하는 무료 강좌 Next.js Compiler: Turbocharged Next.js 13부터, 우리는 Next.j..
대부분 리스트를 순회하는 코드를 작성해 보라고 하면 다음과 같이 작성한다. const list = [1, 2, 3]; for (let i = 0; i < list.length; i++) { console.log(list[i]) } // 1 // 2 // 3 // undefined 하지만 ES6이후 새롭게 추가된 문법으로 위와 같은 코드를 조금 더 간결하고 직관적으로 표현할 수 있다. const list = [1, 2, 3]; for (const a of list) console.log(a) // 1 // 2 // 3 // undefined 그렇다면 Set 자료구조도 위와 같은 코드로 순회가 가능할까? const set = new Set([1, 2, 3]); for (const a of set) conso..
1. 각 라이브러리 소개 프론트엔드 테스팅에 있어서 React Testing Library(RTL)와 Enzyme는 대표적인 라이브러리이다. 이 둘은 같은 목적을 가지고 있지만, 서로 다른 방식과 철학으로 테스팅을 접근한다. 이 글에서는 RTL과 Enzyme의 장단점을 비교하고, 나의 생각을 공유해보려고 한다. 1-1. React Testing Library의 장점 및 단점 RTL은 테스팅 라이브러리로서의 새로운 패러다임을 제시한다. 사용자 중심의 테스트를 가능하게 하여 실제 사용자 경험에 더 가깝게 테스트를 작성할 수 있게 도와줍니다. 장점 사용자의 관점에서 테스트를 작성하도록 돕는다. 컴포넌트의 구현 세부 사항보다는 실제 동작에 집중하게 한다. UI가 예상대로 동작하는지 검증하는 데 초점을 맞춘다. ..
소프트웨어 테스트란 무엇인가? 테스트는 무엇인가가 잘 동작하는지 확인하는 활동입니다. 이러한 컨셉을 소프트웨어에 적용한 것이 바로 '소프트웨어 테스트'입니다. 소프트웨어 테스트는 우리가 만든 소프트웨어가 예상한 대로 동작하는지 확인하는 과정입니다. 과거에는 개발자가 소프트웨어를 만들고, 별도의 테스트 팀이 그 소프트웨어가 제대로 동작하는지 확인하는 구조였습니다. 그러나 현대의 소프트웨어 개발 흐름에서는 개발자가 자동화된 테스트를 작성하고 실행하는 것이 일반적인 상황이 되었습니다. 자동화된 테스트란, 사람이 직접 테스트하는 것이 아닌, 컴퓨터가 대신 테스트하는 것을 의미합니다. 이렇게 컴퓨터를 통한 자동화된 테스트에는 다음과 같은 이점이 있습니다: 컴퓨터가 테스트를 수행하므로, 사람이 직접 테스트를 수행하..
1. 클로저(Closure)란? 클로저는 기본적으로 함수와 그 함수가 선언될 당시의 렉시컬 환경과의 조합입니다. 렉시컬 환경은 어떤 변수가 어디에 있는지를 알려주는 식별자-값 쌍의 모음입니다. 따라서, 클로저를 이해하는 것은 함수와 그 주변의 코드를 이해하는 것입니다. function outerFunction() { let outerVariable = 100; function innerFunction() { console.log(outerVariable); } return innerFunction; } let myFunction = outerFunction(); myFunction(); // 100 위의 코드에서 innerFunction은 outerFunction의 outerVariable에 접근할 수 ..
프론트엔드 인턴쉽에서 투두리스트 앱을 만드는 과제를 하던 중 UX를 해치는 부분을 발견했다. // 기존 코드 const updateTodoHandler = () => { setIsUpdate(() => true); const newTodo = newTodoRef.current?.value; if (isInputValid(newTodo)) return; onUpdate(todoItem.id, newTodo, todoItem.isCompleted); setIsUpdate(() => false); }; const onUpdateTodo = async (todoId: number, todoText: string, isCompleted: boolean) => { await updateTodo(todoId, tod..
다음 두 가지 방법으로 상태를 업데이트할 수 있다. const [state1, setState1] = useState({ id: '', name: '', }); const [state2, setState2] = useState({ id: '', name: '', }); setState1({ ...state1, name: e.target.value }); setState2((prevState2) => ({ ...prevState2, name: e.target.value })); 검색을 아무리 많이 해봐도 이 둘의 차이를 명확하게 짚어 주지 않아서 개인 프로젝트로 여러 가지 실험을 해봤다. 거의 동일한 기능이라고 봐도 무방하다. 하지만, 핵심적인 차이점은 이전상태를 고려하지않는다. 즉, 최신 값을 보장할 수..
