날쌘 개발자

패스트캠퍼스 환급챌린지 드디어 마지막날이다! 비록 프로젝트는 30일만에 완성하지못했지만, 차근차근 강의를 따라가며 완성해볼 생각이다. 오늘 해볼 것은 더치페이 서비스의 주 기능이라고 할 수있는, 정산 메인페이지의 좌측 하단에 위치할 정산 결과 컴포넌트 이다 먼저, 정산결과컴포넌트를 만들어줄 SettlementSummary 파일을 만들어준다. 만든 후 ExpenseMain의 LeftPane 내부에 주석처리 해놓았던 정산결과컴포넌트 렌더링 부분을 다음과 같이 수정한다. const LeftPane = () => ( ) 이제 SettlementSummary만 완성시켜주면 프론트면에서는 어느정도 완성된 모습이 보일것같았는데 언뜻 생각해보면 그냥 사람 수대로 돈을 나눠서 알려주면 되는거 아닌가? 했던거에 비해 생각..

패스트캠퍼스 환급챌린지 29일차 화이띵 오늘은 정산 리스트 컴포넌트의 실제 구현과 Style 적용을 해보려 한다. 형태만 주석처리 해놓은 ExpenseMain의 LeftPane과 RightPane부분에, 목업을 짜놓은 대로 LeftPane에는 AddExpenseForm 컴포넌트를, RightPane에는 ExpenseTable이라는 새로운 컴포넌트를 만들어서 구현해 주었다. 먼저 RightPane에 들어갈, 화면에 지출내역을 출력해주는 컴포넌트인 ExpenseTable을 보겠다. import { Table } from "react-bootstrap" import { useRecoilValue } from "recoil" import styled from "styled-components" import { ..

패스트캠퍼스 환급챌린지 28일차 화이팅~ 이번에 해볼 내용은 정산 리스트 메인페이지를 테스트하는 테스트코드 구현이다. 정산 내역 입력 컴포넌트에 쓰였던 ExpenseMain 파일에 이어서 구현하였다. ExpenseMain.spec.jsx import { render, screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { RecoilRoot } from "recoil" import { groupMembersState } from "../state/groupMembers" import { ExpenseMain } from "./ExpenseMain" import { render, sc..

패스트캠퍼스 환급챌린지 27일차 화이팅 얼마안남았다 오늘은 테스트코드만 만들어져있는 비용추가 컴포넌트를 직접 구현 및 스타일링 해보도록 하겠다. AddExpenseForm.jsx import { useState } from "react" import { Button, Col, Form, Row } from "react-bootstrap" import { useRecoilValue, useSetRecoilState } from "recoil" import { groupMembersState } from "../state/groupMembers" import { expensesState } from "../state/expenses" import styled from "styled-components" ex..

패스트캠퍼스 환급챌린지 26일차 화이팅 오늘은 가장 중요한 기능 중 하나인 비용 정산의 메인페이지 컴포넌트를 테스트하는 테스트파일을 공부해보도록 하겠다. 먼저 ExpenseMain.jsx export const ExpenseMain = () => { return ( Expense Main Component {/* Left Pane */} {/* TODO: 비용 추가 폼 컴포넌트 렌더링 */} {/* TODO: 정산 결과 컴포넌트 렌더링 */} {/* Right Pane */} {/* 그룹명 헤더 렌더링 */} {/* 비용 리스트 컴포넌트 렌더링 */} ) } 다음은 Jest와 React Testing Library를 활용한 테스트 코드 이다. ExpenseMain.spec.jsx import { rend..

패스트캠퍼스 환급챌린지 25일차 화이또 테스팅 툴 오늘은 테스팅을 실제로 하기 전 사용할 툴에대해 먼저 알아보고 어떤 특징을 갖고있는지 알아보려고 한다. BrowserStack https://www.browserstack.com/cross-browser-testing 실시간으로 여러 브라우저 / 기기에서 사이트를 구동해 볼 수 있는 라이브 테스팅 지원 스냅샷 테스팅 지원 = 스크린 샷을 이용한 테스팅 지원 깃헙과 연동해서 브랜치 별 비교 가능 브라우저 별, 버전 별 스크린 샷 제공 OS 별 구분은 아직 없음 모든 해상도가 존재하는 것은 아님 시각적으로 달라진 부분 하이라이트 기능이 있음 협업하기에 좋은 툴 - PR 처럼 Review / Approve 기능이 있음 무료 플랜도 충분 스냅샷 테스팅을 위해서는..

패스트캠퍼스 환급챌린지 24일차 화이팅~ Quality Assurance Testing - functional testing Functional testing = 기능 테스트 사용자에게 제공하는 기능들을 테스트하는 것 소프트웨어의 품질을 보증하기 위해 기능이 정상적으로 예상한 대로 동작 하는지 확인하는 과정 기능 테스트의 순서 1. 스모크 테스트 (Smoke testing) 테스트 환경이 테스트 할 만 한지, 간단하게 하는 환경 테스팅 본격적인 테스팅을 할 만한 가치가 있는 빌드인지 확인하기 위한 것 서비스의 가장 기본적인 (핵심적인) 기능들이 동작 하는지 빠르게 검증 개발자나 QA 테스터에 의해 수행됨 2. 회귀 테스트 (Regression testing) 기능 추가 혹은 버그를 수정한 소프트웨어가 수..

패스트캠퍼스 환급챌린지 23일차 화이팅!! ~ 구현단계는 잠시 건너뛰고 나중에 직접 따라해보기로 하고, 먼저 이론부분인 서비스 배포 단계 후, 디벨롭단계를 공부 한 후에 차근차근 구현해보도록 하겠다. 배포 프로세스 만들기 환경 분리 Main 외부 사용자에게 노출될 실제 production 환경 main 브랜치와 연동 독립된 데이터베이스와 서버와 호스팅 Staging Production과 비슷한 테스트 환경 staging 브랜치와 연동 독립된 데이터베이스와 서버와 호스팅 배포 프로세스 구축하기 Staging 에서 테스팅 Main (Prod)에 배포할 준비가 되었다면, Git: main 브랜치에 푸시 Amplify에 의해 배포 시작 (provision code -> build -> deploy -> veri..

패스트캠퍼스 환급챌린지 22일차 화이팅.,,, 멤버 추가 컴포넌트 구현 전의 그룹 생성 컴포넌트를 만들때와 마찬가지로, 먼저 테스트 코드를 만들어준다. AddMembers.spec.jsx import { render, screen } from "@testing-library/react" import userEvent from "@testing-library/user-event" import { RecoilRoot } from "recoil" import { AddMembers } from "./AddMembers" const renderComponent = () => { render( ) const input = screen.getByTestId("input-member-names") const save..

패스트캠퍼스 환급 챌린지 21일차 화이팅 ~ 그룹 생성 컴포넌트 Styling styled 컴포넌트를 이용해 컴포넌트 별 스타일을 꾸며준다. CenteredOverlayForm.jsx import { Container } from "react-bootstrap" import styled from 'styled-components' import { OverlayWrapper } from "./shared/OverlayWrapper" export const CenteredOverlayForm = ({ children }) => { return ( Dutch Pay {children} ) } const StyledHeader = styled.h1` font-weight: 200; letter-spacing: ..