삶을 코딩하다, 필드를 걷다

지난 연습때 다시 등장한 백스윙 스웨이 ;;;;; 이녀석 잡기위해 스웨이에 대해서 알아보겠습니다.

스웨이란?

백스윙 기준 제자리에서 회전이 되지 않고 우측으로 중심 축이 밀리는 현상

저는 골프 레슨을 받으면서 처음부터 마지막 날까지 지적을 받았던 부분이 백스윙 스웨이 였습니다. 골프 스윙에서 가장 이상적인 백스윙인 자세를 보게되면 어드레스 자세와 백스윙 탑의 자세를 비교시 머리부터 축이 그대로 올라가는 것이 이상적입니다. 이런 자세를 유지해야 방향성과 비거리가 높아진다고 합니다. 

위 사진은  KLPGA투어 이정연 프로의 연속 스윙을 고속으로 촬영한 사진이라고 합니다. 어드레스 자세와 백스윙 탑에서의 머리와 축이 고정된 것을 확인할 수 있습니다.

위 사진은 제 어드레스 자세와 백스윙 탑의 이미지를 겹쳐본 것 입니다. 오른 골반을 기준으로 라인을 잡고 어드레스 자세에서 파랑색 라인에 위치가 백스윙 탑에서는 빨강색 라인까지 움직이는 것을 확인 할 수 있습니다. 

하지만 프로선수가 아닌 아마추어에서는 이런 스웨이 현상이 일어나는 사람이 많습니다. 물론 저를 포함해서;; 스웨이 현상이 일어나는 이유는 아래와 같다고 합니다.

상체동작 문제

• 상체동작을 이해하지 못하는 경우
• 비거리 욕심으로 오버스윙이 나오는 경우
• 백스윙시 공이 아닌 클럽헤드를 바라보는 경우

하체동작문제

• 하체동작이 제대로 되지 않아서 발생하는 경우
• 잘못된 체중 이동으로 발생하는 경우

특히 하체의 스웨이는 비거리, 방향성, 일관성에서 많은 손해를 본다고합니다. 꼭 고쳐야 한다고 합니다. 그렇다면 어떻게 고쳐야 할까요?? 몇가지 방법을 정리해 보겠습니다.

교정법

1. 어드레스 자세에서 무릎의 각도 : 무릎을 과하게 구부리는 행동은 금물
2. 백스윙 시 오른쪽 골반 뒤로 빼주기 : 오른쪽 골반이 회전하는 뒤쪽 방향으로 열리도록 함 (단, 오른쪽 무릎이 펴지지 않는 선에서 골반을 뒤로 빼줌)

연습방법

1. 오른쪽 하체쪽에 골프백을 두고 백스윙을 올리면서 백에 하체가 닿지 않도록 백스윙을 한다.
2. 백스윙시 골반을 뒤로 빼주되 오른쪽 무릎이 펴지지 않도록 신경쓴다.
3. 오른쪽 발을 안으로 받아주는 스탠스를 취하며 백스윙 연습을 한다. (어드레스 자세의 오른쪽 앞 주머니가 백스윙탑에서 오른쪽 뒷주머니 위치로 가는 느낌으로 연습)

추가로 아래 영상을 참고하면 좋을것 같습니다.

모두 즐거운 골프 치세요~

문제

N*M의 배열에서 (0,0) 에서 (N-1,M-1)까지 가는 최단거리를 구하여라

입력예제

첫째줄 N 과 M을 입력받으며, 두번째줄 부터 M개의 숫자들이 N줄 나옴

5 4
10 5 9 5
4 1 1 7
7 5 1 6
3 4 8 6
3 4 3 6

===> 답: 34

풀이 코드

다익스트라를 이용한 풀이 코드입니다. 위 예제를 이력하여 마지막에 나온 dist 배열의 값은 

[10, 15, 24, 28]
[14, 15, 16, 23]
[21, 20, 17, 23]
[24, 24, 25, 29]
[27, 28, 28, 34]

입니다.

import java.io.BufferedReader;
import java.io.IOException;
import java.io.InputStreamReader;
import java.util.PriorityQueue;
import java.util.StringTokenizer;

public class Main {

    static BufferedReader br = new BufferedReader(new InputStreamReader(System.in));
    static StringTokenizer st;

    static int n, m;
    static int[][] MAP; 
    // Node 생성
    static class Node implements Comparable <Node> {
        int y;
        int x;
        int cost;
        Node(int y, int x, int cost) {
            this.y= y;
            this.x=x;
            this.cost=cost;
        }
        @Override
        public int compareTo(Node next) {
            if(cost < next.cost)
                return -1;
            if(cost > next.cost)
                return 1;
            return 0;
        }
    }

    static int[] ydir = {0, 0, 1, -1};
    static int[] xdir = {1, -1, 0, 0}; 

    static void dijkstra(int y, int x) {
        // 1. PQ 설정
        PriorityQueue<Node>pq = new PriorityQueue<>();
        // MAP[0][0] = 0, 0 위치로 진입하는 비용 
        pq.add(new Node(y, x, MAP[y][x]));

        // 2. dist 설정
        // dist[] = index : 노드번호 value : 최단거리 
        // dist[][] = [y][x] 좌표의 최단거리 
        int[][] dist = new int[n][m];
        // 초기화
        for(int i = 0; i < n; i++) {
            for(int j = 0; j < m; j++) {
                dist[i][j] = Integer.MAX_VALUE;
            }
        }
        dist[y][x] = MAP[y][x]; 

        // dijkstra
        while(!pq.isEmpty()) {
            Node now = pq.poll();
            // 갈 수 있는 인접한 방향 체크 
            for(int i = 0; i < 4; i++) {
                int ny = now.y + ydir[i];
                int nx = now.x + xdir[i];
                // ** 필수체크 ** 범위체크 
                if(ny < 0 || nx < 0 || ny >= n || nx >= m)
                    continue;
                // 다음 노드까지의 비용
                // 지금 좌표까지 오기 위해 사용한 비용 + 다음 좌표로 진입하기 위한 비용
                int ncost = dist[now.y][now.x] + MAP[ny][nx];
                // 지금까지 기록된 [ny][nx]까지의 최소비용보다 같거나 크면 pass
                if(dist[ny][nx] <= ncost)
                    continue; 
                dist[ny][nx] = ncost;
                pq.add(new Node(ny, nx, ncost));
            }
        }
        System.out.println(dist[n-1][m-1]); // N-1,M-1 의 최단거리 출력
    }

    public static void main(String[] args) throws IOException {
        st = new StringTokenizer(br.readLine());
        n = Integer.parseInt(st.nextToken());
        m = Integer.parseInt(st.nextToken());
        // map init
        MAP = new int[n][m];
        // input
        for(int i = 0; i < n; i++) {
            st = new StringTokenizer(br.readLine());
            for(int j = 0; j < m; j++) {
                MAP[i][j] = Integer.parseInt(st.nextToken());
            }
        }
        dijkstra(0, 0); //(0,0) 부터 시작
    }
}

다익스트라의 원리는 지난번 설명한 포스트에 있으니 참고하세요.

2021.06.14 - [Programe Note/Algorithm] - [Java] 다익스트라 알고리즘 - 최단경로

알파고.. 아니 아이폰이 나왔을때 만큼의 충격이라고 이야기하는 ChatGPT 혹시 사용 해보셨나요?

직업이 직업이니 만큼 저는 얼마전에 사용을 해보았습니다. 여러 블로그나 유튜브에도 나와있듯 이거 정말 대박입니다. 아직은 모르겠지만 조만간 개발자라는 직업도 없어질 것 같아서 아주 슬픈 예감이 듭니다. 

간단히 ChatGPT를 알아보면,  만든 곳은 OpenAI라는 회사입니다. 이 회사가 참 흥미로운 것이 머스크형이 현 대표와 공동 창업을 한 회사입니다. 19년도에 가진 주식을 모두 넘기고 지금은 머스크형꺼는 아니지만 머스크형 당신은 정말 뭐하는 사람인거냐;;;; 이후 MS가 대규모 투자를 하면서 MS가 OpenAI의 모든 사용권한을 얻게됩니다. 처음에 이야기한 아이폰이 처음 나왔을때 충격이라고 제가 이야기를 했는데요. ChatGPT를 통해서 모든 세상이 바뀔수 있기 때문입니다. 

간단하고 강력한 한가지 예를 들면 그것은 바로 '검색'입니다. 지금까지 검색은 키워드를 입력하고 거기에 해당하는 사이트를 클릭하여 저와 같은 블로그에 접속하여 정보를 알아냈습니다. 하지만 이러한 과정이 모두 생략이 됩니다. 검색창에 "골프란 무엇인가?" 라고 구글에 검색해보겠습니다. 그럼 아래와 같은 결과가 나타납니다.

여러 사이트의 링크가 보이고 제가 제목이나 원하는 링크를 타고 들어가서 자세한 정보를 찾아야합니다. 하지만 ChatGPT를 이용하여 같은 질문을 해보겠습니다.

위처럼 링크에 접속하지 않고도 골프에 대한 정보가 나타납니다. 이는 곧 검색시장의 패러다임을 바꾸게 될것 입니다. 

여담이지만 구글이 ChatGPT를 발표하고 난리가 난 상황입니다. 구글의 수익은 대부분 검색후 우리가 클릭하는 것에서 발생합니다. 근데 ChatGPT로 인해 구글이 검색시장을 MS에게 넘겨줄 수 있다는 위기감이 온거죠. 실제로 MS의 검색서비스인 Bing에서 ChatGPT를 적용한 것으로 알고있습니다.

개발자라서 이런 부분에 대해 할 이야기가 많지만 여기까지 하고, ChatGPT에게 골프에 관해 몇가지 물어봤습니다. 

답변은 아래와 같이 나타납니다.

원론적인 이야기를 잘 정리해서 알려줘서 아주 신기했습니다. 하지만 아직 완벽한건 아닌것 같다는 생각이 들기도 합니다. 엉뚱한 내용으로 답을 하는 경우가 있습니다. 아직 궁금한게 많은데 이것을 이용하면 조금은 도움이 될것 같다는 생각입니다. 절대적 신뢰는 금물입니다.

골프에서 PAR 3을 제외하고 PAR4, PAR5 코스는 기본적으로 처음에 드라이버로 시작을 합니다. 드라이버로 시작 후에 홀에 넣기 위해서 아이언, 우드, 유틸리티 등을 이용에 그린에 접근합니다. 그리고 퍼터를 이용하여 홀에 공을 넣습니다. 참 단순한 스포츠인데 막상 하면 굉장히 어려운 운동이죠.

근데 그린에 접근하기 위해서 사용하는 아이언, 우드, 유틸리티는 왜 용어부터가 다 다를까요? 그리고 아이언도 롱아이언이 있고 페어웨이 우드는 3,5,6,9 그리고 유틸리티 우드에는 2,3,4,5,6,7번호가 있습니다. 7번 아이언 비거리 기준으로 +- 10m정도씩 클럽번호로 거리 계산만 해서 갈 수 있을것 같은데 왜 구지 이런 클럽을 만들어 둔걸까요? 

골린이라 참 모르는게 많습니다.

저는 레슨을 받으면서 프로님이 알려주신데로 페어웨이 우드는 5번, 유틸리티 우드는 4번을 구입해서 치고있습니다. 뭐 단순히 레슨을 위에서 구입을 한거지만, 기본적으로 챙겨야 하는 장비라고 합니다. 

일반 아마추어 기준으로 비거리를 보면 7번이 130~140m 기준일 경우 페어웨이 우드 5번은 170~180m, 유틸리티 우드 4번은 160~170m가 나온다고 합니다.  아이언 세트를 구매하면 보통 5번 아이언은 150~160m 비거리를 볼 수 있습니다. 실제로 롱 아이언은 3,4번을 이야기하는 것(?) 같습니다. 일반 아우추어에 대략적인 비거리는 아래와 같습니다. 

근데 위 표에서 보는것 과 같이 빨강색 5번 우드, 3번 유틸리티, 3번 아이언은 모두 비거리가 170 ~ 180m 입니다. 노랑색, 초록색도 비거리가 겹치는 것을 확인 할 수 있습니다. 왜 이걸 이렇게 나눠 둔걸까요? 같은 비거리라면 치기 쉬운 아이언이 나을것 같다는 골린이적 생각을 해봅니다. (사실 3,4번 아이언이 치기 쉬운클럽은 아니죠;;)

그래서 의문이 생겼습니다. 비거리가 같다면 뭔가 치는 목적이 다른거 아닐까 하는 의문이요. 그래서 알아 보았습니다. (생김새 이런거 빼고 이야기합니다.)

우드는 멀리 보내며 페어웨이에 보내려는 목적을 가지고, 아이언은 그린에 보내기 위한 목적이 있다고 합니다. 그리고 유틸리티 우드는 페어웨이 우드와 아이언 사이라고 생각하면 된다고합니다. 

유틸리티 우드는 공을 멀리보내고 아이언의 정교함도 가지고 있기때문에 초보 골퍼에게 인기가 높습니다. 하지만 선수들은 컨트롤이나 일관성을 유지하기위해 페어웨이 우드나 롱아이언을 아직 선호한다고 합니다. 하지만  최근에는 사용하는 선수도 점점 늘어간다고 합니다. 

초보자 기준에서 특징을 열거해 보면..

페어웨이 우드
. 장점 : 일정한 비거리나 반발력유지, 잘못 맞아도 어느정도 멀리 나감, 사이드 스핀이 적어 좌우 편차가 덜함
. 단점 : 클럽의 길이가 길어서 초보가 치기 어려움, 경사에서 공치기 힘듬

롱아이언
. 장점 : 없음
. 단점 : 정타율이 높지 않고, 사이드 스핀이 잘 발생할 수 있다

유틸리트 우드
. 장점 : 관용성이 우수함, 경사에서도 치기 쉬움, 스윙하기 부담이 적다
. 단점 : 무게 중심 밸런스가 떨어지는 구조로 스윙스타일에 따라 적합하지 않은 경우가 있음.

초보용 클럽으로 아이언세트, 페어웨이 우드5번, 유틸리티 4번, 드라이버를 구입하라는 이유가 공식에 따른 비거리도 어느정도 맞춰졌고, 모든 클럽을 경험하기 위해서 이렇게 구입을 하라고 권장하는 것 같다는 개인적인 생각입니다. 그리고 치면서 자기 비거리와 몸에 맞춰서 페어웨이 우드, 유틸리티 우드, 롱아이언을 고르기 쉬워 지겠죠. 근데 생각보다 너무 클럽이 비싸서 초보 골퍼라면 중고도 꼭 생각해보세요. 처음 구매한 클럽을 죽을때까지 사용하는 그런 완벽한 클럽은 없습니다. 

그리고 롱아이언은 중상급이 되었을때 생각해 보시길 바랍니다. 초보자가 칠 클럽은 아닙니다.

아래는 클럽별 거리와 구질 그리고 탄도를 이해하기 쉽게 표현해 놓은 자료 입니다. 참고하세요.

신차로 구입하고 타고다니던 자동차를 중고로 판매하게 되었습니다.
중고차를 팔아본 경험이 없어서 여기저기서 정보를 찾아보며 여러 플랫폼과 비교도 해보고 거래를 한 일지를 작성해 봅니다.

플래폼 비교

중고차 팔기 플래폼은 여러개가 있어서 모두 비교를 해보는게 좋다고 합니다. 하지만 시간적으로나 이리저리 다녀야하는 번거로움이 있어서 저는 헤이딜러와 AJ셀카 두군데 견적을 요청하였습니다.

헤이딜러

일단 처음 자동차를 판매하는 사람들에게 추천합니다. 사용하기 편한 UI에 직관적이라 앱을 사용하며 불편하다는 생각을 해본적이 없었습니다. 일단 차를 잘 모르기때문에 평가사가 방문하여 차량을 살펴보는 것으로 신청하였습니다. 신청은 간단하며 원하는 시간과 장소를 선택할 수 있어서 편리합니다.

AJ셀카

헤이딜러와 달리 별도의 App 없이 사이트에서 바로 신청이됩니다. 헤이 딜러와 다른게 사이트에서 신청을 하기 때문에 UI가 직관적이지는 않지만 사용하기에 불편함은 없었습니다. 회원 가입도 안해도 팔 수 있으나, 주의 사항등을 꼼꼼하게 읽어보면서 단계를 진행해야 합니다. 이곳도 마찬가지로 평가사가 방문하여 차량을 평가하도록 신청가능하지만 헤이딜러와 달리 주말에 선택이 불가능합니다. 그리고 사이트 시간은 확정이 아니라 평가사와 시간 조율을 해야합니다.

평가사 방문 평가

헤이딜러 그리고 AJ셀카 두군데에서 평가사가 방문하여 차량을 평가했습니다. 저의 경우 헤이딜러는 두분, AJ셀카는 한분이 오셔서 여기저기 꼼꼼하게 체크를 하였습니다. 주로 수리 부위 교체부위 그리고 차량 이상여부를 체크하였습니다. 헤이딜러의 경우 차량에 대한 이런 저런 평가내용을 구두로 설명해주고 앞으로 어떻게 진행이 될건지 이야기를 해주었습니다. AJ셀카의 경우 자동차관련 자가 평가지(?)를 작성하는데 거짓 정보가 있으면 안된다고 합니다. 

개인적인 느낌으로 차량 체크와 친절도는 헤이딜러가 높았습니다.

차량 경매

헤이딜러, AJ셀카 모두 경매방식으로 진행됩니다. 평가사가 평가한 차량의 상태를 보고 경매를 참여해 가장 높은 가격으로 판매가 되는 방식입니다. 경매 방식과 시간은 차이가 있습니다. 헤이딜러는 48시간동안 경매가 진행되지만, AJ셀카는 평가사가 방문한 다음날 9시부터 13시까지 4시간동안만 경매가 진행됩니다.

두 플랫폼의 최고가는 아래와 같이 나왔습니다. 헤이딜러가 몇만원 더 높게 측정 되어 헤이딜러로 결정했습니다.

참고로 AJ셀카로 판매하면 중개 수수료 55,000원을 지불해야하고, 판매처가 있는 곳까지의 탁송료를 파는 사람이 분담해야한다고 합니다. 이리저리 생각하니 헤이딜러가 깔끔하더군요.

탁송신청

헤이딜러로 결정하고 차량을 탁송하기 위한 정보를 입력합니다. 탁송할 날짜와 시간을 입력하고 차량대금을 입금받을 계좌를 작성합니다.

서류 준비

개인이 판매를 하는 경우에는 차량등록증, 그리고 자동차 매도용 인감증명서를 발급받아서 준비하면 됩니다. 위 탁송신청을 하면 매수자 인저사항이 카톡으로 옵니다. 이 정보를 가지고 가까운 주민센터에 가서 자동차 매도용 인감증명서를 발급받아야 합니다. 매수자 인적사항은 꼭 확인하여야 합니다. 인감증명서 발급은 신분증이 필요하고, 발급비 600원이 들어갑니다.

탁송준비 및 탁송

신청한 탁송시간에 맞춰서 탁송기사님이 와서 차를 가져갑니다. 이때 준비한 서류를 제출하고 차량키를 건네면 탁송기사님이 전화를 합니다. 그러면 바로 차량대금이 입금이 되고 입금확인 후 차를 탁송하면 끝입니다.

탁송전에 꼭 차량의 모든 물품은 모두 꺼내두세요. 특히 하이패스카드, 선글라스 등 물건은 모두 꺼내어 확인을 하셔야 합니다. 그리고 혹시 모르니 탁송전 계기판에 총 km를 사진 찍어 두십시오. 나중에 자동차 보험해지시 필요합니다. 보험은 차량이 이전되고 나서 나중에 해지를 해야합니다. 꼭 참고하세요!

이렇게 아쉬운 마음으로 차량을 보냈습니다. 

탁송시 자주 묻는 질문

차량이전 확인 및 자동차 보험해지, 자동차세 환급

영업일기준 2일정도 지나면 차량 이전이 완료된다고 합니다. 차량이전을 확인하고 문제가 없다면 자동차 보험을 해지하여 줍니다. 그리고 잊지말고 자동차세를 환급 받아야 합니다. 저의 경우 연초에 1년치를 선납하는데 남은 기간동안의 세금은 당연히 환급을 받아야합니다. 위텍스 등으로 환급이 가능하다고 합니다. 

명의이전이 완료되면 헤이딜러에서 명의이전완료 메시지를 카톡으로 전송해줍니다. 헤이딜러에 들어가면 차량등록증을 다운 받을 수 있으며 이를 이용하여 자동차 보험을 해지할 수 있습니다. 아래는 헤이딜러에서 알려주는 자동차 보험 해지 방법과 세금 환급 방법입니다.

저는 삼성화재 다이렉트 자동차 보험에 가입했었는데, 전화로 쉽게 해지가 가능했습니다. 전화로 문의하면 본인확인 후 카톡으로 서류(자동차 등록증 사본) 및 마일리지 할인을 위한 사진 등록 링크를 알려줍니다. 그곳에 사진을 등록하면 바로 해지 됩니다.

명의 이전 당일 위택스에 접속하여 확인하였으나, 환급조회에서 잡히는 것이 없었습니다. 시간이 걸리는 것 같긴 합니다.

그동안 큰사고 없이 안전하게 태워줘서 고마웠고 좋은 주인 만나서 다시 신나게 달려 나의 첫차!! 

미들웨어

미들웨어는 중간단계 역할을 하는 존재입니다. 즉, 응답과 요청 사이에 express 자체에 있는 기능 외에 추가적인 기능을 넣어주는 것 입니다. npm으로 다운받아서 사용해도 되며 express 자체 미들웨어를 사용해도 됩니다. 미들웨어에는 인증, 예외처리, 세션처리, 라우터 등 많은 종료가 있습니다. 미들웨어는 app.use() 메서드를 사용합니다. 

next() : 다음 미들웨어로 가는 역할
next(error) : 오류 처리 미들웨어로 가는 역할
next('route') : next()로 같은 라우터에서 분기처리를 할 때 사용

express로 서버를 만들때 순서

1. express를 불러옴
2. 포트설정
3. 공통부분 미들웨어 작성
4. 라우터 구성
5. 404 처리 미들웨어 구성
6. 오루처리 미들웨어 구성
7. 서버 포트를 리스닝

자주 사용하는 미들웨어

express.static

static 파일은 이미지, css, 스크립트 파일과 같이 그 내용이 고정되어 있어 파일 내용 그대로를 보여주면 되는 파일을 말합니다. 이러한 파일은 따로 폴더를 지정하여 놓으면 관리가 편합니다. static 은 express 안에 기본적으로 포함이 되어 별도의 설치없이 사용이 가능합니다. 아래와 같이 express_server_static.js 파일을 생성하여 줍니다.

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 8080);

app.use(express.static(__dirname + "/public"));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/test2.html");
});

app.listen(app.get("port"), () => {
  console.log(app.get("port") + "포트에서 서버 실행중...");
});

같은 폴더안에 public 폴더를 만들고 그곳에 sample.png 파일을 둡니다. 그리고 test2.html의 내용은 아래처럼 작성합니다.

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>test2</title>
  </head>
  <body>
    <h1>Node.js Express Server2 Test html2 page</h1>
    <p>This is Main page.</p>
    <img src="./sample.png" width="500" height="350" />
  </body>
</html>

작성된  express_server_static.js 를 실행하여 localhost:8080 에 접속하면 아래와 같은 화면이 나타납니다.

이렇게 express.static 을 이용하면 html 파일 내에 /public 이라는 경로를 따로 명시해 주지 않아도 자동으로 서버에서 static 폴더로 지정된 곳에 해당 파일을 찾아 화면에 띄어주게 됩니다. 경로를 숨길수 있어 보안에도 도움이 됩니다.

router

클라이언트로부터 요청이 왔을대 서버에서 어떤 응답을 보내주어야 할지 결정해주는 미들웨어 입니다. 

아래 예제 코드는 localhost:8080 으로 들어올때와 localhost:8080/member/ty 로 접속했을때 다른 html 화면을 띄어주는 예제입니다. 

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 8080);

app.use(express.static(__dirname + "/public"));

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/test2.html");
});

app.get("/member/:id", (req, res) => {
  res.send(req.params.id + "님의 마이 페이지입니다.");
});

app.listen(app.get("port"), () => {
  console.log(app.get("port") + "포트에서 서버 실행중...");
});

위 코드를 작성하여 실행하면, localhost:8080 로 접속했을 때는 위 express.static에서 만든 화면이 출력이 되지만 localhost:8080/member/ty 로 접속하면 아래와 같은 페이지가 출력됩니다.

express.json, express.urlencoded

클라이언트에서 post, put 요청 시 들어온 정보를 가진 req.body에 접근하기 위해 필요한 미들웨어입니다. 요청 정보가 url에 들어온 것이 아니라 request body에 들어있는데, 이 값을 읽을 수 있는 구문으로 파싱하고 req.body로 옮겨주는 역할을 하는 것입니다.

express.json 은 req.body가 json 형태일 때, express.urlencoded는 폼에 대한 요청일 때 사용합니다.

cookie-parser

쿠키는 클라이언트가 요청을 보낼 때마다 키-쌍으로 이루어진 쿠키를 보내고 서버에서는 클라이언트가 보낸 쿠키를 읽어 사용자가 누군지 식별합니다. 처음에 한 번만 서버에서 res.writeHead() 메서드를 통해 'Set-cookie'에 값을 넣어줍니다. 이렇게하면 브라우저에 키-쌍으로 이루어진 쿠기가 헤더에 저장됩니다. 이것을 자동으로 쿠키를 매번 요청할 때마다 서버에게 보냅니다.

express 모듈을 이용하여 가볍고 빠른 프레임워크를 만드는 방법입니다. 

• 자바스크립트의 프론트엔드 프레임워크 : React.js, Angular.js, Vue.js
• 자바스크립트의 백엔드 프레임워크 : node.js 의 express

express 설치

터미널을 이용하여 아래의 명령어로 express 를 설치합니다.

C:\dev\nodejs>npm install express

설치가 완료되면 nodejs 폴더 안에 node_modules 라는 폴더가 생성이되고 이곳에 express 동작을 위한 모듈들이 자동으로 설치가 됩니다.

express 코드 작성 1

express 사용을 연습하기 위하여 아래와 같이 코드를 작성합니다. 저는 nodejs 폴더 아래 express 폴더를 만들고 express_server.js 라고 파일을 만들어 아래 코드를 작성하였습니다.

const express = require("express");
const app = express();

app.get("/", (req, res) => {
  res.send("Hello World!!!!");
});

app.listen(8080, () => console.log("8080포트에서 서버 실행중..."));

js를 실행하여 브라우저로 localhost의 8080 포트에 접속을 하면 아래와 같이 표시됩니다.

express 코드 작성 2

웹 페이지를 만드는 방법으로 연습을 해봅니다. 우선 test.html 페이지를 만듭니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
  </head>
  <body>
    Node.js Express Server Test html page
  </body>
</html>

이번에는 아래와 같이 js 파일을 수정합니다.

const express = require("express");
const app = express();

app.set("port", process.env.PORT || 8080);

app.get("/", (req, res) => {
  res.sendFile(__dirname + "/test.html");
});

app.listen(app.get("port"), () => {
  console.log(app.get("port") + "포트에서 서버 실행중...");
});

수정 후 js 파일을 실행고 브라우저로 접속을 하면 아래와 같이 html 페이지를 화면에 표시하는 것을 확인 할 수 있습니다.

간단하게 Node.js를 이용하여 서버를 만드는 방법입니다.

아래와 같이 간단하게 코드를 작성하여 js파일을 만듭니다. 저는 simple_server.js 라고 하겠습니다.

const http = require("http");

http
  .createServer((req, res) => {})
  .listen(8080, () => {
    console.log("8080포트에서 서버 연결 중...");
  });

만들고나서 http://localhost:8080 으로 접속하면 아래와 같은 화면이 나타납니다.

이번에는 위에서 작성한 js파일을 실행하여 봅니다. 실행은 아래와 같이 실행 할 수 있습니다.

C:\dev\nodejs\test> node simple_server.js

위처럼 실행하면 "8080포트에서 서버 연결 중..."이라는 메시지가 나오면 성공입니다. 이런 상태에서 다시한번  http://localhost:8080에 접속해 봅니다.

아까와는 다르게 로딩중으로 표시되지만 아무런 변화는 없습니다. 이는 서버가 실행되고 있으나 아직 아무것도 등록해주지 않았기 때문에 계속 로딩만 표시되는 것 입니다. 서버를 종료하기 위해서는 명령어를 입력했던 터미널에서 ctrl+c 를 입력하면 서버가 종료됩니다.

요청에 대한 응답

이번에는 페이지를 한번 만들어보도록 하겠습니다. 아까 simple_server.js 파일을 아래와 같이 수정하여 주십시오.

const http = require("http");

http
  .createServer((req, res) => {
    res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
    res.write("<h1> Node.js Server </h1>");
    res.end("<p>http page test ... </p>");
  })
  .listen(8080, () => {
    console.log("8080포트에서 서버 연결 중...");
  });

수정 후 다시한번 node 명령어를 실행하여 서버를 실행 후  http://localhost:8080에 접속해 봅니다. 그러면 아래와 같은 화면이 표시되는 것을 확인할 수 있습니다. 

간단히 코드에 대한 설명을 해보겠습니다. .createServer() 함수는 말 그대로 서버를 만드는 함수입니다. res.writeHead()는 응답에 대한 헤더 정보를 기록하는 함수이고 res.write()에는 클라이언트로 보낼 데이터를 넣어주면 됩니다. res.end()는 응답을 종료하는 메서드로 응답을 종료합니다.

createServer()함수 뒤에 .listen()을 붙여 클라이언트와 연결할 포트번호와 서버가 연결되면 실행할 콜백 함수를 넣습니다.

파일을 보내는 응답 코드

이번에는 html 문서를 응답으로 보내도록 하겠습니다. 일단 아래와 같이 html 을 만들어 줍니다. 저는 test.html 이라고 하겠습니다.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <title>test</title>
  </head>
  <body>
    Node.js Server Test html page
  </body>
</html>

그리고 js 파일을 아래와 같이 수정합니다.

const http = require("http");
const fs = require("fs").promises;

http
  .createServer(async (req, res) => {
    try {
      const f = await fs.readFile("./test.html");
      res.writeHead(200, { "Content-Type": "text/html; charset=utf-8" });
      res.end(f);
    } catch (err) {
      console.error(err);
      res.writeHead(500, { "Content-Type": "text.html; charset=utf-8" });
      res.end(err.message);
    }
  })
  .listen(8080, () => {
    console.log("8080포트에서 서버 연결 중...");
  });

다시한번 서버를 실행하여 http://localhost:8080 에 접속하면 아래와 같은 페이지를 볼 수 있습니다.

Node.js 로 서버를 만들어보려 합니다. 간단히 Node.js 와 자바스크립트에 대하여 간단히 정리를 해보았습니다.

개요

1. Node.js 란, 자바스크립트 런타임을 의미합니다.
2. Node.js는 논블로킹/비동기 처리 방식이기 때문에 사용하기 어렵다고 합니다. 
   논블로킹/비동기는 작업 흐름이 순차적이지 않고, 응답을 기다리지 않습니다. 블로킹/동기 방식보다 자원 낭비가 적습니다.
3. Node.js 는 싱글 스레드이지만 이벤트 루프가 있습니다. 
   이벤트 루프는 이벤트를 감지하며 작업을 위한 스레드를 생성하여 이벤트를 처리합니다.

ECMAScript(=ES)

ECMAScript 는 자바스크립트, J스크립트, 액션스크립트가 따르는 표준을 말합니다. 스크립트 언어들의 표준을 지키기 위하여 매년 6월마다 새로운 기능 혹은 규칙을 개정합니다. ES6(=ES2016) 버전에서 자바스크립트가 혁신적이게 바뀌게 되며 이 시점을 전후로 최신인지 구식인지를 판가름합니다.

간단한 자바스크립트 문법 정리

변수, 호이스팅

ES6 이전에는 변수 선언시 var를 사용했지만, ES6 이후로 되도록 const, let 를 사용해야합니다. 이유는 var의 변수 호이스팅과 function-level-scope로 인해 생기는 문제 때문입니다.

• 변수 호이스팅(Hoisting) : 변수의 선언과 초기화가 동시에 이루어져, 아직 값이 없음에도 오류가 나지 않는 현상
• function-level-scope: 함수의 블록 범위 내에서 선언한 변수는 함수 내에서만 인정하고 함수 외부에서 선언한 변수는 모두 전역변수가 된다

let과 const 의 차이

let과 const는 block-level-scope 입니다. 둘의 차이를 보면 let은 값을 재할당 할 수 있어 값의 변경이 가능합니다. const는 값을 재할당할 수 없어 변경할 수 없습니다. 

클로저

내부 함수가 외부 함수의 scope에 접근할 수 있는 것을 이야기합니다. 자바스크립트에서 scope는 함수 단위로 생성이됩니다. 한 함수의 inner()함수의 scope가 outer()함수의 scope를 참조하고 있고 outer()의 실행이 끝나고 소멸된 이후에도 inner()함수가 outer()함수의 스코프에 접근할 수 있다 것을 이야기합니다.

자주 사용하는 내장 함수

자바스크립트의 비동기 처리

콜백함수, Promise

 콜백은 나중에 실행되는 코드를 의미합니다. A()라는 함수가 있을때, 인자로 어떤 함수를 넣어주었다고 한다면 A함수의 모든 명령어를 실행한 후 마지막으로 넘겨받은 인자 callback을 실행하게 될것이고 여기서 인자로 들어가는 함수를 콜백 함수라고 합니다. 콜백함수를 사용하는 이유는 이를 이용하여 비동기 작업을 동기적으로 처리할 수 있기때문입니다.

 Promise는 코드의 중첩이 많아지는 콜백 지옥을 해결하게 해주는 자바스크립트 API입니다. 보낸 요청에 대해 응답이 준비되었을 때 알림을 주는 알리미 역할을 합니다.

async/await

ES7.6부터 사용할 수 있는 문법으로 Promise의 단점을 보안해주는 패턴입니다. Node.js는 8버전부터 async/await를 지원합니다. async/await를 사용하면 new Promise로 Promise 객체를 선언하고 resolve, reject를 넘겨주는 부분은 숨기겨 코드의 양이 줄어듭니다. try/catch를 통해 오류를 다룰수 있다는 장점도 존재합니다.

await는 async 키워드를 붙인 함수 안에 lock을 걸어 놓고 싶은 부분에 await를 붙이기만하면 됩니다. async/await를 이용하게 되면 비동기로 처리하고 싶은 함수에 async를 붙이고, 비동기 처리를 할 특정 부분에 await를 붙이기만 하면 됩니다.

비동기 상황에서의 예외 처리

비동기 상황에서의 예외처리는 Promise의 .catch()를 이용하거나, Promise의 .then()을 이용하는 방법이 있습니다. 또한, async/await의 예외처리 방식으로 사용이 가능합니다.

파이썬을 이용하여 마우스를 특정한 위치에 자동으로 클릭하는 프로그램을 만들어 보겠습니다. 특정 위치에 대한 정보를 얻고 그 위치에 마우스 포인터를 이동 시키고 몇초 간격으로 클릭을 실행하는 프로그램입니다. 프로그램은 GUI를 이용하여 만들어 볼 건데, 저도 처음 사용하는 라이브러리인 tkinter 를 사용해 보겠습니다. 간단한 설명 문서는 아래 사이트를 참조 하면 됩니다.

https://docs.python.org/ko/3/library/tkinter.html

마우스를 제어하기 위하여 키보드나 마우스를 제어할 수 있는 pyput 과 pyautogui 을 이용합니다. 관련 사이트는 아래를 참조하면 됩니다.

https://pypi.org/project/pynput/

https://pyautogui.readthedocs.io/en/latest/

위 이미지와 같이 tkinter를 사용하여 다이얼로그를 만들도록 하겠습니다. 우선 tkinter를 사용하기 위해서 import를 해줍니다. 그리고 아래와 같이 소스를 코딩하면 위와 같이 나타납니다.

from tkinter import *

root = Tk() # Tk클래스 객체 생성
root.title("마우스 자동 클릭") # 타이틀 이름 설정
root.geometry("550x180") # grid 형식으로 너비x높이 설정(픽셀단위)

root.mainloop() # Tk 클래스 객체의 mainloop 실행하여 다이얼로그 표시함함

빈 다이얼로그 창에 코드를 추가하여 버튼과 입력창을 만들어 보겠습니다. 

from tkinter import *

root = Tk() # Tk클래스 객체 생성
root.title("마우스 자동 클릭") # 타이틀 이름 설정
root.geometry("550x180") # grid 형식으로 너비x높이 설정(픽셀단위)

################
label1 = Label(root, text="X좌표")
label1.grid(row=1, column=1)

entry1 = Entry(root, width=10)
entry1.grid(row=1, column=2)

label2 = Label(root, text="Y좌표")
label2.grid(row=1, column=3)

entry2 = Entry(root, width=10)
entry2.grid(row=1, column=4)

button1 = Button(root, text="마우스위치")
button1.grid(row=1, column=5)

#################
label3 = Label(root, text="반복횟수")
label3.grid(row=2, column=1)

entry3 = Entry(root, width=10)
entry3.grid(row=2, column=2)
entry3.insert("end","120")

label4 = Label(root, text="인터벌(초)")
label4.grid(row=2, column=3)

entry4 = Entry(root, width=10)
entry4.grid(row=2, column=4)
entry4.insert("end","30")

##################
label5 = Label(root, text="* 120 회 * 30초 = 3600초(60분) 동안 동작")
label5.grid(row=3, column=2, columnspan=4)

##################
button2 = Button(root, text="클릭 시작")
button2.grid(row=4, column=3)
##################

root.mainloop() # Tk 클래스 객체의 mainloop 실행하여 다이얼로그 표시함함

위 소스로 실행되면 다이얼로그 창에 원하는 위치에 버튼과 입력창을 만들 수 있습니다.

이제 버튼이 클릭했을 때 동작하는 함수를 만들어 보겠습니다. 각 버튼에 아래와 같이 클릭시 실행하는 함수를 선언 할 수 있습니다.

button1 = Button(root, text="마우스위치", command=lambda: mousePointerPos())
# (중략)
button2 = Button(root, text="클릭 시작", command = lambda:startMacro())

위에서 실행될 함수를 작성하여 줍니다.

def mousePointerPos():
    with mouse.Listener(
        on_click=posClick
    ) as listener: listener.join()
    entry1.insert("end", x1)
    entry2.insert("end", y1)

def posClick(x, y, button, pressed):
    if pressed:
        global x1
        global y1
        x1 = x
        y1 = y

    if not pressed:
        return False

def startMacro():
    click_num = int(entry3.get())
    intervalSec = int(entry4.get())

    ##반복시작
    for a in range(0, click_num):
        time.sleep(intervalSec)
        pyautogui.click(x1, y1)

아래는 전체 코드입니다.

from tkinter import *
from pynput import mouse
import pyautogui
import time

root = Tk() # Tk클래스 객체 생성
root.title("마우스 자동 클릭") # 타이틀 이름 설정
root.geometry("550x180") # grid 형식으로 너비x높이 설정(픽셀단위)

################
label1 = Label(root, text="X좌표")
label1.grid(row=1, column=1)

entry1 = Entry(root, width=10)
entry1.grid(row=1, column=2)

label2 = Label(root, text="Y좌표")
label2.grid(row=1, column=3)

entry2 = Entry(root, width=10)
entry2.grid(row=1, column=4)

button1 = Button(root, text="마우스위치", command=lambda: mousePointerPos())
button1.grid(row=1, column=5)

#################
label3 = Label(root, text="반복횟수")
label3.grid(row=2, column=1)

entry3 = Entry(root, width=10)
entry3.grid(row=2, column=2)
entry3.insert("end","120")

label4 = Label(root, text="인터벌(초)")
label4.grid(row=2, column=3)

entry4 = Entry(root, width=10)
entry4.grid(row=2, column=4)
entry4.insert("end","30")

# checkbutton1 = Checkbutton(root, text="무한")
# checkbutton1.grid(row=2, column=5)
##################
label5 = Label(root, text="* 120 회 * 30초 = 3600초(60분) 동안 동작")
label5.grid(row=3, column=2, columnspan=4)

##################
button2 = Button(root, text="클릭 시작", command = lambda:startMacro())
button2.grid(row=4, column=3)
##################


def mousePointerPos():
    with mouse.Listener(
        on_click=posClick
    ) as listener: listener.join()
    entry1.insert("end", x1)
    entry2.insert("end", y1)

def posClick(x, y, button, pressed):
    if pressed:
        global x1
        global y1
        x1 = x
        y1 = y

    if not pressed:
        return False

def startMacro():
    click_num = int(entry3.get())
    intervalSec = int(entry4.get())

    ##반복시작
    for a in range(0, click_num):
        time.sleep(intervalSec)
        pyautogui.click(x1, y1)

root.mainloop() # Tk 클래스 객체의 mainloop 실행하여 다이얼로그 표시함함

지금 까지 간단하게 다이얼로그에 버튼, 입력창을 만들고 이것을 마우스 위치를 알아내여 마우스 클릭을 자동으록 실행하는 프로그램을 만들어 보았습니다.