분류 전체보기

1. 스코프란? 스코프란 식별자가 유효한 범위를 말한다. 혹은 자바스크립트 엔진이 식별자를 검색할 때 사용하는 규칙이라 할 수 있다. 이는 자바스크립트 엔진이 같은 이름의 식별자를 스코프를 통해 참조를 결정하는 식별자 결정에 영향을 준다. 자바스크립트 엔진은 코드 실행시 코드의 문백을 고려한다. "코드가 실행되는 위치와 주변 환경에 어떤 코드가 있는지"를 렉시컬 환경이라 부른다. 코드의 문맥은 렉시컬 환경으로 이뤄지며 이를 구현한 것이 실행 컨텍스트이다. var x = 'global'; function foo() { var x = 'local'; console.log(x); // 1 } foo(); console.log(x); // 2 만약 위의 코드에서 스코프란 개념이 없으면 같은 이름을 갖는 변수는 ..

React를 이용해 웹을 개발하며 컴포넌트를 만들때 예상치 못한 에러로인해 추가적인 커밋과 PR을 경험한 적있다. 이번에 새롭게 참여한 프로젝트에서는 UI 테스팅 도구인 Storybook과 다른 테스팅 도구인 Testing-library/react를 사용하게되었다. 만드는 컴포넌트를 테스트하는 과정을 통해 발생 가능성이 있는 에러를 사전에 방지할 수 있기에 이번 프로젝트에서는 테스트 과정을 본격적으로 다룰 예정이다. 왜 React Testing-Library 인가? React Testing Library는 React 컴포넌트를 테스트하기 위해 설계된 라이브러리 이며, 실사용 환경과 비슷한 환경을 인스턴스가 아닌 실제 DOM 노드를 사용해 테스트하므로 더욱 신뢰할 수 있는 환경을 제공한다. 또한 props..

Jest는 페이스북에서 만든 테스팅 라이브러리이다. React와 Javascript를 테스팅하는데 많이 사용되고 있다. Jest는 Test Runner와 Test Matcher 그리고 Test Mock 프레임워크까지 제공해 많이 사용된다. Test Runner 테스트를 실행하고 각 테스트 케이스의 성공 혹은 실패 여부를 보고하는 도구 Test Matcher 테스트 케이스에서 예상되는 결과와 실제 결과를 비교하는 도구 Test Mock 특정 객체 또는 기능을 흉내내어 가짜로 구현된 대체 객체 Jest 설치 npm i -D jest CRA를 사용해 React를 사용하면 따로 Jest를 설치하지 않아도 Jest를 사용할 수 있다. 설치가 완료되면 package.json 파일에 test 스크립트를 jest로 추..

이모션은 CSS-in-JS 라이브러리이다. React와도 함께 사용할 수 있다. 1. 설치 // 기본적으로 React환경에서 사용하는 Emotion npm i @emotion/react // Styled-Component 처럼 사용할 수 있는 Emotion // @emotion/react가 설치되어 있어야 한다. npm i @emotion/styled 해당 글에서는 styled 형식으로 컴포넌트를 생성하는 방법에 대해 작성할 예정이다. 2. Emotion Styled Component 컴포넌트와 구성요소 스타일링 기존에 사용했던 Styled-Component의 사용법과 비슷하게 컴포넌트나 요소를 생성할 수 있다. import styled from '@emotion/styled' const Button =..

이번에 새로운 프로젝트에 참여하게되었다. 짧은 기간이지만, 개발해야할 기능들이 많고 테스트 코드까지 작성해야 하기에 바쁜 나날이 될거같다. 이번 프로젝트에서는 Story Book을 이용해 컴포넌트 UI 테스트를 진행한다. 그렇기에 간단한 지식정도는 알고 진행하는 것이 팀원들에게 대한 예의라 생각한다. 본 글은 Story Book의 공식 문서에 나온 튜토리얼 중 시작부터 Redux를 이용한 상태 관리 까지의 과정을 기록한 글입니다. 1. 스토리 북(Story Book)이란? UI를 컴포넌트 단위로 테스팅 할 수 있는 툴이다. 컴포넌트 단위로 테스팅 하는 점에서 잘 분리된 컴포넌트를 재사용하는 React와 잘 맞는 UI 테스팅 툴이라 생각한다. 스토리 북을 사용하는 이유는 아래와 같다. 독립적인 환경에서 컴..

리펙토링을 진행하게된 계기 방치하고 있던 프로젝트가 있었다. 이 프로젝트를 진행할 때 꽤나 공을 들인 프로젝트였는데 코테준비다, 시간이 없다 등 지금 생각하면 배부른 핑개를 대며 프로젝트를 방치했었다. 하지만, 최근 원티드 프리온보딩을 통한 좋은 코드와 SOLID 원칙에 대한 강의를 듣고 프로젝트의 코드들을 전체적으로 살펴봤다. 지금 보니 아주 난장판이였다. import { ReactComponent as GamaldaSVG } from 'assets/svg/gamaldalogo.svg'; import naverLogin from 'assets/png/naver_login.png'; import { useEffect, useRef } from 'react'; import { Link } from 'rea..