날쌘 개발자

패스트캠퍼스 환급챌린지 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: ..

패스트 캠퍼스 환급챌린지 20일차 화이팅~ 컴포넌트 구현 테스트 통과 시키기 1. UI 컴포넌트 작성 React-bootstrap plugin 설치 및 컴포넌트 이용 Form 제출 시, validated 와 noValidate 속성들을 이용하여 데이터 검증 및 Feedback 효과 주기 validate 속성 -> "해당 폼은 검증이 되었다" 고 명시하는 것. Boolean value를 넘겨주면 됨. noValidate 속성 -> "폼 제출시, 브라우저에서 자체적으로 제공하는 검증용 UI를 사용하지 않고, 폼 데이터의 유효성을 검사하지 않는다" 를 명시하는것 2. Recoil에 상태 저장 const [groupName, setGroupName] = useRecoilState(groupNameState) 테..

패스트캠퍼스 환급챌린지 19일차 화이팅 ~.~ 그룹 생성 컴포넌트 구현 (1) - UI 테스트 코드 및 테스팅 환경 셋업 VS Code 플러그인 설치 VS Code의 플러그인을 사용해서 테스팅 환경을 만들어보자 Jest 테스트 Runner through UI - https://marketplace.visualstudio.com/items?itemName=firsttris.vscode-jest-runner Meta (전 Facebook) 에서 만들고 관리하는 자바스크립트 테스팅 라이브러리. 테스트 코드의 모양이 직관적이고, 문서화가 잘 되어있어 요즘 많이 활용되고 있다고 한다. ESLint - https://marketplace.visualstudio.com/items?itemName=dbaeumer.vs..

패스트캠퍼스 환급챌린지 18일차 화이팅.. CSS flex 딥 다이브 CSS flex 란? CSS3의 웹용 레이아웃 모델 중 하나로, Flexible Box Layout이라고 불리기도 함. 줄여서는 Flexbox Flexbox인터페이스 내의 아이템 간 공간 배분 및 정렬 기능을 제공 아이템들을 화면에 맞게 유동적으로 배치하기 위해 많이 사용 되는 기술 애초에 1차원 레이아웃 모델로 설계됨 레이아웃을 다룰 때 한 번에 하나의 차원(행이나 열)만을 다룬다는 의미 Flex의 두 축 Main 축 flex-direction 속성으로 정의 가능 Row, Row-reverse -> inline direction Column, Column-reverse -> block direction Cross 축 Main 축의 수..

패스트캠퍼스 환급챌린지 17일차 화이팅~ Bootstrap layout 간단한 부트스트랩 소개 트위터에서 시작된 오픈 소스 프론트엔드 프레임워크 각종 레이아웃, 버튼, 입력창 등의 디자인을 CSS와 JavaScript로 만들어 놓은 것 Bootsteap의 레이아웃을 이용하면 쉽게 반응형 (responsive) 웹 페이지를 만들 수 있음. Grid = 격자 화면을 12열로 분할 해두고 화면 사이즈에 따라 크기 (width) 설정 가능 (e.g. 1/12, 2/12) 구성 요소 Container Bootstrap에서 그리드 시스템을 사용할 때 필수적으로 필요한 요소 컨테이너는 콘텐츠를 중앙에 정렬하고 가로로 채움 이론상 컨테이너는 중첩될 수 있지만, 대부분의 레이아웃에는 중첩된 컨테이너가 필요하지 않음. R..

패스트캠퍼스 환급챌린지 16일차 화이팅!!!!! 개발 환경 구축 1. AWS Amplify를 이용한 개발 환경 셋업 AWS 계정 생성 후 로그인 Amplify CLI 설치 npm install -g @aws-amplify/cli create-react-app 으로 프로젝트 생성 2. Amplify와 Github 연동 깃허브에서 새로운 레포지러티 생성 git remote add origin 깃헙주소 git push -u origin master 3. 더치페이 프로젝트 생성 레이아웃 구현 1. 디자인을 토대로 레이아웃 구현 Figma디자인과 Class diagram 비교 프로젝트 내 docs/디렉토리 생성 후, Part 3 에서 만든 다이어그램들 이동 Figma 디자인과 Class diagram 비교하면서 ..

패스트캠퍼스 환급챌린지 15일차 화이팅~ 테스트 작성의 정석 -의미 있는 테스트 작성하기 -의도한 대로 정확히 작동하는지 검증하는 절차 테스트의 종류 단위 테스팅 (Unit testing) 하나의 모듈/컴포넌트/클래스가 기대한대로 동작하는지, 제공하는 기능들을 테스트 대상 컴포넌트에서 의존하는 일부 대상은 목(mock) 객체를 이용하여 테스트 하기 편한 환경을 구축할 수 있음. 개발자가 작성 자동화된 테스팅 통합 테스팅 (Integration testing) 두 개 이상의 모듈이 잘 연동/연결이 되었는지 테스팅. 모듈 간에 발생하는 에러 검증 e.g. 3rd party API를 호출하면 어떤 응답을 기대하는지 테스팅 개발자가 작성 자동화된 테스팅 E2E 테스팅 (Ent-to-end testing) 실제 ..