no image
[DFS/BFS] 백준 18352번 특정 거리의 도시 찾기(Java)
https://www.acmicpc.net/problem/18352 18352번: 특정 거리의 도시 찾기 첫째 줄에 도시의 개수 N, 도로의 개수 M, 거리 정보 K, 출발 도시의 번호 X가 주어진다. (2 ≤ N ≤ 300,000, 1 ≤ M ≤ 1,000,000, 1 ≤ K ≤ 300,000, 1 ≤ X ≤ N) 둘째 줄부터 M개의 줄에 걸쳐서 두 개 www.acmicpc.net 📚 문제 어떤 나라에는 1번부터 N번까지의 도시와 M개의 단방향 도로가 존재한다. 모든 도로의 거리는 1이다. 이 때 특정한 도시 X로부터 출발하여 도달할 수 있는 모든 도시 중에서, 최단 거리가 정확히 K인 모든 도시들의 번호를 출력하는 프로그램을 작성하시오. 또한 출발 도시 X에서 출발 도시 X로 가는 최단 거리는 항상 ..
2022.12.13
no image
[구현] 이코테 문자열 재정렬(Java)
📚 문제 알파벳 대문자와 숫자(0~9)로만 구성된 문자열이 입력으로 주어진다. 이때 모든 알파벳을 오름차순으로 정렬하여 이어서 출력한 뒤에, 그 뒤에 모든 숫자를 더한 값을 이어 출력한다. 📝 문제 해설 문자열 ➡️ 별도의 리스트에 저장 후 정렬 숫자 ➡️ 합계 계산 후, 문자열 뒤에 합계 출력 💻 코드 package implementation; import java.util.*; public class impl06 { public static void main(String[] args) { StringBuilder sb = new StringBuilder(); Scanner sc = new Scanner(System.in); String str = sc.next(); ArrayList result = ..
2022.12.13
no image
[React] React.js란?
React란? facebook에서 제공해주는 자바스크립트 UI 라이브러리로서 사용자 인터페이스를 만들기 위해 사용된다. 리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니 프레임워크 Angular와 달리 웹을 만드는데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 따라서 추가적인 라이브러리를 사용해줘야 함. 📌 프레임워크와 라이브러리의 차이는? 더보기 프레임워크 라이브러리 공동점 다른 사람이 만들어 둔 코드 차이점 다른 사람이 만든 틀(Frame)안으로 들어가서 작업하는 것 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것 예) Spring, Angular, django jQuery, react 왜 React를 사용할까? React를 사용하면 개발자가 페..
2022.12.13
no image
[Web] Virtual DOM이란?
브라우저의 동작 브라우저 렌더링 과정 1. DOM tree 생성 : 렌더 엔진이 HTML코드를 읽고 파싱하여 DOM 노드로 이루어진 트리 생성 DOM이란? Document Object Model의 약자로 DOM은 html, xml, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다. 2. render tree 생성 : css 파일이나 html에 인라인으로 작성된 스타일 코드를 파싱하여 css DOM을 구성한다. DOM + CSSOM = 렌더 트리를 생성 (문서에 시각적인 구조를 나타냄) 3. Layout(reflow) : 뷰포트 내에서 생성된 render tree의 각 노드들의 스크린에서의 좌표에 따라 위치 결정 4. Paint(repaint) : 실제 화면에 그리기 렌더링이란? HTM..
2022.12.11

https://www.acmicpc.net/problem/18352

 

18352번: 특정 거리의 도시 찾기

첫째 줄에 도시의 개수 N, 도로의 개수 M, 거리 정보 K, 출발 도시의 번호 X가 주어진다. (2 ≤ N ≤ 300,000, 1 ≤ M ≤ 1,000,000, 1 ≤ K ≤ 300,000, 1 ≤ X ≤ N) 둘째 줄부터 M개의 줄에 걸쳐서 두 개

www.acmicpc.net

📚 문제

어떤 나라에는 1번부터 N번까지의 도시와 M개의 단방향 도로가 존재한다. 모든 도로의 거리는 1이다.
이 때 특정한 도시 X로부터 출발하여 도달할 수 있는 모든 도시 중에서, 최단 거리가 정확히 K인 모든 도시들의 번호를 출력하는 프로그램을 작성하시오. 또한 출발 도시 X에서 출발 도시 X로 가는 최단 거리는 항상 0이라고 가정한다.
예를 들어 N=4, K=2, X=1일 때 다음과 같이 그래프가 구성되어 있다고 가정하자.

이 때 1번 도시에서 출발하여 도달할 수 있는 도시 중에서, 최단 거리가 2인 도시는 4번 도시 뿐이다. 2번과 3번 도시의 경우, 최단 거리가 1이기 때문에 출력하지 않는다.


첫째 줄에 도시의 개수 N, 도로의 개수 M, 거리 정보 K, 출발 도시의 번호 X가 주어진다.
둘째 줄부터 M개의 줄에 걸쳐서 두 개의 자연수 A, B가 공백을 기준으로 구분되어 주어진다. 이는 A번 도시에서 B번 도시로 이동하는 단방향 도로가 존재한다는 의미다. (1 ≤ A, B N) 단, AB는 서로 다른 자연수이다.

X로부터 출발하여 도달할 수 있는 도시 중에서, 최단 거리가 K인 모든 도시의 번호를 한 줄에 하나씩 오름차순으로 출력한다. 이 때 도달할 수 있는 도시 중에서, 최단 거리가 K인 도시가 하나도 존재하지 않으면 -1을 출력한다.

예제 입력 예제 출력
4 4 2 1
1 2
1 3
2 3
2 4
4
4 3 2 1
1 2
1 3
1 4
-1
4 4 1 1
1 2
1 3
2 3
2 4
2
3

 

📝 문제 해결

시작점에서 연결된 노드 중 아직 방문하지 않은 노드는
1) 이전 노드의 거리에서 +1한 값으로 거리 배열(dist)을 업데이트해주고
2) 큐에 삽입한다.
큐가 빌 때까지 반복해주고 거리 배열에 K와 같은 값이 있다면 해당 인덱스를 출력해준다.

BFS로 최단거리 문제를 해결 가능한 경우는 가중치가 1일 때 만이다. 가중치가 1이 아닌 경우 최단거리를 구하는문제는 Dijkstra 로 푼다!

 

💻 코드

import java.util.*;
import java.io.*;

public class BOJ18352 {
    static ArrayList<ArrayList<Integer>> graph=new ArrayList<ArrayList<Integer>>();
    static int N, M, K, X;
    static int[] dist = new int[300001];
    
    public static void bfs(int x){
		dist[x] = 0;
        
		Queue<Integer> que = new LinkedList<>();
		que.offer(x);
		
		while(!que.isEmpty()) {
			int now = que.poll();
			
			for(int i=0; i<graph.get(now).size(); i++) {
			  int next=graph.get(now).get(i);
			  if(dist[next] == -1) {
			    dist[next]=dist[now]+1;
			    que.offer(next);
			  }
			}
		}
    }
    
    public static void main(String[] args) throws IOException{
		BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
		StringTokenizer st = new StringTokenizer(br.readLine());
		
		N = Integer.parseInt(st.nextToken());
		M = Integer.parseInt(st.nextToken());
		K = Integer.parseInt(st.nextToken());
		X = Integer.parseInt(st.nextToken());
		
		for(int i=0; i<=N; i++) {
			graph.add(new ArrayList<Integer>()); // 연결리스트에 노드 추가;
			dist[i] = -1;
		}
		
		for(int i=0; i<M; i++) {
			st = new StringTokenizer(br.readLine());
			int a = Integer.parseInt(st.nextToken());
			int b = Integer.parseInt(st.nextToken());
			
			graph.get(a).add(b);
		}
        
		bfs(X);
        
		StringBuilder sb = new StringBuilder();
		for(int i=0; i<=N; i++){
			if(dist[i] == K) sb.append(i + "\n");
		}
		System.out.println(sb.length() == 0 ? -1 : sb);
		
	}

}

 

728x90

📚 문제

알파벳 대문자와 숫자(0~9)로만 구성된 문자열이 입력으로 주어진다. 이때 모든 알파벳을 오름차순으로 정렬하여 이어서 출력한 뒤에, 그 뒤에 모든 숫자를 더한 값을 이어 출력한다.

📝 문제 해설

문자열 ➡️ 별도의 리스트에 저장 후 정렬
숫자 ➡️ 합계 계산 후, 문자열 뒤에 합계 출력

💻 코드

package implementation;

import java.util.*;

public class impl06 {
    public static void main(String[] args) {
        StringBuilder sb = new StringBuilder();
        Scanner sc = new Scanner(System.in);
        String str = sc.next();

        ArrayList<Character> result = new ArrayList<Character>();
        int value = 0;

        for (int i = 0; i < str.length(); i++) {
            if (Character.isLetter(str.charAt(i))) {
                result.add(str.charAt(i));
            }
            else {
                value += str.charAt(i) - '0';
            }
        }

        Collections.sort(result);

        for (int i = 0; i < result.size(); i++) {
           sb.append(result.get(i));
        }

        if (value != 0) sb.append(value);
        
        System.out.println(sb);
    }
}
728x90

[React] React.js란?

산누
|2022. 12. 13. 18:05

React란?

facebook에서 제공해주는 자바스크립트 UI 라이브러리로서 사용자 인터페이스를 만들기 위해 사용된다.
리액트는 싱글 페이지 애플리케이션에서 UI를 만드는 자바스크립트 라이브러리이다보니 프레임워크 Angular와 달리 웹을 만드는데 꼭 필요한 도구들이 전부 기본적으로 제공되지 않는다. 따라서 추가적인 라이브러리를 사용해줘야 함.

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

더보기
  프레임워크 라이브러리
공동점 다른 사람이 만들어 둔 코드
차이점 다른 사람이 만든 틀(Frame)안으로 들어가서 작업하는 것 내 작업에 다른 사람이 만들어 둔 코드를 가져와서 사용하는 것
예) Spring, Angular, django jQuery, react

 

 

왜 React를 사용할까?

React를 사용하면 개발자가 페이지를 다시 로드하지 않고도 데이터를 변경할 수 있는 대규모 웹 애플리케이션을 만들 수 있다.

JavaScript를 사용하여 HTML로 구성한 UI를 제어하기 위해서는 특정 DOM을 선택한 뒤, 특정 이벤트가 발생하면 변화를 주도록 설정해줘야한다. 따라서 사용자와 인터랙션이 자주 발생하여 동적으로 UI를 구현해야 한다면 관리하기 힘들고, 웹 애플리케이션의 규모가 커질수록 성능 저하의 원인이 될 수 있다.

하지만, 리액트는 Virtual DOM을 사용해서 빠른 성능을 유지하도록 한다.

 

React의 특징

선언형

어떻게가 아닌 무엇이 되면 되는지 즉, 최종 결과물을 선언하고 react에 전달하면 어떻게 해야 하는지는 react에서 알아서 처리한다.
React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다.선언형 뷰는 코드를 예측 가능하고 디버그하기 쉽게 만들어 줍니다.

선언적 vs 절차적

📌 절차적 개발이란?
목표를 이루기 위해서 어떻게(How) 개발해야 하는지에 초점을 맞추어서 진행한다. 만일 목표에 제대로 도달하지 못했다면 어떤 과정에서 문제가 생겼는지 모든 과정을 되짚어 보아야 한다. 이는 코드가 길어질수록 유지보수가 어려워진다.

 

Virtual DOM

React가 화면을 업데이트 하는 과정을 조금 더 효율적으로 수행하기 위한 기술이다.
DOM을 반복적으로 직접 조작하면 그만큼 브라우저가 렌더링을 자주 하게되고, 그만큼 PC 자원을 많이 소모하게되는 문제를 해결하기 위한 기술이다.

[참고 : https://141227.tistory.com/247 ]

 

[Web] Virtual DOM이란?

브라우저의 동작 브라우저 렌더링 과정 1. DOM tree 생성 : 렌더 엔진이 HTML코드를 읽고 파싱하여 DOM 노드로 이루어진 트리 생성 2. render tree 생성 : css 파일이나 html에 인라인으로 작성된 스타일 코

141227.tistory.com

 

Componenet 기반 구조

React는 UI(View)를 여러 컴포넌트를 쪼개서 만든다.
한 페이지 내에서도 여러 각 부분을 독립된 컴포넌트로 만들고, 이 컴포턴트를 조립해 화면을 구성한다.
컴포넌트 단위로 쪼개져 있기 때문에 전테 코드를 파악하기가 상대적으로 쉽다. 이렇게 기능 단위, UI 단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.따라서 코드를 반복해 입력할 필요 없이, 컴포넌트만 import해 사용하면 된다는 간편함이 있으며 애플리케이션이 복잡해지더라도 코드의 가독성과 유지보수, 관리가 용이해지는 장점을 가진다.

Component란? 재사용이 가능한 각각의 독립적인 단위의 소프트웨어 모듈

 

Props and State

React에서 구성요소가 데이터를 받거나 처리하고 보내기 위해 사용된다.

  • Props
    Props란 부모 컴포넌트에서 자식 컴포넌트로 전달해 주는 데이터를 말한다. (쉽게 읽기 전용 데이터라고 생각하면 됨) 자식 컴포넌트에서 전달받은 props는 변경이 불가능(불변)하고 props를 전달해준 최상위 부모 컴포넌트만 props를 변경할 수 있다.
  • State
    State는 컴포넌트 내부에서 선언하며 내부에서 값을 변경할 수 있다.(가변) state는 동적인 데이터를 다룰 때 사용하며, 사용자와의 상호작용을 통해 데이터를 동적으로 변경할 때 사용한다. 클래스형 컴포넌트에서만 사용할 수 있고, 각각의 state는 독립적이다.

 

단방향 데이터 흐름

React는 양방향 바인딩이 전제되는 MVC 패턴과는 다른 특징을 보인다. 페이스북에서 Flux라고 부르는 패턴이 적용되어 있는데, 단방향 바인딩이 특징이다.

페이스북과 같은 대규모 어플리케이션들의 등장하게 되면서, 사용자와의 상호작용이 뷰(view)를 통해서 일어나고, 이따금 사용자의 입력에 따라 뷰가 모델을 업데이트해야하고, 의존성때문에 하나의 모델이 또 다른 모델을 업데이트해야하는 특성을 가진 MVC패턴은 자칫하면 어플리케이션의 내부 구조를 복잡하게 만들었고, 이는 페이스북 개발팀들의 큰 골칫거리로 이어저 이를 해결하고자 페이스북 개발팀은 Flux 아키텍처를 개발하여 적용하기로 하였다.

 

JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법으로 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 형태의 코드로 변환된다.

결론적으로 사람들은 왜 리액트에 열광할까? 🤔

첫번째, 자바스크립트 기반으로 다른언어 배울필요 없음
두번째, 구조가 쿨하다. 요소별, 컴포넌트별로 나눠서 작업할 수 있음
세번째, 단방향(unidirectional) 데이터플로우를 가지고 있다. 데이터가 변하면 UI가 업데이트 됨 즉, UI에서는 데이터를 바꿀 수 없 다. (데이터 -> 데이터 변경 -> UI 변경)

위 세가지가 전 세계가 리액트에 열광하는 이유이다. 추가적으로 리액트는 프레임워크가 아니라 UI 라이브러리이므로 (MVC에서 View) 나머지는 원하는 대로 골라서 쓸 수 있다.

Welcome to React !

728x90

[Web] Virtual DOM이란?

산누
|2022. 12. 11. 22:20

브라우저의 동작

브라우저 렌더링 과정

1. DOM tree 생성 : 렌더 엔진이 HTML코드를 읽고 파싱하여 DOM 노드로 이루어진 트리 생성

DOM이란? Document Object Model의 약자로 DOM은 html, xml, CSS 등을 트리 구조로 인식하고 데이터를 객체로 간주하고 관리한다.


2. render tree 생성 : css 파일이나 html에 인라인으로 작성된 스타일 코드를 파싱하여 css DOM을 구성한다.

  • DOM + CSSOM = 렌더 트리를 생성 (문서에 시각적인 구조를 나타냄)

3. Layout(reflow) : 뷰포트 내에서 생성된 render tree의 각 노드들의 스크린에서의 좌표에 따라 위치 결정
4. Paint(repaint) : 실제 화면에 그리기

렌더링이란? HTML, CSS, 자바스크립트 등 개발자가 작성한 문서가 브라우저에서 출력되는 과정을 말한다.

 

DOM 조작의 비효율성

여기서 문제는 어떤 인터랙션에의해 DOM에 변화가 발생하면 render tree가 그때마다 재생성된다는 것이다.변화가 발생하면 모든 요소들의 스타일을 다시 계산하고 reflow 과정을 거치고 다시 repaint하는 과정까지 반복한다.
예를 들어 유저가 어떤 포스트에 좋아요를 누르거나 담아둔 장바구니 목록에서 상품을 하나 삭제하거나, 댓글을 남기면 전체 노드들이 다시 그려지게되는 것이다. DOM을 조작하는 소모적인 비용이 발생함.

무조건 Virtual DOM? 🤔
정보 제공만 하는 웹페이지라면 인터랙션이 발생하지 않기 때문에 일반 DOM의 성능이 더 좋을 수도 있다.
하지만, SPA로 제작된 큰 규모의 웹 페이지에서는 Virtual DOM을 사용해서 브라우저의 연산 양을 줄여 성능을 개선할 수 있다.

 

Virtual DOM의 등장

페이지를 서버가 아닌 브라우저에서 관리

최근에는 SPA(Single Page Application)을 많이 사용하면서 DOM tree를 즉각적으로 많이 변경할 일이 생겨났다. 전체 페이지를 서버에서 매번 보내주는 것이 아니라, 브라우저단에서 자바스크립트가 관리하기 때문에 DOM 조작을 더욱 더 효율적으로 할 수 있게끔 최적화가 필요해졌다. 그래서 등장한 것이 Virtual DOM이다.

Virtual DOM이란?

Virtual DOM은 기존 DOM의 복사본이자 HTML DOM의 추상화 버전이다.
실제 DOM object와 같은 속성(class 등)들을 가지고 있지만, 실제 DOM이 갖고 있는 api(getElementById 등)는 갖고 있지 않다.

  1. 데이터가 변경되면 전체 UI는 virtual DOM에 렌더링된다.
  2. 이전 virtual DOM에 있던 내용과 업데이트 후의 내용을 비교하여 바뀐 부분만 실제 DOM에 적용시킨다.

즉, virtual DOM에 변경사항이 반영되면 원본 DOM에 필요한 변화만 반영되어서 전체 real DOM을 바꾸지 않고도 필요한 UI의 업데이트를 적용할 수 있다.

 

Virtual DOM의 동작 원리

Virtual DOM은 HTML 객채에 기반한 자바스크립트 객체로 표현할 수 있다.

  • JavaScript 객체로 표현
  • 실제 DOM이 아닌 메모리 상에서 동작 (훨씬 빠름)
  • 실제 렌더링이 되지않기때문에 연산 비용 최소화 (모든 변화를 하나로 묶어서 딱 한 번만 실행)

사실 Virtual DOM이 하는 건 DOM fragment의 변화를 묶어서 적용한 다음 기존 DOM에 던져주는 과정을 자동화, 추상화한 것에 불과

 

React의 Virtual DOM

React는 Virtual DOM을 이용하는 대표적인 자바스크립트 라이브러리로
React에서 Virtual DOM을 UI의 가상적인 표현을 메모리에 저장하고 ReactDOM과 같은 라이브러리에 의해 실제 DOM과 동기화하는 프로그램의 개념이다 라고 설명하고 있다. 그리고 이 과정을 재조정이라고 부른다.

 

JSX

JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장 문법이다. JSX를 컴포넌트에서 리턴 시키면 바벨은 JSX를 React.createElement() 호출로 컴파일한다. 실제 바벨에서 변환을 시켜보면 React element 객체를 리턴하는 하는 것을 확인할 수 있다.


React elements는 DOM 요소의 가상 버전으로 가볍고 상태를 가지지 않으며, 불변성을 유지한다. 이 불변성 덕분에 비교하고 업데이트 하는 게 쉬워짐. React elements는 reactDOM의 render에 의해서 비로소 실제 DOM 요소가 된다. React는 이 객체를 읽어들이고 이를 사용해서 DOM을 구성하고 항상 최신상태로 유지함.

하지만 앞서 말했듯 이 react elements는 변경이 불가하기 때문에 한번 요소가 만들었다면 데이터가 변해도 그 자식이나 속성을 맘대로 변경할 수 없다. UI를 업데이트할 수 있는 유일한 방법은 새로운 요소를 만들어 ReactDom.render()로 전송하는 것 뿐이다.

 

diffing 알고리즘

모든 React DOM object는 그에 대응하는 virtual DOM object가 있다. 그리고 virtual DOM object는 그 DOM object 하나하나에 매핑된다. 데이터가 업데이트 되면 바뀐 데이터를 바탕으로 React.createElement()를 통해 JSX element를 렌더링한다. 이때 모든 각각의 virtual DOM object가 업데이트된다. virtual DOM이 업데이트되면 React는 Virtual DOM을 업데이트 이전에 virtual DOM 스냅샷과 비교하여 정확히 어떤 virtual DOM이 바뀌었는지 검사한다. 이 과정을 "diffing" 알고리즘이라고 한다.

  • element의 속성 값만 변한 경우 ➡️ 속성 값만 업데이트
  • element의 태그 또는 컴포넌트가 변경된 경우 ➡️ 해당 노드를 포함한 하위 모든 노드를 unmount(제거) 후 새로운 virtual DOM으로 대체

 

 

728x90