우리는 많은 유형을 홈페이지 헤더를 만듭니다. const Header = () => { return ( ) } 헤더에는 Logo, MenuItem, UserProfile 등 요소를 포함해서 개발합니다. 이때, 헤더에서 로그인 기능을 제공한다고 생각해보면 UserProfile 부분은 SignIn과 UserProfile로 나뉘어서 제공됩니다. const Header = (props: { showSignup: boolean }) => { return ( {!props.showSignup && } {!props.showSignup && } {props.showSignup && } ) } 다음과 같이 보여집니다. 아직까진 훌륭한 헤더이다. 필터링된 헤더 현재 헤더에서 보여주고 있는 기능이 너무 많아서 특정 화면에..

웹사이트 개발을 하다보면 브라우저마다 기본적으로 설치되어 있는 스타일이 달라서 거슬리는 경우가 많다. 이런 경우 브라우저에서 기본적으로 제공하는 스타일을 초기화시켜 호환성을 맞춰주는 작업이 필요하다. 이때 사용하는 것이 바로 styled-reset이다. 사용하는 방법 Yarn yarn add styled-reset 코드 적용하기 import { createGlobalStyle } from "styled-components"; import reset from "styled-reset"; const GlobalStyle = createGlobalStyle` ${reset} * { // ... } body { margin: 0 } a { text-decoration: none; outline: none; } ..

프로그래머스 문제를 풀다보면 " 이 문제를 따로 기록해두고 다음에도 풀어야지 " 라는 생각을 한 적이 있다. 그런데 막상 어딘가에 저장을 하면 잊고 있거나, 문제의 중요도 또는 무슨 용도인지 까먹게 된다. 그래서 이런 코딩 문제를 풀고 저장할 수 있는 서비스를 만들면 어떨까 생각하였다. 그리고 한번 만들어 보려고 한다. 따로 백엔드 서버는 사용할 계획이 없고, json 파일을 통해서 import & export 방식으로 데이터를 관리하려고 한다. 또한 한번 다양한 언어를 실행 사이트 내에서 돌리는 기능도 추가하려고 한다. 본격적으로 시작해보자!

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 비동기적으로 바뀌는 컴포넌트 UI 테스트 const { useState, useEffect } = require("react"); const DelayedToggle = () => { const [toggle, setToggle] = useState(false); useEffect(() => { setInterval(() => { setToggle((prev) => !prev); }, 1000); }, []); return ( 상태 : {toggle ? "On" : "Off"} {toggle && 토글이 켜졌다!} ); }; export default DelayedToggle; 다음과 같이 1초마다 상태 값이 바뀌는 컴포넌트가 있습..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이번에는 TDD 방식으로 Todo List를 만들어본다. 전체적인 시나리오는 벨로퍼트님을 따라가지만 컴포넌트 자체는 스스로 만들어볼 생각이다. 컴포넌트 계획 Todo List를 만들기 위해서 필요한 컴포넌트는 무엇일까? ▶ Todo Form : Input과 Button으로 이루어진 Form 컴포넌트이다. Todo App으로부터 Submit을 전달받아 새로운 항목을 추가할 수 있어야 한다. ▶ Todo Item : 각 Todo 항목을 보여주는 컴포넌트이다. 텍스트를 클릭하면 텍스트에 삭제선이 그어져야 하고, 우측 삭제 버튼을 누르면 항목이 사라져야 한다. ▶ Todo List : Todo 배열을 받아와서 여러 개의 TodoItem 컴..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. 이 전에 Test Coverage를 공부할 때 한번 정리했지만 사용의 전반적인 흐름이 더 좋다고 느껴서 다시 정리한다. react-testing-library 모든 테스트를 DOM 위주로 진행하는 방식이다. 컴포넌트를 리팩토링할 때, 내부 구조 및 네이밍은 많이 바뀔 수 있지만 작동 방법은 크게 바뀌지 않는다. react-testing-library는 이러한 특징을 중요하게 생각해서 컴포넌트의 기능이 똑같이 작동한다면, 컴포넌트의 내부 구현 방식이 변해도 테스트가 실패하지 않도록 설계되어있다. 테스트 코드 const Profile = ({ username, name }) => { return ( {username} ({name}) ..

들어가며 벨로퍼트님의 테스팅 튜토리얼을 공부한 내용을 정리하는 글입니다. TDD ? TDD는 테스트를 통해서 개발을 이끌어나가는 형태의 개발론이다. 먼저 테스트 코드를 작성하고, 구현을 하는 방식이라고 보면 된다. TDD에는 3가지 절차가 있다. 실패 첫 번째 절차로 실패이다. 말 그대로 실패하는 테스트 케이스를 먼저 만드는 것이다. 상황에 따라 다르지만, 먼저 구현할 기능부터 하나씩 테스트 케이스를 작성한다. 성공 두 번째 절차로 성공이다. 앞서 작성한 실패하는 테스트 케이스를 통과시키기 위해서 코드를 작성하는 것을 말한다. 리팩토링 구현한 코드가 테스트를 통과한다면, 중복되는 코드 또는 개선시킬 방법이 있는 코드를 리팩토링 시킨다. 리팩토링을 했을 때 테스트 케이스가 성공하면 다른 기능을 다시 첫 번..

프로젝트의 Ligthouse를 확인해봤다. ?! 성능이 갈려버렸다... 그래서 바로 성능 개선을 나서기로 했다! 1. Code Splitting import Header from '../components/header'; import Test from '../pages/test'; import TestCreate from '../pages/testCreate'; // ... 다음과 같이 Router 를 사용하는 부분에서 각 페이지 컴포넌트를 Splitting 할 계획이다. 그 이유는 React 공식 사이트에서도 나오는데, 현재 페이지에서 사용자 경험을 해치지 않고 번들을 나누기 위해서는 라우트가 가장 확실하기 때문이다. 사용할 것은 React에서 제공하는 lazy와 Suspense이다. lazy는 동적으..