반응형
반응형

 

1. 요구사항 분석

제품을 만들 때 현재 이와 비슷한 제품은 없는 지 어떠한 서비스가 있고 어떤 자료를 수집해야할지 등에 대한 요구사항 및 분석의 단계이다

 

2. 설계

요구사항을 토대로 우선순위, 마일스톤, 개발에 필요한 환경 구축 등을 한다

백로그

  • 백로그 관리
    • 제품의 개발 방향을 결정한다 → 요구사항, 기능, 개선, 리스크를 정리 후 우선순위를 정한다
    • Notion, Jira 이용

태스크 플로우

  • 태스크 플로우
    • 유저가 어떤 식으로 이용할지에 대한 프로세스를 정의한다
    • draw.io 이용

IA (정보구조도)

  • IA (정보구조도)
    • 화면에 필요한 정보 구조(기능)를 정의하는 것입니다
    • draw.io 이용

화면 설계

  • 화면 설계
    • 웹사이트 또는 모바일 앱 서비스를 제작하기 위한 화면 설계도면
    • PPT 템플릿, Miro, Figma 이용
      • 개인적으로 PPT는 틀에 박힌 크기로인해 문서 출력에는 적합할 것 같다 하지만 틀에 박힌 크기로 인해 페이지안에 화면이 다 안들어가거나 비율 때문에 한 페이지에 화면이 표현이 안 되는 단점이 있는 것 같다
      • Miro의 경우 PPT처럼 문서 출력할 땐 힘들어보이지만 Notion과 같이 사용하기 편하고 화면 제한이 없어서 개발자들이 이해하기 쉽게 만들 수 있을 거 같다 [물론 PPT 화면설계 템플릿처럼 1번 2번 이러한 설명 붙여서 쓰는 건 없지만 대충 내가 그에 맞게 템플릿을 만들면 된다]
      • Figma가 Interactive한 화면도 만들 수 있으며 Miro의 기능도 웬만해서 지원해준다 → 추천

 

 

DB ERD 설계

  • 데이터 모델 및 설계
    • 데이터베이스 설계를 의미합니다
    • ERD Cloud 이용

 

 

시스템 아키텍처

  • 시스템 아키텍처 설계
    • 여러 시스템들의 아키텍처를 의미합니다 (서버간의 관계)
    • draw.io 이용

 

 

  • 기술적인 설계 문서
    • 시스템의 구현 방법과 기술적인 세부사항이다 예) 프로그래밍 언어, 프레임워크, 라이브러리, 알고리즘 등..
    • Notion 이용 [노션에 대충 정리해서 올림] (버전 명시 필수)

 

 

  • 마일 스톤 (일정, 인력관리)
    • 일정에 맞게 인력 분배 및 To Do List에 역할 할당
    • Jira, Notion 이용

 

 

3. 개발

  • 정해진 네이밍 및 프로젝트 룰에 맞게 개발
  • To Do List에 있는 것 처리하기
  • 이슈사항 있을 시 백로그 또는 이슈관리에 올리기
  • Jira, Notion 이용

 

 

4. 테스트

  • 테스트를 통해 소프트웨어의 품질을 유지하고 버그를 발견하여 수정하는 등 여러 측면에서 개발자들에게 도움

 

  • 테스트 종류
    • 단위 테스트 → 메소드 단위에서 코드가 올바르게 동작하는지 확인 [기능의 최소한 단위]
      • 결제 시스템에서 요청한 사용자의 DB에서 잔액 조회 메소드가 정상 동작 하는가?
    • 통합 테스트 → 단위들이 모여서 하나의 동작을 이루어내는 단위에서 예상대로 동작하는지 확인 [기능 정상 동작]
      • 결제 시스템에서 잔액 조회한 이후에 잔액이 있는 경우 결제처리가 정상 동작하는가?
    • 시스템 테스트 → 전체 시스템이 예상대로 동작하는지 확인하며 비즈니스 요구사항 충족 확인 [프로세스 흐름]
      • 로그인한 이후에 상품을 등록하고 결제를 했을 때 정상 동작하는가? 
    • 성능 테스트 → 성능을 측정해 병목현상을 찾아내며 응답시간과 처리량을 평가
      • 결제 처리하는데 5초 내로 이루어지는가?
    • 회귀 테스트 → 새로운 변경사항이나 기능 추가 후 이전에 작동하던 부분이 여전히 정상 동작하는지 확인
      • 잔액이 없을 때 결제 처리가 안 되게끔 바꾸었을 때 관련된 부분 잔액 있을 때 정상 처리 됐던 것을 다시 테스트했을 때 문제가 있는가?
      • JUnit따위로 테스트를 미리 만들어둔 경우 간편하게 처리 가능 물론 직접 시스템 테스트를 한번 더 해보는게 맞다 시간이 없을 경우 통합테스트로 기능단위에서라도 직접 손으로 테스트 해봐야함
    • 보안 테스트 → 시스템 보안 취약점이 견고한지 확인하며 보안 문제를 식별하고 개선
      • CSRF를 이용해 보안 취약점을 공격했을 때 방지 처리가 되어있는가?

 

  • 사용 툴
    • JUnit/TestNG (Java), pytest (Python), NUnit (C#) → 단위 테스트 자동화
    • Selenium → 자동화 테스트 도구로 프론트엔드에서 화면으로 테스트 자동화에 사용된다
    • JMeter → 성능 테스트를 위한 도구
    • Cypress, Jest → JavaScript 기반 프로젝트 테스트 도구

 

5. 배포

  • 소프트웨어가 실제 운영 환경에서 원활하게 동작하는지 확인하고 사용자에게 서비스를 제공해주는 단계

 

  • 사용 툴 및 방법
    • Kubernetes → 도커로 배포할 때 컨테이너들을 관리 및 자동 배포 등 다양한 기능 제공
    • Jenkins → 소스 코드 변경 시 자동으로 빌드 및 테스트를 수행하고, 성공한 경우 자동으로 배포까지 수행하는 CI/CD 파이프라인을 구성할 수 있는 도구
    • 수동 배포 → 직접 서버에 접근해 필요한 파일을 넣고 재기동하거나 하는 행동

 

 

 

🔗 참고 및 출처

https://imgscf.slidemembers.com/

https://www.edrawsoft.com/kr/program-review/architecture-drawing-program.html

https://www.erdcloud.com/d/TzHsgqxPRGzWGzytR

https://brunch.co.kr/@junovoir/26

https://salmon-kim.tistory.com/25

https://carrotdesign.tistory.com/entry/UXUI-%EA%B8%B0%ED%9A%8D-11%EA%B0%95

https://deep-wide-studio.tistory.com/37

https://m.blog.naver.com/sslim21/221443489759

https://www.marimba.team/kr/blog/task-management-using-backlog/

 

 

 

반응형

'[공통개발]' 카테고리의 다른 글

[공통개발] HTML, CSS(BEN Naming Convention), JavaScript Naming Convention (네이밍 컨벤션)  (0) 2024.03.21
[공통개발] [Next.js] [React] Naming Convention (네이밍 컨벤션), 프로젝트 구조, Code-Map (코드 한글 변환, 프론트 코드 관리)  (0) 2024.01.24
[공통개발] Java 자바 Naming Convention (네이밍 컨벤션), JavaDoc (함수 및 클래스 문서), Swagger (API 문서)  (0) 2022.08.01
[공통개발] API 생성 팁  (0) 2022.06.27
[공통개발] 로그 생성 팁 (Custom Logging)  (0) 2022.06.27
반응형

 

<!DOCTYPE html>
<html lang="en">
<script>
    let number = 123;
    console.log(typeof(number + "")) // string

    let letter = "123";
    console.log(typeof(+ letter));   // number
</script>
<body>

</body>
</html>

 

  • "문자" → "숫자"
    • + 문자 라고 적을시 숫자로 변환된다
  • "숫자" → "문자"
    • 숫자 + "" 라고 적을시 문자로 변환된다

 

반응형

'[JavaScript] > [JavaScript Code]' 카테고리의 다른 글

[JavaScript Code] form 태그 리로딩 중지 시키기, a 태그 링크 이동 막기, 마우스 오른쪽 클릭 막기, 드래그 앤 드롭 막기, 특정 키 조합 막기, 터치 이벤트 막기 (막고서 임의의 로직 넣기)  (1) 2024.06.17
[JavaScript Code] Blob (임시 이미지 파일 경로 생성)  (0) 2023.09.20
[JavaScript Code] 자바스크립트로 핸드폰 패턴락 구현 Pattern Lock  (0) 2023.01.07
[JavaScript Code] JSTL ajax로 다시 그려주기  (0) 2022.12.18
[JavaScript Code] 링크 눌러서 이동시 뒤로가기 막기  (0) 2022.12.18
반응형

📝WebP(웹피)

WebP 포맷은 인터넷에서 흔히 쓰이는 GIF, JPG, PNG 포맷을 대체하기 위해 개발되었습니다. WebP의 가장 큰 장점은, 이미지 품질이 같을 때 WebP 파일의 크기가 다른 포맷의 파일에 비해 훨씬 작습니다

WEbP 파일의 크기는 같은 내용의 JPG 파일보다 25~34%, PNG 파일보다 26%(손실 압축을 사용하면 60~70%) 작습니다. 특히 애니메이션 이미지의 경우, GIF 파일을 WebP 파일로 바꾸면 이미지 품질은 유지하면서 파일 크기는 절반 이하로 줄일 수 있습니다.

 

📝Layout Shift

이미지 로딩이 느리게 되어 화면 레이아웃이 갑자기 변경(밀리는)되는 현상

 

📝Alpha

개발자들이 자체적 내부 테스트하는 버전

 

📝Beta

제품 출시전 무료 배포로 사용자들이 테스트와 오류 수정에 사용하는 제품

 

📝RC(Relase Candidate)

최종 릴리즈 버전으로 베타버전에서 나온 오류 및 버그들은 전부 수정한 최종 버전이라고 생각하시면 됩니다

 

📝RTM

정식 버전

 

📝데이터베이스 시딩

초기 데이터를 데이터베이스에 주입하는 과정

 

 

🔗 참고 및 출처

https://2ham-s.tistory.com/387

https://kr.bandisoft.com/honeycam/webp/what-is-webp/

반응형

'[CS 지식]' 카테고리의 다른 글

[CS 지식] 한글 깨지는 이유 [EUC-KR, UTF-8 한글 깨짐] [공통 + Servlet + Spring 기반 설명] (produces, consumes)  (0) 2023.10.30
[CS 지식] 보일러 플레이트(Boiler Plate), 코드 제너레이션(Code Generation), 코드 젠(Code gen), TF팀 (Task Force Team), PWA  (0) 2023.10.21
[CS 지식] Vitess, Planetscale, Planetscale-CLI, 백로그  (0) 2023.09.16
[CS 지식] dependencies, devDependencies, package.json, 버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치), package-lock.json  (0) 2023.09.16
[CS 지식] Prettier, ESLint, WebRTC(웹 실시간 통신)  (2) 2023.09.14
반응형
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
    <input type="file" id="fileInput">
</body>
<script>
    fileInput = document.getElementById('fileInput');

    fileInput.addEventListener('change', function() {
        const file = fileInput.files[0];
        console.log(URL.createObjectURL(file));
        // blob:http://localhost:63342/8a91fb57-0311-4375-b2e4-84bb0c9fc3d6
    });
</script>
</html>

Blob(Binary Large Object)은 말 그대로 큰 객체를 저장하는 타입으로 큰 객체란 일반적으로 이미지, 비디오, 사운드 등과 같은 멀티미디어객체들을 주로 가리킵니다. createObjectURL는 메모리에 있는 객체(일반적으로 Blob이나 File 객체)에 대한 임시 URL을 생성가능합니다

반응형

'[JavaScript] > [JavaScript Code]' 카테고리의 다른 글

[JavaScript Code] form 태그 리로딩 중지 시키기, a 태그 링크 이동 막기, 마우스 오른쪽 클릭 막기, 드래그 앤 드롭 막기, 특정 키 조합 막기, 터치 이벤트 막기 (막고서 임의의 로직 넣기)  (1) 2024.06.17
[JavaScript Code] "문자 → 숫자", "숫자 → 문자" 간단하게 바꾸기  (0) 2023.09.20
[JavaScript Code] 자바스크립트로 핸드폰 패턴락 구현 Pattern Lock  (0) 2023.01.07
[JavaScript Code] JSTL ajax로 다시 그려주기  (0) 2022.12.18
[JavaScript Code] 링크 눌러서 이동시 뒤로가기 막기  (0) 2022.12.18
반응형

📝Vitess

구글이 유튜브 스케일을 조정하기 위해 만든 오픈 소스이다

데이터를 여러 서버에 수평적 분할 저장해 대용량 데이터 관리에 좋고 스케일아웃이 쉽다

 

 

📝Planetscale

MySQL과 호환되는 서버리스 데이터베이스로 개인이 서버를 생성하고 유지 및 보수할 필요가 없다

 

💗 장점

  1. 스케일이 커지면 자동으로 스케일을 늘려준다
  2. 프록시를 이용해 보안 연결이 가능하다
    • MySQL 클라이언트를 이용해 사용할 수 있는 로컬 컴퓨터의 포트가 열립니다. 해당 포트로 접근시 프록시로 연결되어 planetscale에 대여한 서버랑 연결되게 됩니다 127.0.0.1:3306처럼 해당 정보만으로 실제 DB에 접근이 가능하기 때문에 보안에 좋다

 

⚠️ 단점

  1. 데이터를 여러 서버에 수평적 분할 저장하기 때문에 여러 서버에 분산 되며 외래키 관리를 따로 안 합니다
    • 이에 대한 다양한 제약조건을 해결할 수 있는 방법이 있는데 가장 좋은 방법은 Prisma를 이용하면 해결이 됩니다 Prisma는 이에 대한 해결책을 제공해줍니다

 

 

📝Planetscale-CLI

pscale 커맨드 라인을 사용해 손쉽게 PlaneScale을 조작할 수 있습니다

 

 

Planet Scale cli 설치 (Mac)

  1. brew install planetscale/tap/pscale
  2. brew install mysql-client (mysql client설치)

 

명령어

  • pscale connect
    • 프록시를 이용한 보안 연결
  • pscale region list
    • 사용 가능한 리전 조회
  • DB 생성
    • pscale database create carrot-market --region ap-northeast

 

 

📝백로그

 

주로 프로젝트 관리에서 사용되며, 프로젝트에 대한 요구 사항, 기능, 작업 항목들을 전체적으로 나열하고 관리한다 이걸 기반으로 To Do List 및 WBS작성에 기준을 잡아준다

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

🔗 참고 및 출처

https://velog.io/@real-bird/PlanetScale

https://www.marimba.team/kr/blog/task-management-using-backlog/

반응형

'[CS 지식]' 카테고리의 다른 글

[CS 지식] 보일러 플레이트(Boiler Plate), 코드 제너레이션(Code Generation), 코드 젠(Code gen), TF팀 (Task Force Team), PWA  (0) 2023.10.21
[CS 지식] WebP(웹피), Layout Shift, Alpha, Beta, RC(Relase Candidate), RTM, 데이터베이스 시딩  (0) 2023.09.20
[CS 지식] dependencies, devDependencies, package.json, 버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치), package-lock.json  (0) 2023.09.16
[CS 지식] Prettier, ESLint, WebRTC(웹 실시간 통신)  (2) 2023.09.14
[CS 지식] Scale Up, Scale Out, SSL, TLS, 반응형 웹 디자인, 적응형 웹 디자인  (2) 2023.09.14
반응형

📝dependencies

npm install 명령어를 통해서 설치한 라이브러리들이 존재한다

 

📝devDependencies

배포할 때 포함되지는 않는다 그래서 애플리케이션 동작과 직접적인 연관은 없지만, 개발할 때 필요한 라이브러리를 설치하면 된다 대표적인 라이브러리로는 eslint, prettier 등이 있다 
-D를 붙여서 설치한다 → 예) npm i ${설치할 pakcage} -D

📝package.json

현재 프로젝트에 대한 정보들을 저장합니다 

{
  "name": "netflix",   // 프로젝트 명
  "version": "0.1.0",  // 빌드 버전
  "private": true, 
  "dependencies": {    // 설치된 라이브러리
    "@testing-library/jest-dom": "^5.17.0",
    ....
    "web-vitals": "^2.1.4"
  },
  "scripts": {        // Short Cut(단축키 설정)
    "start": "react-scripts start",
    ....
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "devDependencies": {  // 로직과 관련 없는 라이브러리
    
  }
}

여러가지 옵션이 존재하고 대표적인 것들은 주석으로 설명을 달아놨습니다

 

  • npm install
    • package.json에 있는 dependecies에 명시된 최신 모듈을 설치합니다
  • npm cache clean --force
    • npm install 했는데 예전버전이 계속 깔리던가 하는 상황에 쓰인다
  • npm update
    • package.json에 있는 dependecies에 명시된 Range안에서 최신 버전으로 업데이트합니다

 

 

📝버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치)

 

  • ^(캐럿)
    • 새로운 Patch버전 및 Minor버전이 나올 때 최신 버전으로 업데이트하라는 버전 범위 명시입니다
  • Major(메이저)
    • 주요 변경 사항이나 호환성에 큰 영향을 미치는 변경 사항이 있는 경우
  • Minor(마이너)
    • 새로운 기능이나 개선 사항이 추가되지만 기존 코드와 호환성이 유지되는 경우
  • Patch(패치)
    • 주요 변경이나 새로운 기능이 없고, 오직 버그 수정과 같은 작은 변경 사항만 있는 경우

 

예를 들면 1.3.5버전이면 1은 Major를 의미하고 3은 Minor 5는 Patch를 의미합니다

 

 

📝package-lock.json

{
  "name": "netflix",
  "version": "0.1.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "netflix",
      "version": "0.1.0",
      "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        ....
        "axios": "^0.4.0",
      },
      "devDependencies": {
        "@types/uuid": "^9.0.3"
      }
    },
    "node_modules/@aashutoshrathi/word-wrap": {
      "version": "1.2.6",
      "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz",
      "integrity": "sha512-1Yjs2SvM8TflER/OD3cOjhWWOZb58A2t7wpE2S9XfBYTiIl+XFhQG2bjy4Pu1I+EAlCNUzRDYDdFwFYUKvXcIA==",
      "engines": {
        "node": ">=0.10.0"
      }
    },
    "node_modules/axios": {
      "version": "0.4.2",
      "resolved": "https://registry.npmjs.org/axios/-/axios-0.4.2.tgz",
      "integrity": "sha512-uWHkoTqft48NouJRcauDHals99zKFZG2dDnuyPT4vf+nm17v43RDIdJi3bjYOzvmyBTMP1NKAgGpBYsPCkhsSA==",
      "deprecated": "Critical security vulnerability fixed in v0.21.1. For more information, see https://github.com/axios/axios/pull/3410",
      "dependencies": {
        "es6-promise": "^1.0.0"
      }
    },
    ...
}

package-lock.json의 존재 이유는 기존에 사용하는 package.json의 정보가 부족하기 때문입니다. package.json에서 버전을 지정할때는 일반적으로 version range(^0.0.1)의 형태를 사용합니다 그리고 협업을 위해 같은 package.json을 사용해 각자의 컴퓨터에 같은 패키지들을 설치해 같은 개발환경을 구축합니다 하지만 몇 가지 이슈가 발생한다면 같은package.json을 사용하여 npm install을 진행하더라도 서로 다른 node_modules를 생성하는 경우가 발생합니다

 

 

❗ 이슈사항

  1. npm 버전이 다른 경우
  2. 버전을 명시하지 않고 version range를 사용하여, 새로운 버전의 패키지가 배포된 이후 설치를 진행할 경우
  3. 내가 사용하는 패키지를 의존하고 있는 패키지가 새로운 버전으로 배포되었을 경우

 

위의 3개를 예시를 들자면 아래와 같습니다

  1. A라는 사람이 2022년 5월 1일에 npm install시 axios 버전은 0.4.0이였다
  2. B라는 사람이 입사해서 npm install시 2022년 6월 1일에 나온 axios 버전 0.4.2를 다운 받았다
  3. 어째서인지 B라는 사람 컴퓨터에선 프로젝트가 정상동작하지 않는다

 

이러한 걸 해결하기 위해서 package-lock.json을 같이 공유하면 A라는 사람의 npm install 당시 실제적으로 다운 받은 것 등에 대한 자세한 정보를 확인해 에러에 대한 문제를 해결할 수 있습니다

 

"axios": "^0.4.0"라고 적혀있지만 ^으로 인해 실제적으로 밑에 적힌 내용을 보면 패치버전의 최신버전인 0.4.2이 설치된 걸 확인 할 수 있습니다

 

 

 

🔗 참고 및 출처

https://1000hg.tistory.com/m/47

https://velog.io/@remon/dependencies-%EC%99%80-devDependencies-%EC%B0%A8%EC%9D%B4

반응형

'[CS 지식]' 카테고리의 다른 글

[CS 지식] WebP(웹피), Layout Shift, Alpha, Beta, RC(Relase Candidate), RTM, 데이터베이스 시딩  (0) 2023.09.20
[CS 지식] Vitess, Planetscale, Planetscale-CLI, 백로그  (0) 2023.09.16
[CS 지식] Prettier, ESLint, WebRTC(웹 실시간 통신)  (2) 2023.09.14
[CS 지식] Scale Up, Scale Out, SSL, TLS, 반응형 웹 디자인, 적응형 웹 디자인  (2) 2023.09.14
[CS 지식] 일급객체, 고차함수, 함수형 프로그래밍  (0) 2023.08.07
반응형

📝Prettier

prettier는 코드 스타일을 깔끔하게 혹은 통일되도록 도와줍니다
예를 들면 return문이 있는 다음의 빈줄이 있으면 안 된다 등...


📝ESLint

ES 와 Lint를 합친 것으로 Ecma Script로 JavaScript를 의미한다고 생각하시면 되고 Lint는 에러가 있는 코드에 표시를 달아놓는 것을 의미합니다 즉, 자바스크립트의 문법에서 에러(심각 에러 및 코드 스타일 통일을 위한 에러)를 표시해줍니다
예를 들면 for문을 사용하는 것보다 Array를 사용하세요 등 문법 라이브러리 따위의 전반적인 코딩 스타일을 잡아 코드 퀄리티를 보장하도록 도와줍니다

둘 다 코드 컨벤션을 잡아줘 한 사람이 코딩한 것처럼 보여 협업할 때 매우 좋습니다

📝WebRTC(웹 실시간 통신)

온라인 회의 및 비디오 스트리밍과 같은 실시간 통신을 위해 설계된 기술로 웹캠 마이크 사용을 웹에서 쉽게할 수 있습니다


💗장점

  1. JavaScript API로 제공해 웹에서 활용하기 좋습니다
  2. 무료입니다
  3. 설치 프로그램이 따로 없습니다
  4. 개발하는데 진입장벽이 낮습니다


⚠️단점

  1. Peer to Peer이라는게 필요한데 이걸 사용하려면 사용자의 IP주소를 알아야하기 때문에 중간에서 연결해주는 서버가 있어야 합니다
  2. 아직 개발 단계이기 때문에 지금 적응하기에는 어려워보입니다

 

🔗 참고 및 출처
https://gh402.tistory.com/m/38
https://ko.eztalks.com/video-conference/main-advantages-and-disadvantages-of-webrtc.html
https://velog.io/@jiwon/ESlint
https://helloinyong.tistory.com/m/325

반응형

'[CS 지식]' 카테고리의 다른 글

[CS 지식] Vitess, Planetscale, Planetscale-CLI, 백로그  (0) 2023.09.16
[CS 지식] dependencies, devDependencies, package.json, 버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치), package-lock.json  (0) 2023.09.16
[CS 지식] Scale Up, Scale Out, SSL, TLS, 반응형 웹 디자인, 적응형 웹 디자인  (2) 2023.09.14
[CS 지식] 일급객체, 고차함수, 함수형 프로그래밍  (0) 2023.08.07
[CS 지식] NPM(node package manager), NPX(execute npm package binaries), YARN, PNPM, Scoop, Chocolatey, Homebrew, VRAM, JNDI  (0) 2023.08.01
반응형

📝Scale Up

사용자(트래픽)가 많아졌을 때 단일 서버의 스펙보다 더 좋은 것으로 업그레이드 하는 것이다

📝Scale Out

사용자(트래픽)가 많아졌을 때 여러대의 서버를 추가 설치해 클러스터링 작업 등을 해 분산 처리에 특화되게 만듭니다

 

 

📝SSL

인터넷에서의 정보를 암호화해서 송수신하는 프로토콜 Taher Elgamal이 SSL 개발을 주도했으며 1995년에 SSL 2.0을 공개적으로 출시했습니다. SSL는 월드 와이드 웹을 통한 통신을 안전하게 유지하는 것이었습니다.

 

📝TLS

넷스케이프 커뮤니케이션스사가 개발한 SSL(Secure Sockets Layer)에 기반한 기술로, 국제 인터넷 표준화 기구에서 표준으로 인정받은 프로토콜입니다. SSL이 다양한 반복을 거친 후 Tim Dierks와 Christopher Allen이 1999년에 SSL 3.0의 후속으로 TLS 1.0을 만들었습니다. TLS는 SSL의 직접적인 후속이며 이제 모든 버전의 SSL이 더 이상 사용되지 않습니다 하지만 TLS 연결을 설명하는 데 SSL이라는 용어가 많이 사용

 

📝반응형 웹 디자인

반응형 예제

반응형 웹 디자인의 경우 화면 크기에따라서 레이아웃이 변경되는 화면을 의미합니다 하나의 페이지로 되어있으며 화면 크기에 따라 미디어쿼리로 분기처리를 합니다

 

 

💗장점

  1. 단일 페이지로 작성하기 때문에 개발시 시간과 노력이 적응형에 비해 감소합니다
  2. 하나의 페이지로만 작업하기 때문에 수정하고 검증이 쉬워집니다
  3. 적응형에 비해서 SEO 최적화에 좋습니다

 

⚠️단점

  1. 사이트의 속도 저하
  2. 디자인의 자유도가 떨어지고 100% 맞 춤디자인에 복잡한 media query가 사용되어야한다

 

📝적응형 웹 디자인

적응형 예제

적응형 웹 디자인의 경우 데스크탑 화면, 태블릿 화면, 모바일 화면과 같이 따로 만드는 화면 설계를 의미합니다 m.naver.com 처럼 일반적으로 m. 이라고 붙고 어떤 기기로 접근하냐에 따라 어떤 페이지로 라우팅할지 정해줍니다

 

 

💗장점

  1. 적응형 웹 디자인은 사용자의 기기 해상도에 따라 최적화된 맞춤형 웹을 독립적으로 제공하기 때문에 가독성이 좋습니다.
  2. 반응형 웹 디자인에 비해 로딩 속도가 빠르다 → 요즘 같은 시대에서는 속도가 빨라서 차이가 없을 수도 있지만 네이버 같이 데스크탑에서 많은 양을 보여줄 필요가 없으니 로딩 속도에는 확실히 차이가 있어보입니다

 

⚠️단점

  1. 서로 다른 페이지이기 때문에 모든 기기에 최적화하는 데에는 어려움이 있습니다
  2. 수정 시 다른 웹을 모두 수정해야 하는 번거로움이 있습니다
  3. 개발 시 시간과 노력이 필요하다
  4. 모바일 데스크탑인 경우 주소가 두가지이기 때문에 검색엔진이 판단할 때는 둘 중에 어떠한 주소의 정보가 정확한 정보인지 확인하기 힘들어 검색 결과에서 제외시켜 SEO 최적화에 좋지 않습니다 또한 광고도 도메인이 달라 2개를 둬서 2배의 요금이 들 수도 있습니다

 

🔗 참고 및 출처

https://pixso.net/kr/skills/adaptive-web-design/
https://blog.toktokhan.dev/%EB%B0%98%EC%9D%91%ED%98%95%EA%B3%BC-%EC%A0%81%EC%9D%91%ED%98%95-742c5ec04864

반응형

'[CS 지식]' 카테고리의 다른 글

[CS 지식] dependencies, devDependencies, package.json, 버전 정보 ^(캐럿) , Major(메이저), Minor(마이너), Patch(패치), package-lock.json  (0) 2023.09.16
[CS 지식] Prettier, ESLint, WebRTC(웹 실시간 통신)  (2) 2023.09.14
[CS 지식] 일급객체, 고차함수, 함수형 프로그래밍  (0) 2023.08.07
[CS 지식] NPM(node package manager), NPX(execute npm package binaries), YARN, PNPM, Scoop, Chocolatey, Homebrew, VRAM, JNDI  (0) 2023.08.01
[CS 지식] 단위테스트(Unit Test), 통합테스트 (Integration Test), 인수테스트  (0) 2023.07.21
반응형

📝 background: url, background-repeat (div에 이미지 넣기)

<!DOCTYPE html>
<html lang="en">
<body>
<div class="my_dog">
    This is my dog
</div>

</body>
<style>
    .my_dog {
        height: 1000px;
        background: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F24283C3858F778CA2E");
        background-repeat: no-repeat;
    }
</style>

</html>

background에 이미지를 넣을 수 있는데 url를 지정해주면 된다.

 

  • background-repeat 속성
    • repeat
      • div를 채울 때까지 반복합니다 (default)
    • no-repeat
      • 이미지를 반복하지 않습니다 [이미지가 한번만 나온다]

 

📝 background-size (div에 이미지 넣기)

<!DOCTYPE html>
<html lang="en">
<style>
  .container {
    background: black;
    height: 200px;
    display: flex;
  }

  .my_dog {
    margin:auto;
    width: 100px;
    height: 100px;
    background: url("https://img1.daumcdn.net/thumb/R1280x0/?scode=mtistory2&fname=https%3A%2F%2Ft1.daumcdn.net%2Fcfile%2Ftistory%2F24283C3858F778CA2E");
    background-repeat: no-repeat;
    background-size: contain;
  }

</style>
<body>
<div class="container">
  <div class="my_dog">
    This is my dog
  </div>
</div>

</body>
</html>

  • background-size 속성
    • default
      • div의 크기만큼 채웁니다 (이미지가 더 큰 경우 잘릴 수 있음)
    • contain
      • div크기만큼 채우는데 가로 세로 비율에 맞게 잘리지 않게 하기 때문에 div의 여백이 존재할 수 있지만 찌그러지거나 안 나오진 않습니다.
    • cover
      • div크기만큼 채우는데 가로나 세로 둘중 하나만 크기에 맞게끔 줄이기 때문에 잘릴 수 있습니다

 

📝 object-fit (div에 이미지 넣기)

<!DOCTYPE html>
<html lang="en">
<style>
  img {
    width: 1000px;
    height: 1500px;
    object-fit: cover;
    border: 10px solid red;
  }

  h1{
    font-size:100px;
    margin-left:400px;
  }
</style>
<body>
<h1>cover</h1>
<div>
  <img src="http://image.dongascience.com/Photo/2020/12/6d740a94b3d3233531281efdf2f997aa.jpg">
</div>

</body>
</html>

  • object-fit 속성
    • fill
      • 요소 콘텐츠 박스 크기에 맞춰 대체 콘텐츠의 크기를 조절합니다. 콘텐츠가 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 콘텐츠가 늘어납니다.
    • contain
      • width 또는 height가 다 찰때 까지 비율에 맞게 커진다 (width 또는 height 둘 중 하나라도 꽉찰 때 까지)
    • none
      • 실제 이미지 크기만큼 채워진다
    • cover
      • 대체 콘텐츠의 가로세로비를 유지하면서, 요소 콘텐츠 박스를 가득 채웁니다. 서로의 가로세로비가 일치하지 않으면 객체 일부가 잘려나갑니다.

 

 

 

반응형

'[HTML && CSS] > [CSS]' 카테고리의 다른 글

[CSS] Grid 사용, 배치 및 정렬하기, 반응형 (grid-template-columns,grid-template-rows, gaps, grid-start, grid-end, grid-column, grid-row, span, place-items, place-self, justifiy-content, align-content, place-content, minmax, auto-fit, auto-fill)  (0) 2024.12.05
[CSS] Media Query (반응형 웹 페이지 제작)  (0) 2023.10.01
[CSS] width, height 계산 (calc) [동적 계산]  (1) 2022.10.11
[CSS] DIV 원하는 곳에 배치시키기 Position (relative , absolute, fixed), 원하는 DIV 최상단 노출시키기 (Z-index)  (0) 2021.07.10
[CSS] DIV로 테이블형식 만들기 (table , table-cell , table-row), visibility:hidden vs display:none  (0) 2021.07.01

티스토리툴바