개발로그

군 장병 AI·SW 역량강화 교육을 마치며

clohoon — Sat, 3 Feb 2024 09:57:24 +0900

군 장병 AI·SW 역량강화 교육을 모두 수료했다. 교육기간 동안 자바스크립트를 이용해 프로그래밍 언어가 웹에서 어떻게 동작하는지를 배웠다. 그리고 마지막으로는 리액트와 파이어베이스를 이용해 다양한 기능을 가진 채팅 애플리케이션을 구현하여 배포하였다. 교육도 끝났으니 이번 글에서는 나의 목표와 앞으로의 계획에 대해 간단히 적어보려고 한다.

데이터 엔지니어

나는 빅데이터 분야를 공부해보고 싶어서 산업경영공학부에 들어왔다. 진로를 정하기 위해 데이터와 관련된 여러 직무들을 조사해 보았고, 그중 하나인 데이터 엔지니어에 관심을 가지게 됐다.

데이터 엔지니어는 데이터를 수집, 가공, 적재하여 데이터가 흐르는 파이프라인을 설계 및 구축하는 직무로, 분석가/기획자의 니즈에 부합하는 데이터를 제공하는 것이 목표이다. 여러 직무들 중 데이터 엔지니어를 선택한 이유는 내가 데이터 분석뿐만 아니라 소프트웨어 개발에도 흥미를 가지고 있기 때문이다. 데이터 엔지니어의 핵심 업무인 ETL은 대부분 서버에서 이루어지기 때문에 백엔드 엔지니어의 역량과 상당 부분이 일치한다고 한다.

카카오페이증권 채용 공고

여러 기업들의 채용 공고를 살펴보면 데이터 엔지니어로서 갖추어야 할 기술 스택들을 확인할 수 있다. 대략적으로는 다음과 같다.

데이터 수집 (Apache Kafka, Fluntd, Embulk, Logstash, Redis, Pub/Sub, Kinesis)
데이터 저장 (HDFS, json, Parquet, AWS S3 or GCP Storage, RDB, NoSQL, Amazon Redshift, Google BigQuery)
데이터 처리 (Apache Hadoop, Apache Spark, Apache Hive, SQL)
프로그래밍 언어 (Java, Python, Scala)
리눅스
클라우드 서비스 (AWS, GCP, Azure)
Dashboard (Metabase, Superset, Zeppelin, Redash, Tableau)
Task Management Tool (Luigi, Airflow)
Docker

앞으로의 계획

전역 전까지는 혼자 공부하기 쉬운 백엔드 개발 위주로 공부할 생각이다. 데이터 엔지니어링 관련 도구들은 대부분 자바 기반으로 작성되어 있기 때문에 Java(Spring)를 집중적으로 공부하려고 한다. 그 외에도 데이터베이스, 알고리즘, 머신러닝 등을 추가적으로 공부하여 데이터 엔지니어가 되기 위한 기본기를 갖추겠다.

GEC_RlKijUXxjA_sat-aug-05-2023-09-56-04_kor.pdf

0.44MB

GEC_OPbcINQrKZ_fri-aug-11-2023-13-42-09_kor.pdf

0.42MB

GEC_csbxpMpQWS_tue-oct-10-2023-18-56-44_kor.pdf

0.42MB

GEC_FAlmKdimHj_wed-jan-03-2024-14-16-13_kor.pdf

0.42MB

React와 Firebase를 이용한 채팅 앱 만들기 - (2)

clohoon — Thu, 1 Feb 2024 16:43:51 +0900

5. DM 채팅

Side Panel Direct Message UI

<div>
    <span style={{ display: 'flex', alignItems: 'center' }}>
        <FaRegSmile style={{ marginRight: 3 }}/> DIRECT MESSAGES(1)
    </span>

    <ul style={{ listStyleType: 'none', padding: 0 }}>
        {this.renderDirectMessages()}
    </ul>
</div>

user 목록 가져오기

접속 중인 유저 파란색으로 표시

addUsersListeners = (currentUserId) => {
    const {usersRef} = this.state;
    let usersArray = [];
    usersRef.on("child_added", DataSnapshot => {
        if(currentUserId !== DataSnapshot.key) {
            let user = DataSnapshot.val()
            user["uid"] = DataSnapshot.key
            user["status"] = "offline";
            usersArray.push(user)
            this.setState({users: usersArray})
        }
    })
}

해당 유저와 대화 할 방 아이디 생성

나의 아이디와 상대방의 아이디를 이용한다.

상대가 방을 만들든 내가 만들든 아이디가 동일해야 하므로 userId < currentUserId 로직 사용

getChatRoomId = (userId) => {
    const currentUserId = this.props.user.uid

    return userId > currentUserId
        ? `${userID}/${currentUserId}`
        : `${currentUserId}/${userId}`
}

currentChatRoom을 클릭한 방으로 변경

changeChatRoom = (user) => {
    const chatRoomId = this.getChatRoomId(user.uid);
    const chatRoomData  = {
        id: chatRoomId,
        name: user.name
    }
    this.props.dispatch(setCurrentChatRoom(chatRoomData))
}

클릭한 방 private 방 설정

this.props.dispatch(setPrivateChatRoom(true));

클릭한 방 Active 방으로 표시

this.setActiveChatRoom(user.uid);

private, public icons

{isPrivateChatRoom ? 
    <FaLock style={{marginBottom: '10px'}} /> 
    : 
    <FaLockOpen style={{marginBottom: '10px'}} />
}

파일 올릴 때 prviate, public 구분

const filePath = '${getPath()}/${file.name}';

6. 알림, 즐겨찾기 방

Notification

알림 기능 : 여러 채팅 방 중 내가 현재 있는 채팅방이 아닌 곳에서 다른 사람이 채팅하면 하나의 쪽지당 하나의 count가 올라가는 알림

https://react-bootstrap.netlify.app/docs/components/badge/

채팅룸 정보를 가져올 때 알림 정보 리스너도 추가

// chatRooms.js AddChatRoomsListeners 메소드
this.addNotificationListener(DataSnapshot.key);

ChatRoom Collection에서 해당 ChatRoom Id에 해당하는 정보를 가져오기

목표는 방 하나 하나에 맞는 알림 정보를 notifications state에 넣어주는 것

이미 notifications state 안에 알림 정보가 들어있는 채팅방과 그렇지 않은 채팅방을 나누어준다.

if(index === -1) {
    notifications.push({
        id: chatRoomId,
        total: DataSnapshot.numChildren(),
        lastKnownTotal: DataSnapshot.numChildren(),
        count: 0
    })
}

id : 채팅방 아이디

total : 해당 채팅방 전체 메시지 개수

lastKnownTotal : 이전에 확인한 전체 메시지 개수

count : 알림으로 사용될 숫자

DataSnapshot.numChildren() : 전체 children 개수 = 전체 메시지 개수

else {
    // 상대방이 메세지를 보낸 채팅방에 있지 않을 때
    if(chatRoomId !== currentChatRoomId) {
        lastTotal = notifications[index].lastKnownTotal
        if(DataSnapshot.numChildren() - lastTotal > 0) {
            notifications[index].count = DataSnapshot.numChildren() - lastTotal;
        }
    }

    notifications[index].total = DataSnapshot.numChildren();
}

notification 클릭해서 없애주기

this.clearNotifications();

messageRef 정리해주기

componentWillUnmount() {
    this.state.chatRoomsRef.off();

    this.state.chatRooms.forEach(chatRoom => {
        this.state.messagseRef.child(chatRoom.id).off();
    });
}

즐겨찾기 방

Favorite 클릭 버튼 UI

Favorite 버튼 클릭 시 is Not Favorited면 user collection에서 추가, 아니면 제거

const handleFavorite = () => {
    if(isFavorited) {
        usersRef
            .child(`${user.uid}/favorited`)
            .child(chatRoom.id)
            .remove(err => {
                if(err !== null) {
                    console.error(err);
                }
            })
        setIsFavorited(prev => !prev);
    } else {
        usersRef
            .child(`${user.uid}/favorited`).update({
                [chatRoom.id]: {
                    name: chatRoom.name,
                    description: chatRoom.description,
                    createdBy: {
                        name: chatRoom.createdBy.name,
                        image: chatRoom.createdBy.image
                    }
                }
            })
        setIsFavorited(prev => !prev);
    }
}

DB : 클릭한 유저 id -> favorited -> 채팅방 id -> createdBy(image, name), description, name

새로고침해도 Favorited가 남아있게 하기

once() : it triggers once and then does not trigger again

const addFavoriteListener = (chatRoomId, userId) => {
    usersRef
        .child(userId)
        .child("favorited")
        .once("value")
        .then(data => {
            if(data.val() !== null) {
                const chatRoomIds = Object.keys(data.val());
                const isAlreadyFavorited = chatRoomIds.includes(chatRoomId)
                setIsFavorited(isAlreadyFavorited)
            }
        })
}

Favorite 리스트 리스너 추가하기

addListeners = (userId) => {
    const {usersRef} = this.state;

    usersRef
        .child(userId)
        .child("favorited")
        .on("child_added", DataSnapshot => {
            const favoritedChatRoom = { id: DataSnapshot.key, ...DataSnapshot.val() }
            this.setState({
                favoritedChatRooms: [...this.state.favoritedChatRooms, favoritedChatRoom]
            })
        })

    usersRef
        .child(userId)
        .child("favorited")
        .on("child_removed", DataSnapshot => {
            const chatRoomToRemove = { id: DataSnapshot.key, ...DataSnapshot.val() }
            const filteredChatRooms = this.state.favoritedChatRooms.filter(chatRoom => {
                return chatRoom.id !== chatRoomToRemove.id;
            })
            this.setState({favoritedChatRooms: filteredChatRooms})
        })
}

Favorited를 위한 리스너 제거하기

componentWillUnmount() {
    if(this.props.user) {
        this.removeListener(this.props.user.uid);
    }
}

removeListener = (userId) => {
    this.state.usersRef.child(`${userId}/favorited`).off();
}

7. 채팅방 정보

각 사람당 글 쓴 데이터 가져오기

객체 userPosts에는 key로 유저 이름이, value로 count, image가 들어간다.

userPostsCount = (messages) => {
    let userPosts = messages.reduce((acc, message) => {
        if(message.user.name in acc) {
            acc[message.user.name].count += 1;
        } else {
            acc[message.user.name] = {
                image: message.user.image,
                count: 1
            }
        }
        return acc;
    }, {})
    this.props.dispatch(setUserPosts(userPosts))
}

userPosts 데이터 count 큰 순서대로 보여주기

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/entries

const renderUserPosts = (userPosts) =>
    Object.entries(userPosts)
        .sort((a,b) => b[1].count - a[1].count)
        .map(([key, val], i) => (
            <Media key={i}>
                <img
                    style={{borderRadius: 25}}
                    width={48}
                    height={48}
                    className="mr-3"
                    src={val.image}
                    alt={val.name}
                />
                <Media.Body>
                    <h6>{key}</h6>
                    <p>
                        {val.count} 개
                    </p>
                </Media.Body>
            </Media>
        ))

8. Typing

Typing 시작 시 Typing 정보 데이터베이스에 저장

const handleKeyDown = () => {
    if(event.ctrlKey && event.keyCode === 13) {
        handleSubmit();
    }

    if(content) {
        typingRef.child(chatRoom.id).child(user.uid).set(user.displayName)
    } else {
        typingRef.child(chatRoom.id).child(user.uid).remove();
    }
}

채팅 보내면 typing 정보 데이터베이스에서 지우기

typingRef.child(chatRoom.id).child(user.uid).remove();

리스너를 이용해 데이터베이스에서 Typing 정보를 가져오기

가져올 때 나의 Typing은 제외

addTypingListeners = (chatRoomId) => {
    let typingUsers= [];
    this.state.typingRef.child(chatRoomId).on("child_added",
        DataSnapshot => {
            if(DataSnapshot.key !== this.props.user.uid) {
                typingUsers = typingUsers.concat({
                    id: DataSnapshot.key,
                    name: DataSnapshot.val()
                });
                this.setState({ typingUsers });
            }
        })
}

DataSnapshot.key : 타이핑하는 유저, this.props.user.uid : 현재 로그인한 유저

데이터베이스에서 Typing 정보 제거되면 State에서도 지우기

this.state.typingRef.child(chatRoomId).on("child_removed",
    DataSnapshot => {
        const index = typingUsers.findIndex(user => user.id === DataSnapshot.key);
        if(index !== -1) {
            typingUsers = typingUsers.filter(user => user.id !== DataSnapshot.key);
            this.setState({ typingUsers });
        }
    }
)

Typing UI 추가하기

renderTypingUsers = (typingUsers) => 
    typingUsers.length > 0 &&
    typingUsers.map(user => (
        <span>{user.name}님이 채칭을 입력하고 있습니다...</span>
    ))

Typing 리스너 제거하기

addToListenerLists = (id, ref, event) => {
    // 이미 등록된 리스너인지 확인
    const index = this.state.listenerLists.findIndex(listener => {
        return (
            listener.id === id &&
            listener.ref === ref &&
            listener.event === event
        )

        if(index === -1) {
            const newListener = {id, ref, event}
            this.setState({
                listenerLists: this.state.listenerLists.concat(newListener)
            })
        }
    })
}

componentWillUnmount() {
    this.state.messagesRef.off();
    this.removeListeners(this.state.listenerLists);
}

9. Auto Scroll & Skeleton

메시지 보낼 때 자동으로 스크롤 내리기

잡은 자리 계속 참조할 수 있게 -> Refs를 생성 React.createRef() -> 생성한 Refs를 ref attribute를 통해 넣어주기

-> 메시지를 보낼 때마다 참조하고 있는 곳으로 스크롤 내려주기

<div ref = {node => (this.messageEndRef = node)}/>

componentDidUpdate() {
    if(this.messageEndRef) {
        this.messageEndRef.scrollIntoView({ behavior : 'smooth' })
    }
}

메시지 로딩 중 스켈레톤 처리

스켈레톤 10개 만들기 -> 컴포넌트 10개 넣어도 되지만 Array Constructor를 이용한다.

renderMessageSkeleton = (loading) =>
    loading && (
        <>
            {[...Array(10)].map((v,i) => (
                <Skeleton key={i} />
            ))}
        </>
    )

ctrl + 엔터키로 메시지 보내기

if(event.ctrlKey && event.keyCode === 13) {
	handleSubmit();
}

10. 데이터베이스 규칙, 스토리지 규칙, 배포

Firebase Storage Rule

악성 유저들로부터 파일을 보호하기 위해 사용

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /message {
      allow read : if request.auth != null;
      allow write : request.auth != null &&
      request.resource.contentType.matches('image/.*) &&
      request.resource.size < 10*1024*1024;
    }
    match /user_image {
      match / {userId} {
        allow read : if request.auth != null;
        allow write : request.auth != null &&
        request.auth.uid == userId &&
        request.resource.contentType.matches('image/.*') &&
        request.resource.size < 10*1024*1024;
      }
    }
  }
}

/message 경로 해당 파일들, 인증된 유저 read, write 가능, 이미지 파일만 업로드 가능, 파일 사이즈 10mb 이하 가능

Firebase Database Rule

{
    "rules" : {
        "chatRooms" : {
            ".read" : "auth != null",
            "$chatRoomId" : {
                ".write" : "auth != null",
                ".validate" : "newData.hasChildren(['id', 'name', 'createdBy', 'description'])",
                "id" : {
                    ".validate" : "newData.val() === $chatRoomId"
                },
                "name" : {
                    ".validate" : "newData.val().length > 0"
                },
                "description" : {
                    ".validate" : "newData.val().length > 0"
                }
            }
        },
        "messages" : {
            ".read" : "auth != null",
            ".write" : "auth != null",
            "content" : {
                ".validate" : "newData.val().length > 0"
            },
            "image" : {
                ".validate" : "newData.val().length > 0"
            },
            "user" : {
                ".validate" : "newData.hasChildren(['id', 'image', 'name'])"
            }
        },
        "presence" : {
            ".read" : "auth != null",
            ".write" : "auth != null"
        },
        "typing" : {
            ".read" : "auth != null",
            ".write" : "auth != null"
        },
        "users" : {
            ".read" : "auth != null",
            "$uid" : {
                "write" : "auth != null && auth.uid === $uid",
                ".validate" : "newData.hasChildren(['name', 'image'])",
                "name" : {
                	".validate" : "newData.val().length > 0"
            	},
            	"image" : {
                	".validate" : "newData.val().length > 0"
            	}
            }
        }
    }
}

애플리케이션 배포

1. firebase tool 설치 : npm install firebase-tools -g

2. firebase login -> social Oauth 로그인

3. firebase 프로젝트 시작 : firebase init

4. Database, Storage 선택

5. 배포를 위한 빌드 : npm run build

6. firebase.json

"hosting" : {
	"public" : "./build"
}

7. 빌드 : firebase deploy

8. 코드 수정하면 5번부터 다시

Storage

> message

> user_image

데이터베이스

> chatRooms

> 채팅방 아이디

> createdBy : image, name

> description

> id

> name

> messages

> 채팅방 아이디

> 메세지

> content / image

> timestamp

> user : id, image, name

> presence

> typing

> users

> 유저 아이디

> image

> name

React와 Firebase를 이용한 채팅 앱 만들기 - (1)

clohoon — Mon, 15 Jan 2024 23:46:23 +0900

전체 코드 : GitHub

0. 개념

Redux란?

Redux is a predictable state container for JavaScript apps.

Redux 데이터 Flow

Action : a plain object describing what happened

Reducer : a function describing how the application's state changes

Store : the object that brings them together

Reducer는 action이 store를 어떻게 업데이트 하는지 기술하는 함수이다.

Reducer는 항상 state와 action을 받아 state를 return 해줘야 한다.

Dispatch를 사용하여 store의 reducer에 action을 전달한다.

Action은 객체 형식이어야 되는데 언제나 객체 형식으로 된 action을 받지 않음.

-> redux-promise / redux-thunk : teaches dispatch how to accept promises / functions

useSelector

useSelector는 React의 리덕스 스토어 관련 Hook 중 하나로, 스토어의 상태값을 반환해준다.

useSelector를 이용한 함수에서 리덕스 스토어의 상태값이 바뀐다면 바뀐 스토어의 상태값을 다시 가져와 컴포넌트를 렌더링시킨다.

useSelector는 함수형 컴포넌트에서만 사용 가능하고 클래스형 컴포넌트는 connect를 사용해야 한다.

useEffect

기본 형태 : useEffect( function, deps )

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

React Router DOM

React로 생성된 SPA 내부에서 페이지 이동이 가능하도록 만들어주는 라이브러리이다.

- BrowserRouter : history API를 이용해 history 객체를 생성, 라우팅을 진행할 컴포넌트 상위에 BrowserRouter 컴포넌트를 생성하고 감싸주어야 한다.

- Route : 현재 브라우저의 location 상태에 따라 다른 element를 렌더링한다.

- Routes : location 변경 시 하위에 있는 모든 Route를 조회해 현재 location과 맞는 Route를 찾아준다.

Firebase

인증, 데이터베이스, 스토리지, 푸시 알림, 배포 등등 어플리케이션을 만들 때 필요한 부분들을 자동으로 만들어주는 플랫폼이다.

Firebase에서 사용하는 데이터베이스는 NoSQL 기반의 데이터베이스로, RTSP라는 Real Time Stream Protocol 방식을 지원한다.

1. 기본 구조

src

> assets/images : 이미지, CSS, JS 파일들 보관

> commons

components : 여러 페이지에서 쓰이는 것들

Modals

Tooltips

types : typescript 사용시

> components

Chatpage

Loginpage

Registerpage

> redux

actions

reducers

> App.css

> App.js : Routing 관련

> firebase.js

노드 설치

react-firebase-chat-app 폴더 생성

리액트 설치 : npx create-react-app ./

ES7 React/Redux/GraphQL/React-Native snippets 설치 (rfce 사용)

https://reactrouter.com/en/main/start/overview

npm install react-router-dom --save

리덕스 설치 : npm install redux react-redux redux-promise redux-thunk --save

Add Firebase to your web app -> SDK 코드 이용

npm install firebase --save

src 폴더 안에 firebase.js 생성

import "firebase/auth";
import "firebase/database";
import "firebase/storage";

2. 인증 처리

CSS 프레임워크로 React Bootstrap 사용

https://react-bootstrap.github.io/docs/getting-started/introduction

npm install react-bootstrap bootstrap --save

import 'bootstrap/dist/css/bootstrap.min.css';

https://react-icons.github.io/react-icons/

npm install react-icons --save

https://codesandbox.io/p/sandbox/react-hook-form-get-started-kw7z2q2n15?file=%2Fsrc%2Findex.js

css 코드 사용 : RegisterPage에만 적용하기 위해서 .auth-wrapper 추가

react-hook-form을 이용한 회원 가입 유효성 체크

npm install react-hook-form --save

특정 DOM 선택하기

JS : getElementById 같은 DOM Selector 함수 이용해서 DOM 선택

React : ref 이용해서 DOM을 선택

클래스 컴포넌트 -> React.createRef

함수형 컴포넌트 -> useRef

const password = useRef();
password.current = watch("password");

<input 
	name="password_confirm" 
	type="password"
	ref={register({ 
		required: true, 
		validate: (value) =>
			value === password.current
	})}
/>

firebase에서 이메일로 유저 생성 + 생성 중 버튼을 누르지 못하게 막기

const onSubmit = async (data) => {
    try{
        setLoading(true)
        let createdUser = await firebase
            .auth()
            .createUserWithEmailAndPassword(data.email, data.password)
        console.log('createdUser', createdUser)
        setLoading(false)
    } catch(error) {
        setErrorFromSubmit(error.message)
        setLoading(false)
        setTimeout(() => {
            setErrorFromSubmit("")
        }, 5000);
    }
}

<input type="submit" disabled={loading} />

생성된 유저에 정보 추가하기

updateprofile 메소드를 이용한다.

MD5 : 유니크한 값을 가지려고 사용되는 모듈

npm install md5 --save

await createdUser.user.updateProfile({
    displayname: data.name,
    photoURL: `http://gravatar.com/avatar/${md5(createdUser.user.email)}?d=identicon`
})

생성한 유저 데이터베이스에 저장

await firebase.database().ref("users").child(createdUser.user.uid).set({
    name: createdUser.user.displayName,
    image: createdUser.user.photoURL
})

로그인 페이지 만들기

await firebase.auth().signInWithEmailAndPassword(data.email, data.password);

로그인 한 유저는 Chatting Page만 이용 가능 -> Login Page/Register Page 접근 시 Chatting Page로 이동

useEffect(() => {
    firebase.auth().onAuthStateChanged(user => {
        console.log('user', user)
        // 로그인이 된 상태
        if(user) {
            history.push("/");
        } else {
            history.push("/login");
        }
    })
})

Class Component는 withRouter, Functional Component는 useHistory

BrowserRouter를 index.js에서 감싸주기

Redux 스토어에 로그인 유저 정보 저장

if(user) {
    history.push("/");
    dispatch(setUser(user));
} else {
    history.push("/login");
}

3. 채팅 페이지 기본 구조

구조

ChatPage

> MainPanel

> MainPanel.js (클래스 컴포넌트, rce)

> Message.js

> MessageForm.js

> MessageHeader.js

> SidePanel

> ChatRooms.js

> DirectMessages.js

> Favorited.js

> Sidepanel.js (함수형 컴포넌트, rfce)

> UserPanel.js

> ChatPage.js

UserPanel Logo

import { IoIosChatboxes } from 'react-icons/io';

<h3 style = {{ color : 'white' }}>
	<IoIosChatboxes/>
	{" "} Chat App
</h3>

User Dropdown

import Dropdown from 'react-bootstrap/Dropdown';

import Image from 'react-bootstrap/Image';

유저 정보 가져오기

const user = useSelector(state => state.user.currentUser)

로그아웃 구현

const handleLogout = () => {
	firebase.auth().signOut();
}

로그아웃 버튼 누르면 App.js에서 user 정보가 없어서 history.push("/login"); 실행

export function clearUser() {
	return {
		type: CLEAR_USER
	}
}

스토어에 있는 유저 정보도 지워주자.

프로필 이미지 업로드 패널

const handleOpenImageRef = () => {
	inputOpenImageRef.current.click();
}

<input
	type = "file"
	accept = "image/jpeg, image/png"
	ref = {inputOpenImageRef}
	style = {{display : "none"}}
	onChange = {handleUploadImage}
/>

firebase는 파일은 Storage에, 파일에 대한 정보는 DB에 저장한다.

Firebase storage 이미지 업로드

Firebase storage -> location : asia-northeast1 (가까운 곳)

mime.lookup(path) : Lookup the content type associated with a file

npm install mime-types --save

const file = event.target.files[0];

if(!file) return;
const metadata = {contentType : mime.lookup(file.name)};

let uploadTaskSnapshot = await firebase.storage().ref()
	.child(`user_image/${user.uid}`)
	.put(file, metadata)
    
let downloadURL = await uploadTaskSnapshot.ref.getDownloadURL();

metadata 예시 : {contentType: "image/png"}

Auth 서비스 프로필 수정

firebase.auth().currentUser.updateProfile({
	photoURL : downloadURL
})

Redux 유저 이미지 교체

dispatch(setPhotoURL(downloadURL))

데이터베이스에 이미지 URL 저장

firebase.database.ref("users")
	.child(user.uid)
	.update({image : downloadURL})

채팅 룸 리스트 UI

react bootstrap - modals - live demo 이용

https://react-bootstrap.netlify.app/docs/components/modal/

react bootstrap - forms 이용

https://react-bootstrap.netlify.app/docs/forms/overview/

ChatRoom 생성하기

handleSubmit = (e) => {
	e.preventDefault();
	const {name, description} = this.state;
   
	if(this.isFormValid(name, description)) {
		this.addChatRoom();
	}
}

push()로 auto-generated key 생성

Add 된 데이터 Listener로 받기

AddChatRoomsListeners = () => {
	let chatRoomsArray = [];
	this.state.chatRoomsRef.on("child_added", DataSnapshot => {
		chatRoomsArray.push(DataSnapshot.val());
		this.setState({chatRooms : chatRoomsArray});
	})
}

chatRooms 데이터 화면에 보여주기

Set current chat room

chatroom 클릭 시 해당 데이터 가져오기

가져온 current chat room 데이터 리덕스 스토어에 넣어주기

changeChatRoom = (room) => {
    this.props.dispatch(setCurrentChatRoom(room));
}

첫 load 시 첫 번째 chat room을 current chat room으로

setFirstChatRoom = () => {
    const firstChatRoom = this.state.chatRooms[0];
    if(this.state.firstLoad && this.state.chatRooms.length > 0) {
        this.props.dispatch(setCurrentChatRoom(firstChatRoom));
    }
    this.setState({firstLoad : false});
}

active chat room은 다른 색상 주기

style={{ 
    backgroundColor: room.id === this.state.activeChatRoomId &&
        '#ffffff45'
}}

컴포넌트 제거 시 Listener도 제거

componentWillUnmount() {
	this.state.chatRooms.off();
}

4. 공개방 채팅

메시지 Header 부분 UI

react-bootstrap auto-layout columns, input group, accordion 사용

https://react-bootstrap.netlify.app/docs/layout/grid

https://react-bootstrap.netlify.app/docs/forms/input-group/

https://react-bootstrap.netlify.app/docs/components/accordion/

메시지 Body, Form UI

react-bootstrap Form controls : example, progress bars 사용

https://react-bootstrap.netlify.app/docs/forms/form-control/

https://react-bootstrap.netlify.app/docs/components/progress/

메세지 데이터 하나를 데이터 베이스에 넣기

DB : messages -> 채팅방 아이디 -> 채팅 메시지 아이디 -> content, timestamp, user

const handleSubmit = async () => {
    if(!content) {
        setErrors(prev=>prev.concat("Type contents first"))
        return;
    }
    setLoading(true);

    // firebase에 메시지 저장
    try {
        await messagesRef.child(chatRoom.id).push().set(createMessage())
        setLoading(false);
        setContent("");
        setErrors([]);
    } catch(error) {
        setErrors(pre => pre.concat(error.message))
        setLoading(false);
        setTimeout(() => {
            setErrors([]);
        }, 5000);
    }
}

메시지 데이터 실시간으로 가져오기

addMessagesListeners = (chatRoomId) => {
    let messagesArray = [];
    this.state.messageRef.child(chatRoomId).on("child_added", DataSnapshot => {
        messagesArray.push(DataSnapshot.val());
        this.setState({
            messages: messagesArray,
            messagesLoading: false
        })
    })
}

메시지 보여주기

renderMessages = (messages) => {
    messages.length > 0 &&
    messages.map(message => (
        <Message 
            key={message.timestamp}	
            message={message}
            user={this.props.user}
        />
    ))
}

메시지 컴포넌트 만들기

media heading 사용 : https://react-bootstrap-v4.netlify.app/layout/media/

npm install moment --save

moment(timestamp).fromNow() <- ~hours ago 로 바꾸어줌

이미지 파일 저장

const handleUploadImage = async (event) => {
    const file = event.target.files[0];

    const filePath = '/message/public/${file.name}';
    const metadata = { contentType : mime.lookup(file.name)};

    try {
        await storageRef.child(filePath).put(file, metadata)
    } catch(error) {
        alert(error)
    }
}

저장 퍼센티지

let uploadTask = storageRef.child(filePath).put(file, metadata)

// 퍼센티지 구하기
uploadTask.on("state_changed", UploadTaskSnapshot => {
    const percentage = Math.round(
        (UploadTaskSnapshot.bytesTransferred / UploadTaskSnapshot.totalBytes)*100
    )
    setpercentage(percentage)
}),
err => {
    console.error(err);
    setLoading(false);
},
() => {
    // 저장이 다 된 후 파일 메시지 전송(DB에 저장)
    // 저장된 파일을 다운로드 받을 수 있는 URL 가져오기
    uploadTask.snapshot.ref.getDownloadURL()
    .then(downloadURL => {
        messagesRef.child(chatRoom.id).push().set(createMessage(downloadURL))
        setLoading(false);
    })
}

메시지 검색

정규 표현식 만들기, match() 사용 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Guide/Regular_expressions

g modifier : global, i modifier : insensitive (대소문자 구분 X)

Array.reduce() : 배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 하나의 결과값을 반환한다

handleSearchMessages = () => {
    const chatRoomMessages = [...this.state.messages];
    const regex = new RegExp(this.state.searchTerm, "gi");
    const searchResults = chatRoomMessages.reduce((acc, message) => {
        if(
            (message.content && message.content.match(regex)) ||
            message.user.name.match(regex)
        ) {
            acc.push(message)
        }
        return acc;
    }, [])
    this.setState({ searchResults })
}

크롬 확장 앱 만들기

clohoon — Fri, 1 Dec 2023 23:56:46 +0900

직접 링크를 입력해 접속한 사이트들 중 가장 많이 접속한 10개의 사이트들을 나열해주는 Chrome Extension App을 만들어보자!

Chrome Extension 구성 요소

Chrome Extension App을 만드는 데 필요한 세 가지 요소는 manifest.json, Icon, HTML/CSS/JS이다.

manifest.json

{
  "name": "Typed URL History",
  "version": "1.2",
  "description": "Reads your history, and shows the top ten pages you go to by typing the URL.",
  "permissions": [
    "history"
  ],
  "browser_action": {
    "default_popup": "typedUrls.html",
    "default_icon": "clock.png"
  },
  "manifest_version": 2 
}

Icon

https://www.shopify.com/tools/logo-maker

FREE Logo Maker - Create a Logo in Seconds - Shopify (2023)

Free Logo MakerCreate professional logos in secondsIntroducing Hatchful - the custom logo maker.Create a Logo NowDesign a logo from hundreds of templatesHow to make logo in 5 simple stepsBrowse and customize templates:Explore the logo templates and persona

www.shopify.com

무료 로고 이미지를 생성할 수 있다. clock.png를 생성한다.

typedUrls.html

<!DOCTYPE HTML>
<html>
  <head>
    <title>Recently Typed URLs</title>
    <style>
      body {min-width: 250px;}
    </style>
    <script src='typedUrls.js'></script>
  </head>

  <body>
    <h2>Recently Typed URLs:</h2>
    <div id="typedUrl_div"></div>
  </body>
</html>

typedUrls.js

// 클릭 시 해당 url을 새 탭에서 열어주는 함수
function onAnchorClick(event) {
  chrome.tabs.create({
    selected: true,
    url: event.srcElement.href
  });
  return false;
}

// Top 10 Visitied url 배열이 주어졌을 때 각각의 url들을 popup.html에 띄워주기
function buildPopupDom(divName, data) {
  var popupDiv = document.getElementById(divName);

  var ul = document.createElement('ul');
  popupDiv.appendChild(ul);

  for (var i = 0, ie = data.length; i < ie; ++i) {
    var a = document.createElement('a');
    a.href = data[i];
    a.appendChild(document.createTextNode(data[i]));
    a.addEventListener('click', onAnchorClick);

    var li = document.createElement('li');
    li.appendChild(a);
    ul.appendChild(li);
  }
}

// 가장 핵심이 되는 함수. history를 검색하여 top 10 url을 찾아내어 
// 위에서 정의한 함수로 popup.html에 해당 링크들을 띄워주는 함수
function buildTypedUrlList(divName) {
  var microsecondsPerWeek = 1000 * 60 * 60 * 24 * 7;
  var oneWeekAgo = (new Date).getTime() - microsecondsPerWeek;

  var numRequestsOutstanding = 0;

  chrome.history.search({
      'text': '',
      'startTime': oneWeekAgo
    },
    function(historyItems) {
      for (var i = 0; i < historyItems.length; ++i) {
        var url = historyItems[i].url;
        
        var processVisitsWithUrl = function(url) {
          return function(visitItems) {
            processVisits(url, visitItems);
          };
        };

        chrome.history.getVisits({url: url}, processVisitsWithUrl(url));
        numRequestsOutstanding++;
      }
      if (!numRequestsOutstanding) {
        onAllVisitsProcessed();
      }
    });

  var urlToCount = {};

  var processVisits = function(url, visitItems) {
    for (var i = 0, ie = visitItems.length; i < ie; ++i) {
      if (visitItems[i].transition != 'typed') {
        continue;
      }
      if (!urlToCount[url]) {
        urlToCount[url] = 0;
      }
      urlToCount[url]++;
    }

    if (!--numRequestsOutstanding) {
      onAllVisitsProcessed();
    }
  };

  var onAllVisitsProcessed = function() {
    urlArray = [];
    for (var url in urlToCount) {
      urlArray.push(url);
    }

    urlArray.sort(function(a, b) {
      return urlToCount[b] - urlToCount[a];
    });

    buildPopupDom(divName, urlArray.slice(0, 10));
  };
}

document.addEventListener('DOMContentLoaded', function () {
  buildTypedUrlList("typedUrl_div");
});

Chrome Extension 등록

chrome://extensions 접속 -> 개발자 모드 활성화 -> 압축해제된 확장 프로그램을 로드합니다. -> 폴더 선택

참고자료

https://developer.chrome.com/docs/extensions/reference/tabs/#method-create

https://developer.chrome.com/docs/extensions/reference/history/

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Redis에 대해 알아보자!

clohoon — Sun, 22 Oct 2023 17:08:51 +0900

Redis란?

Redis는 Remote Dictionary Server의 약자로서, 키-값 구조의 비정형 데이터를 저장하고 관리하기 위한 오픈 소스 기반의 비관계형 데이터베이스 관리 시스템이다. 메모리 기반의 저장소이기 때문에 필요한 정보를 빠르게 저장하고 가져올 수 있는 실시간 서비스에 적합한 저장소이다. 따라서 전체 데이터를 영구히 저장하기보다는, 캐시처럼 휘발성 데이터를 저장하는 데 많이 사용된다. 데이터를 지속적으로 유지하기 위해 모든 작업을 로그에 기록해서 디스크에 저장한 후, 시스템을 구동할 때 로그를 기반으로 데이터를 다시 메모리에 올린다.

Redis 사용 방법

npm install redis : Redis 모듈 설치

npm install hiredis redis : Non-Blocking의 빠른 모듈 설치

sudo apt-get install redis-server : Redis 서버 설치

Redis 서버와 연결하기

var redis = require('redis');
var client = redis.createClient();           
client.on('error', function (err) {
    console.log('Error ' + err);
});

데이터 조작하기(키/값)

set은 일반적인 key, value 한 쌍을 저장한다.

client.set('String Key', 'String Value', redis.print);  // redis.print : 수행결과 출력 혹은 오류 출력. redis.print는 없어도 상관없음. 없으면 결과 출력은 되지 않고 값만 저장
client.get('String Key', function(err, value){
    if(err) throw err;
    console.log(value);
});

코드를 실행시키기 전에 redis-server 코드를 이용해 레디스 서버를 실행시켜준 후 코드를 실행한다.

Publisher / Subscriber

Publisher/Subscriber은 메시지를 특정 수신자에게 직접 발송하지 못하는 곳에서 사용되는 모델이다. 메시지를 발송하고 채널에서 구독하는 명령을 내린다. Redis 모듈도 하나의 클라이언트가 메시지를 발생시켜 연결된 다수의 클라이언트에게 메시지를 전달할 수 있는 구조인 Publisher/Subscriber 모델을 제공한다. 메시지를 던지는 것이기 때문에 메시지를 보관하지는 않는다.

// redis.js

var redis = require('redis');
var subscriber = redis.createClient();
var publisher = redis.createClient();
var msg_count = 0;

     // subscriber 객체가 구독을 시작할 때 발생하는 콜백 함수
     subscriber.on('subscribe', function (channel, count) {
         // 구독 시작 후 publisher 객체가 발행 하도록 함. (일치하는 채널만)
         publisher.publish('Goorm Channel', '발행자 첫번째 메시지');
         publisher.publish('Goorm Channel', '발행자 두번째 메시지');
         publisher.publish('Goorm Channel', '발행자 마지막 메시지');
     });

     // subscriber 객체가 메시지를 받으면 호출되는 함수
     subscriber.on('message', function (channel, message) {
         console.log('채널명: ' + channel + ', 메시지: ' + message);
         msg_count += 1;

         // 메시지를 3번 보냈을 시 subscriber 구독 종료, 구독/발행자 종료
         if (msg_count == 3) {
            subscriber.unsubscribe();
            subscriber.end();
            publisher.end();
         }
     });

     // Goorm Channel의 구독을 시작
     subscriber.subscribe('Goorm Channel');

Redis vs MongoDB

redis vs mongoDB

Redis는 Key-Value 형태의 데이터 구조를 가지는 인메모리 데이터 저장소입니다. 반면, MongoDB는 Document 형태의 데이터 구조를 가지며, 디스크 기반으로 데이터를 저장합니다.

velog.io

mongoose에 대해 알아보자!

clohoon — Fri, 20 Oct 2023 23:47:56 +0900

⚡ mongoDB란?

mongoose는 mongoDB라는 NoSQL 데이터베이스를 지원하는 노드의 확장모듈이다. mongoose는 mongoDB의 ODM(Object Data Mapping)으로, 문서를 DB에서 조회할 때 자바스크립트 객체로 바꾸어준다.

NoSQL은 관계형 데이터 모델과 SQL을 사용하지 않는 모든 데이터베이스 시스템이다. 무한에 가까운 확장성을 제공하는데, 이를 위해 NoSQL 데이터베이스는 단순한 키와 값의 쌍으로 이루어져 있다. 인덱스와 데이터는 분리되어 운영되며 고정된 스키마도 없다.

mongoDB는 문서지향 저장소를 제공하는 NoSQL 데이터베이스 시스템이다. 객체지향 프로그래밍과 잘 맞고 JSON을 사용할 때 유용하기 때문에 Node.js에서 가장 많이 사용하는 데이터베이스이다. 문서지향 데이터베이스는 행 개념보다 유연한 모델인 문서를 이용해 복잡한 객체의 계층 관계를 하나의 레코드로 표현한다.

⚡ mongoose

mongoose는 데이터를 만들고 관리하기 위해 스키마를 만들고, 그 스키마로 모델을 만든다.

데이터베이스 연결

var mongoose = require('mongoose');
var connection1 = mongoose.createConnection('mongodb://localhost/mydb1');
var connection2 = mongoose.createConnection('mongodb://localhost/mydb2');

스키마 정의하기

var Schema = mongoose.Schema, ObjectId = Schema.ObjectId;
var ArticleSchema = new Schema({
    author: ObjectId,
    title: String,
    body: String,
    date: Date
});

모델 정의하기

var ArticleModel = mongoose.model('Article', ArticleScheme);

모델 사용하기

var instance = new ArticleModel();
instance.title = 'hello';
instance.save(function (err){
            // save 실행 후 콜백 함수의 내용
});
instance.find({}, function(err, docs){
            // find 실행 후 콜백 함수의 내용
});

검색하기

Model.find(query, fields, options, callback)

도큐먼트 추가

var article = new ArticleModel({title: "Title", body: "Contents"});
article.date = new Date();
article.save(function (err) {
    if(err) {
        return handleError(err);
    }
            // save() 성공 후 수행할 내용
});

도큐먼트 삭제

ArticleModel.remove({title: "Title"}, function(err){
    if(err){
        return handleError(err);
    }
            // remove() 성공후 수행할 내용
})

remove 메소드보다 더 세분화된 deleteOne, deleteMany 메소드를 사용하는 것을 권장한다.

socket.io를 이용한 빙고 게임 구현

clohoon — Tue, 17 Oct 2023 23:22:37 +0900

채팅 앱에 이어 빙고 게임도 socket.io를 이용해 구현해보자!

완성된 빙고 게임

빙고 게임 기능

1. 유저 이름 입력받기

2. 접속 중인 유저 이름 출력

3. 한 명이 게임을 시작하려 하면 막기, 알림 출력 (두 명 이상)

4. 게임 진행을 위해 턴 넘기기

5. 자기 턴이 아닐 경우 진행 불가능, 알림 출력

6. 숫자가 선택되면 상대방에게 알림 출력

7. 선택된 숫자에 글자 효과 주기

8. 게임이 진행 중일 때 상대방이 떠난 경우, 게임을 종료시키고 알림 출력하기

server.js

var express = require('express');
var app = express();
var http = require('http').Server(app); 
var io = require('socket.io')(http);    
var path = require('path');


// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));


app.get('/', (req, res) => {  
	res.render('main', { title: '온라인 빙고 게임', username: req.query.username });
});

var users = {};
var user_count = 0;
var turn_count = 0;


io.on('connection', function(socket){ 
	
	console.log('user connected : ', socket.id);
	
	socket.on('join', function (data) {
		var username = data.username;
		socket.username = username;
		
		users[user_count] = {};
		users[user_count].id = socket.id;
		users[user_count].name = username;
		users[user_count].turn = false;
		user_count++;
		
		io.emit('update_users', users, user_count);
	});
	
	socket.on('game_start', function (data) {
		socket.broadcast.emit("game_started", data);
		users[turn_count].turn = true;
		
		io.emit('update_users', users);
	});
	
	socket.on('select', function (data) {
		socket.broadcast.emit("check_number", data);
		
		users[turn_count].turn = false;
		turn_count++;
		
		if(turn_count >= user_count) {
			turn_count = 0;
		}
		users[turn_count].turn = true;
		
		io.sockets.emit('update_users', users);
	});
	
	socket.on('disconnect', function() {
		console.log('user disconnected : ', socket.id, socket.username);
		for(var i=0; i<user_count; i++){
			if(users[i].id == socket.id)
				delete users[i];
		}	
		
		user_count--;
		io.emit('update_users', users, user_count);
		io.emit('user_gone');
	});
});

http.listen(3000, function(){ 
	console.log('server on!');
});

main.js

var bingo = {
	is_my_turn: Boolean,
	socket: null,
		
	init: function(socket){
		var self = this;
		var user_cnt = 0;
		
		this.is_my_turn = false;
		
		socket = io();

		socket.on("check_number", function (data) {
			self.where_is_it(data.num);
			self.print_msg(data.username + "님이 '" + data.num + "'을 선택했습니다.");
		});
		
		socket.on("game_started", function(data){
			console.log("enter the game_started");
			self.print_msg(data.username + " 님이 게임을 시작했습니다.");
			$("#start_button").hide();
		});
		
		socket.on("update_users", function (data, user_count) {
			console.log(data);
			user_cnt = user_count;
			self.update_userlist(data, socket);
		});
		
		socket.on("user_gone", function(){
			self.print_msg("참가자 한 명이 게임을 종료했습니다.");
		});
		
		//join
		
		$("#un").click(function (){
			$("#un").hide();
			socket.emit("join", { username: $('#username').val() });
			$("#un").hide();
		});
		
		var numbers = [];
		for(var i=1; i<=25; i++){
			numbers.push(i);
		}
		
		numbers.sort(function (a,b) {
			var temp = parseInt(Math.random() * 10);
			var isOddOrEven = temp%2;
			var isPosOrNeg = temp > 5 ? 1 : -1;
			return (isOddOrEven*isPosOrNeg);
		});
		
		$("table.bingo-board td").each(function (i) {
			$(this).html(numbers[i]);
			
			$(this).click(function (){
				if(user_cnt == 1){
					self.print_msg("<알림> 최소 2명부터 게임이 가능합니다.");
				}
				else{
					self.select_num(this, socket);
				}
			});
		});
		
		$("#start_button").click(function () {
			if(user_cnt == 1){
			   self.print_msg("<알림> 최소 2명부터 게임이 가능합니다.");
			}
			else{
				socket.emit('game_start', { username: $('#username').val() });
				self.print_msg("<알림> 게임을 시작했습니다.");
				$("#start_button").hide();
			}
		});
		
	},
	
	// init 끝
	select_num: function (obj, socket) {
		if(this.is_my_turn && !$(obj).attr("checked")) {
			//send num to other players
			socket.emit("select", { username: $('#username').val(), num: $(obj).text() });		
			this.check_num(obj);
			
			this.is_my_turn = false;
		}
		else {
			this.print_msg("<알림> 차례가 아닙니다!");
		}
	},
	
	where_is_it: function (num) {
		var self = this;
		var obj = null;
		
		$("table.bingo-board td").each(function (i) {
			if ($(this).text() == num) {
				self.check_num(this);
			}
		});
	},
	
	check_num: function (obj) {
		$(obj).css("text-decoration", "line-through");
		$(obj).css("color", "lightgray");
		$(obj).attr("checked", true);
	},
	
	update_userlist: function (data, this_socket) {
		var self = this;
		$("#list").empty();
		console.log(data);
		
		$.each(data, function (key, value) {
			var turn = "(-) ";
			if(value.turn === true) {
				turn = "(*) ";
				
				if(value.id == this_socket.id ) {
					self.is_my_turn = true;
				}
			}
			if(value.id == this_socket.id){
				$("#list").append("<font color='DodgerBlue'>" + turn + value.name + "<br></font>");
			}
			else{
				$("#list").append("<font color='black'>" + turn + value.name + "<br></font>");
			}
		});
	},
	
	
	print_msg: function (msg) {
		$("#logs").append(msg + "<br />");
		$('#logs').scrollTop($('#logs')[0].scrollHeight);
	}
};

$(document).ready(function () {
	bingo.init();
});

main.pug

extends layout

block content
 h1= title
 p 
  font(color='DodgerBlue') #{username}
  input#username(type= 'text', value= username)
  input#un(type='button' value='참가')
  | 님 환영합니다.
 
 #game
  #bingo
   table.bingo-board
    tr
     td
     td
     td
     td
     td
    tr
     td
     td
     td
     td
     td
    tr
     td
     td
     td
     td
     td
    tr
     td
     td
     td
     td
     td
    tr
     td
     td
     td
     td
     td

   #user
    #list
    #logs
    input#start_button(type='button', value='Game Start!')

layout.pug

doctype html
html
	head
		title= title
		link(rel='stylesheet', href='/stylesheets/style.css')
		script(src='/socket.io/socket.io.js')
		script(src='//code.jquery.com/jquery.min.js')
		script(src='/javascripts/main.js')
	body
		center
			block content

style.css

body {
  padding: 50px;
  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
}

a {
  color: #00B7FF;
}

#game {
	width: 320px;
	height: 300px;
}

#bingo {
	float: center;
}

#user {
	float: center;
}

#list {
	border: 1px solid gray;
	width: 300px;
	height: 100px;
	overflow: auto;
	margin-bottom: 10px;
}

#logs {
	border: 1px solid gray;
	width: 300px;
	height: 100px;
	overflow: auto;
	margin-bottom: 10px;
}

.bingo-board {
	border-left: 1px solid gray;
	border-top: 1px solid gray;
	border-spacing: 0px;
	margin-bottom: 20px;
	text-align: center;
}

.bingo-board td {
	width: 35px;
	height: 35px;
	border-right: 1px solid gray;
	border-bottom: 1px solid gray;
}

socket.io를 이용한 채팅 앱 구현

clohoon — Mon, 9 Oct 2023 09:26:07 +0900

socket.io를 활용해 실시간 웹 통신을 구현해보자!

완성된 채팅 앱

클라이언트 / 서버 통신

클라이언트 / 서버 통신은 서버에 있는 풍부한 자원들과 서비스를 통합된 방식으로 제공받기 위한 통신이다.

통신 프로토콜은 통신 서비스 또는 기능 수행을 위해 관련 통신 당사자 간 교환하는 정보의 종류와 표현 형식, 교환 절차, 그리고 교환 과정에서 실행해야 할 행위에 대한 규약이다. 대표적인 예로 IBM의 폐쇄형 망 구조인 SNA, 개방형 망 구조인 TCP/IP가 있다.

Polling 방식은 클라이언트가 서버에 주기적으로 요청 후 응답을 받는 방식이다. 구현이 간단하지만 쓸모없는 요청/응답 때문에 많은 트래픽이 낭비되며, 다음 폴링이 이루어지기 전까지 어떤 이벤트가 왔는지 모르기 떄문에 실시간성이 보장되지 않는다.

Long Poll 방식은 클라이언트가 서버에 대한 요청을 유지하여 반복적인 요청을 없애고 유효한 이벤트가 발생하면 응답을 해주는 방식이다. 즉 접속을 오래 유지하는 것인데, 일정 시간을 초과하면 접속을 완료하고 새로 요청한다.

Polling, Long Poll, Stream 등의 방법은 브라우저가 HTTP 요청을 보내고 서버가 이에 대한 HTTP 응답을 보내는 단방향의 메시지 교환 방식을 유지한다. 서버와 클라이언트가 실시간으로 상호작용하는 웹 서비스를 개발하기 위해 일종의 트릭을 사용한 셈이다. 이로 인해 발생하는 불편함을 해결하기 위해 HTML5 표준 기술인 WebSocket이 등장했다. WebSocket은 사용자의 브라우저와 서버 사이의 동적인 양방향 연결 채널을 구성한다.

Socket.io

오래된 버전의 웹 브라우저는 웹소켓을 지원하지 않는다. 따라서 브라우저에 상관없이 실시간 웹을 구현할 수 있는 Socket.io가 많이 사용된다.

Socket.io는 node.js 기반으로 만들어진 기술로, 거의 모든 웹 브라우저와 모바일 장치를 지원하는 실시간 웹 애플리케이션 지원 라이브러리이다. 만약 브라우저에 FlashSocket이라는 기술을 지원하는 플러그인이 설치되어 있으면 그것을 사용하고 없으면 AJAX Long Polling 방식을 사용한다.

채팅 앱 구현

구현할 채팅 프로그램의 기능은 다음과 같다.

1. 유저가 접속하면 알림 출력
2. 유저가 떠나면 알림 출력
3. 닉네임 변경했을 때 알림 출력
4. 실시간으로 접속 중인 유저 이름 보여주기

프로젝트 폴더 이름은 socket-test이다.

유저들 간 닉네임 중복 ❌

유저 닉네임이 중복되면 다양한 문제가 발생한다. 예를 들면, 한 유저가 채팅방을 나갔을 때 같은 닉네임의 다른 유저들도 (접속자 버튼을 눌렀을 때) 채팅방을 나간 것처럼 보여진다. 이 문제를 해결하고 싶다면 (다음 게시물에 올라올) 빙고 게임처럼 users를 객체로 바꾸어 각 유저별로 socket.id와 name을 함께 보관하면 된다. 그리고 한 유저가 나가거나 닉네임을 변경하면 해당 socket.id를 가진 객체만 삭제하거나 수정한다. 해당 게시물에서는 이 기능을 구현하지 않겠다.

npm init
npm install express-generator -g
express socket-test
cd socket-test && npm install
npm install socket.io
npm install pug

server.js

var express = require('express');
var app = express();
var http = require('http').Server(app); 
var io = require('socket.io')(http);    
var path = require('path');

app.set('views', './views');
app.set('view engine', 'pug');
app.use(express.static(path.join(__dirname, 'public')));

app.get('/', (req, res) => {  
	res.render('chat');
});

var count=1;
var users=[];
io.on('connection', function(socket){
	console.log('user connected: ', socket.id);
	var name = "익명" + count++;                 
	socket.name = name;
	io.to(socket.id).emit('create name', name);   
	io.emit('new_connect', name);
	users.push(name);
	
	socket.on('disconnect', function(){ 
		users = users.filter((value, index, arr) => {
			return value != socket.name;
		});
		console.log('user disconnected: '+ socket.id + ' ' + socket.name);
		io.emit('new_disconnect', socket.name);
	});

	socket.on('send message', function(name, text){ 
		var msg = name + ' : ' + text;
		if(name != socket.name)
			io.emit('change name', socket.name, name);
			users = users.filter((value, index, arr) => {
				return value != socket.name;
			});
			users.push(name);
		socket.name = name;
    	console.log(msg);
    	io.emit('receive message', msg);
	});
	
	socket.on('check users', function(){
		io.emit('print users', users);
	});
	
});

http.listen(3000, function(){ 
	console.log('server on..');
});

server.js에 서버 코드를 모두 작성하므로 npm start가 아닌 node server로 서버를 구동시킨다.
socket.name은 닉네임이 변경될 때 비교해주기 위한 값이다.
io.to(socket.id).emit은 서버가 해당 socket.id에만 이벤트를 전달한다.

chat.pug

doctype 5
html
  head
    title= 'Chat'
    link(rel='stylesheet', href='/stylesheets/style.css')
    link(rel="stylesheet", href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css", integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous")
    script(src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js", integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous")
    script(src='/socket.io/socket.io.js')
    script(src='//code.jquery.com/jquery-1.11.1.js')
  body
    center
      div
        button.btn.btn-info(type='button') clohoon 채팅방
      div
        textarea#chatLog.form-control(readonly='')
      form#chat
        input#name(type='text')
        input#message(type='text')
        button.btn.btn-primary(type='submit') 전송
      button#connected-users(type='button') 접속자
      #box.box
	  
    script.
      var socket = io(); 
	  
      $('#chat').on('submit', function(e){ 
      socket.emit('send message', $('#name').val(), $('#message').val());
      $('#message').val('');
      $('#message').focus();
      e.preventDefault();
      });
	  
      $('#connected-users').on('click', function(){ 
      socket.emit('check users');
      });
	  
      socket.on('create name', function(name){ 
      $('#name').val(name);
      });
	  
      socket.on('change name', function(oldname, name){ 
      $('#chatLog').append('<알림> ' + oldname + '님이 ' + name +'님으로 닉네임을 변경했습니다.\n');
      });
	  
      socket.on('receive message', function(msg){ 
      $('#chatLog').append(msg+'\n');
      $('#chatLog').scrollTop($('#chatLog')[0].scrollHeight);
      });
	  
      socket.on('new_disconnect', function(name){
      $('#chatLog').append('<알림> ' + name + '님이 채팅창을 떠났습니다.\n');
      });
	  
      socket.on('new_connect', function(name){
      $('#chatLog').append('<알림> ' + name + '님이 채팅창에 접속했습니다.\n');
      });

      socket.on('print users', function(users){ 
      $('#chatLog').append('<알림> ' + users + '이 접속 중입니다.\n');
      });

style.css

#chatLog{
	width: 50%; 
	height: 700px;
}
#name{ 
	width: 10%; 
}
#message{ 
	width: 35%; 
}
#connected-users{
	border: 1px solid skyblue;
	background-color: rgba(0,0,0,0);
	color: skyblue;
	border-radius: 5px;
}
.btn.btn-info{
	width: 50%;
	height: 45px;
	font-size: 20px;
}

Node.js에 대해 알아보자!

clohoon — Sat, 30 Sep 2023 22:51:25 +0900

⚡ Node.js란?

Node.js란 서버사이드 자바스크립트이며 구글의 자바스크립트 엔진인 V8을 기반으로 구성된 일종의 소프트웨어 시스템이다.

Blocking I/O

지금까지 대부분의 애플리케이션은 Blocking I/O를 사용했기 때문에 멀티 쓰레드를 사용할 수밖에 없었다. 이 방식은 다음 두 가지 문제점이 있다.

1. I/O 요청을 하고 응답이 올 때까지 시간을 낭비한다.

2. 스케줄링을 위한 처리 시간과 문맥 전환 비용이 발생한다.

노드는 이러한 문제들을 싱글 쓰레드와 이벤트 기반의 비동기 I/O 처리로 해결한다. 싱글 쓰레드를 가진 노드는 I/O 작업이 시작되면 응답을 기다리지 않고 바로 다음 작업을 실행한다. I/O 작업이 종료되면 이벤트가 발생하고 노드로 개발된 프로세스가 이벤트 큐에 등록된 새로운 이벤트를 감지하여 해당 이벤트 발생 시 수행해야 될 작업을 실행하게 된다.

⚡ 이벤트 루프

이벤트 루프는 작업을 요청하면서 그 작업이 완료되었을 때 어떤 작업을 진행할지에 대해 콜백 함수를 지정하여 동작이 완료되었을 때 해당 콜백 함수를 실행하는 동작 방식이다.

클라이언트가 서버에 HTTP 요청을 보내면 서버에서 계속 돌고 있던 이벤트 루프가 이를 감지하고 알맞은 작업을 워커 쓰레드를 생성하여 실행한다. 그리고 이벤트 루프는 다시 루프로 복귀하여 다른 요청을 기다리게 된다. 작업을 할당받은 워커 쓰레드가 작업을 마치면 미리 전달받은 콜백 함수를 실행하도록 이벤트 루프로 응답하게 되며 이벤트 루프를 이를 실행해 클라이언트에게 결과를 응답한다.

⚡ 모듈

노드는 확장성을 위해 모듈 구조를 통해 애플리케이션을 구성한다. 모듈은 애플리케이션을 이루는 기본 단위로, 보통 다수의 클래스와 이를 통해 생성된 객체들로 구성된다. 기본적으로 노드의 모듈은 자바스크립트 파일 하나와 1대 1로 맵핑된다.

모듈 개념에서 require() 메소드와 module.exports는 중요하다. 노드는 HTML을 사용하지 않으므로 서로 다른 자바스크립트 파일들이 서로 참조하고 호출하는 방법이 필요하다. 이때 require() 메소드는 모듈 식별자인 module.exports를 이용해 모듈이 제공하는 함수나 객체 등을 반환한다.

OS 모듈 : 운영체제와 시스템의 정보를 가져올 수 있는 모듈. CPU나 메모리, 디스크 용량이 얼마나 남았는지 확인할 때 사용한다.

Utility 모듈 : node.js의 보조적인 기능 중 유용한 기능만을 모아놓은 모듈. util.inherits() 메소드를 이용하면 쉽게 상속할 수 있다.

File System 모듈 : 파일 처리와 관련된 작업을 하는 모듈

Event 모듈 : 이벤트 모듈과 EventEmitter 클래스를 사용하여 이벤트와 이벤트 핸들러를 연동시킬 수 있다. 이벤트 모듈을 사용하려면 require() 메소드를 이용해 로드하고, 그 객체를 통해 EventEmitter 클래스를 로드하여 사용하는 것이 일반적이다.

객체지향 자바스크립트

clohoon — Fri, 29 Sep 2023 20:11:15 +0900

프로토타입 패턴

자바스크립트는 Java나 C++ 같은 클래스 기반의 객체지향 언어와는 달리 프로토타입 기반의 객체지향 언어이다. 때문에 자바스크립트에서 클래스 개념은 존재하지 않는다. 많은 개발자들이 이로 인해 자바스크립트를 처음 접할 때 어려움을 겪자 ES6부터 클래스 문법이 새로 추가되었다. 다만 이는 클래스를 흉내내 구현한 프로토타입 기반의 함수이지, 자바스크립트가 클래스 기반의 언어가 되었다는 의미는 아니다.

프로토타입 패턴이란 객체를 생성할 때 원본 객체를 복제하여 생성하는 방법이다. 자바스크립트는 객체를 생성할 때 프로토타입 패턴을 사용한다. 객체가 함수를 사용해서 만들어지면 객체는 함수의 프로토타입 객체를 복제하여 생성된다. (자바스크립트는 함수가 생성될 때 자동으로 그 함수의 프로토타입 객체를 생성하고 해당 함수의 prototype 프로퍼티에 연결해둔다!) 즉 new User() 문법으로 새 객체를 생성하면 User 함수 자체가 아닌 User 함수의 프로토타입 객체를 복제해 새 객체를 만든다는 것이다.

스코프

스코프는 유효 범위로, 작성된 코드를 둘러싼 환경을 의미한다. 스코프는 전역 스코프와 지역 스코프로 정의할 수 있다. 전역 스코프는 함수 안에 포함되지 않은 곳에 정의하는 것으로 코드 어디에서든지 참조할 수 있고, 지역 스코프는 함수 내에 정의된 것으로 정의된 함수 내에서만 참조할 수 있다. const와 let은 블록 레벨 스코프, var과 같은 전통적인 자바스크립트의 변수는 함수 레벨 스코프이다.

호이스팅

호이스팅은 함수 안에서 변수를 선언할 때 어떤 위치에 있든 함수의 시작 위치로 끌어올리는 현상이다. 아래의 두 코드는 같은 코드이다.

function foo() {
	console.log(a);  // undefined
	var a = 100;
	console.log(a);  // 100
}

foo();

function foo() {
	var a;
	console.log(a);  // undefined
	var a = 100;
	console.log(a);  // 100
}

foo();

자바스크립트는 호이스팅을 통해 a의 선언을 제일 위에서 해주기 때문에 에러 없이 undefined가 출력된다.

클로저

클로저는 외부 함수의 실행이 끝나고 외부 함수가 소멸된 이후에도 내부 함수가 외부 함수의 변수에 접근할 수 있는 구조이다. 다음 코드를 보자.

function f() {
    var a = [];
    var i;
	
    for(i = 0; i < 3; i++){
    	a[i] = function() {
    		return i;
    	}
    }
	
    return a;
}
  
var b = f();

console.log( b[0]() ); 
console.log( b[1]() ); 
console.log( b[2]() );

코드를 실행하면 0 1 2가 출력될 것 같지만 실제로 실행해보면 3 3 3이 출력된다. 원인은 var b= f(); 문장에서 for문의 실행이 다 끝나고 나서야 실제 참조가 이루어지기 때문에 이미 3으로 증가한 i 값이 출력되는 것이다. (for문 실행 이후 a[0], a[1], a[2]에는 function(){ return i; }가 저장된다.) 즉 클로저는 그 순간의 값을 저장하는 것이 아니라 연결된 함수 범위에서 최종 처리된 값을 가지게 된다.

정상적으로 출력되는 아래 코드를 살펴보자.

function f() {
    var a = [];
    var i;

    for(i = 0; i < 3; i++){
    	a[i] = (function(x) { 
        	return function() {
          		return x;
        	}
      	})(i);
    }
    return a;
}
  
var b = f();

console.log( b[0]() );
console.log( b[1]() );
console.log( b[2]() );

function 내부의 변수인 i를 바로 리턴하지 않고, 파라미터를 받는 function을 정의한 다음에 파라미터로 내부 변수 i를 넘겨서 클로저가 내부 변수 i가 아니라 파라미터를 리턴하도록 한다. 클로저 함수에 의해 계속 참조되고 있기 때문에 파라미터 값인 0, 1, 2를 파기하지 않고 계속 보관하고 있는 것이다.

클로저를 사용하면 함수를 호출할 때마다 기존에 생성했던 값을 유지할 수 있기 때문에 전역 변수의 잘못된 사용 없이 깔끔한 코드 작성을 할 수 있다. 그리고 외부에 해당 변수를 노출시키지 않아서 안정성을 보장해준다. 하지만 클로저로 참조하는 변수는 프로그램 종료 시까지 계속 메모리에 할당되어 있기 때문에 메모리 누수로 인해 성능 저하의 원인이 될 수도 있다.

참고한 자료

[JS 프로토타입] 자바스크립트의 프로토타입 훑어보기

JavaScript 크롤링 : 뉴스

clohoon — Tue, 19 Sep 2023 23:44:36 +0900

다음 뉴스를 크롤링해보자!

크롤링 결과

시작하기 전에

1. 강의에서 사용하는 url이 존재하지 않아서 https://entertain.daum.net/ranking/popular 로 대체했다.

2. axios, cheerio 패키지를 설치한다.

npm install axios cheerio

3. 아래와 같은 오류가 발생하면 npm i axios@0.21 을 터미널에 입력하여 해결할 수 있다.

import axios from './lib/axios.js';
       ^^^^^
       
SyntaxError: Unexpected identifier

npm이란?

npm은 대표적인 자바스크립트 패키지 매니저 중 하나로, 외부 라이브러리/패키지의 설치 및 삭제, 관리를 해 주는 도구이다. npm을 이용해 무언가를 설치했다면 package.json, package-lock.json, node_modules 폴더가 생성된다.

package.json 파일은 프로젝트 정보와 의존성을 관리해주는 문서이다.
package-lock.json 파일은 node_modules 디렉터리나 package.json 파일이 변경될 때마다 자동으로 생성되고 업데이트되는 파일이다.
node_modules 폴더는 npm으로 다운로드한 외부 라이브러리들이 담기는 폴더이다.

HTTP Request Method

HTTP는 클라이언트와 서버 간 데이터를 주고 받을 때 사용하는 프로토콜이다. HTTP Request Method에는 대표적으로 GET 요청과 POST 요청이 있다.

GET 요청은 클라이언트에서 서버로 어떠한 리소스로부터 정보를 요청하기 위해 사용되는 메서드이다.
POST 요청은 클라이언트에서 서버로 리소스를 생성하거나 업데이트하기 위해 데이터를 보낼 때 사용되는 메서드이다.

뉴스 크롤링 코드

// 모듈 가져오기
const axios = require('axios');
const cheerio = require('cheerio');

function crawler(){
	const url = `https://entertain.daum.net/ranking/popular`;
	
	// axios로 get 요청 보내기
	axios.get(url)
	  .then(res => {
		if(res.status == 200) {
			let crawledNews = [];
			// [ {title: "....", img: "...."}, {}, {} ]
			
			// res.data에 있는 tag를 cheerio로 검색하여 변수에 담기
			const $ = cheerio.load(res.data);
			const $newsList = $('#mArticle > div.ranking_list > ol > li');
			
			$newsList.each(function(i){
				crawledNews[i] = {
					title : $(this).find('li > div > div > div > strong > a').text(),
					img : $(this).find('li > a > img').attr('src')
				};
			});
			console.log(crawledNews);
		}
	});
}

crawler();

웹 게임 제작 : 공 피하기

clohoon — Sun, 17 Sep 2023 13:23:06 +0900

제이쿼리를 사용해 공을 피하는 웹 게임을 제작해 보자!

공 피하기 게임

게임 소개

마우스가 화면 밖으로 나가거나 공에 닿으면 게임이 끝난다. 게임 플레이 시간이 순위별로 기록된다.

JQuery란?

JQuery는 자바스크립트를 이용한 HTML 조작을 더 편하게 하기 위해 만들어진 자바스크립트 라이브러리이다. JQuery를 설치하려면 명령어 등을 통해 직접 JQuery 라이브러리를 다운로드하거나, CDN을 이용하여 웹 네트워크 상으로 JQuery 라이브러리를 받아오면 된다.

JQuery 문법은 대부분 $ 기호로 표현된다. 주로 아래와 같은 형식으로 사용한다.

$(Selector).JQueryAPI();

HTML 코드

<!DOCTYPE html>
<html>
	<head>
		<title>공피하기 게임</title>
		<script type = "text/javascript" src = "https://code.jquery.com/jquery-latest.min.js"></script>
		<link rel = "stylesheet" type = "text/css" href = "style.css" />
	</head>
	<body>
		<div class = "space"></div>
		<div class = "screen">
			<div class = "startbutton">
				<h1>
					<div class = "center">공피하기 게임</div>
				</h1>
				<h3>
					<div class = "center">클릭하면 시작</div>
				</h3>
			</div>
		</div>
		<div class = "timer">
			<h1>
				<div class = "center">0.00</div>
			</h1>
		</div>
		<div id = "highscores">
			<h1>
				<div class = "center">Game Over</div>
			</h1>
		</div>
		<script type = "text/javascript" src = "game.js"></script>
	</body>
</html>

CSS 코드

body {
	height : 100%;
	width : 100%;
}
.space {
	height : 100vh;
	width : 100vw;
	border : 1px black solid;
	margin : auto;
	position : relative;
	z-index : 1;
}
.screen {
	background-color : #facb96;
	height : 75vh;
	width : 75vw;
	border : 2px black solid;
	margin : auto;
	margin-top : -95vh;
	position : relative;
	z-index : 2;
}
.startbutton {
	padding : 2vh;
	background-color : #57db48;
	height : 50vh;
	width : 30vw;
	border : 2px black solid;
	border-radius : 10px;
	margin : auto;
	margin-top : 10vh;
	position : relative;
	z-index : 3;
}
.center {
	text-align : center;
}
h1 {
	z-index : 1;
	font-size : 5vmin;
}
h2 {
	z-index : 1;
	font-size : 3vmin;
}
.circle {
	position : absolute;
	z-index : 3;
	border : 2px black solid;
}
.redcircle {
	position : absolute;
	z-index : 3;
	border : 2px black solid;
}
#highscores {
	background-color : #e3dc14;
	height : 70vh;
	width : 30vw;
	margin : auto;
	margin-top : -80vh;
	position : relative;
	z-index : 9;
	display : none;
	border : 2px black solid;
}
.resetButton {
	padding : 2vh;
	background-color : #57db48;
	height : 10vh;
	width : 10vw;
	border : 2px black solid;
	border-radius : 10px;
	margin : auto;
	margin-top : 0px;
	position : relative;
	z-index : 10;
}
.timer {
	margin-top : 0px;
	position : relative;
	z-index : 10;
}

Javascript 코드

$(document).ready(function(){
	
	//공의 개수
	var circleNumber = 0;
	
	// 색 / 크기(지름) / 크기(반지름) / 속도
	var circleTypes = {
		//speed는 속도가 아니고, 한 지점에서 다른 지점으로 움직일 때 걸리는 ms
		"option" : ["color", "width", "border-radius", "speed"],
		"small" : ["black", 5, 2.5, 3000], 
		"medium" : ["blue", 15, 7.5, 4000],
		"large" : ["yellow", 30, 15, 5000]
	};
	
	// 시간을 찍어주는 변수
	var t = 0;
	
	// 게임 실행 여부
	var gameOn = false;
	
	// 마우스 좌표
	var mouseX;
	var mouseY;
	
	// 마우스 움직임을 감지해서 마우스 좌표를 좌표 변수에 담는 함수
	$("body").mousemove(function(){
		mouseX = event.pageX;
		mouseY = event.pageY;
	});
	
	// 타이머
	function timer() {
		if(gameOn == true) {
			setTimeout(function() {
				t = t + 0.01;
				$(".timer").html(`<h1><div class = "center">${t.toFixed(2)}</div></h1>`);
				timer();
			}, 10)
		}
	}
	
	// 시작 기능
	$(".startbutton").click(function(){
    	// .fadeToggle():보이는 요소는 보이지 않게, 보이지 않는 요소는 보이게 하는 메소드
		$(".startbutton").fadeToggle(500, function() {
			gameOn = true;
			timer();
			$(".space").mouseenter(function(){
				// 게임을 끝내는 함수
				endgame();
			});
			createCircle();
		});
	});
	
	// createCircle 함수
	
	// animateCircle 함수
	
	// endgame 함수
    
	var resetButton = "<div class='resetButton center'><h2>Play Again</h2></div>";
	var highScore1 = 0.00;
	var highScore2 = 0.00;
	var highScore3 = 0.00;
	var highScore4 = 0.00;
	var highScore5 = 0.00;
    
	// updateScores 함수
});

createCircle 함수

function createCircle() {
	circleNumber++;

	// 1, 2, 3 중 하나
	var randomOneThree = Math.floor(3 * Math.random()) + 1;

	if(randomOneThree == 1) {
		var circleChoice = "small";
	} else if(randomOneThree == 2) {
		var circleChoice = "medium";
	} else {
		var circleChoice = "large";
	}

	// 공의 id
	var circleName = "circle" + circleNumber;

	var circleColor = circleTypes[circleChoice][0];
	var circleSize = circleTypes[circleChoice][1];
	var circleRadius = circleTypes[circleChoice][2];
	var circleSpeed = circleTypes[circleChoice][3];

	// 공이 움직이는 범위
	var moveableWidth = $("body").width() - circleSize;
	var moveableHeight = $("body").height() - circleSize;

	// 공의 초기 시작 좌표
	var circlePositionLeft = (moveableWidth * Math.random()).toFixed();
	var circlePositionTop = (moveableHeight * Math.random()).toFixed();

	var newCircle = `<div class = 'circle' id = "${circleName}"></div>`;
	$("body").append(newCircle);

	$("#"+circleName).css({
		"background-color" : circleColor,
		"width" : circleSize + "vmin",
		"height" : circleSize + "vmin",
		"border-radius" : circleRadius + "vmin",
		"top" : circlePositionTop + "px",
		"left" : circlePositionLeft + "px"
	});

	// 1ms마다 마우스와의 거리를 계산하는 함수
	function timeCirclePosition(circleTrackId){
		setTimeout(function(){
			var currentCirclePosition = $(circleTrackId).position();
			var calculateRadius = parseInt($(circleTrackId).css("width")) * 0.5;

			var distanceX = mouseX - (currentCirclePosition.left + calculateRadius);
			var distanceY = mouseY - (currentCirclePosition.top + calculateRadius);

			if(Math.sqrt(Math.pow(distanceX, 2) + Math.pow(distanceY, 2)) <= calculateRadius){
				//부딪힌 공 빨간색으로 표시
				$(circleTrackId).removeClass('circle').addClass('redcircle');
				$(circleTrackId).css("background-color", "red");

				console.log("게임 끝");
				endgame();
			};
			timeCirclePosition(circleTrackId);
		}, 1);
	}
	timeCirclePosition('#'+circleName);

	animateCircle(circleName, circleSpeed, circleSize);

	// 3초에 한 번 공 랜덤 생성
	setTimeout(function(){
		if(gameOn == true) {
			createCircle();
		}
	}, 3000);
};

animateCircle 함수

function animateCircle(circleId, speed, circleSize) {
	// animate() 위치를 이동시키는 함수
	var moveableWidth = $("body").width() - circleSize;
	var moveableHeight = $("body").height() - circleSize;
	var circleMoveLeft = (moveableWidth * Math.random()).toFixed();
	var circleMoveTop = (moveableHeight * Math.random()).toFixed();

	$("#" + circleId).animate({
		left : circleMoveLeft,
		top : circleMoveTop
	}, speed, function(){
		animateCircle(circleId, speed, circleSize);
	});
};

endgame 함수

function endgame(){
	if(gameOn == true) {
		gameOn = false;
		updateScores(t);
		$(".circle").remove();
		$(".redcircle").stop();
	};
};

updateScores 함수

function updateScores(newScore){
	newScore += 0.01;

	if(newScore > highScore1){
		var redScore = "score1";
		highScore5 = highScore4;
		highScore4 = highScore3;
		highScore3 = highScore2;
		highScore2 = highScore1;
		highScore1 = newScore;
	}

	else if(newScore > highScore2){
		var redScore = "score2";
		highScore5 = highScore4;
		highScore4 = highScore3;
		highScore3 = highScore2;
		highScore2 = newScore;
	}

	else if(newScore > highScore3){
		var redScore = "score3";
		highScore5 = highScore4;
		highScore4 = highScore3;
		highScore3 = newScore;
	}

	else if(newScore > highScore4){
		var redScore = "score4";
		highScore5 = highScore4;
		highScore4 = newScore;
	}

	else if(newScore > highScore5){
		var redScore = "score5";
		highScore5 = newScore;
	}

	var highScorePlace1 = "<div class='score center' id='score1'><h2>" + highScore1.toFixed(2) + "</h2></div>";
	var highScorePlace2 = "<div class='score center' id='score2'><h2>" + highScore2.toFixed(2) + "</h2></div>";
	var highScorePlace3 = "<div class='score center' id='score3'><h2>" + highScore3.toFixed(2) + "</h2></div>";
	var highScorePlace4 = "<div class='score center' id='score4'><h2>" + highScore4.toFixed(2) + "</h2></div>";
	var highScorePlace5 = "<div class='score center' id='score5'><h2>" + highScore5.toFixed(2) + "</h2></div>";

	$("#highscores").append(highScorePlace1, highScorePlace2, highScorePlace3, highScorePlace4, highScorePlace5, resetButton);
	$("#"+redScore).css("color", "red");
	$("#highscores").toggle();

	$(".resetButton").click(function(){
		gameReset();
	});

	function gameReset(){
		$("#highscores").fadeToggle(100, function(){
			t = 0;
			$(".timer").html(`<h1><div class="center">${t.toFixed(2)}</div></h1>`);
			$(".resetButton").remove();
			$(".score").remove();
			$(".startbutton").toggle();
			$(".redcircle").remove();
		});
	};
};

프레임워크 없이 CRUD 구현하기

clohoon — Tue, 12 Sep 2023 18:48:24 +0900

CRUD가 구현된 수강관리 앱을 만들어보자!

완성된 수강관리 앱

⚡ CRUD란?

CRUD는 대부분의 컴퓨터 소프트웨어가 가지는 기본적인 데이터 처리 기능인 Create(생성), Read(읽기), Update(갱신), Delete(삭제)를 묶어서 일컫는 말이다.

⚡ HTML 코드

<!DOCTYPE html>
<html>
	<head>
		<title>수강관리 앱</title>
		<link rel = "stylesheet" href = "style.css">
	</head>
	<body>
		<div id = "container"></div>
	</body>
	<script src = "./script.js"></script>
</html>

⚡ CSS 코드

.title {
	font-weight : bold;
	font-size : 30px;
}

table, th, td {
	border : solid 1px #DDD;
	border-collapse : collapse;
	padding : 2px 3px;
	text-align : center;
}

⚡ Javascript 코드

가독성을 위해 CreateNew, Save, Update, Delete 메소드를 따로 나누어 작성하였다. 코드가 길어서 설명은 주석으로 넣었다.

var crudApp = new function() {
	this.myClass = [
		{ID : '1', Class_Name : '운영체제', Category : '전공필수', Credit : 3},
		{ID : '2', Class_Name : '컴퓨터구조론', Category : '전공선택', Credit : 4},
		{ID : '3', Class_Name : '심리학의 이해', Category : '교양필수', Credit : 2},
	];
	this.Category = ['전공필수', '전공선택', '교양필수', '교양선택'];
    
    // 확장성을 위해 th에 담길 데이터를 col 배열에 담는다
	this.col = [];
	
	this.createTable = () => {
		for(var i = 0; i < this.myClass.length; i++){
			for(var key in this.myClass[i]){
				if(this.col.indexOf(key) === -1) this.col.push(key);
			}
		}
	
		var table = document.createElement('table');
		table.setAttribute('id', 'classTable');
		
		var tr = table.insertRow(-1);
		
		// th 작성
		for(var h = 0; h < this.col.length; h++) {
			var th = document.createElement('th');
			th.innerHTML = this.col[h];
			tr.appendChild(th);
		}
		
		// td 작성
		for(var i = 0; i < this.myClass.length; i++) {
			tr = table.insertRow(-1);
			for(var j = 0; j < this.col.length; j++) {
				var tabCell = tr.insertCell(-1);
				tabCell.innerHTML = this.myClass[i][this.col[j]];
			}
			
			// update 버튼 만들기
			this.td = document.createElement('td');
			tr.appendChild(this.td);
			var btUpdate = document.createElement('input');
			btUpdate.setAttribute('type', 'button');
			btUpdate.setAttribute('value', 'Update');
			btUpdate.setAttribute('id', 'Edit' + i);
			btUpdate.setAttribute('style', 'background-color : #44CCEB;');
			btUpdate.setAttribute('onclick', 'crudApp.Update(this)');
			this.td.appendChild(btUpdate);
			
			// save 버튼 만들기
			tr.appendChild(this.td);
			var btSave = document.createElement('input');
			btSave.setAttribute('type', 'button');
			btSave.setAttribute('value', 'Save');
			btSave.setAttribute('id', 'Save' + i);
			btSave.setAttribute('style', 'display : none;');
			btSave.setAttribute('onclick', 'crudApp.Save(this)');
			this.td.appendChild(btSave);
			
			// delete 버튼 만들기
			this.td = document.createElement('td');
			tr.appendChild(this.td);
			var btDelete = document.createElement('input');
			btDelete.setAttribute('type', 'button');
			btDelete.setAttribute('value', 'Delete');
			btDelete.setAttribute('id', 'Delete' + i);
			btDelete.setAttribute('style', 'background-color : #ED5650;');
			btDelete.setAttribute('onclick', 'crudApp.Delete(this)');
			this.td.appendChild(btDelete);
		}
		
		// 입력 행 추가
		tr = table.insertRow(-1);
		for(var j = 0; j < this.col.length; j++) {
			var newCell = tr.insertCell(-1);
            // ID 값(j = 0일 때)은 입력받지 않는다
			if(j >= 1) {
				if(j == 2) {
					var select = document.createElement('select');
					select.innerHTML = `<option value = ""></option>`;
					for(var k = 0; k < this.Category.length; k++) {
						select.innerHTML += 
							`<option value = "${this.Category[k]}">${this.Category[k]}</option>`;
					}
					newCell.appendChild(select);
				}
				else {
					var tBox = document.createElement('input');
					tBox.setAttribute('type', 'text');
					tBox.setAttribute('value', '');
					newCell.appendChild(tBox);
				}
			}
		}
		
		// create 버튼 만들기
		this.td = document.createElement('td');
		tr.appendChild(this.td);
		var btCreate = document.createElement('input');
		btCreate.setAttribute('type', 'button');
		btCreate.setAttribute('value', 'Create');
		btCreate.setAttribute('id', 'New' + i);
		btCreate.setAttribute('style', 'background-color : #207DD1;');
		btCreate.setAttribute('onclick', 'crudApp.CreateNew(this)');
		this.td.appendChild(btCreate);
	
		var div = document.getElementById('container');
		div.innerHTML = '수강관리 앱';
		div.appendChild(table);
	}
	
	// Delete 메소드 코드

	// CreateNew 메소드 코드
	
	// Update 메소드 코드
	
	// Save 메소드 코드
}

crudApp.createTable();

Delete 메소드 코드

this.Delete = (oButton) => {
	var targetIdx = oButton.parentNode.parentNode.rowIndex;
	this.myClass.splice((targetIdx - 1), 1);
	this.createTable();
}

Delete 버튼을 누르면 실행된다. oButton의 상위 노드는 td이고, td의 상위 노드는 tr이다. 때문에 targetIdx에 버튼을 누른 행의 인덱스 값이 저장되고, myClass에서 해당 행을 제거한다.

CreateNew 메소드 코드

this.CreateNew = (oButton) => {
	var writtenIdx = oButton.parentNode.parentNode.rowIndex;
	var trData = document.getElementById('classTable').rows[writtenIdx];
	
	var obj = {};
	
	// tr 데이터에서 td 속의 key:value 뽑아서 obj 안에 저장
	for(var i = 1; i < this.col.length; i++) {
		var td = trData.getElementsByTagName("td")[i];
		if(td.childNodes[0].getAttribute('type') === 'text' || td.childNodes[0].tagName === 'SELECT') {
			var txtVal = td.childNodes[0].value;
			
			if(txtVal != '') {
				obj[this.col[i]] = txtVal;
			}
			else {
				obj = '';
				alert("all fields are compulsory");
				break;
			}
		}
	}
	
	// Credit에 숫자 자료형이 입력되지 않으면 에러 출력
	if(obj != '') {
		if(isNaN(obj['Credit']) !== false) {
			obj = '';
			alert("Please enter number data type for Credit!");
		}
	}
	
	obj[this.col[0]] = this.myClass.length + 1; // 자동으로 ID 값 부여
	this.myClass.push(obj);
	this.createTable();
}

Create 버튼을 누르면 실행된다. writtenIdx에 버튼을 누른 행(마지막 행)의 인덱스 값이 저장되고, trData에 해당 행의 데이터들이 저장된다. 비어 있는 데이터가 존재하면 obj를 초기화시킨 후 에러를 출력한다. 모든 데이터가 입력되었다면 obj를 myClass에 추가한다. Credit에 숫자 자료형이 입력되지 않으면 에러를 출력하는 기능을 추가로 구현했다.

Update 메소드 코드

this.Update = (oButton) => {
	var writtenIdx = oButton.parentNode.parentNode.rowIndex;
	var trData = document.getElementById('classTable').rows[writtenIdx];
		
	for(var i = 1; i < this.col.length; i++) {
		if(i === 2) {
			var td = trData.getElementsByTagName("td")[i];
			var select = document.createElement("select");
			select.innerHTML = `<option value = "${td.innerText}">${td.innerText}</option>`;
			for(var k = 0; k < this.Category.length; k++) {
				select.innerHTML +=
					`<option value = "${this.Category[k]}">${this.Category[k]}</option>`;
			}
			td.innerText = '';
			td.appendChild(select);
		}
		else {
			var td = trData.getElementsByTagName("td")[i];
			var input = document.createElement("input");
			input.setAttribute("type", "text");
			input.setAttribute("value", td.innerText);
			td.innerText = '';
			td.appendChild(input);
		}
	}
		
	var btSave = document.getElementById('Save' + (writtenIdx - 1));
	btSave.setAttribute('style', 'display : block; background-color : #2DBF64;');
	oButton.setAttribute('style', 'display : none;');
}

Update 버튼을 누르면 실행된다. input 태그와 select 태그를 활성화시킨다. Update 버튼 대신 Save 버튼을 화면에 띄운다.

Save 메소드 코드

this.Save = (oButton) => {
	var writtenIdx = oButton.parentNode.parentNode.rowIndex;
	var trData = document.getElementById('classTable').rows[writtenIdx];
		
	for(var i = 1; i < this.col.length; i++) {
		var td = trData.getElementsByTagName("td")[i];
		if(td.childNodes[0].getAttribute('type') === 'text' || td.childNodes[0].tagName === 'SELECT') {
			this.myClass[writtenIdx-1][this.col[i]] = td.childNodes[0].value;
		}
	}
	this.createTable();
}

Save 버튼을 누르면 실행된다. myClass에 저장되어 있던 기존의 값들을 새로 수정된 값들로 변경한다.