Kakaroo Workspace

git 공개키 등록

kakaroo — Thu, 28 Dec 2023 09:23:58 +0900

$ git config --global user.name "[user name]"

$ git config --global user.email "[user email]"

$ ssh-keygen -t ed25519 -C "[user email]"

>> -t 옵션은 ed25519 대신 rsa

$ cat ~/.ssh/id_ed25519.pub

또는

$ cat ~/.ssh/id_rsa.pub

Series

kakaroo — Tue, 21 Mar 2023 20:37:41 +0900

파이썬 - 파일, 디렉토리

kakaroo — Tue, 7 Mar 2023 07:25:53 +0900

파일의 경로

file = "/content/drive/A/letter.txt"

dirname = os.path.dirname(file)

basename = os.path.basename(file)

print(f'dirname = {dirname}')

print(f'basename = {basename}')

f-string 포매팅은 파이썬 버전 3.6 부터 사용할 수 있는 따끈따끈한 기능 입니다.
이전에 언급했던, %포매팅과 str.format 방법보다 더 최근에 나온 것 입니다.

f-string의 모양은 f와 {}만 알면 됩니다. 문자열 맨 앞에 f를 붙여주고, 중괄호 안에 직접 변수 이름이나 출력하고 싶은것을 바로 넣으면 됩니다.
f'문자열 {변수} 문자열'

디렉토리/파일 확인

현재 작업디렉토리

os.getcwd()

os.cdir('./MyDir/A')

os.mkdir('../C')

os.path.isdir(filename)

os.path.exists(filename)

파일 읽기 쓰기

예)

with 구문을 사용하면 statement 를 벗어날 때 자동적으로 반환되므로 close 를 사용할 필요가 없다.

오류 발생시 try except 를 사용하자

파일 복사

import os

print(os.getcwd())

fileR = 'D:/data/python/workspace/class/test.txt'
fileW = 'D:/data/python/workspace/class/test_cp.txt'

if os.access(fileR, os.F_OK) and os.access(fileR, os.R_OK) :
    with open(fileR, 'r') as rp, open(fileW, 'w') as wp :
        msg = rp.read()
        wp.write(msg)
    print(f'{fileR!r} copy success')
else :
    open(fileR, 'w')

파일의 행 조작

행 조작 프로그램 작성

파일을 열어 다음과 같이 조작하여 저장하는 프로그램을 작성하라

./MyPythonFiles/mydata.txt 파일을 사용한다
파일 조작 내용은 다음과 같다
- 1~3번째 행을 삭제한다
- 파일의 각 행을 길이 별로 정렬한다 (길이에 행 번호는 포함하지 않음)
- 마지막 행에 “Good luck to you!\n”를 추가한다
- 새롭게 1번부터 시작하는 행 번호를 붙여 mydataT.txt 로 저장한다

# mydata.txt
1 Time doesn't wait for anyone.
2 Idleness is an enemy to success.
3 More haste, less speed.
4 Make hay while the sun shines.
5 Every failure is a stepping stone to success.
6 A friend is a second self.
7 Life isn't always what one like.
8 It doesn't hurt to try.
9 He who laughs alst, laughs best.
10 Rather be dead then cool.
11 Learning to love yourself is the greatest love of all.

# mydataT.txt
1 It doesn't hurt to try.
2 Rather be dead then cool.
3 A friend is a second self.
4 Make hay while the sun shines.
5 Life isn't always what one like.
6 He who laughs alst, laughs best.
7 Every failure is a stepping stone to success.
8 Learning to love yourself is the greatest love of all.
9 Good luck to you!

import os

fileR = '/workspace/MOOC_L2_Python_for_w/01_File_IO/MyPythonFiles/mydata.txt'
fileW = '/workspace/MOOC_L2_Python_for_w/01_File_IO/MyPythonFiles/mydataT.txt'
# 1~3번째 행을 삭제한다
# 파일의 각 행을 길이 별로 정렬한다 (길이에 행 번호는 포함하지 않음)
# 마지막 행에 “Good luck to you!\n”를 추가한다
# 새롭게 1번부터 시작하는 행 번호를 붙여 mydataT.txt 로 저장한다
# 문자열, 문자열 list, built-in함수(enumerate, zip, map)
import pprint as pp

if os.path.exists(fileR) :
    # 여기에 코드를 작성하세요!
    with open(fileR, 'r') as fp :
        r = fp.readlines()       
        rn = r[3:]
        rn = [x.split(maxsplit=1, sep=' ')[1] for x in rn]
        rn.sort(key=len)#, reverse=True)
        rn.append('Good luck to you!\n')
        rn = [ f'{idx} {x}' for idx, x in enumerate(rn, start=1) ]
        #pp.pprint(rn)  #줄바꿈으로 프린트하기 위해 pprint 사용
        
    with open(fileW, 'w') as wp :
        wp.write(''.join(rn))
        
            
    print(f"{fileR!r} transformation success!!")
else :
    print(f"{fileR!r} doesn\'t exist")

열 조작 프로그램 작성

파일을 열어 다음과 같이 조작하여 저장하는 프로그램을 작성하라

/content/drive/MyDrive/MyPythonFiles/mydata2.txt 파일을 사용한다
파일 조작 내용은 다음과 같다
- 1번, 6번 열을 교환하고, 3번, 4번 열을 교환한다
- 마지막 열을 삭제한다
- 교환을 위한 함수와 삭제를 위한 함수를 각각 작성하여 사용한다
- mydata2T.txt 로 저장한다

# mydata2.txt

1 283 748 328 57 454 7 148 289
2 240 996 7 578 826 254 65 272
3 754 674 781 925 681 656 963 445
4 700 304 598 584 469 40 808 954
5 94 27 374 587 373 912 218 447
6 216 487 800 320 434 324 449 756
7 889 742 259 636 71 194 598 391
8 308 623 9 993 426 567 243 629
9 131 668 137 654 321 758 301 742
10 51 331 211 408 817 529 513 161

# mydata2T.txt
1 7 748 57 328 454 283 148
2 254 996 578 7 826 240 65
3 656 674 925 781 681 754 963
4 40 304 584 598 469 700 808
5 912 27 587 374 373 94 218
6 324 487 320 800 434 216 449
7 194 742 636 259 71 889 598
8 567 623 993 9 426 308 243
9 758 668 654 137 321 131 301
10 529 331 408 211 817 51 513

import os

fileR = '/workspace/MOOC_L2_Python_for_w/01_File_IO/MyPythonFiles/mydata2.txt'
fileW = '/workspace/MOOC_L2_Python_for_w/01_File_IO/MyPythonFiles/mydata2T.txt'

# 1번, 6번 열을 교환하고, 3번, 4번 열을 교환한다
# 마지막 열을 삭제한다
# 교환을 위한 함수와 삭제를 위한 함수를 각각 작성하여 사용한다
# mydata2T.txt 로 저장한다
import pprint as pp

def exchangeCols(data, c1, c2):
    for x in data :
        x[c1], x[c2] = x[c2], x[c1]

def deleteColumn(data, c):
    for x in data :
        del x[c]

if os.path.exists(fileR) :
    # 여기에 코드를 작성하세요
    with open(fileR, 'r') as fp :
        r = fp.readlines()
        rn = [x.split() for x in r]
        exchangeCols(rn, 1, 6)
        exchangeCols(rn, 3, 4)
        deleteColumn(rn, -1)
    
    with open(fileW, 'w') as fp :
        rn = '\n'.join([' '.join(x) for x in rn])
        fp.write(rn)
    print(rn)

    print(f"{fileR!r} transformation success!!")
else :
    print(f"{fileR!r} doesn\'t exist")

파일, 디렉터리 복사

File객체의 read(), write()를 사용하여 1개 파일 복사
shutil 모듈의 copy() 함수를 사용하여 1개 파일 복사
- shutil.copy(원본파일, 사본파일)
distutils.dir_util의 copy_tree() 함수를 사용하여 1개 디렉터리 복사
- distutils.dir_util.copy_tree(원본디렉터리, 사본디렉터리)

import os

fileR = './MyPythonFiles/letter.txt'
fileW = './MyPythonFiles/letter_cp.txt'

if os.path.exists(fileR) :
    with open(fileR, 'r') as myfileR, open(fileW, 'w') as myfileW:
        mycontents = myfileR.read()
        myfileW.write(mycontents)

    print(f"{fileR!r} copy success!!")
else :
    print(f"{fileR!r} doesn\'t exist")
    
###############################################

import os,shutil

fileR = './MyPythonFiles/letter.txt'
fileW = './MyPythonFiles/letter_cp2.txt'

if os.path.exists(fileR) :
    # 파일 복사 코드 작성
    shutil.copy(fileR, fileW)    
    
    print(f"{fileR!r} copy success!!")
else :
    print(f"{fileR!r} doesn\'t exist")
    
###############################################

import os
from distutils.dir_util import copy_tree
dirR = './MyPythonFiles/TextFiles'
dirW = './TextFiles' 

if os.path.exists(dirR) :
    # 디렉터리 복사 코드 작성
    copy_tree(dirR, dirW)   
    
    print(f"{dirR!r} copy success!!")
else :
    print(f"{dirR!r} doesn\'t exist")

binary 파일 저장 - pickle 모듈

객체 serialization/deserialization을 수행
Serialization : 객체의 상태를 메모리나 영구 저장 장치에 저장이 가능한 정보로 바꾸는 것
Deserialization : binary 파일을 읽어 객체로 복원하는 작업
open() 함수를 사용하여 pickle 파일에 쓰기 작업 할 때 'wb' 모드 사용
- pickle.dump(객체, file_handle)
open() 함수를 사용하여 pickle 파일에서 읽기 작업할 때 'rb' 모드 사용
- X = pickle.load(file_handle)

import pickle

# data.pkl에 객체 D, E 쓰기 - serialization

D = {'A' : 65, 'B' : 66}
E = [1, 2, 3, 4, 5]
with open('data.pkl', 'wb') as fp:
      # dict object
    pickle.dump(D, fp)
      # list object
    pickle.dump(E, fp)

print('write - data.pkl')

##############################

# data.pkl 에서 객체 2개 읽기 - deserialization

with open('data.pkl', 'rb') as fp :
      # dict object
    X = pickle.load(fp)
    Y = pickle.load(fp)
      # list object

print(X, Y)

#출력
{'A': 65, 'B': 66} [1, 2, 3, 4, 5]

##############################

# data.pkl 에서 객체 여러개 읽기(EOFError) - deserialization
with open('data.pkl', 'rb') as fp :
    while True :
        try :
            X = pickle.load(fp)
            print(X)
        except EOFError :
            break
            
#출력
{'A': 65, 'B': 66}
[1, 2, 3, 4, 5]

binary 파일 저장 - shelve 모듈

key 를 이용해 객체를 저장하고 불러옴
- key 는 문자열을 사용함
mode 부여 필요 없음
- 읽고, 쓰기 모두 가능하게 열림
한 번 쓰기 한 내용은 계속 유지됨
같은 ‘key’로 여러 번 저장 시 최근 것으로 저장됨 (갱신)
Windows에서는 X.bak. X.dat, X.dir 세 개의 파일이 생성되고, Linux에서는 X.db 파일이 생성됨

import shelve
fruits = ['orange', 'banana', 'apple']

with shelve.open('myshelf') as mydata :
    mydata['fruits'] = fruits  # 쓰기 작업
    X = mydata['fruits']       # 읽기 작업
    print(X)
    
>>
['orange', 'banana', 'apple']

import shelve
fruits = ['orange', 'apple']
myStr = 'hello!'
myValue = 100.2

with shelve.open('myshelf') as mydata:
     mydata['fruits'] = fruits   # 쓰기
     mydata['myStr']  = myStr
     mydata['myValue'] = myValue
     mydata['myValue'] = 200.54
     print(list(mydata.keys()))
     print(list(mydata.values()))
     print(mydata['myValue'])
     print(mydata['fruits'])     # 읽기
     print(mydata['myStr'])
     
 >>
['fruits', 'myStr', 'myValue']
[['orange', 'apple'], 'hello!', 200.54]
200.54
['orange', 'apple']
hello!

Pandas

kakaroo — Fri, 9 Dec 2022 09:31:57 +0900

데이터 로드와 저장

1. CSV 파일 로드하기

예제)

csv 파일을 editor로 열면 아래와 같이 쉼표로 구분되어 있다.

a,b,c,d,e,keyword
1,2,3,4,5,Hello
11,12,13,14,15,Good
21,22,23,24,25,Nice
31,32,33,34,35,Beautiful
41,42,43,44,45,GoGo

import pandas as pd

filename = "../datasets/example_1.csv"

df = pd.read_csv(filename)		//dataFrame 형식으로 읽기

tbl = pd.read_table(filename, sep=',')	//구분자 넣어줘야

    a   b   c   d   e    keyword
0   1   2   3   4   5      Hello
1  11  12  13  14  15       Good
2  21  22  23  24  25       Nice
3  31  32  33  34  35  Beautiful
4  41  42  43  44  45       GoGo

2. 컬럼명 항목이 없는 데이터 로드하기

1,2,3,4,5,Hello
11,12,13,14,15,Good
21,22,23,24,25,Nice
31,32,33,34,35,Beautiful
41,42,43,44,45,GoGo

import pandas as pd

filename2 = "../datasets/example_2.csv"

df1 = pd.read_csv(filename2)

맨 위의 행이 헤더로 인식한다.

    1   2   3   4   5      Hello
0  11  12  13  14  15       Good
1  21  22  23  24  25       Nice
2  31  32  33  34  35  Beautiful
3  41  42  43  44  45       GoGo

이 때는 원본데이터에 헤더가 없으니 header=None 옵션을 준다.

df1 = pd.read_csv(filename2, header=None)

    0   1   2   3   4          5
0   1   2   3   4   5      Hello
1  11  12  13  14  15       Good
2  21  22  23  24  25       Nice
3  31  32  33  34  35  Beautiful
4  41  42  43  44  45       GoGo

index, columns 변경

Unity - Shooting Game

kakaroo — Sun, 23 Oct 2022 10:27:36 +0900

1. PlayerMove

목표: 컨트롤에 따라 이동한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerMove : MonoBehaviour
{
    public float speed = 5f;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        float h = Input.GetAxis("Horizontal");
        float v = Input.GetAxis("Vertical");

        Vector3 dir = new Vector3(h, v, 0);
        //transform.Translate(dir * speed * Time.deltaTime);    //아래와 같다.
        transform.position += dir * speed * Time.deltaTime; // P = P0 + vt
        
    }
}

2. Bullet

목표: 위로 정해진 속도에 따라 이동한다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Bullet : MonoBehaviour
{
    public float speed = 5f;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        //1. 방향
        Vector3 dir = Vector3.up;

        //2. 이동
        transform.position += dir * speed * Time.deltaTime;
        
    }
}

3. Bullet Prefab 생성

4. PlayerFire

목표 : 발사버튼을 누르면 총알이 Player 위치에서 위로 나간다.

생성할 bulletPrefab과 PlayerPosition을 지정해준다.

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class PlayerFire : MonoBehaviour
{
    public float speed = 5f;
    public GameObject bulletPrefab;
    public GameObject playerPosition;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        //1. 발사버튼을 누르면
        if(Input.GetButtonDown("Fire1"))
        {
            //2. 총알을 만든다
            GameObject bullet = Instantiate(bulletPrefab);

            //3. 총알이 움직이는 건 bullet.cs에서 설정했기 때문에 총알의 위치만 선정한다. 
            bullet.transform.position = playerPosition.transform.position;
        }
    }
}

5. 목표물(적 : Enemy)

목표: Player를 향하거나 그냥 아래로 내려온다. Player를 맞추거나 총알에 맞으면 사라진다.

충돌효과를 나타내기 위해 RigidBody 설정

Add Component > Physics > RigidBody

스크립트에서 아래로 이동할 것이므로 Gravity는 uncheck

충돌 처리는 아래 함수를 사용

private void OnCollisionEnter(Collision other)

{

//충돌시작

}

private void OnCollisionStay(Collision other)

{

//충돌중

}

private void OnCollisionExit(Collision other)

{

//충돌끝

}

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Enemy : MonoBehaviour
{
    public float speed = 5f;

    // Start is called before the first frame update
    void Start()
    {
        
    }

    // Update is called once per frame
    void Update()
    {
        Vector3 dir = Vector3.down;
        transform.position += dir * speed * Time.deltaTime;        
    }

    private void OnCollisionEnter(Collision other)
    {
        //충돌시작
        Destroy(other.gameObject);
        Destroy(gameObject);
    }
    private void OnCollisionStay(Collision other)
    {
        //충돌중
    }
    private void OnCollisionExit(Collision other)
    {
        //충돌끝
    }
}

6. 목표물 prefab 만들기

7. 목표물 매니저 만들기

목표 : 랜덤한 시간마다 목표물을 위치에 생성한다

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class EnemyManager : MonoBehaviour
{
    float currentTime;
    
    public float minTime = 1;
    public float maxTime = 5;

    float createTime = 1;    //1초
    public GameObject enemyPrefab;

    // Start is called before the first frame update
    void Start()
    {        
        createTime = UnityEngine.Random.Range(minTime, maxTime);
    }

    // Update is called once per frame
    void Update()
    {
        currentTime += Time.deltaTime;

        if(currentTime > createTime)
        {
            GameObject enemy = Instantiate(enemyPrefab);
            enemy.transform.position = transform.position;
            currentTime = UnityEngine.Random.Range(minTime, maxTime);
        }        
    }
}

목표물 위치는 한 군데에서 시작하므로 여러 군데에서 나오기 위해 EnemyManager를 Ctrl+D 로 복사해서 X 위치값만 변경해준다.

-30 부터 10씩 증가

8. 목표물이 Player를 향해 가도록 수정

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class Enemy : MonoBehaviour
{
    public float speed = 5f;

    Vector3 dir;

    // Start is called before the first frame update
    void Start()
    {
        int randValue = UnityEngine.Random.Range(0,10);
        if(randValue <= 3)
        {
            GameObject target = GameObject.Find("Player");  //Target 찾기
            dir = target.transform.position - transform.position; //방향 구하기
            dir.Normalize();    //방향의 크기를 1로
        }
        else
        {
            dir = Vector3.down;
        }
    }

    // Update is called once per frame
    void Update()
    {
        transform.position += dir * speed * Time.deltaTime;        
    }

    private void OnCollisionEnter(Collision other)
    {
        //충돌시작
        Destroy(other.gameObject);
        Destroy(gameObject);
    }
    private void OnCollisionStay(Collision other)
    {
        //충돌중
    }
    private void OnCollisionExit(Collision other)
    {
        //충돌끝
    }
}

9. 영역 감지

영역을 벗어나면 스스로 destory 가 되어야 한다. 좌우아래 Zone을 설정한다.

IsTrigger 옵션 활성화 : 물체가 부딪혔을 때 트리거가 자동으로 충돌했다는 함수를 호출

RigidBody > IsKinematic : 충돌할 수 있는 물체지만 물리적인 행동을 하지않도록 하는 옵션

using System.Collections;
using System.Collections.Generic;
using UnityEngine;

public class DestroyZone : MonoBehaviour
{
    private void OnTriggerEnter(Collider other)
    {
        Destroy(other.gameObject);
    }
}

좌우아래 Zone이 서로 겹쳐서 게임을 시작하면 없어짐

Layer를 설정하고, 아래 동일한 Layer 끼리는 Physics 가 동작하지 않도록 설정한다.

Player, Bullet, Enemy 도 Layer를 지정해주고 아래와 같이 설정

일러스트 - 텍스트 (feat. Compound Path + PathFinder)

kakaroo — Tue, 13 Sep 2022 22:29:01 +0900

1. Create Outlines (글자체 : Bauhaus93)

2. Fill - 흰색

3. Offset path > 5 pt > Fill as black

4. Offset path > -10 pt > Stroke as black and size 4 pt

5. Ungroup > Object 를 shift로 하나씩 전체 선택 > Object > Compound path > Make

과정 4에서 잡은 안의 object 안에만 효과를 주기 위한 것이므로 내부 object만 compound path 해준다.

Compound path는 path를 합치는 것인데, Pathfinder는 path를 합치고 나면 분리해서 작업을 할 수 없는데 반해, Compound path는 release 가 가능하다.

6. Blend (0.5 px - 5 px)

7. 블렌드 툴로 생성된 선들을 Fill object가 나올 때까지 Expand 한뒤, Fill object가 나오면 Compound Path를 한다.

8. 과정 5와 과정 7의 Compound path를 선택한 뒤, Pathfinder의 intersect 를 선택

일러스트 - Isometric shapes (feat. action)

kakaroo — Fri, 2 Sep 2022 21:43:40 +0900

아래 사이트에서 action을 download

https://drive.google.com/file/d/1nR0Q9f2mhFT4yWCbmg_QE8dKHjaLNqQ7/view

사각형 그리고 각 action 을 실행한다.

아래와 같이 크기 조절시 잘 맞지 않는다.

마우스 우클릭 > Transform > Reset Bounding Path

건물 외형 완성

창문 그리기

네모 > 위 코너 라인 조절 > 카피해서 대각선으로 겹치게 > 패스파인더 디바이드

불필요부분 자르고 좌측하단 모퉁이 라인으로 다시 영역 나눠준디 패스파인더 디바이드

완성

창문 추가

간판

로고 넣고, 간판 봉은 원을 action에서 left 처리하고 fill 채워서 넣기

우측도 반복

계단 만들기

네모 2개

pathfinder > unite , 계단 형태로 복사해서 배치

Reflect > action right

완성

출처:

https://www.youtube.com/watch?v=RRzuMyJQnBs&t=41s

일러스트 - Isometric Grid (feat. pattern using Polygon)

kakaroo — Mon, 29 Aug 2022 22:53:56 +0900

1. Polygon 60 px (한 변의 길이가 60 px 이다)

2. Transform 30도로 돌리면 높이가 120 px이 된다.

2.1 25%(1/4) 크기로 축소한다. 이 값을 명심할 것.

3. 6각형을 대각선으로 나눈다. 크게 확대해서 꼭지점에 잘 snap 되었는지 확인한다.

4. 전체선택한 뒤, 그룹 -> Alt 키로 복사

5. Object > Pattern > Make

Pattern 크기 등을 조정할 수 있다. 일단 Done

6. 패턴 위치 조정 > Width 를 패턴 Width에 입력

높이는 변이 3개이므로 45 px

7. 패턴을 Fill로 채우고 사각형을 생성하면 아래와 같이 패턴이 들어간다.

8. Swatch 는 라이브러리로 저장하고 불러서 사용할 수 있다.

Node.js - 수업 5일차

kakaroo — Fri, 26 Aug 2022 08:46:33 +0900

MySql DB 추가

Database 생성

Table 생성

id는 자동적으로 생성됨

# npm init

# npm install mysql

//main.js
const mysql = require("mysql");

const connection = mysql.createConnection({
	host: "3.35.151.156",
	port: "58975",
	user: "root",
	password: "root",
	database: "nodejs"
});
connection.connect();	//데이터베이스 접속

const name = "monica";
const age = 19;

//CRUD 1. Create: 데이터베이스를 생성하여 데이터베이스에 저장하는 작업
//INSERT INTO [테이블명] (컬럼명1, 컬럼명2, ...) VALUES (값1, 값2, ...)

//대소문자 구분 없다.
const query1 = "SELECT * FROM users";
const query2 = "INSERT INTO users (name, age) VALUES ('Daniel', 30)";
const query3 = "INSERT INTO users (name, age) VALUES ('${name}', ${age})";
const query4 = "INSERT INTO users (name, age) VALUES (?, ?)";

//connection.query(query2, (err, result) => {
connection.query(query4, [name, age], (err, result) => {
	if(err) {
		console.log(err);
		return;
	}
	//query1
	/*result.forEach(item => {
		console.log(item.name, item.age);
	});*/
	
	connection.end();
});	//비동기

const argv = process.argv;
const name = argv[2];
const age = argv[3];

const query4 = "INSERT INTO users (name, age) VALUES (?, ?)";

connection.query(query4, [name, age], (err, result) => {
	if(err) {
		console.log(err);
		return;
	}
	
	connection.end();
});	//비동기

<index.ejs>

<!-- index.ejs -->
<!-- DOCTYPE html -->
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<a href="/"><h1>Memo App</h1></a>
		<a href="/insert">add memo</a>
		<hr>
		
		<table border="1px">
			<thead>
				<tr><th>      </th><th>      </th><th>name</th><th>memo</th></tr>
			</thead>
			<tbody>
				<!-- 동적으로 테이블을 생성 -->
				<% for(const item of itemList) { %>
				<tr>
					<td><a href="/delete?id=<%= item.id %>">DELETE</a></td>
					<td><a href="/edit?id=<%= item.id %>">EDIT</a></td>
					<td><%= item.name %></td>
					<td><%= item.memo %></td>
				</tr>
				<% } %>
			</tbody>
		</table>
	</body>
</html>

<add.html>

<!-- add.html -->
<!-- DOCTYPE html -->
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<a href="/"><h1>Add Memo</h1></a>
		<form action=/add.do method="GET">
			name: <input type="text" name="name"><br>
			memo: <input type="text" name="memo"><br>
			<button>OK</button></form>
		</form>
	</body>
</html>

<edit.ejs>

<!-- edit.html -->
<!-- DOCTYPE html -->
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<a href="/"><h1>Edit Memo</h1></a>
		<form action=/edit.do method="GET">
			name: <input type="text" name="name" value="<%= name %>"><br>
			memo: <input type="text" name="memo" value="<%= memo %>"><br>
			<button>OK</button></form>
		</form>
	</body>
</html>

//5일차 exam2/main.js

//Memo(타이틀/컨텐츠) 추가하는 예제

const http = require("http");
const fs = require("fs");
const ejs = require("ejs");
const mysql = require("mysql");

const tableName = "memos";
let editId;

const connection = mysql.createConnection({
	host: "3.35.151.156",
	port: "58975",
	user: "root",
	password: "root",
	database: "nodejs"
});
connection.connect();	//데이터베이스 접속

const CREATE_QUERY = "INSERT INTO " + tableName +" (name, memo) VALUES (?, ?)";
const READALL_QUERY = "SELECT * FROM " + tableName;
const READITEM_QUERY = "SELECT * FROM " + tableName + ` WHERE id=?`;
const UPDATE_QUERY = "UPDATE " + tableName + ` SET name=? , memo=? WHERE id=?`;
const DELETEITEM_QUERY = "DELETE FROM " + tableName + ` WHERE id=?`;

http.createServer((req, res) => {
	
	//req.url은 경로부터 시작되는 URL이다.
	//전체 URL을 가져오려면 아래와 같이 hostname + port 를 같이 넣어줘야 한다.
	const url = new URL(req.url, "http://localhost:8080");
	console.log("pathname:", url.pathname, ", search:", url.search);
	
	if(url.pathname ==='/') {
		//파일의 목록을 읽어옵니다.
		connection.query(READALL_QUERY, (err, result) => {
			fs.readFile("./index.ejs", "utf-8", (err, dataEjs) => {
				res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
				res.end(ejs.render(dataEjs, {itemList:result}));
			});		
			//connection.end();
		});
	}
	else if(url.pathname === "/insert") {
		fs.readFile(__dirname +"/add.html", "utf-8", (err, data) => {
			res.writeHeader(200, {"content-type": "text/html; charset=utf-8"});
			res.end(data);
		})	
	}
	else if(url.pathname ==="/add.do") {
		const name = url.searchParams.get("name");
		const memo = url.searchParams.get("memo");
				
		connection.query(CREATE_QUERY, [name, memo], (err, result) => {
			if(err) {
				console.log(err);
				return;
			}
			//connection.end();
		});
		
		//현재 사이트의 특정페이지로 리다이렉션 하는 방법
		res.writeHead(302, {"Location": "/"});
		res.end();
	}
	else if(url.pathname ==="/edit") {
		editId = url.searchParams.get("id");
		console.log("id:",editId);
		connection.query(READITEM_QUERY, [editId], (err, result) => {
			result.forEach(item => {
				console.log(item.name, item.memo);
				fs.readFile("./edit.ejs", "utf-8", (err, dataEjs) => {
					res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
					res.end(ejs.render(dataEjs, {name:item.name, memo:item.memo}));
				});	
				//connection.end();
			})			
		});		
	}
	else if(url.pathname ==="/edit.do") {
		const name = url.searchParams.get("name");
		const memo = url.searchParams.get("memo");
		
		console.log("edit:", name, memo, editId);
				
		connection.query(UPDATE_QUERY, [name, memo, editId], (err, result) => {
			if(err) {
				console.log(err);
				return;
			}
			//connection.end();
		});
		
		//현재 사이트의 특정페이지로 리다이렉션 하는 방법
		res.writeHead(302, {"Location": "/"});
		res.end();
	}
	else if(url.pathname ==="/delete") {
		const id = url.searchParams.get("id");
		connection.query(DELETEITEM_QUERY, [id], (err, result) => {
			});	
			//connection.end();
		//현재 사이트의 특정페이지로 리다이렉션 하는 방법
		res.writeHead(302, {"Location": "/"});
		res.end();
	}	
	
}).listen(8080);

console.log("server running...");

Express

웹 및 모바일 애플리케이션을 위한 일련의 강력한 기능을 제공하는 간결하고 유연한 Node.js 웹 애플리케이션 프레임워크

기존 서버 구동 프로그램보다 훨씬 간단하다.

//5일차//2_express/main.js

const express = require("express");

const app = express();	//서버 생성
const port = 8080;

app.get("/",(req,res) => {
	res.send("get");
});
app.post("/", (req,res) => {
	res.send("post");
})
app.put("/", (req,res) => {
	res.send("put");
})
app.delete("/", (req,res)=> {
	res.send("delete");
} )
app.listen(8080, () => {
	console.log("server running..");
});

Node.js - 수업 4일차

kakaroo — Thu, 25 Aug 2022 11:56:37 +0900

POST 방식

//9_method.js

const http = require("http");
const fs = require("fs");
const url = require("url");
const qs = require("querystring");

http.createServer((req, res) => {
	//console.log(req);
	console.log(req.url);
	
	//req.url은 경로부터 시작되는 URL이다.
	//전체 URL을 가져오려면 아래와 같이 hostname + port 를 같이 넣어줘야 한다.
	const myUrl = new URL(req.url, "http://localhost:8080");
	
	if(req.url ==='/') {
		fs.readFile(__dirname + "/input.html", (err,data) => {
			res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			res.end(data);
		})
	}	
	else if(myUrl.pathname === "/input.do") {
		//메소드 정보는 요청 객체의 메소드 속성에 문자열 형태로 저장되어 있다.
		if(req.method === "GET") {
			const params = myUrl.searchParams;
			//console.log(params);	//URLSearchParams { 'name' => 'kakaroo', 'age' => '20' }
			console.log("GET: ",params.get("uname"), params.get("uage"));	//kakaroo 20			
		}
		else if(req.method === "POST") {
			/*req.on("data", //요청 메시지 바디에 수신된 데이터가 존재할 경우
				   (chunk) => {
					//chunk 안에는 uname=kakakroo&uage=20 바이너리 정보가 들어있다
					const p = new URLSearchParams(chunk.toString());
					console.log(p.get("uname"), p.get("uage")) //kakaroo 20
				
					//큰 data가 들어오는 경우 문제가 된다.
			});*/
			const buf = [];
			req.on("data", //요청 메시지 바디에 수신된 데이터가 존재할 경우
			   (chunk) => {
				buf.push(chunk);
			});
			req.on("end", () => {
				const data = Buffer.concat(buf).toString();
				const p = new URLSearchParams(data);
				console.log(p.get("uname"), p.get("uage"));
			});
		}
		res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
		res.end();
	}
	
}).listen(8080);

동적인 웹페이지 예제

메모 동작 시나리오

//4일차 - main.js
//Memo(타이틀/컨텐츠) 추가하는 예제
//추가된 메모는 타이틀.txt 로 저장되고
//저장된 파일은 목록으로 보임
//목록을 누르면 View/Edit

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

//파일목록을 HTML 코드로 변환하는 함수
const templateList = fileList => {
	let html = "<ul>";	//ul: unordered list
	for (const fname of fileList) {
		html += `<li><a href="/display?id=${fname}">${fname}</a></li>`;	//li: list item
	}
	html += "</ul>";
	return html;
}

//인덱스 페이지 생성함수
const templateHTML = (fileList, body) => {
	return `
	<!DOCTYPE html>
	<html>
		<head><meta charset="utf-8"></head>
		<body>
			<h1>Memo App</h1>
			<a href="/add"> add </a>
			${fileList}
			${body}
		</body>		
	</html>`;
};

http.createServer((req, res) => {
	
	//req.url은 경로부터 시작되는 URL이다.
	//전체 URL을 가져오려면 아래와 같이 hostname + port 를 같이 넣어줘야 한다.
	const url = new URL(req.url, "http://localhost:8080");
	console.log("pathname:", url.pathname, ", search:", url.search);
	
	if(url.pathname ==='/') {
		//파일의 목록을 읽어옵니다.
		fs.readdir(__dirname + "/data", (err, data) => {
			//HTML화면을 동적으로 생성하는 코드
			const listHtml = templateList(data);
			const html = templateHTML(listHtml, "");
			
			res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			res.end(html);
		});		
	}
	else if(url.pathname ==="/display") {
		// /display?id=hello.txt
		const file =  url.searchParams.get("id");
		const filePath = __dirname + "/data/" + file;
		console.log(filePath);
		
		fs.readFile(filePath, "utf-8", (err,data) => {
			const html = templateHTML("", `<h3>title: ${file}</h3>content: ${data}`);
			res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			res.end(html);
		});		
	}	
	else if(url.pathname === "/add") {
		const form = `<form action="/add.do" method="GET">
				title: <input type="text" name="title"><br>
				memo: <input type="text" name="content"><br>
				<button>OK></button></form>`;	
		
		const html = templateHTML("", form);
		res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
		res.end(html);
	}
	else if(url.pathname ==="/add.do") {
		const title = url.searchParams.get("title");
		const content = url.searchParams.get("content");
		
		fs.writeFile(__dirname + "/data/" + title, content, err => {
			if(err) throw err;
			console.log("writeFile ok!");
			//res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			//res.end("OK");
		})
		
		//현재 사이트의 특정페이지로 리다이렉션 하는 방법
		res.writeHead(302, {"Location": "/"});
		res.end();
	}		
	
}).listen(8080);

console.log("server running...");

NPM

Node PAckage Manager의 약자로 Node.js에서 사용할 수 있는 모듈을 패키지화하여 이를 모아둔 저장소 역할과 패키지 설치 및 관리를 위한 명령어

사용방법:

1. 패키지 설치: npm install [-g] < 패키지명> //-g 옵션 : 전역으로 설치

ex) cd emoji_test

npm install node-emoji

디렉토리 내에 node_modules 라는 디렉토리가 자동으로 생성되고 이 안에 패키지가 설치된다.

지역으로 설치된 패키지는 해당 프로젝트 내에서만 사용가능하다.

사용 예)

하나의 모듈에 다수의 패키지를 사용하다 보면 문제점이 있다.
외부 모듈도 업데이트가 자주 일어남 버전관리가 제대로 안 되어 해당 패키지가 제대로 동작안 되는 경우가 있음
모듈간에 디펜던시가 높음
=> package.json 를 보면 알 수 있다.

<프로젝트 초기화>

npm init

-> 모듈을 배포하기 전에 초기화가 필요하다.

npm install node-emoji 를 하고 나면 아래와 같이 dependency 가 추가되었다.

배포되는 모듈에 어떤 모듈이 dependency 가 있는지 알 수 있다.

package.json 부분에 아래 추가

//project_init/main.js

const emoji = require("node-emoji").emoji
console.log(emoji.heart);

npm 실행

#npm run 스크립트 명

위에서 동적인 html 코드를 직접 작성해서 해 보았다. EJS 라는 모듈이 그 역할을 하는데, 그 모듈을 설치해서 이용해 보겠다.

EJS(Embedded JavaScript templates) : 자바스크립트를 사용하여 동적으로 HTML 코드를 생성할 수 있는 간단한 템플릿 언어 -> 자바의 JSP 개념

https://ejs.co

EJS -- Embedded JavaScript templates

Simple syntax JavaScript code in simple, straightforward scriptlet tags. Just write JavaScript that emits the HTML you want, and get the job done!

ejs.co

모듈 설치

# mkdir 2_dynamic_project

# cd 2_dynamic_project

# npm init

# npm install ejs

# EJS 문법(EJS 파일에서 작성해야 한다. ex) index.ejs

1. 변수 치환: <%= 변수명 %> -> 자바스크립트 내에 존재하는 값을 출력할 때 쓰임

2. 조건에 따른 분기

<% if (조건식1) { %>

조건식1이 참일때 사용할 HTML 코드 <% } %>

<% elif (조건식2) { %>

조건식2가 참일때 사용할 HTML 코드

...

<% } else { %>

<% } %>

<!-- index.ejs -->
<!DOCTYPE html>
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<h1> 구구단 2단</h1>
		<% for(let num =1; num < 10; num++) { %>
			2 X <%= num %> = <%= 2*num %><br>
		<% } %>
	</body>
</html>

//2_dynamic_page/main.js
const http = require("http");
const fs = require("fs");
const ejs = require("ejs");

http.createServer((req, res) => {
	fs.readFile("./index.ejs", "utf-8", (err,data) => {
		res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
		res.end(ejs.render(data));
	})
}).listen(8080);
console.log("server running...");

EJS 처리 방법 2

//value_test.js
const ejs = require("ejs");

const fruits = ["apple", "banana", "cherry", "durian"];

const ejsFile = `<h1><%= fruitList.join(", "); %></h1>`

//{fruitList: fruits} => key는 ejs에서 꺼내어 value로 치환
const html = ejs.render(ejsFile, {fruitList: fruits});	

console.log(html);

매개변수(query) 부분을 값으로 받아서 처리하는 예제로 응용할 수 있다.

https://kakaroo.swedu-run.lge.com/?dan=8

//2_dynamic_page/main.js
const http = require("http");
const fs = require("fs");
const ejs = require("ejs");

http.createServer((req, res) => {
	const url = new URL(req.url, "http://localhost:8080");
	console.log("pathname:", url.pathname, ", search:", url.search);
	const value = url.searchParams.get("dan");		

	//case 1
	/*fs.readFile("./index.ejs", "utf-8", (err,data) => {
		res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
		res.end(ejs.render(data, {dan:value}));
	})*/	
			
	//case 2
	const ejsFile = `<head> <meta charset="utf-8"> </head>
	<body>
	<h1> 구구단 <%= dan %>단</h1>
		<% for(let num =1; num < 10; num++) { %>
			<%= dan %> X <%= num %> = <%= dan*num %><br>
		<% } %>		
	</body>`;
	res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
		res.end(ejs.render(ejsFile, {dan:value}));
	
}).listen(8080);
console.log("server running...");

위 동적 메모 프로그램을 EJS 형태로 변경하는 예

<index.ejs>

<!-- index.ejs -->
<!DOCTYPE html>
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<h1> Memo App</h1>
		<a href="/add"> add</a>
		<ul>
			<% for (const fname of fileList) { %>
				<li><a href="/display?id=<%= fname %>"> <%= fname %> </a></li>
			<% } %>			
		</ul>
		
		<% if( body != "" ) { %>
			<h3>title: <%= mytitle %> </h3> content: <%= mydata %>
		<% } %>
		
		<% if( add === "add" ) { %>
			<form action="/add.do" method="GET">
				title: <input type="text" name="title"><br>
				memo: <input type="text" name="content"><br>
				<button>OK></button></form>		
		<% } %>
		
	</body>
</html>

//4일차 - main.js
//Memo(타이틀/컨텐츠) 추가하는 예제
//추가된 메모는 타이틀.txt 로 저장되고
//저장된 파일은 목록으로 보임
//목록을 누르면 View/Edit

const http = require("http");
const fs = require("fs");
const ejs = require("ejs");

http.createServer((req, res) => {
	
	//req.url은 경로부터 시작되는 URL이다.
	//전체 URL을 가져오려면 아래와 같이 hostname + port 를 같이 넣어줘야 한다.
	const url = new URL(req.url, "http://localhost:8080");
	console.log("pathname:", url.pathname, ", search:", url.search);
	
	if(url.pathname ==='/') {
		//파일의 목록을 읽어옵니다.
		fs.readdir(__dirname + "/data", (err, files) => {
			//HTML화면을 동적으로 생성하는 코드
			//const listHtml = templateList(data);
			//const html = templateHTML(listHtml, "");			
			//res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			//res.end(html);
			fs.readFile("./index.ejs", "utf-8", (err, dataEjs) => {
				res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
				res.end(ejs.render(dataEjs, {fileList:files, body:"", add:"", mytitle:"", mydata:""}));
			});
		});		
	}
	else if(url.pathname ==="/display") {
		// /display?id=hello.txt
		const file =  url.searchParams.get("id");
		const filePath = __dirname + "/data/" + file;
		console.log(filePath);
		
		fs.readFile(filePath, "utf-8", (err, data) => {
			//const html = templateHTML("", `<h3>title: ${file}</h3>content: ${data}`);
			//res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			//res.end(html);
			console.log("content:", data);
			fs.readFile("./index.ejs", "utf-8", (err, dataEjs) => {
				res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
				res.end(ejs.render(dataEjs, {fileList:"", body:"body", add:"", mytitle:file, mydata:data}));
			});			
		});		
	}	
	else if(url.pathname === "/add") {
		/*const form = `<form action="/add.do" method="GET">
				title: <input type="text" name="title"><br>
				memo: <input type="text" name="content"><br>
				<button>OK></button></form>`;	
		
		const html = templateHTML("", form);
		res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
		res.end(html);*/
		fs.readFile("./index.ejs", "utf-8", (err, dataEjs) => {
			res.writeHeader(200, {"content-type": "text/html, charset=utf-8"});
			res.end(ejs.render(dataEjs, {fileList:"", body:"", add:"add"}));
		});	
	}
	else if(url.pathname ==="/add.do") {
		const title = url.searchParams.get("title");
		const content = url.searchParams.get("content");
		
		fs.writeFile(__dirname + "/data/" + title, content, err => {
			if(err) throw err;
			console.log("writeFile ok!");
			//res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			//res.end("OK");
		})
		
		//현재 사이트의 특정페이지로 리다이렉션 하는 방법
		res.writeHead(302, {"Location": "/"});
		res.end();
	}		
	
}).listen(8080);

console.log("server running...");

-- View 를 여러개로

<!-- index.ejs -->
<!-- DOCTYPE html -->
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<a href="/"><h1>Memo App</h1></a>
		<a href="/add">Add</a>
		<ul>
			<!-- 메모 목록을 동적으로 생성 -->
			<% for(const fname of fileList) { %>
				<li><a href="/display?id=<%= fname %>"><%= fname %></a></li>				
			<% } %>
		</ul>
	</body>
</html>

<!-- display.ejs -->
<!-- DOCTYPE html -->
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<a href="/"><h1>Memo App</h1></a>
		<p> title: <%= fname %> </p>
		<p> content: <%= content %> </p>
	</body>
</html>

<!-- add.html -->
<!-- DOCTYPE html -->
<html>
	<head> <meta charset="utf-8"> </head>
	<body>
		<a href="/"><h1>Memo App</h1></a>
		<form action=/add.do method="GET">
			title: <input type="text" name="title"><br>
			memo: <input type="text" name="content"><br>
			<button>OK</button></form>
		</form>
	</body>
</html>

//main.js
const http = require("http");
const fs = require("fs");
const ejs = require("ejs");
const path = require("path");

http.createServer((req,res) => {
	const url = new URL(req.url, "http://localhost:8080");
	console.log("path:", url.pathname, ", search:", url.search);
	
	if(url.pathname === "/") {
		const myFileList = fs.readdirSync(__dirname + "/data");
		
		//EJS 파일 처리
		fs.readFile(__dirname + "/index.ejs", "utf-8", (err, ejsData) => {
			res.writeHeader(200, {"content-type": "text/html; charset=utf-8"});
			res.end(ejs.render(ejsData, {fileList:myFileList}));
		})
	}
	else if(url.pathname === "/display") {
		//display?id==kakaroo
		const fname = url.searchParams.get("id");
		const filePath = path.join(__dirname + "/data/" + fname);
		fs.readFile(filePath, "utf-8", (err, content) => {
			fs.readFile(__dirname + "/display.ejs", "utf-8", (err, ejsData) => {
				res.writeHeader(200, {"content-type": "text/html; charset=utf-8"});
				res.end(ejs.render(ejsData, {fname:fname, content:content}));
			})
		})
	}
	else if(url.pathname === "/add") {
		fs.readFile(__dirname +"/add.html", "utf-8", (err, data) => {
			res.writeHeader(200, {"content-type": "text/html; charset=utf-8"});
			res.end(data);
		})
	}
	else if(url.pathname === "/add.do") {
		const fname = url.searchParams.get("title");
		const content = url.searchParams.get("content");
		fs.writeFile(__dirname + "/data/" + fname, content, (err) => {
			console.log("file write");
			res.writeHeader(302, {"Location": "/"});
			res.end();
		})
	}
}).listen(8080);
console.log("Server running..");

MySQL 환경 설정

1. mysqld.cnf 파일 설정

/etc/mysql/mysql.conf.d/mysqld.cnf

2. 서비스 실행

# service mysql start

우측 상단의 mysql 실행

mysql -u root -p

GRANT ALL ON *.* TO root@'%' IDENTIFIED BY 'root';

FLUSH PRIVILEGES;

Node.js - 수업 3일차

kakaroo — Wed, 24 Aug 2022 08:24:18 +0900

파이프

어떤 명령어의 결과 또는 출력을 다른 명령어의 입력으로 전송하는 개념

예를 들어 현재 디렉토리의 파일 갯수를 확인하려면..

1. 현재 디렉토리의 목록을 파일로 저장 ls > ls.txt

2. wc 명령어를 사용하여 ls.txt 파일의 단어를 카운팅 -> 파일의 갯수를 확인

3. ls.txt 삭제

//2_pipe.js
const fs = require("fs");
//파이핑(piping)- 스트림들을 연결하는 개념

//파이핑을 사용하여 복사를 수행하는 코드를 만들어 보자

//1. 복사를 위한 실습 파일을 생성, 이름은 hello.txt
//2. 파일 읽기를 위한 스트림을 생성
const rs = fs.createReadStream("./hello.txt");

//3. 파일 쓰기를 위한 스트림을 생성
const ws = fs.createWriteStream("./hello2.txt");

//4. 읽기 스트림을 쓰기 스트림에 연결
rs.pipe(ws);

//3_copy.js
const fs = require("fs");

//Node.js 8부터 파일 복사를 하기 위한 새로운 함수가 추가됨
fs.copyFile("hello.txt", "hello3.txt", (err) => {
	if(err) throw err;
	console.log("done!");
})

//4_dir.js
const fs = require("fs");

//1. 디렉토리 생성하기
const dirname = "./test";
if(!fs.existsSync(dirname)) {
	fs.mkdirSync(dirname);
}

//2. 디렉토리 내용 읽기
// ->해당 디렉토리의 존재 여부
const fnames = fs.readdirSync("."); //결과는 배열에 저장되어 반환
//console.log(fnames);
fnames.forEach((fname) => {
	console.log(fname);
})

//3. 디렉토리 삭제
//동기식 함수의 경우, 오류가 발생하면 예외를 발생시킨다
//이를 처리하려면 try ~ catch 를 사용하면 된다
try {
	fs.rmdirSync("./test");	// , {recursive: true});
	//								^-- 디렉토리가 비어있지 않은 경우 
    //									재귀옵션을 사용해야
}
catch(err) {
	console.log(err);
}

//4. 파일이름 변경
try {
	fs.renameSync("./hello.txt", "./hello1.txt");	
}
catch(err) {
	console.log(err);
}

//calc.js

const PI = 3.141592;
const square = X => X ** 2;

//모듈안의 요소들을 외부로 공개하려면 전역 객체의 exports 속성을 사용
module.exports = {
	PI,
	square
}

//5_module.js

//실습을 하기 위해 커스텀 모듈을 작성한다
//이 때, 커스텀 모듈의 이름은 'calc.js'로 한다.

const calc = require("./calc");	//확장자 생략 가능
console.log(calc.PI);

//ES2015+ 아래처럼 사용 가능
const { PI, square } = require("./calc");
console.log(PI);

HTTP 모듈

1. http: hyper text transfer protocol 의 약자로 하이퍼 텍스트를 전송하기 위한 프로토콜

2. 하이퍼 텍스트 : 하이퍼 링크(hyper link)라는 개념을 사용하여 논리적으로 연결된 문서

ex) HTML 문서

통신방법

HTTP 요청(request)과 응답(response)으로 통신

웹 브라우저 -> 주소 입력 -> 요청 -------> 웹서버 -> 응답 ----------> 웹 브라우저

포트

HTTP 서버 생성

//6_http.js
const http = require("http");

//1- Event Listener 방식

//hello world 서버를 구현
const server = http.createServer();

server.on("request",	//클라이언트로부터 요청이 왔을 때, 발생되는 이벤트
		 (req, res) => {
	//req: 클라이언트로부터 전송된 요청 메시지에 대한 객체
	//res: 클라이언트에게 전송할 응답 메시지 객체
	
	//응답코드 설정 : 가장 중요
	res.statusCode = 200;	//정상적으로 처리되었음을 의미하는 상태 코드
	
	//응답메시지 설정 : 굳이 안 써도 된다. 응답코드에 대한 부연설명이다.
	res.statusMessage = "OK";
	
	//전송할 데이터의 타입을 설정한다.
	res.setHeader("content-type", "text/plain; charset=utf-8");	//charset은 옵션, 쓰는게 좋다
	
	//데이터를 전송한다. 이 때, 전송전에 위의 응답헤더 보다 먼저 작성하면 오류(internal server error)가 발생한다.
	res.write("hello, world");
	
	//서버는 반드시 클라이언트에게 전송이 완료되었다는 것을 알려주어야 한다.
	//그렇지 않으면 클라이언트(브라우저)는 대기를 하게 되고, 결국 타임아웃이 발생한다.
	//res.end();	
	res.end("hello, world");	//데이터 전송 후 완료 <-- res.write 없이 짧은 데이터는 렇게도 가능
});

server.on("error",	//서버 내부에서 오류가 발생되었을 때 발생되는 이벤트
		  (err) => {
	console.log(err);
});

//서버를 실행
server.listen(8080);	//포트 번호
console.log("server running...");

서버 실행 (로컬 컴퓨터는 127.0.0.1:8080)

//6_http_callback.js
const http = require("http");
const fs = require("fs");
//1- Callback 방식

//hello world 서버를 구현
const server = http.createServer((req, res) => {
	/*
	res.statusCode = 200;
	res.statusMessage = "OK";
	res.setHeader("content-type", "text/plain; charset=utf-8");
	*/
	//상태코드와 컨텐트 타입을 한번에 설정 가능
	//res.writeHead(200, {"content-type": "text/plain; charset=utf-8"});
	//res.write("hello, world");
	
	//HTML코드를 전송하려면 컨텐트 타입을 html로 설정
	res.writeHead(200, {"content-type": "text/html; charset=utf-8"});
	//res.write("<h1>hello, world</h1>");
	res.end();
});

//서버를 실행
server.listen(8080);	//포트 번호
console.log("server running...");

//위 구조에서 문제점은 무엇인가?
//하나의 코드에 View와 Controller가 같이 있다.
//HTML : View(화면에 표현)
//JS : Controller(요청에 대한 응답처리)

MVC 관점에서 View와 Controller를 분리해야 한다.

<!-- index.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">		
	</head>
	<body>
		<h1>
			Hello, This is index.html
		</h1>
	</body>
</html>

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

http.createServer((req,res) => {
	res.writeHead(200, {"Content-type": "text/html; charset=utf-8"});
	res.write(fs.readFileSync("./index.html"));
	res.end();
}).listen(8080);

console.log("server running");

색인 index.html

웹 페이지 : 웹 서버안에 미리 작성되어 있는 문서 ex) HTML 문서(파일)

웹 사이트 : 웹 페이지들이 한 곳에 모여 있는 장소

인덱스 페이지 : 웹 사이트에 매번 처음으로 접속할 때마다 서버내의 파일을 보여주는 페이지

주소창에 www.naver.com -> www.naver.com/index.html

:: 웹 사이트 방문자 처음으로 보게 되는 웹 페이지

path 에 따라 다르게 페이지를 로딩하는 예

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

http.createServer((req,res) => {
	res.writeHead(200, {"Content-type": "text/html; charset=utf-8"});
	console.log("url: ", req.url);
	if(req.url === "/")
		res.write(fs.readFileSync("./index.html"));
	else if(req.url === "/about")
		res.write(fs.readFileSync("./about.html"));
	else if(req.url === "/contact")
		res.write(fs.readFileSync("./contact.html"));
	else {
		res.write(fs.readFileSync("./error.html"));
	}
		
	res.end();
}).listen(8080);

console.log("server running");

위 코드의 문제..

새로운 페이지를 추가해야 하는 요구사항이 들어올 때마다 기존 코드를 계속 수정해야 한다. 즉, 유지보수가 어렵다.

const responseMap = {
	"/" : __dirname + "/index.html",
	"/about" : __dirname + "/about.html",
	"/contact" : __dirname + "/contact.html",
	"/error" : __dirname + "/error.html"
};

http.createServer((req,res) => {
	const url = req.url;
	console.log("url: ", url);
	if(responseMap[url]) {
		res.writeHead(200, {"Content-type": "text/html; charset=utf-8"});
		res.end(fs.readFileSync(responseMap[url]));
	} else {
		res.writeHeader(404, {"content-type": "text/html; charset=utf-8"});
		res.end(fs.readFileSync("./error.html"));
	}	
}).listen(8080);

Map 수정도 해야 하는 문제가 여전히 남아 있다.

//step3
const getViewPath = url => {
	if(url === '/') {
		url = "index";
	}
	return __dirname + `/${url}.html`;
}

http.createServer((req,res) => {
	const url = req.url;
	console.log("url: ", url);
	const viewPath = getViewPath(url);
	fs.readFile(viewPath, (err,data) => {
		if(err) {			
			res.writeHeader(404, {"content-type": "text/html; charset=utf-8"});
			res.end(fs.readFileSync("./error.html"));
		}
		res.writeHead(200, {"Content-type": "text/html; charset=utf-8"});
		res.end(data);
	});
}).listen(8080);
console.log("server running");

Input 방식

<!-- input.html -->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">		
	</head>
	<body>
		<h1>
			GET METHOD
		</h1>
		<!--<form action="/process_data">
			<p> <input type=text name="title"> </p>
			<p> <textarea name="content"></textarea> </p>
			<p> <input type="summit"></p>
			<p> <button> 제출 </button> </p>
		</form>
		-->
		<form action="/process_data" method="GET">
			이름:<input type="text" name="uname"><br>
			나이:<input type="number" name="uage"><br>
			<button> 입력 </button>
		</form>
		
	</body>
</html>

파이썬 서버 실행

#python3 -m http.server

파이썬은 포트가 8000번으로 실행

위 input.html 실행 > 이름/나이 입력 -> 입력 버튼

아래처럼 GET 방식으로 처리가 됨

[24/Aug/2022 06:44:22] "GET /process_data?uname=23&uage=234 HTTP/1.1" 404

GET Method 의 param(query) 가져오는 예

//9_method.js

const http = require("http");
const fs = require("fs");
const url = require("url");
const qs = require("querystring");

http.createServer((req, res) => {
	//console.log(req);
	console.log(req.url);
	
	//req.url은 경로부터 시작되는 URL이다.
	//전체 URL을 가져오려면 아래와 같이 hostname + port 를 같이 넣어줘야 한다.
	const myUrl = new URL(req.url, "http://localhost:8080");
	
	if(req.url ==='/') {
		fs.readFile(__dirname + "/input.html", (err,data) => {
			res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
			res.end(data);
		})
	}
//case 1		
	/*else if(url.parse(req.url).pathname === "/input.do") {
		//URL의 쿼리를 파싱하여 이름과 나이를 출력하는 코드를 구현해보세요.
		const parsed = url.parse(req.url);		
		const query = qs.parse(parsed.query);		
		console.log(query.uname, query.uage);
		
		res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
		res.end(`${query.uname}, ${query.uage}`);
	}*/
//case 2	
	else if(myUrl.pathname === "/input.do") {
		const params = myUrl.searchParams;
		//console.log(params);	//URLSearchParams { 'name' => 'kakaroo', 'age' => '20' }
		console.log(params.get("uname"), params.get("uage"));	//kakaroo 20
		
		res.writeHead(200, {"content-type": "text/html, charset=utf-8"});
		res.end(`${params.get("uname")}, ${params.get("uage")}`);

	}
	
}).listen(8000);

Node.js - 수업 2일차

kakaroo — Tue, 23 Aug 2022 11:50:42 +0900

자바스크립트는 태생적으로 웹 브라우저 위에서만 실행할 수 있었다. 웹 브라우저는 자바스크립트 런타임을 내장하고 있으므로 자바스크립트 코드를 실행할 수 있다. 브라우저 외의 환경에서 자바스크립트를 실행하기 위한 여러 시도가 있었으나 자바스크립트의 실행속도 문제 때문에 큰 반향을 얻지는 못했다.

2008년 구글이 자바스크립트 실행을 위한 vs 엔진을 크롬이 출시하면서 속도 문제가 해결이 되었다.

라이언 달(Ryan Dahl)이라는 사람이 2009년 vs 엔진 기반의 노드 프로젝트를 시작했고, 이것이 바로 Node.js 이다.

:: Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임

Node.js는 확장성 있는 네트워크 애플리케이션(특히 서버 사이드) 개발에 사용되는 소프트웨어 플랫폼이다. 작성 언어로 자바스크립트를 활용하며 논블로킹(Non-blocking)[3] I/O와 단일 스레드 이벤트 루프를 통한 높은 처리 성능을 가지고 있다.

내장 HTTP 서버 라이브러리를 포함하고 있어 웹 서버에서 아파치 등의 별도의 소프트웨어 없이 동작하는 것이 가능하며 이를 통해 웹 서버의 동작에 있어 더 많은 통제를 가능케 한다.

<Node.js의 특징>

1. 자바 스크립트 언어 사용

2. 싱글 쓰레드

3. 이벤트 기반

4. 비동기 I/O

-> 비동기 I/O와 싱글 쓰레드 기반의 이벤트 처리를 사용하여 높은 성능을 제공한다.

동기 : 결과값 반환을 무한정 기다린다.

비동기 : 결과값을 마냥 기다리지 않고 완료되면 호출되는 콜백으로 대체한다.

Node.js 에서 자바스크립트 실행방법

1. node 실행 -> REPL 모드로 변경되어 바로 입력하면 됨

2. node 파일명.js 실행 (확장자 생략 가능)

//0_hello.js

console.log("Hello world");

REPL
Read : 사용자가 입력한 코드를 읽음
Evaluate : 읽은 코드를 실행(평가)
Print : 실행(평가)된 결과를 출력
Loop : 위의 순서를 반복

브라우저에서 콘솔창(F12)이나 Node 실행시 리플이 실행됨

주요 단축기
REPL 종료 : Ctrl + C 2번 또는 Ctrl + D
TAB : 일부 입력된 값으로 시작하는 명령어 또는 변수 목록을 확인
.save 파일명 : 현재 REPL 세션을 파일로 저장
.load 파일명 : 파일로 저장된 REPL 세션을 불러옴

//1_sync.js

//어떤 일을 수행하고 있다는 것을 확인하기 위해 1초마다 점을 출력하는 함수
const doSomething = () => {
	const process = require("process");
	setInterval(() => {
		process.stdout.write(".");
	}, 1000);
}

//doSomething();

//다운로드를 동기적으로 수행하는 함수
const downloadSync = (url) => {
	console.log("download start");
	let endTime = new Date(new Date().getTime() + 5000);
	while (endTime >= new Date()) {}
	console.log("download complete!");
}
//downloadSync("xyz.com/hello.mp3");
//doSomething();	//download가 다 수행된 다음에 해당 함수가 실행된다.

//다운로드를 비동기적으로 수행하는 함수
//download가 수행되면서 doSomething 도 같이 수행된다.
const download = (url) => {
	console.log("download start");
	setTimeout(() => { console.log("download complete!");}, 5000);
}
download("xyz.com/hello.mp3");
doSomething();

//2_callback.js

//동기식 함수 : 결과값이 리턴된다.
const accumulateSync = (start, end) => {
	let cumsum = 0;
	for(let n=start; n<=end; n++) {
		cumsum += n;
	}
	return cumsum;
}

console.log(accumulateSync(1, 1000000));

//비동기식 함수
const accumulate = (start, end, callback) => {
	let cumsum = 0;
	for(let n=start; n<=end; n++) {
		cumsum += n;
	}
	callback(cumsum);	//결과를 콜백함수로 전달, 오류처리를 해야 하지만 일단 skip
}

accumulate(1, 1000000, result => console.log(result));

//3_callback2.js

const fs = require("fs");	//파일관련 처리를 모아둔 것

//동기식 함수의 사용
//Node.js 에서는 동기식 함수에 대하여 주로 Sync라는 접미사를 사용
const fileNames = fs.readdirSync(".");
for(const fname of fileNames) {
	console.log(fname);
}

console.log("--------------");

//비동기식 함수의 사용
fs.readdir(".", (err, fileNames) => {
	for(const fname of fileNames) {
		console.log(fname);
	}
});

//4_object.js

//Node.js에서는 별도의 로딩 없이 바로 사용가능한 객체들을 제공하는데
//이를 전역 객체라고 한다.

//1. global 객체 : 브라우저에서 window 객체의 개념과 유사
//global 객체는 다양한 객체를 속성으로 가지고 있으며 대표적인 예가 console 이다.
global.console.log("hello world");	//window.document

//global 객체의 속성은 global 없이 사용할 수 있다.
console.log("hello world");	//document

//2. process: 현재 프로세스의 실행정보를 가지고 있는 전역객체
//console과 마찬가지로 global 객체의 속성으로 존재
console.log(process.env);	//환경정보
console.log(process.arch);	//CPU 아키텍처 정보
console.log(process.platform);	//플랫폼 정보
console.log(process.uptime());	//Node.js 실행시간
console.log(process.version);	//Node.js 버전정보
console.log(process.pid);	//프로세스 아이디
//console.log(process.argv);	//명령행의 인자 정보

//명령행에 node add.js 10 20 라고 입력할 경우 각 토큰은 배열에 저장되어 전달한다
//			0   1     2  3

const argv = process.argv
for(let i=0; i<argv.length; i++) {
	console.log(`argv[${i}] = ${argv[i]}`);
}
/* node 4_object.js 10 20 수행결과
argv[0] = /usr/bin/node
argv[1] = /workspace/SWEDU_nodejs_mysql3/20220823/4_object.js
argv[2] = 10
argv[3] = 20
*/

//명령행으로부터 들어온 값은 문자열이므로 수치연산을 수행하려면 수치데이터로 변환해야 한다.
const n1 = parseInt(argv[2]);
const n2 = parseInt(argv[3]);
console.log(n1+n2);

//현재 프로세스를 종료하고 싶다면 exit 메서드를 사용하면 된다.
//process.exit();
//console.log("end");	//화면에 출력되지 않는다.

//3. console
//로그 레벨을 지정하여 출력할 수 있다.
console.log("로그 출력");
console.info("정보 출력");
console.warn("경고 출력");
console.error("오류 출력");

//표준 입출력: 컴퓨터에서 기본으로 사용하는 입출력 스트림
//표준 입력: 키보드(버퍼)
//표준 출력: 모니터(버퍼)
//표준 오류: 모니터

//info와 log는 표준출력으로 전송하고 warn과 error는 표준오류로 전송한다.
const value = 3.14;
console.log("value: "+value);	//덧셈 연산자 사용
console.log("value: ",value);

//객체 출력시 덧셈 연산자보다는 쉼표를 사용하는 것이 좋다.
const obj = { name:"kakaroo", age:20 };
console.log("obj: "+obj);	//obj: [object Object]
console.log("obj: ",obj);	//obj: { name: 'kakaroo', age: 20 }


//실행시간 축정
//console.time(타이머이름): 시작시점 설정
//console.timeEnd(동일 타이머 이름) : 종료시점까지 걸린시간을 계산해서 출력
const accumulateSync = (start, end) => {
	let cumsum = 0;
	for(let n=start; n<=end; n++) {
		cumsum += n;
	}
	return cumsum;
}
console.time("MY_TIMER");
console.log(accumulateSync(1, 1000000));
console.timeEnd("MY_TIMER");	//MY_TIMER: 6.800ms


//4. 현재 경로 출력하기
console.log(__filename);
console.log(__dirname);

//5_module.js

//모듈이란 응용프로그램을 구성하는 개별적 요소
//파일 단위로 이루어져 있으며 필요에 따라 명시적으로 불러올 수 있다.

//1. 기본모듈: Node.js와 함께 설치되는 모듈로 별도의 추가설치가 필요없음
//2. 확장모듈: 기본 모듈 이외의 모듈로 npm(node pakcage manager)

//Node.js에서 제공하는 기본 모듈
// - 프로세스 및 환경 : os, process, cluster
// - 파일, 경로, URL : fs, path, url, querystring, stream
// - 네트워크 : http, https, net, dgram, dns, ...

//모듈을 사용하려면 먼저 해당 모듈이 설치되어 있어야 하며 이를 불러와야 한다.
//사용방법: const 변수명 = require(모듈명);

//1. os 모듈
const os = require("os");
console.log(os.arch());	//x64	= process.arch
console.log(os.platform());	//linux = process.platform
console.log(os.type());	//Linux
console.log(os.uptime());
console.log(os.hostname());//goorm
console.log(os.homedir());// /root
console.log(os.cpus().length);

//2. path: 디렉토리나 파일의 경로를 처리하기 위한 모듈
//Windows의 경우 경로 구분자: \
//Unix(Linux, Mac)의 경우, 경로 구분자: /

const path = require("path");

//경로 정규화: 경로표현이 잘못되었을 때, 이를 정상적인 경로로 변환한다
console.log(path.normalize("/user/tmp/../local//\//bin/"))	//user/local/bin

//경로의 마지막 요소 추출하기
console.log(path.basename("/foo/bar/asdf/index.html"));	//index.html

//확장자를 제외한 이름만 추출하기
console.log(path.basename("/foo/bar/asdf/index.html", ".html"));	//index

//디렉토리만 추출하기
console.log(path.dirname("/foo/bar/asdf/index.html"));	//foo/bar/asdf

//확장자만 추출하기
console.log(path.extname("/foo/bar/asdf/index.html"));	//.html

//경로를 분석하여 추출하기
const data = path.parse("/home/user/hello.png");
console.log(data);	//root, dir, base, ext, name

//반대로 수행
const my_path = path.format({
	root: "/",
	dir: "/home/user",
	base: "file.txt",
	ext: "txt"
})

console.log(my_path);	// /home/user/file.txt

//path.sep : 경로 구분자로 윈도우의 경우 \, 유닉스 계열의 경우 /로 설정된다
console.log(__dirname + path.sep + "image.png");

//path.join(): 여러개의 경로를 연결하는 함수
console.log(path.join("/foo", "bar", "bar\qwerty", ".."));	//foo/bar (3,4번째 인자는 오류라서 join 안 됨)

//각 운영체제 별 기능을 제공한다
//Unix Family: path.posix.sep, path.posix.join
//Windows: path.win32.sep, path.win32.join
console.log(path.posix.sep, path.win32.sep);	// / \

<URL>

//6_url.js

const url = require("url");
const myurl = "http://www.hello.com:8080/p/a/t/h?name=kakaroo&age=20"

const parsed = url.parse(myurl);
console.log(parsed);

/*
Url {                                                                                prot
  slashes: true,
  auth: null,
  host: 'www.hello.com:8080',
  port: '8080',
  hostname: 'www.hello.com',
  hash: null,
  search: '?name=kakaroo&age=20',
  query: 'name=kakaroo&age=20',
  pathname: '/p/a/t/h',
  path: '/p/a/t/h?name=kakaroo&age=20',
  href: 'http://www.hello.com:8080/p/a/t/h?name=kakaroo&age=20'
}*/

//URL에서 query 부분만 파싱을 할 수 있도록 Node.js에서는 querystring 모듈을 제공한다.
console.log(parsed.query);//name=kakaroo&age=20
const qs = require("querystring");
const query = qs.parse(parsed.query);
console.log(query.name, query.age);	//kakaroo 20

//7_url.js

//기존의 Node.js 는 URL을 파싱하기 위해 url 모듈의 parse 함수를 제공했다.
//Node.js 7 이상부터는 URL을 좀 더 세분화하여 파싱할 수 있도록 URL 클래스를 제공한다.

const myurl = "http://www.hello.com:8080/p/a/t/h?name=kakaroo&age=20"
const url = new URL(myurl);
console.log(url);
/*
URL {
  href: 'http://www.hello.com:8080/p/a/t/h?name=kakaroo&age=20',
  origin: 'http://www.hello.com:8080',
  protocol: 'http:',
  username: '',
  password: '',
  host: 'www.hello.com:8080',
  hostname: 'www.hello.com',
  port: '8080',
  pathname: '/p/a/t/h',
  search: '?name=kakaroo&age=20',
  searchParams: URLSearchParams { 'name' => 'kakaroo', 'age' => '20' },
  hash: ''
}
*/

const params = url.searchParams;
console.log(params);	//URLSearchParams { 'name' => 'kakaroo', 'age' => '20' }
console.log(params.get("name"), params.get("age"));	//kakaroo 20

//URLSearchParams 객체는 필요하면 단독으로 사용할 수 있다.
const p = new URLSearchParams("name=william&age=12&book=python");
console.log(p.get("name"), p.get("age")) //william 12

//get(key): 처음으로 일치하는 키만 가져온다
console.log(p.get("book"));
console.log(p.get("email")); //null //일치하는 키가 없는 경우 null이 반환

//has(key): 해당 키의 유무를 참/거짓 형태로 반환
console.log(p.has("age") ? p.get("age") : "no age");	//12

//getAll(key): 일치하는 모든 키를 가져온다
console.log(p.getAll("book")); //[ 'python' ] //value를 배열에 저장하여 반환

//append(key, value): 해당 키를 추가, 동일키가 존재하는 경우에도 해당 키를 추가함
p.append("book", "ruby");
console.log(p.getAll("book"));	//[ 'python', 'ruby' ]

//toString() : 조작한 객체를 문자열로 생성
console.log(p.toString());	//name=william&age=12&book=python&book=ruby

//set(key, value): 동일 키의 값들을 모두 지우고 새로 추가
p.set("book", "nodejs");
console.log(p.getAll("book"));	//[ 'nodejs' ]

//delete(key): 해당 키를 삭제
p.delete("book");
console.log(p.getAll("book"));	//[]

<FS>

//8_fs.js

//파일시스템 : 컴퓨터 상의 파일이나 자료를 쉽게 조작할 수 있도록 하는 관리프로그램
//Node.js는 컴퓨터 상의 파일이나 디렉토리를 쉽게 접근 및 조작을 수행할 수 있도록
//fs 모듈을 제공한다.

const fs = require("fs");

//1. 파일 읽기: hello.txt를 만들고 그 안에 'hello world'를 저장해보자
fs.readFile("./hello.txt", (err, data) => {
	if(err) throw err;
	
	//readFile 을 사용하여 파일을 읽어오면 데이터는 바이너리 형태로 전달된다.
	console.log(data);	//<Buffer 68 65 6c 6c 6f 20 77 6f 72 6c 64>
	
	console.log(data.toString());	//hello world //문자 디코딩을 수행
})

//문자 인코딩 옵션 사용
fs.readFile("./hello.txt", "utf-8", (err, data) => {
	if(err) throw err;
	
	console.log(data);	//hello world 
})

//2. 파일 쓰기
fs.writeFile("./goodbye.txt", //해당파일이 없으면 생성 후, 쓰기를 수행
	 "goodbye, friend", //쓸 내용을 전달
	(err) => {
		if(err) throw err;
		console.log("create done!");	
});

//해당 파일이 이미 존재하는 경우, 덮어쓰기를 수행
fs.writeFile("./goodbye.txt", "hello,world", (err) => {
	if(err) throw err;
	console.log("overwrite done!");  //hello,worldiend
});

/*  비동기라서 순차적으로 출력되지는 않는다.
hello world
create done!
hello world
overwrite done!
*/

//3. 내용 추가하기
const arr = [1,2,3,4,5,6,7,8,9];
arr.forEach((item, idx, arr) => {
	//아래 함수는 비동기 함수이므로 파일 쓰기가 순차적으로 쓰여지지 않을 수 있다.
/*	fs.appendFile("./number.txt", `${item}\n`, (err) => {
		if(err) throw err;
	})
*/
	//동기 방식으로 처리하면 순차적으로 처리가 된다. 콜백 불필요
	fs.appendFileSync("./number.txt", `${item}\n`);
});

const userList = [
	{name: "kakaroo", age:20},
	{name: "william", age:12}
];
console.log(JSON.stringify(userList));
fs.writeFile("./user.json", JSON.stringify(userList), (err) => {
	if(err) throw err;
})	//[{"name":"kakaroo","age":20},{"name":"william","age":12}]

fs.readFile("./user.json", "utf-8", (err,data) => {
	if(err) throw err;
	const users = JSON.parse(data);
	console.log(users[0].name, users[0].age);	//kakaroo 20
	console.log(users[1].name, users[1].age);	//william 12
})

//9_fs.js

const fs = require("fs");	//콜백 버전
const fsp = require("fs").promises;	//프로미스 버전

//1. 콜백을 사용한 읽기
fs.readFile("./hello.txt", "utf-8", (err,data) => {
	if(err) throw err;
	console.log(data);
});

//2. 프로미스 버전을 사용한 읽기
fsp.readFile("./hello.txt", "utf-8")
	.then((data) => {console.log(data); })
	.catch((err) => {console.log(err); });

//3. 콜백을 사용한 쓰기
fs.writeFile("./goodbye.txt", "goodbye, friend", (err) => {
	if(err) throw err;
	console.log("done!");
})

//4. 프로미스 버전을 사용한 쓰기
fsp.writeFile("./goodbye.txt", "hello world")
.then(() => { console.log("Done-1"); })
.catch((err) => { console.log(err); });

//a_buffer.js

const fs = require("fs");

//파일 입출력 방식
//1. 버퍼 : 데이터를 모아서 처리하는 방식
//2. 스트림: 데이터를 흘려서 처리하는 방식

//버퍼의 사용  --> 아주 큰 데이터라면 문제가 된다.
const buf = Buffer.from("hello, world");
console.log(buf);
console.log(buf.length);	//버퍼의 크기로 단위는 바이트(byte)
console.log(buf.toString());//버퍼를 문자로 디코딩

const arr = [
	Buffer.from("apple "),
	Buffer.from("banana "),
	Buffer.from("cherry "),
	Buffer.from("durian")
];
const buf2 = Buffer.concat(arr);	//연결
console.log(buf2);
console.log(buf2.toString());//버퍼를 문자로 디코딩

//b_stream.js

const fs = require("fs");

//실습파일 생성 : 터미널에서 다음과 같이 입력
//# ls /bin > bin.txt

const rs = fs.createReadStream("./bin.txt", {highWaterMark:16});
//											^--- 한번에 읽을 크기(byte), 기본값은 64KB

//이벤트: 어떤 사건
//data: 읽을 데이터가 존재할 때 생성되는 이벤트
const dataArr = [];	//읽어온 데이터를 저장하기 위해 배열을 생성
rs.on("data", (chunk) => {
	dataArr.push(chunk);
	console.log("chunk:",chunk);
})
//end: 더 이상 읽을 데이터가 없을 때 생성되는 이벤트
rs.on("end", () => {
	console.log(Buffer.concat(dataArr).toString());
})
//error: 오류가 발생되었을 때 생성되는 이벤트
rs.on("error", (err) => {
	console.log("error:",err);
})

//1_stream.js

const fs = require("fs");

//쓰기
const ws = fs.createWriteStream("./write.txt");

//finish - 파일쓰기가 종료되었을 때 발생되는 이벤트
ws.on("finish", () => {
	console.log("done!");
});

//파일쓰기
ws.write("hello, world\n");
//					  ^--- 라인단위로 처리하려면 개행을 입력해야 함

ws.write("goodbye, friend!");
ws.end();	//쓰기가 완료되었다고 알려주는 메소드

Node.js - 수업 1일차

kakaroo — Mon, 22 Aug 2022 10:36:53 +0900

1. 웹 서버 구동위한 준비 - (구름 IDE)

서버 구동

python3 -m http.server

서버 실행 URL과 포트 지정

URL 이동

2. Node.js 를 하기 위한 기본적인 문법

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>1 variable </h1>
		<script>
			//브라우저의 개발자 도구에서 console 탭을 확인해 주세요
			//console.log("hello, world");
			
			//스코프(scope): 참조대상 식별자(identifier, 변수나 함수의 이름)을 찾아내기 위한 규칙
			//-> 어떤 이름을 참조하기 위해 사용할 수 있는 유효 범위
			
			//스코프의 종류
			//1. 전역 스코프: 코드 어디에서든지 참조할 수 있음
			//2. 지역 스코프 또는 함수 레벨 스코프: 함수 코드 블럭이 만든 스코프로 함수자신과
			//									하위 함수에서만 참조할 수 있음
			//3. 블럭 레벨 스코프: 중괄호를 사용한 스코프로 주로 제어문에 사용함
			
			//전역스코프 : 함수 외부 영역
			
			function foo() {
				//지역 스코프 또는 함수 레벨 스코프
			}
			if(true) {
				//블록 레벨 스코프
			}
		</script>
		<script>
			//모든 변수는 선언된 위치에 따라서 크게 2가지로 나뉠수 있다
			//1. 전역변수: 전역 스코프에서 선언된 변수로 어디에서나 참조할 수 있음
			//2. 지역변수: 지역 스코프에서 선언된 변수로 그 지역과 그 지역 하위지역에서만 참조할 수 있음
			var global = "global";	//전역변수
			
			function bar() {
				console.log(global);
				
				var local = "local"
				console.log(local);
			}
			
			bar();
			//console.log(local);	//오류
			
			if(true) {
			   //블럭 레벨 스코프
				//자바 스크립트는 기본적으로 블럭레벨 스코프를 지원하지 않으므로 아래의 변수는
				//전역 변수로 해석됩니다.
				var test = "test"
			}			
			console.log(test);	//문제없이 동작함
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>2 variable </h1>
		<script>
			//var 키워드
			var x = "X";
			console.log(x);
			
			y= "Y";		//var 키워드가 없다. 안 써도 되는거 아니냐? 왜 쓰는지 알아보자
			console.log(y);
			
			function foo() {
				//지역 스코프에서 var 키워드를 사용하여 변수를 선언하면
				//해당 변수는 지역 스코프의 특성을 갖는다
				var z = "Z";
			}
			foo();
			//console.log(z);	//오류
			
			function bar() {
				//지역 스코프에서 var 키워드를 사용하지 않고 변수를 선언하면
				//해당 변수는 전역 스코프의 특성을 갖는다
				a = "A";
			}
			bar();
			console.log(a);	//된다
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>3 variable </h1>
		<script>
			var age = 20;
			console.log(age);
			
			//변수를 다시 선언할 수 있다.
			var age = 30;
			console.log(age);
			
			//스크립트 언어는 인터프리터 언어로 라인단위로 읽어서 실행한다
			//하지만, 자바스크립트는 생성된 변수나 함수등을 먼저 추출해서
			//해석기 내의 메모리에 로딩한 뒤(호이스팅:끌어올림), 코드를 실행한다.
			//그렇기 때문에 아래 코드는 에러가 발생하지 않는다.
			//초기화 된 값은 호이스팅하지는 않고 변수가 선언된 것만 로딩한다.
			console.log(uname);	//undefined 로 출력됨
			var uname = "daniel";
			console.log("------------------------------");
		</script>
		<script>
			var n = 1;
			function test() {
				//지역 스코프에서 선언된 변수가 없으면 전역변수에서 찾는다.
				//함수 레벨 안에서 아래 변수로 선언되었기 때문에 호이스팅되어 버린다.
				console.log(n);	//undefined
				
				var n = 2;
				console.log(n);	//2
			}
			test();
			console.log("------------------------------");
		</script>
		<script>
			//let 키워드는 var 키워드의 문제를 해결하기 위해 ES6에서 추가됨
			var temp1;	//선언만 가능
			let temp2;	//변수 선언이 가능
			
			var temp3 = 20;
			let temp4 = 20;	//변수를 선언과 동시에 초기화가 가능
			
			var temp3 = 30;	//var 키워드는 중복선언이 가능하다
			//let temp4 = 30; //오류! 중복선언이 불가능하다.
			
			//console.log(temp5);	//오류! 호이스팅은 되지만 초기화가 안 되었다고 에러발생시킴
			let temp5 = 10;
			console.log("------------------------------");
		</script>
		<script>
			if(true) {
				var v = "var";
				let l = "let";
			}
			console.log(v);
			//console.log(l);	//오류! let으로 선언된 변수는 블럭 레벨 스코를 갖는다.
			
			for( var i=0; false; ) {}
			console.log(i);	//ok
			
			for( let j=0; false; ) {}
			console.log(j);	//오류! let으로 선언된 변수는 블럭 레벨 스코를 갖는다.
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>4 variable </h1>
		<script>
			let r = 2;			
			console.log(r ** 2 * 3.14);	//하드코딩
			//let pi = 3.14;
			//console.log(r ** 2 * pi);	//심볼,, 하지만 이건 값을 변경할 수 있다.
			const pi = 3.14;
			console.log(r ** 2 * pi);	//심볼
			
		</script>
		<script>
			//리터럴(literal): 그 자체가 값을 의미하는 것
			10, 3.14, "hello", true;
			
			//변수
			let data;
			data = 10;
			data = 3.14;
			data = "hello";
			data = true;
			
			//상수(const variable)
			const PI = 3.14;
			//PI = 0;	//오류!
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>5 function </h1>
		<script>
			//1급 시민(first class citizen)
			//1. 변수에 할당될 수 있다
			//2. 인자(argument)로 전달될 수 있다.
			//3. 함수로부터 반환될 수 있다.
			// ex)리터럴
			//let age = 20;
			
			//자바스크립트에서는 함수도 1급 시민이다. 추가적으로 다음의 조건을 요구하는 경우도 있다.
			//런타임에 생성할 수 있다.
			//익명으로 생성할 수 있다.
			
			//자바스크립트는 위의 추가적인 요건을 만족한다. 이처럼 1급 시민의 조건을 만족하는 함수를
			//일급함수(first class function)이라고 한다.
		</script>
		<script>
			//1. 변수에 할당할 수 있다.
			function print_hello() { console.log("hello");}
			const fn = print_hello;
			fn();
			
			//2. 함수의 인자로 전달할 수 있다.
			function sayHello() { return "hello, "; }
			function greeting(helloMessage, name) {
				console.log(helloMessage() + name)
			}
			greeting(sayHello, "kakaroo");
			
			//3. 함수로부터 반환될 수 있다.
			function return_print_hello() { return print_hello; }
			return_print_hello()();
			
			//4. 런타임에 생성될 수 있다.
			const add = new Function("x", "y", "return x+y");
			console.log(add(1,2));	//3
			
			//5. 이름이 없는 함수를 생성할 수 있다.
			const sub = function(x,y) { return x - y; }
			console.log(sub(1,2));	//-1
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>6 function </h1>
		<script>
			foo();	//함수도 호이스트 됩니다.	//called foo
			function foo() { console.log("called foo"); }
			foo();	//called foo
			
			//함수 표현식을 사용하여 생성된 익명 함수의 경우에는 호이스트가 발생하지 않는다.
			//bar();	//에러! Cannot access bar before initialization
			const bar = function() { console.log("called bar"); }
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>7 function </h1>
		<script>
			//일일이 함수 선언시 function tag 넣고 괄호 넣고 이런게 불편하다
			const pi1 = function() {
				return 3.141592;
			}			
			console.log(pi1());
			
			//화살표 함수
			const pi2 = () => {
				return 3.141592;
			}
			console.log(pi2());
			
		</script>
		
		<script>
			//화살표 함수의 표현방법 1. 매개변수가 없는 경우, 소괄호를 생략할 수 없다
			//const hello = function() { console.log("hello");}
			const hello = () => {console.log("hello");}
			hello();
			
			//화살표 함수의 표현방법 2. 매개변수가 1개인 경우, 소괄호를 생략할 수 있다.
			//const square = function(x) { return x * 2;}
			const square = x => { return x * 2;}
			console.log(square(5));
			
			//화살표 함수의 표현방법 3. 매개변수가 2개 이상인 경우, 소괄호를 생략할 수 없다
			//const mul = function(x,y) { return x * y;}
			const mul = (x,y) => { return x * y;}
			console.log(mul(5,6));
						
			
			//화살표 함수의 표현방법 4. 함수 코드가 1줄인 경우 한줄 블럭을 사용할 수 있다
			//const world = function() { console.log("world");}
			const world = () => { console.log("world"); }
			world();
			
			//화살표 함수의 표현방법 5. 함수 코드가 1줄인 경우 블럭을 생략할 수 있다
			//const goodbye = function() { console.log("goodbye~");}
			const goodbye = () => console.log("goodbye~");
			goodbye();
			
			//화살표 함수의 표현방법 6. 함수코드가 값만 반환한다면 return 키워드를 생략할 수 있다.
			//const pi = function() { return 3.141592;}
			const pi = () => 3.141592;
			console.log(pi());
			const sqr = x => x**2 ;
			console.log(sqr(10));
			
			//화살표 함수의 표현방법 7. 필요하다면 여러줄을 사용할 수 있다.
			//const area = function(r) {
			// const result = r ** 2 * 3.14;
			// return result;
			//}
			const area = (r) => {
				const result = r ** 2 * 3.14;
				return result;
			}
			console.log(area(4));
			
		</script>
	</body>
		
</html>

---

비동기 처리 - promise

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>8 promise</h1>
		<script>
			function delay(sec, callback) {
				setTimeout(function() {callback(new Date().toISOString())}, 
						   sec*1000);
			}
			
			//console.log("start");
			//delay(5, (time) => {
			//	console.log(time);
			//});
			//console.log("end");			
		</script>
		<script>
			//job1(다운로드), job2(파일저장), job3(압축해제)
			//job1,job2,job3 이 동시에 시작된다.
			delay(1, (time) => {
				console.log("job1", time);
			});
			delay(1, (time) => {
				console.log("job2", time);
			})
			delay(1, (time) => {
				console.log("job3", time);
			})
			
			//아래와 같이 처리하면 비동기적으로 처리가 되지만,
			//callbak 지옥에 빠진 케이스 (코드 복잡도)
			delay(1, (time) => {
				console.log("job1", time);
				delay(1, (time) => {
					console.log("job2", time);
					delay(1, (time) => {
						console.log("job3", time);
					})
				})
			});
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>9 promise</h1>
		<script>
			//promise 객체 생성
			//어떤 작업에 대하여 성공 또는 실패를 사용자에게 알려주기 위해 
			//2개의 콜백을 받는다. (아래 예에서는 성공하면 resolve, 실패하면 reject 호출하면 됨)
			//const job = new Promise();//Uncaught TypeError: Promise resolver undefined is not a function
			/*
			const job = new Promise( (resolve, reject) => {
				//do something..				
				//resolve("done");
				//reject("error"); //위 resolve 함수가 호출되면 reject 함수는 호출안됨
				
				//아래 코드는 다운로드를 하는 코드라고 가정
				setTimeout( ()=> {
					resolve("Download Completed");
				}, 3000);
			});
			
			//promise 객체 생성 후, 성공과 실패에 대한 처리 코드를 추가한다.
			job.then((result) => {	//성공
				console.log(result);
			});
			job.catch((reason) => { //실패
				console.log(reason);				
			});
			*/
		</script>
		<script>
			//한번 사용할 함수이므로 변수 선언을 따로 하지 않는다.			
			/*
			new Promise((resolve, reject) => {
				setTimeout( ()=> {resolve("완료");}, 3000);
			})
			.then((result)=>{console.log(result)})
			.catch((reason)=>{console.log(reason)});
			*/
			//위 코드는 어떤 작업인지를 식별하기 어렵다.
			//이를 해결하기 위해 보통 함수로 래핑(wraooing)하여 사용한다.
			const download = () => {
				return new Promise((resolve, reject) => {
					setTimeout(()=>{resolve("다운로드완료");}, 3000);
				});
			}
			download().then((result)=>{
				console.log(result);
			})
			.catch((reason)=>{
				console.log(reason);
			});
		</script>		
		<script>
			
		</script>
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">
	</head>	
	<body>
		<h1>a promise</h1>
		<script>
			/*
			delay(1, (time) => {
				console.log("job1", time);
				delay(1, (time) => {
					console.log("job2", time);
					delay(1, (time) => {
						console.log("job3", time);
					})
				})
			});
			*/
			const job1 = () => {
				return new Promise((resolve, reject) => {
				setTimeout(()=> resolve("job1"), 1000);
			})};
			const job2 = () => {
				return new Promise((resolve, reject) => {
				setTimeout(()=> resolve("job2"), 1000);
			})};
			const job3 = () => {
				return new Promise((resolve, reject) => {
				setTimeout(()=> resolve("job3"), 1000);
			})};
			
			job1().then((result)=>{
				console.log(result);
				
				//아래의 경우 동일한 콜백 지옥이다.
				//job2().then((result)=>{
				//	console.log(result);
				//})
				
				//헤결: job2에 대한 promise 객체를 반환
				//이 경우 then 함수가 호출이 끝나면 job2 함수에서 반환된 promise 객체를 반환
				return job2();
			}).then((result)=> {
				console.log(result);
			})
			.catch((reason)=> {
				console.log(reason);	//job1, job2 의 오류는 여기로 귀결된다.
			});
			
		</script>	
	</body>
		
</html>

<!DOCTYPE HTML>

<html>
	<head>
		<meta charset="utf-8">		
	</head>	
	<body>
		<h1>
			AjaxTest
		</h1>
		<script>
			//AJAX : Asynchronous Javascript And XML의 약자로 서버와 비동기 통신을 위한 기법
			//장점은 특정페이지 전체를 새로고침하지 않고도 일부만 업데이트 가능
			//https://jsonplaceholder.typicode.com/
			function fn() {
				xhr = new XMLHttpRequest();
				xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
				xhr.onload = () => {
					const data = JSON.parse(xhr.response);
					console.log(data);
				};
				xhr.send();
			}
			fn();
		</script>
		<script>
			//fetch는 Promise 객체를 반환한다.
			fetch("https://jsonplaceholder.typicode.com/users")
			.then((response) => {
				//console.log(response);
				//response.text().then((result)=> {	//콜백지옥
				//	console.log(result)
				return response.json();
				})
				.then((result) => {
					console.log(result);
				});
		</script>
	</body>
		
</html>

일러스트 - Text 계단 스타일

kakaroo — Sat, 20 Aug 2022 13:32:59 +0900

1. 글자 입력 > Object > Expand

2. 위/아래 라인에 맞추어 Rectangle 로 덮어씌운 뒤, Split into Grid 로 나눠줄 계단수(5) 만큼 Row로 split 한다.

Object > Path > Split into Grid

3. 전체선택 > PathFinder > Divide > Ungroup

4. Anchor Point Tool 로 필요없는 부분을 지워준다.

5. 라인별로 Unite

6. 2번째 4번째 오브젝트는 조금 어둡게 색을 바꾼다.

7. 홀수번째 오브젝트를 선택한 뒤, Effect > 3D > Rotate > Isometric Top

8. 짝수번째 오브젝트를 선택한 뒤, Effect > 3D > Rotate > Isometric Left

Expand Appaerance 한 뒤, 위치를 맞쳐준다.

일러스트 - Blend Text (feat. Shear)

kakaroo — Sat, 20 Aug 2022 12:03:59 +0900

1. Shear 5, Stroke 2 pt, 0.5 pt

2. Object 선택한 뒤 Object > Blend > Make

3. Expand Appearance

4. 맨 앞의 Object Copy > Paste Front

5. Masking 할 영역 펜툴로 지정 > Make Mask

일러스트 - 텍스트 3D 효과 (Make with Top)

kakaroo — Fri, 19 Aug 2022 17:12:56 +0900

1. Rectangle - 3D

2. Object > Expand Appearance

3. 윗면과 앞면이 나눠질때까지 ungroup

4. 선(Fill)으로 구역을 나눈다.

5. Shape Builder Tool로 나눈다. 색은 하늘색으로 지정한다.

6. Text 보다 면을 위로 정렬한다.

7. 같이 선택하고, Make with Top

8. 면에 각각 Make with Top 처리를 한다.

일러스트 - 텍스트 Transform 처리

kakaroo — Mon, 15 Aug 2022 14:42:27 +0900

1. 면 그리기 > Rectangle 을 여러개 이어준다.

2. Pathfinder - Unite > Direct selection tool

3. 모서리를 둥글게

4. 하나씩 색을 다르게 복사해서 클리핑 마스크

글자 효과 넣기

1. 타이핑을 한뒤, 원본을 하나 복사한 뒤, Fill, Stroke 을 0으로 설정

2. Appearance > Add New Stroke > Gradient 를 아래와 같이 설정

어두워 지는 색을 배경색으로 하면 글자가 안 보이는 효과를 볼 수 있다.

3. Transform 효과

Y축으로 Scale 을 좀 더 커지는 값으로 복사한다.

4. 아래 그림자는 위와 반대로 설정하면 된다.

5. 완성

일러스트 - 엠블럼 로고

kakaroo — Sat, 6 Aug 2022 13:08:50 +0900

1. 엠블럼의 틀이 될 모양을 만든다.

1.1 가장 바깥 테두리의 원을 Fill 로 해서 만든다.

1.2 Offset Path 를 -1mm 로 해서 Fill 흰색을 채운다.

1.3 Offset Path 를 -1mm 로 해서 Fill 검정색을 채운다.

1.4 Offset Path 를 -6mm 로 해서 Fill 흰색을 채운다.

1.5 Offset Path 를 -1mm 로 해서 Fill 빨간색을 채운다.

2. 글자를 따라 쓸 path를 하나 더 만든다. 역시 offset path를 이용한다. 아래 초록색 원

3. 위 path를 선택한 상태에서 Type on a path tool을 선택, 글자를 입력해주고 가운데 정렬을 한다.

글자의 중간부부에 마우스로 잘 갖다 대어 보면 'ㅗ' 자 아이콘이 보이는데, 이걸 돌려주면 된다.

4. 아래 글자를 위한 path도 하나 그려준다. 바깥 테두리에서 3번째 원에서 offset path -1mm 로 잡아준다.

path로 사용되면 Fill은 없어지기 때문에 order는 상관없다.

5. 마지막으로 원에 넣을 이미지를 Clipping mask 해주기 위해 안의 원을 복사해서 이미지 위에 ordering 해준다.

그리고 Ctrl + 7 로 cliiping mask를 해준다.

완성

일러스트 - 입체글자

kakaroo — Sat, 30 Jul 2022 16:36:24 +0900

1. 티몬 글자체 다운로드 받아 사용

2. 자간을 좀 더 크게 설정

3. 글자를 Design 하려면 path 화 시켜야 한다. Type > Create Outlines

ㅋ 의 밑부분을 조금 수정하고, Fill은 흰색으로 채운다.

4. 글자 '카' 에서 거리가 너무 가깝기 때문에 조금 사이에 공간을 준다.

Ungroup 을 해도 자음 모음이 나눠지지 않는다.

마우스 우측 버튼 > Release Compound Path 으로 분리가 가능하다.

5. 테두리를 칠하기 위해 Offset Path 를 10 pt 주고 검정색으로 변경한다.

Layer 하위 object 들은 아래와 같이 구성되어 있다.

테두리와 글자를 따로 그룹화 한다. 테두리만 위로 올려 그룹화, 글자만 따로 그룹화 하고 다시 테두리를 아래로 내린다.

6. 입체효과 (블렌드 툴)

테두리를 Copy, Paste in Back ( CTRL + B) 한 뒤, 아래와 우측으로 약간 이동한다.

테두리를 블렌딩 처리한다. 블렌드 툴을 누르고 블렌드 처리를 하는 두 오브젝트를 선택하면 가운데 하나 오브젝트가 정확히 가운데 위치에 복사된다.

블렌드 툴을 더블클릭해서 아래와 같이 값을 넣으면 smooth 하게 처리된다.

7. 블렌드 툴을 사용했다면 라인을 깨뜨려줘야 한다. Object > Expand 를 하면 아래와 같이 50개(위에서 실행한 Belnd steps 값)의 라인이 추가된다.

50개의 Group이 있다.

8. 테두리만 선택된 상태에서 Pathfinder > Unite 로 합쳐준다.

9. 글자에도 입체적인 효과를 더 주기 위해 흰색 글자를 Copy , Paste in back 해서 아래, 우측으로 이동한다.

노란색으로 입혀 주고, 다시 글자를 선택해서 글자에는 테두리를 준다. Align Stroke 값을 다르게 설정해본다. (아래는 outside로 설정함)

10. 마지막으로 브러쉬로 효과를 준다.

Fill 검정색의 타원을 Art brush 로 등록하고 Brush 툴로 아래와 같이 포인트를 준다.

일러스트 - 누끼

kakaroo — Mon, 25 Jul 2022 22:44:48 +0900

1. 이미지 파일을 불러온다(place) > 움직이지 않게 Ctrl + O 로 잠그고, 원하는 영역을 펜 툴로 영역을 딴다.

2. Fill 색상을 일단 아무 색으로 설정한다.

3. 뒤의 이미지와 누끼딴 이미지가 겹쳐 보인다. > 마스크를 적용한다.

마스크를 적용하기 위해 잠근 뒤 배경을 Ctrl + Alt + 2 로 lock 을 해제한다.

전체 영역을 선택한 뒤, Transparency 패널에서 Make Mask 를 선택한다.

4. 아무 이미지도 보이지 않는데, Inverse mask 를 선택하면 아래와 같이 정확하게 mask 가 생성된다.

5. 누끼 오브젝트를 하나 복사해서 뒤에 붙여넣는다 (Ctrl +B)

앞면의 오브젝트를 릴리즈 하면 BG와 2번의 누끼딴 path 로 분리된다.

구분하기 위해 아래와 같이 이름을 지정해 주었다.

앞의 누끼를 옆으로 이동해보면 알 수 있다.

일러스트 - 텍스트에 스타일 효과

kakaroo — Mon, 25 Jul 2022 06:23:17 +0900

바코드 모양 선 긋기

1. 선긋기 이후 Selection Tool (V) 선택 후, Enter 키

2. Move 창이 뜨면 일정 간격 적용 후, Copy 버튼 선택

3. Ctrl + D 로 이전 행동 반복

4. 위 부분을 타원으로 자르자.

Path > Outline Stroke > Pathfinder - divide > UnGroup > 잘라내기

4. 전체선택후, 그룹화(Ctrl+G)

5. Rotate tool(R) 선택 후, ALT 키를 누른채 회전시킬 기준점(아래 하늘색) 클릭 후, 90도로 copy

6. 이전 동작 반복 (Ctrl + D), 이동하여 약간의 여백

7. 텍스트를 스타일로 등록해서 넣어보자. 먼저, 텍스트를 입력 (휴먼앳체)

Appearance 창에서 Add New Stroke 선택, 색상 구분을 위해 임시로 색 지정

Stroke 가 선택된 상태에서 Add New Effect > Path > Offset Path 지정

8. 텍스트의 Fill 부분도 Stroke과 동일한 색상으로 지정한 뒤, Add New Fill로 동일한 Fill 을 만든다.

Fill의 색상은 다르게 지정한뒤, 추가된 Fill을 Layer 처럼 가장 아래로 내린다.

Path > Offset Path를 Stroke에 준 만큼 동일하게 지정하면 색상이 칠해진다.

글자가 하나 이상일 경우 테두리가 겹치기 때문에 테두리에 Pathfinder 에서 Add 속성을 추가해준다.

등록한 스타일은 Graphic Style에 추가해 주면 재사용이 가능하다.

Object를 선택해 + 버튼을 눌러주면 된다.

아래와 같이 완성

일러스트 - 로고 01

kakaroo — Mon, 25 Jul 2022 06:19:45 +0900

1. 커다란 원안에 4개의 원을 넣는다.

커다란 원은 Stroke, 내부의 원은 Fill로 각각 다른 색깔을 지정한다.

여기서 커다란 원을 기준으로 정렬하기 위해서는 정렬할 두 object (커다란 원과 작은 원)을 shift 키로 선택한 뒤, 마우스를 떼고 다시 정렬 기준이 되는 큰 원을 선택하면 아래와 같이 기준이 되는 object에 굵은 테두리가 생긴다.

Align To를 보면 Key Object로 활성화 된 것을 볼 수 있다.

아래 동그란 부분을 기준으로 테두리를 shape builder tool로 4개의 영역으로 합쳐준다.

테두리를 흰색으로 두껍게, 그리고 면색에 Gradient를 입히고 가운데 부분은 삭제

일러스트 - Text 에 Gradient 처리

kakaroo — Sun, 24 Jul 2022 16:02:05 +0900

1. Text 선택, Snap ITC 글꼴

Fill : Black, Stroke : None

2. Pen Tool로 선을 그려 색을 다르게 칠할 부분을 나눠준다.

3. Pathfinder - divide 로 나눠준다. 이 때, Text 는 filled path가 아니어서 아래와 같은 에러가 발생한다.

글자는 그림으로 변환시켜줘야 한다. 글자 선택 후, Type > Create Outlines

전체 선택을 한 뒤, Pathfinder - divide 를 실행, 그리고 그룹해제를 한다.

그러면 아래와 같이 pen으로 나눈 부분을 다 분리할 수 있게 된다.

4. 선택된 부분을 Gradient 처리한다. 윤곽선 보기 모드에서 shift로 선택한 뒤, 다시 미리보기 로 넘어가서 Fill 모드로 설정한 뒤, Gradient 값을 넣는다.

윤곽선 보기 모드에서 shift 키로 선택

다시 Ctrl + Y를 눌러 미리보기 모드로 돌아온다

Fill 모드 선택 후, Gradient 선택

면의 색상이 Gradient로 설정 된다.

Gradient 의 Start 부분과 End 부분을 적절하게 조정해서 색을 설정한다.

아래와 같이 완성.

일러스트 - 불규칙 패턴

kakaroo — Sat, 16 Jul 2022 18:51:33 +0900

1. 정사각형을 만든다. 이 때, 크기를 미리 지정한다.

200 px 의 정사각형을 만든뒤, 배경색을 지정하고 Ctrl + 2로 잠궈둔다.

불규칙적으로 색이 다른 원들을 넣어준다. 테두리를 벗어나도 된다.

테두리를 벗어난 원은 반대쪽에도 똑같이 겹칠 수 있게 복사해서 겹칠 자리에 위치해준다.

예를 들어 오른쪽 위의 파란 원을 그대로 복사, 붙여넣기 해서 Y축 위치만 정사각형 높이 위치만큼 더해준다.

완성

동그라미만 선택해서 그룹화시키고, 뒤 네모배경을 앞으로 보낸뒤, Clipping Mask (Ctrl + 7)를 시킨다.

이제 위 생성된 패턴을 swatch 에 추가해보자. 하지만 선택된 게 Clip Group 화되어 있어 이를 path로 만들어야 추가가 가능하다. 패스파인더의 Crop (겹치는 부분만 남기고 나머지는 삭제) 을 처리하면 아래와 같이 원들도 선택이 된다.

이제 swatch 등록이 가능하다.

일러스트 - 규칙적인 패턴

kakaroo — Sat, 16 Jul 2022 17:51:01 +0900

1. 반짝이는 빛을 우선 만들어보자

원을 만든 다음, Stroke는 None 처리하고, Effect에서 Distort & Transform > Pucker & Bloat 을 선택한다.

영어 사전적인 의미는 아래와 같은데, 실제로 동작되는 건 잘 이해가 안 된다.

pucker : 주름을 잡다, bloat : 부풀리다

pucker 쪽으로 조절을 하면 원에서 대각선 형태로 변형이 된다.

bloat 쪽으로 조절하면 12, 3, 6, 9시 방향에서 누르는 듯하게 변형이 된다.

클로버 타입은 bloat 쪽으로 조절을 하면 모양이 나올듯 하다.

아래와 같이 pucker 쪽을 많이 주게 되면 원하는 빛 모양이 나온다.

2. 패턴 등록

1에서 만든 빛 오브젝트를 Swatch 패널로 드래그 해서 등록한다.

등록된 패턴을 더블 클릭하면 아래와 같은 pattern option이 나타난다.

Hex by colum 으로 선택하고 위 버튼 중 Doen 으로 저장해주자.

도형을 그려 그 안을 패턴으로 채워보자.

패턴이 너무 큰 것 같다. Scale 버튼을 눌러 안의 패턴의 사이즈를 줄일 수 있다.

일러스트 - 하트, 왜곡

kakaroo — Wed, 13 Jul 2022 21:39:39 +0900

하트 만들기

양끝이 둥근 사각형을 만든다.

복, 붙 한뒤 90도로 돌려준다.

패스파인더 > divide > ungroup > 불필요한 부분 자르기

90도로 돌려준다.

물방울 브러쉬 툴로 구역을 나눠준다.

패스파인더 - divide - 하나하나 자르거나

패스파인더 - minus front

넣어줄 오브젝트를 만든다.

넣을 오브젝트와 넣어줄 오브젝트 영역을 선택한 뒤, 왜곡 시킨다.

아래와 같이 에러가 나오는데, 틀이 요소보다 아래에 있기 때문이다. 틀이 될 하트를 상단에 배치한다.

다시 Envelop Distort > Make with Top object (Alt + Ctrl + C)

출처 : https://www.youtube.com/watch?v=UkUw6yXEaEA&t=258s

일러스트 - watermelon

kakaroo — Sat, 9 Jul 2022 14:06:14 +0900

BG color : #150923

바깥 원 : circle 550 x 550 px, #44c614 -> swatch에 색상 추가

중간 원 : Object > Path > Offset path : -20 px, #fff6bc -> swatch에 색상 추가

안쪽 원 : Object > Path > Offset path : -20 px, #ff2449

바깥 원을 copy, paste in front

bring to front (ctrl+shift+])

scissors tool로 반을 자른다

반쪽원의 끊어진 패스를 연결한다

Path - Join (Ctrl + J)

오른쪽 반원은 hide

왼쪽 반원을 Gradient 처리

오른쪽을 좀 더 어둡게

Color > HSB에서 B를 조절

수박 줄무늬 만들기

rectangle > 1000 x 25 px

Effect > Distort & transform > Zig Zag > Size: 12 px, Ridges per segment : 10, smooth

세로로 돌려서 복사

좌우 간격 조절 후, Group

줄무늬 마스크

반원 선택 > 복사

줄무늬 선택 > Transparency > 더블클릭

Paste in Front (Ctrl + F)

중간 원 테두리 따기

중간 원 복사해서 맨 앞으로 복사 > Swap Fill and stroke > Fill None으로 처리 > Path로 변경

Scissors tool로 자른다

선을 굵게 처리

수박씨 그리기

Circle 20 px -> Direct selection tool로 아래 부분 잡기

아래로 shift + Arrow down 1회

뾰족하게 Achor Point Tool 로 아래 부분 클릭

Effect > Distrot & Transform > Transform

새로 생긴 것은 object 로 등록되지 않기 때문에 Object > Expand Apperance

여러 개 복사해서 여기저기 분포시킨다.

오른쪽 반원을 unhide 한 뒤에 맨 앞으로 보낸다.

오른쪽 반원을 맨안쪽 원 색깔로 Gradient 처리한 뒤, 우측 Gradient 값을 아래와 같이 변경한다.

반원의 Transparency 를 overlay로 변경

한 번 더 색상을 입혀서 효과를 준다

완성

일러스트 - 로켓

kakaroo — Sun, 3 Jul 2022 17:29:50 +0900

자주 쓰일 color를 미리 Rectangle로 생성

200 px X 200px 크기 차례대로 만들어 그룹핑

1. 000f15

2. fff6c7

3. ff4e00

4. 314d51

5. 46665a

6. 578476

7. ffa440

Grid 격자 설정

Ctrl + ' : 격자 보이기(감추기)

배경 그리기

Artboard 크기의 rectangle 생성

몸통 그리기

Copy, Paste in Front

Transform > Refelct > Vertical

지금까지 구성된 layer는 다음과 같다.

2개의 pathfinder > merge

아래에 rectange > pathfinder minus front

색칠하기

위 path는 merge가 되었다. 반씩 나눠서 칠하려면 path를 나눠준다.

먼저, 하나를 복사해서 붙여준뒤, rectange로 나눠주고 pathfinder > intersect

띠 만들기

2개의 원을 그려준다. 큰 원이 back에 위치한다.

Minus front 로 작은 원을 없애준다.

몸통을 복제한 뒤, 맨 앞으로 보내준 다음 intersect로 겹치는 부분만 가져온다.

아래에도 동일한 방법으로 띠를 만든다.

다음과 같이 완성

창문과 라인 넣기

Fill, Stroke(7px)

랜딩 기어 넣기

Direct selection tool 선택 > 원의 아래 영역 선택 > Down 화살표 키

아래 부분 뾰족하게 만들기 > Anchor Point Tool 로 아래 부분 터치

좌우 다리를 펜툴로 그려서 back으로 옮겨준다.

행성 그리기

원을 2개 그리고, 하나만 gradient 처리한다. 나머지 하나는 띠 형태로 늘려준다 (ALT 키를 누르고 드래그 하면 좌우상하 대칭)

띠를 하나 더 복사해서 행성 뒤에 나타낼수 있게 작게 만든다.

pathfinder > minus front

띠 부분이 보인다. layer mask로 가려주자.

원을 Ctrl+C 로 복사 -> 띠를 선택해서 Transparent 더블 클릭

uncheck clip

paste in front

set color to black

원이 mask가 되려면 앞으로 나와야 한다. clip 을 check 했다가 다시 uncheck 해보자

knife 선택해서 원을 반 가른다.

선택툴로 원을 선택하면 2개로 나뉘어져 있다. 아래를 선택해 지운다.

좌측 그림을 클릭해 mask 선택모드를 해제한다.

완성

일러스트 - 약도 그리기

kakaroo — Tue, 28 Jun 2022 22:40:06 +0900

1. 따라 그릴 지도를 캡쳐해서 배경으로 놓고 따라 큰 길만 그린다.

2. 그린 길은 그룹으로 묶는다. Ctrl + G

3. 배경을 사각형으로 그린뒤, 뒤로 보낸다( Ctrl + '[' )

4. 옆으로 옮겨준 뒤, stroke를 면으로 바꿔준다. (object > expand)

공원 이름을 넣어 본다.

5. 명함 크기만한 네모 상자를 그린다 위에 올려준다.

6. 전체 선택한 뒤, Clipping Mask를 해 준다. (Ctrl + 7)

출처 : https://www.youtube.com/watch?v=I8L82pTZiPM

일러스트 - 무지개 그리기

kakaroo — Tue, 28 Jun 2022 22:00:11 +0900

1. Elipse Tool 로 원 그리기 - 면 색 x, 선 stroke 5 pt

2. 원하는 수치만큼 오브젝트를 복사

> object를 선택한 다음 > object > path > offset path

1에서 지정한 stroke 굵기만큼 offset 을 주면 그 offset 크기만큼의 object가 그려진다.

3. offset path는 무지개 수 만큼 사용해야 하기 때문에 shortcuts에 등록한다.

Edit > Keyboard Shortcuts > Menu Commands > .....

4. PathFinder를 이용해 무지개 만들기

가운데 line 긋기 (Line segment Tool)

pathfinder는 면으로 된 object를 나눌 수 있기 때문에 위에서 그린 무지개 object 만 선택해서 면으로 변경한다.

> object > expand

원을 클릭해 보면 면에 색상이 들어간 걸 확인할 수 있다.

전체 object 선택 > pathfinder > divide

direct selection tool 선택해서 자를 부분을 선택 > delete

5. 구름 그리기

원 3개를 그린다.

원 밑에 선을 그어 준다.

shape builder tool 을 이용해 채워 준다

전체 오브젝트를 선택한 다음, 먼저 색을 채울 면을 선택해서 누른채로 드래그 한다.

완성!!

출처 : https://www.youtube.com/watch?v=lmF3AJuXYOA