프론트엔드
-
CRA 없이 React 설정하기 2프론트엔드 2023. 5. 22. 18:29
이번 글은 저번 CRA 없이 React 설정하기 1의 react 기본 설정과 eslint, prettier 도입 이후 webpack과 babel을 설정하는 과정을 작성할 예정입니다. 이번 글의 목표는 react 앱에 webpack과 babel을 적용시키는 것입니다. 각 옵션들이 필요한 이유와 목적 등을 이해하면서 글을 작성해보도록 하겠습니다. webpack과 babel을 사용하는 이유 webpack은 프로젝트 번들러로 프로젝트에 필요한 자원들을 합쳐주는 역할을 합니다. 여러 개로 나누어진 파일들을 하나로 합쳐줌으로써 네트워크 비용을 줄여줍니다. babel은 트랜스파일링 도구로 최신의 자바스크립트 문법을 오래된 브라우저가 이해할 수 있도록 오래된 문법으로 변환해주는 역할을 합니다. 모든 브라우저에서 호환 ..
-
CRA 없이 React 설정하기 1프론트엔드 2023. 5. 20. 15:58
이 글을 쓰게 된 배경 CRA가 나타난 배경 Creat React App이 없는 이전에는 여러 도구를 설치하고, 개발 환경을 구성하고, 여러 사전 설정을 한 뒤 린트를 구성하는 등의 개발 전에 해야할 것들이 굉장히 많았습니다. 이런 구성을 프로젝트 시작마다 하는 것은 굉장히 까다로운 일이었을 것입니다. 이에 사람들은 자신만의 보일러 플레이트를 만들어 공유함으로써 대처할 수 있었습니다. 하지만, 여기서도 문제점이 발생했습니다. 각 프로젝트마다 달라지는 설정에 따라 변경이 요구되고, 오래된 설정은 업데이트를 해야하며 다른 라이브러리와의 호환하여 동작하도록 하기 위해서도 많은 노력이 필요했습니다. 이를 보완하기 위해 Creat React App이 등장하였고, CRA는 필요한 라이브러리를 묶어 패키지로 결합하고..
-
Storybook Addons프론트엔드 2023. 4. 26. 16:07
지금까지 컴포넌트를 구성하고 스냅샷 테스트 환경을 구성해봤습니다. 이번 포스팅에서는 Storybook의 Addons에 대해 알아보도록 하겠습니다. Addons 스토리북은 방대한 addons 생태계를 가지고 있습니다. 현재까지 저희는 storybook 앱의 밑에 탭에 있는 Controls와 Interactions에서 약간의 addons를 사용했었습니다. storybook의 addons들은 이보다 훨씬 많으며 용도에 따라 설치하여 사용할 수 있습니다. (storybook addons) Controls addon 이전에 사용했던 Controls addon은 컴포넌트가 받은 인자값들을 마음대로 수정할 수 있었습니다. 이 인자값들을 수정해보면서 생각해보지 못한 edge case는 없는지 찾아보면서 UI가 깨지지는..
-
Storybook 스냅샷 테스트프론트엔드 2023. 4. 24. 10:32
이번 포스팅은 간단히 배포가 된 사이트에 대해 PR을 보낼 때, UI 변형이 일어난 경우 어떻게 되는지 확인해보는 방법을 간단히 확인해보려고 합니다. 1. GitHub에 Chromaitc 설치하기 이미 이전 포스팅에 Chromatic에 storybook 배포하는 단계에서 Chromatic에 GitHub 연동을 해줬다고 생각해서 그냥 Pull Request를 올렸는데 웬걸... UI 테스트가 하나도 진행되지 않았습니다. 그래서 크로마틱 웹 사이트를 다시 들어가봤더니 옆에 PRs 탭이 있었고, 여기 들어가보니 GitHub에 Chromatic을 설치하라는 버튼이 있었습니다. 2. 분기 브랜치에 대한 build 2. 분기 브랜치에 대한 build는 GitHub Actions를 통해 자동 배포하는 것이 좋을 것 ..
-
Storybook 화면 구성하기프론트엔드 2023. 4. 20. 15:07
현재까지 만든 컴포넌트는 Storybook 앱에서만 사용하고 있었습니다. 이번 포스팅에서는 실제 화면 구성을 Storybook을 이용해보도록 하겠습니다. 1. redux api 호출 //src/redux/tasks.ts export const fetchTasks = createAsyncThunk('todos/fetchTodos', async () => { const response = await fetch( 'https://jsonplaceholder.typicode.com/todos?userId=1' ); const data = await response.json(); const result = data.map((task: any) => ({ id: task.id, title: task.title, s..
-
Storybook 데이터 연결하기프론트엔드 2023. 4. 19. 19:30
이전 포스트까지 독립된 환경에서 상태를 가지지 않는 컴포넌트를 작성해보았습니다. 이번 포스트에서는 실제 데이터를 연결한 컴포넌트에 대한 Story 작성을 살펴보도록 하겠습니다. 1. Redux 설치 및 적용 redux를 이용해 전역상태를 정의해주겠습니다. redux 관련 패키지 설치 npm install @reduxjs/toolkit react-redux src/redux/tasks.ts 작성 interface StateType { tasks: TaskType[]; status: string; error: any; } interface ActionType { id: string; newTaskState: string; } const initialState: StateType = { tasks: [], s..
-
Storybook 컴포넌트 만들기 2프론트엔드 2023. 4. 18. 10:46
저번 포스팅에서 Storybook을 이용해 Task 컴포넌트를 생성했습니다. 이번 포스팅에서는 이 Task 컴포넌트를 여러개 생성하여 TaskList 컴포넌트를 만들어보겠습니다. 1. TaskList의 스토리 DEFAULT - 일반 Task들의 리스트입니다. PINNED - 핀으로 고정된 Task들이 있을 경우 해당 Task를 일반 Task보다 위에 위치하도록 해줘야 합니다. Empty - TaskList가 비어있는 경우입니다. LOADING - Task가 비동기식으로 전달 될 경우 연결이 없는 상태를 렌더링해줍니다. 2. TaskList story 구성 우선 story default export에서 내보낼 TaskList 컴포넌트를 구현만 해줍니다. function TaskList() { return ..
-
Storybook 컴포넌트 만들기 1프론트엔드 2023. 4. 17. 18:59
이전 포스트에서 Storybook 설정 및 배포 방법에 대해 알아보았습니다. 이번 포스트에서는 컴포넌트의 상태를 설정하여 스토리를 구성하고 테스트하는 과정을 살펴보도록 하겠습니다. 이번 포스트는 React + Storybook를 레퍼런스로 하고 있습니다. 1. Task 컴포넌트 만들기 Task는 체크박스, 정보, 위아래로 움직일 수 있도록 해주는 pinned이 있습니다. Task의 상태는 TASK_INBOX, TASK_PINNED, TASK_ARCHIVED가 있습니다. 이를 위해 정의된 props는 아래와 같습니다. title - task를 설명해주는 문자열 state - 현재 어떤 task가 목록에 있으며, 선택되어 있는지의 여부 Task 컴포넌트는 아래와 같이 정의해줍니다. import { TaskT..