날쌘 개발자

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

패스트캠퍼스 환급 챌린지 10일차 화이팅~ AWS Amplify 소개 모바일/웹 어플리케이션을 빠르게 구성+빌드+배포+운영까지 모든 라이프사이클을 한 곳에서 관리할 수 있도록 통합해둔 AWS의 풀스택 개발 통합 솔루션 서비스 둘러보기 Admin UI 제공 AWS 서비스와의 연동이 간편함. 인증 (Cognito) - 로그인, 회원가입, 추가 인증 등 서비스 모니터링/로깅 (CloudWatch) 데이터베이스 (DynamoDB, AUrora, GraphQL 지원) 앱 푸시 알림 (PinPoint) CLI (Command Line Interface)으로 할 수 있는 것들이 매우 많음. 프론트 엔드 초기 프로젝트 셋업 (React, Vue, Angular, Next.js 등 지원) 백엔드 프로젝트 셋업 (node..

패스트캠퍼스 환급챌린지 9일차 화이팅! 올바른 기술셋 선정하기 올바른 기술셋이란? 내가 사용하고 싶은 최신 기술 X 기술 후보군의 비교/분석 없이 결정한다면 추후에 해당 기술이 지원하지 않는 피쳐가 있을 경우 난감해짐. 최악의 경우에는 해당 기술을 드러내고 다른 기술을 다시 리서칭 해야 할 수도 있음. 무조건 최신 기술이라고, 무조건 많은 라이브러리를 쓴다고 올바른 것이 아님. 시스템의 요구사항을 잘 충족 시킬 수 있도록 서포트 하는 기술 O 왜 중요할까? 어떤 기술을 선택하느냐에 따라 소프트웨어 운영/유지 비용에 영향이 큼 AWS S3가 좋다고 들어서 사용했다가는 요금 폭탄 맞을수도 있음. 소프트웨어의 한계점을 만들어 낼 수도 있음. 특정 기술이 기능 면에서 한정적이거나 개발자가 다룰 수 있는 범위가 ..

패스트캠퍼스 환급챌린지 8일차 화이팅! Architecture Diagram 설계 설계에 앞서 강의에서는 LucidChart 툴을 사용 드래그앤 드랍으로 설계 가능 다양한 아이콘 지원 결과물 Sequence Diagram 설계 설계에 앞서 강의에서는 Plant UML 사용 사용하기 쉽고, Eclipse, VSCode등 다양한 플러그인 지원 UML syntax를 이용하여 다이어그램 이미지 파일 자동생성 시작하기 자바 설치 GraphViz 설치 VS Code Marketplace에서 PlantUML 플러그인 설치 프로젝트 폴더 아래에 /docs 폴더 생성 sequence_diagram.plantuml 파일 생성 Participant 선언 a. User, Database, Web client, DutchPay..

드디어 일주일 패스트캠퍼스 환급챌린지 7일차 화이팅! Sequence Diagram 객체 간의 상호작용을 시간순으로 시각화 한 다이어그램 시스템의 구조에 초점을 맞춘것이 아니라 시스템이 어떤 순서로 누구와 상호작용 하는지에 초점을 맞춘 behaviour diagram 왜 사용할까? 코드를 보고 시스템의 흐름을 파악하기는 매우 오랜 시간이 걸리고 어려움. 시스템이 어떤 순서로 요청을 처리하는지, 어떤 시스템과 소통을 하는지 쉽게 이해하기 위해 사용 언제 사용할까? 요구사항이 수집되고, 각 시스템 혹은 객체간의 메시징을 정의하는 설계단계. 요청을 처리하기 위해 여러 시스템/외부 서비스 간의 상호작용이 여러차례 일어 날 떄. 요청을 처리하기 위해 시스템 내에서 여러 객체간의 메시지 전달이 여러차례 일어날 때...

패스트캠퍼스 환급챌린지 6일차 화이팅! 시스템 설계 시스템의 요구사항을 충족하기 위해 필요한 아키텍처, 인터페이스 및 데이터를 정의하는 과정 소프트웨어를 구성하는 요소들 (a.k.a 컴포넌트) 간의 관계와 동적 메커니즘을 표현하기 위한 구조체 설계가 왜 필요할까? 설계가 후순위가 되면 시스템을 개발하는 비용이 더 많이 들고, 일부 또는 전체 시스템에 변경을 가하는 일이 현실적으로 불가능 해진다. - 책 Clean Archictecture 중 설계도가 없는 건물을 본 적이 있나요? 설계도 없는 건물이 안전할까요? 인테리어나 확장 공사를 한다고 할 때 건드려도 될 것과 건드리면 안될 것을 모르므로 안전하지 않음. 소프트웨어도 마찬가지 개발이 진행된 이후에는 이미 개발된 전체 시스템의 구조를 수정하기 어렵기 ..

패스트캠퍼스 환급챌린지 5일차 화이팅! Ch03-01 Task breakdown (테스크 세분화) Software 요구사항을 기반으로 task를 만듬 User story 단위로 task를 세분화 시켜보는 것에서 시작 처음부터 모든 것을 확정지으려고 하지 X. 조사가 필요한 부분도 있고, 설계가 필요한 부분도 있음. 그런 부분도 task로 만들어서 관리할 수 있음. 우선 User story를 기반으로 구체화 시킬 수 있는 범위의 task를 만들어 본다. -> 구현해야 할 기능과 조사해야 할 것이 몀확해짐. 세분화 예시 사용자로서, 나는 정산을 시작하기 위해 정산 이름을 입력하고 싶다. -> 시스템은 그룹 이름을 입력할 수 있는 창을 제공. ---> [프론트엔드] 그룹 이름 입력 컴포넌트 ---> [백엔드]..