노는게 제일 좋습니다.

Error: Minified React error #321

노는게 제일 좋습니다. — Sun, 1 Aug 2021 18:29:12 +0900

상황

useEffect부분에서 제목의 에러가 발생

import React from 'react';
import { useEffect } from 'react/cjs/react.production.min';

const Component = ({ userObj }) => {
    useEffect( () => { }, []);
    return ( <> </> )
}

export default Component;

문제

CRA환경에서 useEffect를 입력하면 자동완성되는 항목을 골랐다.

자연히 import도 똑바로 된 줄 알았는데, 이상한게 들어가 있었다.

원래 쓰던대로 잘 import해주면 된다.

import React, { useEffect } from 'react';

스크럼 요약

노는게 제일 좋습니다. — Sun, 18 Apr 2021 20:54:34 +0900

1. 정의

• 스크럼은 Ken Schwaber와 Jeff Sutherland가 1990년 고안하였음.

• 경험주의와 린 씽킹을 기초로 하는 애자일의 실천 도구 중 하나임.

• 개인과 조직이 복잡한 문제를 쪼개어 반복적·점증적인 해법을 활용하고 가치를 창출하도록 돕는 경량 프레임워크라 할 수 있음.

2. 구성요소

스크럼은 아래와 같은 요소가 합쳐져 동작함.

1) 이벤트

• 스프린트

- 스크럼의 핵심인 동시에 모든 이벤트의 컨테이너.

- 변경이 허용되지 않는 기간이며, 출시 가능한 증분을 산출함.

• 스프린트 계획 : 스프린트 시작 전 수행할 작업과 목표달성의 방법 선택.

• 일일 스크럼 회의 : 작업 진척도를 점검하고 스프린트 백로그를 조정.

• 스프린트 리뷰 : 스프린트 결과물(증분)을 검토하고 프로덕트 목표대비 진척을 확인.

• 스프린트 회고 : 다음 스프린트 진행을 위해 기존의 문제점과 개선점을 논의.

2) 팀

• 스크럼 마스터

- 스크럼이 매끄럽게 실행되는데 필요한 프로세스 관리를 담당.

- 직접적으로 제품의 가치를 높이거나 제품을 구현하는 것 보다는,

스크럼이 정상적으로 작동할 수 있도록 이해관계자들을 중재하고 지원하는 역할이 큰 구성원임.

- 이벤트를 관리하고 팀원들이 업무내용을 충분히 이해할 수 있도록 돕고 문제없이 증분이 산출되도록 함.

- 효과적인 프로덕트 목표 정의와 계획을 수립하는 일을 지원함.

• 프로덕트 오너

- 스크럼의 결과로 산출되는 프로덕트의 가치를 높이는 일을 담당.

- 프로덕트 백로그 이해관계자의 대표와 같음. 프로덕트 백로그를 명확하게 설정하고 우선순위를 정함.

• 개발자

- 직접적으로 구현을 담당.

- 스프린트마다 출시가능한 증분을 산출

- 스프린트 백로그를 계획하고 자신이 할 일을 관리할 능력이 있음.

3) 산출물

• 프로덕트 백로그

- 프로덕트 요구사항을 우선순위에 따라 정렬한 목록

- 프로덕트의 목표를 보여줌.

- 스크럼팀이 프로덕트 향상을 위해 해야 할 업무를 제공하는 유일한 출처

• 스프린트 백로그

- 스프린트 목표, 선택된 프로덕트 백로그 아이템 목록, 증분을 산출하기 위한 계획으로 구성된 스프린트의 계획.

- 스프린트의 목표를 보여줌.

- 개발자들이 스프린트 목표달성을 위해 계획한 업무를 가시적으로 표현함.

• 증분

- 스프린트의 산출물. 새로 완료되어 생겨난 증분은 기존의 증분에 더해짐.

- 완료의 의미 : 스프린트 결과물이 프로덕트에서 요구하는 품질기준을 충족했을 때,

프로덕트 백로그 아이템이 완료되었다고 표현. 그 동시에 새로운 증분이 탄생.

3. 스크럼의 실행

• 스크럼 구성요소의 실제 동작은 아래 그림처럼 반복적인 모형으로 그릴 수 있음.

• 스프린트 결과로 산출된 증분은 스프린트 리뷰 전후로 선보이게 됨.

• 스프린트 도중에 업무의 가치가 없다고 판단되면 프로젝트 오너의 결정으로 스프린트를 중단 할 수 있음.

• 스프린트의 결과를 통해서 프로덕트 백로그에 변화가 가해질 수 있음.

사진1 : 스크럼 과정

4. 이점

• 주기적인 스크럼 이벤트 진행 → 업무의 투명성·가시성 증가

• 잘게 나뉘어진 업무형태와 피드백 → 손쉬운 변경사항 대응, 경제성 증가

5. 문제와 한계

• 스크럼의 가치를 지켜 개발과정을 관리하기 위해서는

구성원 모두가 자신의 역할을 충실히 수행함과 동시에 적절한 능력·권한을 갖고 있어야 함.

• 그러나 개발자들에게 적절한 권한이 주어지지 못하여 진정한 스크럼 구성원으로서 일할 기회를 박탈할 우려가 있음

• 개발관리방식의 근본적 변화 없는 스크럼 도입은 오히려 제품결함을 야기할 수 있음.

6. 출처

1) 참고 문헌

• 김희천,『소프트웨어공학』(한국방송통신대학교 출판문화원, 2020), p. 51-55.

• "The 2020 Scrum Guide", Scrum Guides, 2020년 11월 18일 작성, 2021년 4월 18일 열람, https://scrumguides.org/scrum-guide.html

• "2020 Scrum Guite Korean", Scrum Guides , 게시일 표시없음, 2021년 4월 18일 열람, https://scrumguides.org/docs/scrumguide/v2020/2020-Scrum-Guide-Korean.pdf

• "THE SCRUM PAPERS: NUT, BOLTS, AND ORIGINS OF AN AGILE FRAMEWORK", scruminc, 2021년 3월 30일 작성, 2021년 4월 18일 열람, https://www.scruminc.com/scrumpapers.pdf

2) 사진

• [사진1:스크럼 과정] 참고문헌 中 "THE SCRUM PAPERS: NUT, BOLTS, AND ORIGINS OF AN AGILE FRAMEWORK"

Google Apps Script : CORS 및 '현재 파일을 열 수 없습니다'

노는게 제일 좋습니다. — Sat, 17 Apr 2021 21:45:42 +0900

2021. 4. 25

post요청을 넣을 때 data가 stringify되지 않은 쌩 json인 케이스를 추가하였다.

문제상황

Access to XMLHttpRequest at 'https://script.google.com/macros/s/AKfycbxpWbwsIH8_(중략)_xv3uK3v/dev' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

xhr.js:177 GET https://script.google.com/macros/s/AKfycbxpWbwsIH8_(중략)_xv3uK3v/deV net::ERR_FAILED

createError.js:16 Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)

Google Apps Script(이하 GAS)를 웹 앱으로 배포했다.

Spread Sheet를 컨테이너로 갖는 프로젝트도 있고, Script 그 자체로만 존재하는 프로젝트도 있다. 둘 모두 동일한 증상이 나타났다.

이 때 권한은 아래와 같이 설정했다.

실행 인증 : 나(소유자 본인)
액세스 권한 : 모든 사용자(익명 포함)

이렇게 권한을 부여한 경우 누가 어떤 계정으로 로그인했든, 심지어는 로그인하지 않았어도 get/post 요청이 정상적으로 가능해야한다. 근데 잘 되던게 갑자기 안되기 시작했다.

웹앱 url을 웹브라우저에 직접 입력했을 때는 '현재 파일을 열 수 없습니다'라는 화면이 출력되고, js로 get/post 요청을 넣었을 때는 CORS+네트워크 오류가 뜬다.

원인

1. 구글 로그인 꼬임문제

GCP에서 버켓 CORS를 설정하니, 요청 헤더값에 무언가 동봉해주니 하는 문제가 아니다.

로그인되어있는 구글 계정이 여러개이면 이런 문제가 발생한다.

2. 요청데이터 타입 문제

데이터를 문자열이 아닌 {a:11}와 같은 js데이터 타입을 보내는 경우에도 CORS에러가 발생한다.

해결

1. 구글 로그인 꼬임문제

1). 계정 전부 로그아웃

2-1). 모두 로그아웃된 그 상태로 스크립트 요청

2-2). 또는, 어느 계정이든지 좋으니 '하나의 계정'만 로그인후 스크립트 요청

즉, 소유자를 포함한 여러 계정이 동시에 로그인 되어있지 않으면 해결.

2. 요청데이터 타입 문제

axios.post('https://wonj.in/', {a:11, b:22});

위와 같은 코드는 작동하지 않는다.

axios.post('https://wonj.in/', JSON.stringify({a:11, b:22}));

stringify하든 ' ' 따옴표를 붙이든 해서 데이터부분을 문자열로 만들어주어야 한다.

3. 결과

상당히 어이없게 잘 되는 것을 확인할 수 있다.

npm 6.x.x -> 7.x.x 업데이트 이후 node 실행시 chokidar dependency 오류

노는게 제일 좋습니다. — Sun, 11 Apr 2021 18:50:19 +0900

상황

/home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/chokidar.js:17
throw new Error(
^

Error: No version of chokidar is available. Tried chokidar@2 and chokidar@3.
You could try to manually install any chokidar version.
chokidar@3: Error: Cannot find module 'chokidar'
Require stack:
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/chokidar.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/DirectoryWatcher.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/watcherManager.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/watchpack.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/webpack/lib/webpack.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/react-scripts/scripts/start.js
chokidar@2: Error: Cannot find module 'watchpack-chokidar2'
Require stack:
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/chokidar.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/DirectoryWatcher.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/watcherManager.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/watchpack.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/webpack/lib/node/NodeWatchFileSystem.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/webpack/lib/node/NodeEnvironmentPlugin.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/webpack/lib/webpack.js
- /home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/react-scripts/scripts/start.js

    at Object.<anonymous> (/home/wonjinyi/Desktop/NyamNyamLab/test/node_modules/watchpack/lib/chokidar.js:17:7)

레포지토리를 클론떠서 새로 패키지를 설치하는김에 npm도 업데이트 해주었다

기존의 npm 버전은 6.x.x 이고, 업데이트 이후 npm 버전은 7.9.0이다.

문제가 생긴 프로젝트는 npx crate-react-app [xx]로 생성한 CRA템플릿이다.

원인

chokidar는 watchpack안쪽에 있는 모듈로, 핫 리로딩에 관련되어있다.

기존에 설치되어 있던 chokidar 2에 문제가 있어 개발자측에서 chokidar 3으로 버전을 올려놓았었다.

그냥 chokidar 깔아주면 된다.

해결

npm i -g npm
npm update
npm cache verify
npm i -D chokidar
npm i

같은걸 두 번씩 하는 과도한 명령이긴 한데, 아무튼 된다.

cache verify는 아무런 피드백도 없이 시간이 많이 소요된다. 본인의 경우 7분 걸렸다.

이유는 모르겠지만 chokidar 2가 있는 디렉토리 안에서 chokidar를 설치하면 에러가 난다. 디렉토리 바깥해서 해주면 잘 된다.

QGIS 벡터레이어 : 도형 생성/병합/분리

노는게 제일 좋습니다. — Fri, 2 Apr 2021 00:34:31 +0900

참고 : bis-gis라는 사이트의 QGIS게시판이 거의 유일한 한국 커뮤니티인 것 같다. 우선 QGIS에서 제공하는 문서를 모두 살펴보고, 해결이 안되거나 짬바가 필요한 경우는 bis-gis를 살펴보자. 여기서 해결이 안되면 스택익스체인지 같은 곳을 찾아나서자.

pyqgis 개발자 쿡북 docs.qgis.org/3.16/en/docs/pyqgis_developer_cookbook/intro.html

pyqgis API qgis.org/pyqgis/3.0/index.html

목적과 개요

이미 도형/레이어 병합을 거쳐 완성되어있는 shp확장자의 벡터레이어가 있다. QGIS상에서 병합을 모두 풀어 실제 '도형'의 숫자를 세고 싶다. QGIS GUI로 먼저 해결하며 과정을 살펴보고, 이를 pyqgis 스크립트로 간단하게 레이어 내 도형의 숫자를 세어보고자 한다.

QGIS 백터 레이어 위에 도형(Geometry)을 그릴 수 있다. 이 때,

기본적으로 한 개 도형은 한 개의 객체(Object)로 세어진다.
여러 도형들을 '도형 병합(merge)'기능을 사용해 하나의 객체로 묶어낼 수 있다.
도형 병합되어 상황에 따라 여러 레이어로 나뉠 수도 있는데, 이 레이어들을 병합할 수도 있다.

반대 과정의 작업도 QGIS툴을 이용하면 할 수 있다.

레이어 편집과 도형그리기

(좌) 편집모드 전환 과정 / (우) 편집모드가 적용된 레이어

레이어에 무언가 변화를 가하려면 현재 그 레이어가 '편집 모드'여야 한다. 편집모드로 진입하려면 아래 과정을 따른다.

해당 레이어 [우클릭] - [편집 모드 전환]

전환된 뒤에는 레이어 이름 왼쪽에 연필같은 그림이 나타난다. 뷰어로 돌아가려면 같은 방법으로 토글할 수 있다.

그 다음 상단 메뉴의 [편집]을 펼쳐보면 폴리곤/원/직사각형/정다각형/타원 항목이 활성화되어있음을 확인할 수 있다.

폴리곤이든 원이든 원하는 영역이 잘 지정되었으면, [마우스 우클릭]-[엔터]를 통해서 도형을 레이어에 얹을 수 있다.

도형 그리기를 취소하고자 할 때에는, [편집]-[선택]-[객체(들) 선택]을 하면 선택모드로 전환되며 문제가 해결된다.

도형 병합

병합 과정

병합이 완료된 도형. 영역이 겹친다면 서로를 구분짓던 선이 사라진다.

병합할 도형을 선택하고 [편집]=[선택한 객체 병합]으로 병합할 수 있다. 이제 사진에서 선택된 4개의 원은 마치 하나의 도형처럼 동작한다. 객체로는 1개로 센다.

현재 상태의 도형을 'multipart 도형'이라고 한다. 원래 따로따로 존재하던 도형은 'single part 도형'이라고 한다.

멀티파트 스플릿

4개의 원이 하나의 객체로 묶였고, 이 중에서 오른쪽 2개의 원은 아예 하나의 싱글파트가 되어버렸다. 이 상황에서 3개의 싱글파트로 분리하고자 한다.

상단의 [툴박스]-[벡터도형]-[다중부분을 단일부분으로]를 통해 3개의 싱글파트로 분리해낼 수 있다. 조랭이떡처럼 붙어버린 저건.. 이 방법으로는 답이없다.

멀티파트 스플릿 플러그인

매번 툴박스를 까서 레이어를 만들고, 본래 레이어와 병합하는 과정을 거치기에는 너무 번거롭다. 해당 레이어에서 직접 멀티파트를 스플릿할 수 있는 스크립트가 있으면 좋겠다. 직접짜긴 귀찮으므로 이미 잘 쓰이고있는 플러그인을 이용한다.

위와 같은 과정을 통해 multipart split 플러그인을 설치한다. 설치하고 나면 상단의 [편집] 메뉴 아래에 'Split Feature(s) Parts'가 추가된다.

스플릿하고자 하는 multi part 도형을 선택하고, 해당 플러그인을 동작시키면 해당 레이어에 직접 single part 도형들을 그린다. 기존의 multi part 도형은 사라진다.

배열 state가 업데이트 되었음에도 re-rendering되지 않는 경우

노는게 제일 좋습니다. — Fri, 12 Mar 2021 02:27:12 +0900

export default App() {
    const [arr, setArr] = useState([1,2,3]);
    const deleteSam = (e) => {
        const temp = arr;
        temp.splice(2,1);
        setArr(temp);
    };

    return (
        <div>
            <ul>
            { arr.map( (item, index) => <li key={index}>{item}</li> ) }
            </ul>

            <button onClick={ deleteSam }>버튼버튼</button>
        </div>
    );
}

함수 deleteSam에서 arr의 값을 새로운 변수에 담고, 배열을 가공하고, 가공된 결과를 arr state에 업데이트 시켜주고 있는 것같다. 그러나 리렌더링이 되지 않는다.

이유는 별다른것이 아니라, 실제로 set__ 구문으로 state가 바뀌지 않았으므로 렌더링되지 않는 것이다. 배열은 얕은 복사가 되므로, temp에 실제로 들어가있는 값은 [1,2,3]이 아니라 참조값이다.

temp.splice(2,1);

부분에서 이미 arr는 리렌더링 없이 값이 업데이트 되었고, setArr(temp)는 setArr(arr)과 별반 차이없는 구문이다. 값이 바뀌지 않았으니 리렌더링도 없다.

해결은 스프레드 연산자 내지는 filter함수로 다소 답답하게 가능하다.

velopert.com/3638

누구든지 하는 리액트 8편: 배열 다루기 (2) 제거와 수정 | VELOPERT.LOG

이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 우리는 지난 섹션에서 배열에 데이터를 추가하는 방법과 배열 내부의 내용들을 화면에 보여

velopert.com

이게 싫다면 갖은 더러운방법으로 강제 리렌더링을 하든지, 깊은복사를 무겁게 돌리든지 하여 해결하면 되겠다.

react.js로 ant-design 시작하기

노는게 제일 좋습니다. — Sun, 28 Feb 2021 23:36:05 +0900

설치

npm install antd

antd 하나만 깔면 자잘한 패키지들까지 모두 설치해준다.

컴포넌트에서 사용

import { React } from "react";
import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons"

export default function Menu () {
    return (
        <div className="Menu">
            <Tooltip title="버튼">
                <Button shape="circle" icon={<FilterOutlined />} />
            </Tooltip>
        </div>
    );
}

다른 UI 컴포넌트와 비슷한 방식으로 사용할 수 있다. 아이콘버튼에 마우스를 올리면 툴팁이 나타나는 예제이다.

import 'antd/dist/antd.css';

하다보면 뭔가 똑바로 안나오는 경우가 있는데 (예시 : Spin), 그럴 때는 antd의 css파일을 하나 불러오면 된다. 여기까지 왔으면 다른거 다 필요없고 컴포넌트 목록보고 쏙쏙 뽑아먹으면 된다.

ant.design/components/button/

Button - Ant Design

If you need several buttons, we recommend that you use 1 primary button + n secondary buttons, and if there are more than three operations, you can group some of them into Dropdown.Button.

ant.design

커스텀 스타일링 : Less

본래 ant design 문서의 'customize Theme'부분에서는 Less로 정의된 테마를 어찌어찌 잘 작업해주는걸 설명해주고 있다. 첫 번째 링크는 설명 문서이고, 두 번째 링크는 default값으로 정의된 모든 값을 보여주는 파일이다.

ant.design/docs/react/customize-theme

Customize Theme - Ant Design

Ant Design allows you to customize our design tokens to satisfy UI diversity from business or brand requirements, including primary color, border radius, border color, etc. We are using Less as the development language for styling. A set of less variables

ant.design

github.com/ant-design/ant-design/blob/master/components/style/themes/default.less

ant-design/ant-design

A UI Design Language and React UI library. Contribute to ant-design/ant-design development by creating an account on GitHub.

github.com

커스텀 스타일링 : styled-components로 스타일 덮어쓰기

공식문서에서 설명해준게 하기 싫어서 다른 방법을 가져왔다. 다른 문서들을 잘 살펴보니, 'styled-components'를 이용하여 Ant design에서 제공하는 스타일을 덮어쓸 수도 있었다. 그냥 styled-components 쓸 때 하던일 그대로 하면 된다.

npm install styled-components

먼저 npm으로 내려받아주고

import { React } from "react";
import styled from "styled-components";

import { Button, Tooltip } from "antd";
import { FilterOutlined } from "@ant-design/icons"

export default function Menu () {
    return (
        <div className="Menu">
            <Tooltip title="버튼">
                <MenuButton shape="circle" icon={<FilterOutlined />} />
            </Tooltip>   
        </div>
    );
}

const MenuButton = styled(Button)`
    background-color : red;
    `;

위와 같이 스타일을 스타일을 먹여줄 수 있다.

import styled from "styled-components"

import { 뭐시기 } from "antd";

export default function App() {
	return (
    	<스타일먹인 뭐시기 />
    );
}

const 스타일먹인 뭐시기 = styled(뭐시기)`
color : 빨강빨강;
    background-color : 초록초록;
	`;

이 내용이 핵심이다.

React setState와 후속 코드의 실행순서 뒤바뀜 해결

노는게 제일 좋습니다. — Sat, 13 Feb 2021 03:45:22 +0900

state를 변화시킨 뒤에 실행되어야 하는 코드가 있을 때, 단순히 위-아래의 순서로 나열해서는 의도대로 동작하지 않을 수 있다.

// Class component
export default class App extends React.Component {
  state = {
  	a : true,
  };

  setState( { a : false } );
  goHome();

  render () {
  	return ( < > ~-~-~-~- </ > );
  }
}

function goHome () {
	// 퇴근시켜주세요!! 퇴근시켜주세요!!
}

//function component
export default function App() {
    const [a, setA] = useState(true);

    setA(false);
    goHome();

    return ( < > ~-~-~-~- </ > );
}

function goHome () {
	// 퇴근시켜주세요!! 퇴근시켜주세요!!
}

위 코드의 원래 의도는 state값 a를 변화시키고 > 렌더링하고 > goHome을 실행하는 것이었다.

// Class component : SOLVED
export default class App extends React.Component {
  state = {
  	a : true,
  };

  setState( { a : false }, goHome );
  

  render () {
  	return ( < > ~-~-~-~- </ > );
  }
}

클래스 컴포넌트의 setState의 경우 콜백으로 goHome을 넣어주면 해결된다

//function component : SOLVED
export default function App() {
    const [a, setA] = useState(true);
    useEffect( 
    	() => { goHome(); }
    	, [a]
    );
    
    setA(false);
   
    return ( < > ~-~-~-~- </ > );
}

함수 컴포넌트에서 훅을 사용한다면 useEffect를 사용하면 해결된다.

react + express 세션이 제대로 박히지 않는 경우

노는게 제일 좋습니다. — Fri, 12 Feb 2021 05:07:00 +0900

react, axios, express, express-session, cors 를 사용하고 있다.

클라이언트에 세션이 제대로 박히지 않는 경우가 있었다

경우1 : 애초에 세션자체가 프론트로 넘어가지 못하는 경우
경우2 : 세션이 프론트로 넘어왔으나, 이후 재요청시 백엔으로 세션을 넘기지 못하는 경우

모든내용을 기억하지는 못하지만, 가장 중요한 것은 두 가지였다.

프론트에서 백으로 요청할때 헤더 항목을 뭔가 빼먹지 않았는가
백에서 세션을 생성할 때 프로퍼티를 뭔가 빼먹지 않았는가

await axios.post(
  "https://jindoback.wonj.in/sessiontest",
  {'a':'test'},
  { withCredentials: true }
);

axios로 프론트->백 요청을 한다면 withCredentials : true를 빼먹지 말아야한다.

const corsOptions = {
    origin : true,
    credentials : true
};

app.use(cors(corsOptions));

한편, 백엔드에서는 credential을 true값으로 설정하고, 필요에 따라 origin 허용을 설정한다. 참고로 credential이 true라면, origin은 오직 하나의 값만 가질 수 있다. 프론트 개발서버/실서버 origin값을 바꿔가며 테스트하기 너무 힘들어서 그냥 들어오는건 싹다 허용해주기로 했다. ( cors미들웨어의 'origin:true'는 ORIGIN 헤더값에 *를 넣는 것과는 전혀 다른 것이다. )

app.use(session({
    secret:process.env.COOKIE_SECRET,
    resave:false,
    saveUninitialize:true,
    cookie : {
        httpOnly : true,
        sameSite : 'none',
        maxAge : 5300000,
        secure : true,
    },
}));

백에서 세션을 만들때는 특히 samesite와 secure프로퍼티를 잘 살펴야한다. 브라우저 개발자 도구의 Network탭에서 해당요청의 Response 항목을 보면 노란색의 warning이모지 '⚠️' 가 떠있을 수 있다. 이 내용은 보통 위 속성값의 변경/추가로 해결할 수 있었다.

세션이 유지되자 기쁨의 눈물을 흘리던 상황

답은 생각보다 가까이에 있었다.

Nomad Coders : 바닐라JS로 그림판 만들기 수강

노는게 제일 좋습니다. — Fri, 5 Feb 2021 00:12:47 +0900

https://nomadcoders.co/javascript-for-beginners-2

바닐라 JS로 그림판 만들기 - 노마드 코더 Nomad Coders

Build a Painting App

nomadcoders.co

데이터 라벨링툴과 같이 그리기 입력이 동반되는 프로그램에서 캔버스가 쓰일 것 같아, 미리미리 가볍게 들었다. 내용이 깊지 않고 MDN문서를 참조하여 기능을 그대로 사용하는 수준이어서, 하루 2시간씩 이틀동안 모두 볼 수 있었다. Canvas API, 2D context에 대해 다루고, 그 외 내용은 일절 없어서 좋았다. 다른 지식을 더 찾아보기 위한 개념은 충분히 주입해준다.

내용 요약

재래식 HTML, CSS, JS를 이용한 레이아웃, 스크립트 구성
reset CSS로 브라우저 기본 스타일 밀어버리고, 새로운 스타일 지정
Canvas Path생성, Stroke/Fill style 지정
[Paint/Fill] 토글 버튼으로 Stroke, Rect각각 그리기
더미 a 요소와 canvas.toDataURL을 이용한 이미지 다운로드

웹뷰만 달랑 있는 안드로이드 앱 만들기 : 설치부터 배포까지

노는게 제일 좋습니다. — Tue, 2 Feb 2021 00:41:44 +0900

배경

1. 장난으로 도배하는데만 사용하는 프로그램을 만들었다. 여기에 이것저것 쓸모없이 재미있는 것들을 싹다 붙여보고 있다. 안드로이드 앱이 눈에 들어왔다. 이 웹서비스를 안드로이드 어플리케이션으로 만들어 보여주고 싶다.

2. React Native같은 다른 방식으로 재구성하기는 귀찮고, 그냥 웹뷰만 띄워주는 유사(?) 안드로이드 앱으로 만들고 싶다.

3. 그런데 나는 안드로이드 스튜디오를 켜본적도 없다. 설치부터 새로 배워야한다.

4. 사용하는 OS는 하모니카3.0이다. 다른 배포판과 상황이 미묘하게 다를 가능성이 있다.

유사 앱 만들기 과정 : 준비 Section

안드로이드 스튜디오 설치 및 실행

https://developer.android.com/studio/install?hl=ko#linux

Android 스튜디오 설치 | Android 개발자 | Android Developers

Windows, macOS 또는 Linux에서 Android 스튜디오를 설정 및 설치합니다.

developer.android.com

공식 문서에 적혀있는 과정만 따라하면 된다. 2번에서 'studio.sh를 실행합니다'라고 하는데, 터미널에 'studio.sh'를 그대로 치면 안된다. './studio.sh'로 실행할 수 있다.

설치가 끝난 뒤에는 마찬가지로 studio.sh를 실행하면 안드로이드 스튜디오를 켤 수 있다.

환경변수에 안드로이드 스튜디오 추가

매번 android-studio/bin으로 들어가서 studio.sh를 켜기는 너무 귀찮다. 어느 경로에서나 'studio.sh'를 입력하여 실행할 수 있도록 환경변수를 등록하자. 먼저 [파일시스템]-[etc]에 [우클릭]-[관리자 권한으로 열기]로 진입한다.

[environment]를 켜고, bin의 경로를 PATH문자열의 맨 끝에 추가해준다. 추가하는 내용의 앞에 :를 붙여 앞내용과 구분해줘야한다. 글쓰는 본인의 설치경로는 /home/wonjinyi/android-studio/bin이다. 이후 터미널을 재실행하면 어디에서나 studio.sh 만 입력하여 안드로이드 스튜디오를 실행할 수 있다.

템플릿 받기

https://github.com/slymax/webview

slymax/webview

a template project for android studio. Contribute to slymax/webview development by creating an account on GitHub.

github.com

클론을 따거나 ZIP파일을 받아 적당한 위치에 두고, 안드로이드 스튜디오에서 불러온다.

템플릿을 불러오면 이런 식의 화면이 나와있을것이다. 템플릿 수정 작업에서는 크게 네 가지를 알면 된다.

1. 노랑 : 빌드 메뉴 : 설정을 마치고 APK파일을 뽑아낼 때 사용

2. 빨강 : 프로젝트 파일 목록 : 이 포스트에서 가리키는 파일들은 모두 여기서 선택할 수 있다.

3. 초록 : 코드가 보여지는 공간 : 2번(빨강) 공간에서 더블클릭하면 이 공간에 열린다.

4. 보라 : 뭐 많이 표시해주는 공간 : 안드로이드에 빌드 시켜놓으면, 지금 뭐하고있는지 여기서 보여준다.

유사 앱 만들기 과정 : 작업 Section

템플릿 내용 수정하기

패키지 이름, 앱 이름, 그리고 내가 보여주고픈 웹서비스URL. 세 가지를 차례로 수정하자.

각각의 항목에 대해 시작, ✔️끝으로 표시해두었다.

'[app]아래의 패키지 이름' 설정시작...

(좌) 체크상태 / (우) 체크 해제상태

먼저 [app]아래의 패키지 이름을 원하는 대로 바꾸어주자. 왼쪽 사진의 좌측 초록박스에 보이는 'com.example.app'이 현재 패키지 이름이다. 중간의 example을 다른 이름으로 바꾸어줄 것이다. 이 패키지 이름은 프로젝트의 여러군데서 쓰이고있다. 무식하게 우클릭-이름바꾸기를 하면 기나긴 고통의 길을 걷게 될 것이다.

왼쪽 사진의 [톱니바퀴]-[Compact Middle Packages 체크 해제] 과정을 수행한다. 그러면 묶여있던 com.example.app이 오른쪽 사진처럼 3단계의 디렉토리로 풀려보이게 된다.

(좌) Rename선택 방법 / (우) Rename 창

왼쪽 사진처럼 [example 우클릭] - [Refactor] - [Rename]으로 창을 띄운다. 그 창에서 오른쪽사진처럼 example을 대체할 이름을 적어넣고, [Refactor]를 클릭하면 안드로이드 스튜디오가 열심히 패키지이름을 전부 바꿔준다.

잠시 후 [app]아래의 모든 com.example.app이 com.beermaster.app으로 바뀐 것을 확인할 수 있다.

✔️ '[app]아래의 패키지 이름' 설정 끝!

'[gradle]아래의 패키지 이름' 설정시작...

build.gradle(Module: Webview-master.app)이다. 그 위에있는 파일이 아니다!!

패키지 이름 설정의 마지막이다. [Gradle Scripts]아래에 있는 ★app레벨★의 build.gradle을 열고, defaultConfig.applicationId를 변경해준다. 이미 했던 것처럼, example부분을 원하는 이름으로 바꾸어준다.

✔️ '[gradle]아래의 패키지 이름' 설정 끝!

'앱 이름' 설정시작...

(좌) 앱 설치화면 / (우) 설치된 앱들

설치할 때와 설치 후 표시되는 '앱 이름'을 수정하자. 템플릿의 기본값은 Webview App이다.

(좌) strings.xml / (우) AndroidManifest.xml

[app]-[res]-[values]-[strings.xml] 파일 안에서 WebView App부분을 원하는 이름으로 바꾸어주면 된다.

참고로, 이 내용은 [app]-[manifests]-[AndroidManifest.xml]의 application, activity에 각각 적용된다.

✔️ '앱 이름' 설정 끝!

'앱 이름' 설정시작...

앱에 웹서비스를 연결하는 두근대는 순간

이제 우리가 이미 서비스하고있는 웹프로그램의 url을 넣어주면, 아이콘을 제외하고는 모든 작업이 끝난다.

[app]-[java]-[com]-[우리가 지은 이름]-[app]-[MainActivity.java]로 들어가, 24번째 줄 주석을 풀어준다.

그 다음, 인수로 웹서비스의 url을 넣어준다.

✔️ '앱 이름' 설정 끝

템플릿 아이콘 설정하기

(좌) 사용할 이미지 / (우) 아이콘을 넣어줄 디렉토리

우선 512x512px의 이미지 파일이 있어야 한다. 그림판이든 일러스트든 잘 그려서 가져오자. 원래같으면 모든 크기와 모양의 아이콘에 대응해서 열심히 작업해야하겠지만, 안드로이드 스튜디오는 512x512px이미지만 냅다 박으면 알아서 다 만드는 기능을 제공한다.

오른쪽 사진에 보이는 [app]-[res]-[mipmap]-[ic_launcher]안에 아이콘을 집어넣어줄 것이다.

(좌) Image Asset 찾아가기

[ic_launcher 우클릭] - [New] - [Image Asset]을 눌러 설정창을 띄운다

(좌)Configure / (우)Confirm

다른 것은 건들필요 없고, [Path]에서 준비해둔 512x512px 이미지를 불러온뒤 [Next]-[Finish]로 설정창을 닫는다.

만든것들 깃에 추가할지 말지 물어보는 내용

"방금 니가 던진 이미지로 이거저거 많이 만들어놨는데, Git에 추가할까?" 하고 물어보는 내용이다. 추가하기를 원하면 [Add]만 계속 누르면 된다. 적당한 순간에 언젠간 닫힌다. 원하지 않으면 그냥 캔슬 눌러버리면 된다. 여기까지 왔다면, 이제는 빌드과정중 에러와의 싸움만 남았다.

유사 앱 만들기 과정 : 배포 Section

서명키 만들기

이제 실제로 APK파일을 뽑아볼 순간이다.

[Build]-[Generate Signed Bundle / APK]로 창을 열어준다. 이 포스트에서는 APK를 기준으로 설명할 것이므로, 아래의 APK에 체크하고 넘어간다.

(좌)에서 Create New를 누르면 / (우)가 나타난다.

넘어왔다면, 일단 앱에 사용되는 Key를 새로 만들면 된다. [Create new]를 눌러 오른쪽사진처럼 물흐르듯 빈칸을 채워주면 된다. 오른쪽 사진에서 이유는 잘 모르겠지만, 클릭과 키보드입력이 전부 안먹힐 때가 자주 있다. 그럴땐 다 끄고 [Build]-[Generate Signed Bundle/APK]부터 시작하는게 빠르다.

New Key Store 창에서 설정한 Key store Password, Alias, Key Password 세 가지를 잘 기억해두어야 한다.

서명된 APK 만들기

Key를 잘 만들었다면, 비밀번호와 Key alias를 입력하고 다음으로 넘어간다.

Build Variants는 release를 선택하고, Signature Versions은 V1, V2 둘 다 체크한다. 개발과정에서 V2만 체크를 한 적이 있는데, 구글플레이에 올라가지 않는 현상을 겪었다.

[Finish]를 누르면 프로젝트로부터 Apk를 추출하기 시작한다.

(좌) Apk가 잘 뽑힌 로그 / (우) 잘 뽑힌 Apk 실물 영접

왼쪽에는 Build로그, 오른쪽에는 Event Log를 띄워두고 보면 에러잡기에 도움이 된다. 이 화면과 같이 나오면 별문제없이 잘 완료된 것이다.

뽑힌 Apk가 있는 위치는 프로젝트 폴더 아래의 app/release에 'app-release.apk'라는 이름으로 있다. 이게 이걸 핸드폰에 옮겨서 설치해보면 된다. 에뮬레이터로 돌릴 수도 있지만, 여기에 대한 설명은 굳이 여기에 적지 않는다.

SDK를 설치하지 않아 일어나는 에러

Gradle sync failed: 
com.android.tools.idea.gradle.project.sync.idea.issues.SdkPlatformNotFoundException: 
Module: 'app' platform 'android-29' not found

이건 그냥 필요한 버전의 SDK를 깔아주면 된다. 저 오류의 경우 'android-29'를 못찾는다고 했으니, 사진에서 API Level이 29인 'Android 10.0 (Q)'를 깔면 된다.

react.js 빌드된 프로젝트 gh-pages로 배포할 때 custom domain이 초기화되는 현상

노는게 제일 좋습니다. — Mon, 12 Oct 2020 19:13:38 +0900

문제상황

뭐야 내 도메인 돌려줘요

react로 만든 프로젝트를 빌드한다음, gh-pages모듈로 배포하였다

그랬더니 미리 깃헙레포에 설정해둔 custom domain이 빈칸으로 바뀌어버린다.

해결

우선, 깃헙에서 custom domain을 본래대로 잘 써넣는다.

그 다음에 리액트 프로젝트 안에서 CNAME 파일을 만들고 custom domain에 해당하는 내용을 써넣는다

위치는 루트가 아닌 public폴더 아래로 한다. npm run build할 때 public 아래의 CNAME파일을 복사하여 빌드한다.

public아래에 CNAME파일을 만든 다음 빌드하면, 깃헙페이지의 custom domain이 그대로 잘 남아있는 것을 확인할 수 있다.

Github Page에 Build된 react프로젝트 배포 : manifest.json 404 에러

노는게 제일 좋습니다. — Sun, 11 Oct 2020 00:25:17 +0900

제목을 보고 정말 답이없다고 느꼈는데, 또 달리 쓸 방법이 없다.

문제상황

sunda.wonj.in/:1 GET https://sunda.wonj.in/sunda_front/static/css/main.5f361e03.chunk.css net::ERR_ABORTED 404

manifest.json:1 GET https://sunda.wonj.in/sunda_front/manifest.json 404

manifest.json:1 Manifest: Line: 1, column: 1, Syntax error.

1. React.js를 이용하여 프로젝트를 만들었다.

2. npm run build로 빌드파일을 뽑아내고, 그 다음 gh-pages 의 gh-pages -d build로 업로드했다

3. package.json의 homepage 값은 깃헙페이지의 기본값인 wonjinyi.github.io/sunda_front

깃헙페이지 설정에서는 커스텀도메인을 먹였고, 그 값은 sunda.wonj.in

해결

깃헙페이지에 커스텀도메인이 적용되어있다면, package.json의 homepage항목의 값도 기본제공 주소가 아닌 커스텀도메인으로 넣어주어야 한다.

Nomad Coders : React Native로 날씨앱 만들기 완강

노는게 제일 좋습니다. — Tue, 6 Oct 2020 22:28:39 +0900

원래 React로 영화만들기를 완강한 날 모두 봤어야했는데, 프로젝트를 여러가지 굴리고 있고 출근도 하다보니 좀 늦어졌다. 일,월,화 저녁을 이용하여 수강했다. 무료강의이다.

React Native라고 하지만 사실은 Expo를 사용한다. 나는 네이티브가 필요하지 않고 단순 흥미로 강의를 보게되었기에 더 좋았다. 아주 간단하게 강력한 기능들을 사용할 수 있는 기회였다. 주요 내용은 아래와 같다.

React Native의 내장기능 : View, Text컴포넌트와 StyleSheet
Axios로 API 요청하기 : Open Weather Map의 Current Weather API이용
Expo Dev tool 사용하기, 에뮬레이팅하기
Expo 기본제공 아이콘 사용

좋은 내용들을 쉽고 빠르게 알려주는 점도 마음에 들었지만, 처음에 보기 어려울 공식 문서들을 펼쳐주며 친절히 설명해주는 방식이 나는 너무도 고맙게 느껴졌다. 이제 Expo와 React Native의 공식문서를 어떻게 봐야할지 알고 있는 상태이다.

전문적으로 네이티브를 파지는 않겠지만, 꼭 어플리케이션을 개발해야 할때면 오늘의 경험을 꺼내어 쉽게 문제를 해결할 수 있을 것이다. 재미있는 강의였다.

React Native도구 'Expo'와 실제 Android기기 연결이 안될 때

노는게 제일 좋습니다. — Sun, 4 Oct 2020 18:14:51 +0900

문제상황

(좌) 개발PC 에뮬레이팅 환경 / (우) 휴대폰

Something went wrong

개발 컴퓨터에 필요한 모듈은 모두 설치하였고, expo init - npm start 로 정상적으로 에뮬레이팅 환경을 띄워놓았다.

이 상태에서 안드로이드 기기 ( 갤S8 ) Expo 앱에서 QR코드로 연결하고자 하였다. 그 때, 위와 같은 화면이 떴다. 에뮬레이팅 환경 터미널에는 아무 에러도 뜨지 않는다.

개발PC와 안드로이드 기기는 공유기 와이파이로 연결되어있다.

원인

와이파이로 연결되어있을 때, 에뮬레이팅 환경에서 LAN으로 연결하려고 하면 문제가 많이 생긴다.

가장 많은 경우가 서로 다른 네트워크에 연결된 경우 ( 개발 pc와 안드로이드 기기가 다른 와이파이를 잡은 경우 )

그 다음이 네트워크 어댑터 우선순위에 문제가 있는 경우이다.

해결

http://snowdeer.github.io/linux/2018/10/13/ubuntu-change-network-priority/

Network Interface 우선 순위 변경하기 · snowdeer's Code Holic

Network Interface 우선 순위 변경하기 13 Oct 2018 | 리눅스 Network Interface 우선 순위 변경하기 Ubuntu에서 랜카드를 여러 개 꽂아서 네트워크 인터페이스(Network Interface)가 여러 개 존재할 경우 우선 순위를

snowdeer.github.io

꼭 LAN환경으로 해야만 한다면 순위를 잘 변경해주면 되는데, 우분투환경에서는 ifmetric을 사용하여 간단하게 설정할 수 있다.

설정하기 귀찮으면 Tunnel 모드로 전환하여 테스팅하면된다. CONNECTION에서 Tunnel을 선택하면, 터미널에 'Tunnel ready'가 출력된다. 이 때 안드로이드 기기에서 QR코드로 연결하면 정상적으로 에뮬레이팅된다.

Nomad Coder : ReactJS로 영화 웹 서비스 만들기 수강

노는게 제일 좋습니다. — Sun, 4 Oct 2020 17:01:27 +0900

https://nomadcoders.co/react-fundamentals/lobby

노마드코더 라는 동영상 강의사이트는 이전부터 광고로 참 익숙했지만, 강의 이름부터가 무시무시해서 손이 안갔던 사이트이다. 내가 손도 못대본 기술 이름이 쓰여있어서, 내가 들어서 쓸모가 있을까에 대한 생각이 있었다.

순수한 HTML+CSS+JS로만 공부하다가, 어느순간 백엔드에 대한 교양을 갖출 필요성이 느껴져 Node.js를 공부했다. 프론트엔드도 내가 사용해보지 못한 기술에 대한 욕심이 생겼다.어느정도 인지도있는 프레임워크/라이브러리를 공부하고자 했고, React.js를 택했다. 러닝커브가 비교적 사악한 라이브러리라고 했다. 그래서 클론코딩으로 가르쳐준다는 노마드코더 강의를 들어봤다. 강의 내용은 아래와 같다.

function component와 props
class component와 state + component lifecycle
propTypes로 타입체킹하기
React-router-dom
github-pages 배포

교수자 이름이 니콜라스 라고 하는데, 굉장히 속도감있고 위트있는 진행이 특징이다. 당장 필요없고 자연스레 알게될 것들은 빼고, 익힐 수 있는 것부터 알려준다. 생활코딩과 어느정도 유사하다. 보통 강의를 하게 되면 열정에 가득차서 여러 내용을 알려주려고 하지만, 나는 그걸 다 받아들이기가 버겁다. 빠르고 작은 노마드코더 강의가 내 성향에 꼭 맞았다. 특히, 가르쳐주지 않는 내용은 왜 지금 가르치지 않는지, 지금 배우는 내용과는 어떤 관계가 있는지를 명확히 설명해주어 신뢰가 더 간다.

유료강의들은 10만원대가 넘어가기도 하지만, 무료강의 퀄리티를 봤을 때 질은 보장되지 않을까 싶다. 무료강의도 허접한 강의들이 있는게 아니고, 상당히 친절하고도 확실한 내용을 알려주는 좋은 내용들로 채워져있다.

이제 Node.js와 React.js의 아주아주 기초적인 부분들을 구경했으니, 내 간단한 서비스를 구현하면서 삽질을 반복할 일만 남았다. 어느정도 삽질에 익숙해지면 다시 강의를 들으러 돌아가야겠다는 생각을 했다.

다만, 인강을 보다보니 옆에있는 React Native도 너무 탐이난다. 딱 이것까지만 듣고 내 서비스 SUNDA를 만들러 가야겠다.

VS code에서 React.js 개발서버 시작시 Error: ENOSPC 에러

노는게 제일 좋습니다. — Sat, 3 Oct 2020 12:21:57 +0900

문제상황

OS는 하모니카를 사용중이며, 오래된 노트북으로 작업한다. (2012년도 삼성 노트북)

React.js를 이용하여 프론트엔드 개발 공부를 하고 있고, 에디터는 VS code를 사용하고 있다.

npx Create-react-app을 이용하여 초기 프로젝트를 세팅하였고, package.json에 기본적으로 "npm start"라는 개발서버 실행 스크립트가 포함되어있다.

Starting the development server...

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/wonjinyi/Desktop/LearnReact/movie/public'
    at FSWatcher.start (internal/fs/watchers.js:169:26)
    at Object.watch (fs.js:1422:11)
    at createFsWatchInstance (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:38:15)
    at setFsWatchListener (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    at FSWatcher.NodeFsHandler._watchWithNodeFs (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:233:14)
    at FSWatcher.NodeFsHandler._handleDir (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:429:19)
    at FSWatcher.<anonymous> (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:477:19)
    at FSWatcher.<anonymous> (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:482:16)
    at FSReqCallback.oncomplete (fs.js:169:5)
Emitted 'error' event on FSWatcher instance at:
    at FSWatcher._handleError (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/index.js:260:10)
    at createFsWatchInstance (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:40:5)
    at setFsWatchListener (/home/wonjinyi/Desktop/LearnReact/movie/node_modules/chokidar/lib/nodefs-handler.js:81:15)
    [... lines matching original stack trace ...]
    at FSReqCallback.oncomplete (fs.js:169:5) {
  errno: -28,
  syscall: 'watch',
  code: 'ENOSPC',
  path: '/home/wonjinyi/Desktop/LearnReact/movie/public',
  filename: '/home/wonjinyi/Desktop/LearnReact/movie/public'
}
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! movie@0.1.0 start: `react-scripts start`
npm ERR! Exit status 1
npm ERR! 
npm ERR! Failed at the movie@0.1.0 start script.
npm ERR! This is probably not a problem with npm. There is likely additional logging output above.

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/wonjinyi/.npm/_logs/2020-10-03T02_36_24_937Z-debug.log
(base) wonjinyi@wonjinYi:~/Desktop/LearnReact/movie$

Error: ENOSPC: System limit for number of file watchers reached, watch '/home/wonjinyi/Desktop/LearnReact/movie/public'

정상적으로 모든 코드를 작성한 뒤 "npm start"로 개발서버를 실행하고자 하였으나, 위와 같은 오류가 발생하며 실행되지않는다.

위와 같은 현상이 언제 나타나는지는 아직도 확신이 없다. 진짜 아무때나 나타나기 때문이다. 겪어보면 정말 어이가없다.

어제 : 개발서버 잘 굴리다가 잠시 서버 종료. 필요없는 파일 하나 삭제하고나서 개발서버 재구동 -> 에러발생

-----> 작업하던 프로젝트 싹 다 지워버리고, CRA로 아예 새로운 프로젝트를 생성.

-> 에러발생했을 당시와 똑같이 모든 파일작업함

-> 정상구동 확인 후 컴퓨터 종료

오늘 : 컴퓨터 켠 다음 아무런 작업을 하지 않고, 개발서버 실행 -> 에러발생

해결의 실마리

깃헙 개츠비 레포의 질의응답글을 통해 VS Code 공식문서를 찾았다. 똑같은지는 모르겠지만 관련있어 보이는 내용을 찾을 수 있었다. 그 내용을 정리해둔다. VS code는 파일변화 체크를 무턱대고 전부 다 하지 않는다. 어느정도까지 체크해줄지 프로젝트 규모의 한계를 둔다.

When you see this notification, it indicates that the VS Code file watcher is running out of handles because the workspace is large and contains many files.

너무크면 VS code가 보다가 파업을 해버린다는거다. 이 괘씸한 콤-퓨타에게 더 많은 일을 시킬 수 있는 방법이 필요하다.

해결하기

(base) wonjinyi@wonjinYi:~$ cat /proc/sys/fs/inotify/max_user_watches
8192
(base) wonjinyi@wonjinYi:~$

위 명령어를 쉘에 치면, 현재 어느정도의 규모까지 vs code file watcher가 파일변화를 체크할 수 있는지 알 수 있다. 본인은 8192라는 값이 나왔다.

The limit can be increased to its maximum by editing /etc/sysctl.conf and adding this line to the end of the file:
fs.inotify.max_user_watches=524288

The new value can then be loaded in by running sudo sysctl -p.

위와 같은 방법으로 file watcher가 감당할 수 있는 한계를 늘일 수 있다고 한다. 하나하나 따라가보자

(base) wonjinyi@wonjinYi:/$ sudo vi /etc/sysctl.conf

먼저 쉘에서 /etc/sysctl.conf파일을 vim으로 실행하자. vim조작이 어렵다면 생활코딩 강의를 참고하면 된다.

fs.inotify.max_user_watches=524288

파일이 열렸다면, 원하는 곳 아무데나 위 내용을 추가해준다.

추가했다면, [esc] - [ :wq! ] - [ ENTER ] 를 눌러 '저장하고 닫기'를 하자.

(base) wonjinyi@wonjinYi:/$ sudo sysctl -p
fs.inotify.max_user_watches = 524288

마지막으로, 위 명령어를 입력하여 변경내용을 시스템에 반영한다. 어떤내용이 반영되었는지 출력될 것이다. 같은내용이 나오면 성공한 것이다.

Compiled successfully!

You can now view movie in the browser.

  Local:            http://localhost:3000
  On Your Network:  http://172.30.1.51:3000

Note that the development build is not optimized.
To create a production build, use yarn build.

원래 작업하던 프로젝트로 돌아가 "npm start"로 개발서버를 구동해보았다. 정상적으로 잘 되는 것을 볼 수 있다.

남아있는 문제아닌 문제

file watcher limit값을 더 높이게 되면 그만큼 서버실행에 걸리는 시간이 길어진다. 당연한 이야기이다.

8,000대에서 500,000으로 올렸는데, 당연하게도 상당한 체감이 되었다. 하지만 에러 신경쓰면서 하는 것보단 마음이 편하다.

속도가 중요하다면 다른 방법을 더 찾아보아야 할 것이다.

github 저장소를 VScode + git 로컬저장소로 clone

노는게 제일 좋습니다. — Fri, 2 Oct 2020 16:50:31 +0900

배경

github에 새로운 저장소를 생성했다. 이 저장소를 로컬의 git저장소로 클론을 뜨고싶은데, 에디터는 vs code를 사용하고 싶다.
또, 로컬에서 깃헙으로 push할 때 계정정보를 입력하는 과정이 생략되었으면 좋겠다.

ㄴ clone 뜨기

ㄴ credential store 설정하기

해결-1 : clone뜨기

먼저, 깃헙 저장소에서 저장소 주소를 복사한다.

그 다음, VS code에서 버전관리 - CLone Repository 를 누르면 나오는 입력창에 복사한 저장소 주소를 입력하고 엔터를 누른다.

파일 탐색기가 뜨는데, 깃헙에서 클론된 파일로 로컬저장소를 구성할 경로를 잘 선택하면 된다.

vs code 위쪽 중간을 보면 username과 password를 차례로 입력하도록 한다. 잘 입력해주자.

문제가 없었다면 vs code에서 '니 저장소 잘 클론됐는데, 함 열어줄까?' 하고 물어본다.

열어보면 잘 클론된 것을 확인할 수 있고, 내용을 수정하면 버전관리 탭에 내역이 뜨는 것을 확인할 수 있다.

해결-2 : credential store 설정하기

클론이 정상적으로 잘 되었고, git설정도 잘 떠왔다. 그런데 push하려면 깃헙의 username과 password를 받으려고 한다. 받지 않도록 하는 방법이 있다.

git config credential.helper store

요약하자면, 위 커맨드를 입력하고 최초 한 번만 username과 password를 입력해주면 된다. 그 뒤에는 입력했던 정보를 이용해 자동으로 인증절차를 진행한다. 자세한 내용은 git 공식 사이트와 더 자세하게 설명해준 다른 포스트를 참고하면 된다.

본인의 경우는 최초입력조차 받지 않았는데, 컴퓨터 어딘가에 있는 기존의 인증정보를 가져오지 않았나 싶다.

깃헙에서 커밋내역을 확인해보니, 정상적으로 반영되어있었다.

Mysql 이름 맨뒤에 특수문자가 들어간 테이블 선택하기

노는게 제일 좋습니다. — Thu, 1 Oct 2020 16:55:33 +0900

문제상황

mysql> show tables;
+--------------------+
| Tables_in_nodebird |
+--------------------+
| Follow             |
| PostHashtag        |
| hashtags           |
| posts              |              |
| users,             |
+--------------------+
5 rows in set (0.00 sec)

실수로 테이블 이름에 ,(콤마)를 붙여서 생성해버렸다

선택도 안되고
mysql> SELECT * FROM users,;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

드랍도 안되고
mysql> DROP TABLE users,
    -> ;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

mysql> DROP TABLE users,;
ERROR 1064 (42000): You have an error in your SQL syntax; check the manual that corresponds to your MySQL server version for the right syntax to use near '' at line 1

나보고 어쩌라고

users, 를 지우고 users를 새로 만들거나

또는 users,의 이름을 users로 바꾸고 싶은데, 둘 다 안해준다.

해결

테이블 이름을 ` ` 백쿼트로 감싸면 된다.

mysql> ALTER TABLE `users,` RENAME users;
Query OK, 0 rows affected (0.40 sec)

mysql> show tables;
+--------------------+
| Tables_in_nodebird |
+--------------------+
| Follow             |
| PostHashtag        |
| hashtags           |
| posts              |
| users              |
+--------------------+
5 rows in set (0.00 sec)

(Ubuntu) js Sequelize : mysql의 root계정에 access denied될 때

노는게 제일 좋습니다. — Sat, 26 Sep 2020 02:32:48 +0900

AccessDeniedError [SequelizeAccessDeniedError]: Access denied for user 'root'@'localhost' (using password: YES)
    at ConnectionManager.connect (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/sequelize/lib/dialects/mysql/connection-manager.js:118:17)
    at processTicksAndRejections (internal/process/task_queues.js:97:5) {
  parent: Error: Access denied for user 'root'@'localhost' (using password: YES)
      at Packet.asError (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/packets/packet.js:712:17)
      at ClientHandshake.execute (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/commands/command.js:28:26)
      at Connection.handlePacket (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/connection.js:425:32)
      at PacketParser.onPacket (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/connection.js:75:12)
      at PacketParser.executeStart (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/packet_parser.js:75:16)
      at Socket.<anonymous> (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/connection.js:82:25)
      at Socket.emit (events.js:315:20)
      at addChunk (_stream_readable.js:295:12)
      at readableAddChunk (_stream_readable.js:271:9)
      at Socket.Readable.push (_stream_readable.js:212:10) {
    code: 'ER_ACCESS_DENIED_ERROR',
    errno: 1045,
    sqlState: '28000',
    sqlMessage: "Access denied for user 'root'@'localhost' (using password: YES)"
  },
  original: Error: Access denied for user 'root'@'localhost' (using password: YES)
      at Packet.asError (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/packets/packet.js:712:17)
      at ClientHandshake.execute (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/commands/command.js:28:26)
      at Connection.handlePacket (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/connection.js:425:32)
      at PacketParser.onPacket (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/connection.js:75:12)
      at PacketParser.executeStart (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/packet_parser.js:75:16)
      at Socket.<anonymous> (/home/wonjinyi/Desktop/LearnNode/200925/node_modules/mysql2/lib/connection.js:82:25)
      at Socket.emit (events.js:315:20)
      at addChunk (_stream_readable.js:295:12)
      at readableAddChunk (_stream_readable.js:271:9)
      at Socket.Readable.push (_stream_readable.js:212:10) {
    code: 'ER_ACCESS_DENIED_ERROR',
    errno: 1045,
    sqlState: '28000',
    sqlMessage: "Access denied for user 'root'@'localhost' (using password: YES)"
  }
}

위와같은 모양새의 오류를 만나 어쩔 줄 몰라 온갖 자료를 다 뒤집어봤다. 영어와 중국어를 보다가 해결이 안돼서 한숨을 쉬고있었는데, 해답은 의외로 한국어자료에 있었다.

Mysql 에러코드 1698과 1045 두 가지에 대해서 확실하게 해결 본 자료를 소개한다.

1. ERROR 1698 (28000): Access denied for user 'root'@'localhost

mysql -h localhost -u root -p 로 접속 시 위와 같은 오류가 뜨는 경우가 있다.

이는 `mysql` schema의 user 테이블에는 root계정에 대한 plugin이라는 것이 저장되어있는데, 이 타입이 잘못 지정되어서 그렇다.

아래 링크를 참고하여 root의 plugin을 auth_socket 에서 mysql_native_password로 변경하면 된다.

https://bscnote.tistory.com/77

ubuntu에서 mysql의 root계정이 로그인 안될때.

참고: https://stackoverflow.com/questions/39281594/error-1698-28000-access-denied-for-user-rootlocalhost ubuntu같은 일부 리눅스 시스템에서 mysql을 설치하고 $ mysql -u root -p 으로 로그인 시도를하면..

bscnote.tistory.com

2. ERROR 1045 (28000) : Access denied for user 'root'@'localhost' (using password: YES)

아마 위 1698에러를 해결했다면, 새로운에러 1045가 나타날 것이다. 이 문제는 두 가지 원인을 생각해볼 수 있다.

첫 번째로, 그냥 비밀번호를 틀렸거나 (오타가 났거나, 까먹었거나)

두 번째로, 암호화된 비밀번호값이 비어있거나

이 글까지 왔다면 각각 확인해볼 기력도 없이 이미 지쳐있을 것이다. 그냥 둘 다 해결해보자.

https://velog.io/@codemcd/MySQL-%EB%B9%84%EB%B0%80%EB%B2%88%ED%98%B8-%EC%9E%AC%EC%84%A4%EC%A0%95%ED%95%98%EA%B8%B0-zxk1qm3y6c

MySQL 비밀번호 재설정하기

팀 프로젝트에서 MySQL을 사용할 때 평소에 사용하지 않는 비밀번호를 사용해서 이를 변경하려 했다. 간단히 구글에 검색해서 변경하려고 했는데 생각지도 못한 오류들이 너무 많았다. 버전도 경

velog.io

https://seyul.tistory.com/82

MySQL root 비밀번호 재설정하기

이 글에서는 MySQL root 비밀번호 잊었을 때 root 비번을 재설정하는 해결법 알아보자. MySQL 프로세스 죽이기 mysqld_safe를 사용하면 비밀번호 없이 MySQL root 계정으로 접속 가능하다. mysqld_safe를 사용하

seyul.tistory.com

외부에서 홈서버에 접속할 수 있게 설정하기

노는게 제일 좋습니다. — Tue, 25 Aug 2020 00:28:04 +0900

배경과 문제

공유기를 사용하는 컴퓨터에서 서버를 돌리고자 한다.

외부에서는 8080번 포트로 접속하도록 하고, 내부 서버의 80번포트로 연결되도록 하고싶다.

이 서버에 접근하기 위해서는

1. 포트포워딩 혹은 DMZ설정이 필요하며

2. 외부에서 접근하도록 하려는 포트가 개방되어있어야 한다.

또, 다양한 변수가 있을 수 있는데 대표적으로는 두 가지이다.

1. 특정 인터넷 제공사는 특정 포트를 사용자가 쓸 수 없게 하기도 한다

2. 특정 인터넷의 기본 공유기(혹은 모뎀 겸용)는 포트포워딩이 안되거나, 아주 까다로운 설정이 필요한 경우도 있다.

일반적인 경우 인터넷회선 - 인터넷 모뎀 - 공유기 로 연결되어 있을 것이고, 개인 공유기에는 여러가지 기기가 물려있을 것이다.

외부 망과 공유기 안의 사설망을 1:1로 대응시켜주는 과정이 필요하다. 위 그림과 같은 과정을 어떻게 설정하는지 간단하게 정리했다.

포트 개방

가장 먼저, 사용하고자 하는 포트가 개방되어있는지 확인한다. yougetsignal에서 간단하게 확인할 수 있다. 사진에서는 닫혀있다(closed)고 표시되고 있다. 이 경우 간단하게 포트를 개방할 수 있다.

iptables -I INPUT <규칙번호> -p tcp --dport <개방할 외부 포트번호> -j ACCEPT
(예시) iptables -I INPUT 1 -p tcp --dport 8080 -j ACCEPT

위와 같은 커맨드를 터미널에 입력하면 되는데, <규칙번호>는 기존에 등록되지 않은 아무 숫자나 쓰면 된다. <개방할 외부 포트번호>는 말 그대로 외부에서 접속할 때 사용하고자 하는 포트번호를 입력하면 된다. 이 외의 자세한 내용은 여기를 참고하면 된다.

해당 커맨드로 포트를 개방한 뒤, 다시 yougetsignal에서 포트가 open되어있다고 나오는지 확인한다.

내부 기기 IP 고정할당

일반적으로 192.168.0.1로 접속하면 공유기 관리페이지를 이용할 수 있다. 이 관리페이지에서 왼쪽에 빨갛게 표시된 '내부 네트워크 설정'과 '포트포워드 설정' 두 가지에서 간단한 설정만 해주면 모든 과정이 끝이 난다. 먼저, '내부 네트워크 설정'을 살펴보자.

서버가 돌아가는 기기에 할당될 내부IP를 고정시켜주도록 하자. 기본적으로는 동적으로 남는 IP를 아무거나 주는데, 이 과정에서 서버 컴퓨터의 IP가 바뀌어 접속이 안될 우려가 있다. 그래서 예를 들자면 192.168.0.2 라는 IP는 오직 서버컴퓨터만 할당받을 수 있도록 하는 것이다.

iptime기준 가장 아래 [수동 ip 할당 설정]에서 왼쪽 사진과 같은 절차를 거치면, 오른쪽 사진처럼 '설정된 IP/MAC 주소'에 서버컴퓨터의 IP와 MAC이 나타날 것이다. 여기까지 왔다면 서버컴퓨터에 특정 IP가 고정적으로 할당되도록 설정을 마쳤다.

포트 포워딩

이제 외부ip의 포트와, 서버ip 포트를 임의로 1:1매칭 시켜주는 '포트 포워딩'만 남았다. 그냥 사진에서 나오듯 '규칙이름', '외부포트', '내부포트'(=서버 포트) 를 입력한 뒤, '현재 접속된 ip주소'에 체크해준뒤 '수정'을 누르면 목록에 추가된다.

접속 테스트

이제 외부에서 우리 서버로 정상적으로 접속 가능한지 보면 된다.

예시로 든 경우에는 12.12.12.12:8080 으로 접속했을 때, 192.168.0.2:80 에 접속이 성공해야 한다.

공유기 자체 DDNS

한 가지 문제가 있다. ISP에서는 우리에게 항상 동일한 IP주소를 할당해주지 않는다. 공유기 내부망 기본 설정이 그랬듯, 남는 IP중에서 아무거나 할당해준다. 즉, 외부IP가 변할 가능성이 있다는 것이다.

원래대로라면 ISP에 연락해서 고급진 가격의 고정IP를 받아야겠지만, 공유기에서는 보통 DDNS라는 것을 제공한다. 외부IP가 12.12.12.12에서 갑자기 13.13.13.13으로 바뀌었다고 해보자. DDNS를 사용하지 않으면 서버관리자가 직접 사용자에게 연락을 돌려야 할 것이다. "그... 주소가 바뀌었습니다.. ㅠㅠ.. 바뀐 주소로 접속해주세요.."

하지만 DDNS를 사용한다면, 사용자는 오직 wonjinyi.iptime.org와 같은 도메인만 알면 된다. ip가 바뀌면 공유기가 알아서 저 도메인에 바뀐 ip를 연결해준다.

iptime공유기의 DDNS설정은 '특수기능'에 들어있다.

각각 '<원하는글자>.iptime.org', '이메일', '아무 비밀번호'를 입력하고 [추가]버튼을 누른다.

그러면 위와 같이 접속상태가 바뀌다가, 정상등록으로 표시된다. 예시의 경우 wonjinyi.iptime.org:8080으로 접속하면 12.12.12.12:8080 으로 접속한 것과 같다. ip가 99.99.99.99:8080 으로 바뀌더라도 등록한 도메인인만 알고있다면 아무 문제 없다.

여기까지 왔다면 홈서버 접근을 위한 기본적인 설정은 모두 마쳤다.

끝

서버는 돈주고 사서 쓰는게 좋을 것 같다.

구글시트 내용을 가져와 웹에서 보여주는 방법

노는게 제일 좋습니다. — Sun, 23 Aug 2020 03:15:57 +0900

링크 모음

배경

DBMS를 사용할 줄 모르지만, 어딘가에 축적된 데이터를 가져와서 웹 화면에 뿌려주고 싶을 때가 있다. 본인은 정말로 HTML조차 모른채로 '이시국 보건증'을 구성하면서 DB의 필요성을 느꼈지만, 길고 긴 고난의 삽질을 할 시간이 없었다. 당시에는 코로나가 여름즈음 되면 종식될 줄 알았기에, 하루빨리 내 데이터를 보여주는 일이 가장 중요했기 때문이다.

쉽고 빠른 길을 찾던 중 구글 스프레드시트를 구글API와 앱스를 통해 사용할 수 있다는 사실을 우연히 접했다. 그 날부터 익숙한 도구인 구글시트에 대해 파고들기 시작했다. 여러가지 초보자의 삽질을 하며 알아낸, 가장 최근에 사용하는 확실+간단한 방법을 공유하고자 한다.

이 많은걸 대체 어떻게 모았을까

개요

1) 구글시트에서 해야하는 작업

내용 작성하기 → 웹으로 배포하고 열람권한 설정하기

2) 웹프로그램에서 해야하는 작업

웹으로 배포된 내용을 json으로 파싱해 가져오기 → 이용하기 편리한 형태로 저장 → 보여주기

구글시트 작업하기

먼저 구글시트에 위와 같이 데이터를 입력한다. 프로그램에서 이용하기 쉬우려면 1행은 일종의 '대표하는 이름'이 되어야 한다.

예를들어, A열을 보면 1행은 '지역'으로서 2~5행의 내용들을 '대표하는 이름'이라고 할 수 있다. 이걸 뭐라고 부르는지는 잘 모르겠고, 비슷한 모양새를 가진 Dataframe에서는 Column(열) 이라고 부르는걸 봤다. 그래서 나도 저걸 column 이라고 부를 것이다.

내용을 모두 작성했다면 [파일] - [웹에 게시]를 누른다. 그러면 팝업창이 뜨게되는데, 사용하고자 하는 [시트]를 선택하고 [웹페이지]로 게시한다. 마지막으로 [게시] - [확인] 버튼을 누르면 최종적으로 게시가 된다.

게시된 링크로 들어가보면 구글시트에 작성한 내용이 잘 나오는 것을 확인할 수 있다. 하지만 우린 저 링크를 사용하지 않는다.

구글시트 편집창의 주소를 보면 빨간색박스와 같이 유난히 긴 조합의 글자가 있다. 이 시트를 가리키는 일종의 KEY이다.

https://spreadsheets.google.com/feeds/list/여기에 KEY를 넣어주세요/1/public/full?alt=json

저 KEY를 위 URL중간에 넣고 접속해보자. 그러면 우리가 작성한 내용이 JSON이라는 무시무시한 형태로 나타나게 된다.

혹시 본인이 게시한 시트가 기본으로 만들어져있는 1번시트가 아니면, KEY값 뒤에 있는 1의 값을 잘 바꿔주면 된다.

https://spreadsheets.google.com/feeds/list/1R5i8g6SfcDbvuEQ8v_zkAQFfCAVZjmr8ajTlDJB_mmQ/1/public/full?alt=json

지금 본인이 작성하고 있는 시트에 대한 JSON을 보여주는 URL은 위와 같다. 여기로 접속할 수 있다. 이 URL을 잘 적어두자. 프로그램에서 사용할 것이다. json내용이 너무 어지러워서 정렬해 보고싶다면, JSON lint에서 할 수 있다.

프로그램 작성하기

실제 돌아가는 웹페이지와 깃허브 저장소를 먼저 공개한다.

<body>
  <article>
    <hr>

    <h1 class="name">이름이 표시될 곳</h1>
    <p class="region">지역이 표시될 곳</p>
    <p class="phone">전화번호가 표시될 곳</p>

    <hr>

    <h1 class="name">이름이 표시될 곳</h1>
    <p class="region">지역이 표시될 곳</p>
    <p class="phone">전화번호가 표시될 곳</p>

    <hr>

    <h1 class="name">이름이 표시될 곳</h1>
    <p class="region">지역이 표시될 곳</p>
    <p class="phone">전화번호가 표시될 곳</p>

    <hr>

    <h1 class="name">이름이 표시될 곳</h1>
    <p class="region">지역이 표시될 곳</p>
    <p class="phone">전화번호가 표시될 곳</p>

    <hr>
  </article>
</body>

먼저 HTML문서는 간단하게 작성하였다. 각 row의 이름, 지역, 전화번호를 표시한다.

window.addEventListener('DOMContentLoaded', main);

async function main(){
	const TARGET={
		name : document.getElementsByClassName('name'),
		region : document.getElementsByClassName('region'),
		phone : document.getElementsByClassName('phone')
	};
	const SOURCE = 'https://spreadsheets.google.com/feeds/list/1R5i8g6SfcDbvuEQ8v_zkAQFfCAVZjmr8ajTlDJB_mmQ/1/public/full?alt=json';
	const COLUMNS = ['이름', '지역', '전화번호'];
	
	const DATA = await separateRowFromJson(SOURCE, COLUMNS);

	for(let i=0; i<DATA.length; i++){
		TARGET['name'][i].textContent = DATA[i]['이름'];
		TARGET['region'][i].textContent = DATA[i]['지역'];
		TARGET['phone'][i].textContent = DATA[i]['전화번호'];
	}
}

async function separateRowFromJson(SOURCE, COLUMNS){
	const FETCHED_SOURCE = await fetch(SOURCE);
  	let temp = await FETCHED_SOURCE.json();
 	temp = temp['feed']['entry'];

	let _DATA = [];
	for(var i=0; i<Object.keys(temp).length; i++){
		_DATA[i]={};
		for(var k=0; k<Object.keys(COLUMNS).length; k++){;
			_DATA[i][COLUMNS[k]] = temp[i]['gsx$'+COLUMNS[k]]['$t'];
		}
	}
	
	return _DATA;
}

코드도 상당히 간단하다. json형태의 내용을 불러와서 객체의 배열로 저장하고, 이걸 화면에 띄워주는게 전부이다.

main함수의 상수 SOURCE는 json내용이 있는 url, COLUMNS는 우리가 작성한 시트의 1행 내용들이다. 이 두 가지를 separateRowFromJson이라는 함수를 통해서 위와 같이 가공한다.

대충 구글시트가 뱉는 json 생김새

_DATA[i][COLUMNS[k]] = temp[i]['gsx$'+COLUMNS[k]]['$t'];

separateRowFromJson내용중 위 부분이 대체 뭔지 궁금할 수 있는데, 그냥 구글시트가 뱉는 json에서 우리가 필요한 정보가 저 부분에 저런 형태로 있다. 그에 맞춰 저렇게 써놓은 것이다.

끝

기본적으로 구글시트가 웹에 게시되어 있기 때문에, 외부에 노출하면 큰일나는 정보는 다른 방법으로 처리해야 한다. 또, 한가지 용도로 사용하는게 아니라 여러곳에서 복잡하게 내용을 참조하여 사용하는 경우, 구글 시트로 처리하면 매우 고통받을 수 있다. 여러가지 뷰를 함수를 사용해서 시트로 미리 만들어놓아야 할텐데, 잠깐 해보니 사람 할 일이 아닌 것 같았다.

포트가 사용중이어서 서버프로그램을 실행 할 수 없을 때

노는게 제일 좋습니다. — Sun, 23 Aug 2020 00:53:00 +0900

문제

돌아가고 있던 서버의 프로세스가 문제가 생겼는데, 포트가 사용중이어서 프로그램을 재실행 할 수 없는 경우가 있다.

이 경우 사용중인 포트에서 어떤 프로세스가 돌아가고있는지, 해당 프로세스를 어떻게 죽일 수 있는지 알면 된다.

events.js:292
      throw er; // Unhandled 'error' event
      ^

Error: listen EADDRINUSE: address already in use :::8080
    at Server.setupListenHandle [as _listen2] (net.js:1313:16)
    at listenInCluster (net.js:1361:12)
    at Server.listen (net.js:1447:7)
    at Object.<anonymous> (/home/wonjinyi/Desktop/LearnNode/200823.js:9:6)
    at Module._compile (internal/modules/cjs/loader.js:1137:30)
    at Object.Module._extensions..js (internal/modules/cjs/loader.js:1157:10)
    at Module.load (internal/modules/cjs/loader.js:985:32)
    at Function.Module._load (internal/modules/cjs/loader.js:878:14)
    at Function.executeUserEntryPoint [as runMain] (internal/modules/run_main.js:71:12)
    at internal/main/run_main_module.js:17:47
Emitted 'error' event on Server instance at:
    at emitErrorNT (net.js:1340:8)
    at processTicksAndRejections (internal/process/task_queues.js:84:21) {
  code: 'EADDRINUSE',
  errno: 'EADDRINUSE',
  syscall: 'listen',
  address: '::',
  port: 8080
}

해결

1. lsof로 사용중인 포트에서 죽이고자 하는 프로세스ID를 알아낸다. 아래 내용에서는 node의 PID인 22731이다.

(base) wonjinyi@wonjinYi:~/Desktop/LearnNode$ lsof -i tcp:8080
COMMAND   PID     USER   FD   TYPE DEVICE SIZE/OFF NODE NAME
chrome   2189 wonjinyi   64u  IPv6 396182      0t0  TCP ip6-localhost:54042->ip6-localhost:http-alt (ESTABLISHED)
node    22731 wonjinyi   28u  IPv6 396158      0t0  TCP *:http-alt (LISTEN)
node    22731 wonjinyi   36u  IPv6 396183      0t0  TCP ip6-localhost:http-alt->ip6-localhost:54042 (ESTABLISHED)
node    22731 wonjinyi   37u  IPv6 396994      0t0  TCP ip6-localhost:http-alt->ip6-localhost:54044 (CLOSE_WAIT)

2. kill -9 <프로세스ID> 로 프로세스를 죽인다.

(base) wonjinyi@wonjinYi:~/Desktop/LearnNode$ kill -9 22731
[1]+  죽었음               node 200823

3. 이후 다시 프로그램을 실행하면 해당 포트에서 정상적으로 실행된다.

fade-in/out 적용된 modal

노는게 제일 좋습니다. — Mon, 10 Aug 2020 00:55:09 +0900

요약

코드보러가기 링크

배경
문제
해결

배경

이전에 모달창을 다음과 같이 구현했었다.

메인 컨테이너가 숨겨져있을 때는 modal, hidden 두 개의 클래스를 가지고 있다가, 나타날 때는 hidden을 빼는 방식이었다.

See the Pen modal - legacy by wonjinyi (@wonjinYi) on CodePen.

위 코드에 대해 모달이 나타날 때 페이드인, 숨겨질 때 페이드아웃 효과를 주려고 하였으나, 간단한 해결이 어려웠다.

문제

기존 코드의 hidden 클래스는 display:none 을 적용하는데, 이 때문에 페이드 인아웃(opacity에 대한 transition)을 적용하는데는 적절하지 않았다. display:none이 있는 경우는 정상적으로 transition을 적용할 수 없다.

내가 원하는 모달창을 만들기 위한 요건은 다음과 같다.

모달창은 비활성화 되어있을 때에는 아예 없는 것처럼 동작해야한다. (투명도만 0인상태로 다른 요소를 가리면 안된다)
모달창은 활성화 될 때 페이드인, 비활성화 될 때 페이드아웃 애니메이션을 표시해야 한다.
페이드인/아웃(transition : opacity __; )효과의 적용은 display:none -> display:flex 만으로는 안된다

특히 3번에 대한 고민과 실험에 상당히 많은 시간을 들였는데, 그나마 간단한 방법으로 해결하기로 했다.

해결

modal의 모양을 정하는 클래스 외에, 투명도와 실제 스테이지위치 상태를 결정하는 클래스를 정의한다. (각각 opaque, unstaged)

fade-in의 경우는 opacity와 unstaged를 각각 토글한다.
fade-out의 경우는 opaque를 토글 한 뒤, 적절한 때에 transitionend 이벤트를 사용하여 unstaged를 토글한다.

자세한 설명은 아래와 같다.

모달창이 가지는 클래스 상태는 세 가지이다.

modal unstaged : 화면에 존재하지 않음 + 투명함 [초기상태]
modal opaque : 화면에 존재하며 눈에 보임
modal : 화면에 존재하며 눈에 보이지 않음

unstaged는 컨테이너를 사용자가 보지 못하는 영역으로 치워버리고, opaque는 컨테이너의 opacity를 1로 설정한다.

이 모달 코드는 다음과 같은 순서에 따라 작동한다

(초기상태)

→ (열기 버튼 클릭) → unstaged 제거 & opaque 추가 → opacity transition진행 → modal열림

→ (닫기버튼 클릭) →opaque 제거 → opacity transition 진행 → [transition종료 이벤트] → unstaged추가

→ (초기상태)

See the Pen modal - opacity transition by wonjinyi (@wonjinYi) on CodePen.

<!-- HTML -->

<body>
  <a id="modal-open">click me</a>	

  <div id="modal-container" class="modal unstaged">
    <div class="modal-overlay">

    </div>
    <div class="modal-contents">
      <div class="modal-text">
        this is text
      </div>
      <a id="modal-close" class="modal-close">X</a>		
    </div>
  </div>
</body>

.modal{
	opacity : 0;
	
	position: fixed;
	top: 0px; left: 0;
	width: 100%; height: 100%;
	
	max-width : 100%;
	max-height : 100%;

	display: flex;
	justify-content: center;
	align-items : center;
	
	transition : opacity 0.5s;
}
.modal.opaque{
	opacity : 1;
	transition : opacity 0.5s;
}
.modal.unstaged {
	top:-100px;
	height : 0;
}

.modal-overlay{
	position : absolute;
	
	width : 100%;
	height : 100%;
	background-color : RGBA(0, 0, 0, 0.6);
}

.modal-contents{
	display:flex;
	flex-direction : column;
	align-items : center;
	position: relative;
	
	padding: 50px 100px;
	width: auto;
	max-width : 80%;
	max-height : 80%;

	text-align: center;
	background-color: rgb(255,255,255);
	border-radius: 6px;
}

.modal-text{
	text-align:left;
	overflow: auto;
}

.modal-close{
	margin-top : 20px;
	padding : 5px 20px;
	
	color : #FFFFFF;
	font-weight : bolder;
	font-size : 30px;
	background-color : #ffaa00;
	border-radius : 7px;
	cursor : pointer;
	
	transition : all 0.5s;
}
.modal-close:hover{
	background-color : #ffd500;
}

//javascript

  //open modal
  document.getElementById('modal-open').addEventListener("click", function(e){
    document.getElementById('modal-container').classList.toggle('opaque');
      document.getElementById('modal-container').classList.toggle('unstaged');
  });

  //close modal
  document.getElementById('modal-close').addEventListener("click", function(e){
    document.getElementById('modal-container').classList.toggle('opaque');

    document.getElementById('modal-container').addEventListener('transitionend', function(e){
      this.classList.toggle('unstaged');
      this.removeEventListener('transitionend',arguments.callee);
      });
    });

웹프로그래밍을 위한 간단한 Web IDE들

노는게 제일 좋습니다. — Sun, 9 Aug 2020 15:37:22 +0900

기존에는 VS code로 로컬에서 다소 전통적으로(?) 작업했지만, 최근에는 웹 ide를 주로 사용 하고 있다. 웹상의 개발환경은 무엇보다도 디바이스에 구애받지 않고 어디에서나 인터넷만 연결되어있다면 내 프로젝트를 꺼내와 작업 할 수 있다는 장점이 크다. 그 다음으로는 로컬에 무언가 깔고 설정할 필요가 없는 점, 내가 직접 파일들을 백업하는 등 관리할 필요가 없는 점이 뒤를 따른다.

특히나, 6월들어 웹프로그래밍에 관심을 갖고 공부하게 되면서 바로바로 저장소에 push하여 웹서버에 올라간 모습을 볼 필요가 있엇다. 로컬에서 작업하고, FTP로 내 웹서버로 올리는 과정이 너무 귀찮았다. 사실 이 점은 웹IDE의 특징이 아니고, 리모트 저장소이면서 웹서버로 기능하는 서비스의 특징이겠다. 이 서비스들을 쓰기 위해 GIT에 관심을 가졌고, 내가 직접 복잡한 설정을 할 필요 없는 것도 웹 IDE를 쓰기 시작한 이유중 하나이다.

간단한 프로젝트를 작성하면서 사용한 IDE들과, 남들에게 특정기능을 보여주기위한 간단한 서비스들을 소개하고자 한다.

실제 작업을 하는데 특화된 웹 IDE

구름IDE Repl.it

구름IDE

구름IDE는 내가 군입대를 하기 전부터 갑자기 혜성처럼 떨어지더니, 공부하는 학생들을 수없이 빨아들여버렸다. 현재는 모르는 사람 없는 제품중 하나가 아닐까 생각한다.

컨테이너 단위로 다양한 스택을 지원하는데, '아니 이런 것도 지원을 한다고?'싶은 생각도 든다. 사용해본 것 중에는 지원하는 기능이 가장 많고, 그러면서도 필요한 것만 딱 집어 제공해주는 느낌을 준다. 버전관리도 되고, 터미널도 있다.

웹프로그래밍에서의 장점은, 구름자체적으로 Preview페이지를 제공한다는 점이다. 컨테이너가 돌아가면 실제로 서비스가 동작한다. 컨테이너를 실행해놓은 상태라면, preview페이지 링크를 공유하여 누구나 접속할 수 있다. 워크스페이스도 링크 공유가 되는 것으로 알고있는데, 사용해보지는 않았다.

무료 계정은 최대 5개의 컨테이너, 1개의 동시실행권한이 주어지고, 사양이 낮다고는 하는데.. 아직까진 전혀 불편함 없이 사용하고 있다.

Repl.it

repl it은 구름만큼은 아니지만, 필수적으로 있으면 좋을 기능들만을 담아 제공하는 간단한 IDE이다. '공유에 특화된 IDE'에 넣을까 말까 고민했는데, 비교적 기능이 많은편이라서 구름IDE와 같이 묶어 적는다.

가장 큰 특징은 화면에서 보이듯이, Repl이라는 닉값을 아주 잘 하고 있다. 코드를 적고 상단의 'Run'버튼을 누르거나, Ctrl+F5 단축키로 바로 실행결과를 볼 수 있다. 파이썬 IDLE를 사용하듯이 바로바로 식을 입력할 수도 있다. 커맨드라인에서 동작하는 프로그램을 짜는데에 유용한 서비스이다.

버전관리, 패키지 기능이 있다. 버전관리가 있어서 당연히 깃허브에서 클론뜨기, 깃허브에 레포 만들기 등을 할 수 있다. commit과 push를 한 동작으로 묶어서 하는 것 같다.

아래에 보이는 것처럼,실제 편집도 가능한 창을 공유할 수 있고, 페이지 링크 자체를 공유할 수도 있다. 구름에 비교하기에는 약간 부족하지만, 뭔가 결여되어있지는 않다 싶을만큼 괜찮은 기능을 제공하면서 공유에도 강점을 가진다 할 수 있다.

일부 기능의 공유에 특화된 웹 IDE

Codepen Jsfiddle

CodePen

codePen은 정말로 간단한 웹 기능을 구상하고, 공유하고자 하는 경우에 특화된 서비스이다. 다양한 뷰를 제공하고, css와 js를 별도로 html안에 임베드할 필요도 없고, 딱 보여주고자 하는 그대로만 작성하면 된다.

공유는 편집페이지 링크 자체를 공유할 수도 있고(수정은 안되고, 링크에 접속한 사람이 본인 계정으로 클론을 뜨게 된다.), 저기 아래처럼 임베드할 수도 있다.

https://codepen.io/wonjinYi/pen/QWNbEvv

See the Pen blog example by wonjinyi (@wonjinYi) on CodePen.

JS FIDDLE

JSfiddle은 codePen과 비슷하면서도 다른 강점들을 갖고 있다. 우선 구글콜랩같은 동시 작업 기능을 제공하고, 외부 파일을 가져와 사용할 수 있는 메뉴를 제공한다. 또, 각 문서들의 오른쪽상단 'Tidy'버튼을 눌러 자동 정렬을 할 수도 있다.

레이아웃 면에서는 좀 더 자유분방한 모습이다. 굳이 비교하자면 codePen보다는 구름ide에 가깝다.

웹이 비약적인 발전을 이루면서, ideOne같은 단순한 컴파일러 뿐만 아니라 IDE의 자리까지 꿰차기 시작했다. 구름, repl.it을 보면 간단한 프로젝트에는 충분하다는 느낌을 받는다.

공유에 특화된 웹 IDE들은 작업할 때에도 물론 유용하지만, 무언가 질문할 일이 있을 때도 잘 사용할 수 있다. 동시에 문서를 편집하는 기능, 깃헙과 연동하는 기능들을 잘 사용하면 로컬환경보다도 더 강력한 효과를 볼 수 있을 것이다.

티스토리 블로그 코드 하이라이팅 플러그인

노는게 제일 좋습니다. — Sun, 12 Jul 2020 16:36:08 +0900

그동안 컬러스크립터를 이용하여 코드를 하이라이팅하고, 티스토리 글쓰기에서 html에 일일히 붙여넣었었다.

번거로워서 알아보니 티스토리에서 애초에 코드블록을 제공하고, 하이라이팅 플러그인도 있다.

블로그관리-플러그인 에서 Syntax Highlight를 활성화하면 된다.

그 뒤 마크다운이나 티스토리에디터로 코드블록을 작성하면 자동으로 하이라이팅된다.

적용된 포스트 예시

JS eventlistener로 호출된 객체의 메소드에서 멤버변수에 접근하기

노는게 제일 좋습니다. — Sun, 12 Jul 2020 16:24:55 +0900

배경

아래 코드와 같이, 이벤트리스너로 어떤 객체의 메소드를 호출하여 멤버변수에 변화를 주고자 한다.
그런데 assign에서 호출하는 this.num이 undefined이다. 즉, 자기 객체의 멤버를 못읽어오고 있는 것이다.

let obj = {
  num : 0,

  assign : function (e){
    num = 20;
    console.log('assign : '+this.num);
  }

};

document.addEventListener('keydown',obj.assign);

문제

여기 이 글이 오래된 글이긴 하지만, 명확한 답을 제시하고 있다.

아래 코드의 마지막줄에서 리스너로서 호출된 ojb.assign_two에서 접근하는 this.num은 obj.num이 아니다.

let obj = {
  num : 0,

  assign_one : function (){
    num = 10;
    console.log('assign_one : '+this.num);
  },
  assign_two : function (e){
    num = 20;
    console.log('assign_two : '+this.num);
  }
};
// 초기값인 0 출력
console.log(obj.num);
// 10출력
obj.assign_one();
// undefined 출력
document.addEventListener('keydown',obj.assign_two);

해결

본인은 단순히 한 단계를 더 걸쳐 호출하는 방법으로 해결했다.
다른 이름없는함수로 이벤트를 받고, 이 이름없는 함수에서 본래 호출하고자 하는 assign_two를 호출한다.

let obj = {

  ...

  assign_two : function (){
    num = 20;
    console.log('assign_two : '+this.num);
  }
};

document.addEventListener('keydown',function (e){
    obj.assign_two();
});

위에 링크걸어놓은 stackoverflow에서는 다른 방법을 써놓았다.
'문제'단락의 코드를 그대로 두고, assign_two함수 내부에서 self.num 로 접근하거나 (this.num 대신),
addEventListener구문에서 리스너에 대해 bind를 사용하라고 한다.

GIT→GITHUB PUSH는 정상적으로 되지만, contribution칸이 채워지지 않는 경우

노는게 제일 좋습니다. — Sun, 14 Jun 2020 19:14:24 +0900

도움주신 분

김선호

문제

왼쪽 사진과 같이 GIT -> GITHUB로 PUSH는 정상적으로 되지만

오른쪽 사진처럼 contribution횟수를 나타내는 초록색은 정상적으로 표시가 되지 않는다

해결

GIT의 계정설정에서 email을 깃허브와 동일하게 맞춰주면 된다. 해당 설정내용은 [.git]-[refs]-[config]파일에 저장된다.

설정 후 새로 PUSH해보니, 깃허브에 정상적으로 초록색이 표시된 것을 확인할 수 있다.

Naver Maps API v3 지도 가변크기적용

노는게 제일 좋습니다. — Mon, 25 May 2020 08:08:35 +0900

문제

네이버지도API를 사용하고 있다. 지도객체(naver.maps.Map)를 웹브라우저창의 크기에 따라 늘였다 줄였다(가변크기) 하려고 한다. 그러나 일반적인 접근으로는 크기가 바뀌지 않는다.

실마리

1. 네이버 지도객체(naver.maps.Map)는 크기를 나타내는 별도의 자료형, 크기를 변경하는 메소드가 존재한다.

크기를 나타내는 자료형 : naver.maps.Size( <너비> , <높이> )

크기를 변경하는 메소드 : (naver.maps.Map).setSize( naver.maps.Size )

2. 크기가 브라우저창에 따라 변화하도록 하려면 js의 resize이벤트를 사용한다.

addEventListener('resize', function(){ .... }); 하거나 window.onresize=function(){...}; 하거나

해결 - 화면전체를 채우도록 하는 예제

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

// 네이버 맵 생성
var mapOptions = {
    center: new naver.maps.LatLng(37.550179, 127.073627),
    zoom: 12
};
let map = new naver.maps.Map('map', mapOptions);
 
// 네이버 맵 크기조정
window.addEventListener('DOMContentLoaded', function(){
    resize();
    window.addEventListener('resize', resize);
});
 
function resize(){
    var Size = new naver.maps.Size(window.innerWidth, window.innerHeight);
    map.setSize(Size);
}
 
Colored by Color Scripter

cs

해결 - header영역, footer영역을 제외한 영역을 채우도록 하는 예제

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

// 네이버 맵 생성
var mapOptions = {
    center: new naver.maps.LatLng(37.550179, 127.073627),
    zoom: 12
};
let map = new naver.maps.Map('map', mapOptions);
 
// 네이버 맵 크기조정
window.addEventListener('DOMContentLoaded', function(){
    resize();
    window.addEventListener('resize', resize);
});
 
function resize(){
    var mapWidth = window.innerWidth;
    var mapHeight = window.innerHeight  - document.getElementById('appHead').offsetHeight 
                                        - document.getElementById('appFooter').offsetHeight;
    var Size = new naver.maps.Size(mapWidth, mapHeight);
    map.setSize(Size);
}
Colored by Color Scripter

cs

구름IDE와 Github연동 초심자 가이드

노는게 제일 좋습니다. — Mon, 25 May 2020 01:43:58 +0900

2021. 03. 14 덧붙이는 글

구름IDE에 간편하게 커밋&푸쉬하는 기능이 언제부터인가 생겼습니다. 때문에 이제는 이 포스트가 굳이 필요하지 않겠다는 생각이 들었습니다. 이 글을 보러오시는 분들은 구름 컨테이너의 내용을 깃허브에 올리시는 것만이 목적일 것이므로, 구름IDE에서 제공하는 버전관리 기능을 사용하시면 원하시는 일을 보다 간단하게 하실 수 있을 것으로 생각합니다.

그동안 이 포스트를 조회수 효자로 만들어주셔서 감사합니다. 이제는 아래 이어지는 내용을 따라하는 대신, 구름IDE 버전관리 기능을 사용해보세요.

구름IDE와 GIT을 처음써보는 사람의 입장에서 작성한, 딱 깃허브 백업만의 목적에 충실한 가이드입니다.

구체적이고 본질적인 내용은 다른 포스트를 찾아보셔야 합니다.

배경

기존의 로컬작업환경을 구름IDE로 옮기고 싶은 상황이다. 아래와 같이 하고자 한다.

1. github 저장소에 존재하는 파일을 기반으로 구름IDE컨테이너를 만든다.

2. 이후 구름IDE에서 github에 푸쉬하여 자료를 백업하고자 한다.

사전에 필요한 지식

아래 내용들을 읽고 알아서 시작하여도 좋겠으나, 귀찮으면 바로 아래의 "해결"로 넘어가도 된다.

테스트해보니 구름IDE에서 귀찮은 초기설정을 모두 해결해준다.

지옥에서 온 GIT(생활코딩)

GIT원격저장소 초기화

.gitignore 설정

정말 아무것도 모르는 사람의 기준으로 작성된 글이다

초기설정

아래의 두 과정은 처음에 한 번 하고나면, 다음에는 할 필요가 없다.

1. GITHUB로부터 초기의 파일들을 구름IDE로 가져오는 과정

먼저, 구름IDE대쉬보드에서 새 컨테이너를 생성한다.

생성 페이지에 들어가서 "공개 범위"는 Private로, "템플릿"은 Github로 선택한다.

그러고 나면 아래에 "인증"부분이 나타나게 되는데, github의 유저네임(이메일 말고)과 비밀번호를 입력하고 가져오기를 누른다.

가져오기를 누른 후에, 해당 계정에 있는 repository들이 나타나게 된다. 가져올 repository를 선택하고 나머지 설정을 하면 컨테이너가 만들어진다. 이 과정까지 마치고 나면, 컨테이너에 github repo의 모든 내용들이 옮겨온다.

만들어진 컨테이너로 들어가서 다음 과정을 진행한다.

2. 구름IDE에서 .gitignore설정하기

작업에만 필요하고 굳이 github에 올릴필요 없는 파일을 지정할 수 있다. 탐색기 위의 [+]-[파일]을 눌러 새 파일을 만들자

기본설정 그대로 최상위 폴더에 ".gitignore"라는 이름을 적고 [확인]을 누른다.

자동으로 .gitignore파일이 열리게 될 것이다. 내용으로 "goorm.manifest"를 적고 저장한다.

커밋과 푸쉬

아래 두 과정은 github에 올리고자 할 때마다 해야하는 일이다

github에 올리려면 다음 과정이 필요하다.

stage에 파일 add -> commit -> push

( 실제로는 굉장히 다른 의미이나, 깃허브에 백업하는 일만 하고 다른건 쳐다보지도 않는다면 이 의미로도 충분하다고 본다. )

"commit"이란 구름IDE상에서 깃허브로 코드를 보내기 위한 준비과정이라고 볼 수 있고 (버전을 만드는 것)

"push" 란 커밋으로 준비된 프로그램을 깃허브에 업로드 한다고 생각 할 수 있다.

( 실제로는 굉장히 다른 의미이나, 깃허브에 백업하는 일만 하고 다른건 쳐다보지도 않는다면 이 의미로도 충분하다고 본다. )

1. git로컬저장소에서 스테이징 영역에 파일 add하기

우선 아무 파일이나 일단 수정을 해본다. 주석을 넣거나, 주석을 빼거나 아무거나 하면 된다.

그 다음 아래 status 명령을 치면, 위와 같은 화면이 나온다. 빨간색 글자가 있는 것을 확인할 수 있다.

git status

빨간색 파일들의 수정사항이 깃허브에 반영되어야 한다면, 초록색으로 표시되어야 문제없이 커밋을 할 수 있다.

아래 add 명령을 통하여 초록색으로 표시되게 바꿀 수 있다.

git add <파일명>

빨간색으로 표시되던 파일들에 add를 사용하고 나서 status를 살펴보았다. 초록색으로 표시되는 것을 볼 수 있다.

이 상태여야 정상적으로 커밋할 준비가 된 것이다.

2. 로컬 저장소에 commit하기

위 상태에서 아래 commit 명령을 내린다. -m뒤에는 커밋메시지를 작성한다.

별말 없으면 잘 된것이다.

git commit -m "커밋메시지"

3. github에 push하기

아래와 같이 깃허브로 push하라는 명령을 작성한다.

git push

깃허브 레포지토리에 들어가서 살펴보면, 정상적으로 내용이 반영된 것을 확인할 수 있다.

4. 깃허브 버전을 구름ide로 가져오기

만약 구름ide가 갖고있는 내용이 깃허브보다 이전의 버전이라면, 아래 명령을 통해 깃허브 내용을 구름ide로 가져올 수 있다.

git pull

이제 해야할 일

이 포스트로 급한 불을 껐다면, GIT에 대해 제대로 된 글을 찾아 떠나자

이시국 보건증 첫 버전 배포

노는게 제일 좋습니다. — Sun, 17 May 2020 18:53:37 +0900

현재 서비스 운영중입니다!!!!!!!

https://leesiguk.wonj.in/

이시국 보건증

보건증 발급가능 기관을 찾아 비교해보세요

leesiguk.wonj.in

현재 서비스 운영중입니다!!!!!!!

https://wonj.in/

이시국 보건증

비영리 공익목적 개인서비스입니다. 이 서비스는 단순 참고용도로만 사용하시고 정확한 정보는 각 의료기관으로 문의바랍니다. 아래 오픈소스/서비스를 사용하였습니다 dataframe-js https://www.npmjs

wonj.in

홍보하고자 하는 곳은 다음과 같다

1. 조리 / 급식과 관련있는 커뮤니티

2. 코로나 관련 커뮤니티

3. 자취(알바)와 관련된 커뮤니티

한 곳

https://www.facebook.com/groups/codingeverybody/permalink/4101147743259064/

https://www.facebook.com/groups/onehomelife/permalink/3517135318301891/

현재의 상태는 다음과 같다

1. 마커를 지도에 뿌려준다 ( 색깔 구분 : 초록-현재 발급가능한 민간의료기관, 파랑-현재 발급가능한 보건소, 회색 - 발급불가 )

2. 마커에 click이벤트리스너를 준다 -> 정보창 토글

3. 정보창의 기관명을 클릭하면 지도검색 페이지로 연결된다.

단기 아르바이트로 바쁜 나날을 보내며 시간이 날 때마다 데이터를 모으고, 퇴근해서는 문서를 뒤적이며 짜깁기해가며 코드를 적어나갔다. 사실 웹에 대해 아는게 없다보니 고도의 기술도 없었고, 당연히 서비스를 완성하는 과정이 어렵지는 않았다. API와 라이브러리가 다해먹었다.

내가 퇴근하고 나면 병원도 퇴근한 뒤였기 때문에, 점심시간을 이용해 유선상 데이터 수집을 해야했다. 전화문의한 병원중 절반 정도는 "보건증"단어를 꺼내자마자 갑자기 짜증을 냈다. 영 기분좋은 경험은 아니었다. 다만 이해가 가긴 했다. 보건증 문의가 얼마나 많이 들어왔으면 그랬을까. 병원 직원들에게도 심심한 위로가 되었으면 좋겠다. 오늘 저녁쯤 보건증이 필요할만한 인터넷 커뮤니티에 뿌릴 예정이다.

dataframe.js로 csv를 불러와 "dictionary 배열"로 변환하기(브라우저)

노는게 제일 좋습니다. — Mon, 11 May 2020 17:40:24 +0900

배경

csv파일을 dataframe.js로 불러와, js의 dictionary의 array ( 딕셔너리를 원소로 갖는 배열 )로 변환해야 한다.

csv파일은 구글 스프레드시트에서 바로 export하여 사용하고싶다.

해결

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

<!-- index.HTML -->
 
<head>
    <!-- FOR PRODUCTION 
    <script src="https://gmousse.github.io/dataframe-js/dist/dataframe.min.js"></script>
    -->
 
    <!-- FOR DEVELOPMENT -->
    <script src="https://gmousse.github.io/dataframe-js/dist/dataframe.js"></script>
</head>
 
<body>
    <script type="text/javascript" src="script.js"></script>
</body>
Colored by Color Scripter

cs

 

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

// script.js
 
var DataFrame = dfjs.DataFrame;
var data;
var temp;
 
const source_url = 'https://docs.google.com/spreadsheets/d/<구글시트 문서 id>/export?format=csv';
DataFrame.fromCSV(source_url).then(df => {
  // show() : dataframe 미리보기
  df.show();
 
  // 불러온 CSV에서 특정 컬럼 선택하여 새로운 dataframe생성
  temp = df.select('기관명', 'Latitude', 'Longitude');
  temp.show();
  
  // 새롭게 만든 dataframe(temp)를 dictionary형으로 변환
  data = temp.toCollection();
  console.log(data);
});
Colored by Color Scripter

cs

7열의 <구글시트문서 id>는, 본인의 구글 시트문서에 들어간 후 url에서 확인할 수 있다.

빨간사각형으로 표시한 부분이 문서id이다.

script.js의 18열 data출력결과는 다음과 같다.

링크 DataFrame.fromCSV( < csv파일 경로 > ).then( df => <구문> )

csv를 불러와 새로운 dataframe을 만든다.

링크 DataFrame.select( <선택할 컬럼> )

dataframe에서 특정 컬럼을 뽑아내어, 새로운 dataframe을 만든다.

링크 DataFrame.toCollection()

dataframe을 dictionary로 변환한다.

추가적으로, 딕셔너리가 아닌 배열(list)로 변환하고 싶을 경우, toArray()를 사용할 수 있다.

DataFrame.toArray()

구글 스프레드시트에서 geocode by awesome Table로 주소를 좌표로 변환하기

노는게 제일 좋습니다. — Sat, 9 May 2020 18:46:37 +0900

다량의 주소 데이터를 위/경도 좌표로 변환할 일이 있을 때 유용한 구글스프레드 부가프로그램이다.

배경

다음과 같은 스프레드시트를 갖고 있는데, 주소 데이터만을 이용하여 위/경도 컬럼을 생성하려고 한다.

방법

구글 스프레드시트에서 Geocode by Awesome Table을 설치하도록 하자.

설치를 완료하였다면, Start Geocoding을 선택하여 Geocode대화창을 우측에 연다.

주소데이터가 있는 시트와 컬럼을 지정한다. 만약 주소가 여러개의 컬럼에 나뉘어 저장되어있다면, [Address column]아래의 파란글씨를 눌러 여러 컬럼을 지정해줄 수 있다.

작업이 완료되면 [주소]컬럼의 오른쪽에 위 경도 컬럼이 생기게 된다. 만약 저 자리에 다른 컬럼이 있었다면, 그 항목들은 모두 오른쪽으로 두칸씩 밀어버리고 작업한다.

구글지도에서 확인 결과 주소가 위경도로 제대로 변환되었다.

이시국보건증 페이지 간소화계획 및 기능별 API예제 링크 정리

노는게 제일 좋습니다. — Sat, 9 May 2020 01:36:15 +0900

현재 서비스 운영중입니다!!!!!!!

https://leesiguk.wonj.in/

이시국 보건증

보건증 발급가능 기관을 찾아 비교해보세요

leesiguk.wonj.in

현재 서비스 운영중입니다!!!!!!!

페이지 간소화 계획

기존 : 이 포스트참고, 시작→지역선택→용도선택→확인→의료기관 및 지도열람

변경 : 시작(시연영상 겸 사용안내)→의료기관 및 지도열람, 지역선택은 '시군구'단위로 지도 상단에 표시하여 버튼클릭. 혹은 사용자가 알아서 찾도록 한다.

데이터 제공 방법

기존 두 개의 csv데이터(보건소 현황, 보건증발급 의료기관현황)

를 js에서 불러와 각각 딕셔너리 배열로 저장

보건소 : hcc_data[인덱스][키]

의료기관 : hospital_data[인덱스][키]

각각의 key와 value는 여기에서 모두 정의하였음

이후 이를 외부 프로그램에서 딕셔너리의 배열로 변환한 뒤, js에서 사용하도록 할 것이다.

기능별 마커 API예제 정리

초기 세팅 및 지도에 데이터 뿌리기

http://geeps.krihs.re.kr/geocoding/service_page

http://www.gisdeveloper.co.kr/?p=4784

주소를 위경도 좌표로 변환 → 마커표시→ 마커에 병원명 표시(정보) → 보이는 영역의 마커만 표시

사용자가 시군구 버튼을 눌렀다

버튼 표시(사용자정의컨트롤) → 지도 이동 (아마 버튼은 지도에 안그리고, 따로 그릴 것 같다)

사용자가 마커를 좌클릭했다

마커에 상세정보창 표시(병원명 표시는 가리기)

사용자가 마커를 우클릭했다

인터랙션(거리뷰 표시하기)

이시국 보건증 데이터 수집 방법

노는게 제일 좋습니다. — Sun, 3 May 2020 23:02:45 +0900

현재 서비스 운영중입니다!!!!!!!

https://leesiguk.wonj.in/

이시국 보건증

보건증 발급가능 기관을 찾아 비교해보세요

leesiguk.wonj.in

현재 서비스 운영중입니다!!!!!!!

현상황

(보건복지부 상담내용) 보건증은 본래 '보건소'에서만 발급받을 수 있다. 다만 코로나사태로 인해 보건소의 보건증업무가 중단되면서 주변의 일부 병원에 보건증을 발급할 수 있는 권한을 주었다. 근데 이 병원들이 현재 보건증업무를 하는지, 가격은 얼마인지는 장담못한다.

(국민신문고 민원상담 내용)보건증 발급가능한 기관데이터는 보건복지부에 없고, 정부에서도 각 관할기관에 문의해서 알려줘야 한다. 전체 데이터를 물어보면 줄 수 없다.

기초자료(보건소현황)

보건복지부에서 공개한 가장 최근의 보건소현황(2019.06)을 받아, 우선 서비스대상지역인 서울만 추려냈다.
이 중에서 원래 보건증업무를 하지 않았던 보건지소는 삭제하였고, 위도와 경도 데이터의 추가수집이 필요하다.

보건소의 위치와 공개정보를 토대로 그 권역의 보건증발급가능 민간의료기관의 정보를 조사한다.

기초 자료(보건소 현황)을 변형 및 추가수집하여 최종적으로 확정한 컬럼은 다음과 같다.

[ 시도(string), 시군구(string), 읍면동명(string), 대표전화번호(string), 보건기관유형(string), 보건기관명(string), 주소(string), 보건증업무여부(string), 경도(float), 위도(float) ]

새로 구축하는 자료(보건증 발급가능한 민간의료기관)

본래는 공지사항을 크롤링 내지는 파싱하여 서비스에 뿌려줄 생각이었다. 그런데 발급가능기관 안내가 없는 경우도 있고, 공지 양식이 제각각이다. (이미지로 팝업을 띄워놓는 곳이 상당히 많다)

그래서 이 정보를 자동으로 수집하게 하려면 배보다 배꼽이 더 큰 격이 되어버려, 수작업으로 수집하기로 했다. 우선 서비스대상도 수도권에서 서울로 축소조정하였다.

[ 시도(string), 시군구(string), 기관명(string), 대표전화번호(string), 주소(string), 일반용시행(bool), 일반용가격(Number), 유흥용시행(bool), 유흥용가격(number), 경도(float), 위도(float) ]

문제

건강보험심사평가원에서 전국 병원을 탈탈털어서 비급여항목을 모두 조사해놓았다. 그러나 보건증 항목은 없다. 홈페이지가 없는 종합병원도 많아서, 이거 진짜 전화해서 물어봐야 될 수도 있다.

anaconda folium의 popup 한글 인코딩 문제 임시해결방편

노는게 제일 좋습니다. — Wed, 29 Apr 2020 21:36:11 +0900

배경

anaconda에서 folium 및 jupyter notebook을 사용한다.

folium을, jupyter notebook에서 사용할 때, popup 텍스트가 깨지는 현상이 발생하였다.

원인

iframe으로 folium지도를 렌더링하게 되는데, UTF-8 인코딩을 못하고 있는 것이다.

한글을 좀 더 사랑해주세요

미적지근한 해결

주피터 노트북 안에서 취할 수 있는 마땅한 해결방안은 없다.

지난달 까지만 하더라도 특정 .py파일에 문자셋을 지정해주는 방법이 가능하였으나 현재는 html로 folium지도를 추출해서 보는 수밖에 없다.

다음과 같은 구문으로 html로 지도를 저장할 수 있다.

map.save('index.html')
# map은 folium.Map변수의 이름

주피터 노트북과 같은 경로에 저장되었다.

index.html파일을 열어보면 당연하게도 제대로 출력되는 것을 볼 수 있다.

pandas, matplotlib에서 글꼴을 불러오지 못할 때

노는게 제일 좋습니다. — Tue, 28 Apr 2020 01:40:19 +0900

요약

matplotlib의 폰트캐시가 새로 설치된 폰트를 못불러오고 있는 것이다.

아래 코드로 업데이트 해주면 된다.

import matplotlib
matplotlib.font_manager._rebuild()

배경

쥬피터에서, pandas의 dataframe을 plot()으로 시각화 하려했으나, 다음의 두가지 warning을 표시하며 한글이 깨져나온다.

사용하려는 폰트는 나눔고딕코딩이다.

findfont: Font family ['NanumGothicCoding'] not found. Falling back to DejaVu Sans. /home/wonjinyi/anaconda3/lib/python3.7/site-packages/matplotlib/backends/backend_agg.py:211: RuntimeWarning: Glyph 49345 missing from current font. font.set_text(s, 0.0, flags=flags)

거 NanumGothicCoding폰트가 없어서 적당한 기본폰트같은거 가져왔습니다.
근데 이거 한글 글리프가 없어서 깨져보일텐데 뭐 알아서 하십시오. 1 경고 드립니다.

(좌)입력한 코드와 표시되는 warning 2가지, (우)한글이 꺠져나오는 그래프

[datafram].plot() 메소드는 pandas에서 제공하지만, 내부적으로는 matplotlib를 로드하여 plot을 호출하게 된다.

따라서 관련 오류가 발생하는 경우, pandas자체보다는 matplotlib에 대하여 자세히 살펴볼 필요가 있다.

원인

OS자체 글꼴관리 도구로 보면 분명 설치되어 있는것으로 나온다.

하모니카OS의 '글꼴' 프로그램

실제로 폰트를 불러오는 개발환경 쪽에서는 어떤지 살펴보아야 한다. matplotlib에서는 font_manager라는 것을 제공하는데, 이를 이용하여 폰트가 실제로 설치되었다고 인식하는지 출력하여볼 수 있다.

from matplotlib import font_manager
for i in font_manager.fontManager.ttflist:
if 'Nanum' in i.name:
print(i.name, i.fname)

살펴보니 목록에 나오지도 않는 것을 볼 수 있다. 주피터를 죽였다 다시 살려보고, 아나콘다를 재실행해도 마찬가지였다.

폰트를 가져왔는데, 왜 먹지를 못하니

그렇다면 여기서, 주피터 내지는 matplotlib에서 폰트 목록을 제대로 못 받아온다는 것을 원인으로 생각할 수 있다.

해결

이 링크를 보면 같은 상황에 대하여 문답이 있다.

요약하자면, matplotlib는 아래와 같은 경로의 json파일을 통해서 글꼴목록을 관리한다. 그런데 이 json파일의 업데이트가 제대로 안 된 모양이다.

대체 왜이걸 여기다 박아놓은거야

여기에 따르면, fontlist ~~ .json파일을 업데이트 해주기 위해서는 다음과 같이 할 수 있다.

import matplotlib
matplotlib.font_manager._rebuild()

그러고 나면 제대로 폰트를 불러올 수 있다.

글씨가 깨져나오던 그래프도, 정상적으로 한글이 나오는 것을 확인할 수 있다.

하모니카(우분투) anaconda 설치 + navigator 1.9.12 실행안되는 현상 해결

노는게 제일 좋습니다. — Fri, 24 Apr 2020 21:16:37 +0900

anaconda-navigator 1.9.12가 실행안되는 현상 해결하기

배경

다운받은 sh파일을 탐색기에서 직접 실행했는데, 이상한것만 나오고 설치는 안된다.

이게뭐지

원인

터미널에서 bash로 실행해주지 않았다.

설치 방법

1. 여기로 들어가서, 본인의 OS와 하드웨어에 맞는 파일을 다운로드받는다.

2. 다운로드 된 경로를 확인한다 (/다운로드/파일명.sh) **Download폴더가 아니다!!

Download가 아니다!! "다운로드"다!!!

3. 터미널에서 bash로 다운로드 받은 파일을 실행한다.

4. 약관이 나오게 되는데, 엔터를 쭉- 누르면 [yes/no]를 선택하는 부분이 나온다. yes로 선택한다.

경로를 선택하는 부분이 있다. 기본 경로는 아래와 같다

5. 과정을 거쳐, 정상적으로 설치 완료

발생 할 수 있는 문제

1. 명령어를 찾을 수 없다고 한다.

PATH추가를 안한 경우이다.

2. GUI환경을 쓰고싶다

Anaconda-navigator 1.9.12가 실행이 안되는 문제

다음과 같은 오류내용이 맨 뒤에 붙으면서, 네비게이터가 실행이 안되는 현상을 겪었다.

File "/home/wonjinyi/anaconda3/lib/python3.7/site-packages/anaconda_navigator/api/external_apps/vscode.py", line 168, in _find_linux_install_dir
if DISTRO_NAME in ['ubuntu', 'debian']:
UnboundLocalError: local variable 'DISTRO_NAME' referenced before assignment

깃허브 이슈에서 같은 내용을 최근에 다뤘다.

많은 내용중, 본인은 anaconda-navigator 업데이트를 통하여 문제를 해결했다.

conda update anaconda-navigator

설치가 완료된 후, 네비게이터를 실행한다.

아래와 같이 정상적으로 실행된 것을 확인할 수 있다.

하모니카(우분투) source.list의 repository주소에 의한 의존성오류 해결 사례

노는게 제일 좋습니다. — Fri, 24 Apr 2020 20:28:39 +0900

도움주신 분

해티, rani, 김선호

배경

R 3.6을 깔기 위해 노력노력을 하던 중, 다음과 같은 의존성 문제를 마주했다.

실제로 의존성 문제라기보다는, repo주소가 잘못 작성된 것이다.

다음 패키지의 의존성이 맞지 않습니다:
r-base : 의존: r-base-core (>= 3.6.3-1xenial) 하지만 %s 패키지를 설치하지 않을 것입니다
의존: r-recommended (= 3.6.3-1xenial) 하지만 %s 패키지를 설치하지 않을 것입니다
E: 문제를 바로잡을 수 없습니다. 망가진 고정 패키지가 있습니다.

사용하고 있는 OS는 다음과 같다.

2019.11.18
HamoniKR-3.0
File : hamonikr-sun-3.0-amd64-20200423.iso
Size : 3.1G
SHA256 : 660754a278523e7e139251898ed596bd8e68221bb639ab5e8967864a3d8b9f4b

원인

apt repository를 source.list에 무언가 잘못 추가했었다.

해결방법

문제가 되는 Repo가 무엇인지 알아낸 뒤, 그 항목을 삭제해주면 해결될 수 있다. 대체로 [시도2]로 해결 될 수 있을 것이다.

문제가 되는 repo알아내기

sudo apt-get update를 했을 때, 많은 "무시, 받기, 기존"들 속에서 "오류"라고 표시되는 항목을 잡아낸다.

예시)

오류:11 http://cran.rstudio.com/bin/linux/ubuntu tina/ Release
404 Not Found [IP: 52.85.193.148 80]

시도 1 : 파일시스템 - etc - apt 안의 source.list파일을 확인하여, 잘못된 주소 제거

어디있는지 파악한다. source.list는 etc/apt에 있다. 어차피 저건 읽기전용이라 여기서 못바꾼다.

터미널에서 슈퍼유저 권한으로 내용을 편집하도록 하자. 경로로 들어가서 sudo권한으로 vi를 실행한다.

나오는 내용에서 오류가 있었던 저장소 내용을 삭제해준다.
삭제한 다음에는 [Ctrl+C] - [:wq! 입력] - [ENTER]로 저장하고 터미널로 복귀한다

sudo apt-get update로 "오류"항목이 없이 잘 나오는지 확인한다.

시도 2 : 파일시스템 - etc - apt - sources.list.d 폴더 안의 어느 무언가 제거

시도1과 마찬가지로 어디있는지 확인한다. 본인의 경우 [additional-repositories.list]가 문제였다.

터미널에서 해당 경로로 이동하여 슈퍼유저 권한으로 문제가 있는 파일을 연다.

"오류"로 표시됐던 항목을 지워버린다. 그 후, [Ctrl+C] - [:qw! 입력] - [ENTER]로 저장하고 터미널로 복귀한다.

sudo apt-get update에서 "오류"항목이 더이상 표시되지 않는 것을 확인한다.

정보기기운용기능사 실기 후기

노는게 제일 좋습니다. — Fri, 24 Apr 2020 01:01:40 +0900

실기 공부할 때 정리한 내용은 여기를 참고

언제 봤는가?

2020년 4월 19일 서울 남부지사 12시30분 시험

난이도가 어려웠는가?

쉬웠다. 10분만에 풀고 10분 때우다 나왔다.

어떤 내용이 나왔는가?

토폴로지는 (pc 2대)-(라우터)-(라우터)-(서버 1대)로 연결된 아주 전형적인 모양이었다.

기본적인 내용 : 비밀번호, 콘솔/텔넷설정, 배너 메세지

인터페이스 설정 : ip할당, vlan, inter-vlan

라우팅 : RIP v2라우팅 외 기타 설정(no auto-summary, passive-interface)

테스트 : 각 pc에서 server에 설정된 웹서비스에 접속할 수 있는가?

어떤 내용을 틀린 것 같은가?

passive-interface로 써야하는 것을, no passive-interface로 반대로 설정했다.

네트워크가 굴러가는데는 이상이 없어서 별 문제 없을 것으로 판단한다.

실습환경과 시험환경의 차이점이 있는가?

1. CLI작업시 커서가 안보인다. 입력은 잘 된다.

2. Simple PDU를 사용할 수 없다. 알아서 ping으로 하든 뭘로하든 대체하면 된다. 좀 당황스러웠다.

3. CLI 말고는 탭이 아예 잠겨있다.

시험장에서 시작 및 제출방법이 어려운가?

감독관과 진행위원이 아주 느리고 친절하게 알려준다. 그래도 안되면 1:1로 붙어서 알려준다.

시험보는 곳은 남부지사 건물에서 어디인가?

지하1층으로 내려가서 가만히 있으면, 누군가 와서 시험장으로 데려간다.

입구 안내요원이 지정한 곳으로 가서 가만히 있으면 되는데, 보통 지하1층이다.

대중교통으로 남부지사 가는 가장 적당한 길?

5호선 영등포시장역에서 내려서 걸어간다. 버스타고 뭘 해도 어차피 걸리는 시간은 거기서 거기다.

(갈때는 영등포시장역->버스->남부지사, 올때는 남부지사->영등포시작역. 둘 다 해봤는데 걸리는시간 똑같다.)

주변에 밥먹을 곳?

없다

[Edwith]데이터 과학 산책

노는게 제일 좋습니다. — Fri, 24 Apr 2020 00:57:24 +0900

강의소개 페이지는 여기로 들어가면 된다.

데이터과학과 R, 통계학에 대한 아무런 지식없이 듣기 좋은 수업이었다.

가끔 막히는 부분은 감사하게도 주변 사람에게 물어 해결할 수 있었다.

실질적으로 깊은 내용을 가르쳐주지는 않지만, 대충 어떻게 일이 돌아가는지 알게 된 좋은 기회였다.

정보기기운용기능사 실기

노는게 제일 좋습니다. — Sat, 18 Apr 2020 01:05:52 +0900

By PassportDude at the English Wikipedia, CC BY-SA 3.0, 링크

작성시작일 2020. 3. 31. 00:05

시험공부 요약내용 모두 업데이트 완료

시험 후기 및 결과는 여기참고

02. 명령

00 왜하는가

생각없이 4월19일 실기 신청했다. 돈아까워서 시험보러 가야된다.

01 작업 전 필요한 것

시험에서 사용하는 프로그램

시스코 패킷트레이서 5.3.3

유용한 명령/설정

[Option]-[Preferences]에서 Show Link Light, Show Device Labels, Always Show Port Labels 체크

Ctrl+Shift+6 : 뭔가 잘못해서 터미널이 먹통됐을 때 탈출

exit, Ctrl+Z(C) : 뒤로가기인데 둘이 다름. 알아서 사용

스위치/라우터 초기화 : erase startup-config → 엔터 → reload →엔터 하면 라우터가 초기화된다

(대충 뭔가 설정되어있는데, 다시 뭘 하기로 했다 ) 라고 설명에 나와있으면, 초기화하고 시작하면 된다.

02 - 1 시험에서 사용하는 명령어 *라우터 및 스위치*

목차 보기

프리빌리지 모드 진입

Router > enable

Router #

전역 환경설정 모드 진입

Router# configure terminal

Router(config)#

콘솔설정 진입

Router(config)#line console 0

Router(config-line)#

** line의 0번포트에 들어간다는 뜻

호스트 이름 설정

Router(config)# hostname 이름

이름(config)#

접속메시지 설정

Router(config)# banner motd #

메시지#

Router(config)#

** 이 상태에서 끝까지 exit후 터미널을 재시작하면 설정한 메시지가 출력됨

** 주의사항 : 접속메시지중에 #가 있다면, 구분자를 #로 설정하면 안된다.

명령어 히스토리 사이즈 설정

Router(config-line)# history size 사이즈

Router(config-line)#

** 화살표로 불러올 수 있는 명령어 수가 설정되었음

DNS설정

Router(config)# ip host [도메인] [ip주소]

** 해당 ip주소를 도메인을 사용하여 접근가능

DNS질의 안하기

Router(config)# no ip domain-lookup

** Translating "dd"...domain server (255.255.255.255) 이런거 안나옴

그냥 비밀번호 설정

Router(config)# enable password 사용할비번

* enable에 대하여 평문 비밀번호를 설정한다. 별말없으면 이걸 쓴다.

MD5해시로 비밀번호설정

Router(config)# enable secret 사용할비번

** enable에 대하여 MD5(128bit암호화 해시)로 비밀번호를 설정한다. 이상한 말붙여서 암호설정하라 하면 이걸 쓴다.

모든 비밀번호에 대하여 암호화하기

Router(config)# service password-encryption

** 입력 될 모든 비밀번호에 대하여 암호화적용한다.

콘솔 비밀번호 설정

Router(config-line)# password 암호

Router(config-line)# login

** 링크 password는 비밀번호를 정하는 명령. login이 콘솔 비밀번호 기능을 활성화하는 명령.

cli껐다가 켜보면 비밀번호 치라고 함. 그게 이 비밀번호임

** 콘솔은 어떤 장치에 붙여놓고 사용하는 장치. 패킷트레이서에서는 cli로 표현되어있음

텔넷 접속 & 비밀번호 설정

Router(config)# username 아이디 password 비밀번호

Router(config)# line con 0

Router(config-line)# line vty 0 15

Router(config-line)# login local

* 전체적인 내용은 여기를 참고하자

* 사용자 계정, 권한에 대해 궁금하면 여기를 참고하자

* 사용자 계정, 로그인에 대해 궁금하면 여기를 참고하자

→ username [아이디] privilege 15 password [비밀번호] 와 같이 로그인할 때부터 권한을 부여해줄 수 있다. (해당 명령은 로그인후 관리자모드로 바로 접속함)

→ login은 비밀번호, login local은 아이디+비밀번호 두 가지를 같이 검증한다.

SSH접속설정

Router(config)# username [아이디] password [비번]

Router(config)# ip domain-name [ssh도메인]

Router(config)# crypto key generate rsa

Router(config)# line vty 0 4

Router(config-line)# login local

Router(config-line)# transport input ssh

TFTP 백업

Router(config)#copy [파일명] tftp

- (대충 파일 보낼 ip쓰라는 내용) - [ip주소]

- (대충 보낼파일 이름 정하라는 내용) - [이름]

** 파일 목록을 확인하려면 dir, show flash 등을 사용

** startup-config가 invalid이면 write명령으로 생성가능

클럭펄스 값 설정

Router(config)# int s0/0/0

Router(config)# clock rate 64000

Router(config)# no shut

enable진입시 (대충 15레벨 얻었다는 말) 나오게하기

Router(config)# logging userinfo

02 - 2 시험에서 사용하는 명령어 *라우터*

목차 보기

PPP PAP프로토콜

Router(config)#username [상대id] password [비번]

Router(config)#int s0/0/0

Router(config-if)#no shut

Router(config-if)#en ppp

Router(config-if)#ppp auth pap

Router(config-if)#ppp pap sent-username [이 기기 id] password [비번]

PPP CHAP프로토콜

Router(config)#username [상대id] password [비번]

Router(config)#int s0/0/0

Router(config-if)#no shut

Router(config-if)#en ppp

Router(config-if)#ppp auth chap

DHCP서비스 설정

Router(config)#ip dhcp pool [DCHP영역명]

Router(dhcp-config)#network [할당 네트워크 ip]

Router(dhcp-config)#default-router [디폴트 게이트웨이]

Router(dhcp-config)#dns-server [dns주소]

Router(config)ip dhcp excluded-address [할당제외주소 시작] [할당제외주소 끝]

DHCP Relay 설정

Router(config)#int [SUB인터페이스의 포트]

Router(config-subif)#ip helper-address [DHCP서버의 Ip]

라우터와 연결된 네트워크보기

Router(config)#do show ip route

라우팅 정보, 라우팅 프로토콜 데이터가 내부로 전송 안되도록하기

Router(config-router)#passive-interactive [포트]

네트워크정보 전송시 요약안하기

Router(config-router)#no auto-summary

RIP 라우팅

Router(config)#router rip

Router(config-router)#version 2 ** 버전2를 쓰고자 하는 경우에 입력

Router(config-router)#network [네트워크 ip] ** 필요한만큼 반복

* RIP은 동적라우팅이다. HOP 카운트는 15까지만 지원.

* 버전2는 내부정보가 외부로 전달된다.

OSPF라우팅

Router(config)#router ospf [프로세스ID]

Router(config-router)#network [네트워크 ip] [와일드카드마스크] area [에리어 넘버]

** OSPF는 서브넷요약을 하지 않는다. (no auto-summary가 필요없다)

eigrp라우팅

Router(config)#router eigrp [as넘버]

Router(config-router)#network [네트워크 ip] [와일드카드마스크]

Static 라우팅

Router(config)#ip route [목적지 IP] [목적지 서브넷마스크] [경유할 IP or Interface명]

ex ) Router(config)#ip route 123.123.123.0 255.255.255.0 serial[0/0/0]

Default 라우팅

Router(config)#ip route 0.0.0.0 0.0.0.0 [패킷보낼 주소]

* 따로 지정안한 모든패킷에 대한 경로지정.

CDP

Router(config)#show cdp neighbors

Router(config)#show cdp neighbors detail

Router(config)#show cdp neighbors entry *

이웃한 디바이스 확인하는 프로토콜. 셋 중 하나 알아서 사용. detail은 ip주소 나옴.

표준 ACL(access-list)

특정 네트워크의 경우

Router(config)#access-list [리스트 번호] [permit / deny] [출발지] [출발지의 wildcard mask]

Router(config)#int [포트]

Router(config-if)#ip access-gruop [리스트 번호] [in/out]

텔넷/콘솔의 경우

Router(config)#access-list [리스트 번호] [permit / deny] [출발지] [출발지의 wildcard mask]

Router(config)#line vty 0 4

Router(config)#access-class 1 in

Router(config)#login

* ACL은 Top-Down방식.(특수한 상황 설정 → 일반적인 설정)

* access-group/class에서 in은 라우터 들어갈때, out은 나갈때 검사.

* 출발지+출발지wildcardmask를 뭉뜽그려서 any라고 적을 수 있다. 이 경우는 전부다를 말한다. any는 0.0.0.0/32 이다.

확장 ACL

Router(config)#access-list [리스트 번호] [permit / deny] [적용대상] host [출발지] host [목적지]

Router(config)#int [포트]

Router(config-if)#ip access-group [리스트 번호] [in / out]

* access-list에서 [적용대상]은 protocol 혹은 service가 올 수 있다. (예 : ping을 못날리게 하려면 icmp)

NAT

* 예제와 자세한 설명은 여기를 참고

1. Static NAT (주소 안바뀜)

Router(config)#ip nat inside source static [내부ip] [외부ip]

Router(config)#int [내부포트]

Router(config-if)#ip nat inside

Router(config)#int [외부포트]

Router(config-if)#ip nat outside

2. Dynamic NAT(클라이언트 요청에 따라 주소 바뀜)

Router(config)#ip nat [ACL명] [공인ip시작] [공인ip끝] netmask [공용네트워크 서브넷마스크]

Router(config)#ip nat inside source list [ACL번호] pool [ACL명]

Router(config)#access-list [ACL번호] [permit / deny] [공용네트워크ip] [공용네트웍 서브넷마스크]

Router(config)#int [내부포트]

Router(config-if)#ip nat inside

Router(config)#int [외부포트]

Router(config-if)#ip nat outside

PAT

는 NAT overload이다. Dynamic NAT의 첫줄의 끝에 overload 를 붙여준다

NAT : Router(config)#ip nat [ACL명] [공인ip시작] [공인ip끝] netmask [공용네트워크 서브넷마스크]

PAT : Router(config)#ip nat [ACL명] [공인ip시작] [공인ip끝] netmask [공용네트워크 서브넷마스크] overload

* 예제와 자세한 설명은 여기를 참고

02 - 3 시험에서 사용하는 명령어 *스위치*

목차 보기

STP

루트브릿지를 지정하는 경우

Switch(config)#spanning-tree vlan 1 priority 4096

* priority의 최소값 4096. 이후 4096씩 증가. 최대:65535. 기본 32769.

portfast로 지정하는 경우

Switch(config-if)#spanning-tree portfast

* 여러개의 포트 지정시, int range fa0/1-10 과 같이 선택할 수 있다.( 이 경우, Switch(config-if-range)로 표시 )

Port Security

Dynamic Port-security의 경우 : 최초통신시 MAC주소가 학습됨

Switch(config-if)#sw mode access

Switch(config-if)#sw port-security

정적으로 MAC주소를 지정할 경우 :

Switch(config-if)#sw mode access

Switch(config-if)#sw port-security mac-address [MAC주소]

Switch(config-if)#sw port-security

* 지정한 MAC이 아닐때 포트를 다운시키려면, Switch(config-if)#sw port-security violation shutdown 추가

접근가능한 MAC주소의 수를 지정할 경우 :

Switch(config-if)#sw mode access

Switch(config-if)#sw port-security maximum [접근가능한 수]

Switch(config-if)#sw port-security

VTP 설정

Switch(config)#vtp mode [설정할 모드] * Server, Client, Transparent

Switch(config-if)#vtp domain [도메인]

Switch(config-if)#vtp password [비번]

* 자세한 설명은 여기를 참고

VLAN 구성

하위 VLAN들에 대하여

Switch(config)#vlan 10

Switch(config-vlan)#name myvlan

Switch(config-vlan)#exit

Switch(config)#int fa0/1

Switch(config)#sw mode acc

Switch(config)#sw acc vlan 10

적당히 TRUNK로 지정할 포트에 대하여

Switch(config)#int fa0/24

Switch(config)#sw mode trunk

vlan이 잘 구성됐는지 확인하고 싶다면

Switch(config)#do show vlan

03 간단한 시험용 트릭 및 팁들

목차 보기

할당가능한 IP주소 구하기(서브넷마스크와 서브넷팅)

서브넷마스크는 [연속된1]+[연속된0]의 형태. 1은 네트워크영역, 0은 호스트영역.

대충 IP주소처럼 생겼음. ( 8자리.8자리.8자리.8자리 )

0으로 채워진 호스트영역이 할당에 사용할 수 있도록 허락된 공간. 기본 서브넷마스크는 IP 클래스마다 다름

서브넷마스크로 네트웍을 분리하는것 : Subnetting / 합치는 것 : Supernetting

예를 들어, 어떤 네트워크에 기본적으로 할당된 IP가 200.160.200.0/24라고 하자.
이 안에서 A망(컴퓨터 102대연결), B망(컴퓨터 60대연결)을 나눈다.
IP : 200.160.200.0
Subnet mask : 1111 1111 . 1111 1111 . 1111 1111 . 0000 0000

A망

컴퓨터에 들어갈 IP 102개 + zerobit 1개 + broadcast 1개 = 104(hostbit 갯수)

호스트비트 갯수인 104보다 큰, 2의 제곱수는 128 = 2^7 -> 7bit

서브넷마스크는 255.255.255. 1000 0000 로 한자리 잡아먹도록 한다. 0이 7개 남았다. 이걸 A망에 준다.

전체네트워크에서 A망이 잡아먹는 영역은 200.160.200.0~200.160.200.127 (총 128개 주소)

여기서 200.160.200.0은 zerobit로, 200.160.200.127은 broadcast로 사용

실제로 쓸모있게 할당할 수 있는 부분은 200.160.200.1~200.160.200.126(총 126개 주소)

A네트워크의 IP : 200.160.200.0/25
A네트워크 가용IP : 200.160.200.1 ~ 200.160.200.126

→ 문제에서 자주 물어보는 '사용가능한 마지막 IP'는 200.160.200.126이다.

B망

A망에서 이미 서브넷마스크의 첫자리를 잡아먹었다. IP도 .127까지 잡아먹었다.

전체 네트워크에서 남은 IP영역 : 200.160.200.128 ~ 200.160.200.255

계산을 시작할 서브넷마스크 : 255.255.255. 1000 0000

B망에서 컴퓨터에 들어갈 IP 60개 + 제로비트 1개 + 브로드캐스트 1개 = 62

그러므로 필요한 호스트비트수는 64(62보다 큰 2의 제곱수) = 2^6 -> 6bit

서브넷마스크를 한 자리 더 먹어 255.255.255. 1100 0000 으로 사용하자. 호스트비트가 6비트가 됐다.

B망이 사용하는 IP범위 : 200.160.200.128 ~ 200.160.200.191

B 네트워크의 IP : 200.160.200.128 / 27
가용 IP범위 : 200.160.200.129 ~ 200.160.200.190
사용 가능한 마지막 IP주소 : 200.160.200.190

radius AAA Server 설정

1. Server 기기에서

[config]탭 - 좌측[AAA]메뉴

Service : ON

Network configuration : Client Name-알아서, Client IP-라우터ip, secret-키

User setup : Username-유저네임, Password-비번

2. 라우터에서

Router(config)#aaa new-model

Router(config)#aaa authenti login default group radius

Router(config)#radius-server host [서버ip]

Router(config)#radius-server secret [서버 키값]

3. 만약 콘솔/텔넷에 AAA서버인증을 받게하고싶다면

Router(config)#line con 0

Router(config)#login auth default

Router(config)#line vty 0 4

Router(config)#login auth default

을 추가한다

inter-vlan설정

1. Router에서

절차 : 포트선택 → (서브인터페이스 설정 → 802.1q설정 → ip설정)

Router(config)# int fa0/0

Router(config-if)# no shut

Router(config-if)# int fa0/0.10

Router(config-subif)# en do 10

Router(config-subif)# ip addr 111.111.111.111 000.000.000.000

Router(config-if)# int fa0/0.20

Router(config-subif)# en do 20

Router(config-subif)# ip addr 222.222.222.222 000.000.000.000

* 여기서 입력되는 ip는, VLAN당사자의 입장에서는 default-gateway이다.

2. Switch에서

절차 : 각vlan설정 → 라우터 트렁크모드 설정 → vlan네트워크지정 ip설정(필요시)

Switch(config)#vlan 10

Switch(config)#name aaaa

Switch(config)#vlan 20

Switch(config)#name bbbb

Switch(config)#int fa0/1

Switch(config-if)#sw acc vlan 10

Switch(config-if)#sw mode acc

Switch(config)#int fa0/2

Switch(config-if)#sw acc vlan 20

Switch(config-if)#sw mode acc

Switch(config)# int fa0/24

Switch(config-if)# sw mode trunk

Switch(config)# int vlan 20

Switch(config-if)# ip addr [스위치ip] [스위치subnet mask]

Switch(config)#ip def [vlan20의 default-gateway]

DHCP설정 절차

1. Router에서

** server가 있는 네트워크는 해줄필요없다. 나머지 vlan들만 해준다.

ip dh pool [풀 이름]

network [vlan네트워크 주소]

def [vlan의 default gateway]

dns [서버 ip주소]

exit

(반복해서 위 절차 수행)

ip dh ex [시작] [끝]

** 대체로 시작은 ~.1 부터

ip dh ex [시작] [끝]

** 대체로 끝은 ~.255까지

2. 각 기기에서

ip설정 들어가서 static누른다음 DHCP를 선택. 받아져오면 성공

만약 안받아져오는경우

- 우선 스위치의 VLAN설정을 다시해보자

- 안된다면, 라우터에서 해당 인터페이스 설정을 다시해보자

- 여기까지 해서 안되면, 일단 라우터 start-config를 밀어버리고 새로시작하는게 빠르다

- 라우터 밀고도 안되면, 스위치도 밀고 하는게 빠르다(어차피 시간은 남는다)

문제를 대하는 자세

1. 주소 정리

네트워크, 가용ip범위, 디폴트게이트웨이, 서브넷마스크10진수로 정리해두고 시작한다.

2. 라우터 설정

시덥잖은설정 : enable패스워드, 암호화여부, 호스트네임, logging info, 초기화여부

DHCP설정

인터페이스 설정 : 보통 inter-vlan

라우팅 : rip, rip version2, ospf, eigrp 및 static, default

콘솔, 텔넷, PPP, radius 설정

3. 스위치설정

vlan

4. 테스트

완벽하게 돌아간다고 대충 판단하는 기준 : DHCP로 IP는 잘 불러오는지? 웹서비스는 잘 들어가지는지? 이메일은 되는지?

SImple PDU로 어디까지 안되는지 확인 ( 같은 스위치 아래끼리 되는지 → switch까진 되는지? → router까진 되는지? → router너머 스위치 까지 되는지? → router너머 단말까지 되는지? )

다시 밀고 하기 순서 : 단말 확인 → 스위치 포트 재설정 → 라우터 포트 재설정 → 라우터 밀기 → 스위치 밀기

이메일이 안된다

1. 각 단말에서 DNS주소에 서버의 IP를 잘 넣었는가

2. 서버에서 DNS설정을 했는가

3. 오타난게 아닌가

4. 다 안되면 편하게 라우터를 밀고 시작하도록 하자

PDU가 FAIL이다.

1. 두 세번 더해본다

2. 혹시 해당 회차의 PDU가 아니라 다른걸 보고있는게 아닌지 확인.

패킷트레이서 1~9까지 위에서 아래로 잘 가다가, 10번은 1번 밑에있다. 20번은 2번 밑에있다.

3. 그래도 안되면 안되는거 맞다. 밀고 시작하자.

라우팅 해야되는데, 연결된 네트워크 정보가 제대로 안뜬다

1. ospf, rip등으로 라우팅을 하기 위해서 do show ip route로 네트워크 정보를 보려고 하는데,

안뜨는 경우가 발생할 수 있다.

2. 인터페이스 설정을 해줬는지 확인

3. 인터페이스가 다운된게 아닌지 확인 (CLI에서 no shut으로 해결)

4. 뭔가 하드웨어연결 자체가 잘못된게 아닌지 확인

5. 잘 모르겠으면 밀고 다시시작

라우터 flash에 있는 파일 TFTP백업이 안된다

1. 높은 확률로 라우터에서 TFTP서버쪽 인터페이스 설정을 잘못했다.

(ip address입력시 default gateway가 아닌 host를 입력)

2. copy [파일] tftp가 아닌, copy tftp ___ 로 입력한 것이 아닌지 확인

디폴트 라우팅 절차

1. CDP를 켠다

Router(config)# cdp run

2. 인접 디바이스를 조사한다

Router(config)# do show cdp neighbors detail

( 대충 필요없는 디바이스 정보 )

( 대충 버전 몇이라는 말 )

Device ID: ISP
Entry address(es):
IP address : 100.100.100.1
Platform: cisco C2800, Capabilities: Router
Interface: Serial0/0/0, Port ID (outgoing port): Serial0/0/0

( 대충 버전 몇이라는 말 )

3. 디폴트 라우팅한다. ip route [0] [0] [아까 조사한 아이피]

Router(config)# ip route 0.0.0.0 0.0.0.0 100.100.100.1

목차 보기

웹문서에 Web font적용

노는게 제일 좋습니다. — Thu, 19 Mar 2020 01:38:37 +0900

React에서 단순히 html문서에 웹폰트 관련 링크와 적용법을 정리한 것이다.

이 포스트는 옛날 브라우저는 일찍이 갖다버렸으며 요즘 브라우저만 취급한다.

먼저 참고하면 좋을 글

네이버D2 웹폰트 관련내용 전반

혹시 폰트 서브셋을 만들고 싶다면

폰트 파일이 너무 크다면 필요없는 글자를 지워 용량을 줄일 수 있다. 아래 두 가지 방법이 가장 마음에 들어 소개한다.

subfont : 웹페이지에 있는 문자에 대한 서브셋 만들기

fontforge : 그냥 알아서 열심히 서브셋 만들기

TTF를 웹폰트(WOFF2)로 변환하기

세 가지 서비스를 소개한다.

Online Font Converter : 여기가 최고존엄이다.

CONVERT IO : 아쉽게도 WOFF2는 없고, WOFF만 지원한다.

fontsquirrel : TTF를 업로드하면 WOFF 및 WOFF2로 변환되고, 바로 사용가능한 코드가 함께 제공된다. 다만 한글이 깎여나가는지 HTML문서에서 한글에는 폰트적용이 되지 않는 현상이 있다. 네이버 나눔손글씨사용시 나타난 증상이고, 다른 폰트는 잘 모르겠다.

문서에 폰트 적용하기

폰트 파일에 문제가 없다면, css문서에 다음과 같은 형태의 코드로 폰트를 적용할 수 있다.

@font-face{ } 에서 css내에서 사용할 폰트 이름, 폰트가 위치하는 경로를 지정한다.

그 다음, 원하는 엘리먼트에 { font-family : '폰트이름'; } 구문을 통해 폰트를 적용한다.

/* app.css */

@font-face{
  font-family : 'Nanum_gangin';
  src: url('./fonts/nanum_gangin.woff') format('woff');
}

.App{
  font-family : 'Nanum_gangin';
  font-size : 200%;
}

구글폰트 사용하기

위에 있는 것들 전부 다 하기 싫다면, 구글폰트를 사용할 수도 있다. 구글 서버에 저장된 폰트를 필요한만큼 쪼개서 보내준다. 본인이 원하는 폰트가 마침 구글폰트에 있다면, 바로 사용하면 된다.

예를 들어 나눔고딕을 사용하고 싶다고 하자. 오른쪽의 사이드바에서 Embed를 선택하면 태그가 나타난다. link는 html의 head에, @import는 css에 사용할 수 있으니 맘에드는대로 고르면 된다.

조주기능사 필기 합격 후기

노는게 제일 좋습니다. — Tue, 29 Aug 2017 00:45:12 +0900

학원에서 필기/실기 수업을 한달동안 들었었고

교과서를 처음부터 끝까지 보면서 학원에서 짚어준 내용을 중심으로 노트에 요약정리함.

75점으로 합격 했는데 내용을 알아서 합격했다기보다는 감으로 찍어 맞춘 것이 많았음.

기출문제는 두 회차를 풀어봄.

모든사람이 동일한 문제를 받는 것이 아니고, 문제은행으로 출제되는 것으로 알고있음

1. 학원에서는 각 술들의 역사가 출제된 적이 없으니 걸러도 된다 했는데, 문제에 출제되었음. 달라진 부분으로 보임.

2. 커피 문제는 원두 종의 쓰임새가 나왔음.

3. 제조 순서는 안나왔음.

4. 중성세제-더운물-찬물은 단골문제인 것 같음. 기출문제에도 항상 나왔고. 시험에도 나왔음.

18회차(끝) : 구조체 초기화, 비트 구조체, 공용체

노는게 제일 좋습니다. — Fri, 3 Mar 2017 13:28:27 +0900

0. 참고 자료

http://soen.kr/

1. 구조체 초기화

구조체의 멤버들은 마치 배열을 초기화하듯 초기화할 수 있다. 별거없다.

struct b {
  int apple;
  int banana;
};
struct a {
  struct b bb;
  int tomato;
};

struct a plug = { {1,2},3 };
printf("%d %d %d\n", plug.bb.apple, plug.bb.banana, plug.tomato);

2. 구조체의 대입

구조체는 같은 모양이면 대입할 수 있다. 멤버들을 덮어씌우는 것이다.

struct strt {
int one;
int two;
};
struct strt a = { 1,2 };
struct strt b=a;
printf("%d %d", b.one, b.two);

위 예제는 strt태그로부터 구조체 a,b를 만든다. 그리고 b에 a를 대입한다.

이게 가능하다는 것은, 구조체가 좌변값이라는 것. 함수 인수로 받을 수도 있고, 리턴하는데 구조체를 쓸 수 있다.

b=a 구문은 memcpy(&b, &a, sizeof(a)); 와 같다. 메모리를 푹 퍼다가 복사해주는 것이다.

3. 깊은 복사와 얕은 복사

struct strt {
char *pc;
};

struct strt a = { NULL };
struct strt b;

a.pc = malloc(32);
strcpy_s(a.pc,sizeof("helololollooo"),"helololollooo");

b = a;

printf("%s %s\n", a.pc, b.pc);

strcpy_s(a.pc, sizeof("goodbyeeeyee"), "goodbyeeeyee");
printf("%s %s\n", a.pc, b.pc);

위 코드는 a.pc에 "hellololo"비슷한걸 복사하고난뒤에, b=a를 한다.

이후에 a.pc가 가리키는 문자열의 내용을 바꿨더니 b.pc도 바뀐다.

이것은 b.pc에 a.pc의 값 그 자체가 단순히 복사되어 들어갔기 때문이다. helolollolo 문자열이 아닌, 포인터를 복사했다는 말이다.

잘못됐다는 것이 아니라, 이런 현상이 일어나기 때문에 대입했을 때 의도치않은 상황이 생길 수 있다는 것이다.

이와 같이 그냥 단순히 복사만 하는 것을 '얕은 복사' 라고 한다.

반면 '깊은 복사'는 포인터를 복사하는게 아니고, 포인터를 따라가면 나오는 그 값을 취한다.

즉, b=a를 할 때 깊은 복사가 일어났다면, a.pc 라는 포인터가 b.pc로 대입되지 않는다.

b.pc는 새로운 공간을 할당한 뒤에, "helololllo"를 여기에 기록한다.

b = a;
b.pc = malloc(32);
strcpy_s(b.pc, strlen(a.pc)+1, a.pc);

위는 깊은 복사의 한 예이다. b에 일단 a를 대입한다. 그 다음 b에다가는 a포인터를 따라가면 나오는 "helololo"따위의 상수를 기록해준다.

4. 비트 구조체

비트들을 멤버로 가지는 구조체이다.

struct tag_bit {
  unsigned int a : 4;
  unsigned int b : 8;
  unsigned int c : 4;
};

위 코드는 비트 구조체를 정의한 것이다. 타입 멤버이름 : 비트수; 의 형식으로 멤버들을 적어준다.

위의 경우 총 16비트 = 2바이트를 차지한다. 비트들은 먼저 쓰인것이 일반적으로 하위비트(작은 자리)로 들어간다.

예를 들어, 0101 00110101 1110 이렇게 2바이트 코드가 있을 때, 맨뒤 1110을 a가 나타내고, 맨앞 0101을 c가 나타낸다.

struct tag_bit {
  unsigned int a : 4;
  unsigned int : 0;
  unsigned int c : 4;
};

만약 이렇게 크기를 0으로 주면, 해당 워드에서 사용되지 않은 비트는 모두 버린다.

c는 그 다음 워드에서 시작한다. 구조체 패딩과 비슷한 맥락에서 이해할 수 있겠다.

물론, 비트 필드가 구조체에 쓰였다고 해서 우리가 늘상 쓰던 멤버를 쓸 수 없는 것은 아니다. 섞어써도 된다.

5. 공용체

공용체는 구조체와 문법이 유사하나, 멤버들이 기억공간을 공유한다는 특징을 가진다.

union {

int a;

char b[10];

}unab;

위와 같은 코드로 unab라는 이름의 공용체를 하나 정의했다. 여기서 a의 주소와 b의 주소는 같다.

즉, a값이 바뀌면 b값도 바뀐다. b값이 바뀌면 마찬가지로 a값도 바뀐다.

공용체의 크기는 가장 큰 멤버의 크기와 같다.

하나의 정보를 나타내는데 여러 형식으로 나타내고 싶을 때 공용체를 사용한다.

17회차 : 구조체 정의, 구조체 멤버 참조

노는게 제일 좋습니다. — Thu, 2 Mar 2017 21:29:30 +0900

0. 참고 자료

http://soen.kr/

구조체 패딩 http://pangate.com/19

1. 구조체의 정의

여러 변수들을 하나로 묶어둔 것.

struct {

char a[10];

int b;

int c[5];

} studioplug;

위와 같이 a,b,c를 멤버로 가지는 studioplug라는 이름의 구조체를 정의할 수 있다.

구조체 안에 들어있는 변수를 멤버라고 한다. 구조체도 멤버가 될 수 있다. (ㄷㄷ)

studioplug.b=10;

stucioplug.c[2]=100;

멤버에 접근하고 싶으면 위와 같이 한다. 구조체 이름 뒤에 점(.)을 붙이고, 멤버를 적는다.

2. 구조체의 태그

1번항목의 studioplug와 같은 구조체가 단 하나만 필요하다면, 이미 본 예제처럼 바로 정의를 해버려도 된다.

하지만 동일한 모양의 구조체가 여러개 필요하다면, 태그를 사용할 수 있다.

struct studioplug{

char a[10];

int b;

};

위와 같은 코드를 두고 구조체 태그를 선언했다고 표현한다.

struct studioplug first;

태그를 선언한 다음에는 태그를 이용해 위와 같이 구조체를 정의할 수 있다.

strcpy_s(first.a,5,"abcd");

다음과 같이 멤버에 접근할 수 있다.

3. 구조체 포인터

struct plug {
char a;
int b;
};

struct plug g;
struct plug *gp;
gp=&g;

(*gp).a = 'a';
gp->b = 5;
printf("%c %c %c\n", g.a, (*gp).a, gp->a);
printf("%d %d %d\n", g.b, (*gp).b, gp->b);

위의 코드는 구조체의 포인터를 만들고, 이를 이용해 멤버의 값을 출력하는 동작을 한다.

struct plug *gp와 같이 포인터를 만들 수 있고, (*gp).a 또는 gp->a와 같이 멤버에 접근할 수 있다.

->는 멤버 액세스 연산자라고 한다. 좌변에 구조체 포인터, 우변에 멤버이름이 온다.

4. 구조체 배열

struct plug {
char a;
int b;
};

struct plug strArray[10];

와 같이 코드를 적으면 plug구조체를 원소로 하는 strArray배열이 만들어진다.

strArray[0].a='g'; 나, strArray[5].b=53; 같이 멤버에 접근할 수 있다.

struct plug *strPtr[10];

for(int i=0;i<10;i++){

strPtr[i]=(struct plug *)malloc(sizeof(struct plug));

}

strPtr[5]->b=53;

위와 같이 구조체 포인터를 하나 두고, 동적할당을 해줄 수도 있다.

5. 중첩 구조체

구조체 멤버로 구조체가 올 수도 있다. 단, 자기중첩이나 상호중첩은 안된다.

struct a{

struct a *b;

};

그러나 구조체 멤버로 자신의 구조체포인터를 가질 수는 있다. 이를 자기 참조 구조체 라고 한다.

struct b{

int apple;

int banana;

};

struct a{

struct b bb;

};

struct a plug;

plug.bb.apple=53;

plug.bb.banana=5353;

위 코드는 구조체 b가 구조체a의 멤버변수인 경우이다. 이 상황에서 a속 bb의 멤버변수에 접근하는 예를 보여준다.

16회차 : 문자열 함수, 수치와 문자열

노는게 제일 좋습니다. — Wed, 1 Mar 2017 04:45:05 +0900

오늘은 글을 쓰면서 마크다운을 배워야겠다는 생각이 강렬히 들었다.

그리고 주변 지인들에겐 옛날자료 보지말고 최신책 사서 보라고 말해줘야겠다

모두 string.h 에 포함된 함수들.

0. 참고 자료

내용 전체 http://soen.kr/

strcpy_s http://ehclub.co.kr/790

strncpy_s http://ehclub.co.kr/792

1. 문자열 길이 조사

- size_t strlen(const char *string);

널문자는 길이에 포함되지 않음. 길이의 단위는 바이트.

( 예 : printf("%s",strlen("studio플러그")); // studio는 6바이트, 플러그는 6바이트, 총 12바이트. 12출력. )

2 문자열 복사

- strcpy_s(char *dest, size_t length, const char *src);

dest : src를 복사할 문자열 포인터, length : 버퍼 길이, src : 복사될 문자열 포인터

src의 내용을 dest에 복사해 넣는다.

*기존 strcpy(char *dest, char *src)함수에서는 src길이>(dest길이-1) 이면 오버플로 버그가 났었다고 한다. 이를 해결한게 strcpy_s라고.

- errno_t strncpy_s ( char * destination,size_t size, const char * source, size_t n );

destination : source를 복사할 문자열 포인터, size:버퍼길이, source:복사될 문자열 포인터, n:복사할 길이

* source지점에서부터 n개의 문자를 destination위치에 복사한다.

* 복사하고 나서 뒤에 널문자를 붙인다.

3. 문자열 연결

- char *strcat_s(char *dest, size_t size, const char *src);

dest의 널문자를 지우고, src문자열을 dest문자열 뒤에 붙인다.

이 때, dest의 문자배열 크기는 dest와 src의 길이를 합친 것보다 같거나 커야한다. 작으면 프로그램 뻗음.

- char *strncat_s(char *dest, size_t size, const char *src,size_t count);

strcat_s와 같으나, src문자열에서 count만큼의 갯수만 연결해준다.

4. 문자열 비교

- int strcmp(const char *s1, const char *s2);

- int strncmp(const char *s1, const char *s2, size_t count);

내용이 같으면 0리턴.

내용이 다른경우 s1값이 크면 양수, s2가 크면 음수 리턴

- int stricmp(const char *string1, const char *string2);

- int strnicmp(const char *string1, const char *string2, size_t count);

이런것도 있는데. i가 함수이름 중간에 들어가면 대소문자를 무시한다. ab나 AB나 똑같은거다.

5. 문자열 검색

- char *strchr(const char *string, int c);

string문자열 안에서 c에 해당하는 문자중 가장 앞쪽것의 번지를 리턴한다. 없으면 NULL리턴.

printf("%d %d\n", "abAB", strchr(d, 'A')); 하면 두 값이 2차이날것. 'A'부분을 65로 바꿔도 됨.

- char *strrchr(const char *string, int c);

strchr랑 하는짓은 똑같은데 뒤에서부터 검색한다.

- char *strstr(const char *string, const char *strSearch);

string문자열 안에서 strSearch문자열을 찾아 시작번지 리턴

- char *strpbrk(const char *string, const char *strCharSet );

strCharSet문자열에 들어있는 문자 하나하나를 모조리 string내에서 검색한다. 가장 빨리 찾은놈의 번지를 리턴.

printf("%d %d\n", "umapplepen", strpbrk("umapplepen", "abcd"));

이러면 두 번지값의 차이가 2 난다. umapplepen에서 a를 가장 먼저 찾았기 때문.

- char *strtok(char *strToken, const char *strDelimit);

strDelimit에는 구분자를 준다. ", "와 같이 주면 쉼표(,)와 공백( )을 구분자로 사용한다.

strToken에서 이 문자들을 만나면 그 위치에 NULL값을 쓴 뒤, 앞에있는 문자열의 포인터를 리턴한다.

첫 번째 인수가 NULL이면 NULL문자를 만날 때 까지 윗줄의 동작을 반복한다.

int main()
{
char s[20] = "a b c d,e f";
char *p=strtok(s,", ");

while (p != NULL)
{
printf("%d %s \n", p, p);
p = strtok(NULL, ", ");
}

return 0;
}

6. 문자열 변환

- char *strset(char *string, int c);

- char *strnset(char *string, int c, size_t count);

string문자열을 c문자로 채운다. strnset은 갯수지정가능.

- char *strlwr(char *string);

모두 소문자로

- char *strupr(char *string);

모두 대문자로

- char *strrev(char *string);

문자열 순서 뒤집기. apple->elppa

7. 문자가 특정 그룹에 속하는지 확인, 대소문자 변환

http://soen.kr/lecture/ccpp/cpp1/12-1-6.htm

함수를 호출해 그룹에 속하면 0아닌값, 안속하면 0을 리턴.

tolower(char)는 소문자로, toupper(char)는 대문자로.

8. 메모리 관리 함수

- void *memcpy(void *dest, const void *src, size_t count);

- void *memmove(void *dest,const void *src,size_t count);

현재 vs에서는 둘은 같은 함수.

- int memcmp(const void *buf1,const void *buf2,size_t count);

같나 안같다 보는함수

- void *memchr(const void *buf,int c,size_t count);

찾기

- void *memset(void *dest,int c,size_t count);

dest를 싸그리 c로 count개만큼 값을 바꿈.

9. 숫자--->문자(열) 변환 함수

char *itoa(int value, char *string, int radix);

char *ltoa(long value, char *string, int radix);

char *ultoa(unsigned long value, char *string, int radix);

정수를 문자로 바꿈. value는 숫자. string은 문자로 바뀐게 저장될 문자배열. radix는 진법

char *gcvt(double value, int digits, char *buffer);

char *ecvt(double value, int count, int *dec, int *sign);

char *fcvt(double value, int count, int *dec, int *sign);

실수를 문자로 바꿈

10. 문자(열)--->숫자 변환함수

int atoi(const char *string);

long atol(const char *string);

long strtol(const char *nptr, char **endptr, int base);

unsigned long strtoul(const char *nptr, char **endptr, int base);

문자(열)을 숫자로 바꿔 리턴. atoi, atol은 10진법으로만 인식하지만, strtol,strtoul은 진법바꾸기 가능.

base가 진법.

double atof(const char *string);

double strtod(const char *nptr, char **endptr);

문자(열)을 실수로 바꿔 리턴

11.sprintf()

- int sprintf(char *buffer,const char *format , ...);

printf와 같지만, 고거를 그냥 출력을 안하고 버퍼포인터로 보낸다. 왜지..

15회차 : 배열 포인터, 배열과 문자열

노는게 제일 좋습니다. — Sun, 26 Feb 2017 18:57:42 +0900

참고 자료 http://soen.kr/

이번에도 이 내용들을 이해하는데 시간이 정말 오래걸렸다.

개념 자체는 별 것 아닌데, 실제로 코드를 써보고 이건 왜 이런지를 고민하는 시간이 많았다.

1. 배열 포인터

int intar[5][3]={{1,2,3,4,5},{6,7,8,9,10},{11,12,13,14,15}};

int (*ar)[3];

ar = intar;

여기서 *ar++를 하면 {6,7,8,9,10}을 가리킨다.

만약 int(*ar)[3]에 int a[7]={1,2,3,4,5,6,7} 을 넣고싶다면, 이렇게 캐스팅할 수 있다.

ar = (int(*)[3])a;

2. 배열 인수의 표현

함수가 배열을 인수로 받을 때, *ar로 써도되고, ar[i]로 써도 된다.

사실 배열을 인수로 전달할 수는 없다. 배열의 포인터를 전달한다.

void sum(int ar[3])
{
int a = 0;
for (int i = 0; i < 3; i++)
{
a += ar[i];
}
printf("%d\n",a);
}

int main()
{
int ar[3] = { 1,2,3 };
sum(ar);
}

다음과 같은 코드에서 첫줄은 void sum(int *ar) 와 같이 써도 된다.

int ar[3][2] = { 1,2,3,4,5,6 }; 일 경우는 void sum(int ar[][2]), void sum(int (*ar)[2])로 쓰면 된다.

두 번째 첨자부터만 똑바로 쓰면 된다. 그 앞의 것은 아무숫자나 넣어도 된다.

3. 문자열 상수

printf("hello"); 라는 프로그램을 실행할 때, "hello"는 정적데이터 영역에 문자형 포인터로 기록된다. 맨 뒤에는 널문자가 1바이트를 차지한다. 만약 같은 문자열이 여러번 나오면 한 번만 기록한다.

이후 이걸 가져다가 써서 화면에 hello를 출력한다.

4. 문자형 배열과 문자형 포인터의 차이

char *ch="hello";

의 경우, 정적데이터 영역에 hello를 기록하고 포인터를 값으로 갖는다.

char ch[]="hello";

의 경우 정적데이터 영역에 hello를 기록하는 것 까진 같다. 그러나 이후 그 기록된 내용을 사용해 ch배열을 초기화한다. 즉, 정적데이터 영역에 기록된 문자열을 그대로 가리키는 것이 아니라, 그 내용을 가져다 새로운 배열을 꾸리는 것이다.

5. 정적데이터 영역의 초기화

일반적으로 정적데이터 영역은 프로그램 실행 파일 내부이므로 값을 쓸 수 없다. 읽기만 가능하다.

14회차 : 첨자 연산, 포인터 배열

노는게 제일 좋습니다. — Thu, 23 Feb 2017 05:03:52 +0900

참고자료 http://soen.kr/

그 어느때보다 혼돈의 카오스가 가득한 공부였다...

주변에 실력자들이 많아서 감사하게도 편하게 공부한다.

1. 부분배열(subArray)

int a[2][5]; 라고 한다면 보통 다차원 배열이라고 부르지만 c에는 다차원배열이 존재하지 않고 오직 일차원배열만이 존재한다.

즉, a[2][5]배열은 이차원배열이 아니며 a[0], a[1] 이라는 부분배열을 가진다. a[0]는 그저 a의 원소가 아니라, 하나의 완전한 배열인 것이다.

a[0]이라는 배열은 a[0][0]~a[0][4]라는 원소를 가질 것이다.

2. 포인터 배열

원소가 포인터형인 배열.

예 : char *a[5]={"java","python","perl","ruby","cpp"};

만약 위와같이 정의를 해두면, "java"가 메모리공간 어딘가에 저장되고, 그 포인터가 반환돼서 a[0]으로 쏙 들어간다.

printf("%s",a[0])을 하면 그래서 "java"가 출력된다.

%s는 문자열의 포인터를 받아 문자열을 출력한다.

3. 배열과 포인터의 차이

- 배열은 상수, 포인터는 변수. 가리키는 대상이 바뀔 수 있는지 여부가 다르다.

- 배열 원소에 접근할 때는 배열 포인터에서부터 인덱스만큼 이동해 읽지만, 포인터는 대상체로 직접 이동한다. 접근속도는 포인터가 배열보다 빠르다.

13회차 : 동적 메모리 할당, 이중 포인터

노는게 제일 좋습니다. — Mon, 20 Feb 2017 22:54:51 +0900

참고자료 http://soen.kr/

1. 동적 할당, 할당 해제

malloc과 calloc은 인수에 넣은 만큼의 공간을 할당하는 함수. free는 메모리를 풀어주는 함수. stdlib.h에 있다.

void *malloc(size_t size );

void *calloc( size_t num, size_t size );

void free(void *memblock );

예

int *ar;
ar = malloc(10 * sizeof(int));
printf("%p",ar);
free(ar);
printf("\n%p", ar);

2. 재할당

void *realloc( void *memblock, size_t size );

첫 번째 인수로 할당된 메모리의 번지를 주고, 두 번째 인수로 재할당 크기를 준다.

첫 번째 인수가 NULL이면 메모리를 새로 할당하고, 두 번째 인수가 0이면 할당 해제한다.(free함수와 같음)

혹시 메모리 사정상 포인터값이 바뀔 수는 있지만, 내용은 유지된다.

3. 할당한 메모리 크기 읽기

size_t _msize(void *memblock);

표준함수는 아니다.

4. 다중포인터

포인터를 가리키는 포인터

int i = 53;
int *pi = &i;
int **ppi = π

printf("pi:%d *ppi:%d **ppi:%d", pi, *ppi, **ppi);

-> 출력결과 예 : pi:1234 *ppi:1234 **ppi:53

5. main함수의 리턴값

프로그램이 종료될 때 운영체제로 넘기는 리턴값. 탈출코드 라고도 한다.

6. main함수의 인수

main함수의 원형은 다음과 같이 쓸 수 있다. 인수는 뒤에서부터 차례로 생략할 수 있다.

void(또는 int) main(int argc,char *argv[],char *env[]);

- int argc : 받을 인수의 갯수. 프로그램 이름을 포함한다. (program 1 2와 같이 호출이 argc의 값은 3)

- char *argv[] : 인수의 값. argv[0]은 프로그램 이름. 이후는 인수

- char *env[] : 운영체제의 환경변수

7. void ** 이중포인터

void **은 void *과는 다르게, 어떤 대상체를 가리키며 어떤 타입인지 정확히 알고있다.

void * 타입인 어떤 포인터를 가리키는 것이다.

void *avp[5];
void **vp = avp; //avp배열의 포인터를 대입

int i = 5;
avp[0] = &i;

// **vp; 로 avp[0]을 읽지는 못한다
printf("%d", *(int *)*vp); // 5