돔(DOM)이란 Document Object Model의 약자로HTML 및 XML 문서를 웹 브라우저가 인식한 객체를 의미(일종의 인터페이스)
DOM은 다음과 같은 다음과 같은 workflow를 따른다. 즉 html를 읽어서 DOM 트리, CSS 트리를 만들고 DOM의 위치를 잡고 거기에 그리고 색을 채운다.
2. DOM의 단점?
단순히 HTML을 서버에서 받아 브라우저에 그릴 때는 문제가 생기지 않는다 하지만 SPA(Single page application) 같은 것들이 생겨나면서 자바스크립트를 이용해 DOM을 변경하려고 브라우저에 요청을 할 경우 다음과 같은 문제가 발생한다. 예를 들어 트위터나 페이스북에서는 스크롤을 내리면 많은 데이터가 로딩이 되고 이는 쉽게 말해 div가 많아진다는 의미인데 이때 javascript를 이용하여 DOM을 조작하면 성능에 이슈가 생긴다. 왜냐하면 위 그림과 같은 workflow가 다시 이루어지기 때문이다. 이때 만약 100번을 요청했다면 100번을 다시 painting 하는데 이러한 이슈가 발생한다.
ex) <ul> 내부에 li를 추가할때 개수가 매우 많아지면 브라우저 속도가 느려지는 이슈 발생
3. Virtual DOM 이란?
DOM의 이슈를 Virtual DOM으로 해결할 수 있다. 100번의 DOM 조작 요청이 오면, 가상 돔은 브라우저 대신 변경 내용을 가상 돔에 반영한다.(이때 화면에 그리지 않음) 변화가 반영되었다면 내용을 브라우저에게 전달하여 그리게 한다.(100번 그리던 것을 1번만 그린다) 따라서 다음과 같은 이슈를 Virtual DOM을 통해 개선할 수 있다.
처음에는 for문을 이용해서 횟수만큼 가장 0번째값과 가장 큰 값을 교환, 이후 1번째 값과 가장 큰 값을 교환 .... 하는 방식으로 해결하려 했으나 배열의 수보다 회전의 수가 많아지거나 같은 자리가 교환 되어버리는 문제가 생겼다 따라서 dfs를 사용하여 모든 경우의 수를 비교하는 방법으로 해결하였다.
2. 코드
#include<stdio.h>#include<iostream>#include<string.h>#include<string>#include<algorithm>usingnamespace std;
int total;
int num = 0;
string tmp;
int result;
voiddfs(int x, int dept){
if (dept == num) {
if (result < stoi(tmp)) {
result = stoi(tmp);
}
return;
}
else {
for (int i = x; i < tmp.size(); i++) {
for (int j = i; j < tmp.size(); j++) {
if (i == j) continue;
if (tmp[i] <= tmp[j]) {
swap(tmp[i], tmp[j]);
dfs(i, dept + 1);
swap(tmp[i], tmp[j]);
}
}
}
}
}
intmain(){
cin >> total;
for (int i = 0; i < total; i++) {
result = 0;
cin>> tmp;
scanf("%d", &num);
result = stoi(tmp);
dfs(0, 0);
printf("#%d %d\n", i + 1, result);
}
}
3. 주의사항
같은 자리가 서로 바뀌는 것을 방지하기 위해 if (i == j) continue; 부분이 꼭 필요하다.
JAVASCRIPT를 브라우저가 아닌 다양한 용도로 사용하기 위해 만들어졌다고 한다. 파일 시스템, 서버 등 사용이 가능하며 내 개인적으로는 서버사이드 언어로 생각해도 무방할 것 같다.
2. Node.JS의 특징
1) V8엔진을 기반으로 한다
2) 비동기 프로그래밍 방식
Node.JS는 비동기 방식으로 Single-Thread기반으로 동작하기 때문에 생기는 문제들이 있다 (callback 지옥) 또한 처리 작업이 오래 걸리면 전체 서버에 영향을 줄 수 있다는 단점이 있다 또한 이후 async를 사용해 동기식으로 해결하는 방법도 공부해볼 예정이다.
모든 지점을 상 하 좌 우로 들리면서 7번째로 도착하면 set에 저장하면 자동으로 중복을 제거해 줄 수 있을 거라고 생각했다. 따라서 모든 지점을 상 하 좌 우로 들리는 방법을 코드로 구현하려 하였으나 결국 검색하여 찾아보니 dfs와 bfs방법을 사용한다고 한다. 이 문제의 해결방법으로는 dfs를 사용했고 dfs와 bfs는 따로 나중에 알고리즘에 추가하도록 할 예정이다.
2. 코드
#include<string>#include<math.h>#include<iostream>#include<set>usingnamespace std;
int num = 0;
int arr[4][4];
set<int> setary;
voiddfs(int x, int y, int val, int dept){
int nx[4] = { 0, 0, -1, 1 };
int ny[4] = { -1, 1, 0, 0 };
for (int i = 0; i < 4; i++) {
if (dept == 7) {
setary.insert(val);
return;
}
int dx = x + nx[i];
int dy = y + ny[i];
if (dx < 0 || dx >= 4 || dy < 0 || dy >= 4) continue;
else {
dfs(dx, dy, val * 10 + arr[dy][dx], dept + 1);
}
}
}
intmain(){
cin >> num;
for (int i = 1; i <= num; i++) {
setary.clear();
for (int j = 0; j < 4; j++) {
for (int k = 0; k < 4; k++) {
cin >> arr[j][k];
}
}
for (int j = 0; j < 4; j++) {
for (int k = 0; k < 4; k++) {
dfs(j, k ,arr[j][k], 1);
}
}
cout << "#"<< i << " " << setary.size() << endl;
}
}
main함수에서 dfs(j, k, arr[j][k], 1)이 부분을 처음에 0, 0 arr[j][k], 1로 하였다 이때 값이 항상 같은 오류가 생겼고 이를 j k로 수정하며 해결하였다.
