플레이스토어 병아리게임 출시!!!~~ [많은 이용 부탁드립니다!]

📝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

📝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

📝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

📝일급객체

일급객체는 아래와 같은 특징을 가지고 있습니다.

1. 변수에 함수를 할당
2. 다른 함수의 인자로 전달될 수 있다.
3. 다른 함수의 결과로 리턴이 가능하다

// 변수에 함수를 할당
const add = function(a, b) {
  return a + b;
};

// 다른 함수의 인자로 전달될 수 있다.
function applyOperation(operation, x, y) {
  return operation(x, y);
}

console.log(applyOperation(add, 5, 3)); // 출력 결과: 8

// 다른 함수의 결과로 리턴이 가능하다
function createMultiplier(multiplier) {
  return function(x) {
    return x * multiplier;
  };
}

const double = createMultiplier(2);
console.log(double(5)); // 출력 결과: 10

📝고차함수 

고차 함수는 다른 함수를 인자로 받거나 다른 함수를 리턴하는 함수로서 JavaScript에서 함수 자체가 일급객체이기 때문에 고차함수를 만드는게 가능하다

📝함수형 프로그래밍

함수형 프로그래밍이란 함수형 인터페이스를 이용해 구현한 프로그래밍 기법으로 아래와 같은 장점이 있습니다.

• 가독성을 높일 수 있고 검증된 함수를 사용해 오류를 줄일 수 있고 가독성이 높기 때문에 유지보수가 쉬워진다

// 1 ~ 10까지의 값이 i에 할당된다
for(int i = 1 ; i < 10; i++){
    System.out.println(i);
}

process(10, print(num));

• 부수 효과를 제거한 함수를 순수 함수라고 하는데 함수의 실행이 외부에 영향을 끼치지 않는다 (멀티스레딩으로 동작해도 안정성 보장)

🔗 참고 및 출처
https://mangkyu.tistory.com/111

📝npm (node package manager)

노드에서의 패키지 관리자로 자바스크립트 환경에서 프로젝트를 시작할 때 node와 함께 설치가 필요한게 많다

📝npx (execute npm package binaries)

npx가 패키지 실행 도구 라는 것이 npm과의 큰 차이점이자 장점이다. npx는 해당 패키지를 실행만 되게 해 주기 때문에 가볍게 쓸 수 있다. 거의

패키지 관리 도구가 아닌 실행 도구라는 점에서 npm과 다르다

📝yarn

속도나 안정성에서는 npm과 비슷하지만(Node 관련) 다른 점이자 장점은 버전을 어디에서나 같게 만들어 버그를 줄임으로써 보안을 높였다는 점이다. npm에 비해 점유율이 떨어진다.

📝PNPM

패키지 관리도구로 npm과 yarn과 동일하지만 npm과 달리 글로벌로 관리하고 하드링크와 심볼릭 링크를 사용하여 관리하기 때문에 여러 프로젝트를 사용해도 디스크 공간 팽창이 줄어듭니다

📝Scoop

Windows 환경에서 사용되는 패키지 관리도구로 PowerShell 스크립트와 함께 사용됩니다

📝Chocolatey

Windows 환경에서 사용되는 패키지 관리도구로 PowerShell 스크립트와 함께 사용됩니다

📝HomeBrew

Homebrew는 macOS에서 널리 사용되는 패키지 관리 도구입니다

📝VRAM

Video Random Aceess Memory의 약자로 불러올 화면을 VRAM에 임시저장을 해서 빠르게 화면에 불러오는 겁니다.

• 예) 인게임 내에서 화면이 바뀌어 로딩을 하게 되면 보여지게 될 그래픽 테스쳐를 VRAM에 먼저 로드 해서 빠르게 렌더링이 되는 겁니다.그래서 화면의 보여지는 양이 많으면 많을수록 그 품질이 높으면 높을수록 VRAM의 필요 용량은 높아지는 겁니다.

📝JNDI

JNDI 톰캣에서 지원해주는 Datasource관리로 DB접속 정보를 유동적으로 할 수 있게 해줍니다 간단하게 이야기해서 아래와 같은 행위를 도와줍니다.

🔗 참고 및 출처

https://egg-programmer.tistory.com/227

📝단위테스트 (Unit Test)

단위는 일반적 클래스 또는 메소드 수준으로 단위 크기가 작을수록 단위 복잡성이 낮아진다. 즉, 단위 크기르 ㄹ작게 설정해 단위 테스트를 최대한 간단하고 디버깅 쉽게 작성해야한다.

// 단위테스트 예제 코드

@DisplayName("자동차가 전진한다")
@Test
public void moveCar() {
    // given
    Car car = new Car("dani");

    // when
    car.move(4);

    // then
    assertThat(car.getPosition()).isEqualTo(1);
}

📝통합테스트 (Integration Test)

단위 테스트보다 더 큰 동작을 달성하기 위해 여러 모듈을 모아 테스트하는 것입니다. (DB연결 + 다른 파트 연결 + 솔루션 연결 등...)

발견하기 어려운 버그를 찾을 수 있다는 점이 좋습니다. 예를 들어 환경 버그 (싱글 코어에서는 잘 되지만 쿼드 코어에서는 안 된다 등...) 

// 통합테스트
@SpringBootTest
class ApplicationTests {
    @Autowired
    private HelloController helloController;

    @DisplayName("hello 엔드포인트 테스트")
    @Test
    void 컨텍스트_로딩_테스트() {
        assert helloController != null;
    }
}

• 통합테스트 어노테이션 종류
•  

📝인수테스트

비즈니스쪽에 초점을 두며 프로젝트 참여하는 사람들이 토의해 테스트 시나리오를 작성하고 개발자는 이에 의거해 코드를 작업한다

🔗 참고 및 출처

https://blog.neonkid.xyz/272

https://tecoble.techcourse.co.kr/post/2021-05-25-unit-test-vs-integration-test-vs-acceptance-test/

📝독립변수

원인이 되는 일

📝종속변수

결과가 되는 일

📝GPU

CPU는 복잡한 연산을 순서대로 빠르게 집중하는 반면, GPU는 쉽고 단순한 작업을 병렬적으로 대량 처리하는데 특화

📝하드웨어 가속

구글의 하드웨어 가속의 경우 gpu를 이용해 빠르게 화면을 렌더링한다

📝N단계 수준의 API

1단계 수준의 API, 2단계 수준의 API라는 말은 없지만 아래와 같이 사용할 수 있다.

예) www.naver.com/member[1단계]/info[2단계]

📝VPC

aws에서 아이피를 할당해주는 대역대로 서브넷끼리 묶어주는 역할을 한다

🔗 참고 및 출처

https://medium.com/harrythegreat/aws-%EA%B0%80%EC%9E%A5%EC%89%BD%EA%B2%8C-vpc-%EA%B0%9C%EB%85%90%EC%9E%A1%EA%B8%B0-71eef95a7098

📝트랜잭션

데이터베이스에서 수행되는 하나의 논리적인 작업 단위를 나타냅니다 예를 들면 1,000원 입금 후 500원을 B의 계좌에 보내는 일련의 작업이 있을 경우 1,000원 입금이라는 작업과 500원을 B의 계좌에 보내는 두가지 작업을 묶은 형태로 진행하게 된다 → 두가지의 작업중 하나라도 실패하면 앞에 작업도 다 롤백이 되어야하고 성공할 거면 둘다 성공해야한다

📝ACID 트랜잭션

트랜잭션에서 가장 중요한 4가지 요소의 앞글자를 따온 것으로 최대한의 데이터 안정성과 무결성을 보장의 효과가 있다.

원자성(Atomicity) - 트랜잭션에 속한 각각의 문(CRUD)을 하나의 단위로 취급합니다. 문 전체를 실행하거나 그 문의 어떤 부분도 실행하지 않거나 둘 중 하나입니다. 이 속성은 스트리밍 중에 갑자기 오류를 일으키더라도 데이터 손실과 손상이 방지됩니다.

일관성(Consistency) - 트랜잭션이 테이블에 변경 사항을 적용할 때 미리 정의된, 예측할 수 있는 방식만 취합니다. 트랜잭션 일관성이 확보되면 데이터 손상이나 오류 때문에 테이블 무결성에 의도치 않은 결과가 생기지 않습니다.

격리(Isolation) - 여러 사용자가 같은 테이블에서 모두 동시에 읽고 쓰기 작업을 할 때, 각각의 트랜잭션을 격리하면 동시 트랜잭션이 서로 방해하거나 영향을 미치지 않습니다. 각각의 요청이 실제로는 모두 동시에 발생하더라도, 마치 하나씩 발생하는 것처럼 발생할 수 있습니다.

영속성(Durability) - 성공적으로 트랜잭션이 수행되었다면, 그 결과는 완전히 반영이 되어야 한다. 완전히 반영되면 로그를 남기게 되는데, 후에 이 로그를 이용해서 트랜잭션 수행전 상태로 되돌릴 수 있어야 한다. 때문에 트랜잭션은 로그저장이 완료된 시점에서 종료가 되어야 한다.

📝NextJS

풀스택 프레임워크로 (프론트엔드[React] + 백엔드) 클라이언트 사이드 렌더링의 문제를 해결하기 위해 Vercel이 Next.js를 만들었다.

📝OLTP (Online Transaction Processing)

사용자가 요청한 트랜잭션을 DB서버가 처리하고 그 결과를 사용자 PC에 돌려주는 과정

📝OLAP (Online Analytical Processing)

DB에 저장되어 있는 데이터 분석 및 사용자에게 유의미한 정보 제공해 이를 바탕으로 수익 창출 및 다양한 모델링이 가능

간단하게 데이터 분석이라고 생각하면 된다.

📝OLTP vs OLAP

📝Gulp

프론트엔드 자동화 빌드 툴이다. 일일이 반복해서 하기 번거로운 작업들(파일 minification작업, sass파일 컴파일, Lint 등)을 자동화하여 개발 시간을 단축

📝Scoop

📝Jest

Jest란 코드가 제대로 동작하는지 확인하는 Test Case 를 만드는 페이스북이 개발한 'JS 테스팅 프레임워크

📝Babel

바벨은 ECMAScript2015이상의 코드를 적당한 하위 버전으로 바꾸어 주는 것이 주된 역할

📝FGI (Focous Group Interview)

보통 6~10명의 참석자들이 모여 사회자의 진행에 따라 정해진 주제에 대해 이야기를 나누게 하고, 이를 통해 정보나 아이디어를 수집합니다. 그걸 통해 고객이 참석자인 경우 선호도가 높은 서비스를 찾아낼 수 있습니다.

🔗 참고 및 출처

https://thenicesj.tistory.com/261

https://kiki-100.tistory.com/99

https://velog.io/@rlaghwns1995/JEST-JEST%EC%9D%98-%EA%B8%B0%EC%B4%88

https://colinch4.github.io/2021-01-14/gulp/

https://steemit.com/javascript/@noreco/webpack

https://www.youtube.com/watch?v=jYJ3ygUfPrU

https://velog.io/@yejin20/DjangoORM%EC%9D%98-%EC%9E%A5%EB%8B%A8%EC%A0%90

https://www.databricks.com/kr/glossary/acid-transactions

https://www.joinc.co.kr/w/man/12/ACID

http://uainkorea.blogspot.com/2013/11/fgi.html

📝Timezone 설정

📝Certbot