### 목차
- [(서문) 개발공정](https://ohhoonim.blogspot.com/2024/02/blog-post_62.html)
- [1. 이벤트스토밍](https://ohhoonim.blogspot.com/2024/02/blog-post_47.html)
- [2. 유스케이스 구현](https://ohhoonim.blogspot.com/2024/02/blog-post_92.html)
- [3. 인프라 테스트](https://ohhoonim.blogspot.com/2024/02/blog-post_39.html)
- [4. UI 구현](https://ohhoonim.blogspot.com/2024/02/ui_21.html) <- 현재문서
## abstract
사용자가 애플리케이션을 이용하는 방법에는 화면(그래픽)을 제공하거나, 명령어 형태가 있다. 여기서는 프로그래밍을 잘 모르는 일반 사용자를 대상으로 하는 웹브라우저 그래픽 UI 구현으로 한정한다.
## tool
- Html / Css / Javascript : 브라우저에서 그래픽 화면을 제공하기 위한 필수 프로그래밍 언어이다.
- Nodejs : Javascript 를 브라우저가 아닌 서버 환경에서도 동작할 수 있게해준다.
- Vuejs : 화면 애플리케이션을 제작하는 프레임워크이다. 화면 애플리케이션을 Front-end라고도 부르는데 Front-end 애플리케이션을 제작하기 위한 프레임워크로는 Reactjs, Angularjs 등이 있다.
- Visual Studio Code : Front-end를 개발할 때 사용하는 대표적인 [[개발용어#^9f3a50|IDE]]이다.
- Typescript : Javascript는 객체 타입 정의와 관련한 문법이 존재하지 않는다. 이를 보완하는 superset 언어이다.
- Chrome Browser : 크롬 브라우저의 dev tool은 개발자를 위한 편의 기능을 제공한다. 브라우저의 개발 도구는 Edge, Firefox, Safari 에서도 사용할 수 있다.
## activity
- UX 디자인
- [[유스케이스 구현]] 공정에서 도출된 유스케이스를 기준으로 사용자가 UI를 이용하는 성향(경험)을 분석하고 적절한 UI 요소들의 배치를 디자인한다.
- UI 구현
- UX 디자인에서 제시한 가이드를 기준으로 컴포넌트를 구현한다. Material Design과 같이 잘 알려진 프레임워크를 사용할 수 도 있다.
- 대부분 유스케이스를 기준으로 화면이 제작되지만 그렇지 않는 경우도 다수 발생한다.
- Back-end의 Api 연결
- E2E 테스트
- Front-end to Back-end
- 전 구간에 대해 실무자가 애플리케이션을 테스트한다.
## output
- 디자인 가이드
- 애플리케이션의 UI에 대한 일관된 가이드를 제공한다.
- UX 컴포넌트
- 공유하여 사용할 공통 컴포넌트이다.
- 애플리케이션 시나리오
- 실 사용자가 애플리케이션을 사용하기 위한 가이드 시나리오이다.
- E2E 테스트에서도 그대로 활용 된다.
- 화면
## 구현사례
- [[회원가입 UI 구현]]
Session 대신 JWT를 사용하는 이유 실 서버는 하나의 인스턴트로만 동작하지 않는다. 서버의 고가용성(high availabliity, HA)을 확보하기 위해 두 개 이상의 병렬서버로 운영하게 된다. 서버가 병렬로 운영되는 상황에서 세션을 사용하면 각 서버간의 세션을 동기화하는 문제가 발생한다. 이를 해결하기 위해 공유 데이터베이스를 이용한 세션공유 기법들을 사용하기도 한다. 서버가 많아지면 세션동기는 더 어렵다. JWT를 사용하면 세션사용으로 인한 서버 자체에 부담도 줄이면서 공유 세션에 대한 관리가 한층 수월하다. 스프링 시큐리티 - SecurityConfig.java session을 사용하지 않도록 설정 jwtAuthFilter 추가 httpBasic 제거 - JwtAuthenticationFilter.java config.filter 패키지에 파일 추가 jwt dependency 추가 (3개). gradle refresh하는 거 까먹지 말기 config.service 패키지에 [JwtService.java](http://JwtService.java) 추가 jwtService와 UserDetailService final field 추가. @RequiredArgsConstructor 까먹지 말기 - config.service.JwtService 소스 참조해서 파일 작성 - controller, service 수정 User 를 리턴하면 pwd가 그대로 노출되므로 AuthResponse와 AuthRequest로 교체 Github https://github.com/ohhoonim/factory.git 유튜브 영상 스프링부트 - 보안 JWT JWT - refresh 토큰과 logout
``` [!NOTE] Winddows와 Macos macos를 기준으로 설명하고 있으나, 거의 대부분 macos의 `Cmd`키를 `Ctrl`키로 변경하면 windows에서도 그대로 사용할 수 있음 ``` # VSCode 단축키 - `Cmd + p` : 파일 오픈을 위한 palette - `Cmd + shift + p` : 명령어 실행을 위한 palette. `Cmd + p` 한 다음 '>'를 입력해도 됨 - `Cmd + shift + o` : 현재파일에서 심볼 찾기 (field, method, function 등). `Cmd + p`한 다음 '@'를 입력해도 됨 - `Cmd + Opt + ` : 열려있는 편집기 전환 - `Cmd + shift + e` : 편집기와 탐색기를 전환 함. (탐색기에서 vim 커서 이동 키도 동작한다는 것이 핵심) - `Cmd + Opt + ` : 열모드로 블럭 지정. (VIM단축키와 조합하면 최상임. 이건 글로 설명이 안됨) --- ``` [!NOTE] VSCode용 Vim 확장 - 여기서는 vscodevim 에서 제작한 Vim 확장을 설치하여 사용한다. Vim 단축키는 다를 바 없다. - `esc`키를 눌러 Normal모드 진입시 '한글' 입력상태인 경우 많이 불편하다. '한영'을 자동으로 변환해주는 여러 방법들을 써봤지만, 몇 일 지나면 풀려서 잘 동작 안한다. 그냥 Normal 모드 진입시 '한영'변환을 신경써서 잘 해주자. (시간낭비하지 마세요) - macos의 경우 `Cmd`키와 `Caps`키를 바꾸자. - Windows의 경우 `Ctrl`키와 `Caps`키를 바꾸자. (써보면안다. 얼마나 편한지) ``` ``` [!warning] - 표기된 모든 단축키는 `대소문자`를 구분합니다. (shift 입력하기 귀찮아서임) - `잘라내기`라고 표기한 것은 `붙여넣기`가 가능하다는 뜻입니다. - VIM 모드 전환은 직...
설치하기에 앞서 테스팅 이야기 ISO/IEC/IEEE 29119 에서는 소프트웨어 테스팅의 표준standard에 대해 정의하고 있습니다. 돈받고 파는 문서를 '표준'이라고 번역하기는 좀 껄끄러운데요. 'standard'는 비지니스를 안정적으로 수행할 수 있는 잘 정리된 '가이드' 정도가 올바른 번역이 아닐까 생각됩니다. 소프트웨어에 표준이 있다면 얼마나 좋겠습니까마는 no silver bullet 이라는 말도 있듯이 이건 그냥 iso에서 제시하는 가이드일 뿐이라는 것이 개인적인 의견입니다. 뭐 대단한거 한다고 시작하는데 말이 많군요. (^^;) 29119 part2에서는 테스트프로세스를 다루고 있구요. 이 중 test management process 항목이 있습니다. 어딜가나 비지니스가 끼어드니 management는 빠지는 곳이 없네요. 먹고살려면 어쩔수 없죠. 경영진을 설득하기 위한 부단한 연구라고 인정하는 수밖에. 출처 : http://softwaretestingstandard.org/part2.php 테스팅 서버를 구성하는 이유는 test management process 관점에서 'test monitoring & control'이 필요하기 때문입니다. (위 그림에서 가운데 노란색 박스) testlink 는 오픈소스로서 전 세계에서 가장 많이 사용되고 있는 툴이며 monitoring과 control을 위해 적절한 기능을 제공하고 있다고 판단됩니다. 맨티스는 testing completion 조건을 만족시키기 위한 테스팅 조직과 개발 조직간의 협업툴로서 이용될 수 있습니다. 개발조직에서는 맨티스와 같은 버그 리포트 툴을 사용하고 있으며 bugzilla, jira와 같은 다른 버그리포트 툴로 대체될 수 있습니다. 본 포스팅에서는 monitoring & control 을 수행하기 위한 테스팅 환경 구축이라고 보시...
댓글
댓글 쓰기