하이고니의 개발 스토리

오 이거 꽤나 어렵군요 ㅎㅎㅎ 좀 더 복습해서 익숙해지도록 해봐야겠습니다. 현재 부트캠프 진도가 굉장히 빡세게 나가고 있어서 언제 보충이 될지는 미지수지만,,,,, User가 처음으로 페이지에 들어왔을 때! (root url을 GET) 아래는 처음 웹 페이지에 접속했을 때의 flow다. @startuml participant User participant "Web Client" as C participant "DutchPay Server" as S User -> C: GET / activate C C -> S: static asset 요청(HTML/CSS 등) activate S S --> C: HTML/CSS 등 응답 deactivate S C -> C: 그룹 입력 페이지로 redirection C -..

우리는 때때로 코드에서 호출하는 방식에 따라, 다양한 타입으로 구문이 작동하게끔 하고 싶다. 위 코드에서 getSize 함수의 인자는 숫자가 요소로 포함된 배열이기 때문에, 다른 요소를 포함한 배열을 인자로 받을 수 없다. 아래의 예시도 보자. class DataStorage { private data: (string | number | boolean)[] = []; addItem(item: string | number | boolean) { this.data.push(item); } removeItem(item: string | number | boolean) { if (this.data.indexOf(item) === -1) { return; } this.data.splice(this.data.ind..

들은 강의: Part 3. 프로젝트 설계하기 05. [실전] 시스템 설계 (1) - Architecture diagram 설계에 앞서, 강의에서는 LucidChart 툴을 사용한다고 한다. 아래 링크에서 확인할 수 있다. Intelligent Diagramming | Lucidchart Lucidchart is your solution for visual communication and cross-platform collaboration. www.lucidchart.com 여기서 new document를 만들어 사용할 수 있다. Lucid visual collaboration suite: Log in Log in to access the Lucid Visual Collaboration Suite luci..

가장 많이 사용되는 테스트 툴 Jest를 사용하는 법에 대해 알아봅시다~ 1. 프로젝트 폴더 하나 만든 다음, 터미널에 $ npm init 를 입력한다. 2. package.json 파일의 test 옵션을 "jest"로 변경한다. 함수를 담아둘 파일(fn.js)을 하나 만들고, 테스트를 위해 간단한 함수를 입력한다. const fn = { add: (num1, num2) => num1 + num2, }; module.exports = fn; 이제 테스트 파일(fn.test.js)을 만들고, 테스트 코드를 작성한다. .test.js 로 끝나는 파일 혹은 __tests__ 폴더 안에 있는 파일은 자동으로 테스트 대상이 된다. const fn = require("./fn"); test("1은 1과 같다.", ..

들은 강의: Part 3. 프로젝트 설계하기 04. [이론] 시스템 설계 (3) - Class diagram 클래스 다이어그램이란? 한 시스템을 구성하는 클래스들의 구조(structure), 속성(attribute), 메서드(method)를 시각화한 diagram 클래스의 구조 및 클래스 간의 관계에 초점을 맞춘 structural diagram 객체가 아닌 정적인 클래스. '정적'이란 것은 시간이나 조건에 대한 것을 염두에 두지 않은 것. 왜 사용하나요??? 클래스 간의 관계, 의존성을 빠르게 파악할 수 있다. 새로운 요구사항이 들어왔을 때, 재사용하거나 확장할 만한 클래스가 있는지 빠르게 파악 가능 소프트웨어가 완성된 후 구현 설명을 위해 사용할 수 있다. 새로운 팀원이 왔을 때 빠르게 시스템 구조를..

들은 강의 Part 3. 프로젝트 설계하기 03. [이론] 시스템 설계 (2) - Sequence diagram 시퀀스 다이어그램이란? 객체 간의 상호 작용을 시간 순으로 시각화한 다이어그램 시스템의 구조에 초점을 맞춘 것이 아니라 시스템이 어떤 순서로 누구와 상호작용하는지에 포커싱된 behaviour diagram 왜 사용하나요??? 코드를 보고 시스템의 흐름을 파악하기에는 매우 오랜 시간이 걸리고 어렵기 때문에 시스템이 어떤 순서로 받은 요청을 처리하는지, 어떤 시스템과 소통을 하는지 쉽게 이해하기 위해 언제 사용하나요??? 요구사항이 수집되고, 각 시스템 혹은 객체 간의 메시징을 정의하는 설계 단계에서 요청을 처리하기 위해 여러 시스템/외부 서비스 간의 상호 작용이 여러 차례 일어날 때 요청을 처리..

아키텍처 다이어그램(Architecture Diagram) 시스템의 전체 구조. 시스템 간의 상호 작용 및 의존성을 high-level에서 가시화한 다이어그램 각 시스템이 어떻게 동작하는지, 어떤 데이터를 다루는지 등의 구체적인 내용은 생략하고 전체적인 맥락에서 기술. 왜 사용합니까?? 시스템이 어떤 순서로 요청을 처리하는지, 어떤 시스템과 소통하는지 쉽게 이해하기 위해 코드만을 보고 시스템의 흐름을 파악하기에는 오랜 시간이 걸리고, 효율적이지 않아서 소프트웨어의 큰 구조/그림을 한 눈에 파악하기 위해 언제 사용합니까?? 요구사항이 수집된 후, 초기 설계 시 새로운 팀원이 시스템 구조를 파악해야 할 때 추가 요구사항이 수집되어, 시스템을 변경해야 할 때 ** 소프트웨어의 규모가 크면 클수록 설계도의 중요..

rotatedArraySearch 문제 부분적으로 오름차순 정렬된 정수의 배열(rotated)과 정수(target)를 입력받아 target의 인덱스를 리턴해야 합니다. 부분적으로 정렬된 배열: 배열을 왼쪽 혹은 오른쪽으로 0칸 이상 순환 이동할 경우 완전히 정렬되는 배열 예시: [4, 5, 6, 0, 1, 2, 3]은 왼쪽으로 3칸 또는 오른쪽으로 4칸 순환 이동할 경우 완전히 정렬됩니다. 그러면 연속된 숫자들만 있다는 거겠네?? 입력 인자 1 : rotated number 타입을 요소로 갖는 배열 rotated[i]는 정수 인자 2 : target number 타입의 정수 출력 number 타입을 리턴해야 합니다. 주의사항 rotated에 중복된 요소는 없습니다. target이 없는 경우, -1을 리턴..

시스템 설계란? 시스템 설계 시스템의 요구사항을 충족시키기 위해 필요한 아키텍처, 인터페이스 및 데이터를 정의하는 과정 소프트웨어를 구성하는 요소들(a.k.a 컴포넌트) 간의 관계와 동작 메커니즘을 표현하기 위한 구조 시스템 설계가 왜 필요한가? 설계를 후순위로 두면 시스템을 개발하는 비용이 오히려 더 많이 들고, 일부 또는 전체 시스템에 변경을 가하는 일이 현실적으로 불가능해진다. - 책 'Clean Architecture'에서 설계도 없이 지어진 건물은 없다. 설계도 없이 지은 건물은 안전할까? 개발이 진행된 이후에는 이미 개발된 전체 시스템의 구조를 수정하기 어렵기 때문에 미리 설계해야 한다. 설계 과정이 있어야 확장성, 보안 등 시스템에 요구되는 다양한 요구사항을 잘 충족시킬 수 있다. 설계의 유..

OAuth란? 우리가 웹이나 앱에서 흔히 볼 수 있는 소셜 로그인 인증 방식은 OAuth 2.0라는 기술을 바탕으로 구현된다. 직접 작성한 서버에서 인증 처리를 해주는 것과는 달리, OAuth는 인증을 중개해주는 메커니즘이다. 이미 사용자 정보를 가지고 있는 웹 서비스(Naver, Kakao, Google 등)에서 사용자의 인증을 대신해주고, 접근 권한에 대한 토큰을 발급한 후 이를 이용해 내 서버에서 인증을 할 수 있도록 해준다. 유저 입장에서 각각의 서비스별 ID와 Password를 다 기억한다는 것은 굉장히 힘들고 귀찮은 일이다. OAuth를 활용한다면 자주 사용하고 중요한 서비스들의 ID와 Password만 기억해놓고 해당 서비스들을 통해 외부 서비스에 로그인 할 수 있다. 뿐만 아니라 OAuth..