)
14 | - React
15 | - [React + Spring Boot 연동하여 환경 구축하기](https://github.com/kim6394/tech-interview-for-developer/blob/master/Web/React%20%26%20Spring%20Boot%20%EC%97%B0%EB%8F%99%ED%95%98%EC%97%AC%20%ED%99%98%EA%B2%BD%20%EA%B5%AC%EC%B6%95%ED%95%98%EA%B8%B0.md)
16 |
17 |
--------------------------------------------------------------------------------
/Web/REST API.pptx:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/Web/REST API.pptx
--------------------------------------------------------------------------------
/Web/React/React Fragment.md:
--------------------------------------------------------------------------------
1 | # [React] Fragment
2 |
3 |
4 |
5 | ```
6 | JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다.
7 | 이런 상황에 Fragment를 사용하면 쉽게 그룹화가 가능하다.
8 | ```
9 |
10 |
11 |
12 | 아래와 같이 Table 컴포넌트에서 Columns를 불렀다고 가정해보자
13 |
14 | ```JSX
15 | import { Component } from 'React'
16 | import Columns from '../Components'
17 |
18 | class Table extends Component {
19 | render() {
20 | return (
21 |
26 | );
27 | }
28 | }
29 | ```
30 |
31 |
32 |
33 | Columns 컴포넌트에서는 ` ~~ | `와 같은 element를 반환해야 유효한 테이블 생성이 가능할 것이다.
34 |
35 | ```jsx
36 | import { Component } from 'React'
37 |
38 | class Columns extends Component {
39 | render() {
40 | return (
41 |
42 |
Hello |
43 | World |
44 |
45 | );
46 | }
47 | }
48 | ```
49 |
50 | 여러 td 태그를 작성하기 위해 div 태그로 묶었다. (JSX 파일 규칙상 return 시 하나의 태그로 묶어야한다.)
51 |
52 | 이제 Table 컴포넌트에서 DOM 트리를 그렸을 때 어떻게 결과가 나오는지 확인해보자
53 |
54 |
55 |
56 | ```html
57 |
58 |
59 |
60 |
Hello |
61 | World |
62 |
63 |
64 |
65 | ```
66 |
67 | Columns 컴포넌트에서 div 태그로 묶어서 Table 컴포넌트로 보냈기 때문에 문제가 발생한다. 따라서 JSX파일의 return문을 무조건 div 태그로 묶는 것이 바람직하지 않을 수 있다.
68 |
69 | 이때 사용할 수 있는 문법이 바로 `Fragment`다.
70 |
71 | ```jsx
72 | import { Component } from 'React'
73 |
74 | class Columns extends Component {
75 | render() {
76 | return (
77 |
78 | Hello |
79 | World |
80 |
81 | );
82 | }
83 | }
84 | ```
85 |
86 | div 태그 대신에 Fragment로 감싸주면 문제가 해결된다. Fragment는 DOM트리에 추가되지 않기 때문에 정상적으로 Table을 생성할 수 있다.
87 |
88 |
89 |
90 | Fragment로 명시하지 않고, 빈 태그로도 가능하다.
91 |
92 | ```JSX
93 | import { Component } from 'React'
94 |
95 | class Columns extends Component {
96 | render() {
97 | return (
98 | <>
99 | Hello |
100 | World |
101 | >
102 | );
103 | }
104 | }
105 | ```
106 |
107 |
108 |
109 | 이 밖에도 부모, 자식과의 관계에서 flex, grid로 연결된 element가 있는 경우에는 div로 연결 시 레이아웃을 유지하는데 어려움을 겪을 수도 있다.
110 |
111 | 따라서 위와 같은 개발이 필요할 때는 Fragment를 적절한 상황에 사용하면 된다.
112 |
113 |
114 |
115 |
116 |
117 | #### [참고 사항]
118 |
119 | - [링크](https://velog.io/@dolarge/React-Fragment%EB%9E%80)
120 |
--------------------------------------------------------------------------------
/Web/React/React Hook.md:
--------------------------------------------------------------------------------
1 | # React Hook
2 |
3 | > useState(), useEffect() 정의
4 |
5 |
6 |
7 |
8 |
9 | 리액트의 Component는 '클래스형'과 '함수형'으로 구성되어 있다.
10 |
11 | 기존의 클래스형 컴포넌트에서는 몇 가지 어려움이 존재한다.
12 |
13 | 1. 상태(State) 로직 재사용 어려움
14 | 2. 코드가 복잡해짐
15 | 3. 관련 없는 로직들이 함께 섞여 있어 이해가 힘듬
16 |
17 | 이와 같은 어려움을 해결하기 위해, 'Hook'이 도입되었다. (16.8 버전부터)
18 |
19 |
20 |
21 | ### Hook
22 |
23 | - 함수형 컴포넌트에서 State와 Lifecycle 기능을 연동해주는 함수
24 | - '클래스형'에서는 동작하지 않으며, '함수형'에서만 사용 가능
25 |
26 |
27 |
28 | #### useState
29 |
30 | 기본적인 Hook으로 상태관리를 해야할 때 사용하면 된다.
31 |
32 | 상태를 변경할 때는, `set`으로 준 이름의 함수를 호출한다.
33 |
34 | ```jsx
35 | const [posts, setPosts] = useState([]); // 비구조화 할당 문법
36 | ```
37 |
38 | `useState([]);`와 같이 `( )` 안에 초기화를 설정해줄 수 있다. 현재 예제는 빈 배열을 만들어 둔 상황인 것이다.
39 |
40 |
41 |
42 | #### useEffect
43 |
44 | 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정할 수 있는 Hook
45 |
46 | > '클래스' 컴포넌트의 componentDidMount()와 componentDidUpdate()의 역할을 동시에 한다고 봐도 된다.
47 |
48 | ```jsx
49 | useEffect(() => {
50 | console.log("렌더링 완료");
51 | console.log(posts);
52 | });
53 | ```
54 |
55 | posts가 변경돼 리렌더링이 되면, useEffect가 실행된다.
56 |
57 |
58 |
59 |
60 |
61 | #### [참고자료]
62 |
63 | - [링크](https://ko.reactjs.org/docs/hooks-intro.html)
64 |
--------------------------------------------------------------------------------
/Web/Spring/JPA.md:
--------------------------------------------------------------------------------
1 | # JPA
2 |
3 | > Java Persistence API
4 |
5 |
6 |
7 | ```
8 | 개발자가 직접 SQL을 작성하지 않고, JPA API를 활용해 DB를 저장하고 관리할 수 있다.
9 | ```
10 |
11 |
12 |
13 | JPA는 오늘날 스프링에서 많이 활용되고 있지만, 스프링이 제공하는 API가 아닌 **자바가 제공하는 API다.**
14 |
15 | 자바 ORM 기술에 대한 표준 명세로, 자바 어플리케이션에서 관계형 데이터베이스를 사용하는 방식을 정의한 인터페이스다.
16 |
17 |
18 |
19 | #### ORM(Object Relational Mapping)
20 |
21 | ORM 프레임워크는 자바 객체와 관계형 DB를 매핑한다. 즉, 객체가 DB 테이블이 되도록 만들어주는 것이다. ORM을 사용하면, SQL을 작성하지 않아도 직관적인 메소드로 데이터를 조작할 수 있다는 장점이 있다. ( 개발자에게 생산성을 향상시켜줄 수 있음 )
22 |
23 | 종류로는 Hibernate, EclipseLink, DataNucleus 등이 있다.
24 |
25 |
26 |
27 |
28 |
29 | 스프링 부트에서는 `spring-boot-starter-data-jpa`로 패키지를 가져와 사용하며, 이는 Hibernate 프레임워크를 활용한다.
30 |
31 |
JPA는 애플리케이션과 JDBC 사이에서 동작하며, 개발자가 JPA를 활용했을 때 JDBC API를 통해 SQL을 호출하여 데이터베이스와 호출하는 전개가 이루어진다.
32 |
33 | 즉, 개발자는 JPA의 활용법만 익히면 DB 쿼리 구현없이 데이터베이스를 관리할 수 있다.
34 |
35 |
36 |
37 | ### JPA 특징
38 |
39 | 1. ##### 객체 중심 개발 가능
40 |
41 | SQL 중심 개발이 이루어진다면, CRUD 작업이 반복해서 이루어져야한다.
42 |
43 | 하나의 테이블을 생성해야할 때 이에 해당하는 CRUD를 전부 만들어야 하며, 추후에 컬럼이 생성되면 관련 SQL을 모두 수정해야 하는 번거로움이 있다. 또한 개발 과정에서 실수할 가능성도 높아진다.
44 |
45 |
46 |
47 | 2. ##### 생산성 증가
48 |
49 | SQL 쿼리를 직접 생성하지 않고, 만들어진 객체에 JPA 메소드를 활용해 데이터베이스를 다루기 때문에 개발자에게 매우 편리성을 제공해준다.
50 |
51 |
52 |
53 | 3. ##### 유지보수 용이
54 |
55 | 쿼리 수정이 필요할 때, 이를 담아야 할 DTO 필드도 모두 변경해야 하는 작업이 필요하지만 JPA에서는 엔티티 클래스 정보만 변경하면 되므로 유지보수에 용이하다.
56 |
57 | 4. ##### 성능 증가
58 |
59 | 사람이 직접 SQL을 짜는 것과 비교해서 JPA는 동일한 쿼리에 대한 캐시 기능을 지원해주기 때문에 비교적 높은 성능 효율을 경험할 수 있다.
60 |
61 |
62 |
63 | #### 제약사항
64 |
65 | JPA는 복잡한 쿼리보다는 실시간 쿼리에 최적화되어있다. 예를 들어 통계 처리와 같은 복잡한 작업이 필요한 경우에는 기존의 Mybatis와 같은 Mapper 방식이 더 효율적일 수 있다.
66 |
67 | > Spring에서는 JPA와 Mybatis를 같이 사용할 수 있기 때문에, 상황에 맞는 방식을 택하여 개발하면 된다.
68 |
69 |
70 |
71 |
72 |
73 | #### [참고 사항]
74 |
75 | - [링크](https://velog.io/@modsiw/JPAJava-Persistence-API%EC%9D%98-%EA%B0%9C%EB%85%90)
76 | - [링크](https://wedul.site/506)
77 |
78 |
--------------------------------------------------------------------------------
/Web/Spring/Spring MVC.md:
--------------------------------------------------------------------------------
1 | # Spring MVC Framework
2 |
3 |
4 |
5 | ```
6 | 스프링 MVC 프레임워크가 동작하는 원리를 이해하고 있어야 한다
7 | ```
8 |
9 |
10 |
11 |
12 |
13 | 클라이언트가 서버에게 url을 통해 요청할 때 일어나는 스프링 프레임워크의 동작을 그림으로 표현한 것이다.
14 |
15 |
16 |
17 | ### MVC 진행 과정
18 |
19 | ----
20 |
21 | - 클라이언트가 url을 요청하면, 웹 브라우저에서 스프링으로 request가 보내진다.
22 | - `Dispatcher Servlet`이 request를 받으면, `Handler Mapping`을 통해 해당 url을 담당하는 Controller를 탐색 후 찾아낸다.
23 | - 찾아낸 `Controller`로 request를 보내주고, 보내주기 위해 필요한 Model을 구성한다.
24 | - `Model`에서는 페이지 처리에 필요한 정보들을 Database에 접근하여 쿼리문을 통해 가져온다.
25 | - 데이터를 통해 얻은 Model 정보를 Controller에게 response 해주면, Controller는 이를 받아 Model을 완성시켜 Dispatcher Servlet에게 전달해준다.
26 | - Dispatcher Servlet은 `View Resolver`를 통해 request에 해당하는 view 파일을 탐색 후 받아낸다.
27 | - 받아낸 View 페이지 파일에 Model을 보낸 후 클라이언트에게 보낼 페이지를 완성시켜 받아낸다.
28 | - 완성된 View 파일을 클라이언트에 response하여 화면에 출력한다.
29 |
30 |
31 |
32 | ### 구성 요소
33 |
34 | ---
35 |
36 | #### Dispatcher Servlet
37 |
38 | 모든 request를 처리하는 중심 컨트롤러라고 생각하면 된다. 서블릿 컨테이너에서 http 프로토콜을 통해 들어오는 모든 request에 대해 제일 앞단에서 중앙집중식으로 처리해주는 핵심적인 역할을 한다.
39 |
40 | 기존에는 web.xml에 모두 등록해줘야 했지만, 디스패처 서블릿이 모든 request를 핸들링하면서 작업을 편리하게 할 수 있다.
41 |
42 |
43 |
44 | #### Handler Mapping
45 |
46 | 클라이언트의 request url을 어떤 컨트롤러가 처리해야 할 지 찾아서 Dispatcher Servlet에게 전달해주는 역할을 담당한다.
47 |
48 | > 컨트롤러 상에서 url을 매핑시키기 위해 `@RequestMapping`을 사용하는데, 핸들러가 이를 찾아주는 역할을 한다.
49 |
50 |
51 |
52 | #### Controller
53 |
54 | 실질적인 요청을 처리하는 곳이다. Dispatcher Servlet이 프론트 컨트롤러라면, 이 곳은 백엔드 컨트롤러라고 볼 수 있다.
55 |
56 | 모델의 처리 결과를 담아 Dispatcher Servlet에게 반환해준다.
57 |
58 |
59 |
60 | #### View Resolver
61 |
62 | 컨트롤러의 처리 결과를 만들 view를 결정해주는 역할을 담당한다. 다양한 종류가 있기 때문에 상황에 맞게 활용하면 된다.
63 |
64 |
65 |
66 |
67 |
68 | #### [참고사항]
69 |
70 | - [링크](https://velog.io/@miscaminos/Spring-MVC-framework)
71 | - [링크](https://velog.io/@miscaminos/Spring-MVC-framework)
--------------------------------------------------------------------------------
/Web/Spring/[Spring Boot] SpringApplication.md:
--------------------------------------------------------------------------------
1 | ## [Spring Boot] SpringApplication
2 |
3 |
4 |
5 | 스프링 부트로 프로젝트를 실행할 때 Application 클래스를 만든다.
6 |
7 | 클래스명은 개발자가 프로젝트에 맞게 설정할 수 있지만, 큰 틀은 아래와 같다.
8 |
9 | ```java
10 | @SpringBootApplication
11 | public class Application {
12 |
13 | public static void main(String[] args) {
14 | SpringApplication.run(Application.class, args);
15 | }
16 |
17 | }
18 | ```
19 |
20 |
21 |
22 | `@SpringBootApplication` 어노테이션을 통해 스프링 Bean을 읽어와 자동으로 생성해준다.
23 |
24 | 이 어노테이션이 있는 파일 위치부터 설정들을 읽어가므로, 반드시 프로젝트의 최상단에 만들어야 한다.
25 |
26 | `SpringApplication.run()`으로 해당 클래스를 run하면, 내장 WAS를 실행한다. 내장 WAS의 장점으로는 개발자가 따로 톰캣과 같은 외부 WAS를 설치 후 설정해두지 않아도 애플리케이션을 실행할 수 있다.
27 |
28 | 또한, 외장 WAS를 사용할 시 이 프로젝트를 실행시키기 위한 서버에서 모두 외장 WAS의 종류와 버전, 설정을 일치시켜야만 한다. 따라서 내장 WAS를 사용하면 이런 신경은 쓰지 않아도 되기 때문에 매우 편리하다.
29 |
30 | > 실제로 많은 회사들이 이런 장점을 살려 내장 WAS를 사용하고 있고, 전환하고 있다.
31 |
32 |
--------------------------------------------------------------------------------
/Web/Spring/[Spring Data JPA] 더티 체킹 (Dirty Checking).md:
--------------------------------------------------------------------------------
1 | # [JPA] 더티 체킹 (Dirty Checking)
2 |
3 |
4 |
5 |
6 | ```
7 | 트랜잭션 안에서 Entity의 변경이 일어났을 때
8 | 변경한 내용을 자동으로 DB에 반영하는 것
9 | ```
10 |
11 |
12 |
13 | ORM 구현체 개발 시 더티 체킹이라는 말을 자주 볼 수 있다.
14 |
15 | 더티 체킹이 어떤 것을 뜻하는 지 간단히 살펴보자.
16 |
17 |
18 |
19 | JPA로 개발하는 경우 구현한 한 가지 기능을 예로 들어보자
20 |
21 | ##### ex) 주문 취소 기능
22 |
23 | ```java
24 | @Transactional
25 | public void cancelOrder(Long orderId) {
26 | //주문 엔티티 조회
27 | Order order = orderRepository.findOne(orderId);
28 |
29 | //주문 취소
30 | order.cancel();
31 | }
32 | ```
33 |
34 | `orderId`를 통해 주문을 취소하는 메소드다. 데이터베이스에 반영하기 위해선, `update`와 같은 쿼리가 있어야할 것 같은데 존재하지 않는다.
35 |
36 | 하지만, 실제로 이 메소드를 실행하면 데이터베이스에 update가 잘 이루어진다.
37 |
38 | - 트랜잭션 시작
39 | - `orderId`로 주문 Entity 조회
40 | - 해당 Entity 주문 취소 상태로 **Update**
41 | - 트랜잭션 커밋
42 |
43 | 이를 가능하게 하는 것이 바로 '더티 체킹(Dirty Checking)'이라고 보면 된다.
44 |
45 |
46 |
47 | 그냥 더티 체킹의 단어만 간단히 해석하면 `변경 감지`로 볼 수 있다. 좀 더 자세히 말하면, Entity에서 변경이 일어난 걸 감지한 뒤, 데이터베이스에 반영시켜준다는 의미다. (변경은 최초 조회 상태가 기준이다)
48 |
49 | > Dirty : 상태의 변화가 생김
50 | >
51 | > Checking : 검사
52 |
53 | JPA에서는 트랜잭션이 끝나는 시점에 변화가 있던 모든 엔티티의 객체를 데이터베이스로 알아서 반영을 시켜준다. 즉, 트랜잭션의 마지막 시점에서 다른 점을 발견했을 때 데이터베이스로 update 쿼리를 날려주는 것이다.
54 |
55 | - JPA에서 Entity를 조회
56 | - 조회된 상태의 Entity에 대한 스냅샷 생성
57 | - 트랜잭션 커밋 후 해당 스냅샷과 현재 Entity 상태의 다른 점을 체크
58 | - 다른 점들을 update 쿼리로 데이터베이스에 전달
59 |
60 |
61 |
62 | 이때 더티 체킹을 검사하는 대상은 `영속성 컨텍스트`가 관리하는 Entity로만 대상으로 한다.
63 |
64 | 준영속, 비영속 Entity는 값을 변경할 지라도 데이터베이스에 반영시키지 않는다.
65 |
66 |
67 |
68 | 기본적으로 더티 체킹을 실행하면, SQL에서는 변경된 엔티티의 모든 내용을 update 쿼리로 만들어 전달하는데, 이때 필드가 많아지면 전체 필드를 update하는게 비효율적일 수도 있다.
69 |
70 | 이때는 `@DynamicUpdate`를 해당 Entity에 선언하여 변경 필드만 반영시키도록 만들어줄 수 있다.
71 |
72 | ```java
73 | @Getter
74 | @NoArgsConstructor
75 | @Entity
76 | @DynamicUpdate
77 | public class Order {
78 |
79 | @Id
80 | @GeneratedValue(strategy = GenerationType.IDENTITY)
81 | private Long id;
82 | private String product;
83 | ```
84 |
85 |
86 |
87 |
88 |
89 | #### [참고 자료]
90 |
91 | - [링크](https://velog.io/@jiny/JPA-%EB%8D%94%ED%8B%B0-%EC%B2%B4%ED%82%B9Dirty-Checking-%EC%9D%B4%EB%9E%80)
92 | - [링크](https://jojoldu.tistory.com/415)
93 |
--------------------------------------------------------------------------------
/Web/Spring/[Spring] Bean Scope.md:
--------------------------------------------------------------------------------
1 | # [Spring] Bean Scope
2 |
3 |
4 |
5 | 
6 |
7 |
8 |
9 | ```
10 | Bean의 사용 범위를 말하는 Bean Scope의 종류에 대해 알아보자
11 | ```
12 |
13 |
14 |
15 | Bean은 스프링에서 사용하는 POJO 기반 객체다.
16 |
17 | 상황과 필요에 따라 Bean을 사용할 때 하나만 만들어야 할 수도 있고, 여러개가 필요할 때도 있고, 어떤 한 시점에서만 사용해야할 때가 있을 수 있다.
18 |
19 | 이를 위해 Scope를 설정해서 Bean의 사용 범위를 개발자가 설정할 수 있다.
20 |
21 |
22 |
23 | 우선 따로 설정을 해주지 않으면, Spring에서 Bean은 `Singleton`으로 생성된다. 싱글톤 패턴처럼 특정 타입의 Bean을 딱 하나만 만들고 모두 공유해서 사용하기 위함이다. 보통은 Bean을 이렇게 하나만 만들어 사용하는 경우가 대부분이지만, 요구사항이나 구현에 따라 아닐 수도 있을 것이다.
24 |
25 | 따라서 Bean Scope는 싱글톤 말고도 여러가지를 지원해준다.
26 |
27 |
28 |
29 | ### Scope 종류
30 |
31 | - #### singleton
32 |
33 | 해당 Bean에 대해 IoC 컨테이너에서 단 하나의 객체로만 존재한다.
34 |
35 | - #### prototype
36 |
37 | 해당 Bean에 대해 다수의 객체가 존재할 수 있다.
38 |
39 | - #### request
40 |
41 | 해당 Bean에 대해 하나의 HTTP Request의 라이프사이클에서 단 하나의 객체로만 존재한다.
42 |
43 | - #### session
44 |
45 | 해당 Bean에 대해 하나의 HTTP Session의 라이프사이클에서 단 하나의 객체로만 존재한다.
46 |
47 | - #### global session
48 |
49 | 해당 Bean에 대해 하나의 Global HTTP Session의 라이프사이클에서 단 하나의 객체로만 존재한다.
50 |
51 | > request, session, global session은 MVC 웹 어플리케이션에서만 사용함
52 |
53 |
54 |
55 | Scope들은 Bean으로 등록하는 클래스에 어노테이션으로 설정해줄 수 있다.
56 |
57 | ```java
58 | import org.springframework.context.annotation.Scope;
59 | import org.springframework.stereotype.Service;
60 |
61 | @Scope("prototype")
62 | @Component
63 | public class UserController {
64 | }
65 | ```
66 |
67 |
68 |
69 |
70 |
71 | #### [참고 자료]
72 |
73 | - [링크](https://gmlwjd9405.github.io/2018/11/10/spring-beans.html)
--------------------------------------------------------------------------------
/Web/UI와 UX.md:
--------------------------------------------------------------------------------
1 | ## UI와 UX
2 |
3 |
4 |
5 | 많이 들어봤지만, 차이를 말하라고 하면 멈칫한다. 면접에서도 웹을 했다고 하면 나올 수 있는 질문.
6 |
7 |
8 |
9 | ### UI
10 |
11 | > User Interface
12 |
13 | 사용자가 앱을 사용할 때 마주하는 디자인, 레이아웃, 기술적인 부분이다.
14 |
15 | 디자인의 구성 요소인 폰트, 색깔, 줄간격 등 상세한 요소가 포함되고, 기술적 부분은 반응형이나 애니메이션효과 등이 포함된다.
16 |
17 | 따라서 UI는 사용자가 사용할 때 큰 불편함이 없어야하며, 만족도를 높여야 한다.
18 |
19 |
20 |
21 |
22 |
23 | ### UX
24 |
25 | > User eXperience
26 |
27 | 앱을 주로 사용하는 사용자들의 경험을 분석하여 더 편하고 효율적인 방향으로 프로세스가 진행될 수 있도록 만드는 것이다.
28 |
29 | (터치 화면, 사용자의 선택 flow 등)
30 |
31 | UX는 통계자료, 데이터를 기반으로 앱을 사용하는 유저들의 특성을 분석하여 상황과 시점에 맞도록 변화시킬 수 있어야 한다.
32 |
33 |
34 |
35 | UI를 포장물에 비유한다면, UX는 그 안의 내용물이라고 볼 수 있다.
36 |
37 | > 포장(UI)에 신경을 쓰는 것도 중요하고, 이를 사용할 사람을 분석해 알맞은 내용물(UX)로 채워서 제공해야한다.
38 |
39 |
--------------------------------------------------------------------------------
/Web/Vue.js와 React의 차이.md:
--------------------------------------------------------------------------------
1 | ## Vue.js와 React의 차이
2 |
3 |
4 |
5 |
6 |
7 | ##### 개발 CLI
8 |
9 | - Vue.js : vue-cli
10 | - React : create-react-app
11 |
12 | ##### CSS 파일 존재 유무
13 |
14 | - Vue.js : 없음. style이 실제 컴포넌트 파일 안에서 정의됨
15 | - React : 파일이 존재. 해당 파일을 통해 style 적용
16 |
17 | ##### 데이터 변이
18 |
19 | - Vue.js : 반드시 데이터 객체를 생성한 이후 data를 업데이트 할 수 있음
20 | - React : state 객체를 만들고, 업데이트에 조금 더 작업이 필요
21 |
22 | ```
23 | name: kim 값을 lee로 바꾸려면
24 | Vue.js : this.name = 'lee'
25 | React : this.setState({name:'lee'})
26 | ```
27 |
28 | Vue에서는 data를 업데이트할 때마다 setState를 알아서 결합해분다.
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 | #### [참고 사항]
37 |
38 | - [링크]( [https://medium.com/@erwinousy/%EB%82%9C-react%EC%99%80-vue%EC%97%90%EC%84%9C-%EC%99%84%EC%A0%84%ED%9E%88-%EA%B0%99%EC%9D%80-%EC%95%B1%EC%9D%84-%EB%A7%8C%EB%93%A4%EC%97%88%EB%8B%A4-%EC%9D%B4%EA%B2%83%EC%9D%80-%EA%B7%B8-%EC%B0%A8%EC%9D%B4%EC%A0%90%EC%9D%B4%EB%8B%A4-5cffcbfe287f](https://medium.com/@erwinousy/난-react와-vue에서-완전히-같은-앱을-만들었다-이것은-그-차이점이다-5cffcbfe287f) )
39 | - [링크](https://kr.vuejs.org/v2/guide/comparison.html)
40 |
41 |
--------------------------------------------------------------------------------
/Web/[Web] REST API.md:
--------------------------------------------------------------------------------
1 | ### REST API
2 |
3 | ----
4 |
5 | REST : 웹 (HTTP) 의 장점을 활용한 아키텍쳐
6 |
7 | #### 1. REST (REpresentational State Transfer) 기본
8 |
9 | * REST의 요소
10 |
11 | * Method
12 |
13 | | Method | 의미 | Idempotent |
14 | | ------ | ------ | ---------- |
15 | | POST | Create | No |
16 | | GET | Select | Yes |
17 | | PUT | Update | Yes |
18 | | DELETE | Delete | Yes |
19 |
20 | > Idempotent : 한 번 수행하냐, 여러 번 수행했을 때 결과가 같나?
21 |
22 |
23 |
24 | * Resource
25 |
26 | * http://myweb/users와 같은 URI
27 | * 모든 것을 Resource (명사)로 표현하고, 세부 Resource에는 id를 붙임
28 |
29 |
30 |
31 | * Message
32 |
33 | * 메시지 포맷이 존재
34 |
35 | : JSON, XML 과 같은 형태가 있음 (최근에는 JSON 을 씀)
36 |
37 | ```text
38 | HTTP POST, http://myweb/users/
39 | {
40 | "users" : {
41 | "name" : "terry"
42 | }
43 | }
44 | ```
45 |
46 |
47 |
48 | * REST 특징
49 |
50 | * Uniform Interface
51 |
52 | * HTTP 표준만 맞는다면, 어떤 기술도 가능한 Interface 스타일
53 |
54 | 예) REST API 정의를 HTTP + JSON로 하였다면, C, Java, Python, IOS 플랫폼 등 특정 언어나 기술에 종속 받지 않고, 모든 플랫폼에 사용이 가능한 Loosely Coupling 구조
55 |
56 | * 포함
57 | * Self-Descriptive Messages
58 |
59 | * API 메시지만 보고, API를 이해할 수 있는 구조 (Resource, Method를 이용해 무슨 행위를 하는지 직관적으로 이해할 수 있음)
60 |
61 | * HATEOAS(Hypermedia As The Engine Of Application State)
62 |
63 | * Application의 상태(State)는 Hyperlink를 통해 전이되어야 함.
64 | * 서버는 현재 이용 가능한 다른 작업에 대한 하이퍼링크를 포함하여 응답해야 함.
65 |
66 | * Resource Identification In Requests
67 |
68 | * Resource Manipulation Through Representations
69 |
70 | * Statelessness
71 |
72 | * 즉, HTTP Session과 같은 컨텍스트 저장소에 **상태 정보 저장 안함**
73 | * **Request만 Message로 처리**하면 되고, 컨텍스트 정보를 신경쓰지 않아도 되므로, **구현이 단순해짐**.
74 |
75 | * 따라서, REST API 실행중 실패가 발생한 경우, Transaction 복구를 위해 기존의 상태를 저장할 필요가 있다. (POST Method 제외)
76 |
77 | * Resource 지향 아키텍쳐 (ROA : Resource Oriented Architecture)
78 |
79 | * Resource 기반의 복수형 명사 형태의 정의를 권장.
80 |
81 | * Client-Server Architecture
82 |
83 | * Cache Ability
84 |
85 | * Layered System
86 |
87 | * Code On Demand(Optional)
88 |
--------------------------------------------------------------------------------
/Web/네이티브 앱 & 웹 앱 & 하이브리드 앱.md:
--------------------------------------------------------------------------------
1 | ## 네이티브 앱 & 웹 앱 & 하이브리드 앱
2 |
3 |
4 |
5 | #### 네이티브 앱 (Native App)
6 |
7 |
8 |
9 | 흔히 우리가 자주 사용하는 어플리케이션을 의미한다.
10 |
11 | 모바일 기기에 최적화된 언어로 개발된 앱으로 안드로이드 SDK를 이용한 Java 언어나 iOS 기반 SDK를 이용한 Swift 언어로 만드는 앱이 네이티브 앱에 속한다.
12 |
13 |
14 |
15 | ##### 장점
16 |
17 | - 성능이 웹앱, 하이브리드 앱에 비해 가장 높음
18 | - 네이티브 API를 호출하여 사용함으로 플랫폼과 밀착되어있음
19 | - Java나 Swift에 익숙한 사용자면 쉽게 접근 가능함
20 |
21 | ##### 단점
22 |
23 | - 플랫폼에 한정적
24 | - 언어에 제약적
25 |
26 |
27 |
28 |
29 |
30 | #### 모바일 웹 앱 (Mobile Wep App)
31 |
32 |
33 |
34 | 모바일웹 + 네이티브 앱을 결합한 형태
35 |
36 | 모바일 웹의 특징을 가지면서도, 네이티브 앱의 장점을 지녔다. 따라서 기존의 모바일 웹보다는 모바일에 최적화 된 앱이라고 말할 수 있다.
37 |
38 | 웹앱은 SPA를 활용해 속도가 빠르다는 장점이 있다.
39 |
40 | > 쉽게 말해, PC용 홈페이지를 모바일 스크린 크기에 맞춰 줄여 놓은 것이라고 생각하면 편함
41 |
42 |
43 |
44 | ##### 장점
45 |
46 | - 웹 사이트를 보는 것이므로 따로 설치할 필요X
47 | - 모든 기기와 브라우저에서 접근 가능
48 | - 별도 설치 및 승인 과정이 필요치 않아 유지보수에 용이
49 |
50 | ##### 단점
51 |
52 | - 플랫폼 API 사용 불가능. 오로지 브라우저 API만 사용가능
53 | - 친화적 터치 앱을 개발하기 약간 번거로움
54 | - 네이티브, 하이브리드 앱보다 실행 까다로움 (브라우저 열거 검색해서 들어가야함)
55 |
56 |
57 |
58 |
59 |
60 | #### 하이브리드 앱 (Hybrid App)
61 |
62 |
63 |
64 | > 네이티브 + 웹앱
65 |
66 | 네이티브 웹에, 웹 view를 띄워 웹앱을 실행시킨다. 양쪽의 API를 모두 사용할 수 있는 것이 가장 큰 장점
67 |
68 |
69 |
70 | ##### 장점
71 |
72 | - 네이티브 API, 브라우저 API를 모두 활용한 다양한 개발 가능
73 | - 웹 개발 기술로 앱 개발 가능
74 | - 한번의 개발로 다수 플랫폼에서 사용 가능
75 |
76 | ##### 단점
77 |
78 | - 네이티브 기능 접근 위해 개발 지식 필요
79 | - UI 프레임도구 사용안하면 개발자가 직접 UI 제작
80 |
81 |
82 |
83 |
84 |
85 | #### 요약
86 |
87 |
88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 | ##### [참고 자료]
96 |
97 | - [링크](https://m.blog.naver.com/acornedu/221012420292)
98 |
99 |
--------------------------------------------------------------------------------
/resources/CPU 스케줄링.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/CPU 스케줄링.PNG
--------------------------------------------------------------------------------
/resources/CPU점유.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/CPU점유.PNG
--------------------------------------------------------------------------------
/resources/Main Image.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/Main Image.png
--------------------------------------------------------------------------------
/resources/authentication.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/authentication.JPG
--------------------------------------------------------------------------------
/resources/composite_pattern_1.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/composite_pattern_1.PNG
--------------------------------------------------------------------------------
/resources/composite_pattern_2.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/composite_pattern_2.PNG
--------------------------------------------------------------------------------
/resources/composite_pattern_3.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/composite_pattern_3.PNG
--------------------------------------------------------------------------------
/resources/login.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/login.JPG
--------------------------------------------------------------------------------
/resources/ncsoft.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/ncsoft.jpg
--------------------------------------------------------------------------------
/resources/roadmap.PNG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/roadmap.PNG
--------------------------------------------------------------------------------
/resources/run 화면.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/run 화면.JPG
--------------------------------------------------------------------------------
/resources/signup.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/signup.JPG
--------------------------------------------------------------------------------
/resources/vue init.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/vue init.JPG
--------------------------------------------------------------------------------
/resources/로그인 성공.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/로그인 성공.JPG
--------------------------------------------------------------------------------
/resources/비밀번호 불일치시.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/비밀번호 불일치시.JPG
--------------------------------------------------------------------------------
/resources/사용자확인.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/사용자확인.JPG
--------------------------------------------------------------------------------
/resources/웹앱 추가.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/웹앱 추가.JPG
--------------------------------------------------------------------------------
/resources/파이어베이스 프로젝트 추가.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/파이어베이스 프로젝트 추가.JPG
--------------------------------------------------------------------------------
/resources/파이어베이스 프로젝트 추가2.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/파이어베이스 프로젝트 추가2.JPG
--------------------------------------------------------------------------------
/resources/활성화.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/활성화.JPG
--------------------------------------------------------------------------------
/resources/회원가입성공.JPG:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/MangKyu/tech-interview-for-developer/b478de0481da8227913c647afb004c5d39c0718e/resources/회원가입성공.JPG
--------------------------------------------------------------------------------