날쌘 개발자

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

패스트캠퍼스 환급챌린지 14일차 화이팅! TDD "Test-Driven Development" 의 약자 한국어로는 "테스트 주도 개발" "디자인 -> 로직 구현 -> 테스트" X "디자인 -> 테스트 코드 -> 로직 구현" O 소프트웨어를 동작시키기 위한 로직을 구현하기 전에 테스트 코드를 먼저 구현하는 것을 프로세스화 한 개발 방법. 반복 테스트를 이용한 소프트웨어 방법론. 테스트 코드가 왜 중요할까? 작성한 코드가 의도적으로 동작하는지 수시로 빠르게 검증할 수있음. 매번 서버를 돌려서 수동적으로 input/output을 검증하는 비효율적인 방법에서 벗어날 수 있음. 리팩토링을 할 때 -> 리팩토링 후에도 소프트웨어가 여전히 같은 기능을 제공할 수 있도록 안정망 역할 잘 작성된 테스트 코드는 소프트웨어..

패스트캠퍼스 환급챌린지 13일차 화이팅!~ JEST JEST is a delightful JavaScript Testing Framework with a focus on simplicity - JEST 공식 홈페이지 프론트엔드 어플리케이션을 쉽게 테스팅 할 수 있도록 다양한 인터페이스를 제공하는 JavaScript용 테스팅 프로엠워크. 메타(전 Facebook)에서 만들었고, 오픈소스로 배포 (create-react-app 프로젝트로 React 프로젝트를 생성하면 기본적으로 내장되어 있음. 문서화가 아주 잘 되어있고, 많은 테크 회사에서 사용 중) JEST의 철학 JEST를 이용해 테스팅의 기쁨을 느껴보자. 특징 고립됨 (isolated) 각 테스트 케이스는 고립된 환경에서 돌아감 고립되었기 때문에, 테..

패스트캠퍼스 환급 챌린지 12일차 화이팅! Styled-components ES6와 CSS의 장점을 누리면서 당신의 앱을 스트레스 없이 스타일링 하세요! -Styled 홈페이지 번역 파일 단위의 CSS가 아닌, 컴포넌트화 된 스타일링 기법 소개 Lyft, Coinbase, Atlassian, Doordash, Jane 등 다양한 테크 회사에서 사용중인 라이브러리 왜 사용할까? 리액트 컴포넌트를 CSS로 쉽게 styling 하기 위한 방법 제공 어떻게 쉽게? 코드 스플릿(code split): 하나의 CSS 파일을 전역으로 적용하는 것이 아닌 컴포넌트 단위의 스타일링 가능. 필요한 코드만 로드 className이 중복될 염려 X : styled-components는 각 컴포넌트에 대해 고유한 class 이..

패스트캠퍼스 환급챌린지 11일차 화이팅~~ React Router React 어플리케이션에서 페이지/컴포넌트 네비게이션을 위해 쓰이는 표준 라이브러리 URL에 따른 UI를 동기화하여 일정한 경험을 제공. 페이지 라우팅 - 주어진 요청(URL)에 따라 해당 URL을 어떤 handler에서 처리하고 어떤 페이지를 렌더링 할 지 결정하는 과정 공식문서 https://reactrouter.com/en/main React Router가 하는 일 History Stack - 브라우저의 히스토리 스택. 웹 브라우저는 스택에 사용자가 방문해왔던 링크를 차곡차곡 저장함. Router - 가장 최상단에 있는 stateful 컴포넌트로, 다른 컴포넌트들과 hook이 동작할 수 있게 함. Route - {path, eleme..