대부분 리스트를 순회하는 코드를 작성해 보라고 하면 다음과 같이 작성한다. 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 })); 검색을 아무리 많이 해봐도 이 둘의 차이를 명확하게 짚어 주지 않아서 개인 프로젝트로 여러 가지 실험을 해봤다. 거의 동일한 기능이라고 봐도 무방하다. 하지만, 핵심적인 차이점은 이전상태를 고려하지않는다. 즉, 최신 값을 보장할 수..
프로젝트 라우팅 구조 token을 전역상태로 관리하는데 그 토큰의 변경이 감지되면 알맞게 페이지 리다이렉트를 시키는 구조이다. 문제 로그인 시 토큰을 발급받고 로컬스토리지에 저장하는데 저장 후 토큰이 감지되고 리다이렉트를 하는데 토큰의 값이 null로 request 된다. 문제 해결 과정 1. 저장이 되기 전에 리다이렉트 되나? vscode로 페이지가 라우팅 되기 전, 라우팅 되는 과정, 라우팅 후를 관찰하기 위해 debug를 사용함. 하지만 토큰이 로컬 스토리지에 저장이 되고 라우팅 되는 것을 확인할 수 있었음. 2. axios의 인스턴스가 문제인가? custom 한 api가 문제인가 싶어서 login함수를 만들고 axios로 하드코딩해서 headers에 토큰을 받아서 넘겨줬는데 여전히 null값으로 ..
React.js 프로젝트를 쉽게 생성하기 위한 툴이다. React.js를 처음 사용하는 개발자들은 개발 환경 설정이 어려울 수 있지만, Create-React-App을 사용하면 초기 설정을 간편하게 해결할 수 있다. Create-React-App 설치시 자동으로 설치되는 패키지들 Create-React-App을 사용하여 React.js 프로젝트를 생성하면 다양한 패키지들이 자동으로 설치된다. 이러한 패키지들은 React.js 프로젝트를 개발하는 데에 필요한 다양한 도구들을 제공한다. 자동으로 설치되는 패키지는 아래와 같다. react react-dom react-scripts react 와 react-dom 은 React.js 라이브러리이며, react-scripts는 Create-React-App에서 ..
