devlog

Spring, Node.js 비교

bellaah — Wed, 6 May 2020 00:03:07 +0900

그동안 인턴과 취업 준비를 하며 바빴다. 블로그를 보니 3달동안이나 포스팅을 안했다..
사실 bear로 혼자 정리한 글은 몇 백개인데 ㅠㅠ 그래서 오늘은 오랜만에 포스팅을 해본다.

1. Spring와 Node.js

Spring은 Java를 이용하는 프레임워크이고, Node.js는 Javascript 런타임이다. 둘 다 서버 개발을 할 수 있기때문에 차이점을 정리해보았다.

2. 차이점

2-1. Spring

장점

크기와 부하의 측면에서 경량이다.
Spring이 안정적이라는 말을 많이 한다. 그 이유는 레퍼런스가 많아 이슈를 쉽게 해결할 수 있고, 자유성이 낮다는 점에서 안정적이라고 생각한다.
스프링은 2002년 로드 존슨이 최초로 개발하였기에 Spring을 다루는 개발자가 많아 인력 문제도 없다.
많은 개발자들이 오랫동안 사용하고 유지해왔기 때문에 알려진 버그와 보안 문제는 많이 잡혀있어서 안정성이 우수하다.
정형화된 패턴이 있다.
IOC/ DI로 느슨한 결합도를 유지한다.
자유도는 낮지만 안정적이다.

단점

설정이 복잡한 편이다.

2-2. node.js

장점

V8 엔진을 기반으로 한 성능이 뛰어나다.
싱글스레드, 비동기 IO 처리에 기반한 빠른 속도를 가진다.
파일 I/O나 네트워크 처리를 이벤트 드리븐 방식으로 처리하기 때문에 빠른 처리가 가능하다.
CPU의 대기시간을 최소화 할 수 있다.
CPU 부하가 적고, 많은 커넥션을 동시에 처리해야 하는 구조에 적합하다.
자바스크립트를 이용해서 개발할 수 있기 때문에 프론트엔드 개발자의 진입장벽이 낮다.
기존 Java 서버에 비해 생산성이 훨씬 높다.

단점

싱글스레드 모델이기 때문에 하나의 작업에 시간이 오래걸리면 시스템 전체의 성능이 급격하게 떨어진다.
에러가 발생할 경우 프로세스 자체가 죽어버리므로 주의해야한다.(watch dog 등으로 처리 가능)
멀티코어 활용을 위해서 cluster 모듈을 이용해야 하고, 세션을 공유할 경우 부가적인 작업이 필요하다.
비동기 제어가 까다롭다.

[Web] REST API

bellaah — Mon, 20 Jan 2020 15:01:54 +0900

1. REST API란?

API(Application Programming Interface)란?
데이터와 기능의 집합을 제공하여 컴퓨터 프로그램간 상호작용을 촉진하며, 서로 정보를 교환가능 하도록 하는 것이다.
REST API란?
REST기반으로 서비스 API를 구현한 것이다.

2. REST란?

"Representational State Transfer"의 약자이다.
자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다.
즉, 자원(resource)의 표현(representation)에 의한 상태 전달이다.
HTTP URI(Uniform Resource Identifier)를 통해 자원(Resource)을 명시하고, HTTP Method(POST, GET, PUT, DELETE)를 통해 해당 자원에 대한 CRUD Operation을 적용하는 것을 의미한다.
즉, REST는 자원 기반의 구조(ROA, Resource Oriented Architecture) 설계의 중심에 Resource가 있고 HTTP Method를 통해 Resource를 처리하도록 설계된 아키텍쳐를 의미한다.

3. REST의 구성요소

자원(Resource): URI
- 모든 자원에 고유한 ID가 존재하고, 이 자원은 Server에 존재한다.
- 자원을 구별하는 ID는 ‘/groups/:group_id’와 같은 HTTP URI 다.
- Client는 URI를 이용해서 자원을 지정하고 해당 자원의 상태(정보)에 대한 조작을 Server에 요청한다.
행위(Verb): HTTP Method
- HTTP 프로토콜의 Method인 GET, POST, PUT, DELETE를 사용한다.
표현(Representation of Resource)
- Client가 자원의 상태(정보)에 대한 조작을 요청하면 Server는 이에 적절한 응답(Representation)을 보낸다.
- REST에서 하나의 자원은 JSON, XML, TEXT, RSS 등 여러 형태의 Representation으로 나타내어 질 수 있다.

4. REST 특징

stateless(무상태)
- HTTP 프로토콜은 Stateless Protocol이므로 REST 역시 무상태성을 갖는다.
- Client의 context를 Server에 저장하지 않는다.
- Server는 각각의 요청을 완전히 별개의 것으로 인식하고 처리한다.
  - 각 API 서버는 Client의 요청만을 단순 처리한다.
  - 즉, 이전 요청이 다음 요청의 처리에 연관되어서는 안된다.
  - Server의 처리 방식에 일관성을 부여하고 부담이 줄어들며, 서비스의 자유도가 높아진다.
Uniform (유니폼 인터페이스)
- Uniform Interface는 URI로 지정한 리소스에 대한 조작을 통일되고 한정적인 인터페이스로 수행하는 아키텍처 스타일을 말한다.
Cacheable (캐시 가능)
- REST의 가장 큰 특징 중 하나는 HTTP라는 기존 웹표준을 그대로 사용하기 때문에, 웹에서 사용하는 기존 인프라를 그대로 활용이 가능하다.
- 따라서 HTTP가 가진 캐싱 기능이 적용 가능하다.
Self-descriptiveness (자체 표현 구조)
- REST의 또 다른 큰 특징 중 하나는 REST API 메시지만 보고도 이를 쉽게 이해 할 수 있는 자체 표현 구조로 되어 있다는 것이다.
Client-Server 구조
- REST 서버는 API 제공, 클라이언트는 사용자 인증이나 컨텍스트(세션, 로그인 정보)등을 직접 관리하는 구조로 각각의 역할이 확실히 구분되기 때문에 클라이언트와 서버에서 개발해야 할 내용이 명확해지고 서로간 의존성이 줄어들게 된다.
계층형 구조
- REST 서버는 다중 계층으로 구성될 수 있으며 보안, 로드 밸런싱, 암호화 계층을 추가해 구조상의 유연성을 둘 수 있고 PROXY, 게이트웨이 같은 네트워크 기반의 중간매체를 사용할 수 있게 한다.

[Programmers] 프로그래머스 타겟넘버 - java

bellaah — Sat, 11 Jan 2020 14:55:26 +0900

문제 설명

n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다.

사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘버를 만드는 방법의 수를 return 하도록 solution 함수를 작성해주세요.

제한사항

주어지는 숫자의 개수는 2개 이상 20개 이하입니다.
각 숫자는 1 이상 50 이하인 자연수입니다.
타겟 넘버는 1 이상 1000 이하인 자연수입니다.

입출력 예

문제:https://programmers.co.kr/learn/courses/30/lessons/43165

코딩테스트 연습 - 타겟 넘버 | 프로그래머스

n개의 음이 아닌 정수가 있습니다. 이 수를 적절히 더하거나 빼서 타겟 넘버를 만들려고 합니다. 예를 들어 [1, 1, 1, 1, 1]로 숫자 3을 만들려면 다음 다섯 방법을 쓸 수 있습니다. -1+1+1+1+1 = 3 +1-1+1+1+1 = 3 +1+1-1+1+1 = 3 +1+1+1-1+1 = 3 +1+1+1+1-1 = 3 사용할 수 있는 숫자가 담긴 배열 numbers, 타겟 넘버 target이 매개변수로 주어질 때 숫자를 적절히 더하고 빼서 타겟 넘

programmers.co.kr

풀이

타겟 넘버를 만들기 위해서는 주어진 숫자의 부호를 +나 -로 정해서 모든 경우의 수를 다 해봐야 답을 알 수 있다. 그 모든 경우를 구하는 것을 나는 조합으로 생각했다. [1,2,3,4,5] 라고 입력이 주어진다면 이 중 하나 선택하는 경우 [1],[2],[3],... 일 경우 선택된 숫자들의 부호만 -를 붙여준다. 이런 식으로 0개를 고르는 경우부터 5개를 고르는 경우 모두 다 한다면 그 안에서 타겟 넘버가 만들어지는 경우를 count할 수 있다.

그래서 조합을 구현하였는데, 조합은 하나의 수를 두고 선택하는 경우, 그리고 선택하지 않는 경우 모두 재귀 호출을 한다. 하지만 선택했는지 안했는지는 알려야하기에 파라미터로 그 여부를 받는다. 그렇게 모두 선택했으면 계산하여 타겟 넘버가 되는지 확인하고 된다면 전역변수인 count의 값을 증가시켜서 답을 구할 수 있다.

[BOJ] 백준 2616 소형기관차-java

bellaah — Sun, 1 Dec 2019 13:21:14 +0900

문제

기차는 맨 앞에 있는 기관차 1대가 손님이 탄 객차 여러 칸을 끌고 간다. 기관차가 고장나면 기차를 운행할 수 없게 되므로 최근 철도청은 기관차 고장에 대비하여 몇몇 역에 소형 기관차 3대를 배치하기로 결정하였다. 소형 기관차는 평소에 이용하는 기관차보다 훨씬 적은 수의 객차만을 끌 수 있다.

기관차가 고장났을 때 끌고 가던 객차 모두를 소형 기관차 3대가 나누어 끌 수 없기 때문에, 소형 기관차들이 어떤 객차들을 끌고 가는 것이 좋을까하는 문제를 고민하다가 다음과 같이 하기로 결장하였다.

소형 기관차가 최대로 끌 수 있는 객차의 수를 미리 정해 놓고, 그보다 많은 수의 객차를 절대로 끌게 하지 않는다. 3대의 소형 기관차가 최대로 끌 수 있는 객차의 수는 서로 같다.
소형 기관차 3대를 이용하여 최대한 많은 손님을 목적지까지 운송하도록 한다. 각 객차 마다 타고 있는 손님의 수는 미리 알고 있고, 다른 객차로 손님들이 이동하는 것은 허용하지 않는다.
각 소형 기관차는 번호가 연속적으로 이어진 객차를 끌게 한다. 객차는 기관차 바로 뒤에 있는 객차부터 시작하여 1번 부터 차례로 번호가 붙어있다.

예를 들어 기관차가 끌고 가던 객차가 7칸이고, 소형 기관차 1대가 최대로 끌 수 있는 객차 수는 2칸이라고 하자. 그리고 1번 부터 7번까지 각 객차에 타고 있는 손님의 수가 아래 표와 같다고 하자. 괄호속에 있는 숫자는 객차 번호를 나타낸다.

소형 기관차 3대는 각각 1-2번, 3-4번, 그리고 6-7번 객차를 끌고 가면 손님 240명을 운송할 수 있고, 이보다 많은 수의 손님을 운송할 수 없다.

기관차가 끌고 가던 객차의 수와 각 객차에 타고 있던 손님의 수, 그리고 소형 기관차가 최대로 끌수 있는 객차의 수가 주어질 때, 소형 기관차 3대를 이용하여 최대로 운송할 수 있는 손님 수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 기관차가 끌고 가던 객차의 수가 입력된다. 그 수는 50,000 이하이다. 둘째 줄에는 기관차가 끌고 가던 객차에 타고 있는 손님의 수가 1번 객차부터 차례로 입력된다. 한 객차에 타고 있는 손님의 수는 100명 이하이고, 입력되는 숫자들 사이에 빈칸이 하나씩 있다. 셋째 줄에는 소형 기관차가 최대로 끌 수 있는 객차의 수가 입력된다. 그 수는 기관차가 끌고 가던 객차 수의 1/3보다 적다.

출력

한 줄에 소형 기관차 3대를 이용하여 최대로 운송할 수 있는 손님 수를 출력한다.

문제: https://www.acmicpc.net/problem/2616

2616번: 소형기관차

www.acmicpc.net

풀이

이번 문제는 DP(Dynamic Programming)을 이용해서 풀어야한다. 이번주는 스터디에서 DP문제를 풀어보자하고 고른 문제라서 이미 DP문제라는 건 알고 있었다. 하지만 DP.. 너무 어려운 분류이다.^-^ 오랜만에 풀어서 더 어려웠지만 그래도 풀었기에 풀이를 남겨보려고 한다.

일단 이 문제에서 객차는 항상 3개라고 주어져있다. 그리고 변하는건 객차의 수와 소형 기관차가 최대로 끌 수 있는 객차의 수이다. 그래서 처음에는 점화식을 세우기전에 고민했다. DP문제니까 이건 한번 돌면서 최대로 가져갈 수 있는 양을 배열에 저장하고 마지막 배열의 값에 답이 저장되어 있어야 한다고 생각하는데 소형 기관차는 3개이다. 어떻게 한번에 3개의 기관차가 가져가는 최대의 값을 저장할까하다가 생각한게 이차원 배열이다.

차근차근 접근해보자. 일단 소형기관차 1개가 가져갈 수 있는 최대의 객차 갯수가 있을 것이다. 그 객차안에 있는 손님의 수가 최대가 되어야한다. 일단 DP[1]에는 소형기관차 1개가 운송할 수 있는 최대의 손님 수를 저장하자. 일단 max가 한 소형기관차가 운송할 수 있는 최대의 객차 수라고 하자. DP[i][j]의 j는 i*max부터 시작해야한다. 그래야 max가 2일 때 2부터 시작하여 train[1]+train[2]를 저장할 수 있다. DP 배열에는 현재까지 오면서 가장 큰 값을 저장해야 하기 때문에 DP[1][2] = train[1]+train[2]을 저장한다. 그 후 DP[1][3]부터는 DP[i][j-1]과 DP[i - 1][j - max] + (sum[j] - sum[j - max])를 비교하여 더 큰 값을 넣으면 된다.

DP[i - 1][j - max] + (sum[j] - sum[j - max])의 의미를 말해보자. 현재 i가 2, j가 4라고 해보면 DP[i-1] == DP[1]이다. DP[1]은 하나의 소형기관차가 운송할 수 있는 최대 손님수가 저장되어 있을 것이다. 그러면 j-max의 의미는 현재 j가 4라고 하면 하나의 객차가 운송할 수 있는 만큼 전의 값 + 그 이후부터 현재 j까지의 객차 손님수의 합이다. 이러면 현재 j index를 포함한 값이 큰지 아니면 바로 전 값이 큰지 비교하여 결국 소형 기관차 2대가 운송할 수 있는 최대의 손님 수를 알 수 있다. DP[3]도 이것과 마찬가지로 작업을하고 결국 DP배열의 가장 끝방에 있는 값이 답이된다.

[Jest] Javascript Test 코드 작성하기

bellaah — Fri, 29 Nov 2019 12:04:39 +0900

1. jest란?

All-in-one 테스팅 라이브러리이다. Jest 이전에는 자바스크립트 코드를 테스트하라면 여러가지 테스팅 라이브러리를 조합해서 사용하곤 했었다. 하지만 Jest는 라이브러리 하나만 설치하면, Test Runner와 Test Mathcher 그리고 Test Mock 프레임워크까지 제공해주기 때문에 상당히 편리한 것 같다.

2. jest 사용하기

jest 라이브러리 설치하기
test script 수정하기: package.json의 test 부분을 아래와 같이 변경한다. test 뒤에 주고 싶은 option을 추가할 수 있다.
```
npm i -D jest
```
filename.test.js와 같은 이름의 file을 생성하고 test코드를 작성한다.
그 후 npm test를 하면 test가 실행된다.

3. test 작성하기

test / it: 테스트 하나를 작성할 때 사용하는 키워드이다.(하나의 테스트 단위) 아래는 예시이다.
```
  test('socket connect test', (done) => {
      socket.on('connect', () => {
        done();
      });
  });
```

describe: describe 라는 키워드를 사용하여 여러 테스트 케이스를 묶을 수 있다.

  describe('socket.io test', () => {
    beforeAll(() => {
      ...
    });

    afterAll(() => {
     ...
    });

    test('socket connect test', (done) => {
      ...
    });

    test('[EMIT] \'enter_room\' event test', (done) => {
      ...
    });
  });

4. jest 더 알아보기

아래의 Methods들은 모두 scope가 있다. 전역에 쓰면 모든 테스트에 적용되고 하나의 describe안에 넣으면 그 describe안에 있는 test에만 적용된다. 예시는 위의 코드와 같다.
afterAll(fn, timeout): 모든 테스트가 끝나고 한번 실행된다.
afterEach(fn, timeout): 하나의 테스트가 끝날 때 마다 매번 실행된다.
beforeAll(fn, timeout): 모든 테스트가 시작하기 전에 한번 실행된다.
beforeEach(fn, timeout): 하나의 테스트가 시작하기 전에 매번 실행된다.

5. 자주 사용되는 Matcher

toEqual(): 두 값이 같은지 비교하는 Matcher이다. object가 정확히 같은지 판단할 수 있다. javascript에서 object.is 와 같다.
```
  expect(response).toEqual(value);
```
toBeTruthy(), toBeFalsy(): 값이 false인지 true인지 확인하는 Matcher이다.
```
  expect(response).toBeTruthy(); // response가 true인지 확인
```
toHaveLength(): object의 길이를 확인하는 Matcher이다.
```
  expect(response).toHaveLength(3);
```
toContain(): array에 포함하는지 확인하는 Matcher이다.
```
  expect(response).toContain('hello');
```
toThrow(): 에러를 throw()하는지 확인하는 Matcher이다.
```
  expect(() => {
      drinkFlavor('octopus');
  }).toThrow();
```

[BOJ] 백준 17822 원판돌리기-java

bellaah — Sat, 23 Nov 2019 21:45:54 +0900

문제

반지름이 1, 2, ..., N인 원판이 크기가 작아지는 순으로 바닥에 놓여있고, 원판의 중심은 모두 같다. 각각의 원판에는 M개의 정수가 적혀있고, i번째 원판에 적힌 j번째 수의 위치는 (i, j)로 표현한다. 수의 위치는 다음을 만족한다.

(i, 1)은 (i, 2), (i, M)과 인접하다.
(i, M)은 (i, M-1), (i, 1)과 인접하다.
(i, j)는 (i, j-1), (i, j+1)과 인접하다. (2 ≤ j ≤ M-1)
(1, j)는 (2, j)와 인접하다.
(N, j)는 (N-1, j)와 인접하다.
(i, j)는 (i-1, j), (i+1, j)와 인접하다. (2 ≤ i ≤ N-1)

아래 그림은 N = 3, M = 4인 경우이다.

원판의 회전은 독립적으로 이루어진다. 2번 원판을 회전했을 때, 나머지 원판은 회전하지 않는다. 원판을 회전시킬 때는 수의 위치를 기준으로 하며, 회전시킨 후의 수의 위치는 회전시키지 전과 일치해야 한다.

원판을 아래와 같은 방법으로 총 T번 회전시키려고 한다. 원판의 회전 방법은 미리 정해져 있고, i번째 회전할때 사용하는 변수는 xi, di, ki이다.

번호가 xi의 배수인 원판을 di방향으로 ki칸 회전시킨다. di가 0인 경우는 시계 방향, 1인 경우는 반시계 방향이다.
인접하면서 수가 같은 것을 모두 찾는다.
1. 그러한 수가 있는 경우에는 원판에서 인접하면서 같은 수를 모두 지운다.
2. 없는 경우에는 원판에 적힌 수의 평균을 구하고, 평균보다 큰 수에서 1을 빼고, 작은 수에는 1을 더한다.

원판을 T번 회전시킨 후 원판에 적힌 수의 합을 구해보자.

입력

첫째 줄에 N, M, T이 주어진다.

둘째 줄부터 N개의 줄에 원판에 적힌 수가 주어진다. i번째 줄의 j번째 수는 (i, j)에 적힌 수를 의미한다.

다음 T개의 줄에 xi, di, ki가 주어진다.

출력

원판을 T번 회전시킨 후 원판에 적힌 수의 합을 출력한다.

문제:https://www.acmicpc.net/problem/17822

17822번: 원판 돌리기

반지름이 1, 2, ..., N인 원판이 크기가 작아지는 순으로 바닥에 놓여있고, 원판의 중심은 모두 같다. 각각의 원판에는 M개의 정수가 적혀있고, i번째 원판에 적힌 j번째 수의 위치는 (i, j)로 표현한다. 수의 위치는 다음을 만족한다. (i, 1)은 (i, 2), (i, M)과 인접하다. (i, M)은 (i, M-1), (i, 1)과 인접하다. (i, j)는 (i, j-1), (i, j+1)과 인접하다. (2 ≤ j ≤ M-1) (1, j)는 (

www.acmicpc.net

풀이

오랜만에 시뮬레이션 문제를 풀었다.

풀게 된 이유 = 시뮬레이션 문제는 그냥 풀면된다고 생각하고 안풀었다. 그러던 어느날 .. 코딩테스트에서 어려운 시뮬레이션 문제나와서 못풀고 멘붕왔기때문!

이번 문제는 처음보고 쉬워보였다. 그냥 나온대로 하면되는거라고 생각했다. 하지만 생각외로 처리해줘야할 부분이 있었다.

첫번째, i의 배수 원판을 모두 돌리는 것이다. 나는 i번째 원판만 돌리고 두번이나 제출해서 계속 틀렸다.. 문제 꼼꼼히 읽기..!

두번째, 원판이 여러개라고 가정라고 이차원배열로 풀었는데 문제는 1차원 배열(한 원판)안에서는 0번째와 M-1번째가 이웃한다고 가정하고 범위를 넘어섰을 때 %연산자를 써서 같은 수인지 확인해줘야한다.

세번째, 단순히 나의 위,아래,오른쪽,왼쪽에 같은 수가 있는지만 확인하는 것이 아니다. 원판을 회전시켜놓고 dfs혹은 bfs같은 탐색 법을 통하여 같은 숫자가 모여있으면 전부를 지워야한다.

이 부분들만 처리를 한다면 나머지는 문제에 나와있는대로 풀면된다.

일단 나는 2차원배열에 원판 숫자를 입력받고 회전을 시켰다. rotate 라는 함수가 회전을 시키는데 회전시킬 때는 배열안의 값을 뒤로 밀거나 앞으로 밀면되기때문에 %연산자를 써서 index를 계산한 뒤 새배열을 다시 2차원 배열이 참조하게 했다.

한 턴에서 회전이 끝나면checkPlate 라는 메서드를 호출한다. 이 메서드는 같은 숫자들이 모여있으면 지우고 지울 수 있는 숫자가 하나도 없다면 문제에 나온대로 평균값을 구하여 계산한다.

그 외에 위에서 말한 것처럼 같은 숫자들이 모여있는 건 dfs 로 검사하였다. 처리해야할 부분만 위처럼 잘 처리한다면 금방 풀 수 있는 문제라고 생각한다.

[BOJ] 백준 2869 달팽이는 올라가고 싶다-java

bellaah — Sun, 17 Nov 2019 00:51:15 +0900

문제

땅 위에 달팽이가 있다. 이 달팽이는 높이가 V미터인 나무 막대를 올라갈 것이다.

달팽이는 낮에 A미터 올라갈 수 있다. 하지만, 밤에 잠을 자는 동안 B미터 미끄러진다. 또, 정상에 올라간 후에는 미끄러지지 않는다.

달팽이가 나무 막대를 모두 올라가려면, 며칠이 걸리는지 구하는 프로그램을 작성하시오.

입력

첫째 줄에 세 정수 A, B, V가 공백으로 구분되어서 주어진다. (1 ≤ B < A ≤ V ≤ 1,000,000,000)

출력

첫째 줄에 달팽이가 나무 막대를 모두 올라가는데 며칠이 걸리는지 출력한다.

문제:https://www.acmicpc.net/problem/2869

2869번: 달팽이는 올라가고 싶다

문제 땅 위에 달팽이가 있다. 이 달팽이는 높이가 V미터인 나무 막대를 올라갈 것이다. 달팽이는 낮에 A미터 올라갈 수 있다. 하지만, 밤에 잠을 자는 동안 B미터 미끄러진다. 또, 정상에 올라간 후에는 미끄러지지 않는다. 달팽이가 나무 막대를 모두 올라가려면, 며칠이 걸리는지 구하는 프로그램을 작성하시오. 입력 첫째 줄에 세 정수 A, B, V가 공백으로 구분되어서 주어진다. (1 ≤ B < A ≤ V ≤ 1,000,000,000) 출력 첫째 줄에 달팽

www.acmicpc.net

<수학> 버전

<이분탐색> 버전

풀이

이번 문제는 사실 문제 설명이 3줄이라 쉬울 것이라고 생각했다. 하지만.. 정답률 28% ^^! 시간 제한이 0.15이다. 하지만 이분탐색 문제를 풀어보고싶어서 골랐다.

이분탐색으로 접근하려 했지만 .. 보자마자 <수학>버전으로 접근해버렸다. 수학으로 풀면 너무 쉬운데 도대체 어느 부분을 이분탐색으로 접근해야 한다는거죠? 이미 통과해버렸는데 ,,,

그렇지만 이분탐색으로 푸는 것이 목적이였기에 이분탐색으로 접근해보았다.

<수학> 버전

수학 버전은 아주 간단하다. 마지막만 미끄러지지않기 때문에 하루에 가는 양은 (아침에 올라가는 A) - (밤에 미끄러지는 B) 이다. 그런데 마지막에는 A만 더해야 하므로 마지막 A를 전체 V에서 뺀다. 그럼 V-A가 된다. 여기서 A-B로 나누면 결국 마지막 날을 제외한 날들이 며칠 반복되어야 하는지 알 수 있다. 그치만 int형은 소수점을 버리기 때문에 A+(A-B)*n이 V를 넘는지 확인하고 넘으면 바로 answer출력, 넘지않으면 1을 더한다.

<이분탐색> 버전

이분탐색으로 어떻게 접근해야할지 많이 고민해봤다. 굳이 이분탐색으로 접근해야 한다면 이렇게 해보자.. 일단 며칠동안 올라오고 미끄러지고 그렇게 반복하다 마지막 날에 A만큼 올라갔을 때 V에 도달하는 순간을 알아내야 한다. 그러기위해서 나는 high = V로 두어서 이분탐색을 시도했다.

방법은 이렇다. high와 low의 중간 값인 mid가 있다. 이 mid를 A-B로 나눈다. 그럼 n이 나오고 그 값을 일단 answer에 저장한다. 그 후 mid까지 왔다고 생각하고 V-mid를 A가 한번에 갈 수 있는지 확인한다. A만큼 갔을 때 V에 도달한다면 두 가지의 경우로 나뉜다.

A만큼 갔는데 V-A의 값이 A-B보다 작다면 정답이다.
A만큼 갔는데 V-A의 값이 A-B와 같거나 크다면 answer는 더 작아질 수 있기에 정답이 아니고 다시 이분탐색을 한다.

위와 같이 나뉘는 이유는 A = 6000, B = 5000, V= 10000이라고 해보자. 이 경우 이분탐색을 처음 시도할 때, mid = 5000이다. 그럼 5000/(6000-5000) = 5이다. 그리고 V-mid = 5000이다. 이 상황에서 A만큼 가보자. 그럼 11000이 되는데 이때 사실 4일이 지나고 5일째 날에 5000을 갔으면 딱 10000이 되었을 것이다. 그 이유는 5000/(6000-5000) + 6000 >= A-B 이기 때문이다. 이렇다면 적어도 하루이상은 더 전에 도달했을 것이라는 뜻이다. 그렇기 때문에 이분탐색을 아래부분으로 다시한다.

이어서 얘기해보자면 V-mid를 A가 한번에 갈 수 있는지 확인했을 때, V에 도달하지 못한다면 며칠을 더 올라와야 마지막 날에 A만큼 올라갔을 때 도달할 수 있다. 그러므로 이분탐색을 윗부분으로 다시한다.

[React] React에서 socket.io 연결하기

bellaah — Fri, 15 Nov 2019 00:01:34 +0900

1. socket.io란?

- socket.io란 실시간으로 상호작용하는 웹 서비스를 만드는 기술인 웹소켓을 쉽게 사용할 수 있게 해주는 모듈이다.

* 참고: http와 socket 차이

2. react에서 socket.io 사용하기

글쓴이는 간단하게 index.js 파일에서 socket 연결을 하도록 해봤다. (create-react-app으로 간단히 생성)

[client/index.js]

import socketio from 'socket.io-client';

const socket = socketio.connect('http://localhost:4000');

(() => {
    socket.emit('init', { name: 'bella' });
  
    socket.on('welcome', (msg) => {
      console.log(msg);
    });
    
})();

일단 socket.io-client 모듈을 설치한다 .(npm install socket.io-client)

그 후 위와 같이 'localhost/4000'으로 connect를 요청한다. 'localhost:4000'으로 연결을 요청했기때문에 local 환경에서 4000번 포트로 서버를 열어줘야한다. 아래는 서버의 코드를 살펴보자.

3. express에서 socket.io 사용하기

server는 express-generator를 사용하여 빠르게 구성하였다. app.js에서 io를 선언하고 connect 되었을 때 사용할 callback함수를 정의한다.

// app.js

// var app = express(); 아래 추가
app.io = require('socket.io')();

// module.exports = app; 위에 추가
app.io.on('connection', function(socket) {
	console.log('a user connected');
    
	socket.on('init', function(data) {
		console.log(data.name);
		socket.emit('welcome', `hello! ${data.name}`);
	});
    
});

그리고 bin/www에서는 아래와 같은 코드를 추가하자.

// bin/www

// var server = http.createServer(app); 아래 추가
app.io.attach(server);

참고로 express server port는 4000으로 설정했다.

[bin/www]

이렇게 설정이 끝났으면 통신이 이루어졌는지 console을 확인해본다.

[Web] Http 통신과 Socket 통신

bellaah — Thu, 14 Nov 2019 16:01:18 +0900

1. WebSocket이란?

- WebSocket은 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성하는 HTML5 프로토콜이다.

2. Http통신과 Socket통신의 차이

Http 통신
- Client의 요청(Request)이 있을 때만 서버가 응답(Response)하여 해당 정보를 전송하고 곧바로 연결을 종료하는 방식이다.
- Client가 요청을 보내는 경우에만 Server가 응답한다.
- Server로부터 응답을 받은 후에는 연결이 바로 종료된다.실시간 연결이 아니고, 필요한 경우에만 Server로 요청을 보내는 상황에 유용하다.
- 요청을 보내 Server의 응답을 기다리는 어플리케이션(Android or Ios)의 개발에 주로 사용된다.

Socket 통신
- Server와 Clinet가 특정 port를 통해 실시간으로 양방향 통신을 하는 방식이다.
- Server와 Client가 계속 연결을 유지한다.
- Server와 Client가 실시간으로 데이터를 주고받는 상황이 필요한 경우에 사용된다.
- 실시간 동영상 Streaming이나 온라인 게임 등과 같은 경우에 자주 사용된다.

[SWEA] 2806 N-Queen-java

bellaah — Sun, 3 Nov 2019 00:00:18 +0900

문제

8*8 체스보드에 8개의 퀸을 서로 공격하지 못하게 놓는 문제는 잘 알려져 있는 문제이다.
퀸은 같은 행, 열, 또는 대각선 위에 있는 말을 공격할 수 있다. 이 문제의 한가지 정답은 아래 그림과 같다.

이 문제의 조금 더 일반화된 문제는 Franz Nauck이 1850년에 제기했다.
N*N 보드에 N개의 퀸을 서로 다른 두 퀸이 공격하지 못하게 놓는 경우의 수는 몇가지가 있을까?
N이 주어졌을 때, 퀸을 놓는 방법의 수를 구하는 프로그램을 작성하시오.

입력

첫 번째 줄에 테스트 케이스의 수 T가 주어진다.
각 테스트 케이스의 첫 번째 줄에는 하나의 자연수 N(1 ≤ N ≤ 10)이 주어진다.

출력

각 테스트 케이스마다 ‘#x ’(x는 테스트케이스 번호를 의미하며 1부터 시작한다)를 출력하고, 퀸 N개를 서로 공격할 수 없게 놓는 경우의 수를 출력한다.

문제: https://swexpertacademy.com/main/code/problem/problemDetail.do?contestProbId=AV7GKs06AU0DFAXB

SW Expert Academy

SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요!

swexpertacademy.com

풀이

N-Queen은 굉장히 유명한 알고리즘 문제이다. 나 또한 3년 전쯤 풀려고 시도는 했었다... (대학생 2학년 때 ㅎ-ㅎ)

재귀를 잘 모를때라 결국 못풀었던 것 같다. 이 문제도 사실 이번에 다시 보고 문제 이해를 하는데 시간이 좀 걸렸다. 체알못.. (체스도 잘 모르는 나.. 지뢰찾기에 이어서..) 그래서 검색해봤더니 퀸은 직선, 대각선으로 끝까지 움직일 수 있다고 한다. 그래서 N-Queen에서 요구하는 것은 모든 퀸의 직선,대각선에는 다른 퀸이 놓여있지않게 두는 경우의 수를 찾는 것이였다. 아래의 그림과 같이.

그 경우의 수를 구하기 위해서.. dfs방식을 사용했다. 놓을 수 있는데까지 놓아보고 못놓을 때 그 전으로 돌아가서(백트래킹) 다른 곳에 퀸을 놓고.. 이런 방법!

사실 이 문제는 백트래킹 알고리즘을 사용하는 문제로 유명하다. dfs를 사용하며 퀸을 놓을 수 없을 때 이 전 혹은 그보다 더 전단계로 돌아가는 것이 백트래킹이 된다.

먼저, 나는 0번째 행부터 퀸을 놓으면서 내려오는 방식으로 구현하였다. 즉, 위의 그림처럼 n=8이라고하면 0번째 행에 퀸을 놓고 1번째 행에 퀸을 놓고 .... 7번째 행에 퀸을 놓는다.

위의 그림과 같이 놓을 때 (0,3)에 퀸 하나를 놓고 1번째 행으로 내려왔다고 해보자. 그럼 1번째 행에 놓을 수 있는자리는 0,1,5,6,7열이다. (1,0)에 놓고 재귀를 실행해 그 다음 행, 그 다다음 행 ... 이런식으로 놓아본다. 그래서 놓을 수 없는 상황이 오면 재귀가 끝나고 돌아온다. 그때 (1,1)에 놓아보고 재귀 실행 ... 그 다음 (1,5)에 놓고 재귀 실행... 이런 식으로 모든 경우를 다 해봤다.

if (board[j] == i || i == board[j]+(curr - j) || i == board[j]-(curr - j)) { 
	isPossible = false;
	break;
}

위의 코드는 isPossible이 false로 바뀌는 if문인데 이 조건은 아래와 같다.

board[j] == i : 위에서 놓은 퀸이 있는 직선이기에 이 열은 다른 퀸을 놓을 수 없다.
i == board[j]+(curr - j) : 위에서 놓은 퀸의 오른쪽 대각선이 현재 행의 i를 지나가기에 다른 퀸을 놓을 수 없다.
i == board[j]-(curr - j) : 위에서 놓은 퀸의 왼쪽 대각선이 현재 행의 i를 지나가기에 다른 퀸을 놓을 수 없다.

위의 그림에서 볼 땐 피해야할 직선이 8개이다. 하지만 퀸을 위에서부터 놓으며 내려올 경우, 퀸은 위쪽에만 놓여있으므로 아래로 뻗어오는 3개의 직선이 통과하는 자리만 피해서 퀸을 놓으면 되기때문에 간단해진다.

[SWEA] 1868 파핑파핑 지뢰찾기-java

bellaah — Sat, 2 Nov 2019 17:54:37 +0900

문제

‘파핑 파핑 지뢰 찾기’라는 유명한 게임이 있다. 이 게임은 RXC 크기의 표를 이용하는 게임인데, 표의 각 칸에는 지뢰가 있을 수도 있고 없을 수도 있다.
표의 각 칸을 클릭했을 때, 그 칸이 지뢰가 있는 칸이라면 ‘파핑 파핑!’이라는 소리와 함께 게임은 끝난다.
지뢰가 없는 칸이라면 변이 맞닿아 있거나 꼭지점이 맞닿아 있는 최대 8칸에 대해 몇 개의 지뢰가 있는지가 0에서 8사이의 숫자로 클릭한 칸에 표시된다.
만약 이 숫자가 0이라면 근처의 8방향에 지뢰가 없다는 것이 확정된 것이기 때문에 그 8방향의 칸도 자동으로 숫자를 표시해 준다.
실제 게임에서는 어떤 위치에 지뢰가 있는지 알 수 없지만, 이 문제에서는 특별히 알 수 있다고 하자.
지뢰를 ‘*’로, 지뢰가 없는 칸을 ‘.’로, 클릭한 지뢰가 없는 칸을 ‘c’로 나타냈을 때 표가 어떻게 변화되는지 나타낸다.

세 번째 예에서는 0으로 표시 될 칸들과 이와 인접한 칸들이 한 번의 클릭에 연쇄적으로 숫자가 표시된 것을 볼 수 있다.
파핑 파핑 지뢰 찾기를 할 때 표의 크기와 표가 주어질 때, 지뢰가 있는 칸을 제외한 다른 모든 칸의 숫자들이 표시되려면 최소 몇 번의 클릭을 해야 하는지 구하는 프로그램을 작성하라.

입력

첫 번째 줄에 테스트 케이스의 수 T가 주어진다.
각 테스트 케이스의 첫 번째 줄에 하나의 정수 N(1 ≤ N ≤ 300) 이 주어진다. 이는 지뢰 찾기를 하는 표의 크기가 N*N임을 나타낸다.
다음 N개의 줄의 i번째 줄에는 길이가 N인 문자열이 주어진다.
이 중 j번째 문자는 표에서 i번째 행 j번째 열에 있는 칸이 지뢰가 있는 칸인지 아닌지를 나타낸다.
‘*’이면 지뢰가 있다는 뜻이고, ‘.’이면 지뢰가 없다는 뜻이다. ‘*’와 ‘.’외의 다른 문자는 입력으로 주어지지 않는다.

출력

각 테스트 케이스마다 ‘#x’(x는 테스트케이스 번호를 의미하며 1부터 시작한다)를 출력하고,
최소 몇 번의 클릭을 해야 지뢰가 없는 모든 칸에 숫자가 표시될 것인지 출력한다.

문제: https://swexpertacademy.com/main/code/problem/problemDetail.do?contestProbId=AV5LwsHaD1MDFAXc&categoryId=AV5LwsHaD1MDFAXc&categoryType=CODE&&&

SW Expert Academy

SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요!

swexpertacademy.com

풀이

글쓴이는 처음에 지뢰찾기 규칙을 몰라서 알아보는데 좀 걸렸다... 왜 0이 연속적으로 공개되는지 몰랐다.

알아봤더니 0을 클릭하면 주변에 있는 8칸은 다 공개되는 것이었다. (게임 안 하는 거 티 내기)

그리고 그 옆이 0이면 그 0 또한 위와 같은 작업을 반복하기 때문에 재귀를 썼다.

그래서 최소한의 클릭으로 지뢰가 없는 칸을 모두 오픈하려면 0인 곳부터 클릭해서 오픈한다.(재귀적으로 주변 8칸 중 0이 있으면 그 주변도 오픈함) 0인 칸을 모두 오픈했으면 나머지 지뢰가 아니고 오픈하지 않은 칸은 클릭했을 때 해당 칸만 열리기 때문에 남은 칸(공개되지 않은 칸) 중 지뢰가 아닌 칸의 숫자를 더한 것이 최소한의 클릭이 된다.

[React] react-hooks/rules-of-hooks 과 관련한 error

bellaah — Tue, 22 Oct 2019 22:03:20 +0900

문제

component를 만들고 export시켜 app.js에서 사용하려 했다. but.. 문제가 생겼다. 아래와 같은 오류가 뜬다.

사실 나는 react를 처음 사용하면서 공식 문서를 읽지않고 사용해서 이런 문제를 만난 것 같다.
나는 지금 react hook을 사용하고 있고 hook을 사용할 때 rule이 있다. 지금 이 문제는 내가 아래와 같은 코드를 사용해서다.

import React from 'react';
import { useQuery } from '@apollo/react-hooks';


const roomList = () => {
    const { loading, error, data } = useQuery(GET_ALL_ROOMS);

    if (loading) return <p>Loading...</p>;
    if (error) return <p>Error!</p>;

    //생략
    return;
};

export default roomList;

해결

컴포넌트 roomList를 소문자로 시작했던 것이 문제였다. 해결법은 아주 간단하다. roomList -> RoomList로 바꿔주면된다.

소문자로 시작하게 되면 JSX에서 소문자 태그 이름은 HTML 요소로 간주하기 때문에 이런 현상이 일어났던 것이다. 그 부분에 대해서는 아래의 링크를 살펴보자.

참고

HTML 태그 vs React Components

[BOJ] 백준 17471 게리맨더링-java

bellaah — Sun, 20 Oct 2019 16:53:47 +0900

문제

백준시의 시장 최백준은 지난 몇 년간 게리맨더링을 통해서 자신의 당에게 유리하게 선거구를 획정했다. 견제할 권력이 없어진 최백준은 권력을 매우 부당하게 행사했고, 심지어는 시의 이름도 백준시로 변경했다. 이번 선거에서는 최대한 공평하게 선거구를 획정하려고 한다.

백준시는 N개의 구역으로 나누어져 있고, 구역은 1번부터 N번까지 번호가 매겨져 있다. 구역을 두 개의 선거구로 나눠야 하고, 각 구역은 두 선거구 중 하나에 포함되어야 한다. 선거구는 구역을 적어도 하나 포함해야 하고, 한 선거구에 포함되어 있는 구역은 모두 연결되어 있어야 한다. 구역 A에서 인접한 구역을 통해서 구역 B로 갈 수 있을 때, 두 구역은 연결되어 있다고 한다. 중간에 통하는 인접한 구역은 0개 이상이어야 하고, 모두 같은 선거구에 포함된 구역이어야 한다.

아래 그림은 6개의 구역이 있는 것이고, 인접한 구역은 선으로 연결되어 있다.

아래는 백준시를 두 선거구로 나눈 4가지 방법이며, 가능한 방법과 불가능한 방법에 대한 예시이다.

가능한 방법

[1, 3, 4]와 [2, 5, 6]으로 나누어져 있다.

가능한 방법

[1, 2, 3, 4, 6]과 [5]로 나누어져 있다.

불가능한 방법

[1, 2, 3, 4]와 [5, 6]으로 나누어져 있는데, 5와 6이 연결되어 있지 않다.

불가능한 방법

각 선거구는 적어도 하나의 구역을 포함해야 한다.

공평하게 선거구를 나누기 위해 두 선거구에 포함된 인구의 차이를 최소로 하려고 한다. 백준시의 정보가 주어졌을 때, 인구 차이의 최솟값을 구해보자.

입력

첫째 줄에 구역의 개수 N이 주어진다. 둘째 줄에 구역의 인구가 1번 구역부터 N번 구역까지 순서대로 주어진다. 인구는 공백으로 구분되어져 있다.

셋째 줄부터 N개의 줄에 각 구역과 인접한 구역의 정보가 주어진다. 각 정보의 첫 번째 정수는 그 구역과 인접한 구역의 수이고, 이후 인접한 구역의 번호가 주어진다. 모든 값은 정수로 구분되어져 있다.

구역 A가 구역 B와 인접하면 구역 B도 구역 A와 인접하다. 인접한 구역이 없을 수도 있다.

출력

첫째 줄에 백준시를 두 선거구로 나누었을 때, 두 선거구의 인구 차이의 최솟값을 출력한다. 두 선거구로 나눌 수 없는 경우에는 -1을 출력한다.

문제:https://www.acmicpc.net/problem/17471

17471번: 게리맨더링

선거구를 [1, 4], [2, 3, 5, 6]으로 나누면 각 선거구의 인구는 9, 8이 된다. 인구 차이는 1이고, 이 값보다 더 작은 값으로 선거구를 나눌 수는 없다.

www.acmicpc.net

풀이

이 문제를 보고 처음에는 두 선거구(그룹)의 차를 최소화시킬 수 있는 방법이 있다고 생각했다. 그래서 최소화시키도록 나눠놓고 풀려고 하니 풀리지않았다. 문제는 그래프로 서로 연결되어 있는지 연결되어 있지 않은지를 알아야하기때문에 두 선거구의 인원의 차가 최소가 되도록 마음대로 정할 수는 없었다. 그럴 수 없다고하면 모든 경우를 다 알아봐야 한다.

그래서 생각하게 된 건 "조합"이다. 두 선거구로 나누는 경우는 조합이다. 그래서 combination이라는 조합 메서드를 만들었다. 이 메서드는 전체 구역의 크기가 7이라면 3개까지 조합을 만든다. 7개 중 4개만 뽑아서 조합을 모두 만들어본다는 것이다. 이유는 간단하다. 조합을 구하면 뽑지 않은 구역들은 또 다른 그룹이 된다.

예를 들어 1~6까지 구역이 있을 때, [1,2]를 뽑았다면 안뽑힌 [3,4,5,6]이 한 그룹이 되어 선거구가 되는 것이기 때문에 3개까지만 뽑아보면 된다. 이렇게 두개의 선거구가 만들어졌으면 그 선거구 안에 있는 구역들이 서로 연결되어있는지 확인해야한다. 대부분의 경우 연결이 안되어 있을 것이다. bfs라는 메서드를 만들어서 현재 v와 같은 그룹에 있고 인접한 점들만 방문을 한다. 그렇게 bfs가 끝나면 그 그룹안에 있는 구역을 모두 방문했는지 확인한다. 모두 방문하였으면 그 선거구는 모두 연결된 것이고, 방문하지 못한 구역이 있다면 그 그룹은 모두 연결되어 있지않다는 의미이므로 그 조합으로 나눌 수 없다.

또한 그룹을 나누기 전, 간단하게 입력받은 그래프가 이미 3개 이상으로 나누어져 있는 경우에는 바로 -1을 출력하게 하였고, 2개로 나누어져있는 경우 따로 나누지 않고 입력받은 그대로 두 선거구의 인구수의 합을 구하여 그 합을 빼면 바로 답이 나온다. 그래서 그 경우는 main에서 바로 처리하였다. 모든 구역이 하나로 연결되어 있을 경우만 위와 같은 과정을 통해 선거구를 나눈다.

[BOJ] 백준 2309 일곱 난쟁이-java

bellaah — Sat, 5 Oct 2019 16:11:32 +0900

문제

왕비를 피해 일곱 난쟁이들과 함께 평화롭게 생활하고 있던 백설공주에게 위기가 찾아왔다. 일과를 마치고 돌아온 난쟁이가 일곱 명이 아닌 아홉 명이었던 것이다.

아홉 명의 난쟁이는 모두 자신이 "백설 공주와 일곱 난쟁이"의 주인공이라고 주장했다. 뛰어난 수학적 직관력을 가지고 있던 백설공주는, 다행스럽게도 일곱 난쟁이의 키의 합이 100이 됨을 기억해 냈다.

아홉 난쟁이의 키가 주어졌을 때, 백설공주를 도와 일곱 난쟁이를 찾는 프로그램을 작성하시오.

입력

아홉 개의 줄에 걸쳐 난쟁이들의 키가 주어진다. 주어지는 키는 100을 넘지 않는 자연수이며, 아홉 난쟁이의 키는 모두 다르며, 가능한 정답이 여러 가지인 경우에는 아무거나 출력한다.

출력

일곱 난쟁이의 키를 오름차순으로 출력한다. 일곱 난쟁이를 찾을 수 없는 경우는 없다.

문제:https://www.acmicpc.net/problem/2309

2309번: 일곱 난쟁이

www.acmicpc.net

풀이

이 문제는 조합을 구하여 풀어야합니다. 조합을 구하는데 빠른 알고리즘은 딱히 없기에 모든 경우를 다 생각해봐야한다.

그렇게 모든 경우를 다 생각하여 맞는 답을 구하는 방식을 브루트 포스 방식이라고 한다. 브루트 포스란 문제를 해결하기 위해서,
가능한 모든 경우에 대해 모두 직접 해 보는 방법이다. 단순하지만 모든 경우를 다 해봐야 풀리는 문제도 있기에 한번 알아보는 것도 좋을 것이라고 생각한다.

우선 문제를 보자면 존재하는 난쟁이의 수는 총 9명, 백설공주와 함께 지냈던 난쟁이의 수는 7명이다. 그렇기에 9명 중 7명의 난쟁이를 골라야하는데 이렇게 9명 중 7명을 고를 때 나올 수 있는 경우를 조합이라고 한다.

일단 9명 중 7명을 조합하여 그들의 몸무게의 총 합이 100인지 알아봐야하기에 조합을 구해야 한다. 그러기 위해서 combination이라는 메서드를 만들었다. 코드의 아래쪽을 보면 combination을 두번 호출한다. 두번 호출하는 이유는 위의 경우는 현재의 인덱스에 해당하는 난쟁이를 조합에 넣는 경우이고 아래의 경우는 넣지 않는 경우이다.

또한 r이 0이라는 것은 7개를 다 뽑았다는 뜻으로 하나의 조합이 완료되었다는 것이다. 그러므로 뽑은 7명의 난쟁이의 몸무게의 합이 100인지 확인한다. 100이 되는 경우가 여러 번 있을 수도 있기때문에 isFirst라는 boolean 변수를 두고 이미 100인 경우가 나왔다면 return하도록 한다. 또한 7명의 난쟁이의 몸무게의 합이 100인 경우 Arrays.sort를 통해 정렬하여 출력하면 원하는 답이 나온다.

[BOJ] 백준 11724 연결 요소의 개수-java

bellaah — Sat, 28 Sep 2019 20:39:56 +0900

문제

방향 없는 그래프가 주어졌을 때, 연결 요소 (Connected Component)의 개수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 정점의 개수 N과 간선의 개수 M이 주어진다. (1 ≤ N ≤ 1,000, 0 ≤ M ≤ N×(N-1)/2) 둘째 줄부터 M개의 줄에 간선의 양 끝점 u와 v가 주어진다. (1 ≤ u, v ≤ N, u ≠ v) 같은 간선은 한 번만 주어진다.

출력

첫째 줄에 연결 요소의 개수를 출력한다.

문제: https://www.acmicpc.net/problem/11724

11724번: 연결 요소의 개수

www.acmicpc.net

풀이

기본적인 bfs 혹은 dfs문제이다. 이 문제를 풀기 위해 알아야 할 개념으로는 그래프, 인접 행렬, 인접 리스트, dfs, bfs가 있다. 모두 다 알아야 하는 건 아니지만 인접 행렬/인접 리스트 중 하나를 선택하고 dfs/bfs 중 하나를 선택하여 푸는 것이 문제의 의도에 맞게 푸는 방법이라고 생각한다.

간단하게 문제를 풀어가는 방법에 대해 이야기해보자. 그래프의 정점과 연결하는 간선을 입력받았을 때 몇 개의 그룹으로 나뉘는지를 알아내면 된다. 연결 요소라는 것을 쉽게 그룹이라고 표현하겠다.

두번째 줄부터 간선을 입력받는데 "1 2"를 입력받았다면 1과 2를 이어주는 간선이 하나 있다고 생각하면 된다.

위와 같이 1,2,5가 하나의 그룹이 되고 3,4,6이 하나의 그룹이 되어 답은 2가 된다.

1,2,5와 3,4,6사이에는 간선이 없기 때문에 분리되어 있다고 할 수 있는 것이다. 그렇다면 분리되어 있는 것은 어떻게 알까?

dfs 혹은 bfs를 통해 알 수 있다. 그 중 dfs를 예로 설명해보자.

정점 1에 방문한다. 방문해서 1과 연결 된 정점을 알아낸다. (adjList라는 간선의 정보를 담는 배열을 통해 알 수 있다. adjList[1] -> [2,5] 이렇게 구성되어 있다.) 아래의 코드를 통해 정점 두 개(1,2라고 해보자)가 들어오면 adjList[1].add(2); adjList[2].add(1); 이런 코드를 통해 서로 연결되어 있음을 알 수 있다. 이것이 인접 리스트이다.

adjList[vertex1].add(vertex2);
adjList[vertex2].add(vertex1);

1과 연결된 정점은 2,5이다. 그럼 그 중 하나의 정점에 방문한다. 2에 방문한다면 2와 연결된 정점을 알아내고 1은 이전에 방문했기에 방문하지 않은 5에 방문한다. 그럼 현재 방문한 정점은 1,2,5가 되고 5와 연결된 정점은 모두 방문한 정점이기에 다시 2로 돌아간다. 그럼 2와 연결된 정점도 모두 방문했기에 다시 1로 돌아가고 1 또한 연결된 정점 2,5에 방문했기에 하나의 그룹이 끝났다는 것을 알 수 있다.

그럼 그 다음은 방문하지 않은 정점을 다시 찾는 것이다. 방문하지 않은 정점 3,4,6이 있다. 그중 3에 먼저 방문해보자. 3에 방문하여 연결된 정점을 알아보니 4,6이 있다. 그중 하나인 4에 먼저 방문해본다. 4에 방문하니 연결된 정점은 3밖에 없고 3은 이전에 방문한 노드이니 더 방문해야 할 곳이 없기에 3으로 돌아간다. 그럼 3의 입장에서는 4는 방문하였고 6은 방문하지 않았다. 그렇기에 6에 방문하고 6은 연결된 정점이 3뿐인데 이미 방문했으므로 다시 3으로 돌아간다. 3으로 돌아와서 보니 연결된 정점은 4,6인데 다 방문한 상태이다. 그렇기에 하나의 그룹이 끝났다.

그렇게 두번째 그룹도 다 방문한 뒤 방문하지 않은 정점이 있나 살펴보고 없다면 종료하면 된다. 아래는 하나의 그룹에 정점을 방문하고 오는 dfs 메서드를 호출하고 메서드가 끝나면 answer이라는 연결 요소의 총 수를 저장하는 변수의 값을 증가시키는 코드이다.

for(int i = 1; i < n+1; i++) {
	if(!visited[i]) {
		dfs(i);
		answer++;
	}
}

위와 같이 정점의 개수만큼 반복문을 돌며 방문하지 않은 정점이 있다면 그 정점과 연결된 그룹을 다 방문하고 돌아와서 answer를 증가시키면 총 몇 개의 연결 요소가 있는지 알 수 있다.

[Git] git 대소문자 변경하기

bellaah — Sun, 15 Sep 2019 20:58:00 +0900

오늘은 공부한 내용이라기보다는 git을 사용하며 문제가 되었던 것을 정리해보려고 한다.

문제

얼마 전 VScode에서 Javascript로 웹 개발을 하던 중 css 파일명을 바꿨다. 원래 이름이 Hello.css였다면 hello.css로 파일명을 변경했는데 git에는 반영되지 않았다. 반영되지 않은 것도 모르고 있었다. 그런데 html에서 css파일을 읽어와야 하는데 hello라는 css파일을 찾지 못해서 css가 적용되지 않았다.

찾아보니 git은 대소문자를 구분하지 않는다고 한다. 그래서 나는 hello로 파일명을 바꾸고 commit하여도 git은 Hello안에 내용만 바꿀 뿐 파일 명이 바뀌지는 않았던 것이다. 그런 문제때문에 git에 대소문자 변경 사항을 적용하는 방법을 찾았다.

해결

1. git mv --force pre_file new_file 이 명령어를 사용한다. 예) git mv Hello hello

2. git commit

3. git push

위와 같이 하면 git repository에 파일명 혹은 디렉토리명을 바꿀 수 있다.

[Web] 쿠키(cookie)와 세션(session)

bellaah — Sat, 14 Sep 2019 19:17:59 +0900

1. 쿠키와 세션을 사용하는 이유

HTTP 프로토콜의 특징이자 약점인 connectionless,stateless를 보완하기 위해 사용한다.

2.쿠키(cookie)

쿠키는 클라이언트 로컬에 저장되는 키와 값이 들어있는 작은 데이터 파일이다.

쿠키에는 이름, 값, 만료날짜(쿠키 저장기간), 경로 정보가 들어있으며 일정시간동안 데이터를 저장할 수 있다. (로그인 상태 유지 등에 활용)

쿠키는 클라이언트의 상태 정보를 로컬에 저장했다가 참조한다.

- 쿠키 프로세스

브라우저에서 웹페이지 접속
클라이언트가 요청한 웹페이지를 받으면서 쿠키를 클라이언트 로컬(하드)에 저장
클라이언트가 재 요청시 웹페이지 요청과 함께 쿠키값도 전송
지속적으로 로그인 정보를 가지고 있는 것처럼 사용

3. 세션(Session)

일정 시간동안 같은 브라우저로 부터 들어오는 일련의 요구를 하나의 상태로 보고 그 상태를 유지하는 기술이다. 즉, 웹 브라우저를 통해 웹 서버에 접속한 이후로 브라우저를 종료할 때 까지 유지되는 상태이다.

클라이언트가 Request를 보내면, 해당 서버의 엔진이 클라이언트에게 유일한 ID를 부여하는 데 이것이 세션ID다.

- 세션 프로세스

클라이언트가 서버에 접속시 세션 ID를 발급
서버에서는 클라이언트로 발급해준 세션 ID를 쿠키를 사용해 저장 (JSESSIONID)
클라이언트는 다시 접속할 때, 이 쿠키(JSESSIONID)를 이용해서 세션ID값을 서버에 전달

4. 쿠키와 세션의 차이

- 저장 위치: 쿠키는 클라이언트에 파일로 저장, 세션은 서버에 저장

- 보안: 쿠키는 클라이언트 로컬에 저장되기 때문에 변질되거나 request에서 스나이핑 당할 우려가 있어서 보안에 취약하지만 세션은 쿠키를 이용해서 sessionid 만 저장하고 그것으로 구분해서 서버에서 처리하기 때문에 비교적 보안성이 좋다.

- 라이프 사이클: 쿠키도 만료시간이 있지만 파일로 저장되기 때문에 브라우저를 종료해도 계속해서 정보가 남아 있을 수 있다. 또한 만료기간을 넉넉하게 잡아두면 쿠키삭제를 할 때 까지 유지될 수도 있다. 반면에 세션도 만료시간을 정할 수 있지만 브라우저가 종료되면 만료시간에 상관없이 삭제된다.

- 속도: 쿠키에 정보가 있기 때문에 서버에 요청시 속도가 빠르고 세션은 정보가 서버에 있기 때문에 처리가 요구되어 비교적 느린 속도를 낸다.

* 그렇다면 쿠키를 사용하는 이유는 무엇인가?

- 세션은 서버의 자원을 사용하기때문에 무분별하게 만들다보면 서버의 메모리가 감당할 수 없어질 수가 있고 속도가 느려질 수 있기 때문이다.

[Web] HTTP 응답 코드

bellaah — Thu, 12 Sep 2019 23:10:17 +0900

1. 응답 코드란?

HTTP 통신 시, 클라이언트(웹 브라우저)가 서버에 어떠한 요청(request)를 하면 서버는 응답(response)를 보내준다. 서버에서 클라이언트가 보낸 요청이 어떻게 되었는지 알려주는 것이 응답코드이다.

오늘은 그 응답코드의 종류와 의미에 대해서 알아보려고 한다.

2. 성공(Success), 2XX

200번대 응답코드는 이 작업을 성공적으로 받았고, 이해했으며, 받아들여졌다는 의미이다.

200 : 요청은 정상이고, 본문은 요청된 리소스를 포함하고 있다. 또한 가장 일반적으로 볼 수 있는 HTTP상태이다.
201 : 어떠한 생성 작업을 요청받았으며, 생성 작업을 성공하였다.
202 : 요청은 받아들여졌으나, 아직 동작을 수행하지 않은 상태로 요청이 적절함을 의미한다.
203 : 요청을 성공하였지만, 요청에 대한 검증이 되지 않은 상태를 의미한다.
204 : 요청을 성공하였지만, 제공할 내용이 없음을 의미한다.
205 : 204와 동일하지만 새로고침등을 통해 새로운 내용등을 확인할것을 추가로 의미한다.
206 : 요청의 일부분만 성공하였음을 의미한다.

3. 리다이렉션(Redirection), 3XX

300번대 응답코드는 이 요청을 완료하기 위해서는 리다이렉션이 이루어져야 한다는 의미이다. 짧은 주소(단축 URL) 서비스의 경우 접속 시 301이나 302 코드를 보내고, 헤더의 location에 리다이렉션할 실제 URL을 적어 보낸다.

300 : 클라이언트가 동시에 여러 응답을 가리키는 URL을 요청한 경우 응답 목록과 함께 반환된다.
301 : 요청한 URL이 옮겨졌을 때 사용. 옮겨진 URL에 대한 정보와 함께 응답되어야 한다.
302 : 301과 동일하나, 클라이언트는 여전히 옮겨지기전 URL로 요청할것을 의미한다.
303 : 요청받은 행동 수행을 위해서는 다른 URL로 요청 해야함을 의미한다.
304 : 이전의 동일한 요청과 비교하여 변화가 없음을 의미한다. (단시간에 반복된 동일 요청에 대한 대응 코드)
305 : 직접적인 요청이 아니라 반드시 프락시(우회경로)를 통해 요청되어야 함을 의미한다.
307 : 302와 동일하며, HTTP Method도 변경없이 요청하여야 함을 의미한다.

4. 클라이언트 에러(Client Error), 4XX

400번대 응답코드는 요청이 올바르지 않다는 의미이다. 클라이언트가 잘못된 요청을 주었을 때 나타난다.

400 : 클라이언트가 올바르지 못한 요청을 보내고 있음을 의미한다.
401 : 요청을 위해서는 권한 인증등을 요구함을 의미한다.
403 : 요청이 서버에 의해 거부 되었음을 의미, 서버는 거부 이유를 포함하여 응답할 수 있지만, 보통은 거부 이유를 숨기고 싶을 때 사용된다.
404 : 요청한 URL을 찾을 수 없음을 의미한다.
405 : 요청한 URL이 Method를 지원하지 않음을 의미한다. (ex] POST요청에 대한 응답을 하는 URL에 GET으로 요청)
406 : 클라이언트 요청에 대해 적절한 컨텐츠가 없음을 의미한다.
407 : 401과 동일하나, 프락시(우회경로)를 통하여 인증 할 것을 요구함을 의미한다.
408 : 요청에 응답하는 시간이 너무 많은 시간이 걸림을 의미한다.
409 : 클라이언트 요청에 대해 서버에서 충돌 요소가 발생 할수 있음을 의미한다.
410 : 요청한 URL이 더 이상 사용되지 않고 사라졌음을 의미한다.
411 : 클라이언트 요청에 Content-length 헤더가 포함되어야 함을 의미한다.
412 : 클라이언트가 조건부 요청을 했는데 그중 하나가 실패하였음을 의미한다.
413 : 요청이 너무 커서 서버가 처리 할 수 없음을 의미한다.
414 : 요청 URL이 너무 길어 처리 할 수 없음을 의미한다.
415 : 서버가 이해 하지 못하는 유형의 컨텐츠를 요청 하였음을 의미한다.
416 : 클라이언트의 요청 내용이 범위가 잘못되었음을 의미한다.
417 : 클라이언트 요청 헤더의 Expect에 대해 서버가 만족 하지 않음을 의미한다.

5. 서버 에러(Server Error), 5XX

500번대 응답코트는 올바른 요청에 대해 서버가 응답할 수 없다는 의미이다.

500 : 서버에 오류가 발생하여 응답 할 수 없음을 의미한다.
501 : 클라이언트 요청에 대한 서버의 응답 수행 기능이 없음을 의미한다. (ex] 서버가 지원하지 않는 새로운 Method를 사용하여 요청 - GET2, POST2...)
502 : 프락시나 게이트웨이등의 서버에서 응답하며, 서버의 모(엄마)서버에서 오류가 발생하였음을 의미한다.
503 : 현재 서버가 유지보수 등의 이유로 일시적인 사용 불가함을 의미한다.
504 : 서버에서 다른 서버로 요청을 보냈으나, 응답 지연이 발생하여 처리가 불가함을 의미한다.
505 : 서버가 지원할 수 없거나 올바르지 못한 프로토콜로 요청을 받았음을 의미한다.

[Web] HTTP란 무엇인가?

bellaah — Sun, 8 Sep 2019 23:39:21 +0900

웹 개발자라면 HTTP에 대해서 잘 알아야 원하는대로 동작하게 만드는 것이 수월할 것이다.

하지만 글쓴이도 프론트엔드 개발을 하면서 HTTP를 공부하지 않았다. 그리고 백엔드를 개발하는 과정에서 HTTP를 공부하며 느낀 것이 프론트엔드를 개발할 때도 HTTP의 개념을 아는 것이 중요하다는 것이다. 프론트엔드를 개발할 때 데이터를 서버로 전송하는 등 HTTP를 이해해야 하는 부분들이 있다고 생각한다.

1. HTTP란?

HTTP란 HyperText Transfer Protocol의 약자로 하이퍼텍스트 문서를 교환하기 위하여 사용된 통신 규약이다. 즉, 웹 서버와 클라이언트 간의 통신을 하기 위한 통신 규약이며 HTTP는 1989년 팀 버너스-리에 의해 처음 설계되었다.

HTTP는 웹에서만 사용하는 프로토콜로 TCP/IP 기반으로 서버와 클라이언트의 요청과 응답을 전송한다.

2. HTTP의 동작

HTTP 메시지는 HTTP 서버와 HTTP 클라이언트에 의해서 해석된다.
HTTP는 연결 상태를 유지하지 않는 비연결성 프로토콜이다. 이러한 단점을 해결하기 위해 Cookie와 Seesion 등장하였다.
HTTP는 연결을 유지하지 않는 프로토콜이기 떄문에 요청/응답(request/response) 방식으로 동작한다.

HTTP는 위의 그림과 같이 동작한다. 무슨 말인가하면 client는 server에게 request(요청)을 보낸다. 그럼 요청을 받은 server가 해야 할 일은 response(응답)을 보내는 것이다.

예를 들어 이야기해보자. 우리가 회원가입을 하려고 한다. 회원가입 양식을 다 작성한 후 회원가입 버튼을 눌렀을 때 우리가 작성한 양식의 data는 server가 database에 저장해준다. 그리고 사용자는 회원가입이 완료되었다고 뜨는 페이지를 보게될 것이다. 이러한 일이 일어나는데 이 과정을 순서대로 적어보자.

회원가입 버튼을 누르면 client가 server에게 request를 보내는 것이다. 그러면 server는 지정한 방식으로 request가 왔기때문에 그 요청이 오면 request객체가 가지고 있는 data를 저장하도록 코딩을 해놨을 것이다. 그렇게 data를 저장한 후 client에게 회원가입이 완료되었다는 페이지를 보여주기 위해 server는 어떠한 페이지를 보여주는 역할을 response를 통해 하는 것이다.

이런 과정을 HTTP를 통해 하는 것이다.

HTTP 메소드와 HTTP 응답 코드 종류에 대해서는 다음 포스팅에 알아보려고 한다.

[Git] Git 3가지 상태

bellaah — Sat, 24 Aug 2019 14:13:51 +0900

Git에서 파일을 관리할 때 3가지의 상태가 존재한다. 그 상태와 의미에 대해 알아보자.

1. Git File 상태

Committed : 데이터가 로컬 데이터베이스에 안전하게 저장됐다는 것을 의미한다.
Modified : 수정한 파일을 아직 로컬 데이터베이스에 커밋하지 않은 것을 말한다.
Staged : 현재 수정한 파일을 곧 커밋할 것이라고 표시한 상태를 의미한다.

2. Git Area

이 세 가지 상태는 Git 프로젝트의 세 가지 단계와 연결되어 있다. 아래의 그림을 보며 Git directory, working directory, Staging Area 이 세가지의 영역을 알아보자.

Git directory는 Git이 프로젝트의 메타데이터와 객체 데이터베이스를 저장하는 곳을 말한다. 다른 컴퓨터에 있는 저장소를 Clone 할 때 Git directory가 만들어진다.

working directory는 프로젝트의 특정 버전을 Checkout한 것이다. 그리고 file을 수정하면 그 파일은 modified 상태가 된다.

변경 된 파일을 local repo에 commit 하기 전에, git add 명령어로 staging area영역으로 올리는데 이 때, 파일은 staged 상태가 되었다고 할 수 있다. 이 상태에선 commit을 할 수 있으며 commited 상태가 되면 local repo에 commit 되었다고 할 수 있다.

단순히 파일을 변경할 경우, working directory 영역에서 modified 상태가 되며 commit을 할 수 없다. git add 명령어로 staged 상태로 변경해야만 commit이 가능하다.

Git으로 하는 일을 적어본다면 아래와 같다.

working directory에서 파일을 수정한다.
Staging Area에 파일을 Stage해서 커밋할 스냅샷을 만든다.
Staging Area에 있는 파일들을 커밋해서 Git 디렉토리에 영구적인 스냅샷으로 저장한다.

[Git] Git이란 무엇인가?

bellaah — Mon, 12 Aug 2019 11:00:47 +0900

1. Git이란 무엇인가?

Git이란 버전 관리 시스템(VCS, Version Control System)의 한 종류이다.

그렇다면 여기서 말하는 버전 관리란 무엇이고, 왜 필요할까?

버전 관리란 이름 그대로 여러 파일을 하나의 버전으로 묶어 관리하는 것이다. 버전 관리를 예를 들어 말해보자.

예를 들어, 우리가 제출해야 하는 레포트가 하나 있다. 처음에 'report.txt'를 만들었다가 내용이 바뀔 경우 'report_최종.txt'으로 바꿨다가 다시 수정을 거치면서 'report_진짜최종.txt' 이런식으로 만든 경험이 있을 것이다.

우리는 여러 파일들을 복사, 저장, 백업 등을 하였고 이것을 버전 관리라고 부른다.

2. 버전 관리 시스템

하지만, 위에서 설명하였던 버전 관리 방식은 어떤 것이 가장 최신 파일인지 알아보기도 어렵고 효율적이지 못하다.

그렇기 때문에 이를 전문적으로 관리하는 시스템이 만들어지게 된다. 이것을 버전 관리 시스템(Version Control System,VCS)이라고 부른다.

VCS는 크게 아래의 두가지로 나눠볼 수 있다.

1) 클라이언트-서버 모델

하나의 중앙 서버가 존재하며, 여러 클라이언트들은 중앙 서버에서 각자 맡은 파트만 가져와서 작업하고, 다시 중앙으로 통합하는 것을 말한다.
대표적 시스템으로 CVS, Subversion 등이 있다.

2) 분산 모델

하나의 중앙 서버가 존재하지만, 여러 클라이언트들은 각자의 컴퓨터 저장소에 중앙 서버의 전체 사본을 가지고 작업을 하는 것을 의미한다.
대표적 시스템으로 Git이 있다.

3. Git의 필요성

Git의 필요성을 말하기 위해 예를 하나 들어보자.

나와 나의 동료가 동시에 같은 웹사이트에서 페이지를 업데이트하고 있다고 하자.

나는 무언가를 변경하고 저장한 다음 웹사이트에 그것을 업로드한다. 그런데 이때 문제는 동료가 동시에 같은 페이지에서 작업할 때이다. 확인하지 않고 동시에 작업을 한다면 누군가의 작업은 겹쳐쓰여질 것이고 지워질 것이다.

깃과 같은 버전관리 시스템은 그런 일을 방지해준다.

나와 동료는 같은 페이지에 각자의 수정사항을 각각 업로드할 수 있고, 깃은 두 개의 복사본을 저장한다.

그런 후 우리는 어떤 작업도 잃어버리지 않고 변경사항들을 병합(Merge)할 수 있다. 깃은 이전에 만들어진 모든 변경사항의 “스냅샷”을 저장하기 때문에 이전 시점의 어떤 버전으로 되돌릴 수도 있다.

이렇기에 프로젝트를 진행할 때 Git은 아주 유용하며 필수적으로 많이 사용한다. 프로젝트에서 내가 작업한 부분을 올리고 다른 사람이 작업한 부분을 올려 스냅샷이 저장되고 어떠한 코드도 손실되지 않고 나눠서 작업한 파일을 병합할 수 있기때문이다.

4. Git 기본 용어

Git을 사용하기 위해 알아야 할 용어들이 있다.

Repository : 저장소를 의미하며, 저장소는 히스토리, 태그, 소스의 가지치기 혹은 branch에 따라 버전을 저장한다. 저장소를 통해 작업자가 변경한 모든 히스토리를 확인 할 수 있다.

Working Tree : 저장소를 어느 한 시점을 바라보는 작업자의 현재 시점이다.

Staging Area : 저장소에 커밋하기 전에 커밋을 준비하는 위치이다.

Commit : 현재 변경된 작업 상태를 점검을 마치면 확정하고 저장소에 저장하는 작업이다.

Head : 현재 작업중인 Branch를 가리키는 것이다.

Branch : 가지 또는 분기점을 의미하며, 작업을 할때에 현재 상태를 복사하여 Branch에서 작업을 한 후에 완전하다 싶을때 Merge를 하여 작업을 한다.

Merge : 다른 Branch의 내용을 현재 Branch로 가져와 합치는 작업을 의미한다.

5. Git 주요 명령어

일단 Git은 명령어가 아주 많다. 그러나, 깃을 시작하기에 앞서 기본적인 명령어만 살펴보기로 하자.

git init : 깃 저장소를 초기화한다. 저장소나 디렉토리 안에서 이 명령을 실행하기 전까지는 그냥 일반 폴더이다. 이것을 입력한 후에야 추가적인 깃 명령어들을 줄 수 있다.

git help : 명령어를 잊어버렸다면 커맨드 라인에 "git help"를 쳐보자. 그럼 21개의 가장 많이 사용하는 깃 명령어들이 나타난다. 좀 더 자세하게 “git help init”이나 다른 용어를 타이핑하여 특정 깃 명령어를 사용하고 설정하는 법을 이해할 수도 있다.

git status : 저장소 상태를 체크한다. 어떤 파일이 저장소 안에 있는지, 커밋이 필요한 변경사항이 있는지, 현재 저장소의 어떤 브랜치에서 작업하고 있는지 등을 볼 수 있다.

git clone : 원격 저장소의 저장소를 내 local에서 이용할 수 있게 그대로 복사해 가져온다.

git add : 이 명령이 저장소에 새 파일들을 추가하진 않는다. 대신, 깃이 파일들을 지켜보게 한다. 파일을 추가하면, 깃의 저장소 “스냅샷”에 포함된다.

git commit : 깃의 가장 중요한 명령어이다. 파일을 수정한 후, 저장소의 “스냅샷”을 찍기 위해 사용하는 명령어이다. 보통 “git commit -m “Message hear.” 형식으로 사용한다. -m은 명령어의 다음 부분을 메세지로 남긴다는 뜻이다.

git push : 로컬 컴퓨터에서 작업하고 당신의 커밋을 깃허브에서 온라인으로도 볼 수 있기를 원한다면, 이 명령어로 깃허브에 변경사항을 “push”한다.

git pull : 로컬 컴퓨터에서 작업할 때, 작업하고 있는 저장소의 최신 버전을 원하면, "git pull"을 통해 깃허브로부터 변경사항을 다운로드할 수 있다.

git log : 커밋 내역을 확인해보고 싶을 때 사용하는 명령어이다.

git branch : 여러 협업자와 작업하고 자신만의 변경을 원한다면 이 명령어로 새로운 브랜치를 만들고, 자신만의 변경사항과 파일 추가 등의 커밋 타임라인을 만든다. 새 브랜치를 “hello”로 지정하고 싶다면 "git branch hello"라고 쓸 수 있다.

git checkout : 현재 위치하고 있지 않은 저장소를 “체크아웃”할 수 있다. 이것은 체크하길 원하는 저장소로 옮겨가게 해주는 탐색 명령이다. 만약 master 브랜치를 들여다 보고 싶으면, git checkout master를 사용할 수 있다.

git merge : 브랜치에서 작업을 끝내고, 모든 협업자가 볼 수 있는 master 브랜치로 병합할 수 있다. "git merge hello"라고 입력한다면 hello브랜치에서 만든 모든 변경사항을 master로 추가한다.

[JAVA] String, StringBuilder, StringBuffer의 차이

bellaah — Sun, 11 Aug 2019 16:20:15 +0900

String, StringBuffer, StringBuilder 차이점과 장단점

JavaString, StringBuffer, StringBuilder은 Java를 사용하면 종종 접하게 되는 문자열 클래스들이다.

이 세 가지는 모두 문자열을 저장하고, 관리하는 클래스인데 비슷한 이 클래스들을 여러 가지 만들어놓은 이유는 무엇일까?

1. String

String을 먼저 소개하자면 String은 immutable(불변) 객체이다. 그래서 String은 new 연산을 통해 생성되면 그 인스턴스의 메모리 공간은 절대 변하지 않는다. 변하지 않고 + 연산이나 concat을 이용해서 문자열에 변화를 주면 메모리의 내용이 변하는 것이 아니라 새로운 String객체를 new로 만들어서 새로운 메모리 공간에 변한 문자열이 생기고 그 객체를 참조하는 것이다.

이렇게 새로운 문자열이 만들어지면 기존의 문자열은 가비지 콜렉터에 의해 제거되야하는데 언제 제거될지 모른다.

또한 이러한 문자열 연산이 많아질 때 계속해서 객체를 만드는 오버헤드가 발생하므로 성능이 떨어질 수 밖에 없는 단점이 있다.

String 객체는 이러한 이유로 문자열 연산이 많은 경우, 그 성능이 좋지 않다.

하지만, Immutable한 객체는 간단하게 사용 가능하고, 동기화에 대해 신경 쓰지 않아도 되기 때문에(Thread-safe), 내부 데이터를 자유롭게 공유 가능할 수 있다

반면에 StringBuffer, StringBuilder는 mutable(가변) 객체이다. 그것이 String과의 가장 큰 차이점이다.

2. StringBuffer와 StringBuilder

StringBuffer와 StringBuilder 클래스는mutable(가변)하기 때문에 String과 다르게 동작한다.

문자열 연산에 있어서 new연산을 통해 클래스를 한번만 만들고 문자열 연산 등으로 기존 객체의 공간이 부족하게 되는 경우, 기존의 버퍼 크기를 늘리며 유연하게 동작한다. 또한 StringBuffer와 StringBuilder 클래스가 제공하는 메서드는 서로 동일하다.

그럼 두 클래스의 차이점은 무엇일까?

두 클래스의 차이점은 바로 동기화 여부이다. StringBuffer는 멀티스레드 환경에서도 동기화를 지원한다. 반면, StringBuilder는 동기화를 보장하지 않는다.
그렇기 때문에 멀티스레드 환경이라면 값 동기화 보장을 위해 StringBuffer를 사용하고, 단일 스레드 환경이라면 StringBuilder를 사용하는 것이 좋다. 단일 스레드 환경에서 StringBuffer를 사용한다고 문제가 되는 것은 아니지만, 동기화 관련 처리로 인해 StringBuilder에 비해 성능이 좋지 않다.

연산을 많이하는 경우에는 String 클래스를 쓰는 대신, 스레드와 관련이 있으면 StringBuffer를 사용하고, 스레드 안전 여부와 상관이 없으면 StringBuilder를 사용하는 것이 더 좋다고 생각한다.

[Javascript] 자바스크립트 엔진, Event Loop, Event Queue, Call Stack

bellaah — Wed, 7 Aug 2019 11:43:23 +0900

오늘은 자바스크립트의 동작원리에 대해 간단히 알아보려고 한다.

자바스크립트는 싱글 스레드 기반으로 동작한다. 과연 싱글 스레드 기반으로 어떻게 동작하는 것일까?

자바스크립트가 동작하는 환경과 엔진에 대해 쉽고 간단하게 알아보자.

1. 자바스크립트의 엔진 구성

자바스크립트 엔진은 크게 두 부분으로 구성된다.

메모리 힙(Memory Heap) : 메모리 할당이 이루어지는 곳
콜 스택(Call Stack) : 코드가 실행되면서 스택 프레임이 쌓이는 곳

위와 같이 구성된다. 하지만 브라우저에는 거의 모든 자바스크립트 개발자가 사용하는 API가 있다. 예를 들면setTimeout과 같은 것들을 말한다. 그런데 이것들은 엔진이 제공하는 것이 아니다.

브라우저가 제공하는 웹 API가 DOM, AJAX,setTimeout 등을 지원한다.

사실은 위와 같은 구조를 갖는다. 그렇다면 Event Loop와 Callback Queue는 무엇일까?

이것을 이해하기위해 Call stack, Event Loop, Callback Queue(Event Queue)에 대해 자세히 알아보자.

2. Call Stack

위에 간단한 설명으로는 Call Stack을 코드가 실행되면서 스택 프레임이 쌓이는 곳이라고 소개하였다.

자바스크립트는 하나의 호출 스택을 사용한다. 이는 하나의 함수가 실행되면 그 함수가 끝날 때까지 다른 함수는 실행할 수 없음을 의미한다.

함수를 호출하면 순차적으로 함수를 Call Stack에 담아 처리한다.

Call Stack에 함수가 들어오면(push) 실행하고 끝날 때 pop하여 Call Stack에서 나간다.

만약 a라는 함수가 b라는 함수를 호출한다면 a는 Call Stack에 들어가고 그 위에 b라는 함수가 쌓여 b를 실행한 뒤 종료되면 b가 pop되고 a가 종료되면 pop되어 Call Stack이 비게 된다.

3. Callback Queue(Event Queue)

Callback Queue란 Call Stack이 비면 해야할 작업들을 담고 있는 queue이다.

Call Stack에 작업을 보내기 전에 대기하는 큐라고 볼 수 있다.

자바스크립트에서 비동기로 실행되는 함수들(예를들면 setTimeout)이 Call Stack에 들어갔다가 webAPIs에서 실행 후 Callback Queue에 들어오는 것이다.

4.Event Loop

위에서 Callback Queue는 Call Stack이 비면 Call Stack으로 작업을 하나씩 보낸다고 나와있다.

Call Stack이 비었는지 확인하고 Callback Queue에 먼저 들어온 작업을 하나씩 Call Stack으로 옮겨주는 일을 하는 것이 Event Loop이다.

setTimeout(function() {
   console.log("first");
}, 0);

console.log("second");        //console -> second first

위의 코드를 실행하면 setTimeout을 0으로 설정했음에도 불구하고 second 먼저 실행되어 출력된다.

그 이유가 위에서 설명한 Javascript의 구조때문이다.

setTimeout을 0으로 설정하고 실행하면 setTimeout은 Call Stack에 잠시 들어갔다가 setTimeout이라는 것을 알고 webAPIs에 들어간다. 그리고 곧바로 Event Queue에 들어가지만 이미 console.log("second")가 Call Stack에 있기 때문에 second가 출력된 후 Call Stack이 비었을 때 console.log("first")가 들어갈 수 있다.

이러한 javascript의 구조를 이해하고 setTimeout을 사용한다면 조금 더 원하는 방향으로 코드가 동작할 수 있을 것이다.

[BOJ] 백준 2667 단지번호붙이기-java

bellaah — Sat, 3 Aug 2019 19:12:58 +0900

문제

<그림 1>과 같이 정사각형 모양의 지도가 있다. 1은 집이 있는 곳을, 0은 집이 없는 곳을 나타낸다. 철수는 이 지도를 가지고 연결된 집들의 모임인 단지를 정의하고, 단지에 번호를 붙이려 한다. 여기서 연결되었다는 것은 어떤 집이 좌우, 혹은 아래위로 다른 집이 있는 경우를 말한다. 대각선상에 집이 있는 경우는 연결된 것이 아니다. <그림 2>는 <그림 1>을 단지별로 번호를 붙인 것이다. 지도를 입력하여 단지수를 출력하고, 각 단지에 속하는 집의 수를 오름차순으로 정렬하여 출력하는 프로그램을 작성하시오.

입력

첫 번째 줄에는 지도의 크기 N(정사각형이므로 가로와 세로의 크기는 같으며 5≤N≤25)이 입력되고, 그 다음 N줄에는 각각 N개의 자료(0혹은 1)가 입력된다.

출력

첫 번째 줄에는 총 단지수를 출력하시오. 그리고 각 단지내 집의 수를 오름차순으로 정렬하여 한 줄에 하나씩 출력하시오.

문제:https://www.acmicpc.net/problem/2667

2667번: 단지번호붙이기

www.acmicpc.net

풀이

단지를 구하기 위해서는 일단 값이 1인 위치를 먼저 찾아야 한다.

찾기 위해서 이중 for문을 돌며 1인 위치를 찾으면 그때부터 그 단지의 규모를 알아내기 위해서 bfs()라는 메서드를 호출한다.

호출하기 전 단지 하나를 발견했고 단지의 크기를 저장해야 하기 때문에 scale이라는 linkedList에 1이라는 Integer를 추가한다.

scale.add(1)을 하는 이유는 1인 위치를 하나 찾았고 그 위치의 값을 count값인 2로(처음 단지를 찾았을 때) 바꿔줄 것인데 단지에 속하는 위치 1개를 찾았기 때문에 그 수를 의미한다.

또한 큐에 좌표를 넣기위해 스트링으로 row값+$$+col값을 넣어주었다.

이렇게 하면 큐에서 하나의 값을 뺐을 때 "$$"를 구분자로 보고 그 앞과 뒤를 row, col로 보면 되기 때문이다.

q가 비지않았다면 단지로 묶어야 할 것이 더 남았음을 뜻하므로 while문을 계속 돌아야 한다.

while문을 시작하면 바로 q에서 값을 하나 뺀 후 split을 통해 row와 col을 나눈다.

배열의 범위를 벗어나지 않기 위해 확인을 한번 하고 현재 도착한 위치의 값이 1이라면 q에 좌표를 추가하고 현재 위치의 값을 count로 바꾼다.

나중에 모든 작업이 끝난 후 map을 출력해본다면 위의 문제와 같이 단지별로 다른 번호를 가지고 있을 것이다.

또한 1인 좌표를 찾았으면 그 주변을 또 탐색해야 하므로 현재 위치를 q에 넣고 scale의 마지막 값을 +1 해준다.

현재 발견한 단지의 규모를 늘려주는 것이다.

마지막으로 sclae에는 찾은 순서대로 단지의 크기가 들어있을 것이다.

오름차순으로 정렬해야 하므로 sort메서드를 사용하고 출력하면 된다.

[Javascript] 구조 분해 할당(destructuring)

bellaah — Fri, 2 Aug 2019 09:49:56 +0900

ES6에서 배열과 object를 조금 더 쉽게 다루는 방식이 추가됐다.

구조 분해 할당 구문은 배열이나 객체의 속성을 해체하여 그 값을 개별 변수에 담을 수 있게 하는 JavaScript 표현식이다.

구조 분해 연산자, 전개 연산자, 각 배열에 들어가 있는 데이터를 하나씩 가져와서 처리해야 되는 상황을 한 번에 처리할 수 있도록 해준다.

1. 객체 구조 분해 할당

아래는 객체 구조분해(destructuring)의 예시이다.

let obj = {
  name : "devlog",
  age : 1
};

let { name, age } = obj;

name과 age의 값을 확인해보면 각각 obj.name, obj.age의 값이 담긴 것을 확인해볼 수 있다.

객체를 구조분해 할 때 주의해야 할 것은 우선 할당 연산자의 왼쪽에 객체리터럴이 와야 하고,할당 연산자의 오른쪽에 오는 값이 null이나 undefined여서는 안된다는 것이다.

그리고 구조 분해를 할 때 변수를 선언만 해서는 안되고 반드시 초기자(initializer)를 해줘야 한다.

2. 배열 분해 할당

배열의 값을 별도의 변수에 할당하려는 경우, destructuring을 통해 간단하고 깨끗하게 할당할 수 있다.
인덱스나 루프를 사용할 필요가 없다.

const array = ['a', 'b', 'c', 'd'];
const [first, second, third, fourth] = array;

console.log(first); 	 // Outputs 'a'
console.log(second);	 // Outputs 'b'
console.log(third);		 // Outputs 'c'
console.log(fourth);	 // Outputs 'd'

위와 같이 배열의 값들을 알아서 할당해준다.

이 문법은 배열 안에 있는 원소를 다른 이름으로 새로 선언해주고 싶을 때 사용하면 매우 유용하다.

객체 비구조화 할당과 마찬가지로, 기본값 지정이 가능하다.

3. 깊은 값 구조 분해 할당

const deepObject = {
  state : {
    information : {
      name : 'devlog',
      category : ['js', 'algorithm', 'java']
    }
  },
  age: 1
};

위와 같은 배열이 존재할 때, name, category 값들을 밖으로 꺼내고 싶다면 어떻게 해야 할까?

첫 번째 방법은 비구조화 할당 문법을 두 번 사용하는 것이다.

const deepObject = {
  state: {
    information : {
      name : 'devlog',
      category : ['js', 'algorithm', 'java']
    }
  },
  age : 1
};

const { name, category } = deepObject.state.information;
const { age } = deepObject;

const extracted = {
  name,
  category,
  age
};

console.log(extracted); // {name: "devlog", category: Array[3], age : 1}

위에서 extracted 객체를 선언할 때 사용한 방식은 아래와 같은 의미이다.

const extracted = {
  name : name,
  category : category,
  age : age
}

이번엔 두 번째 방법, 한 번에 모두 추출하는 방법을 알아보자.

const deepObject = {
  state : {
    information : {
      name : 'devlog',
      category : ['js', 'algorithm', 'java']
    }
  },
  age : 1
};

const {
  state : {
    information : { name, category }
  },
  age
} = deepObject;

const extracted = {
  name,
  category,
  age
};

console.log(extracted);

이렇게 하면 깊숙이 안에 들어있는 값도 객체에서 바로 추출할 수 있다.

[Javascript] Promise 이해하기

bellaah — Thu, 1 Aug 2019 09:35:56 +0900

Promise (프로미스)

싱글 스레드인 자바스크립트에서 비동기 처리를 위해서 콜백(callback)을 사용해왔다.

덕분에 비동기 처리를 온전히 해낼 수 있었지만 이런 콜백이 반복되면서 콜백 지옥이 생겨났다.

콜백 지옥으로 인해 복잡도가 증가하고 예외처리가 어려워졌다.

이러한 단점을 보완하기 위하여 생긴 것이 Promise이다.

Promise를 간단히 소개하자면 비동기에서 성공(fulfilled)과 실패(rejected)를 분리해서 메서드를 수행해주는 것이다.

fulfilled 혹은 rejected될 때, 프로미스에 연결한 처리기는 그 프로미스의 then 메서드에 의해 대기열에 오른다.

1. Promise 생성 방법

var promise1 = function(bool){
    return new Promise(function(resolve, reject){
        setTimeout( function(){
            if(bool){
                resolve("fulfilled 상태입니다. then으로 연결됩니다.");
            }
            else{
                reject("rejected 상태입니다. catch로 연결됩니다.");
            }
        }, 1000)
    })
}

promise1(true)
.then( function(result){
    console.log(result);
})
.catch( function(err){
    console.log(err)
})

Promise를 생성하는 방법은 위와 같다.

promise1이라는 새로운 함수를 만들어 그 안에 return 값으로 새로운 Promise를 생성한다.

Promise에 들어가는 callback함수의 파라미터는 resolve와 reject가 있다.

resolve는 fulfilled되었을 때 반환하는 것이고 reject는 말 그대로 rejected 되었을 때 반환하는 것이다.

그렇기 때문에 안에서 bool값이 true일 경우 resolve를 return하고 else인 경우(bool=false) reject를 반환한다.

스트링으로 나와있듯이 resolve를 보내면 아래의 promise1을 호출하였을 때 then부분으로 넘어가고 reject를 보내면 catch로 넘어가서 쉽게 처리할 수 있다.

Promise 생성자의 prototype에는 then(), catch() 메서드가 존재한다.

아래에서 Promise의 프로토타입에 대해 알아보자.

2.Promise의 상태

Pending : Promise를 수행중인 상태를 나타낸다.

fulfilled : Promise가 resolve된 상태이다.

rejected : promise가 지켜지지 못한 상태이다.

settled : fulfilled 혹은 rejeted로 결론이 난 상태이다.

3. Promise 프로토타입

Promise의 prototype 메서드는 아래와 같다.

- Promise.prototype.catch()

프로미스(promise)에서 오류가 났을 때 거부를 처리해준다.

asyncThing1()
    .then(function() { return asyncThing2();})
    .then(function() { return asyncThing3();})
    .catch(function(err) { return asyncRecovery1();})
 
    .then(function() { return asyncThing4();}, function(err) { return asyncRecovery2(); })
    .catch(function(err) { console.log("Don't worry about it");})
 
    .then(function() { console.log("All done!");});

그림 출처 : http://programmingsummaries.tistory.com/325

- Promise.prototype.then()

Promise가 정상적으로 비동기 작업을 완료하였을 때(fulfilled) 호출된다.

then의 파라미터로는 성공 시 호출할 함수를 넣어준다.

- Promise.prototype.finally()

finally() 메소드는 Promise 객체를 반환한다.

Promise가 처리되면 충족되거나 거부되는지 여부에 관계없이 지정된 콜백 함수가 실행된다.

finally는 Promise가 성공적으로 수행되었는지 거절되었는지에 관계없이 Promise가 처리된 후에 코드가 무조건 한 번은 실행되는 것을 제공한다.

MarkDown 사용법

bellaah — Thu, 18 Jul 2019 16:35:16 +0900

마크다운(MarkDown)이란?

일반 텍스트 기반의 마크업 언어로 README.md 파일이나 온라인 문서, 혹은 일반 텍스트 편집기로 문서 양식을 편집할 때 쉽게 쓰고 읽을 수 있으며 HTML로 변환이 가능하다.

확장자가. md인 파일을 말한다.

마크다운 문법(사용법)

1. 헤더(Header)

# This is a H1
## This is a H2
## This is a H3

This is a H1

This is a H2

This is a H3

2. 인용문(Blockquotes)

text1

> text2
> > text3

text1

text2

text3

3.목록(List)

* Item 1
* Item 2
  * Item 2-1
  * Item 2-2
1. Item 1
1. Item 2
   1. Item 2-1
   1. Item 2-2

Item 1
Item 2
- Item 2-1
- Item 2-2

Item 1
Item 2
1. Item 2-1
2. Item 2-2

4. 코드 블록(CodeBlocks)

```javascript
function test() {
 console.log("hello world!");
}
```

5. 강조(Emphasis)

_This text will be italic_  
_This will also be italic_

**This text will be bold**  
**This will also be bold**

This text will be italic
This will also be italic

This text will be bold
This will also be bold

6. 수평선(hr)

---
***
___

7. 인라인 코드(Inline code)

문단 중간에 `Code`를 넣을 수 있습니다.

[Javascript] callback(콜백) 개념 이해하기

bellaah — Wed, 17 Jul 2019 23:18:29 +0900

Javascript로 개발을 하신다면 'callback'이라는 키워드를 한 번쯤 들어보셨을 것이라 생각합니다.

과연 callback이란 무엇일까요?

1.callback이란?

javascript에서는 callback 함수는 다른 함수의 매개변수로 함수를 전달하고, 어떠한 이벤트가 발생한 후 매개변수로 전달한 함수가 다시 호출되는 것을 의미합니다.

callback은 쉽게 말하자면 어떤 일을 다른 객체에게 시키고, 그 일이 끝나는 것은 기다리지 않고 끝나고 부를 때까지 다른 일을 하는 것을 말합니다.

그렇기 때문에 non-block이며, 비동기 방식의 함수를 사용합니다.

2.callback 함수 사용법

function first(a,b,callback){
	let v=a*b;
	callback(v);
}

first(1,2,function(v){
	console.log(v);		//2
})

위와 같이 아래에서 first 함수를 호출하는데 호출할 때 익명 함수를 parameter로 넘겨줍니다.

그러면 first 함수에서는 그 함수 parameter를 callback이라는 이름으로 받고 있습니다.

first가 실행되면 a,b를 곱한 결과 값을 callback함수의 parameter로 넣어줍니다.

여기서 callback함수는 아래의 익명 함수이므로 그 익명 함수가 실행되겠죠?

결과 값은 2(1*2)가 됩니다.

3.callback 함수를 쓰는 이유

만약 node.js를 쓰면서 콜백을 받아야 하는 상황에 callback 함수를 사용하지 않는다면 콜백 함수의 과정이 끝나기 전에 다음 프로세스가 진행될 수 있습니다.

그것을 막기 위해 차례대로 수행하기 위해 callback 함수를 사용해야 합니다.

[Javascript]자바스크립트 기초-변수와 상수(var,let,const)

bellaah — Tue, 16 Jul 2019 18:23:41 +0900

Javascript의 변수 선언 방식인 var와 let 그리고 const는 어떤 차이점에 대해 알아보자.

1.var

ES6(ECMAScript6) 이전에 나온 변수 선언 방식입니다.

var와 let의 차이점으로는 scope이 있습니다.

var는 function 단위의 scope을 가집니다.

var str="hello";
if(true){
	var str2="world";
}

console.log(str2);		//world

위의 코드는 if문 안에서 str2를 선언했지만 if문 밖에서도 변수가 유효한 것을 알 수 있습니다.

또한 같은 이름의 변수를 여러 번 선언하여도 오류가 나지 않습니다.

var str="hello";
var str="world";
console.log(str);	//world

위와 같이 같은 이름의 변수를 두 번 선언하여도 오류가 나지 않고 값이 바뀌기만 합니다.

2.let

ES6(ECMAScript6)에서 추가된 변수 선언 방식입니다.

let은 {}(block) 단위의 scope을 가집니다.

let str='hello';  
{
  let str='world';  
  console.log(str); //world
}
console.log(str); //hello

let을 사용한다면 위와 같은 결과를 얻을 수 있습니다.

또한 var와 다르게 같은 변수명을 갖는 변수는 두 번 선언하게 되면 오류가 발생하므로 변수의 값을 바꿔주는 식으로 사용하여야 합니다.

3.const

const는 상수를 선언할 때 사용합니다.

상수는 한번 선언하면 바꿀 수 없습니다.

const str="hello";
str="world";	//error

위와 같이 상수로 선언한 str의 값을 바꾸려고 하면 error가 납니다.

또한 const의 scope은 {}(block)입니다.

[SWEA] 1240 단순 2진 암호코드-java

bellaah — Tue, 2 Jul 2019 17:24:34 +0900

문제:https://www.swexpertacademy.com/main/code/problem/problemDetail.do?contestProbId=AV15FZuqAL4CFAYD&categoryId=AV15FZuqAL4CFAYD&categoryType=CODE&&&

SW Expert Academy

SW 프로그래밍 역량 강화에 도움이 되는 다양한 학습 컨텐츠를 확인하세요!

www.swexpertacademy.com

풀이

문제는 암호 코드가 정상인지 아닌지를 판별하는 것입니다.

정상인 암호코드는 8개의 숫자를 첫 번째부터 여덟 번째로 본다면 “(홀수 자리의 합 x 3) + 짝수 자리의 합 + 검증 코드” 가 10이 되어야 합니다.

그런데 입력에 0을 포함하는 경우가 있는데 거기서 암호코드를 추출하는 방법은 이렇습니다.

0~9를 의미하는 코드 중 한 줄(7자리)의 마지막 수는 1이기때문에 한 줄씩 입력받았을 때 뒤에서부터 확인하여 1을 찾으면 그 1부터 56번째(숫자 하나 당 7자리 *8개) 전 숫자까지 잘라서 추출할 수 있습니다.

하나의 숫자를 의미하는 코드는 7개의 숫자가 5줄이지만 5줄 모두 똑같으므로 한 줄만 찾으면 나머지 코드는 확인하지 않아도 상관없기 때문에 저는 한 줄을 찾으면 나머지 부분은 검사하지 않고 바로 코드를 담아놓은 code 배열과 비교하였습니다.

code배열에는 각 인덱스에 해당하는 암호코드를 넣어놓았고 추출한 암호 코드를 8 부분으로 잘라서 code 배열에서 똑같은 코드를 찾는다면 그 인덱스 값이 코드가 가리키는 숫자입니다.

이렇게 찾게 된 8개의 숫자를 decimalNum이라는 배열에 하나씩 넣어줍니다.

그리고 암호코드가 정상인지 판별하기 위하여 위에서 본 조건대로 계산을 하고 맞다면 decimalNum에 있는 모든 수를 더하여 출력하고 그렇지 않다면 answer를 0을 넣어 0을 출력합니다.

[BOJ] 백준 2156 포도주시식-java

bellaah — Tue, 2 Jul 2019 14:39:31 +0900

문제

효주는 포도주 시식회에 갔다. 그 곳에 갔더니, 테이블 위에 다양한 포도주가 들어있는 포도주 잔이 일렬로 놓여 있었다. 효주는 포도주 시식을 하려고 하는데, 여기에는 다음과 같은 두 가지 규칙이 있다.

포도주 잔을 선택하면 그 잔에 들어있는 포도주는 모두 마셔야 하고, 마신 후에는 원래 위치에 다시 놓아야 한다.
연속으로 놓여 있는 3잔을 모두 마실 수는 없다.

효주는 될 수 있는 대로 많은 양의 포도주를 맛보기 위해서 어떤 포도주 잔을 선택해야 할지 고민하고 있다. 1부터 n까지의 번호가 붙어 있는 n개의 포도주 잔이 순서대로 테이블 위에 놓여 있고, 각 포도주 잔에 들어있는 포도주의 양이 주어졌을 때, 효주를 도와 가장 많은 양의 포도주를 마실 수 있도록 하는 프로그램을 작성하시오.

예를 들어 6개의 포도주 잔이 있고, 각각의 잔에 순서대로 6, 10, 13, 9, 8, 1 만큼의 포도주가 들어 있을 때, 첫 번째, 두 번째, 네 번째, 다섯 번째 포도주 잔을 선택하면 총 포도주 양이 33으로 최대로 마실 수 있다.

입력

첫째 줄에 포도주 잔의 개수 n이 주어진다. (1≤n≤10,000) 둘째 줄부터 n+1번째 줄까지 포도주 잔에 들어있는 포도주의 양이 순서대로 주어진다. 포도주의 양은 1,000 이하의 음이 아닌 정수이다.

출력

첫째 줄에 최대로 마실 수 있는 포도주의 양을 출력한다.

문제:https://www.acmicpc.net/problem/2156

2156번: 포도주 시식

효주는 포도주 시식회에 갔다. 그 곳에 갔더니, 테이블 위에 다양한 포도주가 들어있는 포도주 잔이 일렬로 놓여 있었다. 효주는 포도주 시식을 하려고 하는데, 여기에는 다음과 같은 두 가지 규칙이 있다. 포도주 잔을 선택하면 그 잔에 들어있는 포도주는 모두 마셔야 하고, 마신 후에는 원래 위치에 다시 놓아야 한다. 연속으로 놓여 있는 3잔을 모두 마실 수는 없다. 효주는 될 수 있는 대로 많은 양의 포도주를 맛보기 위해서 어떤 포도주 잔을 선택해야 할지 고

www.acmicpc.net

풀이

이 문제는 연속하는 잔을 두개까지만 고를 수 있기 때문에 배열을 돌면서 현재 인덱스에서 어떻게 먹는 것이 제일 많은 양을 먹는지를 생각해봐야 합니다.

우선 선택하는 방법은 3가지가 있습니다.

위의 그림이 첫 번째 경우입니다. (DP[i-1]이 최대인 경우)

위의 경우에서 DP[0]은 amount[0]이고 DP[1]은 amount[0] + amount[1]입니다.

그리고 DP[2]의 값을 정할 때 amount[2](=2)를 마시게 되면 세 번 연속으로 와인을 마실 수는 없기 때문에 10 혹은 40 중 하나를 마시고 2를 마셔야 하는데 그러면 최대 값이 안 나오기 때문에 2(amount[2])를 마시지 않고 10, 40을 마시는 경우를 택하는데 이것이 DP[1]과 같기 때문에 DP[2] = DP[1]이 됩니다.

이 경우 DP[i] = DP[i-1]이 됩니다.

위의 경우가 두번째 경우입니다. (DP[i-2]+amount[i]가 최대인 경우)

위의 경우에서 4번째 와인잔에서 최대값을 구할 때 10과 13을 마신다면 6,9를 못 마시기 때문에 최댓값이 나오지 않습니다.

이 경우 현재 자리에 있는 9를 마시고 두번째 전에 있는(i-2) 자리의 최댓값을 더하는 것(DP[i-2])이 최댓값이 나오게 됩니다.

그러므로 DP[i] = DP[i-2] + amount[i] 가 됩니다.

위의 경우가 세번째 방법입니다. (DP[i-3] + amount[i] + amount[i-1] 이 최대인 경우)

위의 경우에서 마지막 와인잔에 멈췄을 때는 현재 자리에 있는 와인잔(20)을 마시고 바로 전에 있는 와인잔(4)을 마시고 그다음 연속해서 2번 안 마시고 i-4번째의 최댓값을 더하는 경우입니다.

그런데 이 경우는 생각해보면 i-4까지 갈 필요가 없습니다.

DP[i-3]의 값이 위에서 봤던 첫 번째 경우이므로 DP[i-4]와 같기 때문입니다.

즉 DP[i] = amount[i] + amount[i-1] + DP[i-3]이 됩니다.

이 세 경우만 확인해주면 되므로 최대 값을 찾을 때 이 3가지 중 제일 큰 값을 DP[i]값으로 정해주면 답을 얻을 수 있습니다.

[BOJ] 백준 5567 결혼식-java

bellaah — Fri, 21 Jun 2019 22:20:14 +0900

문제

상근이는 자신의 결혼식에 학교 동기 중 자신의 친구와 친구의 친구를 초대하기로 했다. 상근이의 동기는 모두 N명이고, 이 학생들의 학번은 모두 1부터 N까지이다. 상근이의 학번은 1이다.

상근이는 동기들의 친구 관계를 모두 조사한 리스트를 가지고 있다. 이 리스트를 바탕으로 결혼식에 초대할 사람의 수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 상근이의 동기의 수 n (2 ≤ n ≤ 500)이 주어진다. 둘째 줄에는 리스트의 길이 m (1 ≤ m ≤ 10000)이 주어진다. 다음 줄부터 m개 줄에는 친구 관계 ai bi가 주어진다. (1 ≤ ai< bi ≤ n) ai와 bi가 친구라는 뜻이며, bi와 ai도 친구관계이다.

출력

첫째 줄에 상근이의 결혼식에 초대하는 동기의 수를 출력한다.

문제: https://www.acmicpc.net/problem/5567

풀이

문제에서 상근이의 동기는 모두 N명이고, 이 학생들의 학번은 모두 1부터 N까지이며 상근이가 1번이라고 나와있습니다.

그렇기 때문에 예제 입력에서 1 2, 1 3, 3 4, 2 3, 4 5 이렇게 주어지면 상근이(1)은 2,3과 친구이므로 2,3을 초대하고 3의 친구 4까지 초대하게 되어 2,3,4 총 3명을 초대하므로 답은 3입니다.

상근이는 친구와 친구의 친구까지만 초대하면 되기때문에 딱 두 번만 확인해보면 됩니다.

먼저 상근이에서 출발합니다.

상근이의 친구(학번=i)는 matrix[1][i] = 1입니다.

matrix[i][j] = 1이라는 것은 i와 j가 친구라는 뜻입니다.

그러므로 matrix[1][i]의 값이 1이라면 상근이의 친구이므로 초대하고 answer의 값을 1 증가시킵니다.

이미 초대했는지 안했는지를 알기 위해 invite라는 boolean array를 이용하여 i번을 초대했다면 true로 바꿔줍니다.

그리고 i번을 초대하면 i번의 친구 또한 초대하게 되므로 matrix[i][j] = 1이라면 j번을 초대합니다.

조건문에는 항상 초대하지 않은 친구라면 초대를 하고 answer의 값을 증가시켜야 하기때문에 !invite[i]를 넣어 확인을 해줍니다.

그렇게 상근이의 친구 i와 i의 친구 혹은 친구들을 초대하면 answer 값이 나옵니다.

[BOJ] 백준 9933 민균이의비밀번호-java

bellaah — Tue, 30 Apr 2019 13:38:14 +0900

문제

창영이는 민균이의 컴퓨터를 해킹해 텍스트 파일 하나를 자신의 메일로 전송했다. 파일에는 단어가 한 줄에 하나씩 적혀있었고, 이 중 하나는 민균이가 온라인 저지에서 사용하는 비밀번호이다.

파일을 살펴보던 창영이는 모든 단어의 길이가 홀수라는 사실을 알아내었다. 그리고 언젠가 민균이가 이 목록에 대해서 얘기했던 것을 생각해냈다. 민균이의 비밀번호는 목록에 포함되어 있으며, 비밀번호를 뒤집어서 쓴 문자열도 포함되어 있다.

예를 들어, 민균이의 비밀번호가 "tulipan"인 경우에 목록에는 "napilut"도 존재해야 한다. 알 수 없는 이유에 의해 모두 비밀번호로 사용 가능하다고 한다.

민균이의 파일에 적혀있는 단어가 모두 주어졌을 때, 비밀번호의 길이와 가운데 글자를 출력하는 프로그램을 작성하시오.

입력

첫째 줄에 단어의 수 N (2 ≤ N ≤ 100)이 주어진다. 다음 N개 줄에는 파일에 적혀있는 단어가 한 줄에 하나씩 주어진다. 단어는 알파벳 소문자로만 이루어져 있으며, 길이는 2보다 크고 14보다 작은 홀수이다.

출력

첫째 줄에 비밀번호의 길이와 가운데 글자를 출력한다. 항상 답이 유일한 경우만 입력으로 주어진다.

문제: https://www.acmicpc.net/problem/9933

9933번: 민균이의 비밀번호

문제 창영이는 민균이의 컴퓨터를 해킹해 텍스트 파일 하나를 자신의 메일로 전송했다. 파일에는 단어가 한 줄에 하나씩 적혀있었고, 이 중 하나는 민균이가 온라인 저지에서 사용하는 비밀번호이다. 파일을 살펴보던 창영이는 모든 단어의 길이가 홀수라는 사실을 알아내었다. 그리고 언젠가 민균이가 이 목록에 대해서 얘기했던 것을 생각해냈다. 민균이의 비밀번호는 목록에 포함되어 있으며, 비밀번호를 뒤집어서 쓴 문자열도 포함되어 있다. 예를 들어, 민균이의 비밀번호가

www.acmicpc.net

풀이

민균이의 비밀번호는 주어진 단어 중 하나입니다.

민균이의 비밀번호를 알 수 있는 단서는 비밀번호가 "tulipan"라면 문자열이 거꾸로 된 "napilut"도 존재한다는 것입니다.

문제에서 비밀번호는 항상 유일할 경우로만 입력을 주겠다고 나와있기 때문에 어떠한 문자열의 반대로 된 문자열이 있으면 그것이 답(비밀번호)라고 할 수 있습니다.

하지만 예외를 생각해봐야 합니다.

답은 팰린드롬 문자열일 수도 있습니다. 팰린드롬의 정의에 대해서는 아래 링크를 남겨놨으니 참고하시길 바랍니다.

팰린드롬일 경우 문자열은 "aba"이런 식으로 한 번만 주어지는데 답은 유일하기 때문에 팰린드롬 문자열이 주어진 경우 다른 문자열이 팰린드롬이거나 서로 반대되는 문자열 두 개가 존재할 수는 없습니다.

저는 한줄씩 단어를 읽고 tmp라는 변수에 단어가 거꾸로 된 형태로 저장 한 뒤 tmp와 나와 같다면 (=팰린드롬이라면) 답으로 판단하고 혹은 여태껏 들어온 문자열의 반대 형태와 현재 읽은 arr[i]가 같다면 서로 거꾸로 된 상태이므로 그것을 답으로 판단합니다.

문자열은 모두 홀수이므로 전체길이/2를 하면 항상 소수점이 생기는데 int로 자동 변환되면서 가운데 문자열을 출력하게 됩니다.

*팰린드롬이란? https://m.blog.naver.com/PostView.nhn?blogId=itu2004&logNo=40051349015&proxyReferer=https%3A%2F%2Fwww.google.com%2F

[BOJ] 백준 2252 줄세우기-java

bellaah — Thu, 21 Mar 2019 18:55:44 +0900

문제

N명의 학생들을 키 순서대로 줄을 세우려고 한다. 각 학생의 키를 직접 재서 정렬하면 간단하겠지만, 마땅한 방법이 없어서 두 학생의 키를 비교하는 방법을 사용하기로 하였다. 그나마도 모든 학생들을 다 비교해 본 것이 아니고, 일부 학생들의 키만을 비교해 보았다.

일부 학생들의 키를 비교한 결과가 주어졌을 때, 줄을 세우는 프로그램을 작성하시오.

입력

첫째 줄에 N(1≤N≤32,000), M(1≤M≤100,000)이 주어진다. M은 키를 비교한 회수이다. 다음 M개의 줄에는 키를 비교한 두 학생의 번호 A, B가 주어진다. 이는 학생 A가 학생 B의 앞에 서야 한다는 의미이다.

학생들의 번호는 1번부터 N번이다.

출력

첫째 줄부터 앞에서부터 줄을 세운 결과를 출력한다. 답이 여러 가지인 경우에는 아무거나 출력한다.

문제:https://www.acmicpc.net/problem/2252

풀이

이 문제는 학생들의 키 순서를 전체적으로는 알 수 없고 부분적인 정보만을 제공합니다.

그렇기 때문에 답은 여러 가지가 나올 수도 있습니다.

일단 확실한 것은 두명의 학생의 키를 비교한 정보들만 알 수 있으므로 만약 어떤 학생은 다른 학생보다 작다는 정보를 받지 않았으면 그 학생은 제일 앞에 서도 된다는 뜻입니다.

두 번째 줄부터 m+1번째 줄까지 받은 정보 중에 예 씨로 나온 1 3이라는 입력이 들어오면 1이라는 학생은 3이라는 학생보다 앞에서야 한다는 뜻인데 반대로 3이라는 학생은 1이라는 학생의 뒤에 서야 하기 때문에 (바로 뒤가 아니어도 뒤에 서면 됩니다.) 1이라는 학생이 먼저 앞에 서야 줄을 설 수 있습니다.

그러한 점을 이용하여 a라는 학생의 뒤에 서야 하는 학생을 인접리스트로 나타냈습니다.

graph라는 리스트의 a번째에는 인접리스트가 연결되어 있는데 그 인접 리스트엔 a번째 학생의 뒤에 서야 하는 학생들의 정보를 넣어놓습니다.

그리고 degree라는 배열은 a라는 학생의 앞에 몇명의 학생이 있어야 하는지를 나타내는데 a라는 학생이 b,c라는 학생 뒤에 서야 한다는 입력을 받았다면 b와 c라는 학생이 줄을 서면 그때 degree를 하나씩 감소하여 2였던 degree[a]가 두 번 1씩 감소하여 0이 됩니다.

그렇게 되면 a라는 학생은 줄을 서도 되는것이기때문에 그런 식으로 degree배열의 값으로 앞에부터 줄을 세워도 되는지 확인합니다.

degree가 0인 학생부터 차례대로 queue에 추가한 뒤 그 학생의 degree는 -1로 바꿔주어 이미 줄을 섰다고 표시해줍니다.

또한 a라는 학생이 큐에 들어간 순간(줄을 서면) a라는 학생보다 뒤에 서야 하는 학생들은 자신의 앞에 서야 하는 학생 한 명이 줄을 섰기 때문에 degree의 값을 1씩 줄여줘야 하고 줄인 값이 0이면 그 학생의 번호도 큐에 추가하면서 큐가 빌 때까지 반복합니다.

큐가 비었다는 것은 모든 학생의 degree가 0이되어 큐에 들어가고 출력했다는 뜻으로 프로그램이 종료됩니다.

[BOJ] 백준 2583 영역구하기-java

bellaah — Mon, 18 Mar 2019 22:55:40 +0900

문제

눈금의 간격이 1인 M×N(M,N≤100)크기의 모눈종이가 있다.

이 모눈종이 위에 눈금에 맞추어 K개의 직사각형을 그릴 때, 이들 K개의 직사각형의 내부를 제외한 나머지 부분이 몇 개의 분리된 영역으로 나누어진다.

예를 들어 M=5, N=7 인 모눈종이 위에 <그림 1>과 같이 직사각형 3개를 그렸다면, 그 나머지 영역은 <그림 2>와 같이 3개의 분리된 영역으로 나누어지게 된다.

M, N과 K 그리고 K개의 직사각형의 좌표가 주어질 때, K개의 직사각형 내부를 제외한 나머지 부분이 몇 개의 분리된 영역으로 나누어지는지, 그리고 분리된 각 영역의 넓이가 얼마인지를 구하여 이를 출력하는 프로그램을 작성하시오.

입력

첫째 줄에 M과 N, 그리고 K가 빈칸을 사이에 두고 차례로 주어진다.

M, N, K는 모두 100 이하의 자연수이다.

둘째 줄부터 K개의 줄에는 한 줄에 하나씩 직사각형의 왼쪽 아래 꼭짓점의 x, y좌표값과 오른쪽 위 꼭짓점의 x, y좌표값이 빈칸을 사이에 두고 차례로 주어진다.

모눈종이의 왼쪽 아래 꼭짓점의 좌표는 (0,0)이고, 오른쪽 위 꼭짓점의 좌표는(N,M)이다. 입력되는 K개의 직사각형들이 모눈종이 전체를 채우는 경우는 없다.

출력

첫째 줄에 분리되어 나누어지는 영역의 개수를 출력한다. 둘째 줄에는 각 영역의 넓이를 오름차순으로 정렬하여 빈칸을 사이에 두고 출력한다.

문제:https://www.acmicpc.net/problem/11403

풀이

먼저 색칠할 사각형의 좌표를 입력받기 때문에 사각형을 true로 색칠(?)해 줍니다.

그 후 색칠안된(flase인)부분이 몇개의 영역인지 찾고 크기를 구하면 되는데요.

저는 BFS를 이용했습니다.

false인 좌표를 찾으면 BFS라는 메소드를 호출하여 인자로 좌표값을 넘겨줍니다.

그러면 메소드에선 상하좌우를 살펴 false인 좌표가 있다면 큐에 추가하고 추가했으므로 그 부분은 true로 바꿔줍니다.

마지막에 큐에서 뺀 좌표값을 다시 메소드에 인자로 넣어 재귀적으로 호출합니다.

결국 큐가 빈 상태일때까지 하다가 큐가 비었다면 메소드는 종료되고 전역변수 count로 큐에 넣고 뺀 횟수를 세어 count값을 리스트에 넣습니다.

이렇게 하면 빈 좌표 하나를 발견하였을 때 BFS를 통해 영역의 크기를 구하고 또 다른 빈 공간을 찾는 식으로 프로그램이 돌아가고 결과값을 출력합니다.

[BOJ] 백준 11403 경로찾기-java

bellaah — Tue, 12 Mar 2019 00:45:42 +0900

문제

가중치 없는 방향 그래프 G가 주어졌을 때, 모든 정점 (i, j)에 대해서, i에서 j로 가는 경로가 있는지 없는지 구하는 프로그램을 작성하시오.

입력

첫째 줄에 정점의 개수 N (1 ≤ N ≤ 100)이 주어진다. 둘째 줄부터 N개 줄에는 그래프의 인접 행렬이 주어진다. i번째 줄의 j번째 숫자가 1인 경우에는 i에서 j로 가는 간선이 존재한다는 뜻이고, 0인 경우는 없다는 뜻이다. i번째 줄의 i번째 숫자는 항상 0이다.

출력

총 N개의 줄에 걸쳐서 문제의 정답을 인접행렬 형식으로 출력한다. 정점 i에서 j로 가는 경로가 있으면 i번째 줄의 j번째 숫자를 1로, 없으면 0으로 출력해야 한다.

문제:https://www.acmicpc.net/problem/11403

풀이

반향그래프의 한 점에서 임의의 점을 갈 수 있는 경로가 있는지 판별하는 문제입니다.

한 정점에서 갈 수 있는 길은 인접행렬형태로 입력받기 때문에 정점 a에서 갈 수 있는 모든 정점을 찾으려고 할 때 a에서 연결된 정점이 c,d라고 가정해봅시다.

a는 a와 연결된 c,d에 갈 수 있고 c와 연결된 e라는 점에도 갈 수 있습니다.

a-c-e 이러한 경로가 존재하기 때문이죠.

이러한 방법으로 갈 수 있는 정점을 모두 찾으려고 할 때 너비 우선 탐색(BFS, Breadth-First Search) 알고리즘을 쓰는 방법이 있습니다.

너비우선 탐색에 대한 설명은 아래 참고할만한 블로그 링크를 남기겠습니다.

일단 한 정점에서 갈 수 있는 경로가 존재하는 정점들을 인접행렬에 1로 표시해야 하기때문에 한 행씩 접근합니다.

한 행에 있는 1의 개수는 그 점과 인접한 정점의 개수이므로 그 정점을 큐에 넣습니다.

그 후 큐에 있는 데이터를 빼서 BFS 메소드에 넣는데 뺀 데이터의 행을 검사해서 1인 정점을 또 큐에 넣는 작업입니다.

이렇게 결국 한 정점에서 갈 수 있는 경로를 다 찾는데 만약 찾은 정점이 이미 i라는 정점에서 갈 수 있는 점(인접행렬에 1이라고 표시)이라고 표시되어 있으면 그 정점은 큐에 넣지 않습니다.

큐에 넣게 되면 갔던 경로를 무한히 돌게 되어 무한루프를 돌 수 있습니다.

그렇게 모든 정점에 대해서 BFS를 하면 경로찾기 행렬이 완성됩니다.

BFS란? https://gmlwjd9405.github.io/2018/08/15/algorithm-bfs.html

[BOJ] 백준 15954 인형들(카카오코드페스티벌)-java

bellaah — Sun, 10 Mar 2019 18:13:41 +0900

문제

카카오프렌즈 스토어에서는 N종류의 인형을 팔고 있다.

N개의 인형들 중에서는 잘 팔리는 인형과 그렇지 않은 인형들이 섞여 있어서 잘 팔리는 인형은 상대적으로 사람들이 많이 볼 수 있는

곳에 배치하고, 잘 팔리지 않는 인형은 상대적으로 사람들이 적게 볼 수 있는 곳에 배치한다. 그러므로 배치된 곳이 가까운 두 인형은

상대적으로 판매량이 비슷하다고 할 수 있다. 좋은 배치를 정하기 위해서 어느 날, 여러 명의 사람들을 대상으로 인형의 선호도를 조

사하였다. 조사 결과 각 인형에 대해서 선호하는 사람의 수를 모두 구하였고, 그에 따라 인형의 배치를 정하려고 한다.

카카오프렌즈 스토어를 관리하는 브라이언은 어떠한 특정한 곳에 인형들을 배치하고자 하는데, 그곳에 인형들을 선택하는 방법은 다음과 같다:

먼저 비슷한 인형이 가깝게 위치하도록 서로 다른 N개의 인형을 종류당 한 개씩 일렬로 배치한다.
그 후, 선호하는 사람의 수의 표준편차가 최소가 되는, K개 이상의 연속된 위치에 있는 인형들을 선택하여 그들을 같은 곳에 배치한다.

위의 방법으로 인형들을 선택했을 때, 선택된 인형들의 선호하는 사람의 수의 표준편차를 구하여라.

N개의 수 a1, a2, …, aN이 주어져 있을 때, 통계학에서 (산술) 평균은 (a1 + a2 + … + aN) / N 으로 정의한다. 이를 m으로 정의하자.

또한, 분산은 ((a1 - m)2 + (a2 - m)2 + … + (aN - m)2) / N으로 정의하고, 표준 편차는 분산의 음이 아닌 제곱근으로 정의한다.

입력

첫 번째 줄에 N과 K가 주어진다. N은 1 이상 500 이하의 정수이고, K는 1 이상 N 이하의 정수이다.

두 번째 줄에는 N개의 정수가 입력되며, 이는 인형이 일렬로 나열된 순서대로 인형을 선호하는 사람의 수이다.

각 수는 모두 106 이하의 음이 아닌 정수이다.

출력

선택된 인형들을 선호하는 사람의 수의 표준 편차를 출력한다. 출력한 결과와 실제 답을 비교하였을 때의 상대/절대 오차가 10-6 이하

인 경우에만 정답으로 인정한다.

문제:https://www.acmicpc.net/problem/15954

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
import java.io.*;
import java.util.*;
 
public class doll {
 
    public static void main(String[] args) throws IOException {
        Scanner sc = new Scanner(System.in);
        BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
        BufferedWriter bw = new BufferedWriter(new OutputStreamWriter(System.out));
        StringTokenizer st = new StringTokenizer(br.readLine());
        int n = Integer.parseInt(st.nextToken()); 
        int k = Integer.parseInt(st.nextToken());
        int[] arr = new int[n]; // 인형을 선호하는 사람의 수를 저장할 배열
        double variance = 0, tmp = 0, average = 0, stdDeviation = 0; // 분산,평균,표준편차
        double min = 10000000; 
 
        st = new StringTokenizer(br.readLine()); 
        for (int i = 0; i < n; i++) { 
            arr[i] = Integer.parseInt(st.nextToken());
        }
        for (int i = 0; i <= n - k; i++) {
            int count = k; // k개 이상이기때문에 k개부터 하나씩 늘려가면서 표준편차가 최소일 때를 찾아야 함
            while (i + count <= n) { // 배열의 끝까지 연속할 경우를 확인해야하므로 i+count가 n보다 작거나 같을때까지만 반복
                tmp = average = variance = stdDeviation = 0; //
                for (int j = 0; j < count; j++) {
                    tmp += arr[i + j]; 
                }
                average = tmp / count; // 평균 구하기
                tmp = 0;
                for (int j = 0; j < count; j++) { // 분산구하기
                    tmp += (arr[i + j] - average) * (arr[i + j] - average); 
                }
                variance = tmp / count; // 분산 구하기
                stdDeviation = Math.sqrt(variance); // 표준 편차 구하는 함수
                min = Math.min(min, stdDeviation); 
                count++;
            }
        }
        System.out.println(String.format("%.12f", min)); 0
 
    }
 
}
 
Colored by Color Scripter
cs

풀이

이 문제는 n과 k가 주어졌을 때 n개의 인형에 대학 각각의 선호도를 데이터로 입력받고 그 선호도에 대해서 적어도 k개 이상 연속하는 데이터중에 표준편차가 최소일 때를 찾아야 하는 문제입니다. k개로 고정이 되었다면 처음부터 한개씩 뒤로 이동하면서 연속하는 부분집합을 구해서 비교하면 간단했겠지만 k개 이상이므로 첫번째 데이터부터 연속할 때 k개,k+1개,k+2개,..,n개 이런식으로 항상 확인 한 후 두번째 데이터 부터 k개,k+1개... 이렇게 확인하는 문제입니다.

[Ajax] 회원가입 사이트 개발-JSP

bellaah — Thu, 13 Dec 2018 15:56:57 +0900

JSP에서 AJAX를 이용하여 회원등록 페이지를 만들어보겠습니다.

1. 프로젝트 구성

프로젝트 구성은 이렇게 됩니다.

index라는 jsp파일 하나와 java 서블릿클래스 2개, db연동을 위한 DAO클래스 1개, User라는 자바클래스 하나로 이루어져있습니다.

부트스트랩을 다운받아서 webContent밑에 css, fonts, js파일을 넣어주었습니다.

2.프로젝트 실행화면 및 동작

프로젝트를 완성하면 이런 웹페이지가 뜹니다.

페이지에는 회원의 이름, 나이, 성별, 이메일이 나와있습니다.

그리고 그 아래에는 회원 등록 양식이 있고 그 부분을 작성해서 등록버튼을 누르면 바로 위에 회원 목록에 추가되는것을 볼 수 있습니다.

Ajax를 이용하여 화면이 새로고침되지 않아도 바로 바뀌는 것을 확인할 수 있습니다.

3. User.java

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

package user;
 
public class User {
    String userName;   
    int userAge;
    String userGender;
    String userEmail;
    public String getUserName() {
        return userName;
    }
    public void setUserName(String userName) {
        this.userName = userName;
    }
    public int getUserAge() {
        return userAge;
    }
    public void setUserAge(int userAge) {
        this.userAge = userAge;
    }
    public String getUserGender() {
        return userGender;
    }
    public void setUserGender(String userGender) {
        this.userGender = userGender;
    }
    public String getUserEmail() {
        return userEmail;
    }
    public void setUserEmail(String userEmail) {
        this.userEmail = userEmail;
    }
}
 
Colored by Color Scripter

cs

우선 ajax라는 이름의 데이터베이스를 생성하고 user라는 테이블을 만듭니다.

그리고 userName, userAge, userGender, userEmail 이라는 필드를 만들고 user.java라는 클래스안에도 데이터베이스의 필드들과 같은 필드 4개와 getter,setter 함수를 만들어줍니다.

4. userDAO.java

DAO는 Data Access Object의 약자로 db와 연동하는 클래스를 말합니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65

package user;
 
import java.sql.Connection;
import java.sql.DriverManager;
import java.sql.PreparedStatement;
import java.sql.ResultSet;
import java.util.ArrayList;
 
public class UserDAO {
    private Connection conn;
    private PreparedStatement pstmt;
    private ResultSet rs;
    
    public UserDAO() {
    try {
        String dbURL="jdbc:mysql://localhost:3306/ajax?serverTimezone=UTC";    //database URL
        String dbID="db아이디";        //자신의 db아이디
        String dbPassword="비밀번호";        //db비밀번호
        Class.forName("com.mysql.cj.jdbc.Driver");
        conn=DriverManager.getConnection(dbURL,dbID,dbPassword);
    }
    catch(Exception e) {
        e.printStackTrace();    
    }
    }
    
    public ArrayList<User> search(String userName){
        String SQL= "SELECT * FROM USER WHERE userName LIKE ?";    //LIKE는 username이랑 데이터랑 정확히 일치하지 않아도 검색어가 데이터에 포함된다면 그 데이터를 불러옴
        ArrayList<User> userList = new ArrayList<User>();
        try {
            pstmt = conn.prepareStatement(SQL);
            pstmt.setString(1,"%"+userName+"%");
            rs=pstmt.executeQuery();
            while(rs.next()) {
                User user= new User();    //User 인스턴스를 생성해서
                user.setUserName(rs.getString(1));    //정보를 하나씩 가져옴
                user.setUserAge(rs.getInt(2));
                user.setUserGender(rs.getString(3));
                user.setUserEmail(rs.getString(4));
                userList.add(user);
            }
        }
        catch(Exception e){
            e.printStackTrace();
        }
        return userList;
    }
    
    public int register(User user) {
        String SQL="INSERT INTO USER VALUES(?, ?, ?, ?)";    //입력받은 user 정보를 db에 저장함
        try {
            pstmt= conn.prepareStatement(SQL);
            pstmt.setString(1, user.getUserName());
            pstmt.setInt(2, user.getUserAge());
            pstmt.setString(3, user.getUserGender());
            pstmt.setString(4, user.getUserEmail());
            return pstmt.executeUpdate();
        }catch(Exception e) {
            e.printStackTrace();
        }
        return -1;        //데이터베이스 오류
    }
 
}
 
Colored by Color Scripter

cs

제일 먼저 데이터베이스와 연동을 시켜줍니다.

search 메소드는 검색창에 검색어를 입력하면 그 검색어를 userName으로 받아와서 userName을 포함하는 이름을 가진 user정보를 가져와서 userList에 넣고 리턴합니다.

5. UserSearchServlet.java

UserSearchServlet클래스는 검색기능을 실행해주는 컨트롤러라고 할 수 있습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43

package user;
 
import java.io.IOException;
import java.util.ArrayList;
 
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
/**
 * Servlet implementation class UserSearchServlet
 */
@WebServlet("/UserSearchServlet")
public class UserSearchServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
  
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String userName = request.getParameter("userName");
        response.getWriter().write(getJSON(userName));
    }
    
    public String getJSON(String userName) {
        if(userName == null) userName="";
        StringBuffer result = new StringBuffer("");    //result라는 변수 생성
        result.append("{\"result\":[");        //result에 문자열을 담음
        UserDAO userDAO=new UserDAO();
        ArrayList<User> userList = userDAO.search(userName);    //검색할 userName을 search 메소드에 넣고 리턴값을 저장함
        for(int i=0; i<userList.size(); i++) {    //검색에 해당되는 userList의 길이만큼
            result.append("[{\"value\": \""+userList.get(i).getUserName()+"\"},");    //해당 user들의 정보를 result에 넣음
            result.append("{\"value\": \""+userList.get(i).getUserAge()+"\"},");
            result.append("{\"value\": \""+userList.get(i).getUserGender()+"\"},");
            result.append("{\"value\": \""+userList.get(i).getUserEmail()+"\"}],");
        }
        result.append("]}");
        return result.toString();
    }
 
}
 
Colored by Color Scripter

cs

검색어를 입력하면 getJSON이라는 메소드가 검색어에 해당하는 user의 정보를 result에 추가하고 해당하는 user들의 정보를 다 넣었으면 문자열을 닫아준 뒤 문자열을 리턴해줍니다.

6. UserRegisterServlet.java

UserRegisterServlet클래스는 회원등록기능을 실행해주는 컨트롤러 클래스입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38

package user;
 
import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
 
@WebServlet("/UserRegisterServlet")
public class UserRegisterServlet extends HttpServlet {
    private static final long serialVersionUID = 1L;
       
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");
        String userName = request.getParameter("userName");
        String userAge = request.getParameter("userAge");
        String userGender = request.getParameter("userGender");
        String userEmail = request.getParameter("userEmail");
        response.getWriter().write(register(userName,userAge,userGender,userEmail)+"");    //문자열로 바꿔주기 위해 ""를 붙여줌
    }
    public int register(String userName,String userAge, String userGender,String userEmail) {
        User user = new User();    //User 인스턴스 생성
        try {
            user.setUserName(userName);
            user.setUserAge(Integer.parseInt(userAge));
            user.setUserGender(userGender);
            user.setUserEmail(userEmail);
        }
        catch(Exception e) {
            return 0;
        }
        return new UserDAO().register(user);
    }
 
}
 
Colored by Color Scripter

cs

register라는 메소드가 정보들을 파라미터로 받아서 user를 생성하고 정보를 넣어서 UserDAO클래스의 register메소드의 인자로 넘겨줍니다.

7. index.jsp

index 파일은 페이지의 화면을 구성하는 html과 script가 들어가는 jsp파일입니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137

<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%
    request.setCharacterEncoding("utf-8");
%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/bootstrap.css">
<title>JSP AJAX</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="js/bootstrap.js"></script>
<script type="text/javascript">
    var searchRequest= new XMLHttpRequest(); //ajax를 쓰기 위해 인스턴스 생성
    var registerRequest= new XMLHttpRequest();
    function searchFunction(){
        searchRequest.open("Post","./UserSearchServlet?userName="+ encodeURIComponent(document.getElementById("userName").value),true); //이름을 입력받으면 userName에서 그 값을 검색하기 위해 넘겨줌
        searchRequest.onreadystatechange =searchProcess; //어떠한 이벤트(변화)가 나타났을 때 바로  알려줌
        searchRequest.send(null);
    }
    function searchProcess(){
        var table = document.getElementById("ajaxTable"); //html에 ajaxTable이라는 아이디를 갖는 tbody를 가져옴
        table.innerHTML =""; //빈공간으로 초기화
        if(searchRequest.readyState == 4 && searchRequest.status == 200){    //성공적으로 통신이 된다면 
            var object = eval('('+searchRequest.responseText+')');
            var result = object.result;        //servlet에서 배열을 담는 result를 받아옴 
            for(var i=0; i<result.length; i++){        //넘어온 result의 길이까지 반복
                var row = table.insertRow(0);         //테이블에 행을 추가
                for(var j=0; j<result[i].length; j++){    //result 배열에는 userNamae,userAge,userGender... 가 들어있으므로 하나씩 접근
                    var cell = row.insertCell(j);    //위에서 만들어진 행에 하나의 셀을 추가
                    cell.innerHTML=result[i][j].value;    //innerHTML에 값을 표시
                }
            }
        }
    }
    function registerFunction(){
        registerRequest.open("Post","./UserRegisterServlet?userName="+ encodeURIComponent(document.getElementById("registerName").value) +
                            "&userAge="+encodeURIComponent(document.getElementById("registerAge").value)+
                            "&userGender="+encodeURIComponent($('input[name=registerGender]:checked').val())+    //userGender는 name값으로 받았기때문에 JQuery를 사용해서 받아옴
                            "&userEmail="+encodeURIComponent(document.getElementById("registerEmail").value),true); //회원등록을 위해 입력받은 모든 값을 넘겨줌
        registerRequest.onreadystatechange =registerProcess; 
        registerRequest.send(null);
    }
    function registerProcess(){
        if(registerRequest.readyState == 4 && registerRequest.status == 200){    //성공적으로 통신이 된다면
            var result = registerRequest.responseText;
            if(result!=1){    //잘못되었다면
                alert('등록에 실패했습니다.');
            }
            else{
                var userName=document.getElementById("userName");
                var registerName=document.getElementById("registerName");
                var registerAge=document.getElementById("registerAge");
                var registerEmail=document.getElementById("registerEmail");
                userName.value ="";        //정보가 성공적으로 회원등록이 되었다면 모든 값을 초기화해줘서 input에 입력한 값을 비워줌
                registerName.value ="";
                registerAge.value ="";
                registerEmail.value ="";
                searchFunction();
            }
        }
        
    }
    window.onload =function(){
        searchFunction();
    }
</script>
</head>
<body>
    <br>
        <div class="container">
            <div class="form-gorup row pull-right">
                <div class="col-xs-8">
                    <input class="form-control" id="userName" onkeyup="searchFunction()" type="text" size="20">
                </div>
                <div class="col-xs-2">
                    <button class="btn btn-primary" onclick="searchFunction();" type="button">검색</button><br>
                </div>
            </div>
            <table class="table" style="text-align:center; border: 1px solid #dddddd">
            <thred>
                <tr>
                    <th style="background-color: #fafafa; text-align:center;">이름</th>
                    <th style="background-color: #fafafa; text-align:center;">나이</th>
                    <th style="background-color: #fafafa; text-align:center;">성별</th>
                    <th style="background-color: #fafafa; text-align:center;">이메일</th>
                </tr>
            </thred>
            <tbody id="ajaxTable">
                <tr>
                    
                </tr>
            </tbody>
        </div>
        <div class="container">
            <table class="table" style="text-align:center; border: 1px solid #dddddd">
                <thred>
                    <tr>
                        <th colspan="2" style="background-color: #fafafa; text-align:center;">회원 등록 양식</th>
                    </tr>
                </thred>
                <tbody>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>이름</h5></td>
                        <td><input class="form-control" type="text" id="registerName" size="20"></td>
                    </tr>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>나이</h5></td>
                        <td><input class="form-control" type="text" id="registerAge" size="20"></td>
                    </tr>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>성별</h5></td>
                        <td>
                            <div class="form-group" style="text-align:center; margin:0 auto;">
                                <div class="btn-group" data-toggle="buttons">
                                    <label class="btn btn-primary active">
                                    <input type="radio" name="registerGender" autocomplete="off" value="남자" checked>남자
                                    </label>
                                    <label class="btn btn-primary">
                                    <input type="radio" name="registerGender" autocomplete="off" value="여자">여자
                                    </label>
                                </div>
                        </td>
                    </tr>
                    <tr>
                        <td style="background-color:#fafafa; text-align:center;"><h5>이메일</h5></td>
                        <td><input class="form-control" type="text" id="registerEmail" size="20"></td>
                    </tr>
                    <tr>
                        <td colspan="2"><button class="btn btn-primary pull-right" onclick="registerFunction();" type="button">등록</button></td>
                    </tr>
                </tbody>
            </table>
        </div>
</body>
</html>
Colored by Color Scripter

cs

페이지를 구성하는 html이 있고 Ajax를 사용하기 위해 XMLHttpRequest인스턴스를 생성하였습니다.

코드에 대한 설명은 주석으로 나와있습니다.

이렇게 모든파일을 만들면 처음에 본것같은 웹페이지가 나오고 검색하면 새로고침하지 않아도 검색어를 포함하는 user의 정보가 뜰 것입니다.

그리고 회원등록버튼을 누르면 바로 위에 회원목록에 추가되는 것을 확인할 수 있습니다.

이렇게 Ajax를 이용한 동적인 웹 개발에 대해서 알아보았습니다.

[Ajax] 비동기식 처리 모델

bellaah — Thu, 6 Dec 2018 15:25:12 +0900

1. Ajax란

Ajax(Asynchronous JavaScript and XML)는 자바스크립트를 이용해서 비동기적(Asynchronous)으로 서버와 브라우저가 데이터를 교환할 수 있는 통신 방식을 의미합니다.

서버로부터 웹페이지가 반환되면 화면 전체를 갱신해야 하는데 페이지 일부만을 갱신하고도 동일한 효과를 주는 것이 Ajax입니다.

Ajax는 페이지 전체를 로드하여 렌더링하지 않아도 일부만 로드하면 부드러운 화면 표시가 가능합니다.

비동기식 처리 모델은 작업을 병렬적으로 수행합니다.

수행중인 작업이 종료되지 않았어도 다음작업이 대기하지 않고 실행할 수 있습니다.

서버에서 데이터를 가져와 화면에 표시하는 작업을 수행하는 경우 서버에 데이터를 요청한 후 서버로부터 데이터가 전달될 때까지 대기하지 않고 다음 작업을 수행합니다.

이 후 서버로부터 데이터가 오면 이벤트가 발생하고 이벤트 핸들러가 데이터를 가지고 작업을 계속해서 수행합니다.

2. Ajax 요청 및 응답 처리

브라우저는 XMLHttpRequest 인스턴스를 이용하여 Ajax 요청을 생성합니다. 서버가 브라우저의 요청에 대해 응답을 주면 XMLHttpRequest 인스턴스가 결과를 처리합니다.

1
2

var searchRequest= new XMLHttpRequest();     //XMLHttpRequest 인스턴스 생성
searchRequest.onreadystatechange =searchProcess;    //어떠한 이벤트(변화)가 나타났을 때 searchProcess라는 함수를 호출함 

cs

XMLHttpRequest 인스턴스를 생성하고 searchRequest라는 인스턴스가 onreadystatechange라는 메소드로 요청을 서버에 전달합니다.

즉, XMLHttpRequest.onreadystatechange는 XMLHttpRequest.readyState 프로퍼티가 변경될 때마다 호출되는 이벤트핸들러입니다.

XMLHttpRequest 객체는 response가 클라이언트에 도달했는지를 추적할 수 있는 프로퍼티를 제공합니다.

이 프로퍼티가 XMLHttpRequest.readystate인데 이 값이 4일 경우 정상적으로 Response가 돌아온 경우입니다.

readXMLHttpRequest.readyState의 값은 아래와 같습니다.

Value	State	Description
0	UNSENT	XMLHttpRequest.open() 메소드 호출 이전
1	OPENED	XMLHttpRequest.open() 메소드 호출 완료
2	HEADERS_RECEIVED	XMLHttpRequest.send() 메소드 호출 완료
3	LOADING	서버 응답 중(XMLHttpRequest.responseText 미완성 상태)
4	DONE	서버 응답 완료

XMLHttpRequest 의 readyState가 4인 경우, 서버 응답이 완료된 상태입니다.

이 후 XMLHttpRequest가 200이면XMLHttpRequest.responseText를 취득합니다.

XMLHttpRequest.responseText에는 서버가 전송된 데이터가 담겨있습니다.

3. JSP에서 Ajax 구현

JSP에서 Ajax를 구현하여 회원정보를 나타내고 검색창에 이름의 일부만 검색해도 즉각적으로 검색어가 포함된 회원을 바로 보여주는 기능을 구현한 것 중 일부 ajax 기능을 살펴보겠습니다.

일단 DB와의 연동도 필요하고 java클래스와 jsp파일이 필요한데 DB연동은 이 전 포스팅에 설명되어있고 다른 java클래스는 잠시 건너뛰고 ajax위주로 설명하겠습니다.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

var searchRequest= new XMLHttpRequest(); 
var registerRequest= new XMLHttpRequest();
 
function searchFunction(){
    searchRequest.open("Post","./UserSearchServlet?userName="+ encodeURIComponent(document.getElementById("userName").value),true);
    searchRequest.onreadystatechange =searchProcess;
    searchRequest.send(null);
}
function searchProcess(){
    var table = document.getElementById("ajaxTable");
    table.innerHTML ="";
    if(searchRequest.readyState == 4 && searchRequest.status == 200){
        var object = eval('('+searchRequest.responseText+')');
        var result = object.result;
        for(var i=0; i<result.length; i++){
            var row = table.insertRow(0);
            for(var j=0; j<result[i].length; j++){
                var cell = row.insertCell(j);
                cell.innerHTML=result[i][j].value;
            }
        }
    }
}
Colored by Color Scripter

cs

jsp 파일의 script부분의 일부입니다.

일단 XMLHttpRequest 인스턴스를 생성합니다.

그리고 open()과 send()를 사용하여 요청을 할 수 있습니다.

-open() 메소드 : 첫번째에 들어가는 파라미터는 HTTP 요구 방식으로 GET, POST, HEAD 중 하나이거나 서버에서 지원하는 다른 방식입니다.두번째파라미터는 요구하고자하는 URL입니다. 세번째 파라미터는 요구가 비동기식으로 수행될 지를 결정합니다. true이면 비동기적으로 false이면 동기적으로 작동합니다.

-send() 메소드 : POST 방식으로 요구한 경우 서버로 보내고 싶은 어떠한 데이터라도 가능합니다. 데이터는 서버에서 쉽게 parse할 수 있는 형식이여야 합니다.

이벤트가 발생하면 searchProcess라는 함수를 호출합니다.

table이라는 변수는 html에 있는 ajaxTable을 가져와서 그 위에 데이터를 보여주게 합니다.

readyState가 4이면 서버응답완료 상태이고 status가 200이면 정상적으로 처리되었다는 것이기때문에 아래의 코드를 실행시킵니다.

이 후에 화면에 result로 데이터를 받아와서 화면에 보여주게 됩니다.

이렇게 간단하게 Ajax에 대해 알아보고 구현방법에 대해서 살펴보았습니다.

[BOJ] 백준 10250 ACM호텔-java

bellaah — Wed, 5 Dec 2018 14:42:22 +0900

문제

ACM 호텔 매니저 지우는 손님이 도착하는 대로 빈 방을 배정하고 있다. 고객 설문조사에 따르면 손님들은 호텔 정문으로부터 걸어서 가장 짧은 거리에 있는 방을 선호한다고 한다. 여러분은 지우를 도와 줄 프로그램을 작성하고자 한다. 즉 설문조사 결과 대로 호텔 정문으로부터 걷는 거리가 가장 짧도록 방을 배정하는 프로그램을 작성하고자 한다.

문제를 단순화하기 위해서 호텔은 직사각형 모양이라고 가정하자. 각 층에 W 개의 방이 있는 H 층 건물이라고 가정하자 (1 ≤ H, W ≤ 99). 그리고 엘리베이터는 가장 왼쪽에 있다고 가정하자(그림 1 참고). 이런 형태의 호텔을 H × W 형태 호텔이라고 부른다. 호텔 정문은 일층 엘리베이터 바로 앞에 있는데, 정문에서 엘리베이터까지의 거리는 무시한다. 또 모든 인접한 두 방 사이의 거리는 같은 거리(거리 1)라고 가정하고 호텔의 정면 쪽에만 방이 있다고 가정한다.

그림 1. H = 6 이고 W = 12 인 H × W 호텔을 간략하게 나타낸 그림

방 번호는 YXX 나 YYXX 형태인데 여기서 Y 나 YY 는 층 수를 나타내고 XX 는 엘리베이터에서부터 세었을 때의 번호를 나타낸다. 즉, 그림 1 에서 빗금으로 표시한 방은 305 호가 된다.

손님은 엘리베이터를 타고 이동하는 거리는 신경 쓰지 않는다. 다만 걷는 거리가 같을 때에는 아래층의 방을 더 선호한다. 예를 들면 102 호 방보다는 301 호 방을 더 선호하는데, 102 호는 거리 2 만큼 걸어야 하지만 301 호는 거리 1 만큼만 걸으면 되기 때문이다. 같은 이유로 102 호보다 2101 호를 더 선호한다.

여러분이 작성할 프로그램은 초기에 모든 방이 비어있다고 가정하에 이 정책에 따라 N 번째로 도착한 손님에게 배정될 방 번호를 계산하는 프로그램이다. 첫 번째 손님은 101 호, 두 번째 손님은 201 호 등과 같이 배정한다. 그림 1 의 경우를 예로 들면, H = 6이므로 10 번째 손님은 402 호에 배정해야 한다.

입력

프로그램은 표준 입력에서 입력 데이터를 받는다. 프로그램의 입력은 T 개의 테스트 데이터로 이루어져 있는데 T 는 입력의 맨 첫 줄에 주어진다. 각 테스트 데이터는 한 행으로서 H, W, N, 세 정수를 포함하고 있으며 각각 호텔의 층 수, 각 층의 방 수, 몇 번째 손님인지를 나타낸다(1 ≤ H, W ≤ 99, 1 ≤ N ≤ H × W).

출력

프로그램은 표준 출력에 출력한다. 각 테스트 데이터마다 정확히 한 행을 출력하는데, 내용은 N 번째 손님에게 배정되어야 하는 방 번호를 출력한다.

문제:https://www.acmicpc.net/problem/10250

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

import java.util.Scanner;
public class Main {
    public static void main(String[] args) {
        Scanner in=new Scanner(System.in);
        int testNum=in.nextInt();
        for(int i=0; i<testNum; i++) {
            int H=in.nextInt();
            int W=in.nextInt();
            int N=in.nextInt();
            int floor=N%H,room=N/H+1;
            if(N%H==0) {
                room=N/H;
                floor=H;
            }
            System.out.println(floor*100+room);
        } 
    }
}
Colored by Color Scripter

cs

풀이
손님이 오는 순서대로 101호,201,301, ... ,102,202, ... 이런식으로 방을 배정해주면 됩니다.

한 층에 있는 방의 개수인 W는 문제 입력에서 (1 ≤ H, W ≤ 99, 1 ≤ N ≤ H × W)라는 조건을 주었기때문에 고려하지 않아도 됩니다.

그렇다면 H와 N으로 문제를 풀면 되는데 N%H를 하면 N이 H의 배수일 경우(꼭대기 층에 배정)만 제외하고는 층수를 구할 수 있습니다.

그래서 N%H가 0인 경우에는 층수를 꼭대기층으로 따로 if문을 써서 지정해주고 호수는 N/H로 나눴을 때 0이면 1호 이기때문에 1씩 더해주어서 계산을 합니다

floor이 5이고 room이 4 일때 floor에 5를 곱해주지 않는다면 9 혹은 45라고 나오기 때문에 floor에 100을 곱한뒤에 room번호를 더해주면 정상 출력값이 나옵니다.

[BOJ] 백준 1193 분수찾기-java

bellaah — Tue, 4 Dec 2018 14:34:38 +0900

문제

무한히 큰 배열에 다음과 같이 분수들이 적혀있다.

1/1	1/2	1/3	1/4	1/5	…
2/1	2/2	2/3	2/4	…	…
3/1	3/2	3/3	…	…	…
4/1	4/2	…	…	…	…
5/1	…	…	…	…	…
…	…	…	…	…	…

이와 같이 나열된 분수들을 1/1 -> 1/2 -> 2/1 -> 3/1 -> 2/2 -> … 과 같은 지그재그 순서로 차례대로 1번, 2번, 3번, 4번, 5번, … 분수라고 하자.

X가 주어졌을 때, X번째 분수를 구하는 프로그램을 작성하시오.

입력

첫째 줄에 X(1 ≤ X ≤ 10,000,000)가 주어진다.

출력

첫째 줄에 분수를 출력한다.

문제:https://www.acmicpc.net/problem/1193

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

import java.util.Scanner;
public class Main {
    public static void main(String[] args) {
        Scanner in=new Scanner(System.in);
        int num=in.nextInt();
        int tmp=0,divisor=0,dividend=0;
        for(int i=1; i<10000; i++) {
            if(num>tmp && tmp+i>=num) {
                if(i%2==0) {
                    divisor=i+1-(num-tmp);
                    dividend=(num-tmp);    
                }
                else {
                    divisor=(num-tmp);
                    dividend=i+1-(num-tmp);
                }
                break;
            }
            tmp+=i;
        }
        System.out.print(dividend+"/"+divisor);
    }
}
Colored by Color Scripter

cs

풀이

숫자를 입력받아서 1/1부터 지그재그로 숫자를 읽을 때 입력받은 num번째에 있는 분수를 출력해야 합니다.

일단 지그재그로 읽을 때 첫번째엔 1/1 하나이고 두번째 대각선은 1/2,2/1 이렇게 두개, 세번째 대각선은 3/1,2/2,1/3 이렇게 세개입니다.

이렇게 대각선 하나에 속하는 분수가 한개씩 늘어나므로 한 대각선에 속하는 분수의 개수는 1, 2, 3, 4, 5... 이런식으로 등차수열이 됩니다.

따라서 입력받은수가 14이면 5번째 대각선에 속하며 1+2+3+4+ 4이죠.

그럼 5번째 대각선에 4번째 분수를 출력하게 되면 됩니다.

대각선은 지그재그로 읽기때문에 i번째 대각선은 오른쪽상단부터 내려오면서 읽는지 왼쪽하단부터 올라오면서 읽는지 봐야하는데 i가 짝수이면 위에서 부터 읽고 홀수이면 밑에서 부터 읽습니다.

그래서 if(i%2==0)라는 조건을 걸어주었습니다.

tmp에는 앞에 있는 분수의 개수를 카운트하고 num이 5번째 대각선에 있는 분수라면 num은 1+2+3+4+?일 것이므로 tmp보다는 크고 tmp+i보다는 같거나 작을 것 입니다.

그러니 1~n-1까지의 숫자를 다 더한뒤 num에서 그 수를 빼면 n번째 대각선에 몇번째에 있는지 알 수 있는데 n이 짝수인지 홀수인지 판별하고 짝수이면 분모가 n이고 분자가 1로 시작해서 대각선으로 내려갈수록 분모는 1씩 작아지고 분자는 1씩 커집니다.

홀수이면 그 반대입니다.

이렇게 분모와 분자를 각각 구해서 출력해줍니다.

[BOJ] 백준 2292 벌집-java

bellaah — Tue, 4 Dec 2018 11:50:32 +0900

문제

위의 그림과 같이 육각형으로 이루어진 벌집이 있다. 그림에서 보는 바와 같이 중앙의 방 1부터 시작해서 이웃하는 방에 돌아가면서 1씩 증가하는 번호를 주소로 매길 수 있다. 숫자 N이 주어졌을 때, 벌집의 중앙 1에서 N번 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나가는지(시작과 끝을 포함하여)를 계산하는 프로그램을 작성하시오. 예를 들면, 13까지는 3개, 58까지는 5개를 지난다.

입력

첫째 줄에 N(1 ≤ N ≤ 1,000,000,000)이 주어진다.

출력

입력으로 주어진 방까지 최소 개수의 방을 지나서 갈 때 몇 개의 방을 지나는지 출력한다.

문제:https://www.acmicpc.net/problem/2292

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

import java.util.Scanner;
public class Main {
    public static void main(String[] args) {
        Scanner in=new Scanner(System.in);
        int num=in.nextInt();
        int room=1,tmp=1;
        for(int i=1; i<100000; i++) {
            if(tmp<num && (tmp+=6*i)>=num) {
                room +=i;
                break;
            }
        }
        System.out.print(room);
    }
}
Colored by Color Scripter

cs

풀이

벌집에서 입력받은 수가 몇개의 방을 지나야 하는지 알기 위해서 규칙을 찾아야 합니다.

숫자가 몇개의 방을 지나는지 알아보기 위해서 각 숫자가 지나는 방의 개수를 나열해봅니다.

1개의 방을 지나는 수 : 1 (1개)

2개의 방을 지나는 수 : 2~7 (6개)

3개의 방을 지나는 수 : 8~19 (12개)

4개의 방을 지나는 수 : 20~37 (18개)

5개의 방을 지나는 수 : 38~61 (24개)

이런식으로 각 범위에 해당하는 최대수를 나열하면 등차가 6의 배수인 계차수열 형태로 나옵니다.

각 범위의 최대 수를 기준으로 나열해보면 1, 7, 19, 37, 61... 인데 이것은 1, 1+6*1, 7+6*2, 19+6*3, 37+6*4 로 나타낼 수 있습니다.

a(n)=a(n-1)+6*(n-1)이라는 식을 얻을 수 있으므로 tmp라는 변수에 각 범위의 최대수를 넣어서 그 최대수와 이전항(이전범위 최대수) 사이에 속하는 수라면 n을 출력해주고 그것이 방의 개수가 됩니다.

[BOJ] 백준 1924 2007년 -java

bellaah — Fri, 23 Nov 2018 14:20:02 +0900

문제

오늘은 2007년 1월 1일 월요일이다. 그렇다면 2007년 x월 y일은 무슨 요일일까? 이를 알아내는 프로그램을 작성하시오.

입력

첫째 줄에 빈 칸을 사이에 두고 x(1≤x≤12)와 y(1≤y≤31)이 주어진다. 참고로 2007년에는 1, 3, 5, 7, 8, 10, 12월은 31일까지, 4, 6, 9, 11월은 30일까지, 2월은 28일까지 있다.

출력

첫째 줄에 x월 y일이 무슨 요일인지에 따라 SUN, MON, TUE, WED, THU, FRI, SAT중 하나를 출력한다.

문제:https://www.acmicpc.net/problem/1924

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

import java.util.Scanner;
 
public class Main {
    public static void main(String[] args) {
        Scanner in=new Scanner(System.in);
        int month=in.nextInt();
        int day=in.nextInt();
        int wholeday=0;
        String[] week= {"SUN","MON","TUE","WED","THU","FRI","SAT"};
        for(int i=1; i<month; i++) {
            if(i==2) {
                wholeday+=28;
            }
            else if(i==4||i==6||i==9||i==11) {
                wholeday+=30;
            }
            else {
                wholeday+=31;
            }    
        }
        wholeday+=day;
        System.out.print(week[(wholeday%7)]);
    }
}
Colored by Color Scripter

cs

풀이

2017년 1월 1일은 월요일일 때 2일은 화요일,8일은 다시 월요일입니다.

1월 1일을 기준으로 7일마다 월요일이 반복되는데 월과 일이 주어지면 무슨요일인지 알기위해서는 1월 1일 기준으로 며칠이나 지났는지 계산해봐야 합니다.

따라서 사용자가 입력으로 3월14일을 주었으면 1월과 2월엔 며칠이 존재하는지 알아서 wholeday라는 변수에 날짜를 더해주고(1월은 31일,2월은 28일) 마지막으로 14를 더해주면 1월 1일로부터 며칠이 지났는지 알 수 있습니다.

그 다음 그 날짜를 7로 나눴을 때 나머지가 0이 나오면 일요일이고 1이 나오면 월요일... 이런식으로 출력할 수 있게 week배열의 wholeday를 7로 나눴을 때 나오는 나머지를 인덱스로 줘서 접근하여 출력합니다.

[BOJ] 백준 15953 상금헌터(카카오코드페스티벌)-java

bellaah — Fri, 23 Nov 2018 13:56:39 +0900

문제

2017년에 이어, 2018년에도 카카오 코드 페스티벌이 개최된다!

카카오 코드 페스티벌에서 빠질 수 없는 것은 바로 상금이다. 2017년에 개최된 제1회 코드 페스티벌에서는, 본선 진출자 100명 중 21명에게 아래와 같은 기준으로 상금을 부여하였다.

순위	상금	인원
1등	500만원	1명
2등	300만원	2명
3등	200만원	3명
4등	50만원	4명
5등	30만원	5명
6등	10만원	6명

2018년에 개최될 제2회 코드 페스티벌에서는 상금의 규모가 확대되어, 본선 진출자 64명 중 31명에게 아래와 같은 기준으로 상금을 부여할 예정이다.

순위	상금	인원
1등	512만원	1명
2등	256만원	2명
3등	128만원	4명
4등	64만원	8명
5등	32만원	16명

제이지는 자신이 코드 페스티벌에 출전하여 받을 수 있을 상금이 얼마인지 궁금해졌다. 그는 자신이 두 번의 코드 페스티벌 본선 대회에서 얻을 수 있을 총 상금이 얼마인지 알아보기 위해, 상상력을 발휘하여 아래와 같은 가정을 하였다.

제1회 코드 페스티벌 본선에 진출하여 a등(1 ≤ a ≤ 100)등을 하였다. 단, 진출하지 못했다면 a = 0으로 둔다.
제2회 코드 페스티벌 본선에 진출하여 b등(1 ≤ b ≤ 64)등을 할 것이다. 단, 진출하지 못했다면 b = 0으로 둔다.

제이지는 이러한 가정에 따라, 자신이 받을 수 있는 총 상금이 얼마인지를 알고 싶어한다.

입력

첫 번째 줄에 제이지가 상상력을 발휘하여 가정한 횟수 T(1 ≤ T ≤ 1,000)가 주어진다.

다음 T개 줄에는 한 줄에 하나씩 제이지가 해본 가정에 대한 정보가 주어진다. 각 줄에는 두 개의 음이 아닌 정수 a(0 ≤ a ≤ 100)와 b(0 ≤ b ≤ 64)가 공백 하나를 사이로 두고 주어진다.

출력

각 가정이 성립할 때 제이지가 받을 상금을 원 단위의 정수로 한 줄에 하나씩 출력한다. 입력이 들어오는 순서대로 출력해야 한다.

문제: https://www.acmicpc.net/problem/15953

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

import java.util.Scanner;
public class Main {
    public static void main(String[] args) {
        Scanner in=new Scanner(System.in);
        int Line=in.nextInt();
        if(Line>=1&&Line<=1000) {
            int[][] rank=new int[Line][2];
            int[] money=new int[Line];
            for(int i=0; i<Line; i++) {
                for(int j=0; j<2; j++) {
                    rank[i][j]=in.nextInt();
                }
            }
            for(int i=0; i<Line; i++) {
                if(rank[i][0]>0) {
                    if(rank[i][0]==1) {
                        money[i] +=5000000;
                    }else if(rank[i][0]<=3) {
                        money[i] +=3000000;
                    }else if(rank[i][0]<=6) {
                        money[i] +=2000000;
                    }else if(rank[i][0]<=10) {
                        money[i] +=500000;
                    }else if(rank[i][0]<=15) {
                        money[i] +=300000;
                    }else if(rank[i][0]<=21) {
                        money[i] +=100000;
                    }
                }
            }
            for(int i=0; i<Line; i++) {
                if(rank[i][1]>0) {
                    if(rank[i][1]==1) {
                        money[i] +=5120000;
                    }else if(rank[i][1]<=3) {
                        money[i] +=2560000;
                    }else if(rank[i][1]<=7) {
                        money[i] +=1280000;
                    }else if(rank[i][1]<=15) {
                        money[i] +=640000;
                    }else if(rank[i][1]<=31) {
                        money[i] +=320000;
                    }
                } 
            }    
            for(int i=0; i<Line; i++) {
                System.out.println(money[i]);
            }
        }
    }
}
Colored by Color Scripter

cs

풀이

일단 몇개의 라인을 받을지 사용자가 첫번째 줄에 입력해주기때문에 변수로 그 입력을 받은뒤 그만큼 반복하여 라인을 받습니다.

rank라는 이차원배열은 처음 사용자가 입력한 Line이라는 변수만큼의 행이 있고 2개의 열이 있습니다.

2개의 열의 첫번째에는 1차 코드페스티벌의 등수가 들어있고 두번째 열에는 2차 코드페스티벌의 등수가 들어있습니다.

코드 페스티벌은 1차와 2차의 상금과 상금수혜자의 인원이 다르기 때문에 1차와 2차를 분리해서 조건문을 만들었습니다.

rank의 i행 0,1열의 등수에 해당하는 상금을 money의 i행에 더해줍니다.

본선에 진출하지 못했다면 등수는 0이 되기때문에 등수(rank)가 1이상일 경우에만 money값을 바꿔줍니다.

마지막으로 money라는 배열에 있는 행을 차례대로 출력해줍니다.

[Node.js] NPM,package.json

bellaah — Tue, 20 Nov 2018 18:27:49 +0900

1. npm이란

npm은 Node Package Manager의 약자입니다.

npm은 두가지 의미로 사용되는데 첫번째는 오픈소스로 작성된 node.js 모듈들이 등록된 저장소인 http://npmjs.com 를 의미합니다.

두번째는 패키지를 install하고 의존성을 관리하는 자바스크립트로 작성된 커멘드라인 유틸리티입니다.

2. 패키지 관리가 필요한 이유

node.js의 프로젝트는 의존하는 다른 패키지의 소스코드를 포함하지 않습니다.

하지만 의존하는 패키지들을 package.json에 명시하고 npm을 사용해 각자 설치합니다.

따라서 다른 패키지의 소스코드를 포함하지 않기 위해서 패키지 설치와 제거를 위해 npm 사용법을 알아야합니다.

3. package.json이란

package.json은 NPM을 위한 각종 정보들을 저장해놓은 파일입니다.

NPM을 통해 모듈을 설치할 수 있는데 이 모듈들을 관리해주는 파일이 package.json입니다.

1
2
3
4
5
6
7
8
9
10
11
{
  "name": "PassportExample",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node app.js"
  },
  "dependencies": {
    "body-parser": "^1.18.3",
  }
}
cs

package.json 파일 예시입니다.

package.json 의 요소에 대해 알아보겠습니다.

-name : 프로젝트 명을 기입합니다.

-version : 진행중인 프로젝트의 버전을 기입합니다. enter를 입력할 경우 자동으로 기입됩니다.

-description : 위의 코드에는 없지만 프로젝트에 대한 설명을 기술합니다.

-scripts : npm [script] 명령어를 통하여 실행할 수 있는 요소들을 의미합니다.

-dependencies : 사용할 모듈을 dependencies 객체에 추가합니다.

더 많은 요소가 있지만 간단하게 많이 쓰는 부분들만 모아서 정리해보았습니다.

[Node.js] module 사용하기

bellaah — Mon, 29 Oct 2018 21:42:47 +0900

1. 모듈이란?

-모듈이란 다른 사람들이 만들어놓은 독립된 기능의 파일이라고 할 수 있습니다. 어떠한 기능을 하는 모듈을 우리는 가져오기만 하면 쓸 수 있습니다.

-내장모듈이란 node를 설치하면 그 안에 제공되어지는 모듈을 말합니다.

-외장모듈이란 개발자들이 만들어 놓은 모듈을 말합니다.

2. 모듈 사용법

1

var express = require('express');                                                            

cs

 
-node.js의 내장 모듈은 " require('모듈명') " 이라고 쳐서 사용할 수 있습니다.
-외장 모듈은 npm(Node Package Manager)을 통해 모듈을 다운받아야 합니다. 다운로드 후 내장모듈처럼 require해서 사용할 수 있습니다.

3.NPM 사용법

-npm을 사용하는 방법은 간단합니다. 커멘드 창에서 " npm install [모듈명] " 을 입력하면 설치가 됩니다.

-모듈을 설치할 때 옵션을 줄 수 있습니다.

1) npm install [모듈명] -g : g는 global을 뜻하며 전역으로 모듈을 다운받는 것입니다. express같은 커멘트창에서 사용되어지는 모듈은 global하게 설치해야하기때문에 옵션으로 줍니다.

2) npm install [모듈명] --save : --save를 옵션으로 주게되면 모듈이 설치되면서 자동적으로 package.json을 업데이트 시켜줍니다. package.json 파일의 dependencied 부분이 업데이트되게 됩니다.

[Node.js] 설치 및 시작하기

bellaah — Fri, 26 Oct 2018 17:51:59 +0900

node.js를 설치하고 파일을 실행시켜보겠습니다.

1. node.js 설치하기

https://nodejs.org/ko/ (node.js 홈페이지)에 접속해서 다운로드 버튼을 눌러줍니다.

다운로드로 들어오면 여러가지 버전이 나와있습니다. 자신의 운영체제에 맞는 버전으로 다운로드하시면 됩니다.

아래로 내리시면 이런 항목이 있습니다. 이 중 "패키지 관리자를 통한 Node.js 설치"를 누르시면 각각의 배포판별로 어떻게 설치하는지 나와 있습니다.

잘 설치되었는지 확인하기 위해 명령프롬프트(cmd)를 켜서 "node --version" 이라고 쳐서 아래와 같은 화면이 나오면 설치가 완료되었음을 알 수 있습니다.

2. 실행

에디터를 실행시킵니다.

사용하는 에디터가 없다면 atom 에디터를 다운 받으시면 됩니다. (https://atom.io/)

맨 위에 "file" 버튼을 누르고 "Open Forder.."를 눌러줍니다. (file > Open Forder... )

이전에 만들어 놓은 폴더나 원하는 폴더를 선택해줍니다.

그리고 마우스 오른쪽을 눌러서 "new File"이라는 버튼을 누르면 새로운 파일을 생성할 수 있습니다.

저는 새로운 파일로 "hello.js"라는 파일을 만들었습니다.

그리고 console.log('helloworld') 라는 간단한 코드를 작성하였습니다.

node.js를 이용해서 이 파일을 실행시키기 위해 터미널을 실행해야 하는데 cmd창을 열거나 에디터에 terminal을 설치해도 됩니다.

저는 atom에디터에 terminal을 설치하도록 하겠습니다.

위에 보이는 화면 상단 왼쪽에 file > setting > install 을 누른 뒤 검색창에 "platformio-ide-tercinal" 검색합니다.

아래와 같은 화면이 나오시면 install버튼을 클릭해서 설치해줍니다.

설치가 끝났으면 packages에 platformio-ide-tercinal이 추가된 것을 볼 수 있습니다.

상단에 packages > platformio-ide-tercinal > New Terminal 을 눌러줍니다.

그럼 이렇게 아래에 새로운 터미널 창이 뜹니다.

그럼 파일이 위치한 디렉토리로 들어가기 위해서 저는 "cd nodeproject" 라고 칩니다.

파일이 위치한 폴더에 들어갔으면 node 명령어를 실행합니다.

제가 만든 hello.js라는 파일을 실행하기 위해서 터미널에 "node hello.js" 라고 입력해줍니다.

그럼 아래와 같이 hello.js라는 파일이 실행되는것을 볼 수 있습니다.

파일까지 실행시켜봄으로써 node.js 설치를 완료하였음을 알 수 있습니다.

1/1	1/2	1/3	1/4	1/5	…
2/1	2/2	2/3	2/4	…	…
3/1	3/2	3/3	…	…	…
4/1	4/2	…	…	…	…
5/1	…	…	…	…	…
…	…	…	…	…	…

1/1	1/2	1/3	1/4	1/5	…
2/1	2/2	2/3	2/4	…	…
3/1	3/2	3/3	…	…	…
4/1	4/2	…	…	…	…
5/1	…	…	…	…	…
…	…	…	…	…	…

1/1	1/2	1/3	1/4	1/5	…
2/1	2/2	2/3	2/4	…	…
3/1	3/2	3/3	…	…	…
4/1	4/2	…	…	…	…
5/1	…	…	…	…	…
…	…	…	…	…	…