Skip to content

Files

Latest commit

 

History

History

chapter04.5-프레임워크

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
img
img
 
 
README.md
README.md
 
 
react.md
react.md
 
 
spring.md
spring.md
 
 
vue.md
vue.md
 
 

README.md

선행 : 언어 파트를 어느정도 이해하고 있어야 합니다.

Java

📖 Spring Framework

  1. DI(Dependency Injection)
  2. 생명주기(Life Cycle)
  3. 웹 프로그래밍 설계 모델
  4. 웹 어플리케이션 구조
  5. 컨트롤러의 기능
  6. @RequestParam 어노테이션을 이용한 HTTP 전송 정보 얻기

(상위 문서로)


JavaScript

React

😣너무 길어요😭 자세히보기!

리액트 컴포넌트 설계 방법에 대해 설명해주세요.

리덕스 아키텍쳐는 어떻게 설계하나요?

프레젠테이셔널 vs 컨테이너 컴포넌트 차이점을 설명해주세요.

리액트의 페이지 컴포넌트는 프레젠테이션인가 컨테이너인요?

Hooks의 등장으로 프레젠테이셔널, 컨테이너 컴포넌트의 개념이 사라졌다고 대답하셨는데 현업에선 많이 사용중이다. 왜그런지 아나?

Nextjs에서 프레젠테이셔널 컴포넌트를 어떻게 활용할까?

Next 버전 뭐썼나?

Next 9버전 10버전 차이점?

Nextjs에서 서버사이드 처리를 하기위해 작성해야하는 코드들이 있는데 어디다 작성해야하는가?(페이지 컴포넌트의 어떤영역?)

Nextjs는 ssr을 처리할 수 있음과 동시에 csr영역도 담당하므로 여러 문제 또는 현상이 발생할 슈 있다. 예를 들어 현재 환경이 브라우저인지 서버인지 판단하기 어렵다. 어떻게 판단하면 될까?

Reject하지않은 CRA 리액트는 csr이다. 따라서 next나 cra를 reject 처리하여 ssr을 구현하는데 왜 이렇게 번거로운 작업을 하는것인가?

클라이언트는 react 서버사이드 프레임워크는 next 서버는 nodejs를 사용한다고 했을때 ssr과정이 어떻게 일어나는지 코드 관점에서 구체적으로 설명해달라 (브라우저에 렌더링이 되기까지)

Ssr을 적용하면 서버에서 데이터를 채운 html파일을 보내줘야한다. 너가 한 프로젝트에서는 그 데이터를 어디서 가져왔는가?



Vue

😣너무 길어요😭 자세히보기!

Vue.js에 대해 간략한 설명과 장단점을 말해주세요.

  • Even You(에번 유) 가 2014년도에 발표한 자바스크립트 프레임워크
  • 동적인 사용자 인터페이스(UI) 를 만들기 위한 프레임워크

Vue.js의 Life-cycle에 대해 알려주세요.

Creation, Mounting, Updating, Destruction Creation은 라이프사이클 중 가장 먼저 실행되는 단계이다. 이 단계의 훅에서는 DOM트리에 해당 컴포넌트가 반영이 안되므로 태그의 id나 class에 접근할 수 없다. 훅으로는 beforeCreated, created가 있는데 beforeCreated에서는 data나 event에 접근할 수 없다. Mounting은 DOM 삽입 단계로 렌더링 되기 직전의 컴포넌트에 접근할 수 있다. 훅으로는 beforeMount, mounted가 있는데 beforeMount훅은 템플릿과 렌더 함수들이 컴파일이 되고 렌더링이되기 직전 단계에 호출이 된다. 아직 까지 DOM element에 직접적으로 접근할 수가 없다. mounted 훅에서, 컴포넌트가 렌더링이 된 상태일 때 호출된다. DOM에 접근할 수 있지만 주의해야할 점은 자식 컴포넌트에서 마운트된 상태임을 보장할 수 없다는 점이다. Updating은 웹페이지의 내용이나 무언가 바껴서 재렌더링을 해야할 때 실행된다. 훅으로는 beforeUpdate와 updated가 있고 beforeUpdate 훅은 DOM변경이 완료가 되고 패치가 되기 직전에 호출이된다. updated 훅은 재 렌더링이 완료된 이후에 호출이 된다. updated는 패치 이후에 호출되는 훅이라 변화가 끝난 DOM에 접근이 가능하다. Destruction은 컴포넌트가 해체?파괴될 때 실행된다. 훅으로는 beforeDestroy, destroyed 단계로 beforeDestroy는 해체 직전에 호출되며 모든 DOM과 이벤트들이 남아있다. destroyed는 해체가 완전히 된 후에 호출이되는 훅이다. Vue.js 에서 DOM은 어느 시점에 생성되나 Computed와 Methods의 차이점은 무엇인가 가상돔(Virtual DOM) 개념은 무엇이며, DOM과의 차이점 가상돔의 개념이 사용되게된 배경은 무엇인가 최근의 프레임워크를 사용할때 외부 라이브러리와의 결합시에 더 나은 코드 작성법을 고민해본적이 있는가 DOM을 직접 조작하는 D3.js 같은 라이브러리와의 결합시에 예상되는 문제점이 있는가

Vue instance 는 어떻게 생성하나요?

  • Vue() 생성자 함수를 이용하여 생성
  • 생성시 옵션 객체를 전달 let vm = new Vue({});
  • vue component 도 vue instance 와 동일하다.

단방향, 양방향 바인딩에 대한 차이점을 설명해주세요.

단방향 바인딩 : 데이터 흐름이 한쪽인 경우를 의미한다. 대표적인 지시어는 v-on, v-bind, {{}} 머스태시 태그 v-on(@) 은 UI에서 데이터 모델(viewModel)을 업데이트 하거나 출력할때 사용한다. v-bind(:) 는 데이터 모델(viewModel) 에서 업데이트 된 상태를 UI에 반영한다.

양방햔 바인딩 : 데이터 흐름이 양방향이 경우를 의미한다. 대표적인 지시어는 v-model 데이터모델(viewModel)이 변경되면, 자동으로 UI도 변경이 된다.


양방향 바인딩 어떻게 생성하나요?

  • v-model 지시어를 사용

컴포넌트 props 란 무엇인가요?

  • props 는 상위컴포넌트에서 하위컴포넌트에게 데이터를 전달할때 사용하는 옵션
  • vue 에 데이터 흐름은 위에서 아래로 흐르기때문에 하위 컴포넌트가 상위 컴포넌트 상태를 직접 참조할 수 없음
  • props 로 상태가 전달이 되면 해당 컴포넌트에 속성이 된다

Vue.component('child', { // props 정의 props: ['message'], // 데이터와 마찬가지로 prop은 템플릿 내부에서 사용할 수 있으며 // vm의 this.message로 사용할 수 있습니다. template: '{{ message }}' });


Vue 프로젝트를 어떻게 배포하나요?

  • SFC(Single File Component) 방식으로 코드를 작성했다면 웹팩 빌드 후, 빌드 결과물을 정적 서버에 올린다.

  • express-static 같은걸로 빌드 후, 서버 올리면 될듯..? Q7: What are Components in Vue.js? Q7. 컴포넌트란 무엇인가?

  • vue component 는 재사용 및 확장성을 위해 코드를 캡슐화한거다.

  • vue component 는 vue instance 이기도 하여, 옵션 객체 사용이 가능(root component 에서만 사용하는 옵션 제외) Q8: What is filters in Vue.js? Q8. filter 란 무엇인가?

  • 일반적인 text 형식(format)을 가공해주는 역할을 한다.

  • 머스태시 태그와 v-bind 에서 사용 가능하며, | (파이프) 기호와 함께 사용한다.

  • 필터 체이닝도 가능하다 ( {{ message | filterA | filterB }}

{{ message | capitalize }} // capitalize -> filter

// formatId -> filter

다른 페이지로 리다이렉트(redirect) 어떻게 하나요?

re(다시) + 지시하다(direct) : 다시 지시하는 것

  • vue-router 모듈을 이용하여 routing 기능을 구현할 수 있다. (라우팅이란 출발지부터 목적지까지의 경로를 설정하는것을 의미한다.)
  • $router.push();

vue 앱 구조에 대한 기본 개념을 설명해주세요.

  • vue 는 루트 컴포넌트(root instance)를 생성하고 루트 컴포넌트가 최상위를 기준으로 자식컴포넌트들이 tree 구조로 구성됩니다.

root component ㄴ header component ㄴ body component ㄴ main component ㄴ footer component


Vuex 란 무엇인가요?

  • vue 앱에 상태관리를 위한 라이브러리
  • 모든 컴포넌트에 대한 상태를 중앙집중식으로 관리하는 저장소 역할을 한다. img

Vue 에서 mixin 이 필요한 이유는 무엇인가요?

  • mixin 은 여러 컴포넌트간의 공통으로 사용하고 있는 로직, 상태들을 재사용하는 방법

  • 2개의 컴포넌트가 동일한 기능을 가지고 있다고 생각해보자. 만약 같은 메서드를 2개 작성한다면 코드 중복 + 해당 메서드들이 바뀌면 코드를 2번 수정해야한다. -> 이걸 우아하게 mixin 으로 해결 가능하다.

  • mixins : [] 속성으로 지정하면 된다.

  • mixin과 컴포넌트의 옵션이 중첩이 된다면, 두 옵션은 'Merged' 된다.

  • 라이프사이클도 믹스인에 정의가 가능하지만, 라이프사이클 함수는 모두 실행된다(mixin -> component)