프론트엔드 스터디 - 4

webpack 구성요소

• Entry: 시작점, 최상위 자바스크립트 파일의 위치를 명시한다. 웹팩은 엔트리에 정의한 파일부터 시작해서 의존관계를 파악해나가면서 하나의 파일로 번들링한다.
• Output: 번들된 결과물의 이름, 위치를 정의한다.
• Loader: 원래는 javascript밖에 해석x. 그래서 여러가지 타입의 파일(css, image, font 등)들을 웹팩이 이해할 수 있도록 해줌
• Plugin: 번들링 된 결과물에 대해서 적용할 수 있는 속성, 난독화, 번들된 css,js를 html에 주입 등
• optimization: 스플리팅 , css 압축 등 최적화 관련

자동화

• CI : 새로운 코드 변경 사항이 정기적으로 빌드 및 테스트 되어공유 레포지토리에 통합히는 것을 의미 (continues integration) -테스트, 린팅 자동화
• CD: 개발자의 변경 사항이 레포지토리를 넘어, 고객의 프로덕션(Production) 환경까지 릴리즈 되는 것 (continues delivery, deployment)
• ci githubaction 정의를 할 수 있고, CD경우는 github action과 jenkins 또는 codedeploy를 사용

테스트를 왜 해야하는가

• TDD(테스트 주도 개발) : 테스트 코드작성 ⇒ 코드를 작성 ⇒ 리팩토링을하는 과정
  • 코드의 의도를 미리 작성해두고 개발하는 것이기 때문에 유지보수, 협업에서 유리하다.
  • 어떤요소가 들어가는지, 작동을 어떻게 하는지
• 유닛 테스트 - 최소기능 단위로 테스트, 컴포넌트가 잘 렌더되는지, 함수가 잘 작동하는지 (react testing library, jest)
• 통합 테스트 - 유닛테스트 이후 기능단위로 묶어서 테스트, 컴포넌트 들이 잘 상호작용하고 렌더되는지, 이벤트가 발생했을 때 원하는 UI변화가 일어나는지
• E2E - 프로젝트가 브라우저에서 잘 작동하는지 (셀레니움, 퍼페티어)

프레임워크와 라이브러리의 차이

프레임워크는 뼈대나 기반구조를 뜻한다. 개발을 할때 필요한 뼈대를 갖추기위한 여러 클래스와 인터페이스, 컴포넌트들의 집합이다. 프레임워크를 사용하면 필수적인 코드, 구조를 제공해주고 이 프레임워크의 뼈대 위에서 코드를 작성하여 프로그램을 개발한다.

라이브러리는 특정 기능에 대한 함수들의 집합이다. 프로그래머가 어떠한 기능을 수행하기 위해서 필요한 것들을 제공해주는 역할을하는 것이죠. 단순 활용가능한 도구들의 집합이다. 개발을 하면서 그때그때 필요한 기능을 호출해서 사용하는 방식이다.

흐름에 대한 제어 권한이 있느냐 없느냐 ⇒ 내가 주체가 되어 가져다가 쓰느냐 아니면 어떤 주체에 의해서 내 코드가 가져다가 쓰이냐의 차이

라이브러리는 프로그래머가 전체적인 흐름을 가지고 있어 라이브러리를 자신이 원하는 기능을 구현하고 싶을 때 가져다 사용할 수 있다. 반면 프레임워크는 전체적인 흐름을 프레임워크 자체적으로 가지고 있어 프로그래머는 그 안에서 필요한 코드를 작성합니다. 프레임워크를 가지고 개발을 하게되면 프레임워크의 규칙을 꼭 지키면서 개발해야한다. 하지만 라이브러리는 도구임으로 개발자의 의도대로 자유롭게 써도 무방하다.

추가적으로 : React는 왜 라이브러리인가?

1. 라이프사이클을 제공해주지만, 강제되지않는다. ⇒ 개발자가 의도적으로 사용여부를 결정할 수 있다.
2. 프레임워크로써의 충분한 기능을 기본적으로 제공해주지 않는다. 상태관리를 위해 redux, mobx, context api 등을 따로 설치해야하고, router도 react-router 설치가 필요하다. 기본제공해주지 않는다.

객체지향의 특징?

1. 추상화: 불필요한 부분을 생략하고 객체의 속성 중 가장 중요한 것에만 중점을 두어 간략화, 모델화 하는 것
2. 캡슐화: 객체에 필요한 데이터와 메서드를 그룹화 해주는 것. 캡슐화를 통해 은닉이 가능해진다.
3. 상속: 이미 정의된 상위 클래스(부모 클래스)의 모든 속성솨 연산을 하위 클래스가 물려받는 것이다.
4. 다형성: 하나의 클래스나 메서드가 여러 가지 타입을 가질 수 있고 다양한 방식으로 동작이 가능하다.
   • 부모 클래스 타입의 참조 변수로 자식 클래스 타입의 인스턴스를 참조
   • 오버라이딩 : 자식클래스에서 부모클래스 함수를 덮어 씌우는 것
   • 오버로딩: 같은 클래스 내에서 매개변수에 따라 다르게 동작하는 동일한 이름의 메서드를 정의하는 것

BFS와 DFS에 대해서?

• 탐색 알고리즘, 둘다 그래프 탐색에 사용된다.

• DFS: 깊이우선 탐색이다. 한 노드에서 최대한 깊이 내려간 다음에 더이상 갈 곳이 없을 경우 옆으로 이동한다. 스택 또는 재귀함수로 구현한다.

• BFS: 너비우선 탐색이다. 한 노드에서 인접한 모든 노드를 탐색한 다음, 그 다음 깊이의 노드를 탐색한다. 주로 큐를 이용해서 구현한다.

• 시간복잡도: 둘다 인접행렬일 경우 O(N제곱), 인접리스트면 O(N+E)