정리왕 Ag

 SW의 3P 

: People (인적자원), Process (프로젝트 수행을 위한 Framework/전체 계획,구조),  Problem (문제분석, 인식)

 SW 상위 설계 

: 아키텍쳐/ UI설계 / 인터페이스 정의

 SW 설계지침 

: 모듈기능이 예측 가능하도록, 이식성 고려, 적당한 크기 유지 

 SW 언어선정 기준 

: 적정성, 효율성, 이식성, 친밀성, 범용성

 SW영역 결정요소 

: 기능, 성눙, 제약조건, 인터페이스, 신뢰도

 SW 품질목표 

- 시스템 SW 

: OS, Web Server, WAS를 위한 서버프로그램, DBMS

: 메모리 적재, 인터럽트 관리, 기억장치 관리

- 응용 SW 

: 복잡수학 계산

- 실시간 SW 

: 인터럽트와 문맥교환의 표현, 태스크들 간의 통신과 동기화, 비동기적 프로세싱, 타이밍 제약의표현을 고려하여 설계

 인터럽트 

> 프로그램검사 : 0으로 나누기, Underflow/Overflow, 명령어잘못입력, 프로그램상 오류

> SVC : 의도적 호철, 복잡한 입출력처리시, Operator와 대화 필요시

> 입/출력 : 이상현상 발생시, 입/출력 data오류시

> 외부 : 시간만료, Operator가 콘솔창에 인터럽트키 입력시

- 개발 SW 

: 요구사항 관리도구, 설계/ 모델링도구(UML지원), 구현/ 테스트/ 형상관리/ 빌드 도구

 > 구현도구 : 이클립스, IDEA, VS, Node.js

 > 테스트 도구 : CPP/ HTTP/ N unit/ Spring Test

 형상관리 

: 가시성, 추적성(진행정도), 방해요인 최소화 보장하여 품질과 생산성↑, 개발비용↓

: 유지보수,개발 단계에 적용/ 동시개발 가능, 불필요 사용자 수정제한, 변경/제어 관리

> 대상 - 분석서, 지침서, 소스코드

> 기능 - 형상식별 : 특정절차/도구 결합, 관리계획 근거로 대상 식별 과정

          - 버전 제어 기술 :  대상에 이름/관리번호 부여하여 계층관리 함으로써 수정/추적용이 

 > 버전관리도구

* Sub Version(=SVN)

 : 개발작업은 Trunk(몸통)에서, 추가작업은 Branches(서브디렉토리)에서 수행

 : 유닉스 서버사용, 주 명령어 diff

* Git

 : 로컬에서 버전관리, 원격저장소나 네트워크 문제 시에도 작업가능

 : Branch 이용시 다양한 기능 테스팅 가능, 파일변화 스냅샷

> 분석 자동화 도구 CASE

 결함관리 

: 계획→ 기록→ 검토→ 수정→ 재확인→ 보고서 작성 (모니터링, 결함상태 추적)

 일정관리  

 빌드 자동화 도구 

: 빌드를 포함하여 테스트/ 배포를 자동화하는 도구, 지속적인 통합개발환경에서 유용하게 활용됨

** 빌드 = 소스코드 파일들을 컴파일하여 여러 모듈로 묶어 실행파일로 만드는 과정

 인터페이스 

: 두 시스템/ 장치 사이의 정보와 신호 전달시(내/외부 모둘연계) 접점, 경계면

 > 설계서 (시스템 인터페이스 현황파악에 도움)

  : 시스템 사이 교환 데이터/ 업무/ 기능의 세부 인터페이스 정보/ 인터페이스 목록과 상세데이터의 명세내역 정의

 > 구축방식 

  - EAI : 연계성/ 효율성/ 확장성 ↑

  - ESB  : 관리/보안 용이, 높은수준 품질지원가능, 연계/데이터 변환, 서비스 중심 통합지향

             : 웹 서비스 지원등 표준기반의 인터페이스 제공 솔루션, 범용적사용을 위해 결합도 약하게 유지

> 모듈 간 기능식별

  - 연계 기능식별 : 시나리오 형태로 구체화하여 식별

  - 인터페이스 기능식별 : 인테페이스 동작(외부모듈 결과와 요청에 따른)에 필요기능 식별, 실질적 필요기능 선별해서 구현 

> 기능 구현 

  : 컴포넌트 /인터페이스 명세서 확인→ 데이터 표준, 모듈내부 설계서 통해 일관된 기능구현 정의→ 정의된 기능 구현 정형화(usecase다이어그램, 프로세스 형태로)

> 예외처리

   -  데이터 통신을 이용한 방법 AJAX기술 : JSON, XML객체 주고 받음   -  인터페이스 엔티티를 이용한 방법

 사용자 인터페이스 UI 

: 결과오류 최소화, 구체적 방법 제공, 사용성 향상과 상호작용 수단/방식 제공이 목적

: 쉽게 사용가능 하도록 사용자 요구사항 반영되도록 제작

 > 입력 인터페이스 종류 : 문자방식명령어 CUI / 그래픽 환경기반 마우스 GUI / 사용자 말,행동 기반 제스쳐 NUI

 > 설계원칙 : 직관성, 유효성, 학습성, 유연성

 > 개발시스템 기능 : 사용자 입력 검증, 에러/메시지 처리, 도움/ 프롬프트 제공

 아키텍처 

: 품질 요구사항을 반영하여 품질 속성을 결정, 시스템 구조/행위/뷰를 정의하는 개념적 모형 (SW기본구조)

: 개발시간 단축, 품질향상, 예측가능, 유지보수 용이함

> 프레임워크 - 구성요소: 아키텍처 명세서, 이해관계자, 관심사, 관점, 뷰, 근거, 목표, 환경, 시스템

> 아키텍처 4+1 뷰 : 고객요구사항을 정리해놓은 시나리오를 4가지관점에서 바라보는 SW적인 접근법

                              : 4개의 분리된 구조로 구성되는 아키텍처의 개념 제시해 충돌/ 요구충족 여부를 증명을 위해 usecas사용

                  - 구성요소 : (논리/구현/프로세스/배포) 뷰 + usecase(사용자, 설계자, 개발자, 테스트관점) 뷰

> 패턴종류

> 품질속성 

> 아키텍처 비용평가 모델

 - SAAM : 변경용이성, 가능성에 집중과 평가가 용이

 - ATAM : 품질속성 판단과 이해 상충관계를 평가

 - CBAM : ATAM중심, 의사결정에 대한 요구평가

 - ADR : 구성요소간 응집도를 평가

 - ARID : 전체 아키텍처가 아닌 특정부분의 품질요소에 집중하여 평가

 가상화 기반 네트워크 

> NFV

 : 범용 하드웨어(서버, 스토리지ㅡ 스위치)에 가상화 기술적용하여 네트워크 기능을 가상화 기능으로 모듈화 

 : 구성요소 -VNFS(sw 패키지), NFVI(흐름테이블을 비교해 패킷처리 제어), MANO(사이클 관리, VNF조율)

> 오버레이 네트워크

 : 구성요소 -DHT, 오버레이노드, 베이스노드, 식별자, 맵핑

> VLAN

 : Broad Cast 도메인을 구분할 수 있게 해주는 기술, 보안성↑

 : 종류 - 프로토콜/ MAC/ 네트워크 주소기반 VLAN

 교환망 

- 회선교환방식

- 축적교환방식

> 패킷 종류

> 패킷 기능

IP 데이터그램 구조 (경로설정X)

: Version/ Protocol/ Identificatior

 X.25프로토콜 

> 물리계층 : 패킷교환망 통해 DCE/DTE간 인터페이스 제공, 전기적/기계적/절차적/기능적 특성가짐, 비트 단위들 교환

> 링크계층 : HDLC 프로토콜 기반

> 패킷계층 : Sliding Window 프로토콜 사용, 다중화기능, 망 고장 시 회복 매커니즘 규정

                  : 연결 지향성을 기술한 가상회선을 지원함(회선 설정/해제)

   * 가상회선 : SVC(통신시에만 통신경로 설정/해제), PVC(통신경로 고정적으로 ) 

 IT스토리지 기술 

> 내장디스크형

> 직접부착형 DAS

> 스토리지 가상화 : 여러기기 용량을 물링하여 하나의 기기에 있는거처럼 보임

> 소프트웨어 정의 SDS : 가상화적용, 하나처럼 관리하고 운용, sw를 추상화, 기기 자체에서 분리하여 사용

   > NAS 네트워크연결 스토리지 :  파일을 체계화하여 상위계층에 배포가능

   > SAN 스토리지영역 네트워크 : 고속전송, 장거리연결기능 활용, 저장장치/백업장비를 단일화시킨 시스템

        > FC-SAN,  IP-SAN

 서비스공격 

+  nmap : 서버에 열린 포트정보를 스캐닝하여 보안취약점을 찾는 도구

    Tripwire : 크래커 침입/ 백도어생성 / 설정파일 변경시 분석하는 도구

 매체접근제어 MAC 

**

IEEE 802.4 = 토큰버스

IEEE 802.5 = 토큰링

IEEE 802.11 = 무선LAN

IEEE 802.15 = 블루투스

정말 간단한거지만

전 api를 사용하는 방법을 몰랐죠,,,

카페를 너무 좋아해서 다 메모 해놓으며

약속 전 날 매일 메모와 지도

그리고 인스타에서 사람들이

어떤 사진을 찍었는지 보면서

카페를 다녔는데

너무 불편해서 만들게 되었어요!!

그래서 강제로 API도 알게 되었습니다 

๑'ٮ'๑

(카페에 진심인 녀자)

나중에 여행 갈 곳도 추가 할려고 이렇게 메뉴판으로

나눠 놓았어요

그리고 지역버튼을 누르면 드롭다운메뉴로 세부지역을 고르게

해 놓았습니다.

클릭하고 들어가 보면

대부분 모바일로

보는 사람이 많기 때문에

모바일 사이즈도 따로 설정 해줬어요.

@media only screen and (max-width:500px) {
  /* For mobile phones: */
  #back, #list, #menu, #container, #wrap{
    width: 100%;
  }
  #map{
    margin-top: 5px;
    width: 90%;
    height: 300px;
  }
  #wrap{ //지도+목록 감싸는 박스
    display: block;
    margin-bottom: 100px;
  }
}

그리고 버튼을 누르면

해당하는 구 또는 지역에 해당하는 목록만 보여주도록

제이쿼리를 이용해 구현해 보았습니다

이렇게 선택하면

목록이 바뀌었어요

<script>

 $(document).ready(function () {
        $("#id명").click(function () {
          $("보여줄요소의 #id또는 .클래스명").show();
          $("#id/ .클래스명").hide();
          $("#id/ .클래스명").hide(); //숨길목록의 id와 클래스명
        });
      });

</script>

카페 목록을 추가할때 이미 사이즈나 flex 설정할때 이미 id로 써서 저는 class명도 추가해서 지역마다 동일한 클래스이름을 사용하여 기능을 구현했습니다.

+ 저기 인스타그램글씨를 누르면 해당 카페 사진이 보이도록 했어요!

링크 클릭!

http://silverline.dothome.co.kr/