이채현

Destructuring

destructuring(비구조화)는 object나 array 등 안의 변수를 바깥으로 끄집어내는 것

Object Destructuring

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

/**
 * Object Destructuring
 */
const settings = {
  notifications: {
    follow: true,
    alerts: true,
    unfollow: false,
  },
  color: {
    theme: "dakr",
  },
};

if (settingss.notifications.follow) {
  // send email
}

// 기존에는 위와 같이 사용했다. 보기에 매우 불편하다.
// 만약 follow라는 값이 없느면 undefined오류가 발생할 것이다.

⇒

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

// 기본적으로 settings를 열어 notifications에 접근하여 follow를 가져오는 것

const { notifications: { follow = false } = {}, color } = settings;
// settings에 notifications가 없으면 {}, notifications에 follow가 없으면 false로
// default 값 세팅을 해준다.

console.log(follow); // true
console.log(color); // { theme: 'dark' }

// 이 때 notifications는 변수가 아님 -> notifications를 console.log에 찍으면 is not defined 오류 발생
// 이런 방식은 큰 Object에서 특정 변수나 그 안에 속한 작은 Object에 접근할 수 있도록 해주는 것
// 

Array Destructuring

array destructuring은 보통 가져온 정보를 조작하기 않을 때 쓰기 좋다.

1
2
3
4
5
6
7
8
9
10

/**
 * Array Destructuring
 */
const days = ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"];

const [mon, tue, wed, , , , sun, aaa = "AAA"] = days; // ,,,은 skippin

// mon 에는 "Mon" , tue에는 "Tue", wed 에는 "Wed" sun에는 "Sun"이 들어가있음
// aaa는 AAA
console.log(sun);

Renaming

api등에서 받아온 데이터의 이름이 별로일 때 바꿔보자

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

/**
 * Renaming
 */

const settings = {
  color: {
    chosen_color: "dark",
  },
};

const {
  color: { chosen_color: chosenColor = "light" },
} = settings;
// :를 붙혀 새로운 변수를 생성하고 그 변수에 값을 담는다.

-----------------

let chosenColor = "blue"; // 변수가 미리 있다면

console.log(chosenColor); // blue

({
  color: { chosen_color: chosenColor = "light" },
} = settings);
// 위와 같이 적어 이미 정의가 되어있는 choseColor의 값을 업데이트한다.

console.log(chosenColor); // dark

Function Destructuring

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

/**
 * Function Destructuring
 */
function saveSettings(followAlert, unfollowAlert, mrkAlert, themeColor) {} // argument가 너무 길다

function saveSettings({ follow, alert, color = "blue" }) {
  console.log(color); // green
}

saveSettings({
  follow: true,
  alert: true,
  mkt: true,
  color: "green",
});

----------- 더 간단히..

function saveSettings({ notifications, color: { theme = "blue" } = {} }) {
  console.log(theme); // blue
}

saveSettings({
  notifications: {
    follow: true,
    alert: true,
    mkt: true,
  },
  //   color: { theme: "green" },
});

Value shorthands

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

const follow = checkFollow();
const alert = checkAlert();

const settings = {
  notifications: {
    follow: follow,
    alert: alert,
  },
};

// 위 아래 같다. key와 value가 같다면...

const settings = {
    notifications:{
        follow,
        alert
    }
}

이채현

Array

Array.of()

무엇이든 Array로 만들어준다.

1
2
3
4

// Array.of()
const alphabet = ["a", "b", "c", "d"];
const alphabet = Array.of("a", "b", "c", "d")const alphabet = Array.of("a", "b", "c", "d", 1, 2, 3);;
console.log(alphabet);

Array.from()

Array.from(array같이 생긴 것)

😠 querySelector나 getElementbyClassName으로 엘리먼트 찾으면 array 같지만 아닌 다른 저장 포맷으로 저장된다

array-like object를 array로 바꿔준다.

1
2
3
4
5
6
7
8
9
10
11

const buttons = document.getElementsByClassName("btn");
console.log(buttons);
// buttons는 Array가 아니기 때문에
// 아래와 같이 forEach를 사용할 수 없다.
buttons.forEach((button) => {
  button.addEventListener("click", () => console.log("I ve been clickeds"));
});
----------------
Array.from(buttons).forEach((button) => {
  button.addEventListener("click", () => console.log("I ve been clickeds"));
});

Array.find()

Array.prototype.find() - JavaScript | MDN

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

/**
 * Array.find()
 */
const friends = [
  "[email protected]",
  "[email protected]",
  "[email protected]",
  "[email protected]",
];

const target1 = friends.find((friend) => friend.includes("@yahoo.com"));
// 조건을 넣어주면 forEach를 돌리면서 그에 맞는 값을 리턴해준다
// 찾은 첫번째 값만 반환해준다
// 없으면 undefined반환한다
console.log(target1);

Array.findIndex()

Array.prototype.findIndex() - JavaScript | MDN

1
2
3
4
5
6
7
8
9
10

/**
 * Array.findIndex()
 */
const target2 = friends.findIndex((friend) => friend.includes("@yahoo.com"));
// 인덱스가 필요할때!
// 없으면 -1반환한다
console.log(target2);
const userName = friends[target2].split("@")[0];
const email = "yahoo.com";
console.log(`${userName}@${email}`);

Array.fill()

Array.prototype.fill() - JavaScript | MDN

1
2
3
4
5

if (target2 !== -1) {
  friends.fill("*".repeat(5), target2 + 1);
  // target부터 모든 변수는 다 채울값으로 채워줌
}
console.log(friends);

이채현

Strings

Template Literal

variable을 가진 문자열을 쓰는 방법에 대한 개선

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

const sayHi = (aName = "anon") => {
  return "Hello " + aName;
};

==>
/**
* 변수
*/
const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}
/**
 * 함수
 */
const add = (a, b) => a + b;
console.log(`hello how are you ${add(6, 6)}`);

HTML Fragments 1

1
2
3
4
5
6
7
8
9
10
11

const wrapper = document.querySelector(".wrapper");

const addWelcome = () => {
  const div = document.createElement("div");
  const h1 = document.createElement("h1");
  h1.innerText = "Hello";
  div.append(h1);
  wrapper.append(div);
};

setTimeout(addWelcome, 1000);

⇒

1
2
3
4
5
6
7
8

const addWelcome = () => {
  const div = `
    <div class="hello">
        <h1>Hello</h1>
    </div>
    `;
  wrapper.innerHTML = div;
};

• template literal은 ``` … space를 고려한다.

HTML Fragments 2

1
2
3
4
5
6
7
8
9
10

const alphas = ["A", "B", "C", "D"];

const ul = document.createElement("ul");
const list = `
    <h1>Alphabet</h1>
    <ul>
        ${alphas.map(alpha => `<li>${alpha}</li>`).join("")}
    </ul>
    `;
wrapper.innerHTML = list;

Cloning Styled Components

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

/**
 * Cloning Styled Components
 */

const styled = (aElement) => {
  const el = document.createElement(aElement);
  return (args) => {
    const styles = args[0];
    el.style = styles;
    return el;
  };
};

// 아래 코드는 함수를 두변 연속 호출 하는 꼴이기 때문에
// 위 함수에서 클로저로 함수를 또 한번 호출할 필요가 있다.
const title = styled("h1")`
  background-color: red;
  color: blue;
`;

const subTitle = styled("span")`
  color: green;
`;

title.innerText = "We just cloned";
subTitle.innerText = "Styled Components";

document.body.append(title, subTitle);

More String Improvements

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

/**
 * includes()
 */
const isEmail = (email) => email.includes("@");
console.log(isEmail("[email protected]")); // true
console.log(isEmail("myEmail")); // false

/**
 * repeat()
 */
const CC_NUMBER = "6060"; // ************6060로 보여주기
const displayName = `${"*".repeat(10)}${CC_NUMBER}`;
console.log(displayName); // **********6060

/**
 * startsWith(), endsWith()
 */
const name = "Mr. abc";
console.log(name.startsWith("Mr")); // true
console.log(name.endsWith("abc")); // true

이채현

Functions

Arrow Functions

기존 함수의 모습을 개선했다.

기존 함수

1
2
3
4
5
6
7
8
9
10
11

function Hello() {
  return "hi";
}
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(function (name) {
  return name + " ❤️";
});
console.log(hearts);

Arrow Functions(1) - base

1
2
3
4
5
6
7
8
9
10
11

const Hello = () => {
  return "hi";
};
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map((name) => {
  return name + " ❤️";
});
console.log(hearts);

Arrow Functions(2) - implicit return

1
2
3
4
5
6
7

const Hello = () => "hi";
console.log(Hello());

const names = ["kim", "lee", "park"];

const hearts = names.map(name => name + " ❤️");
console.log(hearts);

this in Arrow Functions (Event listener in arrow function)

일반 콜백 함수안에서 this는 이벤트리스너에 연결 된 엘리먼트를 가리킨다. 하지만, arrow function안에서 this는 window를 가리킨다.

결론, this를 함수 안에 익명함수로 사용할 때는 Arrow Function이 아닌 일반 표준 funtion 형태로 사용해야한다.

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

const thisTest = {
  cnt: 0,
  addCnt() {
    this.cnt++;
  },
  addCnt2: () => {
    this.cnt++;
  },
};
console.log(thisTest.cnt); // 0
thisTest.addCnt();
console.log(thisTest.cnt); // 1
thisTest.addCnt2;
console.log(thisTest.cnt); // 1

Default Values

1
2
3
4
5
6

const sayHi = (aName = "anon") => {
	return `Hello ${aName}`;
}

console.log(sayHi());
console.log(sayHi('chaehyeon'));

이채현

Variables

Let and Const

var를 절대 사용하지 않고 let & const 사용하기

• var를 쓰면 안되는 이유

  • var hoisting
    

    때문에…

    • var는 라이프사이클에서… 선언과 초기화를 동시에 한다.
    • global scope에 변수/함수를 선언할 경우 아무리 아래에 선언해도 제일 위로 올라간다. → 어디서 선언했든 상관없이, 항상 제일 위로 선언을 끌어올려준다.
    • block scope를 철저히 무시한다.

  ⇒ 이러한 유연성으로 작은 어플리케이션을 금방 만들 수 있지만, 프로젝트의 규모가 커지면서 나중에서는 선언하지도 않은 값이 멋대로 출력되거나, 개발자들간의 협업에서 여러가지 문제점이 생길 수 있다.

• let은 선언과 초기화가 분리되어 그 사이에 TDZ가 생성되고, 접근할 경우 Reference Error가 발생한다.

• const는 선언과 초기화가 동시에 진행되지만, 선언 이전에 TDZ가 생성되어 접근하면 Reference Error가 발생한다.

  Dead Zone

  temporal dead zone(TDZ)에 영향을 받는 구문은 크게..

  • const 변수
  • let 변수
  • class 구문
  • constructor() 내부의 super()
  • 기본 함수 매개변수

Block Scope

let & const는 block scope {}를 가짐

• 외부에서 접근 불가능하다.

var는 function scope를 가짐

• function 안에서 생성 된 var변수는 외부 function에서 접근 할 수 없지만, if/else, for등안에서 생성 된 var는 어디서는 접근 가능하다.

Immutabe Data Types

primitive types, frozen objects … 값이 바뀌지 않은 type

CONSTANTS는 Immutable Data Types이며, 프로그래밍할 때 왠만하면 Immutable Data Types를 사용하자.

💁🏻‍♀️ Immutable Data Types을 사용해야 하는 이유

• security 해커들이 코드의 값을 바꾸는 것을 방지한다.
• thread safety 어플리케이션을 실행하면 한가지의 프로세스가 할당되고, 그 프로세스 안에서 다양한 thread가 동시에 돌아가게 된다.이때 이 다양한 thread가 동시에 변수에 접근해서 값을 변경할 수 있게 되는 위험성이 생기는데, 이것을 방지한다.
• reduce human mistakes 앞으로 해당 코드를 변경할 더 좋은 방안이 없다면, const 를 이용해 작성하여 본인 혹은 다른 개발자가 코드를 변경할때 발생할 수 있는 실수를 방지해준다.

노션에서 보기

이채현

snapd 설치하기 (snapd 없는 경우)

최신 버전의 우분투에는 snapd가 설치되어있는 것으로 알고 있음

1
2
3
4

# apt # snap
# Ubuntu
sudo apt install snapd
sudo reboot

certbot 설치하기 (snap)

1
2
3

sudo snap install core; sudo snap refresh core
sudo snap install --classic certbot
sudo ln -s /snap/bin/certbot /usr/bin/certbot

cloudflare plugin 설치하기

1
2
3

# dns  cloudflare
sudo snap set certbot trust-plugin-with-root=ok
sudo snap install certbot-dns-cloudflare

cloudflare api token 넣기

1
2
3
4
5
6

mkdir -p ~/.secrets/certbot
vi ~/.secrets/certbot/cloudflare.ini
----------------------------------
# Cloudflare API token used by Certbot
dns_cloudflare_api_token = IdgrE2pGEQxdq43kQPJ8*****************
chmod 600 ~/.secrets/certbot/cloudflare.ini

자신의 도메인 인증서 등록하기

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

#
# *.4084.live
sudo certbot certonly --dns-cloudflare \\
   --dns-cloudflare-credentials ~/.secrets/certbot/cloudflare.ini \\
   -d *.4084.live

-----------------
ubuntu@dev-project-app:~$ sudo certbot certonly --dns-cloudflare \\
>    --dns-cloudflare-credentials ~/.secrets/certbot/cloudflare.ini \\
>    -d *.4084.live
Saving debug log to /var/log/letsencrypt/letsencrypt.log
Enter email address (used for urgent renewal and security notices)
 (Enter 'c' to cancel): [email protected]

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Please read the Terms of Service at
<https://letsencrypt.org/documents/LE-SA-v1.2-November-15-2017.pdf>. You must
agree in order to register with the ACME server. Do you agree?
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
Would you be willing, once your first certificate is successfully issued, to
share your email address with the Electronic Frontier Foundation, a founding
partner of the Let's Encrypt project and the non-profit organization that
develops Certbot? We'd like to send you email about our work encrypting the web,
EFF news, campaigns, and ways to support digital freedom.
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
(Y)es/(N)o: Y
Account registered.
Requesting a certificate for *.4084.live
Waiting 10 seconds for DNS changes to propagate

Successfully received certificate.
Certificate is saved at: /etc/letsencrypt/live/4084.live/fullchain.pem
Key is saved at:         /etc/letsencrypt/live/4084.live/privkey.pem
This certificate expires on 2022-02-26.
These files will be updated when the certificate renews.
Certbot has set up a scheduled task to automatically renew this certificate in the background.

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
If you like Certbot, please consider supporting our work by:
 * Donating to ISRG / Let's Encrypt:   <https://letsencrypt.org/donate>
 * Donating to EFF:                    <https://eff.org/donate-le>
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

생성된 인증서 경로 /etc/letsencrypt/live/4084.live/fullchain.pem /etc/letsencrypt/live/4084.live/privkey.pem

인증서 갱신하기

1
2
3
4
5

#     (--dry-run)
sudo certbot renew --dry-run

#(xx )
sudo certbot renew

crontab을 이용하여 주기적으로 갱신

(매주 일요일 2시 1분에 실행)

1
2
3
4

crontab -e
-----------
# cert renewal
1 2 * * 0 sudo /usr/bin/certbot renew

참고링크

• Let’s Encrypt (letsencrypt.org)
• https://certbot.eff.org/
• User Guide — Certbot 1.15.0.dev0 documentation (eff.org)
• https://certbot-dns-cloudflare.readthedocs.io/en/stable/
• User Guide — Certbot 1.15.0.dev0 documentation (eff.org)
• How to install SSL certificate for Nginx server in Amazon Linux | by Sagar Shrestha | Level Up Coding (gitconnected.com)

노션에서 보기

이채현

인스턴스를 생성할 때 키페어 생성하여 위치확인하기

키 페어 저장

다운로드 한 키페어를 ~/.ssh 폴더 안에 위치시키고 권한을 600으로 변경한다

1
2

cp ~/Downloads/{keypair-name.pem} ~/.ssh/AWS
chmod 600 {keypair-name.pem}

접속

1

ssh -i ./{keypair-name.pem} ubuntu@{public ipv4 주소}

로그인 후

패키지 업데이트

1
2

sudo apt update
sudo apt upgrade

hostname 변경

1
2

sudo hostnamectl set-hostname {원하는 이름}
# 재접속

타임존 변경

1

sudo timedatectl set-timezone Asia/Seoul

개인PC에서 간단히 접속하기

ssh명령어를 이용하여 접속할 때에는 인증키의 위치를 계정명, 주소를 같이 입력해줘야하는 번거로움이 있다.

이를 개인pc의 인증서를 등록하여 인증서없이 바로 로그인해보자

id_rsa 키 생성하기 (개인-Mac)

1
2

cd ~/.ssh
ssh-keygen

이후 ~/.ssh 폴더 내부에 생성 된 id_rsa(private) id_rsa.pub(public) 두개의 키를 확인할 수 있다.
이 중 id_rsa.pub의 내용을 복사한다.

authorized_keys 수정하기 (원격-Ubuntu)

1
2

vim ~/.ssh/authorized_keys
위에서 복사한 id_rsa.pub 내용을 붙여넣고 저장한다.

1. [미래기술25]네이버, 카카오…기업들도 다 뛰어들었다

[미래기술25]네이버, 카카오…기업들도 다 뛰어들었다

국내 대표 인터넷·IT서비스 기업들도 블록체인 시장에 앞다퉈 뛰어들고 있으며, 시장조사 업체 마켓앤마켓에 따르면 지난해 30억 달러(3조5070억원)였던 글로벌 블록체인 시장 규모는 매년 67.3%씩 커져 오는 2025년 397억달러(46조4093억원)에 이를 전망입니다.

가장 활발한 움직임을 보이는 기업은 카카오로 최근 싱가포르에 블록체인 자회사 ‘크러스트’를 설립하며 글로벌 사업을 본격화했으며, 이뿐만 아니라 그라운드X는 대체 불가능 토큰(NFT) 사업에 공을 들이고 있다.

네이버 관계사인 라인도 지난 12일 암호화폐 ‘링크’를 국내 거래소(빗썸)에 처음으로 상장시키며 유동성 확대에 나서고 있습니다. 블록체인 생태계 확장의 일환으로 해석됩니다.

2. “IT기업·전문가 덕 ‘’먹통 백신예약 정상화”

“IT기업·전문가 덕 먹통 백신예약 정상화”

김성훈 한국사회보장정보원 차세대개발본부장은 최근 본보와의 인터뷰에서 “백신 사전예약시스템 개선은 시급성과 기술적 난해함 때문에 군사작전을 방불케 하는 작업이었다”면서 “그러나 기업들이 앞다퉈 최정예 인력들을 보내줬고, 전문가들이 심야 회의와 새벽 퇴근, 주말 반납을 반복해 가며 매달린 덕분에 고도로 복잡한 문제를 풀 수 있었다”고 밝혔다.

LG CNS는 질병청 시스템 전체를 상세진단한 후 최적화해 성능을 높이고, 쌍용정보통신은 질병청 예약시스템 전체를 개선했다. 한국오라클은 서버 2대를 클러스터링 구조로 연결한 데이터베이스 서버를 5대가 연결된 방식으로 바꿨다. 중소기업 시스템어소시에이츠는 전국을 수배해 서버·스토리지를 조달해 인프라를 확장했다. 와탭랩스와 에스티씨랩도 서버 구조 재배치에 참여했다. 바토스는 데이터베이스 설정작업과 테스트를 통해 문제 없는 가동을 도왔다. 큐본·데이타헤븐·이글로벌시스템은 예약처리 성능과 보안 강화작업을 했다.

3. ‘갤 Z플립3’는 어떻게 2030 앱등이들을 돌려 세웠나

‘갤 Z플립3’는 어떻게 2030 앱등이들을 돌려 세웠나

아이폰 고집하던 2030도 갤럭시 Z플립3로 전향

아이폰, 애플워치, 에어팟, 아이패드 등 전자기기를 모두 애플 제품으로 구성하면 다른 브랜드로 넘어가는 게 쉬운 일이 아니다. 애플 제품끼리는 연동이 쉬워 사진 및 동영상 등 데이터를 옮길 때 편리하다.

폰꾸미기로 2030 겨냥… “나만의 핸드폰을 만드는 기분”

삼성전자는 갤럭시 Z플립3을 출시하면서 이전 플립 시리즈보다 4배 커진 커버 디스플레이를 강조했으며 커버 디스플레이는 플립을 닫았을 때 외부에 보이는 작은 화면으로 스마트폰을 열지 않고도 알림이나 메시지를 확인할 수 있고 위젯을 활용해 일정과 날씨를 확인할 수 있다. 특히 커버 디스플레이에 GIF 이미지도 적용 가능한 것이 2030이 열광하는 포인트 중 하나다.

Z플립3 구매자들의 나만의 휴대폰 만들기는 우연이 아닌 기획의 산물이다.

4. 무신사, 스타일쉐어·29CM 지분 100% 인수 완료… “브랜드 패션 시장 시너지 강화”

무신사, 스타일쉐어·29CM 지분 100% 인수 완료… “브랜드 패션 시장 시너지 강화”

무신사는 지난달 7일 스타일쉐어의 지분 전량(100%)을 확보하는 주식매매계약(SPA)과 주식의 포괄적 교환계약을 체결했고 이후 매매 대금 지급을 완료해 최종 인수 절차를 마무리했다.

스타일쉐어는 무신사 자회사로, 29CM는 완전손자회사로 편입되며 기존 인력은 전원 고용 승계하며 세 플랫폼을 합치지 않고 독립 운영한다.

5. NHN, 2021 게임부문 신입·경력사원 공개 채용

NHN, 2021 게임부문 신입·경력사원 공개 채용

NHN은 금일부터 9월 14일까지 약 보름간 원서접수를 받고, 이후 서류전형-1차 면접-2차 면접 순으로 전형과정을 진행한다. 이번 게임부문 채용은 NHN, NHN빅풋, NHN픽셀큐브, NHN RPG 등 총 4개 법인으로 구분된다.

NHN은 지난 4월 진행한 기술 경력 공채에 이어 이번 채용에서도 경력직 부문의 자기소개서 항목을 없애며 입사 절차를 간소화했다. 해외 여행에 결격 사유가 없고, 2022년 2월 졸업 예정자 또는 기졸업자(신입), 또는 게임기획/개발/디자인 경력직이라면 누구나 지원할 수 있다.

1. 구글 ‘픽셀폰’ 국내 출시되나…관련 인력 채용 공고

구글 ‘픽셀폰’ 국내 출시되나…관련 인력 채용 공고

최근 구글은 이와 관련된 인력 채용에 나서며, 국내 출시에 대한 기대감을 키우고 있다. 이에 따라 ‘외산폰의 무덤’으로 불리는 국내 시장에서 구글이 LG전자의 빈자리를 채우며 의미 있는 성과를 낼 수 있을지 주목된다.

2. 정부 인정 첫 민간인증서는 ‘페이코’…네이버·카카오보다 빨랐다

정부 인정 첫 민간인증서는 ‘페이코’…네이버·카카오보다 빨랐다

독점적 공인인증서 제도 폐지 이후 정부가 처음 인정한 사설 인증서는 ‘페이코 인증서’가 됐으며 NHN페이코가 네이버·카카오·토스 등 쟁쟁한 경쟁자들에 한 발 앞서 ‘전자서명인증사업자’ 인정을 획득한 것이라 눈길을 끈다.

회사 측은 이번 정부 인정 획득으로 페이코 인증서의 공신력이 한층 높아져 공공·금융 등 다양한 분야로 사용처를 확대할 발판을 마련했다고 기대했다. 기존에 공인인증서만 허용하던 연말정산 같은 인증 서비스를 간편하게 사용할 수 있는 게 대표적 사례이고, 뿐만 아니라 ‘마이데이터’ 시장 공략에도 앞서나갈 수 있게 됐다. 내년 1월부터 시행되는 마이데이터 서비스의 통합인증 수단에는 전자서명인증사업자 평가·인정을 받은 민간 인증서도 허용된다.

3. 애플, ‘인앱결제 강제’ 사실상 포기…“외부결제 홍보 가능””

애플, ‘인앱결제 강제’ 사실상 포기…“외부결제 홍보 가능”

우리나라에서 세계 최초로 구글과 애플 등 앱장터에서의 인앱결제 강제화를 금지하는 법안이 국회 본회의 통과를 앞둔 가운데 애플이 외부결제를 사실상 허용하도록 정책을 변경했습니다.

애플은 27일 미국 개발자와의 집단 소송과 관련해 앱 사업자가 자사 결제시스템이 아닌 외부결제 방식을 홍보할 수 있도록 하는 내용 등 7가지 사항에 합의했다고 밝혔습니다.

합의 사항은 ▲ 연 매출 100만 달러 미만 사업자에 대한 수수료 감면(30%→15%) 최소 3년 유지 ▲ 앱스토어 검색 시스템 3년 유지 ▲ 외부결제 방식에 대한 정보의 이메일 공유 허용 ▲ 개발자 선택 가능한 기준 가격 수의 확장(100개 미만→500개 이상) ▲ 앱 불승인 시 이의 제기 절차 유지 ▲ 연간 투명성 보고서 작성 및 앱 심사 절차에 대한 통계 공유 ▲ 소규모 개발자 지원 기금 설립 등입니다.

4. “메타버스 성공 위해선 킬러앱 나와야”

“메타버스 성공 위해선 킬러앱 나와야”

이병호 서울대 전기정보공학부 교수는 27일 최종현학술원이 ‘메타버스 세계화’를 주제로 개최한 웨비나에서 “현재 메타버스의 콘텐츠는 주로 게임, 단기 이벤트 등에 치중돼 있다”며 “메타버스가 진정으로 사회적 영향력을 발휘하려면 일상적인 사용을 위한 앱이나 대중의 수요를 채워줄 수 있는 킬러 앱이 개발돼야 합니다.”라고 지적했다.

그는 “메타버스가 대중화를 이루려면 AR·VR 기기의 시각적 피로를 최소화하고, 기기의 크기를 줄이면서 시야각 등을 개선해야 한다”지적했다. 특히 시각적 피로도를 낮추려면 지연성을 줄이는 게 관건이다.

5. 전기차 충전 플랫폼 ‘모두의충전’, 서울 전역으로 서비스 확대

전기차 충전 플랫폼 ‘모두의충전’, 서울 전역으로 서비스 확대

데이터를 기반으로 운영하는 ‘모두의 충전’은 지난 8개월 동안 강남 3구(송파-강남-서초)에 대리충전 서비스를 제공해왔으며, 최근 전문 탁송 기업과의 신규 계약을 통해 서비스 지역을 서울권 전역으로 확대했다.

스칼라데이터 윤예찬 대표는 “전기차 최대 등록지인 서울을 시작으로 향후 부산, 대구, 제주 등으로 서비스 지역을 확대할 계획으로 머신러닝 기반 충전 스케줄링 서비스, 충전 통합 결제 시스템, 전기차 베터리 보험 상품 연계 등 전기차와 관련한 다양한 서비스를 제공할 예정”이라며, ”전기차 충전을 생각하면 가장 먼저 떠오르는 스타트업이 되겠다.”라고 밝혔다.

1. 10년간 고집한 ‘게임셧다운제’…여가부 돌연 “폐지”

10년간 고집한 ‘게임셧다운제’…여가부 돌연 “폐지”

밤 12시부터 오전 6시까지 심야 시간에 청소년의 게임 이용을 차단하는 규제인 ‘강제적 셧다운제’가 10년 만에 폐지 수순을 밟으며, 게임 이용 시간을 직접 설정할 수 있는 ‘게임시간선택제’가 그 자리를 대신한다.

이번 변화를 두고 직접적 당사자인 게임 업계에서는 일단 폐지를 반기면서도 다양한 의견이 나오고 있고, 72개 게임사를 회원으로 둔 한국게임산업협회는 “갈라파고스 규제인 강제적 셧다운제의 폐지 결정을 적극 지지하고 환영하며 관련 법안 개정이 신속하게 이뤄지기를 기대한다”는 입장을 냈다. 한국게임학회장을 맡은 위정현 교수는 “실효성이 없는 법적 규제 자체를 아예 없애고 부모와 학생, 각 가정이 국가에 위임한 스스로의 권한을 찾아와야 한다”고 했다.

2. 토스도 ‘본인확인’서비스…이통사 독무대 깬다

토스도 ‘본인확인’서비스…이통사 독무대 깬다

모바일 금융 플랫폼 토스를 운영하는 비바리퍼블리카가 본인확인기관으로 지정됨에 따라 이동통신 3사가 독점하던 본인 확인 시장에 핀테크 기업이 발을 들인 것이며, 토스와 함께 도전장을 내민 KB국민은행은 이번에 탈락했다.

핀테크와 금융사가 인증 시장에 도전장을 내미는 이유는 인증이 금융 서비스를 완결하는 핵심이기 때문으로 돈이 오가는 금융 거래와 온라인 상거래를 이용할 때는 회원 가입과 비밀번호 변경 등 모든 절차에 본인 확인과 인증 절차가 필수적인데 토스가 본인확인기관으로 지정되면서 본인 확인부터 인증에 이르는 모든 절차를 직접 관리하게 된다.

3. 컴투스, 메타버스사 ‘위지윅’ 최대주주로…”글로벌 콘텐츠사로 가속화”

컴투스, 메타버스사 ‘위지윅’ 최대주주로…”글로벌 콘텐츠사로 가속화”

위지윅은 증강현실(AR)·가상현실(VR)·가상융합현실(XR) 등의 기술을 결합해 미래 산업으로 부상하는 메타버스 프로젝트를 적극 추진하고, 지식재산(IP) 생산부터 2차 제작까지 전 과정을 하나의 스튜디오에서 통합 진행하는 위지윅만의 종합 제작 시스템도 구축하고 있으며, 이번 인수로 컴투스는 차세대 미디어 콘텐츠 산업에서 독보적 위치에 올라선 위지윅의 IP와 제작 역량을 확보해 글로벌 종합 콘텐츠 기업으로의 성장을 가속화할 수 있게 됐다.

영화, 드라마, 웹소설 등 위지윅의 여러 작품을 글로벌 게임으로 제작하고, 컴투스의 인기 게임들을 다양한 콘텐츠로 확장하는 등 트랜스 미디어 전략으로 탄탄한 IP 밸류체인을 만들어갈 계획이다.

• 위지윅은 세계 최고 수준의 컴퓨터그래픽(CG)·시각특수효과(VFX) 기술로 넷플릭스 ‘승리호’를 비롯해 국내외 다양한 영화, 드라마 등을 만들어온 콘텐츠 제작사다.

4. 페북 ‘얼굴정보’ 수집이 꼼수로 적발된 이유

페북 ‘얼굴정보’ 수집이 꼼수로 적발된 이유

25일 개인정보보호위원회는 페이스북을 비롯한 넷플릭스, 구글 등 해외 플랫폼 사업자들을 대상으로 개인정보보호법 위반 행위를 적발, 과징금 총 66억6천만원과 과태료 2천900만원을 부과하는 등 시정명령을 내렸고, 과징금의 대부분이 페이스북의 불법 얼굴인식 정보 생성 및 수집에 따른 것이다.

페이스북은 이용자 정보를 수집 및 활용, 관리하는 방식을 안내하는 ‘데이터 정책’을 2018년 4월 수정, 얼굴인식 기능이 활성화될 수 있다는 내용을 명시했고, 이 기능이 활성화돼 있으면 이용자가 프로필에 등록한 사진, 영상 등을 토대로 얼굴에 대한 수치화된 정보(템플릿)를 생성, 수집하게 된다. 하지만 문제는 이용자가 가입 전 얼굴인식 기능을 비활성화할 수 없었다는 점이다.

이용자가 가입하자마자 이런 설정을 수정하지 않고 무심코 프로필에 얼굴 이미지를 등록하게 되면, 추가적인 동의 절차 없이 얼굴 정보가 수집된 것이다.