기록 박물관

`개발자의 하루를 바꾸는 코파일럿 & 챗GPT` 읽고서..

방현준 — Sat, 2 Dec 2023 22:15:10 +0900

`개발자의 하루를 바꾸는 코파일럿 & 챗GPT`를 구매한 이유

나는 Chat GPT를 애용한다.

Chat GPT가 막 입소문 돌기 시작했을 때 부터 애용을 했는데, 알고리즘부터 코드 검수, 심지어 단위 테스트까지 척척해주는 GPT를 볼 때마다 너무 사랑스러웠다.

하지만, 최근 Chat GPT를 사용하면서 GPT가 멍청해진것 같이 느껴졌다.

나만 그런게 아닌가보다...

프롬프트가 잘못됐나 싶어서 프롬프트도 개선해보기도 했지만, 여전히 멍청한 느낌이 들었다.

특히, 틀린말을 정답처럼 말하는게 혈압이 올라, 기존의 결제하던 Chat GPT를 해지하고 최근 추천 받았던 코파일럿으로 갈아탔다.

(VSCode에 플러그인이 정식으로 출시했다는것도 한 몫 한듯 하다ㅋㅋㅋ)

그렇게 코파일럿을 결제하고 사용하면서 이걸 어떻게 사용하나 블로그 글을 찾아보던 중 `개발자의 하루를 바꾸는 코파일럿 & 챗GPT`이라는 책을 발견하게 되었고, 이건 나에게 도움을 주겠다 싶어서 냉큼 구매해버렸다!!

`개발자의 하루를 바꾸는 코파일럿 & 챗GPT`를 읽고나서

표지는 이쁘다, 그래서 끌렸다..

결론부터 말하겠다.

Chat GPT 혹은 코파일럿을 사용해서 더 나은 방법을 알고 싶어 이 책을 구매하고 싶으신 거라면 차라리 다른책을 사거나 남들이 작성한 블로그를 보는게 더 도움될 것이다.

이 책의 전반적인 내용은 하나의 시뮬레이션을 가져와서 코파일럿과 Chat GPT한테 `나, 이거 모르는데 답변해줘`라고 한 후, 그걸 각 툴마다 비교해서 어떤게 좋다 어떤게 나쁘다 이런식의 내용이 전반으로 가득차 있다.

(물론, 마지막에 단위테스트 내용은 좀 볼만했지만, 그외에는 대충훑고 넘기기 바빴다...)

제목은 그럴싸하게 `개발자의 하루를 바꾸는`이라고 적혀있지만, 전혀 바꾸지 못할것 같은 내용에 너무 실망이 큰 책이었다...

여러모로 참 아쉬운 책이다...

ECR 커맨드

방현준 — Wed, 1 Mar 2023 19:05:25 +0900

- `aws configure sso`

- 로그인

- `aws ec2 describe-instances --profile bhj`

- `export AWS_PROFILE=bhj`

- `aws ecr get-login-password --region ap-northeast-2 | sudo docker login --username AWS --password-stdin 621342946888.dkr.ecr.ap-northeast-2.amazonaws.com`

AWS로 배운 것

방현준 — Sat, 25 Feb 2023 21:41:30 +0900

퍼블릭 서브넷 : 외부에서 접근 가능한 서브넷, 주로 웹서버 용도로 사용

프라이빗 서브넷 : 외부에서 접근이 불가능한 서브넷, 동적 서버를 위해 사용

---

원래는 퍼블릭 - DMZ - 프라이빗으로 나뉘어져 있지만, 현재는 퍼블릭(DMZ) - 프라이빗으로 바뀜

---

aws에는 session manager란게 있다, 프라이빗 서브넷에 접근을 용이하게 하는 것, 프라이빗은 ssh 로 접근이 불가능하다. 할 순 있지만, vpn을 쓰는등 암튼 복잠함.... 그래서 session manager를 이용하는게 편하다. 하지만 session manager는 IAM 롤AmazonSSMManagedInstanceCore을 설정해야하고 VPC 엔드포인트를 ssm, ssmmessage, ec2message를 설정해야함..

---

베스쳔 호스트는 프라이빗 서브넷이 외부로 나가는 트래픽을 보낼때 사용하는 통로다 하지만, 이것은 인스턴스이기에 최근에는 잘 사용 안하는듯... 대신 NAT 게이트웨이를 사용함. NAT 게이트웨이도 똑같이 프라이빗 서브넷이 외부로 나가는 트래픽을 보낼때 사용하는 통로이지만, 둘이 뭔 차인지는 찾아봐야 할듯??

IP 클래스 방식이란?

방현준 — Sat, 28 Jan 2023 01:55:05 +0900

사전지식

아래 내용에는 옥텟이란 용어가 나옵니다.

만약 옥텟에 대해서 잘 모른다면 아래 링크를 참고해주세요

https://noogoonaa.tistory.com/126

옥텟(Octet)이란?

옥텟(Octet)이란? 옥텟이란, IP주소를 이진법으로 변환하여 8개씩 나눈 비트 단위를 옥텟이라고 합니다. 왜 옥텟이라는 용어가 생겼을까? 사실 CS공부를 하신 분들이라면 다 1바이트가 8비트라는 것

noogoonaa.tistory.com

IP 클래스 방식이란?

IP 클래스 방식은, 전통적인 IP 할당 방식으로, A 클래스, B 클래스, C클래스 세가지의 클래스 기반으로 IP를 나누어 할당하는 방식입니다.

1993년도에 적용된 CIDR 방식 이전에 사용하던 방식으로, 각 클래스는 각각의 용도에 맞춰 효율적으로 쪼개 놓았다가 필요한 곳이 생기면 쪼개놓은 IP대역을 나눠주는 방식으로 IP를 할당하였습니다.

각 클래스별 용도

클래스는 위에서 이야기했다 시피, 3가지의 클래스 기반으로 나누어져 있다고 했습니다.

(D클래스(멀티캐스트 용)와 E클래스(여유 분)도 있지만, 특수용이기에 이렇게만 알아두시면 됩니다)

각 클래스는 옥텟 범위로 나뉘어 지는데, 이 옥텟 범위로 나뉘지면서, A클래스, B클래스, C클래스로 나뉘어 집니다.

A 클래스

A클래스는 첫번째 옥텟에서 0~127 대역까지만 네트워크 영역으로 가지고 나머지는 호스트 영역으로 가져가는 클래스입니다.

(단, 여기서 첫번째 옥텟의 첫번째 비트는 0으로 고정입니다.)

그렇기에, 할당 할 수 있는 IP가 가장 많은 클래스 이고(반 이상 네트워크 영역을 차지하기에…) 약 1,600만개의 호스트를 가질 수 입니다.

대규모 네트워크를 가질 경우 할당되어지는 클래스입니다.

그리고, 127.0.0.0은 루프백 주소로 사용되어집니다.

A클래스 계산

(만약 정확한 계산을 어떻게 하는지 알고싶으신 분은 아래 내용을 보시면 되시고 아니라면 B클래스 섹션으로 넘어가도 됩니다)

네트워크 영역(0~127)을 제외한 나머지 호스트 영역은 3옥텟으로 24비트를 가집니다(1옥텟당 8비트이므로..)

즉 호스트 영역에서 만들 수 있는 가지수는 2^24입니다.

그렇기에 2^24을 계산하면 16,777,216개가 나오고 A 클래스의 네트워크 영역 0~127 이므로 계산식을 다시하면 (2^24) * 128이 됩니다.

그럼 할당 가능한 IP수는 2,147,483,648이 됩니다.

다만, 여기서 16,777,216 - 2를 해주어야 우리가 실제 사용가능한 IP갯수가 나옵니다.

왜냐하면 호스트 주소가 모두 0인경우 네트워크 주소로, 모두 1인경우는 브로드캐스트 주소로 사용되어지기 때문입니다.

B 클래스

B클래스는 A클래스 다음으로 IP가 많은 클래스이며, 중규모의 네트워크입니다.

첫번째 옥텟(128~191)과 두번째 옥텟(0~256)을 네트워크 영역으로 가지며 나머지 세번째, 네번째 옥텟을 호스트 영역으로 가집니다.

(단, 여기서 첫번째 옥텟의 첫번째 비트는 1, 두번째 비트는 0으로 고정입니다.)

따라서 약 65,000개의 호스트 영역을 가질 수 있고, 할당 가능한 IP는 약 10억개 입니다.

B 클래스 계산

(만약 정확한 계산을 어떻게 하는지 알고싶으신 분은 아래 내용을 보시면 되시고 아니라면 C클래스 섹션으로 넘어가도 됩니다)

호스트 영역은 A클래스와 계산법은 똑같습니다.

따라서 2^16로 계산하면 65,536개가 나오고

네트워크 영역은 첫번째 옥텟이 128~191개이므로 64개의 네트워크 영역을 가지고 두번째 옥텟은 256개를 가지니 64 * 256을 계산하면 16,384개가 나옵니다.

그럼 아까와 마찬가지로 65,534 * 16,386를 계산하면 할당 가능한 IP수가 나오는데 그 값은 1,073,741,824 입니다.

여기서 1,073,741,824 - 2를 하면 1,073,741,822개가 실제 사용 가능한 IP입니다.

C 클래스

C클래스는 소규모 네트워크이고, 첫번째 옥텟 범위가 192~233으로 32개의 네트워크 영역 그리고 두번째 옥텟(0~255) 세번째 옥텟(0~255)을 네트워크 영역으로 가지는 클래스입니다.

(단, 여기서 첫번째 옥텟의 첫번째 비트는 1, 두번째 비트는 1, 세번째 비트는 0으로 고정입니다.)

따라서 약 256개의 호스트 영역을 가질 수 있고, 할당 가능한 IP는 약 5억개 입니다

C 클래스 계산

(만약 정확한 계산을 어떻게 하는지 알고싶으신 분은 아래 내용을 보시면 되시고 아니라면 다음 섹션으로 넘어가시는걸 추천드립니다)

네트워크 영역의 첫번째 옥텟은 32개의 네트워크 영역을 가지고 나머지는 256개씩 가지기에 32256256을 계산하면 2,097,152개가 나옵니다.

호스트 영역은 위에서 말씀 드렸다시피 256개가 나오므로 실제 할당 가능한 IP는 2,097,152 * 256을 하면 536,870,912개가 나옵니다.

여기서 536,870,912 - 2를 해서 사용가능한 IP 갯수는 536,870,910입니다.

IP 클래스 방식의 한계

IP 클래스의 한계는 너무 명확했습니다.

3가지의 클래스를 가지고 IP를 할당하다 보니, IP가 너무 많아, 사용되어지지 않는 IP가 존재하거나, IP가 부족해져 그 상위 클래스로 올라가버리면서 또 낭비하는 IP가 많아지게 되는거죠

그렇기에 앞서 설명한 3개의 클래스만 존재하는 할당 방식은 전혀 유연적이게 대응을 할 수 없었습니다.

하지만, 인간은 항상 발전하는 동물이기에 그 다음에 나온 방식이 CIDR입니다.

(CIDR은 추후 포스팅 하겠습니다)

출처

옥텟(Octet)이란?

방현준 — Sat, 28 Jan 2023 00:05:49 +0900

옥텟(Octet)이란?

출처 : https://imweb.me/blog?idx=102

옥텟이란, IP주소를 이진법으로 변환하여 8개씩 나눈 비트 단위를 옥텟이라고 합니다.

왜 옥텟이라는 용어가 생겼을까?

사실 CS공부를 하신 분들이라면 다 1바이트가 8비트라는 것을 아실겁니다.

그럼 여기서 갑자기 의문이 들 수 있습니다.

그냥 8비트를 의미하는거라면 바이트를 사용해도 되는데 왜 옥텟이라는 용어를 만들었을까 하구요..

사실 과거에는 바이트가 무조건 8비트라는 개념이 존재하지 않았습니다.

4비트, 7비트 등 다양했죠….
(왜냐하면 바이트의 저장해야하는 문자가 기술이 발전함에 따라 증가했으므로….)

그렇기에 8비트를 정확히 지칭하는 단어가 존재하지 않아, 옥텟이라는 단위를 만들게 된 것입니다.

옥텟은 그럼 지금도 사용하는 용어입니까?

킹 갓 제너럴 엠페럴 충무공 챗 GPT A.K.A 갓 GPT 님께서 아직 여전히 사용하신다고 합니다.
다만, 이제는 일반적으로 1바이트가 8비트로 고정이 되었기에 보통은 바이트로 사용하는경우가 많고 옥텟은 역사속으로 사라져 가는 느낌입니다.
(혹시 모르죠…바이트가 또 10비트가 된다면 옥텟을 다시 사용할지도요….)

출처

Canvas애니메이션을 구현할 때 갤럭시 혹은 아이폰 디바이스에서 애니메이션 속도가 다른 이슈 해결하는 법

방현준 — Tue, 24 Jan 2023 18:58:51 +0900

만약 이전 글을 보시지 않았다면, 보시고 오는것을 추천드립니다.

Next.js(React.js)에서 Canvas 사용법 with Typescript

여는 글 최근 Next.js에서 Canvas를 사용할 일이 있었습니다. 기존에 바닐라 자바스크립트에서는 공부를 했었지만, Next.js로는 해본적이 없었고, 따로 정리된 블로그가 딱히 없었습니다. 그래서 최근

noogoonaa.tistory.com

여는 글

최근 Canvas로 개발을 진행하면서, 여러 문제들을 맞닥뜨렸습니다.

그중에서 가장 골치아팠던 문제중 하나가, 이번 주제입니다

문제의 발단

프로젝트를 진행하면 보통 개인 디바이스를 통해서 확인을 하는경우가 많습니다.

저의 디바이스는 갤럭시 S22 울트라이기에 주 테스트는 갤럭시에서 진행했습니다.

어느정도 테스트 가능한 개발이 완료되었고 IOS 테스트 폰에서 테스트를 진행해 보니, 이상하게 화면 터치 시 갤럭시와 IOS의 canvas 애니메이션이 다른것을 발견했습니다.

사전지식

기본적으로 여러분들이 60Hz이상의 주사율을 가진 모니터를 사용하지 않는 이상 디스플레이는 1초에 최대 60번의 렌더링을합니다.

그렇기에 requestAnimationFrame을 사용하면 초당 60번 호출된다는 것이 그 이유입니다.

만약, 여러분들이 144 Hz 게임용 모니터를 사용한다면?

1초에 최대 144번의 렌더링이 이루어지는 것이고 requestAnimationFrame또한, 144번 호출되는것이지요.

그럼 이 내용을 잘 이해하셨다는 가정하의 아래 이야기 해보겠습니다.

캔버스 애니메이션이 다른 이유

일단 캔버스 애니메이션이 다른 이유는 제가 파악하기로는 두가지가 있습니다.
(더 있을 순 있지만, 제가 찾아본 바로는 아래 두가지가 최대였습니다… 시간이 지나면, 더 생길수도…)

첫번째로는 ios 디바이스가 저전력 모드일 경우입니다.

기본적으로 아이폰 13프로 이상 모델에서는 ProMotion기술이 적용되어 최소 10Hz에서 최대 120Hz까지 가변 주사율이 적용됩니다.
(웹 브라우저에서는 60Hz 고정인것 같습니다.)

하지만, 아이폰에서 배터리 저전력 모드로 들어가게 되면 10Hz ~ 60Hz 주사율로 고정이 됩니다. 웹 브라우저에서는 60Hz를 다 해주진 않는것 같구요.

따라서 안드로이드에서는 빠른데, ios에선 느린 현상이 발생하는 겁니다.

저전력 모드일 때

두번째로는 디스플레이 클릭시 안드로이드의 가변적 120hz 적용으로 인한 주사율 차이입니다.

갤럭시도 120Hz 디스플레이를 지원하고있고, 120Hz 프레임 활성화를 시켜놓으면 부분적으로(화면 클릭 혹은 스크롤 시) 120Hz로 올려줍니다.

그렇기에, 유저가 그냥 애니메이션을 볼 땐 갤럭시에서 60Hz의 주사율을 고정하고 아이폰 또한 60Hz로 같은 프레임으로 보게 되지만, 클릭을 하게 되면 갤럭시 120Hz, 아이폰 60Hz로 상이판 프레임을 보게 됩니다.

그럼, 이것을 어떻게 해결해야 할까요?

ios 디바이스가 저전력 모드일 경우 해결 방법

이건, 현재로서는 답이 없습니다.

네이티브가 아닌 브라우저에서 이 문제를 해결하기 위해서 할 수 있는 방법으로는 유저에게 저전력 모드를 꺼 달라고 호소하는 방법밖에는요…

(시간이 지나, 다른 방법이 나올수도 있습니다 :0)

디스플레이 클릭시 갤럭시의 가변적 120hz 적용 이슈 해결

저전력 모드 이슈의 경우는 아직까진 해결법이 없지만 이 이슈는 해결 방법이 있습니다.

120Hz를 60Hz로 강제로 맞추는 방법으로 해결이 가능합니다.

테스트 용 프로젝트 생성

기본적인 테스트 프로젝트는 이 포스팅을 확인하여 만들어주세요

Next.js(React.js)에서 Canvas 사용법 with Typescript

noogoonaa.tistory.com

그리고 테스트 가능하도록 아래 코드를 추가하겠습니다.

pages/index.tsx

import { NextPage } from "next";
import Canvas from "@/components/Canvas";
import useCanvas from "@/hooks/Canvas/useCanvas";

// 해당 코드 추가
let i = 0;

const Home: NextPage = () => {
    const onAnimation = (ctx: CanvasRenderingContext2D) => {
        ctx.clearRect(0, 0, 500, 500);
        // 상자가 애니메이션 되도록 처리
        ctx.fillRect(i % 300, 20, 30, 30);

        // 애니메이션 처리를 위한 부분
        i = i += 1 * 5;
    };

    const { canvasRef } = useCanvas({
        animate: onAnimation,
    });

    return (
        <>
            <Canvas canvasRef={canvasRef} />
        </>
    );
};

export default Home;

그리고 실행을 하면 상자가 계속에서 좌에서 우로 움직입니다.

위에서 보던 영상과 같은 역할을 하는 프로젝트를 완성하였습니다.

requestAnimationFrame 사전 지식

requestAnimationFrame은 브라우저가 화면을 그리기 이전에, 호출되어지는 API입니다.

이 API는 콜백함수를 실행할 때, 하나의 인자를 전달해주는데,

DOMHighResTimeStamp라는 값을 같이 넘겨줍니다.

복잡하게 파고들면 어렵기에 간단히 말해서 requestAnimationFrame에 전달된 콜백 함수가 호출되는 timestamp라고 이해하면 편합니다.

강제로 프레임을 낮추는 함수 작성

먼저 다 작성한 코드를 보여드리겠습니다.

hooks/Canvas/useCanvas.tsx

import { RefObject, useEffect, useRef, useState } from "react";

interface InitialProps {
	animate: (ctx: CanvasRenderingContext2D) => void;
}

function useCanvas({ animate }: InitialProps) {
	const canvasRef: RefObject<HTMLCanvasElement> =
		useRef<HTMLCanvasElement>(null);
	const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);

	useEffect(() => {
		if (canvasRef?.current) {
			const canvas = canvasRef.current;
			const context = canvas.getContext("2d");

			setCtx(context);
		}
	}, []);

	useEffect(() => {
		let requestId: number;

		const callBackReqestAnimation = (fps: number) => {
			let fpsInterval = 1000 / fps;
			let prevRenderTimestamp: number;

			const cb = (timestamp: number) => {
				if (prevRenderTimestamp === undefined) {
					prevRenderTimestamp = window.performance.now();
				}

				const elapsed = timestamp - prevRenderTimestamp;

				if (elapsed >= fpsInterval) {
					prevRenderTimestamp = timestamp - (elapsed % fpsInterval);
					if (ctx) animate(ctx);
				}
				requestId = window.requestAnimationFrame(cb);
			};
			return cb;
		};

		const initRequestAnimation = (callback: (timestamp: number) => void) => {
			requestId = window.requestAnimationFrame(callback);
		};

		initRequestAnimation(callBackReqestAnimation(60));

		return () => {
			window.cancelAnimationFrame(requestId);
		};
	}, [ctx, animate]);

	return {
		canvasRef,
	};
}

export default useCanvas;

어떤가요? 이해가 되시나요?

만약 이해가 되신다면 당신은 천재! 아래 내용은 더이상 안보셔도 됩니다.

하지만, 전 처음에 이해가 잘 안갔기에 한번 자세히 요목조목 뜯어 보겠습니다.

자세히 살펴보기

사실 이 강제로 프레임을 낮추는 코드는 살펴보면 엄청 간단합니다.
다만, 프레임이라는 개념이 들어갔기에 조금 복잡하게 느껴질 수 있습니다.

하지만 괜찮습니다. 아래 내용을 보면 이해가 금방 되실겁니다.

아까 사전지식 섹션에서 제가 브라우저는 초당 60프레임을 기준으로 렌더링 한다고 했습니다.

하지만, 문제가 되는것은 120Hz입니다.

그렇다면 간단합니다.

120프레임 중 어떠한 조건에 한하여 애니메이션을 그리거나 안그리면 됩니다. 해당 로직으 바로 이 로직입니다.

...
const callBackReqestAnimation = (fps: number) => {
	let fpsInterval = 1000 / fps;
	let prevRenderTimestamp: number;
	const cb = (timestamp: number) => {
		if (prevRenderTimestamp === undefined) {
			prevRenderTimestamp = window.performance.now();
		}

		const elapsed = timestamp - prevRenderTimestamp;

		if (elapsed >= fpsInterval) {
			prevRenderTimestamp = timestamp - (elapsed % fpsInterval);
			if (ctx) animate(ctx);
		}
		requestId = window.requestAnimationFrame(cb);
	};
	return cb;
};
...

좀 더 상세히 파보겠습니다.

1초는 1000ms입니다. 그렇다면 우리가 60프레임을 그릴경우 몇 밀리초마다 화면을 렌더링 해줘야 할까요?

바로 16.66666667(이하 17밀리 초)밀리 초 마다 화면을 그려주어야 합니다. 그 로직이 아래 로직입니다.

...
const callBackReqestAnimation = (fps: number) => {
	// 1000밀리 초 / 원하는 프레임 = 렌더링 해야될 밀리초 값
	let fpsInterval = 1000 / fps;
	...
};
...

자 이제, 우리는 17밀리초마다 화면을 그려주어야 한다는것을 알 수 있게 되었습니다.

하지만 이 값을 가지고 진짜 그려야 하는 순간인지 아닌지를 알 수 없습니다.

따라서 함수가 시작되는 시간을 알아야 합니다.

아까, 제가 requestAnimationFrame이 받는 콜백 매게변수로 타임스탬프 인자를 하나 전달해 준다고 했습니다.

그럼 이 함수를 가지고 현재 시간이 렌더링을 해야하는 순간인지 아닌지를 판단할 수 있게 됩니다.

**...
let fpsInterval = 1000 / fps;
let prevRenderTimestamp: number;
const cb = (timestamp: number) => {
	// 만약 이전에 한번도 렌더링 된 값이 없다면 현재 시간을 넣어줌
	if (prevRenderTimestamp === undefined) {
		prevRenderTimestamp = window.performance.now();
	}

	// 현재 시간 - 이전 렌더링 된 시간 = 이전 렌더링 이후 경과된 시간
	const elapsed = timestamp - prevRenderTimestamp;

	// 이전 렌더링 이후 경과된 시간이 과연 렌더링 하는 시간과 같은지 판단하는 조건
	// 예를들어 17밀리초 마다 한번씩 그려야 하는데 경과된 시간이 13밀리초라면 그리지 않음
	// 하지만, 17밀리초 마다 한번씩 그려야 하는데 경과된 시간이 26밀리초라면 그림
	if (elapsed >= fpsInterval) {
		// 다음 렌더링 해야될 시간
		// 17밀리초마다 그려야 하지만 26밀리초에 그렸다면 남은 9밀리초는 다음 렌더링 시간에서 제외
		prevRenderTimestamp = timestamp - (elapsed % fpsInterval);

		// 렌더링
		if (ctx) animate(ctx);
	}
	requestId = window.requestAnimationFrame(cb);
};
...**

이게 끝입니다. 어때요 로직을 설명 들으니 간단하죠?

그럼 어디 진짜 잘 동작하는지 확인을 해보겠습니다.

화면이 120hz까지 올라가도 애니메이션이 빨라지지 않는것을 확인할 수 있습니다.

기술적인 한계

이 코드에는 극명한 기술적인 한계가 존재합니다.

바로 주사율이 렌더링하는 주사율 보다 낮을때는 대응이 어렵다는 것 입니다.

이 부분은, 추후 좋은 방법이 있다면 또 공유하도록 하겠습니다.

마무리

생각보다 글이 많이 길어졌습니다.

로직을 설명하니 이렇게 길어지는군요…

다음에는 더 짧은 글을 작성할 수 있도록 노력해보겠습니다.

감사합니다.

Next.js(React.js)에서 Canvas 사용법 with Typescript

방현준 — Mon, 23 Jan 2023 23:42:20 +0900

여는 글

최근 Next.js에서 Canvas를 사용할 일이 있었습니다.

기존에 바닐라 자바스크립트에서는 공부를 했었지만, Next.js로는 해본적이 없었고, 따로 정리된 블로그가 딱히 없었습니다.

그래서 최근에 사용하면서 가장 사용하기 좋았던 방식을 한번 공유해 보도록 하겠습니다.

Canvas란?

Canvas는 HTML태그중 하나로 브라우저에서 도형 혹은 이미지들을 렌더링할 수 있는 요소중 하나입니다. 주로 게임 혹은 그래픽적인 요소를 브라우저에서 표현할 때 사용합니다.

프로젝트 셋팅

터미널에서 프로젝트를 타입스크립트로 생성합니다.

yarn create next-app canvas_example --typescript
---
✔ Would you like to use ESLint with this project? … Yes
✔ Would you like to use `src/` directory with this project? … No
✔ Would you like to use experimental `app/` directory with this project? … No
✔ What import alias would you like configured? … @/*

pages/index.tsx

import { NextPage } from "next";

const Home: NextPage = () => {
  return (
    <div>테스트</div>
  )
};

export default Home;

styles/globals.css

body {
	margin: 0;
}

Canvas 컴포넌트 생성 및 적용

캔버스 태그를 가지는 컴포넌트를 생성하고 적용해보도록 합시다.

components/Canvas/index.tsx

const Canvas: React.FC = () => {
	return <canvas width={500} height={500} />;
};

export default Canvas;

pages/index.tsx

import Canvas from "@/components/Canvas";
import { NextPage } from "next";

const Home: NextPage = () => {
    return <Canvas />;
};

export default Home;

그러면 아래 사진처럼 canvas가 생성 된 것을 확인할 수 있습니다.

Canvas에 사각형 그리기

우리는 canvas를 생성하는 컴포넌트를 만들었습니다.

하지만, canvas만 만든다고 해서 canvas를 사용할 수 있는것은 아닙니다.

그래서 컨텍스트를 받고 그 컨텍스트를 이용해 작은 사각형 하나를 만들어 보도록 하겠습니다.

components/Canvas/index.tsx

import React, { RefObject, useEffect, useRef, useState } from "react";

const Canvas: React.FC = () => {
	const canvasRef: RefObject<HTMLCanvasElement> =
		useRef<HTMLCanvasElement>(null);
	const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);

	// 컨텍스트 셋팅
	useEffect(() => {
		if (canvasRef?.current) {
			const canvas = canvasRef.current;
			const context = canvas.getContext("2d");

			setCtx(context);
		}
	}, [canvasRef]);

	useEffect(() => {
		let requestAnimationId: number;

		// 애니메이션 처리
		const onAnimation = () => {
			if (ctx) {
				ctx.fillRect(20, 20, 30, 30);
			}
			requestAnimationId = window.requestAnimationFrame(onAnimation);
		};

		// 리퀘스트 애니메이션 초기화
		requestAnimationId = window.requestAnimationFrame(onAnimation);

		return () => {
			// 기존 리퀘스트 애니메이션 캔슬
			window.cancelAnimationFrame(requestAnimationId);
		};
	}, [ctx]);

	return <canvas ref={canvasRef} width={500} height={500} />;
};

export default Canvas;

코드가 길긴 하지만, 바닐라 자바스크립트에서 canvas를 사용해 보셨고, 리액트를 사용해 보셨다면 충분히 이해가 갈 코드입니다.

실행해보면 결과는 아래와 같습니다.

Custom Hook을 사용하여 비즈니스 로직 분리

우리는 canvas를 사용하여 사각형을 그렸습니다.

하지만, 컴포넌트 안에서 그래픽을 만드는 것은 재사용성을 버리겠다는 뜻입니다.

따라서 커스텀 훅을 통해서 비즈니스 로직을 분리하도록 하겠습니다.

hooks/Canvas/useCanvas.tsx

import { RefObject, useEffect, useRef, useState } from "react";

interface InitialProps {
	animate: (ctx: CanvasRenderingContext2D) => void;
}

function useCanvas({ animate }: InitialProps) {
	const canvasRef: RefObject<HTMLCanvasElement> =
		useRef<HTMLCanvasElement>(null);
	const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);

	// 컨텍스트 셋팅
	useEffect(() => {
		if (canvasRef?.current) {
			const canvas = canvasRef.current;
			const context = canvas.getContext("2d");

			setCtx(context);
		}
	}, []);

	// 애니메이션 처리
	useEffect(() => {
		let requestId: number;

		const RequestAnimation = (ctx: CanvasRenderingContext2D | null) => () => {
			if (ctx) {
				animate(ctx);
			}
			// 애니메이션 콜백 반복
			requestId = window.requestAnimationFrame(RequestAnimation(ctx));
		};

		// 애니메이션 초기화
		requestId = window.requestAnimationFrame(RequestAnimation(ctx));

		return () => {
			window.cancelAnimationFrame(requestId);
		};
	}, [ctx, animate]);

	return {
		canvasRef,
	};
}

export default useCanvas;

components/Canvas/index.tsx

import React, { RefObject } from "react";

interface CanvasProps {
	canvasRef: RefObject<HTMLCanvasElement>;
}

const Canvas: React.FC<CanvasProps> = ({ canvasRef }) => {
	return <canvas ref={canvasRef} width={500} height={500} />;
};

export default Canvas;

pages/index.tsx

import { NextPage } from "next";
import Canvas from "@/components/Canvas";
import useCanvas from "@/hooks/Canvas/useCanvas";

const Home: NextPage = () => {
	// 애니메이션 처리 함수
	const onAnimation = (ctx: CanvasRenderingContext2D) => {
		ctx.fillRect(20, 20, 30, 30);
	};

	const { canvasRef } = useCanvas({
		animate: onAnimation,
	});

	return <Canvas canvasRef={canvasRef} />;
};

export default Home;

이제 컴포넌트가 아닌, Canvas 컴포넌트를 사용하는 곳에서도 애니메이션 핸들링이 가능해졌습니다.

최종코드

pages/index.tsx

import { NextPage } from "next";
import Canvas from "@/components/Canvas";
import useCanvas from "@/hooks/Canvas/useCanvas";

const Home: NextPage = () => {
	// 애니메이션 처리 함수
	const onAnimation = (ctx: CanvasRenderingContext2D) => {
		ctx.fillRect(20, 20, 30, 30);
	};

	const { canvasRef } = useCanvas({
		animate: onAnimation,
	});

	return <Canvas canvasRef={canvasRef} />;
};

export default Home;

hooks/Canvas/useCanvas.tsx

import { RefObject, useEffect, useRef, useState } from "react";

interface InitialProps {
	animate: (ctx: CanvasRenderingContext2D) => void;
}

function useCanvas({ animate }: InitialProps) {
	const canvasRef: RefObject<HTMLCanvasElement> =
		useRef<HTMLCanvasElement>(null);
	const [ctx, setCtx] = useState<CanvasRenderingContext2D | null>(null);

	// 컨텍스트 셋팅
	useEffect(() => {
		if (canvasRef?.current) {
			const canvas = canvasRef.current;
			const context = canvas.getContext("2d");

			setCtx(context);
		}
	}, []);

	// 애니메이션 처리
	useEffect(() => {
		let requestId: number;

		const RequestAnimation = (ctx: CanvasRenderingContext2D | null) => () => {
			if (ctx) {
				animate(ctx);
			}
			// 애니메이션 콜백 반복
			requestId = window.requestAnimationFrame(RequestAnimation(ctx));
		};

		// 애니메이션 초기화
		requestId = window.requestAnimationFrame(RequestAnimation(ctx));

		return () => {
			window.cancelAnimationFrame(requestId);
		};
	}, [ctx, animate]);

	return {
		canvasRef,
	};
}

export default useCanvas;

components/Canvas/index.tsx

import React, { RefObject } from "react";

interface CanvasProps {
	canvasRef: RefObject<HTMLCanvasElement>;
}

const Canvas: React.FC<CanvasProps> = ({ canvasRef }) => {
	return <canvas ref={canvasRef} width={500} height={500} />;
};

export default Canvas;

styles/globals.css

body {
	margin: 0;
}

[TIL] 작은 이미지 반복보다는 큰 이미지를 한번에 그리는게 성능에 좋다

방현준 — Fri, 28 Oct 2022 22:41:35 +0900

백그라운드가 패턴 방식이라 작은 이미지를 사용하여 이미지 사이즈를 낮추고

로드된 이미지를 여러번 반복하여 그리려고 했는데

찾아보니까 큰 이미지를 한번 로드해서 한번에 그리는게 더 웹 성능이 좋다고 한다

(나중에 정리해봐야겠다...)

참고

https://stackoverflow.com/questions/14410994/images-in-browsers-performance-for-background-repeat-css

[TIL] 캔버스에서 elipse를 자제하자

방현준 — Fri, 28 Oct 2022 22:39:28 +0900

좀 더 확인해봐야겠지만,

elipse는 연산이 꽤 걸리나보다

일단 기본적으로 총 12번의 연산이 필요하니까...

canvas에서 5개 쓰니까 프레임 드랍이 심하네...

(요거 나중에 한번 정리해봐야겠다...)

vscode(visual studio code)에서 이미지, 스타일(css, scss)등의 경로를 찾지 못하는 오류

방현준 — Tue, 18 Oct 2022 23:48:58 +0900

파일경로

오류내용

아래 사진처럼 VSCode(Visual Studio Code)에서 스타일 경로를 찾지 못하는 이슈가 발생했다.

오류 해결

이러한 현상이 발생하는 이유는 VSCode에서 경로를 제안하기 때문이다.
따라서 Path Intellisense 확장 프로그램을 (설치가 안되어 있을 경우) 설치한 후

VSCode 설정으로 들어 간 후

검색창에 typescript.suggest.paths를 입력해 주고 VSCode 자체 경로 제안을 해제해 준다.

그럼 아래 사진처럼 정상적으로 나오게 된다.

FEConf 2022 참석 후기

방현준 — Sun, 9 Oct 2022 02:40:27 +0900

여는 글

2022년 10월 08일 토요일
FEConf 2022를 다녀왔습니다.

컨퍼런스를 다녀왔으면 후기를 써야하는것이 인지상정!
후기를 작성하도록 하겠습니다.
Let's get it!

FEConf 2022 그리고 그 치열한 티켓팅

2022년 코로나 시기에 참석하는 두번째 오프라인 컨퍼런스 FEConf2022!
처음 세션 리스트를 볼 때 아 이건 꼭 참석해야겠다는 생각이 들었습니다.

그리고 운이 좋게도 티켓팅에 성공했습니다.
하지만, 아쉽게도 같이 가기로 한 회사 동료들은 티켓팅에 실패해 이번엔 저 혼자 다녀오게 되었습니다.
(외로운 컨퍼런스….)

FEConf 2022 세션 및 참여한 세션

A Track

B Track

FEConf는 총 2트랙(A track, B track)으로 구성되어져 있었습니다.
이 두 트랙 중 마음에 드는 세션에 참여하여 듣는데 저는 아래와 같은 트랙을 들었습니다.

Design System, 형태를 넘어서
- 이소영(flex)
@webtoon/psd 라이브러리 개발기
- 이동현(네이버웹툰)/강예형(네이버웹툰)
프론트엔드 DDD를 만나다
- 박세문(라포랩스)
텍스트 에디터? 그게 뭘 만드는 건데?
- 노용구(네이버)
Edge Computing으로 프론트엔드 포텐셜 끌어올리기
- 김혜성(당근마켓)

그럼 간단한 회고에 들어가보겠습니다.

Design System, 형태를 넘어서

사내에서 디자인 시스템을 개발한다고 하면 한번쯤은 고민했던 커스텀의 다양성을 플렉슬은 어떻게 해결해 나갔는지에 대한 이야기를 담은 세션이었습니다.

내용

디자인 시스템의 주요목표는 개발 및 디자인의 효율화를 높이기 위함
하지만, 디자인 시스템은 곧 커스텀의 제약을 둔다는 의미임
커스텀의 제약을 줌 으로써 효율화는 증대가 되지만, 기능을 추가할 경우 복잡성이 증가할 수 있음
디자인 시스템의 복잡성이 증가할수록 디자인시스템의 코드와 성능의 병목이 발생할 수 있음
- if-else, if-else….
디자인 시스템을 4가지의 요소로 분리
- 형태(기본 스타일)
- 기능
- 점근성
- 커스텀
플렉슬의 리니어 디자인 시스템의 원칙
- 기능은 형태와 독립적으로 구성
  - 체크박스와 라디오 버튼 같은 경우 형태만 다를 뿐 기능은 같을 수 밖에 없다.
  - 이런 경우는 트리거 컴포넌트를 이용해서 비즈니스 로직과 컴포넌트를 분리하여 사용한다.
- 시스템에서 기본적으로 정의한 기본 동작을 보장한다
  - 기본 기능의 추가는 신중하게 정해야 한다.
  - 기본 기능이 적을 경우
    - 파편화 발생
  - 기본 기능이 많을 경우
    - 병목 발생
  - 컴포넌트의 기본 기능이 아닌것은 정의하지 않는다.
  - 구체적인 타입을 정의 하지 말고 넓게 가져가자
    - 완성형을 지향하지 말고 조합형을 지향하자
- 최소한의 제약만 가진다
  - 자유로운 커스텀 영역이 존재할 수 있다
그러나 이러한 방식은 결국 잦은 반복을 발생하고 피로도가 증가하게 된다.
- 플렉슬은 이러한 경우 확장성으로 빼고 패키지 형태로 제공하도록 하고 있다.

좋았던 점

다저안 시스템을 개발할 때 한번쯤 고민하게 되는 커스텀에 대한 문제점을 플렉슬에서는 어떻게 처리하고 있는지 잘 알 수 있었음
디자인 시스템을 단순한 컴포넌트 모음집이 아닌 다양한 관점에서 볼 수 있는 세션이었음
플렉슬의 리니어 디자인 시스템이 어떻게 구현되어 있고 사용되어지고 있는지를 코드로 쉽게 볼 수 있었음

아쉬웠던 점

플렉슬의 리니어 디자인 시스템이 어떻게 확장성을 제공하고 있는지 알 수 있는 내용이 없어서 아쉬웠음

후기

현재 제가 다니고 있는 회사에서도 컴포넌트를 어떻게 개발하고 이것들의 재사용성의 대해서 고민을 많이하고 있는 와중에 듣게된 유용한 세션이었습니다.
특히 디자인 시스템을 개발할 때 많은 고민을 거쳐서 현재까지 왔다는것을 알 수 있었습니다.
(무려 버전이 3.0이라고 하셨음…)
사내에는 아직 디자인 시스템을 도입할 여건은 안되지만,
현재 개발되어진 컴포넌트들을 대상으로 오늘 알았던 내용을 적용해 볼 수도 있지 않을까?
라는 생각을 가지게 만드는 세션이었습니다.

@webtoon/psd 라이브러리 개발기

포토샵 파일을 분석하고 이것을 파싱하여 웹 브라우저에서 볼 수 있도록 도와주는 @webtoon/psd라는 라이브러리를 개발한 내용을 공유하는 세션입니다.

내용

네이버 웹툰에서 활동하는 작가분들이 psd 파일을 올릴 경우 파일 내용을 미리볼 수 있는 기능이 필요
psd.js라는 패키지가 존재하지만, 이 패키지는 1메가가 넘는 사이즈이며, 속도도 상당히 느렸음, 심지어 psb(대용량 포토샵 파일) 및 한글 지원이 안되었음…
- https://www.npmjs.com/package/psd
위 제약사항으로 인해 직접 포토샵 파일을 미리볼 수 있는 패키지를 개발하기로 결정
포토샵의 파일 포맷 구조를 참고하여 바이너리 파일을 직접 분석
- https://www.adobe.com/devnet-apps/photoshop/fileformatashtml/
분석한 파일을 기반으로 메타데이터를 얻어서 디코딩을 하여 웹에 포토샵 파일의 내용을 출력할 수 있게 됨
- psd.js에 비해 용량은 1/10로 줄었고, 7베 빠른 실행속도와 psb및 한글을 지원할 수 있게 됨
또한, 여기서 wasm을 적용하여 디코딩 속도를 단축해 더 빠른 성능을 내기 위해 최적화 진행
- 크롬에서는 자바스크립트 최적화가 꽤 잘되어 있어서 큰 성능을 내지 못하였지만, 파이어폭스, 사파리 등에서는 꽤 큰 성능을 높일 수 있었음
자세한 내용은 https://d2.naver.com/helloworld/6631477 참고

좋았던 점

직접 바이너리 파일을 분석하여 이것을 활용하여 라이브러리를 만들었다는 생각을 했다는 점에서 놀라웠음
wasm을 직접 도입한 이야기를 들을 수 있어서 좋았음
네이버 웹툰에서 프론트엔드 개발자가 어떠한 일을 하는지 알 수 있었음

아쉬웠던 점

포토샵 바이너리 분석에 대한 내용이 주를 이루어서 잘 이해가 안가는 부분이 많았음

후기

이번 세션은 진짜 놀라웠습니다. 바이너리 코드를 분석한다는 생각 자체가 너무 대단했고 그 끈기에 박수를 칠 수 밖에 없었습니다.
나중에 기회가 된다면 @webtoon/psd 패키지를 한번 까봐야겠습니다.

@webtoon/psd

https://github.com/webtoon/psd

프론트엔드 DDD(Domain Driven Design)를 만나다

프론트엔드에서 DDD(Domain Driven Design)를 적용하기 위한 기본적인 이론과 컨셉 그리고 실제로 적용을 하면 프로젝트 구조는 어떻게 되는지에 대해서 설명한 세션이다.

내용

그동안 백엔드에서는 MSA와 더불어 DDD와 관련한 연구가 꾸준히 되고 있지만, 프론트엔드에서는 그러한 시도가 많이 안되고 있음
백엔드의 DDD와 프론트엔드의 DDD는 큰 차이가 없음
DDD(Domain-Driven Design)란, 도메인 패턴을 중심에 놓고 설계하는 방식을 말함
DDD의 CQRS는 프론트엔드에서 상태관리로 사용하는 Redux의 덕스 패턴과 유사함
DDD는 두가지의 영역으로 나눌 수 있음
- Strategic Design
- Tactical Design
DDD는 먼저 모든 사람들이 DDD내에서 사용되는 용어를 공통되고 명확하게 정의해야 시간 정약 및 의사소통 에러를 막을 수 있음, 이를 유비쿼터스 랭귀지(Ubiquitous Language)라고 함. 아래는 DDD내에서 주로 사용되는 용어를 나열한 것
- 도메인
- 도메인 모델
- Entity
- Value Object
- Aggregate
- Service
- Bounded Context
- Context Map
DDD의 레이어드 구조는 총 4가지로 구성되어져 있음
- User Interface 계층(UI 계층)
- Application 계층
- Domain 계층
- Infrastructure 계층
DDD의 헥사고날 아키텍쳐는 각 레이어 마다 어디에도 의존하지 않는 구조를 의미
- Domain
- Use Cases
- Infrastructure
- Adapter
- UI
이 프론트엔드의 DDD 방법론은 복잡한 비즈니스 로직을 간결하게 하기 위한 방법론임, 따라서 엄청나게 복잡한 로직이 아니라면 DDD를 적용할 이유는 없음

좋았던 점

백엔드에 DDD에 대해서 듣긴 했지만, 아예 모르는 상태였음, 이 세션을 통해서 DDD에 대해서 얕게나마 알 수 있었음
프론트엔드에서 DDD를 적용할 수 있고, 직접 사용한 예제를 통해 설명하여 더 크게 와닿았음

아쉬웠던 점

없음

후기

제가 이 FEConf에서 들었던 세션중에서 가장 만족스러운 세션이었습니다.
DDD에 대해서 기초부터 예제까지 첨부한 퀄리티 높은 설명이었고 이 세션을 통해서 DDD가 무엇인지,
프론트엔드에서 DDD를 어떻게 적용할 수 있는지에 대해서 알 수 있었습니다.
다만, 세션을 듣는 내내 이게 과연 진짜 필요한 일이 있을까란 생각이 첫번째로 들었고,
나중에는 배보단 배꼽이 더 커지는 상황이 초래하지 않을까란 의문이 들었습니다.
하지만, 이러한 방법론들이 점점 프론트엔드에 맞춰져서 더 좋은 방법론들이 나올거라 믿습니다.

텍스트 에디터? 그게 뭘 만드는 건데?

텍스트에디터를 당연하게 생각하는 유저들을 위해 내이버의 스마트에디터가 1.0부터 3.0까지 발전하면서 겪게되었던 문제와 해결하던 과정에 대해서 설명하고 React + contenteditable 기반의 새로운 에디터를 만들게 된 배경과 만들며 겪은 기술적인 도전을 공유하는 세션이었습니다.

내용

많은 사람들이 텍스트 에디터를 보면서 당연하다고 느끼지만, 사실 그 안에는 많은 기술이 녹아 있음
그에 따라 네이버의 스마트에디터도 많은 발전을 해왔음
- 1 세대
  - 단순히 contenteditable을 이용해 HTML요소들을 브라우저가 결정하여 그 요소들을 저장하는 방식으로 이용
  - 브라우저가 요소들을 결정하기에 각기 브라우저에 따라 표현되는 방식이 달랐음
- 1.5 세대
  - 기존 HTML을 단순 저장하던 1세대 방식을 벗어나 문서 모델링(JSON)방식으로 전환
  - 그에따라 블록별 편집이 가능
  - 하지만 블록별 편집이기에 마우스 드래그하여 selection시 어색하게 블록별만 selection 처리가 됨
  - 브라우저 마다 재각기 다른 contenteditable의 selection처리 방식
- 2세대
  - 1.5세대의 문제를 해결하기 위해 가상 커서와 input buffer(사용자가 실제 에디터에서 입력하는것 처럼 느끼지만 사실은 다른곳을 입력하는 방식)를 도입하였고 contenteditable(IE지원을 위해...)을 삭제
  - 가상커서로 인해 어색하게 selection 되던 동작을 해결할 수 있었음
  - input buffer 도입으로 브라우저 마다 재각기 다른 selection 처리 방식을 해결할 수 있었음
  - 다만, 이러한 방식은 브라우저 네이티브 기능(복사, 붙여넣기)과 다국어 지원이 힘듦
    - 브라우저 네이티브 기능은 크롬에서 열어주지 않기에 익스텐션을 이용하여 설치하도록 유도하여 사용...
- 3세대
  - 브라우저 네이티브 기능을 활용하고 다국어를 지원하기 위해 3세대를 개발
  - IE지원 종료로 2세대에서 삭제되었던 contenteditable을 다시 사용함
React와 MobX, contenteditable을 사용하여 3.0개발
다만 React의 vDOM을 별도로 관리하는 방식과 contenteditable의 유저가 dom을 직접 변경하는 방식의 충돌로 React vDOM과 DOM의 싱크가 깨져 이것을 개발자가 직접 제어하도록 함
Upstream과 Downstream을 나누어 관리하여 vDOM과 DOM의 싱크를 맞춤
- Upstream은 contenteditable기능을 사용하여 DOM의 변화가 필요한 기능(글쓰기 등)을 대응하기위해 React의 vDOM 업데이트를 임시 중단하고 Store에만 업데이트 하는 기능
- Downstream은 DOM의 반영되지 않았던 Store 업데이트 사항을 DOM에 반영이 필요한 기능(백스페이스, 엔터 등..)을 대응하기 위한 기능 이때 React의 vDOM은 활성화 되고 MobX의 MutationObserver는 중단 됨
- 특허까지 출원했다고 한다 ㄷㄷㄷ
이렇게해서 다국어 지원 및 브라우저 네이티브 기능까지 사용이 가능해졌다고 한다.

좋았던 점

React의 vDOM과 실제 DOM의 연결을 끊는다는 발상이 참신했음
스마트에디터의 발전 과정과 에디터 개발에 겪는 문제점들을 알 수 있었음

아쉬웠던 점

없음

후기

그동안, 텍스트에디터 하면 당연하다고 생각해왔고, 그게 뭐 어렵겠어? 라는 생각을 많이 가졌습니다. 하지만 이 세션을 듣고나서 텍스트에디터가 상당히 복잡하고 신경써야 할 것이 많구나 라는걸 느꼈습니다. 게다가 참신한 아이디어를 통해 문제를 해결하는것을 보고 제가 가지고 있는 도메인? 관점?을 넓힐 수 있었던 세션이었습니다.

Edge Computing으로 프론트엔드 포텐셜 끌어올리기

엣지 컴퓨팅이라는 기술 트렌드가 가져온, 그리고 앞으로 가져올 웹 개발의 변화들을 사례와 함께 설명합니다. 최근 등장한 다양한 엣지 컴퓨팅 플랫폼들을 슬기롭게 응용해서 웹 프론트엔드 개발을 확장하는 방법들을 소개하고, 앞으로 다가올 미래를 이야기하는 세션이었습니다.

내용

엣지 컴퓨팅의 사전적 의미는 엔드 유저와 가장 가까운 곳에서 수행하는 것
- 엣지 솔루션 = 컨텐츠 캐싱
- CDN
엣지 컴퓨팅은 앞으로 서버를 넘어서 새로운 비젼을 제시할 기술
엣지 컴퓨팅은 프론트엔드 개발자가 가질 수 있는 가장 강력한 무기중 하나
엣지와 컴퓨팅 이 두가지를 잡기 위한 문제
- 캐시 효율성
- 구축 비용
- 보안
엣지와 컴퓨팅을 같이 사용하기 위해 필요한 것들
- 구조적 동시성
  - 발전한 프로그래밍 모델(리액트의 서스펜스 등)
- 컨테이너 및 격리성
  - Docker
  - Firecracker
  - Micro-VM
- 웹 APIs
  - 웹 보안 모델
  - 서비스 워커
  - Fetch API
  - Cache API
다가오는 미래
- WinterCG(https://wintercg.org/)
- Open Source
  - Edge Runtime - vercel
  - Roll your own javascript runtion - deno
- WASM(Web Assembly)
  - Wasmtime
  - Wasmer
  - Lunatic
  - WasmEdge
- WASI(WebAssembly System Interface)
  - https://github.com/WordPress/wordpress-wasm
미래를 대비하는 자세
- 자바스크립트와 웹 어셈블리의 집중할 것
- 신뢰성있고 지속 가능한 보안 모델
- 항상 웹의 배팅

좋았던 점

앞으로 웹의 미래에 대한 이야기를 들을 수 있었어 좋았음
최근에 공부하기 시작한 인프라 혹은 네트워크 관련 이야기를 들을 수 있는 세션이었음

아쉬웠던 점

세션을 들었지만 정확히 이야기 하고자 하는 방향을 잡기가 어려웠음...
- 내가 부족한거라 생각이 들고 좀 더 공부해야 겠음...

후기

제가 들었던 마지막 세션이었고 세션 스피커인 김혜성님이 보고 있는 미래가 어떤것이구나를 알 수 있었던 세션이었습니다. 제가 최근 배우고 있는 네트워크 인프라 관련 이야기가 나와서 세션을 충분히 이해할 수 있었지만, 아직까지 미래까지는 볼 수 있는 실력이 아닌지라 크게 와닿지는 않았습니다. 또한, 다 듣고나서 그래서 엣지 컴퓨팅이 뭔데? 라고 물어본다면 사실 잘 모르겠습니다... 좀 난해한? 느낌이 강했던거 같습니다. 그렇다고 지루했던건 아니었고 세션 자체는 꽤 좋았습니다. 마지막 세션 특성상 지루하면 졸기 마련인데 재미있게 이야기를 해주셔서 지루함없이 들을 수 있었습니다.

럭키드로우

아쉽게도 나는 럭키하지 못했다 ㅠㅠ

후기

FEConf 2022 그동안 유튜브를 통해서 봐왔던 세션들을 오프라인에서 직접 들을 수 있어서 좋았던 컨퍼런스 었습니다.
내년에도 한다면 꼭 또 한번 참석하고 싶은 컨퍼런스이고, 나중에는 저도 스피커로 나올수 있으면 좋겠다라고 생각되어지는 컨퍼런스였습니다.
FEConf를 진행해주셨던 스피커 및 스태프님들 감사합니다.

Javasciprt 실행 컨텍스트(execution context)

방현준 — Sat, 17 Sep 2022 19:32:26 +0900

여는 글

여러분들은 실행 컨텍스트를 잘 아시나요?
저는 아직까지도 실행 컨텍스트를 느낌적으로만 알고있지, 자세하게는 잘 모릅니다.
그렇기 때문에 저도 한번 다시 공부할 겸, 블로그 포스팅도 할 겸 해서 이 글을 작성하게 되었습니다.
다같이 실행 컨텍스트에 대해서 한번 알아보도록 하죠!

실행 컨텍스트(execution context)

실행 컨텍스트는 전역 혹은 함수 내의 작성해 놓은 코드가 실행 가능한 코드(Excutable Code)일 경우, 자바스크립트 엔진이 코드를 실행하기 위해 필요한 환경 정보를 모아놓은 객체입니다.

여기서 환경정보란 아래와 같습니다.

변수(Variable)

변수(Variable)에 대한 정보를 알고 있어야 합니다.
전역 변수, 지역 변수, 매개 변수, 객체의 프로퍼티 등이 변수(Variable) 정보에 속합니다.

인자(Argument)

인자(Argument)에 대한 정보를 알고 있어야 합니다.
인자 객체가 인자(Argument) 정보에 속합니다.
보통 변수 정보와 쌍으로 보는 경우가 많습니다.

Scope

중첩된 스코프 중 내부 스코프에서 외부 스코프에 접근을 위한 정보를 알고 있어야 합니다.

This

this값은 함수 호출 패턴에 의해 달라지기에 this가 어떤 객체를 할당하고 있는지에 대한 정보를 알고 있어야 합니다.

이 정보들은 실행에 필요한 정보를 형상화 하고 구분하기 위해 물리적 객체의 형태로 관리합니다.
단, 이 값들은 각 실행 컨텍스트 타입에 따라 달라질 수 있습니다.

코드의 타입

실행 컨텍스트는 자바스크립트 엔진이 동작을 시작하면 그 순간부터 생성되어집니다.
여기서 실행 컨텍스트의 종류가 나뉘어지게 되는데, 각 코드 타입에따라 실행 컨텍스트의 종류가 나뉘어집니다.

전역 코드

전역 영역에 존재하는 코드로 window 객체 내부에 작성된 코드를 의미합니다.
단, 전역에 정의된 함수나 클래스 같은 내부 코드는 전역코드의 포함하지 않습니다.

함수 코드

함수 내에 작성된 코드를 의미합니다.
단, 함수 내부의 중첩된 함수 및 클래스 같은 코드는 호출된 함수코드에 포함하지 않습니다.

eval 코드

eval 함수로 실행되는 코드입나다.
eval 함수의 악의적 특성(XSS 취약점 등..)으로 인해 ES6+에서는 잘 사용하지 않습니다.

모듈 코드

모듈로 작성된 내부 코드를 의미합니다.
모듈 내부의 함수 혹은 클래스는 모듈 코드에 포함되지 않습니다.

이 4가지의 코드 타입은 각각 실행 컨텍스트를 생성하는 과정과 관리하는 내용이 다릅니다.

실행 컨텍스트 타입

위에서 설명했듯이 실행 컨텍스트는 총 4가지의 코드타입에 따라 실행 컨텍스트 타입이 분류될 수 있습니다.

전역 실행 컨텍스트(Global Execution Context)(GEC)

전역변수를 관리하기 위한 최상위 스코프를 가지는 실행 컨텍스트
자바스크립트 엔진이 전역코드를 평가하면 그 이후 전역 실행 컨텍스트가 생성되어짐
다른말로 전역 객체(Global Object)(GO)라고 불리는 경우도 있음
window객체, this객체, 빌트인 객체(MATH, String), BOM, DOM, 전역 변수 정보를 가지고 있음

함수 실행 컨텍스트(Function Execution Context)(FEC)

지역변수, 매개변수, arguments를 관리하기 위해 지역 스코프를 가지는 실행 컨텍스트
자바스크립트 엔진이 함수코드를 평가하면 그 이후 함수 실행 컨텍스트가 생성되어짐
다른말로는 활성 객체(Activation Object)(AO)라고 불리는 경우도 있음
함수 선언식 정보, 함수의 매개 변수 정보, 변수 정보를 가지고 있음

Eval 함수 실행 컨텍스트(Eval Function Execution Contex)

빌트인 함수인 eval 함수가 실행될 때 마다 생성되어지는 컨텍스트
Eval 함수의 악의적 특성(XSS 취약점 등..)으로 인해 ES6+에서는 잘 사용하지 않음

모듈 실행 컨텍스트(Module Execution Contex)

모듈내의 독립적인 스코프를 가지는 실행 컨텍스트
자바스크립트 엔진이 모듈을 펼가하면 그 이후 모듈 실행 컨텍스트가 생성되어짐
모듈의 실행이 끝나면 모듈 실행 컨텍스트는 사라짐

실행 컨텍스트 내부 구성

실행 컨텍스트 내부는 ES5 이전과 ES5 이후로 나뉘어 집니다.
그렇기 때문에 ES5이전과 이후를 비교해서 알 필요가 있습니다.

ES5 이전 실행 컨텍스트 구조

ExecutionContext :{
	변수 객체(Variable Object)
	스코프 체인(Scope Chain)
	this 바인딩(Context Object)
}

위에 제가 설명한 자바스크립트 엔진이 코드를 실행하기 위해 필요한 정보가 그대로 실행 컨텍스트 내부에 있는 구조입니다.

변수 객체(Variable Object) : 변수와 인자 정보를 관리
스코프 체인(Scope Chain) : 중첩된 스코프 중 내부 스코프에서 외부 스코프에 접근을 위한 정보 관리
this 바인딩(Context Object) : this가 어떤 객체를 할당하고 있는지에 대한 정보 관리

하지만 ES5이후 let과 const같은 block 스코프라는 개념이 추가되면서 이 구조는 더이상 사용하지 않고 새로운 구조로 변경이 되었습니다.

따라서 이러한 내부 구성으로 유지되어 있다는것만 확인후 넘어가도록 하겠습니다.

ES5 이후 실행 컨텍스트 구조

ExecutionContext :{
	LexicalEnvironment:{
		Environment Record
		Outer Environment Reference
	},
	VariableEnvironment:{
		Environment Record
		Outer Environment Reference
	},
	PrivateEnvironment: {
		...
	}
}

ES5이후 블록 스코프 개념이 추가됨으로 인해 Lexical Environment와 Variable Environment가 생겨났습니다. (PrivateEnvironment에 대해서는 아래에서 따로 다루도록 하겠습니다.)

Lexical Environment

Lexical Environment는 실행 컨텍스트 내의 유효한 변수 선언 혹은 함수 선언에 대한 식별자를 맵핑하는데 사용하는 구성요소 입니다.

외부 환경 레코드(Outer Environment Reference)

외부 실행 컨텍스트를 참조하기 위해 사용되어지는 정보로, ES5이전에 스코프 체인의 역할을 이곳에서 수행합니다.

전역 실행 컨텍스트(Global Excution Context) 일 때
- Outer Environment Reference의 값은 참조할 실행 컨텍스트가 없으므로 null값으로 저장
함수 실행 컨텍스트(Function Lexical Environment) 일 때
- Outer Environment Reference의 값은 해당 실행 컨텍스트의 상위 실행 컨텍스트를 참조

환경 레코드(Environment Record)

환경 레코드는 변수 선언 및 함수 선언문의 정보를 저장하는 추상 클래스 입니다.

여기서 잠깐!

추상 클래스란? 추상 클래스 내 정의된 추상 메소드를 하나 이상 포함한 클래스이며, 구현되어 있지 않은 추상 메소드를 포함하고 있기에 상속을 통해 사용이 가능한 클래스입니다.

Environment Record는 추상 클래스이기에, Environment Record를 상속받는 3가지의 서브 클래스가 존재하며,
그 요소는 아래와 같습니다.

Global Environment Record
Object Environment Record
Declarative Environment Record

그럼 위에 설명드린 실행 컨텍스트를 보기 쉽게 정리한 객체는 아래와 같이 정리할 수 있습니다.

ExecutionContext :{
	LexicalEnvironment:{
		Environment Record :{
			Global Environment Record
			Object Environment Record
			Declarative Environment Record
		}
		Outer Environment Reference
	},
	...
}

전역 환경 레코드(Global Environment Record)

전역 환경 레코드는 전역 객체와 빌트인 전역 객체, 스크립트 내의 모든 최상위 객체에 접근할 수 있는 식별자를 제공하는 레코드입니다. realm에서 처리되는 레코드이며, 최상위 스코프를 나타내는데 사용되는 레코드 입니다.

이론상 하나의 레코드 이지만, 실제로는 declarative Environment Record와 object Environment Record 가 합성된 형태로 정의됩니다.

객체 환경 레코드(Object Environment Record)

식별자를 특정 객체의 속성으로 취급 할 때 사용되어지는 객체입니다. BindingObject라는 속성을 가지고 있으며 Environment Record에 바인딩 된 객체를 가리킵니다.
IsWithEnvironment속성도 존재하며, 환경 레코드가 with문에 의해 생성되었는지를 나타내는 불리언 값입니다. 다만 with문 사용은 권장하지 않습니다.

전역 실행 컨텍스트(Global Excution Context) 일 때
- window 객체 및 전역 빌트인 Object
함수 실행 컨텍스트(Function Lexical Environment) 일 때
- Outer Environment Reference의 값은 해당 실행 컨텍스트의 상위 실행 컨텍스트를 참조

선연적 환경 레코드(Declarative Environment Record)

선언적 환경 레코드는 var, const, let, class, module, import, function 등으로 스코프 내에서 선언된 식별자들의 바인딩을 관리하는 레코드 입니다.

선언적 환경 레코드는 추가적으로 2가지의 환경 레코드로 분류 할 수 있는데요, 각 각 함수 환경 레코드(Function Environment Record)와 모듈 환경 레코드(module Environment Record) 이 2가지로 분류되어 집니다.

그럼 실행 컨텍스트의 내부 구조는 아래와 같습니다.

ExecutionContext :{
	LexicalEnvironment:{
		Environment Record :{
			Global Environment Record
			Object Environment Record
			Declarative Environment Record :{
				Function Environment Record,
				Module Environment Record
			}
		}
		Outer Environment Reference
	},
	...
}

함수 환경 레코드(Function Environment Record)

함수의 최상위 스코프를 나타내는데 사용되는 선언적 환경 레코드입니다.

화살표 함수 실행 컨텍스트 일 경우
- this 바인딩 정보를 저장
화살표 함수가 아닐 경우
- super를 참조하는 경우 super 메소드를 실행하는데 필요한 state를 저장

모듈 환경 레코드(module Environment Record)

Module의 외부 스코프를 나타낼 때 사용하는 선언적 환경 레코드입니다.

변경 가능, 변경 불가능한 바인딩과 더불어 변경 불가능한 import 바인딩(immutable import binding)을 제공합니다. immutable import binding은 참조하는 외부 레코드의 바인딩에 대해서 간접적으로 접근해 변경하지 못하게합니다.

선언적 환경 레코드의 메서드를 전부 구현하지만, GetBindingValue나 DeleteBinding 같이 바인딩에 직접적으로 접근하는 일부 메서드는 구현 스펙이 다릅니다.

Variable Environment

ExecutionContext :{
	LexicalEnvironment:{
		Environment Record :{
			Global Environment Record
			Object Environment Record
			Declarative Environment Record :{
				Function Environment Record,
				Module Environment Record
			}
		}
		Outer Environment Reference
	},
	VariableEnvironment:{
		Environment Record :{
			Global Environment Record
			Object Environment Record
			Declarative Environment Record
		}
		Outer Environment Reference
	},
	...
}

전반적으로 Lexical Environment와 큰 차이가 없지만, Variable Environment는 var키워드로 생성된 변수 정보만 저장하고, Lexical Environment는 let과 const 키워드로 생성된 변수와 함수 선언의 정보를 저장한다는 차이가 있습니다.

그에 따라, Lexical Environment는 코드를 실행하는 과정에서 실행 컨텍스트 내 정보가 변경 변경될 수 있습니다, 하지만 Variable Environment는 항상 값을 유지합니다.

직접 코드로 이해해보자!

console.log(globalValue);
var globalValue = "nowVisible";

function sayHiOneTime() {
    var isMorning = true;
    let hi = "Good morning!";
    while (isMorning) {
        var name = "Jack";
        let question = "How are you?";
        console.log(`${name} ${hi} ${question}`);
        isMorning = false;
    }
}
sayHiOneTime();

접근 제한 환경(Private Environment)

ES2019부터 #prefix가 추가되면서 실행 컨텍스트 구성요로소 추가된 환경입니다. 이 접근 제한 환경 레코드는 class키워드로 생성된 가장 근접한 클래스 내에서 Private 필드 혹은 메소드를 가지는 접근 제한 환경 레코드 정보를 가지는 구성요소 입니다. 만약 가장 근접한 클래스가 없다면 이 구성요소는 null값으로 저장되어집니다.

접근 제한 환경 레코드(Private Environment Record)

접근 제한 환경 레코드(Private Environment Record)는 클래스 선언과 클래스 표현으로 생성되어진 클래스 내 Private 필드 혹은 메소드를 추적하기 위한 레코드 입니다.

추가적으로 접근 제한 환경 레코드는 OuterPrivateEnvironment와 Names라는 구성요소를 가집니다.

OuterPrivateEnvironment
- 외부 Private 필드 혹은 메소드를 가지는 클래스의 실행 컨텍스트를 참조하기 위해 사용되어지는 정보를 저장
- 만약, 외부에 참조할 클래스가 없다면 null값으로 저장
Names
- 실행 컨텍스트 내의 Private한 식별자 정보를 저장

그럼 전체적인 실행 컨텍스트의 내부 구조를 객체로 표현하면 아래와 같아집니다.

ExecutionContext :{
	LexicalEnvironment:{
		Environment Record: {
			Global Environment Record
			Object Environment Record
			Declarative Environment Record :{
				Function Environment Record,
				Module Environment Record
			}
		}
		Outer Environment Reference
	},
	VariableEnvironment:{
		Environment Record: {
			Global Environment Record
			Object Environment Record
			Declarative Environment Record
		},
		Outer Environment Reference
	},
	PrivateEnvironment: {
		PrivateEnvironmentRecord: {
			OuterPrivateEnvironment,
			Names
		}
	}
}

마무리

이렇게 실행컨텍스트 내용을 정리하였습니다.
꽤 어려운 내용이라 처음에는 이해가 되질 않았지만, 정리를 하면서 많은것을 배울 수 있었습니다.
만약 잘못된 내용이나 틀린 내용이 존재한다면 댓글로 남겨주시면 감사합니다.

참고문서

[TIL] ECMA-262 Realm

방현준 — Sat, 17 Sep 2022 02:20:19 +0900

여는글

최근, 실행컨텍스트 내용을 포스팅하기 위해 공부를 하면서 Realm라는 용어를 발견했습니다.
이게 뭔지 몰라서 찾아보니 정보가 많이 없고 죄다 동의어인 Realm(DBMS)만 나오길래

ECMA-262 13th edition에 나와있는 내용에서 배운 내용을 정리해보려고 합니다
(TIL이기에 많이 짧습니다...)

Realm

Before it is evaluated, all ECMAScript code must be associated with a realm. Conceptually, a realm consists of a set of intrinsic objects, an ECMAScript global environment, all of the ECMAScript code that is loaded within the scope of that global environment, and other associated state and resources.

ECMAscript사양을 따르는 코드들은 모두 평가과정과 실행과정을 거칩니다.

이 Realm은 ECMAscript 코드가 평가과정을 거치기 전에 연결되어져야하는 고유 객체의 집합입니다.
Realm에 대한 설명이 꽤 추상적이기에 우리와 근접한 부분에서 Realm을 찾자면 아래와 같습니다.

브라우저 탭
브라우저 window
`window.open()`으로 생성한 팝업
web worker
service workers
iframe
기타 등등...

위 모든것들이 각자 다른 속성의 Realm입니다.

그럼 이 Realm은 각자의 고유 영역이 있기에 Realm들끼리는 컨트롤을 못하느냐 그건 또 아닙니다.
왜냐하면 `window.open()`으로 팝업을 생성해도 `window.opener`를 이용해 통신이 가능하고,

iframe또한 `window.parent`로 컨트롤이 가능하기 떄문입니다.

다만, 위에서 말씀드렸듯이 위 예시는 같은 속성의 Realm일 때 가능한 이야기이며,

다른 속성의 Realm들 끼리는 컨트롤할 수 없습니다.

Realm Record 구성 요소

Realm Record의 내부에 구성요소는 아래와 같습니다.

[[Intrinsics]]
- Realm과 연결된 ECMAScript 코드들이 사용하는 Value가 저장되는 레코드입니다.
- Intrinsics에 저장되는 Value는 고유한 이름을 가지는 객체의 레코드값입니다.
[[GlobalObject]]
- Realm내에서 사용되어지는 전역 객체가 저장되는 레코드
- 기본적으로 객체(Object) 값이 저장되며, 전역으로 사용되어지는 값이 없다면 null이 저장됩니다.
[[GlobalEnv]]
- 실행 컨텍스트(Excution Context)내부 구성요소에 존재하는 전역 환경 레코드(Global Environment Record)
- 가장 바깥 스코프를 나타내는데 사용됩니다.
[[TemplateMap]]
- Template objects are canonicalized separately for each realm using its Realm Record's [[TemplateMap]]. Each [[Site]] value is a Parse Node that is a TemplateLiteral. The associated [[Array]] value is the corresponding template object that is passed to a tag function.
  (가장 이해가 안되는 부분이기에, 원문으로 적어놓았습니다... 이해가 되시는 분은 댓글에 설명해주시면 감사하겠습니다 ㅠㅠ)
[[HostDefined]]
- Real Record에서 사용하기 위해 예약된 필드입니다.
- 모든 타입의 값이 들어갈 수 있으며 디폴트 값은 undefined입니다.
- 추가적으로 호스트(D Host Layering Points 외부 소스)에서 추가 정보를 연결하기 위해 해당 필드를 사용하기도 합니다.

만약 내용이 잘못된 부분이 존재한다면 댓글로 알려주시면 빠르게 수정하겠습니다

네트워크 보안의 기본! 방화벽(Firewall)에 대해서 알아보자

방현준 — Tue, 6 Sep 2022 01:12:13 +0900

해당 내용은 고재성님의 IT 엔지니어를 위한 네트워크 입문 이라는 책을 읽고 작성한 글입니다.

IT 엔지니어를 위한 네트워크 입문 : 네이버 도서

네이버 도서 상세정보를 제공합니다.

search.shopping.naver.com

✏️ 여는글

여러분은 방화벽에 대해서 얼마나 알고 있나요?
저는 그동안 방화벽을 그저 귀찮은 존재로 알고 있었습니다.
(윈도우 방화벽으로 인해 힘들었던 기억들..ㅠㅠ)
하지만 이번의 방화벽에 대해서 공부를 하면서 아주 중요하고도 중요한 녀석이라는 사실을 깨달았죠
그럼 방화벽에 대해서 한번 알아보도록 하겠습니다.

방화벽(Firewall)이란?

방화벽이란, 네트워크 중간에 위치하여, 트래픽이 통과해야 하는지, 통과하지 말아야 하는지를 정하는 장비입니다.
이 방화벽은 사전에 정책이 설정되어 있어야 하며, 그 정책에 맞춰 트래픽을 관리합니다.

따라서, 트래픽을 관리하며 보안을 담당하는 장비들을 넓은 의미에서 모두 방화벽이라고 볼 수 있지만, 많은 네트워크 보안 장비들은 각각의 그 목적과 동작 방식에 따라 많이 다릅니다.

일반적으로 네트워크 3계층(네트워크 계층), 4계층(전송 계층)에서 동작하며, 패킷의 헤더를 조사하는 상태 기반 패킷 검사(Stateful Packet Inspection, SPI)로 동작하거나, 패킷의 헤더 뿐만 아니라 컨텐츠까지 조사하는 심층 기반 패킷 검사(Deep Packet Inspection, DPI)로 동작하는 장비를 방화벽이라고 칭합니다.

이 SPI와 DPI와 관련된 내용은 아래에서 정리할 테니, 여기선 이런게 있다고만 생각하고 넘어가도록 하겠습니다.

초기의 방화벽은?

사실 이 SPI나, DPI같은 기술은 비교적 최근에 나온 기술들입니다.
이 SPI나, DPI같은 기술이 나오기 전의 방화벽은 굉장히 단순했습니다.
초기 방화벽의 동작 방식은 패킷이 들어오면 패킷 내 3계층, 4계층 헤더에 존재하는 5개의 주요필드들을 가지고 정보를 분석합니다.
그 5가지 주요필드들은 아래와 같습니다.

출발지 IP(Source IP)
- 데이터를 전달하는 목적지의 IP
출발지 Port(Source Port)
- 데이터를 전달하는 목적지의 포트번호
도착지 IP(Destination IP)
- 데이터를 전달받는 목적지의 IP
도착지 Port(Destination Port)
- 데이터를 전달받는 목적지의 포트번호
프로토콜 번호(Protocol No)
- 3계층 프로토콜 지시자로 TCP및 UDP를 지정할 때 사용합니다.
- TCP는 6, UDO는 17입니다.

위 5가지의 주요 필드를 일컫는 말로 5-튜플(5-Tuple)이라고 합니다.
이러한 5-튜플을 분석하여, 방화벽에 일치된 정책이 있으면 패킷을 허용하거나 차단합니다.

그저 장비의 등록된 정책만으로 패킷 필터링 기능을 가진 초기의 방화벽을 무상태 기반 패킷 검사(Stateless Packet Inspection) 혹은 무상태 기반 패킷 필터링(Stateless Packet Filtering) 방화벽 이라고 합니다.

하지만 무상태 기반 패킷 필터링 방화벽은 패킷의 인과 관계는 전혀 확인하지 못했습니다.
그에따라 3~4계층 변환을 통한 공격등 보안의 취약한 점 및 현대 네트워크의 복잡성으로 인해, 초기의 방화벽의 필터링 방법으로는 보안의 한계가 있었습니다.

따라서 현대의 SPI및 DPI 기술이 나오게 된것입니다.

다만, 그렇다고 해서 이러한 무상태 기반 패킷 필터링 방식이 전혀 안쓰이는것은 아닙니다.

이 방법은 현대의 기술보다 부하가 적고 간단히 동작하기에, 현대의 기술과 함께 사용하기도 하고,

특수한 상황에서는 계속 쓰이는 기술 입니다.

그렇기에 현대의 장비에도 이러한 무상태 기반 패킷 필터링(Stateless Packet Filtering) 방화벽 기능이 추가되어 나오는 장비들도 꽤 있습니다.

현대의 방화벽 기술들 SPI와 DPI

상태 기반 패킷 검사(Stateful Packet Inspection, SPI)

먼저 SPI부터 설명드리도록 하겠습니다. SPI는 Stateful Packet Inspection(상태 기반 패킷 검사)의 준말이며, 패킷의 헤더 정보를 조사하고 3계층에서 4계층까지 분석하여 이 정보가 방화벽 내 정책(혹은 블랙리스트)에 존재 여부를 파악 후 패킷을 통과시킬 지, 아니면 막을 지 판단하는 기술입니다.

SPI는 패킷의 헤더 정보만으로 트래픽을 판단하고 패킷의 페이로드까지는 살펴볼 수 없기 때문에, 정교한 분석은 어렵습니다. 하지만, 헤더 정보만 분석하기에 그 만큼 빠른 분석이 가능하며 대용량 트래픽을 쉽게 그리고 빠르게 처리할 수 있는 장점이 있습니다. 따라서 최근 대용량 트래픽 서비스가 많아지고 있기에 아래 설명할 DPI에 비해 상대적으로 많이 사용하는 기술입니다.

심층 기반 패킷 검사(Deep Packet Inspection, DPI)

DPI는 Deep Packet Inspection(심층 기반 패킷 검사)의 준말이며, 패킷의 헤더뿐만 아니라 페이로드까지 정보를 조사하고 3계층에서 7계층까지 분석하여 트래픽 허용여부를 판단하는 기술입니다.

DPI는 콘텐츠가 담겨 있는 페이로드까지 조사를 하기에, 데이터 보호 및 프라이버시 이슈를 야기하지만, 보안이 가장 중요한 상황에서는 종종 쓰이는 기술입니다. 다만, 이 기술은 분석성이 높기에 비용이 많이 들어가게되고, SPI에 비해 많이 느리기 때문에, 잘 사용하지 않고 있습니다.

정리하자면 아래 테이블과 같습니다.

구분	SPI	DPI
분석 계층	3~4계층	3~7계층
처리 속도	빠름	느림
분석성	낮음	높음
비용	낮음	높음

또한, 아래 영상을 통해 지금까지 배웠던 내용을 2분만에 되새겨봅시다.

방화벽 동작 방식

자 이제, 방화벽이 어떻게 동작하는지를 배워보도록 하겠습니다. 방화벽이 패킷을 처리하는 순서는 아래와 같습니다.

장비에 패킷이 들어오면 우선 세션 테이블을 확인합니다.
1. 조건에 맞는 세션 정보가 세션 테이블에 있을 때
  1. (2번으로 이동)
2. 조건에 맞는 세션 정보가 세션 테이블에 없을 때
  1. 방화벽 정책을 확인합니다.
    1. 방화벽 정책을 첫번째 부터 마지막까지 모두 확인 후 허용 정책이 없을 때
      1. 임시적인 거부(Implicit Denial) 규칙을 참고해 차단합니다.
    2. 방화벽 정책을 확인하는 중 허용 정책이 존재할 때
      1. 세션 테이블의 기록
포워딩 테이블을 확인
1. 조건에 맞는 정보가 포워딩 테이블에 있을 때
  1. 조건에 맞는 정보가 포워딩 테이블에 없을 떄
2. 패킷을 폐기합니다.
  1. 적절한 인터페이스로 패킷을 포워딩합니다.

SPI엔진 혹은 DPI엔진을 가진 방화벽은 세션 인지 기능이 있어 5-Tuple과 더불어 3계층 ~ 4계층의 세부적인 필드도 함께 확인합니다.
그에따라 무상태 기반 패킷 필터링에 비해 세션을 추가로 인지하고 세션 테이블에 정보를 저장하므로 세션을 로깅하기가 쉽습니다.

대부분 방화벽은 통신 전체의 세션을 로그로 저장할 수 있어 보안사고 시 이러한 세션 로그를 기반으로 어떤 통신이 문제가 있었는지 판단할 수 있습니다.

방화벽의 한계

초기의 방화벽은 전문적인 지식으로 한정된 네트워크에서 힘들게 유지되던 시기를 지나 현재는 SPI및 DPI 방화벽 엔진들로 인해 많은 공격을 쉽게 방어할 수 있게 되었습니다.
그렇기에 현대에는 많은 서비스에서 방화벽을 사용되자, 해커들의 해킹 방식은 계정 탈취에서 서비스 중단쪽으로 바뀌고, DDOS및 웜 공격등이 해킹에 새로운 트렌드로 바뀌었습니다.
이에 따라 방화벽을 우회하는 다양한 공격이 개발되고 인터넷 서비스가 마비되면서 방화벽의 한계가 명확히 드러났습니다.
현재는 이러한 공격에 방어를 위해 IPS 등과 같은 보안장비가 개발되어 왔지만, 해커의 공격들이 매우 다양해 그에 따른 취약점도 지속적으로 발생하고 있습니다.

참고문서

Javascript를 다중 스레드 처럼 사용하기 - 웹 워커(Web Worker), 공유메모리(SharedArrayBuffer), Atomics 객체 정리

방현준 — Mon, 29 Aug 2022 23:36:07 +0900

해당 내용은 만화로 소개하는 ArrayBuffer 와 SharedArrayBuffer와 T.J 크라우더의 웹 개발자를 위한 자바스크립트의 모든 것이라는 책을 읽고 작성한 글입니다.

웹 개발자를 위한 자바스크립트의 모든 것 : 네이버 도서

네이버 도서 상세정보를 제공합니다.

search.shopping.naver.com

여는글

여러분들은 자바스크립트가 싱글 스레드로 동작하는것을 알고 있으신가요?아마 어느정도 자바스크립트의 이해도가 있는 프론트엔드 개발자라면 자바스크립트는 싱글 스레드 언어란 것을 알고 있을겁니다.하지만, 이 말이 맞는 말이기도 하고, 틀린 말이기도 합니다.왜냐하면 웹 워커로 메인스레드와 워커 스레드를 만들 어 사용할 수 있기 때문이죠.

웹 워커(Web Worker)

웹 워커란 웹 브라우저(혹은 노드)에서 워커 쓰레드를 활용할 수 있는 웹 API입니다. 따라서 단일 스레드 기반의 자바스크립트도 이 웹 워커를 사용하면 충분히 멀티스레드가 가능합니다. 다만, 이 웹 워커는 복잡한 연산에는 사용할 수 있지만, Window나 Document같은 Dom 객체에 접근할 수 없어서 UI접근이 불가능합니다. 즉 자바스크립트의 단일 스레드는 UI스레드라고 보면 되고, UI스레드가 처리하기 어려운 무거운 연산(AI, games, image encoding, etc)은 웹 워커를 이용해 CPU가 처리한다고 보면 됩니다.

웹 워커를 활용한 멀티스레드의 문제 그리고 SharedArrayBuffer

스레드를 다뤄봤던 사람들이라면 잘 아시겠지만, 스레드는 각각이 독립적인 단위로 움직입니다. 그러면서 자연적으로 발생하는 문제는 자원 공유가 어렵다는 것 입니다. 따라서 멀티스레드를 지원하는 언어들 중, 대부분이 자원을 공유할 수 있는 방법을 제공했습니다. 하지만, 자바스크립트는 브라우저의 스레드 간 메모리를 공유할 방법을 제공하지 않았습니다(물론 반쪽자리 공유방법인 ArrayBuffer는 존재했습니다…) 하지만 ES2017에서 포함된 SharedArrayBuffer가 이것을 가능하게 했습니다. 어지럽습니다... ArrayBuffer는 뭐고 SharedArrayBuffer는 뭘까요?

ArrayBuffer가 뭔가요?

일단 먼저 저희는 ArrayBuffer에 대해서 알고 가야 합니다. ArrayBuffer란 오로지 숫자로만 표현할 수 있는 배열입니다. 실직적인 동작은 Javascript의 배열과 비슷하게 동작합니다. 다만, 이 ArrayBuffer란 녀석은 문자열이나 객체를 받을 수 없고 숫자로 된 바이트열을 값으로 받을 수 있습니다.예를 한번 보도록 하겠습니다.

// 4바이트로 버퍼를 만든 상태, 1byte는 8bit이기 때문에 계산하면 4바이트는 32비트가 된다.
const buffer = new ArrayBuffer(4);

// 32비트의 버퍼를 1바이트당 8비트로 할당을 해주면 총 배열 길이는 4가 되고 
// 각 배열 공간마다 8비트의 공간이 할당된다.
const view = new Int8Array(buffer);
 
console.log(view);
 
view[0] = 256;
view[1] = 257;
view[2] = 258;
view[3] = 259;
 
console.log(view);

확실히 뭔가 많이 복잡합니다. 여기서 집중해서 볼 부분은 ArrayBuffer로 객체를 생성하는 부분입니다. 이 ArrayBuffer는 생성 될 때 구간을 나누지 않고 전달받은 바이트 열을 그대로 크기만 가지고 버퍼를 만듭니다. 아래 그림처럼 말이죠

ArrayBuffer에 담긴 정보를 직접 수정하는건 불가능합니다. 즉, 이 ArrayBuffer는 단순한 이진 데이터 배열에 불과하단 것이죠. 그렇다면 이 이진데이터 덩어리들을 어떻게 사용해야 할까요? 그건 바로 view 라고 불리는 것으로 감싸야 합니다. view 로 표현된 데이터를 typed array (형식화 배열)에 추가할 수 있습니다. JavaScript 는 view 를 다룰 수 있는 다양한 typed array (형식화 배열)을 제공합니다. 예를 들어, 우리는 Int8 typed array (Int8 형식화 배열)를 이용해서 데이터 덩어리를 8-bit 단위의 바이트 값들로 나눌 수 있습니다. 아래 그림처럼 말입니다.

이런 방식으로, ArrayBuffer 는 기본적으로 메모리 자체인 것처럼 동작합니다. ArrayBuffer 는 C 같은 랭귀지를 사용할 때처럼 메모리를 직접 다루는 방식과 비슷한 효과를 만들어 냅니다. 그래서 이걸 어디다가 사용하냐구요? 아래에서 더 설명하도록 하겠습니다.

SharedArrayBuffer가 뭔가요?

SharedArrayBuffer란 이름에서 알 수 있다시피, ArrayBuffer를 공유하는 객체입니다. 잘 이해가 안가실겁니다. 이 말의 이해를 위해서 Javascript의 병렬 처리 로직을 조금 설명하고 들어가겠습니다. 개발자들은 기본적으로 유저에게 빠른 결과값을 제공하기 위해 별렬 처리 로직을 이용해 코드를 작성해 왔습니다. Javascript에서도 웹 워커를 이용하여 메인 스레드(UI 스레드)와 보조 스레드(연산 스레드)가 역할을 분리하여 작업을 할 수 있도록 처리되어져 왔고 사용자는 보다 빠른 결과값을 제공 받을 수 있었습니다. 하지만, 웹 워커는 단점이 존재하는데 워커들 즉 스레드 들끼리 메모리를 공유하지 않습니다.

이러한 단점은 꽤 크게 다가오는데 만약 우리가 다른 스레드와 어떤 데이터를 공유하고 싶다면, 그 데이터를 복사해서 전달해야만 한다는 뜻입니다. 이 작업은 postMessage 함수에 의해 처리됩니다. postMessage 에 어떤 객체를 전달하면, postMessage 함수는 그것을 직렬화해서(serialize) 다른 web worker 에 전달합니다. 그러면 데이터를 전달 받은 web worker 가 데이터를 풀어서(deserialize) 메모리에 복사합니다. 하지만 이러한 방법은 매우 느린 작업입니다.

ArrayBuffer 같은 메모리의 경우, 메모리 전달하기(transferring memory)라는 것이 가능합니다. 메모리 전달하기란 메모리의 특정 블록 소유권을 다른 web worker 로 이전하는 것입니다. 그러면 원래 해당 메모리 블록을 소유하고 있던 web worker 는 더이상 그 블록에 접근할 수 없게 됩니다. 사실 이러한 방식으로도 충분히 웹 워커 끼리 통신을 할 수 있고 고성능 병렬 처리 코드가 필요한 많지 않은 경우에는 이 방식이 적절하기도 합니다. 하지만 , 우리가 정말 원하는 것은 공유 메모리 (shared memory)입니다. SharedArrayBuffer 가 바로 이 기능을 제공합니다.

SharedArrayBuffer 를 쓰면 2개의 web work (즉 2개의 스레드) 모두가 메모리의 같은 영역을 읽고 쓸 수 있습니다. 이는 더이상 postMessage 를 쓸 때 감수해야 했던 통신 오버헤드와 시간지연을 겪지 않아도 된다는 뜻입니다. 2개의 web worker 모두가 데이터에 즉시 접근할 수 있습니다. 그러면 코드로 한번 확인해 보도록 하겠습니다. 먼저 ArrayBuffer에 코드를 한번 확인해 보도록 하겠습니다.

test.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
        <title>Basic SharedArrayBuffer Example</title>
    </head>
    <body>
        <script src="test-main.js"></script>
    </body>
</html>

test-main.js

// ArrayBuffer 메모리
const TYPE = "ArrayBuffer : ";
const buff = new ArrayBuffer(5 * Uint16Array.BYTES_PER_ELEMENT);
const view = new Uint16Array(buff);
 
// SharedArrayBuffer 메모리
// const TYPE = "SharedArrayBuffer : ";
// const buff = new SharedArrayBuffer(5 * Uint16Array.BYTES_PER_ELEMENT);
// const view = new Uint16Array(buff);
 
const worker = new Worker("./test-worker.js");
let counter = 0;
console.log("initial: " + formatArray(view));
worker.addEventListener("message", (e) => {
    if (e.data && e.data.type === "ping") {
        console.log(TYPE + "recieve Ping Type => " + formatArray(view));
        if (++counter < 10) {
            worker.postMessage({ type: "pong" });
        } else {
            console.log("done");
        }
    }
});
worker.postMessage({ type: "init", memoryType: TYPE, memory: view });
 
function formatArray(array) {
    return Array.from(array, (b) =>
        b.toString(16).toUpperCase().padStart(4, "0")
    ).join(" ");
}

test-worker.js

let TYPE;
let shared;
let index;
const updateAndPing = () => {
    ++shared[index];
    index = (index + 1) % shared.length;
    console.log(TYPE + "recieve Pong Type => " + formatArray(shared));
    this.postMessage({ type: "ping" });
};
this.addEventListener("message", (e) => {
    console.log("===============구분자================");
    if (e.data) {
        switch (e.data.type) {
            case "init":
                shared = e.data.memory;
                TYPE = e.data.memoryType;
                index = 0;
                updateAndPing();
                break;
            case "pong":
                updateAndPing();
                break;
        }
    }
});
 
function formatArray(array) {
    return Array.from(array, (b) =>
        b.toString(16).toUpperCase().padStart(4, "0")
    ).join(" ");
}

이 코드는 ArrayBuffer를 사용해서 메모리를 전달하는 방식으로 동작하는 방식입니다. 코드에서 보면 한번 postMessage로 ArrayBuffer메모리를 전달 한 후 워커에서 메모리를 +1씩 증가합니다. 그럼 코드를 실행하면 아래와 같은 결과가 나옵니다.

그럼 이렇게 워커에서는 계속해서 메모리를 증가시키는데 메인에서는 증가되지 않는 값을 가지고 있게되어집니다. main과 worker가 동시에 메모리를 업데이트 하려면 postMessage를 통해서 지속적으로 메모리를 전달해야할 겁니다. 이 방식은 SharedArrayBuffer에 비해 코스트가 많이 들지만 메모리를 공유함에 따라 발생하는 사이드 이펙트를 줄일 수 있습니다. 이제 ArrayBuffer대신 SharedArrayBuffer를 사용해서 메모리를 공유해 보겠습니다. `test-main.js`에서 2번째줄 ~ 4번째줄까지 주석 처리 후 7번째 줄 ~ 9번째 줄까지 주석을 해제해 줍니다. 그런 다음 코드를 실행하면 아래와 같은 결과가 나옵니다.

메모리의 값을 업데이트 하는 결과는 똑같지만, worker와 main이 정상적으로 결과값을 공유받는것을 알 수 있습니다. 이렇게 2개의 스레드가 메모리를 공유함에 따라 코스트가 ArrayBuffer에 비해 상대적으로 적게 들게됩니다. 다만, 2개 이상의 스레드가 동시에 즉각적으로 접근할 수 있기 때문에 그에 따라서 어떤 위험한 상황을 감수해야 합니다. 즉 레이스 컨디션(race condition)이 발생할 수 있습니다.

스레드를 사용하면 겪게되는 문제! 레이스 컨디션

일단, 레이스 컨디션이 뭔지 부터 알아봅시다. 레이스 컨디션 이란 두 개 이상의 스레드가 공유 메모리의 특정 자원을 병행적으로(concurrently) 읽거나 쓸 때, 공용 데이터에 대한 접근이 어떤 순서에 따라 이루어졌는지에 따라 그 실행 결과가 달라지는 상황을 말합니다. 에를 들어볼까요? 아래 그림을 보면 총 2개의 스레드가 열심히 일을 하고 있습니다. 중간에서 파일이 존재하는 지 체크하는 플래그를 공유 메모리로 가지고 있습니다.

코드는 두번째 스레드가 파일을 읽을 수 있도록 처리해 준 후 첫번째 스래드가 파일을 읽는 코드입니다. fileExists 공유 메모리의 초깃값은 false입니다.

개발자가 작성한 로직대로 잘 움직인다면 첫번째 스레드는 무리없이 원하는 결과인 파일을 로드할 수 있을겁니다.

하지만 모종의 이유로 첫번째 스레드가 먼저 읽혀지게된다면 첫번째 스레드는 파일을 읽지 못하고 특정 콘솔만 읽고 종료되어질 것입니다. 예시는 그렇게 심각한 문제가 아니지만, 이러한 상황이 엄청 중대한 로직에서 발생했을 때 후 폭풍은 상상도 하기 어려울 것 입니다. 사실 이러한 종류의 레이스 컨디션은 javascript로 서비스를 개발하다보면, 심심치 않게 볼 수 있습니다. 싱글스레드인데도 말이죠... 하지만, 싱글 스레드 코드에서는 발생하지 않는 종류의 레이스 컨디션이 있습니다. 이러한 레이스 컨디션을 막기위해서 Atomics라는 객체가 나오게 되었습니다.

Atomics 객체

Atomics 객체는 일관되고 순차적인 방식으로 공유 메모리를 관리 및 처리하기 위한 도구를 제공하는 객체입니다. 일반적으로 Atomics 객체는 생성자 함수가 아니라 정적메소드 이기 때문에 new 연산자를 사용하여 호출하거나 함수로 직접 호출할 수 없습니다. 또한, 레이스 컨디션이나 Stale하지 않은 값을 읽거나 비순차적 쓰기, 티어링같은 경우를 해결하기 위해 쓰이는 객체입니다. 단 SharedArrayBuffer 대상의 원자만 컨트롤할 수 있고 ArrayBuffer는 컨트롤 할 수 없습니다. 그럼 이게 어떻게 동작하는지 알아보도록 하겠습니다.

위 그림을 보면총 2개의 스레드가 존재합니다. 이 두개의 스레드는 한개의 공유메모리 블락을 공유하고 있습니다.

여기서 두번재 스레드가 공유메모리의 특정 부분이 필요합니다. 그러면 두번째 스레드는 필요한 메모리에 Lock 객체로 메모리를 잠그고, 메모리의 소유권을 흭득합니다.그러면 두번째 스레드가 소유권을 가진 메모리는 다른 스레드들이 접근하지 못하도록 막을 수 있습니다. 해당 코드는 Lock 객체를 획들했을 때만 해당 데이터에 접근하거나 해당 데이터를 수정할 수 있습니다.

만약 두번째 쓰레드가 메모리를 사용하고 있을 때 첫번째 스레드가 두번째 스레드가 사용중인 메모리가 필요 할 때 첫번째 스레드는 메모리의 Lock이 걸려있는지 확인하고 Lock이 걸려 있으면 Lock이 풀릴때 까지 기다립니다.

그리고 두번째 스레드가 일을 끝내면, 두번째 스레드는 unlock 함수를 호출할 것입니다. 그럼 lock 함수는 기다리고 있는 첫번째 스레드를 깨워서 데이터에 접근 가능함을 알릴 것입니다.깨어난 스레드는 Lock 객체를 획득해서, 데이터를 쓰는 동안 다른 스레드가 접근하지 못하게 막습니다.

이러면 레이스 컨디션 혹은 티어링 등의 문제가 해결되어 질 수 있습니다.말로 들으면 잘 이해가 안갈 수 있기 때문에 코드를 보며 이해해 보도록 하겠습니다.

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>SharedArrayBuffer demo</title>
    </head>
    <body>
        <script src="main.js"></script>
    </body>
</html>

main.js

var arr = new SharedArrayBuffer(256);
new Int16Array(arr)[0] = 0;
var workers = [];
for (let i = 0; i < 1000; i++) workers.push(new Worker("worker.js"));
workers.forEach((w) => w.postMessage(new Int16Array(arr)));

worker.js

onmessage = function (e) {
    /* 레이스 컨디션 발생 => 마지막 라인의 콘솔로그가 1000이 아님 */
    e.data[0]++;
 
    /* 레이스 컨디션 방지 => 마지막 라인의 콘솔로그가 1000 임 */
    // Atomics.add(e.data, 0, 1);
 
    console.log(e.data[0]);
};

여기서 중요하게 볼 부분은 worker.js입니다. Atomic을 사용하면 공유 메모리 사용의 결과값이 보장됩니다. 하지만 Atomics객체를 사용하지 않으면 결과값을 보장하기 어렵습니다. 이렇게, Atomics가 특정 공유 메모리를 접근할 때 그 메모리는 lock을 걸게 되고 해당 메모리의 소유권은 Atomics를 사용한 워커 스레드가 됩니다.

사실 이 예제 코드 아주 단순하기에 Atomics의 개념을 자세히 이해할 수 있는 코드가 아닙니다. Atomics의 개념을 이해하기 위해서는 아래 링크를 참고하는것을 추천 드립니다. (TIP : Atomics.wait, Atomics.notify등 다양한 함수를 이용되어지기에 링크를 먼저 보시는것을 추천 드립니다.)

GitHub - mozilla-spidermonkey/js-lock-and-condition: Simple Lock and Condition Variable Library for JavaScript with SharedArrayB

Simple Lock and Condition Variable Library for JavaScript with SharedArrayBuffer and Atomics - GitHub - mozilla-spidermonkey/js-lock-and-condition: Simple Lock and Condition Variable Library for Ja...

github.com

이곳에는 용이 살고 있다!(Here be dragons)

Here be dragons라는 말을 아시나요? 관용구로 미 개척지 혹은 용이 사는 위험한 곳이란 뜻입니다. 위 내용들을 설명한 책과 참고문서에서 하나같이 말하는 내용은 이 공유메모리가 과연 필요한지를 생각해 보라고 적혀 있습니다. 그럼 이제 한번 생각해봅시다. 우리는 과연 이러한 공유 메모리가 필요할까요? 아마 대부분의 서비스 개발자는 이러한 기능이 필요 없을 확률이 높을겁니다. 우리가 만약 웹 워커, 공유 메모리, 동시성 기능을 사용했을 때 발생하는 복잡 미묘한 버그로 인해 발생하는 코스트는 어마무시합니다. 따라서, 진짜 필요한 경우를 제외하고는 잘 나와있는 라이브러리를 사용하되 공유메모리를 건드려 서비스를 망가트리는 일은 최대한 자제하는게 좋습니다.

참고 문서

2022 인프콘 후기

방현준 — Sat, 27 Aug 2022 23:22:21 +0900

여는글

오랜만에 개발자 오프라인 컨퍼런스가 열렸습니다!!(그동안 컨퍼런스는 모두 온라인이었는데... 감동) 인프런에서 개최한 인프콘이란 행사였는데 오랜만에 열린 오프라인 컨퍼런스라 그런지 많은 개발자 분들이 신청을 하셨다고 들었습니다. 인프런에서도 이러한 상황에 몰릴걸 예상했는지 인원을 추첨으로 뽑았고 일단 저도 지원을 했는데 감사하게도 당첨이 되었습니다(짝짝짝)

인프콘 참가자 선정 메일 내용

그렇게 해서 여차저차 컨퍼런스에 다녀온 후기까지 작성하게 되었습니다. 그럼 한번 후기에 대해서 적어보도록 하겠습니다.

인프콘 발표 세션

인프콘 참석

코엑스 전경

당일 제가 코엑스에 도착한 시각은 대략 11시 40분 이었습니다. 본 행사가 시작되는 시간이 오후 1시이기에 너무 빨리 온게 아닐까 하는 걱정에 행사장에 가보니 이제 막 시작하고 있더라구요. 그래서 참가자 등록을 하고 행사장에 들어가니 꽤 많은 기업부스와 이벤트들이 준비되어져 있었습니다. 인프런측에서 꽤 열심히 준비를 하셨다는게 엿보였습니다. 일단 발도장 부터 찍기 위해 인프콘 포토스팟에서 사진 한장을 찍었습니다.

2022 인프콘 포토스팟

사람들이 많이 없을 때 이벤트와 기업부스를 참여하면서 느꼈던건 사람들이 많아지면서 이 이벤트의 줄들이 너무 길다는 것 였습니다. 저는 빨리 와서 전부 참여할 수 있었는데 늦게 오신분들은 참여를 못하고 있더라구요 (일찍 온게 신의 한수였습니다) 그리고 이 이벤트에 참여를 하면 룰렛같은것을 돌리는데 스티커 부터해서 과자, 책, 인프런 강의권 등등 많은 상품을 주었기 때문에 인프콘에 좋은 인상을 받을 수 있었습니다. 그렇게 이벤트에 참석도 하고 기업부스에서 이야기도 하면서 기다리다보니 어느덧 1시가 되었고 인프콘 시작을 알리는 오프닝 세션에 참석했습니다.

기업 부스들이 이렇게 즐비해 있다

행사장 메인, 룰렛을 돌려서 상품을 얻을 수 있었다

참가자 등록을 하면 주는 굿즈와 옷

오프닝

1시가 되니, 인프콘의 시작을 알리는 오프닝이 시작되었습니다. 처음에는 인프런에 CEO이신 이형주님이 진행을 하셨는데 꽤 많이 긴장이 되셨는지, 많이 떠시는 모습이 보였습니다. 그렇게 CEO분이 인프런을 만든 이유 목적, 나아갈 미래등을 설명한 후 뒤 이어 유튜브 개발바닥의 향로님으로 유명한 인프랩 CTO 이동욱님이 오프닝을 진행하였고 인프랩 커뮤니티 리드 홍연의님의 오프닝을 마지막으로 오프닝이 끝나고 본격적으로 컨퍼런스가 시작되었습니다.

만들면서 배우는 리액트 : 기초 (발표자 : 진유림님)

만들면서 배우는 리액트 : 기초

처음 참여한 세션은 핸즈온 세션인 "만들면서 배우는 리액트 : 기초" 라는 세션이었습니다. 저는 사실 이 세션을 가장 기다렸습니다. 왜냐하면 이 세션에서 하려는 목적을 잘못 이해했기 때문이죠... 저는 바닐라 자바스크립트로 리액트의 hooks나 상태관리 같은것을 만들면서 이해하는 세션인줄 알았지만, 단순히 npm을 사용하지 않고 CDN으로 React 라이브러리를 호출해서 React를 구성하는 과정이었습니다. 따라서 리액트를 많이 다뤄본 저한테는 크게 의미없는 세션이었고, 도움이 되지 않았던 세션이었습니다. 하지만 세션 자체는 참 좋았습니다. 내용도 좋았고, 발표도 매끄러웠으며, 실습도 꽤 괜찮았죠.(다만, 저한테만 안맞았을뿐...) 이 세션은 리액트를 배우지 않았거나 이제 입문한 사람에게는 좋았던 내용이었습니다. 인프런에 강의도 올라와 있다고 하니 한번 찾아보시는것도 좋아보입니다.

우리는 오늘도 성장합니다 - 인프랩 프론트엔드 업무 프로세스 변천사 (발표자 : 장우현님)

우리는 오늘도 성장합니다

15분 정도의 세션이었지만, 인프런이 어떻게 애자일 하고 있는지에 알 수 있던 세션이었습니다. 다만, 좀 늦게 참여하였기에 초반 내용을 잘 못들었지만, 인프런의 채용 서비스인 랠릿을 개발할 때 어떻게 애자일을 하고 있고, 기존의 QA만 들어가면 늘어나던 이슈를 데일리스크럼 및 개발자 테스트를 통해서 QA에서 발생하는 이슈 갯수를 줄일수 있었던 경험을 소개하는 좋은 세션이었습니다.

AWS로 알아보는 서비스 아키텍처의 변화와 진화 (발표자 : 송주영님)

AWS로 알아보는 서비스 아키텍처의 변화와 진화

저는 인프콘을 진행하면서 가장 재미있게 들었던 세션이 2가지가 있었는데 그 중 하나가 이 세션이었습니다. 특히 송주영님의 입담은 진짜 놀라움을 느꼈습니다. 사실 세션 제목에서는 AWS로 서비스를 어떻게 만드는지에 대해서 발표하는 자리인줄 알았지만, 실상 내용은 송주영님의 인생 이야기였어서 기술적인건 그렇게 크게 없었지만, 재미있게 들을 수 있었습니다. 특히 다른 사람의 인생이야기는 자칫 잘못하면 지루할 수 있었는데, 35분동안 늘어지지 않고 흥미진진하게 이어갈 수 있는 입담과 재밌는 이야기 끝에는 리스너들과 소통 진짜 너무 재밌었던 세션이었습니다.(사실 근데 기술 이야기는 크게 많이 없었던건 좀 아쉽긴 했습니다...)

인프런 개발자와의 데브챗

이 데브챗은 이벤트 장에서 인프런 개발자와 1:1로 이야기를 할 수 있는 이벤트(?) 였었는데 당일 신청을 해야했고 시간에 맞춰 대략 13분 정도 진행이 되었습니다. 저는 대략 5년차이신 인프런 프론트엔드 개발자와 13분 동안 이야기를 하였고, 주로 제가 현업에서 느꼈던 문제, 커리어, 인프런에서는 어떻게 개발을 진행하는지 알 수 있었던 재밌고 유익한 시간이었습니다. 이 데브챗을 통해서 인프런의 좋은 감정을 많이 느꼈습니다. 사실 13분이 길다면 길고 짧다면 짧은 시간이지만 또 이런자리가 있다면 신청하고 싶은 이벤트 였습니다.

Vanilla JS와 함께 지속가능한 프론트엔드 코드 만들기 - 인프런 수강 바구니 개선기 (발표자 : 이문기님)

Vanilla JS와 함께 지속가능한 프론트엔드 코드 만들기

제가 위에서 인프콘에서 재밌게 들은 세션이 2개 있다고 했는데 그 중 하나가 바로 이 세션이었습니다. 이 세션은 현재 인프런이 경험하고 있는 문제와 그것을 어떻게 풀었는지에 대해 이야기 하는 세션이었습니다. 특히 다양한 견해를 넓혀갈 수 있었던 세션이었습니다. 현재 레거시한 프론트엔드를 어떻게 지속 가능하게 다시 리팩토링하고 공통 데이터를 어떻게 관리할지, 그리고 CQS(Command Query Separation) Pattern, DTO(Data Transfer Object), JSDoc을 도입한 계기 등 지금 현재 제가 고민하고 있는 문제에 대해서 이야기를 해주셨는데 많은 도움이 됐고, 프론트엔드 개발자로서 한층 더 알 수 있었던 세션이었습니다. 그리고 DTO및 CQS에 대해서는 제가 몰랐던 내용이기에 꼭 다시 한번 복습해야겠다고 느꼈습니다.

마무리

인프콘에서 받은 굿즈 정리

전반적으로 좋은 경험을 준 컨퍼런스 였습니다. 프론트엔드 개발적으로는 배울 수 있었던 세션이 한개였던게 조금 아쉽긴 했지만, 그래도 꽤 재밌게 들었고, 오랜만에 한 오프라인 컨퍼런스라 그런지 감회도 새로웠습니다. 다음에도 2023 인프콘이 개최된다면 꼭 참여해야겠다고 다짐한 컨퍼런스 였습니다.

Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기

방현준 — Sat, 7 May 2022 16:59:35 +0900

React, Strapi v4, MySQL을 이용한 Todolist 만들기 시리즈

2022.05.05 - [프로그래밍 언어/웹 프론트엔드] - 프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기
2022.05.06 - [프로그래밍 언어/웹 프론트엔드] - React와 Strapi 연동 - React, Strapi v4, MySQL을 이용한 Todolist 만들기
2022.05.07 - [프로그래밍 언어/웹 프론트엔드] - Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기

여는글

자 우리는 Strapi와 MySQL, React를 이용해서 Strapi를 사용해 보았습니다. 어떤가요? Strapi가 사용하기 편했나요? 프론트엔드 개발자라면 상당히 편했을 겁니다. 그도 그럴게 백엔드 코딩 없이 손 쉽게 백엔드를 만들었으니까요. 그럼 이제 Strapi가 뭔지 알아보도록 하시죠.

CMS란?

왜 Strapi를 알아보자고 하는데 CMS를 알아보느냐, Strapi는 Headless CMS이기 때문이죠, 처음부터 Headless CMS 어쩌고 하면 잘 이해가 안갈테니, CMS부터 설명해 보겠습니다. CMS는 Content Management System(콘텐츠 관리 시스템)의 준 말로, 코딩없이 대시보드를 이용해 유저에게 제공할 컨텐츠를 생성, 수정, 삭제 등을 할 수 있게 도와주는 시스템 입니다. 워드프레스나 마젠토, 오픈카트를 CMS라고 합니다. 이 시스템들의 공통점은 위에서 말씀 드렸던 코딩 없이, 웹 사이트를 만들 수 있는것 입니다. 이것이 중요합니다.

Headless CMS란?

Headless Content Management System(헤드리스 콘텐츠 관리 시스템)의 준 말로, Head가 없는 컨텐츠 관리 시스템입니다. 갑자기 Headless가 붙었는데 Headless는 무엇이냐, CMS를 말씀 드렸을 때 코딩 없이 웹 사이트를 만든다고 했는데, 이 말은 프론트엔드, 백엔드 구분 없이 대시보드를 이용해 하나의 웹서비스를 만들수 있는 시스템이라는 말입니다. 여기서 CMS는 Head(Frontend), Body(Backend)로 보는데, 이것에서 Head(Frontend)를 없앤 CMS 라고 해서 Headless CMS 라고 부릅니다. 백엔드를 잘라낸 CMS라면 Bodyless CMS 라고 부르겠죠?

Strapi란?

자 그럼 다시 돌아와서 우리가 지금까지 사용했던 Strapi라는것은 무엇일까요? Strapi는 Headless CMS로서, 빠른 속도로 대시보드를 이용해 백엔드 시스템을 구축할 수 있는 툴 입니다. 이 Strapi는 Node.js 기반의 오픈소스로서 개발자라면 커스터마이징이 용이한 시스템입니다.(하지만, 커스터마이징이 엄청나게 용이하진 않다..)

그러면 Wix같은 서비스도 CMS인가요?

정확히 말하면 아닙니다. CMS는 호스팅도 셀프로 가능해야합니다. Wix는 호스팅을 wix를 통해서 해야하기 때문에 CMS에 부합하지 않습니다. wix같은 서비스는 단순한 웹 서비스로 보는게 일반적입니다.

Strapi가 그럼 최강일까?

Strapi는 최강이 아닙니다, 물론 간단한 서비스 입장에서는 최강일 수 있습니다. 여태까지 우리가 만들어 왔던 Todolist도 데이터베이스 설계부터 데이터 생성, 백엔드 코드 개발 등 최소 1일은 걸립니다. 하지만 우리는 단 1시간만에 이것을 해결할 수 있었습니다. 그만큼 Strapi의 장점은 확고 합니다. 하지만, 아까 말했다시피 커스터 마이징이 용이하지 않고, DB를 직접 조작하기가 쉽지 않고, 실제로 개발하는 것 보다 Strapi가 성능면에서 느리다는 단점이 있습니다. 즉, 간단히 말해서, 간단한 서비스에서는 꽤 좋은 경험을 가질 수 있지만, 복잡하디 복잡한 서비스에서는 Strapi가 큰 도움을 줄 수 없을것입니다.

결론

Strapi 꽤 좋은 시스템입니다. 코딩 없이 CRUD의 기본 기능을 만들 수 있고, 빠른 개발 속도를 낼 수 있습니다. 위에서 단점을 말씀 드렸지만, 단점을 잡아먹을 장점이 많습니다. 따라서 한번 Strapi에 대해서 경험해 보았으니 사용의 여부는 사용자에게 달려 있습니다. 단 서버의 커스터 마이징이 필요한 부분이 있다면 사용을 고려해 보아야 합니다. 나중에 마이그레이션 할 떄 큰 고통을 받을 수 있습니다ㅠㅠ

React와 Strapi 연동 - React, Strapi v4, MySQL을 이용한 Todolist 만들기

방현준 — Fri, 6 May 2022 16:59:53 +0900

React, Strapi v4, MySQL을 이용한 Todolist 만들기 시리즈

2022.05.05 - [프로그래밍 언어/웹 프론트엔드] - 프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기
2022.05.06 - [프로그래밍 언어/웹 프론트엔드] - React와 Strapi 연동 - React, Strapi v4, MySQL을 이용한 Todolist 만들기
2022.05.07 - [프로그래밍 언어/웹 프론트엔드] - Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기

React 프로젝트에서 TodoList 프로젝트 뼈대 만들기

아래 코드를 일일히 쳐가며 만들어 가는것을 추천 드리지만, 귀찮은 작업이다 보니 아래 GitHub에 제 코드를 올려놓았으니, 다운 받으시면 됩니다.

GitHub - BangHyeonJun/strapi-react-mysql-front

Contribute to BangHyeonJun/strapi-react-mysql-front development by creating an account on GitHub.

github.com

자 그럼 저희가 아까 만들어 놓은 프로젝트를 VSCode를 통해 킵니다. 그러면 기본적인 프로젝트의 구조는 위와 같습니다. 이러한 프로젝트 구조의 파일들을 오른쪽과 같이 맞춰 줍니다.

src/Index.js

해당 컴포넌트는 기본 제공 템플릿에서 크게 변경하지 않았습니다. report 기능만 제거한 컴포넌트 입니다.

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
	<React.StrictMode>
		<App />
	</React.StrictMode>
);

src/Index.css

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

src/App.js

할 일 컴포넌트를 호출하는 컴포넌트입니다. 또한 모든 Action 및 Fetching들은 App.js에서 관리합니다.

import React, { useState } from "react";
import TaskManager from "./components/TaskManager";

function App() {
	const [todoList, setTodoList] = useState([]);

	const fetchTodoList = async () => {};

	const changeTaskToComplete = (id) => async () => {};

	const changeTaskToUnComplete = (id) => async () => {};

	const appendTaskInToDoList = async (title) => {};

	const deleteTaskInToDoList = (id) => async () => {};

	return (
		<div className="App">
			<TaskManager
				onComplete={changeTaskToComplete}
				onUnComplete={changeTaskToUnComplete}
				onAppend={appendTaskInToDoList}
				onDelete={deleteTaskInToDoList}
				todoList={todoList}
			></TaskManager>
		</div>
	);
}

export default App;

src/App.css

/* 비어놓음 */

src/components/TaskManager.js

전반적인 할 일 목록의 컴포넌트를 호출하는 컴포넌트입니다. 또한 현재 날짜를 화면에 보여주는 역할도 수행합니다.

import React from "react";
import "./TaskManager.css";
import Tasklist from "./Tasklist";
import Taskform from "./Taskform";

const dateformatted = new Date().toLocaleDateString("ko-KR", {
	weekday: "long",
	year: "numeric",
	month: "long",
	day: "numeric",
});

const TaskManager = ({
	todoList,
	onComplete,
	onUnComplete,
	onAppend,
	onDelete,
}) => {
	return (
		<div className="taskmanager">
			<div className="header">{dateformatted} - 할 일 목록 </div>
			<Tasklist
				onComplete={onComplete}
				onUnComplete={onUnComplete}
				onDelete={onDelete}
				todoList={todoList}
			></Tasklist>
			<Taskform onAppend={onAppend}></Taskform>
		</div>
	);
};

export default TaskManager;

src/components/TaskManager.css

.taskmanager {
	display: grid;
	margin: 5%;
	height: auto;
	border-radius: 12px 8px 5px;
	grid-template-areas: "header" "content" "footer";
	grid-template-columns: 1fr;
	grid-template-rows: 0.1fr 1fr 0.1fr;
	grid-gap: 5px;
}

.header {
	grid-area: header;
	font-size: 28px;
	text-align: center;
	font-weight: bolder;
}
.task {
	grid-area: content;
}
.taskform {
	grid-area: footer;
}

.container {
	width: 100%;
	height: 50vh;
	margin: 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
}

.emptyemoji {
	font-size: 6rem;
	margin-bottom: 5vh;
	color: rgba(0 0 0 / 0.3);
}

.emptytxt {
	font-size: 2rem;
	color: rgba(0 0 0 / 0.3);
}

src/components/Tasklist.js

해당 컴포넌트는 본격적으로 할 일 목록을 만들어주는 함수 입니다.

import Task from "./Task";

const Tasklist = ({ onComplete, onUnComplete, onDelete, todoList }) => {
	if (!todoList.length)
		return (
			<div className="container">
				<span className="emptyemoji"> </span>
				<strong className="emptytxt">할 일을 입력해 주세요</strong>
			</div>
		);

	return (
		<div>
			<div className="ctheader">To Do</div>

			{todoList.map(
				(v) =>
					v.attributes.complete_yn || (
						<Task
							key={v.id}
							id={v.id}
							className={"task"}
							title={v.attributes.title}
							onClick={onComplete}
							onDelete={onDelete}
						></Task>
					)
			)}

			<div className="ctheader">Completed</div>

			{todoList.map(
				(v) =>
					v.attributes.complete_yn && (
						<Task
							key={v.id}
							id={v.id}
							className={"comtask"}
							title={v.attributes.title}
							onClick={onUnComplete}
							onDelete={onDelete}
						></Task>
					)
			)}
		</div>
	);
};

export default Tasklist;

src/components/Taskform.js

할 일을 추가하는 컴포넌트 입니다. 사용자가 enter를 클릭시 할 일을 추가하는 역할을 하는 컴포넌트 입니다.

import React, { useState } from "react";
import "./Taskform.css";

const Taskform = ({ onAppend }) => {
	const [inputEntered, updateInput] = useState("");

	const enterTextlistener = (e) => {
		if (e.key === "Enter") {
			onAppend(inputEntered);
		} else {
			updateInput(() => e.target.value);
		}
	};

	return (
		<div className="taskform">
			<input
				className="ipclass"
				type="text"
				pattern=".*"
				placeholder="할 일을 추가해주세요"
				value={inputEntered}
				onChange={enterTextlistener}
				onKeyPress={enterTextlistener}
			/>
		</div>
	);
};

export default Taskform;

src/components/Taskform.css

.taskform {
	border-top: 40px;
	font-size: 18px;
	padding: 10px;
	padding-left: 20px;
	margin: 10px;
	width: auto;
	border: 1px solid rgba(0 0 0 / 0.1);
	color: black;
	font-weight: 500;
}

.ipclass {
	width: calc(100% - 22px);
	outline: none !important;
	border: 0px solid red;
	background: transparent;
	border: transparent;
	font-size: 18px;
}

.ctheader {
	color: rgba(0, 0, 0, 0.5);
	font-size: 22px;
	border-radius: 4px 20px;
	padding: 10px;
	padding-left: 20px;
	margin: 10px;
	width: auto;
	display: grid;
	font-weight: bold;
	letter-spacing: 2px;
}

src/components/Task.js

할 일을 보여주고 할 일을 완료 및 할 일로 변경하는 컴포넌트입니다. 추가로 삭제하는 기능도 포합합니다.

import React from "react";
import "./Task.css";

const Task = ({ id, title, className, onClick, onDelete }) => {
	return (
		<div className="tcontainer">
			<div className={className} onClick={onClick(id)}>
				{title}
			</div>
			<button className="delbtn" onClick={onDelete(id)}>
				삭제
			</button>
		</div>
	);
};

export default Task;

src/components/Task.css

.tcontainer {
	width: calc(100% - 20px);
	display: flex;
	justify-content: space-between;
	margin: 25px 10px 25px 10px;
}

.delbtn {
	width: 60px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	background-color: #dc3545;
	border-color: #dc3545;
	text-decoration: none;
	border: 1px solid transparent;
	font-weight: 400;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	vertical-align: middle;
	user-select: none;
	font-size: 16px;
	line-height: 1.5;
	border-radius: 0.25rem;
}

.delbtn:hover {
	color: #fff;
	background-color: #c82333;
	border-color: #bd2130;
}

.task {
	border-top: 40px;
	color: black;
	font-size: 18px;
	border-radius: 0.25rem;
	padding: 10px;
	padding-left: 20px;
	width: calc(100% - 100px);
	border: 1px solid rgba(0 0 0 / 0.1);
	font-weight: 500;
	cursor: pointer;
}

.task:hover {
	background: rgba(0 0 0 / 0.1);
}

.comtask {
	border-top: 40px;
	font-size: 18px;
	border-radius: 0.25rem;
	padding: 10px;
	padding-left: 20px;
	width: calc(100% - 100px);
	text-decoration: line-through;
	background-color: rgba(0 0 0 / 0.1);
	border: 1px solid rgba(0 0 0 / 0.1);
	color: rgba(255, 255, 255, 0.9);
	font-weight: 500;
	cursor: pointer;
}

.comtask:hover {
	color: black;
	background-color: rgba(0 0 0 / 0);
	border: 1px solid rgba(0 0 0 / 0.1);
}

해당 프로젝트를 실행하면 아래와 같은 화면이 나옵니다. 또한 별다른 액션은 따로 안나타납니다. 걱정 마세요 앞으로 우리가 만들어 갈 꺼니까요

React프로젝트에서 생성한 Strapi API 사용하기

React 프로젝트에서 아래 커맨드를 입력해 줍니다.

npm install axios

그럼 Axios가 설치됩니다. 그럼 아래 소스와 같이 Axios를 사용하여 Strapi에서 만들었던 todolist Mock data를 Fetching 해보겠습니다.

src/App.js

import React, { useEffect, useState } from "react";
import TaskManager from "./components/TaskManager";
import axios from "axios"; // 추가

function App() {
	const [todoList, setTodoList] = useState([]);

	// 추가
	useEffect(() => { 
		updateTodoList();
	}, []);

	// 추가
	const updateTodoList = async () => {
		const { data } = await fetchTodoList();
		setTodoList(data);
	};

	// 추가
	const fetchTodoList = async () => {
		const { data } = await axios.get(`http://localhost:1337/api/todos`);
		return data;
	};

	const changeTaskToComplete = (id) => async () => {};

	const changeTaskToUnComplete = (id) => async () => {};

	const appendTaskInToDoList = async (title) => {};

	const deleteTaskInToDoList = (id) => async () => {};

	return (
		<div className="App">
			<TaskManager
				onComplete={changeTaskToComplete}
				onUnComplete={changeTaskToUnComplete}
				onAppend={appendTaskInToDoList}
				onDelete={deleteTaskInToDoList}
				todoList={todoList}
			></TaskManager>
		</div>
	);
}

export default App;

요렇게 추가를 하니 아래 화면이 정상적으로 나오는 것을 확인할 수 있습니다.

축하합니다!! 저희는 Strapi에서 생성한 API를 첫 사용했습니다!!

Strapi를 이용해 CRUD 생성하기

다시 Strapi로 돌아가 아래와 같이 Settings - Roles - Public 순으로 이동합니다.

그런 다음 todos 드롭박스를 열고 create, delete, update 체크박스에 체크 한 후 Save 버튼을 클릭합니다.

축하합니다! CRUD API를 전부 생성했습니다. 참고로 내 API URL이 궁금하다면 궁금한 Action에 톱니 모양 버튼을 클릭하면 확인 할 수 있습니다.

React로 만든 Todolist에서 Strapi CRUD 사용하기

자 이제 저희는 CRUD를 전부 사용하여 Todolist를 완성시킬 겁니다. 첫번째로 할 것은 할 일을 완료하고 완료한 것을 할 일로 돌리는 작업입니다. 아래와 같이 코드를 작성해 주세요

src/App.js

import React, { useEffect, useState } from "react";
import TaskManager from "./components/TaskManager";
import axios from "axios";

function App() {
	const [todoList, setTodoList] = useState([]);

	useEffect(() => {
		updateTodoList();
	}, []);

	const updateTodoList = async () => {
		const { data } = await fetchTodoList();
		setTodoList(data);
	};

	const fetchTodoList = async () => {
		const { data } = await axios.get(`http://localhost:1337/api/todos`);
		return data;
	};

	// 추가
	const changeTaskToComplete = (id) => async () => {
		await axios.put(`http://localhost:1337/api/todos/${id}`, {
			data: {
				complete_yn: true,
			},
		});
		updateTodoList();
	};

	// 추가
	const changeTaskToUnComplete = (id) => async () => {
		await axios.put(`http://localhost:1337/api/todos/${id}`, {
			data: {
				complete_yn: false,
			},
		});
		updateTodoList();
	};

	const appendTaskInToDoList = async (title) => {};

	const deleteTaskInToDoList = (id) => async () => {};

	return (
		<div className="App">
			<TaskManager
				onComplete={changeTaskToComplete}
				onUnComplete={changeTaskToUnComplete}
				onAppend={appendTaskInToDoList}
				onDelete={deleteTaskInToDoList}
				todoList={todoList}
			></TaskManager>
		</div>
	);
}

export default App;

코드를 다 입력 했다면 프로젝트에서 할 일 중 하나의 할 일을 클릭해 볼까요?

정상적으로 할 일에서 완료로 전환되는것을 확인할 수 있습니다.

자, 이제 다음은 삭제를 구현해 볼 것입니다. 아래 코드를 입력해 주세요.

src/App.js

import React, { useEffect, useState } from "react";
import TaskManager from "./components/TaskManager";
import axios from "axios";

function App() {
	const [todoList, setTodoList] = useState([]);

	useEffect(() => {
		updateTodoList();
	}, []);

	const updateTodoList = async () => {
		const { data } = await fetchTodoList();
		setTodoList(data);
	};

	const fetchTodoList = async () => {
		const { data } = await axios.get(`http://localhost:1337/api/todos`);
		return data;
	};

	const changeTaskToComplete = (id) => async () => {
		await axios.put(`http://localhost:1337/api/todos/${id}`, {
			data: {
				complete_yn: true,
			},
		});
		updateTodoList();
	};

	const changeTaskToUnComplete = (id) => async () => {
		await axios.put(`http://localhost:1337/api/todos/${id}`, {
			data: {
				complete_yn: false,
			},
		});
		updateTodoList();
	};

	const appendTaskInToDoList = async (title) => {};

	// 추가
	const deleteTaskInToDoList = (id) => async () => {
		await axios.delete(`http://localhost:1337/api/todos/${id}`);
		updateTodoList();
	};

	return (
		<div className="App">
			<TaskManager
				onComplete={changeTaskToComplete}
				onUnComplete={changeTaskToUnComplete}
				onAppend={appendTaskInToDoList}
				onDelete={deleteTaskInToDoList}
				todoList={todoList}
			></TaskManager>
		</div>
	);
}

export default App;

코드를 다 입력 했다면 프로젝트에서 할 일 중 하나의 할 일을 삭제해 볼까요?

와우! 삭제도 정상적으로 동작합니다. 그럼 CRUD에 마지막 Create 생성만이 남았습니다. 생성도 한번 아래 코드처럼 작성해 주세요

src/App.js

import React, { useEffect, useState } from "react";
import TaskManager from "./components/TaskManager";
import axios from "axios";

function App() {
	const [todoList, setTodoList] = useState([]);

	useEffect(() => {
		updateTodoList();
	}, []);

	const updateTodoList = async () => {
		const { data } = await fetchTodoList();
		setTodoList(data);
	};

	const fetchTodoList = async () => {
		const { data } = await axios.get(`http://localhost:1337/api/todos`);
		return data;
	};

	const changeTaskToComplete = (id) => async () => {
		await axios.put(`http://localhost:1337/api/todos/${id}`, {
			data: {
				complete_yn: true,
			},
		});
		updateTodoList();
	};

	const changeTaskToUnComplete = (id) => async () => {
		await axios.put(`http://localhost:1337/api/todos/${id}`, {
			data: {
				complete_yn: false,
			},
		});
		updateTodoList();
	};

	// 추가
	const appendTaskInToDoList = async (title) => {
		await axios.post(`http://localhost:1337/api/todos`, {
			data: {
				title: title,
				complete_yn: false,
			},
		});
		updateTodoList();
	};

	const deleteTaskInToDoList = (id) => async () => {
		await axios.delete(`http://localhost:1337/api/todos/${id}`);
		updateTodoList();
	};

	return (
		<div className="App">
			<TaskManager
				onComplete={changeTaskToComplete}
				onUnComplete={changeTaskToUnComplete}
				onAppend={appendTaskInToDoList}
				onDelete={deleteTaskInToDoList}
				todoList={todoList}
			></TaskManager>
		</div>
	);
}

export default App;

자 코드를 작성했으면 할 일을 추가하는 항목에서 할 일을 추가해 봅시다.

세번째 할 일이 생성된 것을 확인할 수 있습니다. 이것으로 모든 CRUD가 완벽하게 동작합니다.

Strapi 안에서도 데이터가 잘 등록되어 있군요. 자 우리는 기본적인 API를 사용해서 Todolist를 만들었습니다.

프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기

방현준 — Thu, 5 May 2022 22:57:41 +0900

React, Strapi v4, MySQL을 이용한 Todolist 만들기 시리즈

2022.05.05 - [프로그래밍 언어/웹 프론트엔드] - 프로젝트 설정 및 Strapi사용하기 - React, Strapi v4, MySQL을 이용한 메모앱 만들기
2022.05.06 - [프로그래밍 언어/웹 프론트엔드] - React와 Strapi 연동 - React, Strapi v4, MySQL을 이용한 Todolist 만들기
2022.05.07 - [프로그래밍 언어/웹 프론트엔드] - Strapi란? - React, Strapi v4, MySQL을 이용한 Todolist 만들기

여는글

최근, Strapi라는 Headless CMS 툴을 알게 되었습니다. 저는 보통 뱌텀 업(Bottom-Up) 방식의 글을 좋아하지만, 이번에는 탑 다운(Top-Down) 방식의 블로그 글을 적어보려고 합니다. 그럼 바로 시작해 보겠습니다.

Node 설치

Node.js

Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.

nodejs.org

위 링크에 접속하여 LTS 버전의 node를 설치해 주세요 Strapi는 기본적으로 Node를 사용하며 v14 버전을 가장 권장하지만, 테스트 결과 v16도 충분히 잘 동작합니다.

그리고 dmg 파일이 설치되면 계속 > 동의 > 계속 > 설치 로 node.js를 설치합니다. 다 설치가 완료되면 아래 커맨드를 입력하여 잘 설치가 되었는지 확인하면 됩니다.

node --version

npm --version

프론트엔드 프로젝트 생성 및 실행

기본적으로 프론트엔드는 제목에서도 알다시피 React를 사용합니다. 따라서 React의 기본적인 지식이 있는 분이 보면 더 이해가 쉽지만, 모르셔도 차근차근 따라가다보면 느낌적으로 이해할 수 있도록 모든 코드를 작성했습니다. 만약 모르는 부분이 있다면, 댓글을 달아주시면 알려드리도록 하겠습니다.

프로젝트 생성

npx create-react-app todolist-front

프로젝트 실행

cd todolist-front
npm start

Database 설치

Strapi v4 기준으로 지원하는 DB는 SQLite, PostgreSQL, MySQL입니다. 따라서 입 맛에 맞게 설치하면 됩니다. 다만 이 프로젝트에서는 MySQL을 사용할 예정입니다. 또한, 및 맥 기준 설명이므로 Windows와는 상이 할 수 있습니다. Windows 운영체제를 사용하시는 분은 아래 링크를 통해서 설치해 주시기 바랍니다.

How to install MySQL database server 8.0.19 on Windows 10

This article explains the step by step installation process of the MySQL Database server 8.0.19 on Windows 10.

www.sqlshack.com

MySQL 설치

MySQL Community Downloads 접속

MySQL :: Download MySQL Community Server

Select Operating System: Select Operating System… Microsoft Windows Ubuntu Linux Debian Linux SUSE Linux Enterprise Server Red Hat Enterprise Linux / Oracle Linux Fedora Linux - Generic Oracle Solaris macOS Source Code Select OS Version: All Windows (x86

dev.mysql.com

각 Mac 운영체제에 맞게 OS를 설정한 후 DMG를 다운로드 합니다.

DMG가 다 다운로드 되었다면 기존 프로그램 설치하듯이 설치하시면 되지만, 중간에 root 비밀번호를 설정하라는 부분이 나옵니다. 비밀번호는 꼭 기억하고 있어야 합니다.

시스템 환경설정에 MySQL 아이콘이 생긴것을 확인할 수 있습니다.

그럼 MySQL 아이콘을 클릭하면

요렇게 Active Instance가 된 상태면 설치가 정상적으로 완료된 것입니다.

만약 Active Instance가 안된 상태면 우측에 Start MySQL Server를 클릭해 주세요

MySQL 접속 및 Database 생성

아래 커맨드를 터미널에서 입력해 줍니다.

cd /usr/local/mysql/bin
./mysql -u root -p

그럼 패스워드를 묻는데, 아까 설정한 root 패스워드를 입력해주면 MySQL에 접속이 되는것을 확인할 수 있습니다.

이제 todolist에서 사용할 데이터베이스를 만들어줍니다.

아래 커맨드를 mysql 콘솔창에서 입력해 줍니다.

CREATE DATABASE todolist;
USE todolist;

그럼 잘 만들어 졌는지 확인해 볼까요?

SHOW DATABASES;

Strapi 프로젝트 생성

새로운 터미널을 열어서 아래 커맨드 입력

yarn create strapi-app todolist-back

그럼 아래 사진과 같이 진행될 것 입니다.

그럼 아래처럼 입력해 주세요, Database name은 꼭 todolist로 해야합니다. todolist-back이 아닙니다. Password는 아까 우리가 설정한 MySQL root 비밀번호로 해주세요

? Choose your installation type Custom (manual settings)
? Choose your default database client mysql
? Database name: todolist
? Host: 127.0.0.1
? Port: 3306
? Username: root
? Password: <mysql root 비밀번호>
? Enable SSL connection: Yes

참고로 아래와 같은 에러가 발생할 수도 있습니다.

Connection test failed: ER_NOT_SUPPORTED_AUTH_MODE: Client does not support authentication protocol requested by server; consider upgrading MySQL client

그러면 MySQL에서 아래 커맨드를 실행시켜주세요

ALTER user 'root'@'localhost' IDENTIFIED WITH mysql_native_password BY '기존 root 비밀번호';

그런 다음 다시 Strapi 프로젝트를 만들면 정상적으로 동작하는 것을 확인할 수 있습니다.

Strapi 프로젝트 실행

아래 커맨드 입력

cd todolist-back
yarn develop

그럼 프로젝트가 실행되고 아래 사진처럼 웹 페이지가 나오게 됩니다.

해당 페이지는 strapi를 사용하는 super 계정을 만드는 과정입니다. 적절히 입력해 준 후 Let’s Start를 클릭하면 아래와 같이 Strapi에 접속이 가능해 집니다.

Strapi를 이용하여 Todolist 테이블 생성하기

Content-Type Builder 메뉴 클릭

Create new collection type 클릭

Create a collection type이라는 모달이 하나 뜨는데 아래와 같이 입력해 주세요 Display name은 mysql에 테이블이 됩니다. 또한 복수형으로 적성하지 않고 단수형으로 작성해 주셔야 합니다.

Continue를 클릭해 준 후 필드를 만들수 있는 모달이 나오고 아래와 같은 방식으로 진행해주세요

이렇게 하면 데이터 베이스의 테이블과 필드가 생성됩니다. 나머지 필드도 생성해 봅시다.

이렇게 하면 기본적인 todolist의 테이블 구조가 생성이 된것입니다. 그럼 mysql에서 진짜 테이블이 생성되었는지 확인해 볼까요?

DESC todos;

여기서 저희가 생성하지 않은 필드도 존재합니다. 하지만 이건 Strapi에서 자동으로 생성하는 필드 이므로 신경쓰지 않으셔도 됩니다.

Strapi를 이용하여 Todolist Mock 데이터 생성하기

사이드 바에 Content Manager 메뉴를 클릭 후 Collection Types에 todo 클릭 후 create new entry 클릭

그런 다음 아래와 같이 입력 후 Save 버튼을 클릭

그럼 이렇게 데이터가 저장이 됩니다. 이건 생성이 아니라 단순한 저장이라 아래 사진처럼 Draft로 남아 있게 됩니다. 아직 Draft가 무엇인지는 알 필요가 없습니다. 간단히 임시 저장 상태라는것 만 이해해 주면 됩니다. 그럼 이 데이터를 발행하여 상태를 바꿔 봅시다. 첫번째 할 일 임시 데이터를 클릭 후 아래와 같이 게시를 해봅시다.

상태를 보면 상태가 Published로 변경되어 있습니다. 이제 진짜 데이터가 된겁니다. Mysql에서 한번 확인해 볼까요?

select * from todos;

저는 미리 한번 확인해 보아서 위의 처럼 published_at이 Draft상태에서는 null, published 상태에서는 published 날짜가 들어간 것을 확인할 수 있습니다. 자 이렇게 첫번째 Mock 데이터를 생성하였습니다.

Strapi에서 API를 생성해 Mock Data 가져오기

Strapi에서는 보안상 문제로 인해 API를 처음에 만들어 주지 않고 Setting에서 특정한 설정을 통해 만들어 줍니다. 아래 사진과 같이 Settings - Roles - Public 필드 수정 순으로 이동합니다.

그 후 Permissions - Todo - find 순으로 클릭 하면 Bound route to api ::todo.todo 에 API가 나오게 됩니다.

Save를 클릭하면 이제 API를 호출할 수 있는 상태가 된 겁니다. 크롬 브라우저에서 새탭을 열어준 후 아래 URL을 주소창에 입력해 줍니다. http://localhost:1337/api/todos

그럼 위 처럼 데이터가 나오게 됩니다. 여기서 우리가 아까 Mock데이터를 만들떄 보았던 Published와 Draft를 알 수 있습니다. 한번 더 아래와 같이 데이터를 만들어 볼까요?

이 상태에서 다시 우리가 아까 열었던 텝인 http://localhost:1337/api/todos 탭을 새로고침 하면 변화가 없습니다.

그럼 두번째 할 일 Mock 데이터를 발행 후 다시 새로고침을 해봅시다.

두번째 할 일이 생겼습니다. 이제 좀 차이를 아시겠죠? 즉 데이터를 만든다고 해서 데이터를 즉각적으로 publish를 하면 실수했을 때를 잡아낼 수 없습니다. 일종의 보안장치 이죠. 돌아가서 Strapi는 Permission을 통해 기본적인 CRUD를 만들 수 있습니다. 참 간편합니다. 방금은 리스트를 가져오는 기능을 개발한거구요 Strapi는 기본 기능에서는 3개의 권한을 만들수 있습니다. 권한을 3개 이상 추가하려면 무료 버전이 아닌 돈을 지불하여 늘릴 수 있습니다.

마무리

오늘은 Strapi를 간단하게 다뤄 봤습니다. 다음 시간에는 React와 Strapi의 연동하는 방법에 대해서 알아보도록 하겠습니다. 감사합니다.

PWA 시작하기 - Next.js 프로젝트로 PWA 만들기

방현준 — Wed, 27 Apr 2022 18:25:58 +0900

이 글은 기본적으로 Next.js를 알고 계신 분들이 보기 좋은 글입니다.
하지만 모르시는 분들도 이해하실 수 있도록 작성하였습니다.

1. 프로젝트 생성

# 자바스크립트로 생성
npx create-next-app@latest

# 타입스크립트로 생성
npx create-next-app@latest --ts

2. 패키지 설치

먼저 Next.js에서 PWA를 적용하기 위해서는 next-pwa라는 패키지를 추가해 주어야 합니다.

따라서 아래 코드를 입력해 패키지를 설치해 줍니다.

# npm
npm install next-pwa

# yarn
yarn add next-pwa

또한 부가적으로 next-compose-plugin을 설치해 줍니다.
(이 플러그인 을 설치하는 이유는 밑에 설명 드립니다.)

# npm
npm install --save next-compose-plugins

# yarn
yarn add --dev next-compose-plugins

3. config 설정

next.config.js에 들어갑니다.

그 후, 아래와 같이 코드를 작성해 줍니다.

/** @type {import('next').NextConfig} */
const withPlugins = require("next-compose-plugins");
const withPWA = require("next-pwa");

const nextConfig = {
	reactStrictMode: true,
};

module.exports = withPlugins(
	[
		[
			withPWA,
			{
				pwa: {
					dest: "public",
				},
			},
		],
		// 추가 플러그인 작성
	],
	nextConfig
);

자 여기서 저희가 next-compose-plugins를 사용하게 되는데요, 이 패키지는 next-pwa를 사용하게 되면 하나의 플러그인만 사용할 수 있지만, 추가적으로 더 사용할 수 있게 한꺼번에 묶어주는 패키지입니다. 따라서 추가 플러그인을 사용할 때는 아래와 같이 사용하시면 됩니다.

module.exports = withPlugins(
	[
		[
			withPWA,
			{
				pwa: {
					dest: "public",
				},
			},
		],
        [
            typescript, 
            {
                typescriptLoaderOptions: {
                    transpileOnly: false,
                },
            }
        ],
        // ...
	],
	nextConfig
);

4. manifest 파일 생성

브라우저가 이 웹은 PWA라는것을 알려주기 위해서 아래와 같은 manifest를 작성해 줍니다.

{
	"theme_color": "#FF98BA",
	"background_color": "#FF98BA",
	"display": "standalone",
	"scope": "/",
	"start_url": "/",
	"short_name": "\ubb34\uc2a8\uc885\uc774\ub0e5",
	"name": "\ubb34\uc2a8\uc885\uc774\ub0e5",
	"description": "\uadc0\uc5ec\uc6b4 \uace0\uc591\uc774\uc758 \uc885\ub958\ub97c \uc54c\ub824\uc8fc\ub294 \uc6f9 \uc571\uc785\ub2c8\ub2e4.",
	"icons": [
		{
			"src": "images/icons/icon-48x48.png",
			"sizes": "48x48",
			"type": "image/png"
		},
		{
			"src": "images/icons/icon-72x72.png",
			"sizes": "72x72",
			"type": "image/png"
		},
		{
			"src": "images/icons/icon-96x96.png",
			"sizes": "96x96",
			"type": "image/png"
		},
		{
			"src": "images/icons/icon-144x144.png",
			"sizes": "144x144",
			"type": "image/png"
		},
		{
			"src": "images/icons/icon-192x192.png",
			"sizes": "192x192",
			"type": "image/png",
			"purpose": "any maskable"
		},
		{
			"src": "images/icons/icon-256x256.png",
			"sizes": "256x256",
			"type": "image/png"
		},
		{
			"src": "images/icons/icon-384x384.png",
			"sizes": "384x384",
			"type": "image/png"
		},
		{
			"src": "images/icons/icon-512x512.png",
			"sizes": "512x512",
			"type": "image/png",
			"purpose": "any maskable"
		}
	]
}

하지만 이렇게 복잡한 코드를 손으로 한땀 한땀 작성 하는것 보다는 아래 사이트를 이용해서 만드는것을 추천드립니다.

PWA Manifest Generator | SimiCart

PWA Manifest Generator Automatically generate a fully functional web app manifest along with size-optimized icons for your PWA Web app manifest (i.e. manifest.json) is a JSON file that provides the necessary metadata for your Progressive Web App. With a

www.simicart.com

여기서 우리가 설정해야 하는 부분은 Name, Short Name, Display, Description, Theme Color, Background Color, Icons입니다.

각 요소의 설명하자면 아래와 같다

Name : PWA의 이름
Short name : 앱 이름을 표시할 공간이 충분하지 않을 때 나타나는 이름
Display : homescreen icon을 통해 실행될 때 app 화면이 보여지는 형태
- browser : 일반 브라우저와 동일하게 보입니다.
- standalone : 다른 앱들처럼 최상단에 상태표시줄을 제외한 전체화면으로 보입니다.
- fullscreen : 상태표시줄도 제외한 전체화면으로 보여줍니다.(ex. 게임)
- minimul-ui : fullscreen과 비슷하지만 뒤로가기, 새로고침등 최소한의 영역만 제공합니다.(모바일 크롬 전용)
Description : app의 description 정보
Application Scope(=scope) : app 내에서 PWA 기능을 적용할 범위
Start url : app이 최초 실행 될 때 load되는 file의 경로
Background color : 스플래시 배경색
Theme color : 전체적인 테마색

다른건 사용자가 원하는 대로 설정해도 되지만 Display와 Application Scope, Start url은 아래와 같이 작성해 준다.

(궁금하면 변경해도 되긴 한다...)

Display : standalone
Application Scope : /
Start url : /

그 후 Generate Manifest를 눌러준다. 그럼 압축파일이 나오게 되는데 압축 파일을 해제 한 후 manifest.webmanifest파일 이름을 manifest.json으로 변경하여 public에 넣어줍니다.

5. 아이콘 적용

이전에 manifest를 만들 떄 아이콘도 넣었다면 아이콘도 나왔을 겁니다. 하지만, 우리는 아래 사이트를 이용해서 아이콘을 만들것입니다.

PWA Application Icon Generator Free Online Tool

Download PWA Icons Bundle Download

tools.crawlink.com

앱에 적용할 512x512 png 이미지 파일을 넣어 아이콘을 생성해 줍니다.

그럼 이렇게 아이콘이 생성됩니다. 이것을 public에 넣거나 원하는 폴더 안에 넣어줍니다. 다만, 이렇게 아이콘을 넣으면 manifest안에 icons의 src 경로도 변경해 주어야 합니다. 저는 publiv/image/icons에 저장해 놓겠습니다.

6. 메타태그 적용

브라우저가 PWA라는것을 알아채고 manifest에 접근할 수 있도록 메타태그를 적용해야합니다.

따라서 아래 링크를 참고하여 _document.jsx 혹은 _document.tsx파일을 pages 폴더 안에 생성해 줍니다.

Advanced Features: Custom `Document` | Next.js

Extend the default document markup added by Next.js.

nextjs.org

그 후 Head태그 안에 아래와 같이 메타 태그를 넣어줍니다.

Manifest 메타태그

<link rel="manifest" href="/manifest.json" />

그러면 브라우저에게 manifest를 제공할 준비가 된겁니다.

추가적으로 아래는 옵션인 메타태그입니다.

파비콘 메타태그

파비콘 생성 사이트에서 파비콘을 생성후 public혹은 public 내 폴더에 저장

Favicon & App Icon Generator

Upload an image (PNG to ICO, JPG to ICO, GIF to ICO) and convert it to a Windows favicon (.ico) and App Icons. Learn more about favicons.

www.favicon-generator.org

<link
    href="images/favicons/favicon-16x16.png"
    rel="icon"
    type="image/png"
    sizes="16x16"
/>
<link
    href="images/favicons/favicon-32x32.png"
    rel="icon"
    type="image/png"
    sizes="32x32"
/>

ios 아이콘 메타태그

<link rel="apple-touch-icon" href="images/icons/icon-192x192.png"></link>

Microsoft App 컬러 메타태그

<meta name="msapplication-TileColor" content="#FF98BA"></meta>

7. IOS 스플래시 메타태그

해당 메타태그를 활용하기 위해서는 스플래시 이미지를 만들어야 합니다.

아래 링크를 통해 Splash Screen 이미지를 만들어줍니다.

Online Splash Screen Generator - Apprene.com

Use our free online splash screen generator and create a beautiful splash screen for your Applications

apprene.com

다 만든 스플래시 이미지는 아래 사이트에서 각 디바이스 별 스플래시 스크린 이미지를 만든 후 public혹은 public내 원하는 위치로 저장해 줍니다.

Appscope

Appscope is a directory of Progressive Web Apps, showcasing hundreds of excellent PWA examples.

appsco.pe

그리고 아래와 같이 매태태그를 _document 파일 Head 내부에 입력해 줍니다.

<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/iphone5_splash.png"
    media="(device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
></link>
<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/iphone6_splash.png"
    media="(device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: portrait)"
></link>
<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/iphoneplus_splash.png"
    media="(device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
></link>
<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/iphonex_splash.png"
    media="(device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: portrait)"
></link>
<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/ipad_splash.png"
    media="(min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"
></link>
<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/ipadpro1_splash.png"
    media="(min-device-width: 834px) and (max-device-width: 834px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"
></link>
<link
    rel="apple-touch-startup-image"
    href="/images/splashscreens/ipadpro2_splash.png"
    media="(min-device-width: 1024px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 2) and (orientation: portrait)"
></link>

당연한 이야기지만, href의 위치를 정확히 설정해 주셔야 합니다.

8. 빌드 및 실행

아래 커맨드를 프로젝트에서 입력해 줍니다.

# npm
npm run build && npm run dev

# yarn
yarn build && yarn dev

위 커맨드를 통해 빌드를 한 후 실행하면 우리가 생성한 프로젝트가 보여집니다.

여기서 개발자 도구에 진입하여 Lighthouse 탭에서 아래와 같이 설정해 줍니다.

그 후 보고서 생성을 클릭하면 아래와 같이 PWA인지 아닌지를 판단하는 검사가 완료가 됩니다.

9. 앱 다운로드

앱 다운로드는 제가 만든 PWA로 만든 서비스인 무슨종이냥? 에서 확인할 수 있습니다. 참고해 주세요
https://cat-type.vercel.app/

무슨종이냥 | 홈

당신이 키우는 고양이는 무슨종인지 알려드릴게요

cat-type.vercel.app

감사합니다.

AKS + DevOps Azure Sprint 참여기

방현준 — Fri, 1 Apr 2022 21:05:12 +0900

여는글

한가롭지 않은 회사 생활 중 갑자기 팀즈가 울렸습니다. 회사에 Infra쪽 팀장님이 마이크로소프트에서 DevOps관련해서 스프린트를 진행하는데, 참석할 분 있냐고 찾는 내용이었습니다. 사실 저는 프론트엔드 개발을 주로 해왔기 때문에 DevOps에는 큰 신경을 안써왔지만, 뭐든 배워 놓으면 좋지 않을까 라는 생각에 덥석 이 스프린트에 참석을 하겠다고 말씀 드렸습니다. 그렇게 해서 우연한 기회로 2022년 3월 28일, 29일 양일간 Azure Sprint 참여했습니다.

첫째 날

그동안 코로나라 재택을 주로 해왔기 때문에 밖에 나올일이 많이 줄었는데 오랜만에 밖에 나오니 또 색달랐고, 이런 오프라인 세션은 예전에는 많이 진행했지만 요새는 또 거의 대부분 온라인으로 변경되어 오랜만에 오프라인으로 새로운 사람들을 만나려니 감회가 색달랐습니다. 위치는 광화문 쪽에 있는 마소 건물이었는데 마이크로소프트라는 이름값 때문인지 신나고 짜릿했습니다.

이 가운데 있는 건물 12층이 제가 스프린트를 진행하게 될 건물입니다. 처음 딱 들어가니 마이크로 소프트라고 떡하니 적혀있었고 출입문 들어갈때 쓰는 명찰같은걸 주더라구요 이걸 받고 안에 들어갔습니다. 안은 여기가 마소 건물이다 라는걸 보여주듯이 서피스 프로라던가 마소 마우스 키보드라던가 많은 제품들이 진열되어 있었고 이것들을 구경하면서 회의실로 들어가서 기다리니 스프린트를 시작했습니다.

화상으로 인트로를 했는데, 사실 영어로 의사소통을 하기도 했고 해서 모든 말은 대충 넘겨 들었고 인트로가 끝나니 팀별로 나누어 스프린트를 시작하였습니다. 회사의 업종에 따라 팀을 나눈거 같았고 저는 Team C로 배정받았습니다. 스프린트가 어떤식으로 진행됐냐면 총 6개의 챌린지가 존재하고, 각각의 4~6개의 과제들이 준비되어져 있었습니다. 이 과제들을 하나하나 풀면서 챌린지를 끝마치는 방식이었습니다. 스프린트는 무조건 여기까지 하세요 같은 분위기가 아닌 프리한 분위기로 진행을 하였고 스프린트를 진행하다가 막히면 과자를 먹거나 쉬거나 하면서 진행할 수 있었고 최대한 편하게 해주려는 모습이 보였습니다.

우리 팀은 인프라쪽 하시던 분 한분과 백엔드 개발자 처럼 보이는 분 한 분 그리고 나 이렇게 진행을 했습니다. 다행히 다들 독커를 다뤄본 사람들이라서, 어느정도 수월하게 도전과제 3번인 쿠버네티스 전까지 갈 수 있었습니다. 그렇게 스프린트 Day1을 마무리 짓고 다들 집으로 돌아갔습니다. 아 그리고 돌아가기전에 선물도 줬는데 보니 스벅 텀블러를 줬습니다.(내심 Azure 크레딧을 바랬지만, 아니었습니다...)

아 그리고 팀 내 코치를 해주시는 분이, 마소에 오면 창 밖 뷰를 찍어야 한다고 했습니다. 그래서 찍었습니다. 확실히 이쁘더라구요

둘째날

첫째 날에는 개인전으로 이루어져, 도전과제를 해결해 나갔지만, 챌린지 4, 5부터는 팀워크로 진행해 갔습니다. 도전과제 3은 쿠버네티스 도전과제 4는 DevOps였고 각 팀 내에 쿠버네티스를 담당할 분 두명 DevOps를 담당할 사람 한명 해서 진행하였는데, 저는 자동화에 관심이 많았기 때문에 DevOps를 선택했고 진행해 나갔습니다. 둘째날에는 저희 팀은 불이 붙어서 열심히 한 기억밖에 없습니다. 사진 찍을 시간이 없었단 말이죠 ㅎㅎㅎ 그나마 찍은게 아래 정도였습니다.

그렇게 둘째날은 도전과제 5 - 보안 두번째 문제까지 해결하고 스프린트를 마무리 지었습니다. 돌아가기 전에 스프린트 종료식을 진행하고 가기전에 선물을 줬습니다. 이번에는 진짜 Azure 크레딧 주나? 라는 기대로 한번 까봤지만, 아쉽게도 크레딧은 아니고 무선 선풍기를 주더라구요 그래도 이 선풍기가 4만원 짜리라 꽤 가격이 나가서 만족스러운 선물이긴 했습니다.

마무리

사실, 데브옵스나 쿠버네티스는 저는 잘 몰랐습니다. 그냥 예전에 Docker를 조금 사용해 본 정도였고, 그것 마저도 엄청 잘 사용하지는 않았습니다. 그럼에도 이번 스프린트는 꽤 좋았다고 봅니다. 아무것도 모르는 저에게 조금이나마 지식을 안겨주었고, 그 지식을 어떻게 활용하면 좋을지 방향을 알려주었습니다.

한번쯤은 참여해 볼 법한 스프린트라고 생각이 드는 행사였습니다. 그리고 이 스프린트가 끝나면 아래와 같이 나무를 주는데 이것도 꽤 좋은 마무리였다고 생각이 듭니다. 그런 의미에서 사진을 찍었습니다 ㅎㅎㅎ

PWA(Progressive Web App) 너 대체 뭐니?

방현준 — Tue, 22 Mar 2022 22:38:16 +0900

PWA라는 용어를 들어보신적 있으신가요? 웹 프론트엔드 개발 직군에 있으신 분들이라면 한번씩 들어봤을 이 용어 PWA!

오늘은 이 PWA가 무엇인지, 그리고 어떻게 사용할 수 있는지에 대해서 한번 알아보도록 하겠습니다.

PWA 란?

PWA는 프로그레시브 웹 앱(progressive web app)의 준말로, 웹 기술(HTML, CSS, Javascript)을 가지고 모바일 네이티브 앱과 비슷하게 만들 수 있는 기술입니다. 사실 모바일 웹만으로는 네이티브의 다양한 기능들과 성능을 제공하기가 참 힘듭니다. 그렇다고 네이티브 앱을 만들기에는 시간과 개발비가 많이들고 다운로드를 위해 플레이스토어를 통해야 하므로 접근성도 떨어지게 됩니다. 하지만 PWA는 네이티브의 몇몇 기능을 구현할 수 있고 개발시간도 단축할 수 있습니다.

PWA가 탄생한 배경

2015년 구글의 엔지니어 알렉스 러셀의 글인 Progressive Web Apps: Escaping Tabs Without Losing Our Soul을 시작으로 2016년 구글은 Google I/O라는 컨퍼런스에서 PWA라는 기술을 선보였습니다. 그 당시 PWA의 발표에 꽤 많은 호응을 얻었습니다. 그 당시 웹과 모바일은 철저히 분리되어 있었습니다. 물론 그 당시에도 모바일 웹은 존재했습니다. 하지만 모바일 웹은 전혀 모바일스럽지 않았고, 성능또한 보장할 수 없었기 때문에 모바일 웹 보다는 네이티브를 더 선호했습니다. 그런데 PWA는 App Like하고 Natively한 성능과 기능을 제공하니 당연히 호응이 나올수 밖에 없었죠.

PWA 장단점 비교

장점

웹을 설치할 수 있다.
인터넷 브라우저 실행 없이 단시간에 웹을 실행시킬 수 있다.
푸시 알림 및 블루투스 연결 등 네이티브 기능을 사용할 수 있다.
별도의 심사 없이 배포가 가능하다.
빠른 성능을 제공한다.
오프라인에서도 사용이 가능하도록 캐싱이 잘되어 있다.

단점

아무리 네이티브 앱과 비슷하다고는 하지만 네이티브의 성능을 따라갈 숭 없다.
네이티브의 기능을 모두 사용할 수 없고, OS에서 기능을 지원하지 않는다면 PWA에서 존재하더라도 사용할 수 없음
앱스토어의 부재로인한 PWA 웹 앱 검색 불가(대표적인 웹 앱은 PWAStats에서 확인 가능)
PWA설치 시 복잡한 방법 요구
애플

PWA의 현재와 미래

PWA는 현재 구글과 함께 마이크로소프트, 모질라 등 많은 기업들이 참여하고 있습니다. 구글은 PWA기술을 통해 크롬 OS를 성장시키고 발전 시킬수 있으며 Fuchsia라는 구글의 차기 OS의 많은 Application을 손 쉽게 이관하여 가져올 수 있습니다. 마이크로소프트는 부진했던 모바일 시장에 진입할 수 있는 통로가 될 수 있으며, 손 쉽게 윈도우 운영체제에 어플리케이션을 얻을 수 있게 됩니다. 모질라 또한 마찬가지이구요.

하지만 애플은 이러한 PWA라는 기술의 크게 관심을 보이지 않고 있습니다. 애플에서 PWA의 모든 기술을 열어주게 되면 애플의 주 수입원인 인앱결제를 PWA내에 강제 할 수 없게되기 때문입니다. (현재도 이 인앱결제 수수료 때문에 스포티파이, 에픽게임즈 등이 소송을 벌이고 있다...)

그럼에도 PWA의 미래는 꽤 유망하다고 생각합니다. 일단 많은 기업들(스포티파이, 구글밋, 홈디포 등)이 PWA로 전환하거나 개발을 하면서 유의미한 결과를 내보였으며, 트위터 같은 경우는 PWA기술을 적용하면서 세션당 페이지 수가 65% 증가하고 트윗이 75% 증가하였고 20%의 이탈율 감소 및 97%의 앱크기 감소를 이루어 냈습니다. 즉 PWA를 통해 꽤 높은 효율을 낼 수 있습니다.

마무리

결과적으로 PWA는 사용하면 좋은 성능을 이끌어낼 수 있는 기술입니다. 다만 PWA에 지속적인 성장은 앞으로 애플이 얼마만큼 지원을 할 것이며, 그와 더불어 얼마나 많은 기업들이 사용을 할지가 관건이라고 생각합니다. PWA가 꼭 사용해야할 기술도 아니거니와 사용자 입장에서는 귀찮은 웹 앱 설치 과정을 요구하기에 아직은 사용하면 좋지만, 필요없다면 굳이 사용할 필요는 없어보입니다.

참고자료

지방대 공대생이 대기업 프론트엔드 개발자가 되기까지의 회고(부제 : 2021년 3년차 프론트엔드 개발자의 회고)

방현준 — Sun, 16 Jan 2022 13:32:42 +0900

여는글

최근, 회고를 중요하게 생각하는 개발자들이 늘고 있습니다. 하지만 많은 회고 글들을 볼때마다 왜 회고를 해야하고 회고가 주는 이점에 대해서 잘 몰랐습니다. 그냥 일기를 프로젝트 혹은 년 단위로 끊어서 하는거 아닌가라는 막연한 기록이라고 생각했었죠, 하지만 회사에서 스쿼드에 참여하고 스프린트 회고를 진행하면서 생각이 많이 바뀌었습니다. 회고를 진행하면서 그다음 스프린트에서 회고에서 피드백을 받았던 잘 못했던 부분을 한번 더 생각하는 저를 발견하였고, 이러한 부분을 고치려고 하는 저를 볼 수 있었습니다. 또, 제가 했던 일들을 다시한번 돌아볼 수 있엇던 계기가 되었죠. 회고의 중요성을 느깐 저는, 늦었지만 그동안 쓰지 않았던 회고를 한번 써보자고 마음을 먹었습니다. 아랫 글 부터는 타임라인 방식으로 회고가 작성될 예정이며 편한 글로 작성을 해보도록 하겠습니다.

지방 H대 컴공과

나는 고등학교때 까지 공부를 엄청 싫어했다. 그래서 항상 학교에서는 자고 집에서는 게임을 했다. 그러다 보니 자연스럽게 충남에 있는 한 지방대에 입학을 하게 되었다. 처음 입학은 시스템 제어 공학이라는 생소한 학과에 입학을 했다. 하지만, 어렸을 때 부터 꿈꾸던 개발자라는 꿈을 포기하고 싶지 않아서 열심히 학점을 맞춰 컴퓨터 공학과로 전과를 했다. 그렇게 3년동안 컴퓨터공학과 생활을 하였고 졸업을 할 수 있었다.

잘했던 점

컴퓨터공학과로 전과한 점
컴퓨터 공학과로 전과한 점은 지금 생각해보면 진짜 잘한 행동이라고 생각한다. 만약 컴공으로 전과를 하지 않았다면, 나는 지금 공장에 들어가서 설비일을 하고 있었을 것이다. 그리고 아마 재미없다고 금방 떄려쳤겠지.., 하지만 지금 나는 개발자가 되어서 즐겁게 일하고 있다. 이런게 바로 성(?)덕이 아닐까?
장학금을 위해 공부를 열심히 한 점
나는 4년동안 나는 학자금 대출을 받으며 학비를 내야했다. 그렇기 때문에 학자금 대출을 줄이기 위해서는 장학금을 노려야 할 수 밖에 없었고 공부를 열심히 할 수 밖에 없었다. 그리고 대입공부는 내 적성에 안맞았지만, 컴퓨터 공부는 내 적성에 너무 잘 맞았다. 그래서 포기하지 않고 열심히 공부할 수 있었고 나쁘지 않은 학점으로 졸업을 할 수 있었다.

못했던 점

인턴쉽을 하지 않았던 점
나는 학교를 다니면서 할 수 있는 다양한 인턴쉽을 진행하지 않았다. 그 당시 내 생각은 학교를 다니면서 인턴쉽을 할 빠에 차라리 공부를 더해서 장학금을 받아야지라는 마인드가 더 컸다. 하자만 졸업하고 나서 취준 시장에 뛰어 들어가 보니 이 부분은 많이 아쉬운 부분이 되었다. 만약 인턴쉽을 진행하였다면 내 커리어에 많은 도움이 되었을텐데...

국내 헬스케어 미국지사 I사

나는 처음 실무를 미국 헬스케어 회사인 I사에서 진행했다. 영어도 못하면서 괜히 미국으로 가서 일을 한다고 설치고 다니던 시기가 이 시기였다. 이 과정에서 많은 좌절과 많은 고통을 느꼈지만, 지금 생각해보면 많은 좋은 경험들이 존재했다. 그 경험을 바탕으로 회고를 진행하자면 아래와 같다.

잘 했던 점

영어의 부족함을 많이 느꼈고 삶을 살기 위해서 악착같이 영어공부를 한 점
사실 현지인들이 보기에 나는 영어 못하는 외국인이었을 것이다. 이 과정에서 몇몇 사람들은 나한테 말을 걸기를 포기했고, 나는 그 과정을 보며 좌절했다. 물론 이러한 과정에서 나는 영어 배우기를 포기하고 그냥 미국에 사는 한국인들과 어울릴 수 있었다. 하지만 그러기는 싫었다. 미국 땅을 밝고 있는 이 기회를 놓치기 싫었다. 그 때 부터 악착같이 영어공부를 하였고 어느정도 간단한 의사소통이 가능한 실력까지 높일 수 있었다.
첫 개발 실무에 들어가며 프론트엔드 개발자로 진로를 정한 점
내가 처음 개발 실무를 진행하면서 배웠던 것은 ASP.NET MVC5 이다. 닷넷 같은경우는 C#기반의 풀 프레임워크이다. 이 과정에서 나는 C#보다는 JS에 좀 더 흥미를 느꼈다. 그냥 직관적으로 내가 작성한 코드가 눈에 보이다 보니 자연스럽게 JS에 호감을 더 느꼈던거 같다. 그러면서 자연스럽게 프론트엔드 개발을 더 많이 진행하게 되었다.
첫 프로젝트를 성공적으로 진행했던 점
I사의 첫번쨰로 투입 되었던 프로젝트는 기존 프로젝트를 개편하는 작업이었다. 처음에는 어떠한 작업을 해야할 지 모르겠지만 점점 프론트엔드를 작업하면서 프론트엔드의 지식이 늘어가는 것을 느꼈고 성공적으로 프로젝트 개발을 완료 할 수 있었다.
미국을 최대한 많이 즐기고 왔던 점
나랑 같이 갔던 다른 분들은 추후 인턴 비자가 아닌 취업 비자를 위해서 회사 일에 거의 목을 매고 있었다. 하지만 나는 취업 비자를 포기하고 인턴비자를 최대한 즐기기 위해 노력했다. 그래서 서부에 웬만한 유명한 곳은 다 가보았고 동부도 유명한 곳을 가보았다. 그리고 근방에 캐나다도 다녀왔다. 그만큼 추억도 많이 생겼고 해외 경험도 많이 늘릴 수 있었다.

못했던 점

영어 공부를 좀 더 열심히 한 후 미국에 가지 못한 점
사실 좀 더 영어 공부를 열심히 해서 갔다면 영어실력이 비약적으로 늘 수 있었을 것 같다는 생각이 든다. 지금도 충분히 많은 영어 실력을 높이고 왔지만 아직 완벽한 의사소통은 힘들어 하고 사실 쓰는 단어 혹은 문장을 돌려 쓰는 방식의 의사소통이기 때문에 이부분이 조금 아쉬웠다. (만약 의사소통이 더 잘되면 200% 더 즐길 수 있었을텐데)
프론트엔드를 개발했지만 프론트엔드를 공부하지 않은 점
나는 프론트엔드를 개발할 때 항상 사용을 하지 않고 이해를 중점으로 프로젝트를 진행한다. 하지만 이 시기에는 프론트엔드의 이해도가 많이 낮았고 왜 안되는지에 대한 이해 및 원인분석 보다는 인터넷을 찾거나 없으면 안되는 것 이라는 마인드로 개발을 진행했다. 그렇기 때문에 프론트엔드 개발을 했지만 프론트엔드 개발자라고 할 수 없을만한 지식을 가지고 있었다.

사실 결과적으로 보자면 미국 인턴쉽은 나에게는 많은 도움이 돼었던 경험이었다. 하지만, 개발자로서의 경험은 그렇게 좋지 못하였다.

한국에서 취업 준비

1년의 인턴쉽 과정을 마치고 미국에서 2개월정도 더 여행을 하고 한국에 돌아왔다. 돌아왔을 시기에는 참 좋았다. 가족들도 만나고 그동안 못 만났던 친구들도 만나고 대략 1개월 간은 한국에서 적응기간을 거쳤다. 그 이후 취업 준비를 시작했다. 하지만 현실은 녹록치 않았다. 그당시 면접 봤던 곳은 줌인터넷, 아프리카 TV 자회사인 프리캡, 그리고 중소기업 등 이었다. 웬만한 곳은 서탈을 했다. 하지만 줌인터넷은 떨어지고 프리캡은 연락이 없었고, 중소기업등 중 몇군데는 합격했다. 그래서 어쩔수 없이 그 중 한군데인 A사에 취직할 수 밖에 없었다.

잘했던 점

눈물이 나지만... 이 시기에 잘했던 점은 없다

못했던 점

프론트엔드 공부를 제대로 하지 않았던 점
프론트엔드 책을 한권 읽으면 충분히 알 수 있었던 내용을 그냥 실무에서 인터넷 검색으로 알았던 내용을 토대로 취업을 준비했다. 그렇기 때문에 지식의 파편화가 일어났고, 심도 깊은 질문이 들어왔을때 쉽게 말할 수 없었다.
좀 더 여유를 가지고 취준을 하지 못했던 점
사실 여유를 가진다고 좋은 기업을 가진 못했을것 같았다. 하지만 시도라도 해보았으면 무언가 달라지지 않았을까 하는 생각이 들긴한다. 항상 주위에서 시작부터 좋은 기업을 가야한다고 했지만, 나는 마음이 급급해서 그냥 어중간한 기업에 들어갔다. 지금도 후회하는게 이 선택이다...

인공지능 중소기업 A사

나는 인공지능 기술을 개발하는 회사에 프론트엔드 개발자로서 취업을 했다. 나는 이 시기에 개발자로서 많은 변화를 겪었다. 처음 회사의 취업하고 인공지능 개발자들 사이에서 프론트엔드 개발을 시작했다. 처음에는 좋았다. 배우는게 있었고, 내일채움공제도 신청하며 2년동안 프론트엔드 개발자로서 성장할 수 있을거란 행복한 상상에 빠졌다. 하지만 시간이 가면 갈수록 프론트엔드 개발자로서 프로젝트를 진행하는 게 아닌 코더로서 일을 진행했고, 배울 수 있는게 따로 없었다. (오히려 사내 정치만 더 배운 느낌...) 그래서 나는 1차로 A사 1년차 때 유명기업 83개의 신입공채에 이력서를 넣었고 최종면접까지 간 기업은 SK C&C였다. 하지만 최종면접에서 PT면접과 대면면접을 망치고 떨어지고 말았다. 좌절했고 내가 부족한 부분이 무엇인지를 생각했고 부족한 부분을 계속 공부하였다. 그리고 나는 A사에 내일채움공제 2년을 만기하고 2020년 10월경에 퇴사를 했다.

잘했던 점

중고신입으로 유명 기업을 지원한 점 & 포기하지 않고 대기업 문을 두드렸던 점
사실 1년차 때 신입공채에 지원하고 모든 기업에서 떨어졌을 때 유명 기업에 가는것을 포기할 뻔 했다. 하지만 회사에서 계속 일을 하면서 보이는 사내정치와 내 성장률을 보면서 마음을 다시 다 잡고 계속 유명 기업에 문을 두드렸다. 또한 중고신입을 지원하면서 내가 부족한 부분이 무엇인지 가늠할 수 있었고, 중고신입 면접 경험들이 나에게 영양분이 되어 2차 시도에 도움을 많이 주었다.
지속해서 프론트엔드 공부를 게을리 하지 않은 점
회사에서 성장을 할 수 없다면, 내가 개인적으로 성장을 하여야 한다고 생각했다. 그래서 계속해서 기술이 나올때마다 공부를 했고, 사이드 프로젝트를 진행했다. 이러한 경험들이 내 이력서를 풍부하게 만들어 줄 수 있었다.
SI회사를 다니면서 신기술을 기업 프로젝트에 녹여본 점
나는 이게 중소 SI에 가장 좋은 점이라고 생각한다. 내가 공부하고 있는 것들을 실무에 쉽게 녹여볼 수 있다는 점, 나는 이 경험들을 통해서 좀 더 심도 깊게 기술을 파악할 수 있었다.
좋은 사람들과 인연을 만들 수 있었던 점
난 이게 A사를 다니면서 만들수 있었던 가장 큰 장점이라고 생각한다. 퇴사한지 1년이 지난 지금도 꾸준히 연락하고 있는 회사사람이 존재한다는 것 자체가 끝까지 관계를 유지할 수 있는 사람이라는 것 아니겠는가?

못했던 점

프리캡을 포기하고 이 회사에 남은 점
프리캡은 스타트업이다. 하지만, 아프리카 TV에 자회사이고 실제 플랫폼을 서비스하고 있는 회사이기에 운영업무 혹은 최적화 등을 배울 수 있었을 것이다. 하지만, 내일채움공제를 포기하지 못하고 이 회사 남았다. 나는 아직도 이 선택을 후회하고 있다...
뒤 늦게 자바스크립트 공부를 한 점
나는 1년차 초반부터 1년정도 자바스크립트를 공부했다. 그 전까지는 자바스크립트를 공부했다기 보다는 사용했다에 더 가깝다. 어떻게든 프로젝트를 만들고 최적화 이런건 신경도 안썼으니 프로젝트는 돌아가지만, 성능의 이슈가 항상 존재했고, 이슈가 터져도 어디서 발생하는지를 알 수 없었다. 좀 더 빨리 자바스크립트의 중요성을 알 수 있었다면 좋았을거란 생각이 든다.

CJ 계열사

나는 다른 회사를 정해두지 않은채 2020년 10월에 퇴사를 하였다. 내가 다른회사에 합격하지 않은채 퇴사를 한 이유는 전 회사에 일을 하면서 다른 회사 면접을 보거나 프론트엔드 공부를 할 자신이 없었기 때문이다. 이러한 결정은 프론트엔드 개발자를 지향하고 공부하고 싶어했던 나에게서는 참 좋은 선택이었다. 이 기간동안 열심히 프론트엔드 개발자로서 공부를 하였고 그 덕분에 많은 성장을 하였기 때문이다. 물론 다음에는 이러한 선택은 하지 않을 생각이다. 이 기간동안 집에 눈치도 보였고, 내 자신도 위축되어서 기분이 별로 좋지는 않았었다. 하지만 국내 대기업에 속하는 CJ 계열사에 합격하고 나서는 꽤 뛸 듯이 기뻐했다.

잘했던 점

면접을 끊임없이 보면서 나만의 질문 리스트를 작성한 점
나는 퇴사하기 전 1개월 부터 계속해서 원서를 넣었고 면접과 코딩테스트를 계속해서 봐왔다. 또한 면접을 볼때마다 다 내가 받았던 질문들을 복기하고 이 질문들에 대한 답변을 작성한 질문리스트를 만들었다, 이러한 행동들이 나에게 도움이 많이 됐던거 같다.
SI회사가 아닌 서비스 회사를 목표로 했던 점
전 회사가 SI회사다 보니 다음 회사는 서비스 회사에서 운영업무를 해보고 싶었다. 따라서 나는 자사 서비스가 있는 회사를 찾아 다녔다. 그리고 지금 회사는 자사 서비스가 있는 회사로 앱또한 웹뷰로 이루어져 있기에 웹 프론트엔드 개발자로서 성장할 수 있는 기업이었다.

못했던 점

실 운영하는 서비스에 대한 지식이 낮아 실수를 많이 했던 점
나는 처음 이 회사를 들어오면서 배포에 대한 개념이 많이 낮았다. 심지어 프론트엔드와 백엔드가 분리되어있는 상태가 아닌 풀 프레임워크 상태였기 때문에 더욱 더 어려웠다. 그래서 종종 배포 관련하여 실수를 많이 했다... 이러한 실수를 다시는 하지 않기 위해서 내가 실수 했던 부분은 항상 적었고, 해결 방법 또한 문서화 하여 재발방지를 하였다.

아직 이 회사에 1년 정도 밖에 다니지 않았다. 하지만, 나는 많이 부족하다는 것을 느낀다. 항상 겸허한 마음으로 부족함을 받아들이고 공부하고 또 공부를 해야한다고 다짐한다.

마무리

나는 벌써 4년차 개발자라는게 실감이 나질 않는다. 아직 부족한게 많은데 뭔가 이룬것 없이 4년이란 경력이 되었다. 물론 주니어는 경력으로 이루어지지만, 시니어는 아니란 것을 잘 알고 있기에 부족한 부분을 매꾸고 공부를 더 열심히 해야된다는 이야기겠지.. 앞으로도 더 뛰어난 개발자가 되기 위해 노력해야겠다.

[회고] 쿠팡 파트너스 리디렉션 서비스 종료 (부제 : 토이 프로젝트로 개발하는 서비스는 왜 성공하지 못할까?)

방현준 — Thu, 30 Sep 2021 23:26:52 +0900

여는 글

최근 나는 그동안 운영하던 서비스인 "쿠팡 파트너스 리디렉션"이라는 웹 서비스를 종료했다. 종료한 이유는 간단하다. 서비스가 성공하지 못했기 때문이다. 그렇다면 왜 성공을 하지 못했을까? 서비스 종료 기념(?)으로 회고 겸 생각을 해보자.

쿠팡 파트너스 리디렉션 생성기

쿠팡 파트너스 리디렉션 생성기를 생각하게 된 계기

나는 부업에 엄청난 관심이 많다. 그래서 외주, 배민 커넥트, 앱 테크 등 돈이 될만한 부업들은 다 해봤던 거 같다. 그 중 쿠팡 파트너스를 부업으로 했었던 적이 있었는데, 이게 생각보다 쏠쏠한 수익을 가져다줬었다.

다만 이 쿠팡 파트너스를 하려면 네이버 블로그가 필요했고, 네이버 블로그에 쿠팡 파트너스 링크를 포스팅하면 자꾸 블로그가 저품질에 걸려 버렸다. 이걸 해결하는 방법을 찾아보다가 리다이렉션 기능을 활용하면 저품질을 피할 수 있다는 글을 발견했고, 테스트 결과 저품질 문제를 해결할 수 있었다.

하지만, 리다이렉션 링크를 생성하려면 꽤 복잡한 과정을 거쳐야 했는데 이 귀찮은 과정을 자동화할 수 없을까라는 생각을 하게 됐고, 결국 쿠팡 파트너스 리디렉션 생성기라는 토이 프로젝트를 시작하게 되었다.

토이 프로젝트 시작

보통 토이 프로젝트를 하는 개발자들을 보면 어느 정도 비즈니스 로직을 설계하고 개발부터 시작하는 경우가 많다. 나 또한 마찬가지로 비즈니스 로직 설계부터 시작하였다. 해당 서비스의 비즈니스 로직은 간단했다.

사용자가 쿠팡 파트너스 상품의 주소를 입력하면 그 주소를 난수화 시키고 쿠팡 파트너스 리디렉션 생성기 웹사이트 주소에 파라미터를 붙여 새로운 주소를 생성해준다. 사용자는 그 주소를 네이버 블로그에 생성된 주소로 링크를 걸어주면 그 링크를 클릭한 순간 쿠팡 파트너스 리디렉션 생성기 웹사이트로 접근하게 되고 쿠팡 파트너스 리디렉션 생성기 웹사이트에서는 쿠팡 상품 페이지로 이동시킨다.

리다이렉션 URL 생성 과정

리다이렉션 프로세스

해당 프로젝트의 비즈니스 로직을 봤을 때 따로 서버는 필요없을거라 판단하여 서버리스를 선택, 프론트엔드만 개발하면 되었고, 비즈니스 로직도 꽤 단순하다 보니 설계와 동시에 개발에 착수할 수 있었다. 프론트엔드는 따로 UI라이브러리를 사용 안 하고 직접 개발했으며 SEO를 위해 Next.JS를 이용해서 개발을 진행하였다.

(해당 글은 회고록이기에 개발적인 자세한 측면은 생략하겠다.)

프로젝트 개발 완료, 그리고 고민

어느 정도 개발이 완료되고 프로덕트를 배포하였다. 그리고 배포 후 1달간은 트래픽이 하나도 없었다. 너무 당연한 이야기다. 마케팅에 대한 생각은 하나도 생각 없이 개발을 진행했기에 트래픽이 있을 수가 없었다. 그래서 트래픽을 어떻게 높일지 고민을 해보았고 결론은 홍보를 해야겠다고 생각했다.

사실 다양한 마케팅 방법이 존재하지만, 따로 마케팅 공부도 하지 않았던 내가 당장에 떠오르는 방법은 홍보밖에 없었기에 그냥 무작정 개발자 그룹이나. 부업 사이트에 홍보를 했다. 그러다가 실제 사용하던 계정이 정지되었던 일도 있었다... ㅜㅜ

~~(실제 사용하는 계정이라 더 마음이 아팠다..)~~

Googla Analytics를 사용하여 사용자를 측정한 결과값

초반에는 홍보를 하니 조금은 트래픽이 올라주었다. 너무 기뻤다. 이대로 점차 성장하길 바랬지만, 초반에만 반짝 사람들이 사용해 봤을 뿐, 지속적으로 사용하는 사람이 없었던 것이다.

그러면 어떻게 사람들이 지속적으로 사용할 수 있게 할까? 나는 또다시 고민에 빠졌다.

홍보, 홍보, 개편 그리고 서비스 종료

나는 사람들이 지속적으로 사용할 수 있는 서비스가 되려면 어떻게 해야 하나 계속 고민했다. 그리고 고민 끝에 나온 결론은 지속적인 홍보와 UI 개선이었다.

현재 내가 만든 서비스의 목표는 리다이렉션 URL을 생성하고 블로그에 저품질을 해결하는걸 목표로 하고 있고 현재 만들어진 기능을 봤을 때 목표는 이미 달성했다. 기능도 잘 작동한다. 그런데 사람을 잡지 못한다. 그렇다면 왜 사람을 잡지 못할까 라는 생각을 해봤을 때 생각나는 것은 UI와 사용성의 문제라고 결론이 나왔다. 그래서 결국 나는 UI/UX 개편을 시작하였다.

UI/UX 개편 작업을 진행하면서 메뉴얼도 같이 작성하였다. 왜냐하면 사용자가 봤을때 이걸 어떻게 사용하는지를 잘 모를수도 있다고 판단했기 때문이다.

(지금 생각해보면 사용법을 유도하는 기능을 넣었으면 참 좋았을 거라 생각이 든다)

다만, 이 작업을 진행해도 트채픽은 초반에만 잠깐 늘 뿐 또다시 트래픽은 낮아졌다. 트래픽이 지속적으로 낮아지면서 나의 모티베이션 또한 바닥으로 가고 있었고, 쿠팡 파트너스도 예전과 같지 못하다고 느껴졌다. 그러다 결국은 회사 업무가 바쁘다는 핑계로 서비스를 방치해 놓기에 이르렀다.

결국, 쿠팡파트너스 리디렉션 생성기는 2021년 9월 26일 서비스의 사망을 선고했다.

서비스 종료한 쿠팡 파트너스 리디렉션 생성기

서비스 종료 그 이후

사실 그렇게 큰 서비스는 아니었지만, 나름 좋은 아이디어라고 생각해서 열심히 개발했다. 그리고 서비스 종료라는 결과를 내었다.

지금 생각해보면 서비스 종료는 너무 당연했다고 생각이 든다. 설계, 기획부터 시작해서 운영, 마케팅까지 아무것도 생각 안 하고 개발부터 들어가는 개발적 열의을 토해냈기도 했고 "내가 이게 필요하니까 만들면 사람들이 사용하겠지?" 라는 행복 회로를 오버클럭으로 돌리고 무작정 운영했다.

서비스가 망하는 게 당연하지...

하지만 나는 서비스가 종료되었다고 해서 내가 한 일도 같이 없어지는건 아니기 떄문에 남는게 없었던 일은 아니었다. 또한 이번 경험을 통해 비즈니스 측면에서 배운게 생각보다 많아서 잃은것 보다 얻은게 많았다. 사실 이번 글을 쓰는 이유도 실패를 통해 배운걸 적기 위해서가 가장 크다.

그렇다면 나는 무엇을 배웠을까?

나는 이번 경험을 통해 3가지를 배웠는데,

그 내용은 다음과 같다.

첫 번째, 서비스를 개발할 때 개발자로서의 생각을 버려라!

많은 개발자(본인 포함...)들은 개발만 생각하고 토이 프로젝트를 진행하는 경우가 많다. 물론 토이 프로젝트의 목표가 기술력을 올리기 위해서라면 당연히 개발만 생각하고 만들어도 무관하다. 다만 사업적으로 접근하는 토이 프로젝트는 개발만 중요한 것이 아니다. 시장 파악부터 시작해서 기획, 디자인, BM, 마케팅 등 모든 영역의 전반적인 것을 잘 알아야 한다.

내 주위 개발자들 중 기술력만으로 서비스의 모든 것을 해결할 수 있다고 믿는 사람이 있다. 물론 가능하다. 그 기술이 이 세상에서 범접할 수 없는 유일무이한 기술을 개발해서 서비스한다면 말이다. 하지만 그러한 기술력을 가지고 있지 않고 그러한 서비스가 아니라면 개발자적인 관점보다는 비즈니스적 관점으로 바라보자.

두 번째, 개발을 진행하기 전에 먼저 시장조사와 수요예측부터 해라

많은 개발자들은 수익성 토이 프로젝트를 진행할 때, "내가 만들면 누군가 쓰겠지", "내가 필요하니까 만들면 필요한 사람들이 사용해서 수익이 날 거야" 등의 생각으로 개발부터 시작하는 경향이 있다. 하지만 이렇게 시작하면 서비스의 타겟층이 불분명해지고, 시장이 어떻게 구성되어있는지, 수요는 얼마나 있는지 잘 알지 못한다. 결국은 서비스를 이용하는 트래픽이 저조할 것이고, 서비스를 운영하는 사람은 점차 운영에 대한 동기가 많이 떨어질 것이다. 개발을 하기 전에 조사부터 먼저 하는 습관을 길러보자

세 번째, 마케팅과 기획, 디자인을 간과하지 말자.

서비스를 운영하는 사람은 마케팅과 기획, 디자인은 절대 간과해서는 안될 항목 중 하나다. 아무리 내가 서비스의 기능을 기똥차게 잘 만들고 실제로 버그 없이 깔끔하게 잘 동작한다고 해도, 마케팅, 기획, 디자인이 없는 서비스라면 그 서비스는 서비스 종료의 길로 들어서게 된다. 그렇기 때문에 개발에 들어가기 전에 마케팅 전략과 기획은 물론이요, 수려하게까진 아니더라도 적히 깔끔한 디자인 정도는 잡고 가는 것을 잊지 말자

마무리

이번 경험은 다른 토이 프로젝트 경험보다 더욱 값졌던 경험인 거 같다. 비록 얼마 안 되는 트래픽이었지만, 실제 내 서비스를 운영해 본 경험이었고, 그만큼 나한테 많은 배울 점도 많이 준 서비스였기에 가치가 있던 서비스였다. 이다음에는 이 경험을 바탕으로 좀 더 단단한 서비스를 들고 올 수 있었으면 좋겠다.

만약 틀린 부분이나 피드백 주실 부분이 있으시다면 댓글로 말씀해주시면 감사하겠습니다.

이 뻘글을 끝까지 읽어주셔서 정말 감사드립니다.

[회고] 블로그를 다시 시작한 이유

방현준 — Thu, 30 Sep 2021 22:06:29 +0900

여기가 어디라고 돌아와!!!

9개월 전, 나는 중소 SI기업에서 서비스 대기업으로 이직을 했다.

이직을 하면서 회사일이다 뭐다하면서 적응이라는 핑계로 블로그에 들르는 일이 드물어졌다.

그러다보니, 블로그 관리는 점점 뜸해졌고 급기야 1000명 정도의 방문자가 나오던 블로그는 100명대로 떨어졌다.

사실 트래픽 감소는 포스팅을 안하니 어쩔수 없는것이었고 나도 트래픽 감소는 아무 상관이 없었다.

현제 이 블로그는 수익 블로그로서 글을 쓰면 쓸수록 방문자가 늘면 늘수록 수익이 늘어난다.

(제 글을 좋아해주신 방문자 여러분 이자리를 빌어 감사드립니다....)

하지만 수익이래봐야 월 6000원 ~ 8000원 수준이었고 개발 블로그 특성상 개발자 외 사람들이 잘 봐주지 않았기 때문에

블로그 운영 당시에도 트래픽 상관 없이 그냥 포스팅을 했다.

그럼 왜 회사 적응이나 더 하지 다시 돌아와서 이러한 뻘글을 적고 있느냐,

첫번쨰는 여태까지 키워온 블로그가 너무 아까웠고

두번째는 블로그를 안하다보니 자연스럽게 공부를 덜 한다고 느꼈기 때문이다.

그러면 이렇게 말하겠지? 개인적으로 공부를 하면 되지 않냐?

블로그에 포스팅 하면서 공부하는게 더 시간 낭비가 아니냐?

맞다! 사실 개인적으로 공부하는게 블로그의 포스팅을 하면서 하는거 보단 시간이 상대적으로 덜 든다.

나도 그렇게 생각했고, 퇴근 후 혹은 출근 시간에 지속적으로 공부를 할 수 있었고 기술에대한 빠른 습득이 가능했다.

이렇게 하니 공부한 내용을 포스팅 하는 시간을 상대적으로 세이브 해 빠르게 새로운 기술을 습득할 수 있었다.

하지만, 블로그에 공부한 내용을 적으면서 더욱더 깊게 파고들던 내가,

이제는 공부하면서 이해만하고 파고들지 않는 행동을 보였다.

좋은 개발자란, 무릇 소스만 잘짜고 기술을 잘 사용하는 것만이 능사는 아니라고 생각한다.

소스를 짜면서 이걸 왜 이렇게 짰는지, 왜 이런 구조를 채택했는지, 이 기술은 왜 사용했는지를 계속해서 고민하는 개발자가 좋은 개발자라고 생각한다.

내가 이렇게 생각하게 된 이유는 이직을 마음먹고 첫 면접을 보던 당시 면접관님이 했던 말에 감명을 받았기 때문이다.

그 면접관님은 "좋은 개발자란 무엇이라고 생각하시나요?" 라는 질문을 나한테 질문하였고

한창 신기술 뽕(?)에 취해 있던 나는 "좋은 개발자란 트렌드를 잘 따라가고 신기술을 잘 사용하는 개발자라고 생각합니다."라고 대답했다.

하지만 면접관님은 수긍을 하면서 별로 공감을 해주지 않았다. 그래서 나는 면접관님이 생각하는 좋은 개발자가 무엇인지 물어보았고 면접관님은 기술을 사용만하는 개발자보단, 왜를 고민하는 개발자가 좋은 개발자라고 생각한다고 말했다.

다시 돌아와서, 나는 요새 "왜"를 왜 생각하지 않게 되었을까?

그 시점을 생각해보면 블로그를 하면서 공부를 했을때와 공부만 했던 때로 나눠볼 수 있을거 같다.

그렇다면 이러한 이슈를 어떻게 해결할 수 있을까?

답은 간단하다. 다시 블로그를 시작하면 된다.

그래서 오늘부터 나는 개발글이든 회고든 뭐라도 블로그에 포스팅을 하자고 마음을 먹었다.

그래서 이번이 첫번째 회고를 빙자한 뻘글이라고 볼 수 있을거 같다.

방문자 분은 어떠한 키워드로 이 글까지 오셨을지는 모르겠지만,

최대한 재미있게 글을 써 볼 예정이니 재미있게 봐주셨으면 한다.

ps, 회고성 글이라 반말로 쓴 점 이해부탁드립니다.(쭈글...)

갤럭시 S21 언팩행사 정리 및 사전예약, 가격(feat. 갤럭시 버즈 프로, 갤럭시 태그, 스마트 싱스)

방현준 — Fri, 15 Jan 2021 10:30:36 +0900

여는글

2021년 1월 15일 삼성전자의 온라인 갤럭시 언팩 2021이 진행되었습니다.

이번 갤럭시 언팩 2021 행사에서는 갤럭시를 상징하는 오버 더 호라이즌 을 시작으로 75분간 진행되었는데,

갤럭시 버즈 프로, 갤럭시 21, 갤럭시 태그로 이루어져 있는 행사였습니다.

과연 어떤 새로운 갤럭시가 발표 되었는지 한번 알아보도록 하겠습니다.

이번 언팩의 주인공 갤럭시 21만이 아니었다?

이번 행사에서는 갤럭시 스마트폰의 국한되지 않았습니다.

스마트폰을 시작으로 차와 집까지 이어지는 갤럭시 에코 시스템.

갤럭시 생태계라는 청사진을 선보였습니다.

간단히 이야기 해서 스마트 씽스를 사용하여 더욱더 많은 사물을 제어할 수 있다는 이야기 입니다.

자동차 혹은 집의 어떤것이든 스마트 씽스가 연결되는 모든것들을 제어할 수 있습니다.

하지만, 이번 삼섬 갤럭시 언팩 2021은 어느정도 울트라 급 나누기를 하였습니다.

이 말은 갤럭시 S21 울트라 모델만이 스마트 싱스를 이용해 차량을 제어할 수 있는,

스마트 싱스 오토를 사용할 수 있다는것 입니다.

GDC센터 정해윤 프로는

"안드로이드 오토와 스마트 싱스 생태계를 이용해 갤럭시 사용자 여러분들을 해방시켜 더 많은 쉬는시간과 편리함, 경험을 제공할 것"

이라고 하였으며,

히로시 록하이머 구글 플랫폼·에코시스템 부사장은

"안드로이드 오토, 네스트, 스마트싱스 등 삼성과의 협력은 스마트폰을 넘어 모든 장치로 확장할 수 있도록 투자하고 있다"

며

"2021년 이후 양사는 파트너십을 다음 단계로 끌어올릴 것"

이라고 했습니다.

에어팟 프로 저리가라! 갤럭시 버즈 프로 나가신다

또한 이번 행사에서 가장 사람들이 관심을 보였던 제품이 있었습니다.

바로 갤럭시 버즈 프로 입니다.

이번 갤럭시 버즈 프로는더 커진 11mm 우퍼·6.5mm 트위터의 2-Way 다이내믹 스피커를 장착했고,

사용자에게 가장 진화한 인텔리전트 액티브 노이즈 캔슬링(ANC)를 탑재하였습니다.

이 노이즈 캔슬링은 언제 어디서나 최상의 오디오 경험을 제공하는 것이 특징입니다.

특히 갤럭시 버즈 프로는 이번 인텔리전트 액티브 노이즈 캔슬링을 이용하여

통화를 시작하면 ANC와 주변 소리 듣기 기능을 자동으로 동작해 오디오 경험을 최적화합니다.

또한, 갤럭시 스마트폰과 태블릿간 자동 스위치 기능이 지원돼 별도로 연결하지 않아도

통화와 멀티미디어 감상을 자유롭게 이어서 즐길 수 있습니다.

이번 갤럭시 버즈 프로는 최대 충전시 8시간, ANC를 킨 상태에선 5시간 음악을 재생할 수 있고,

케이스를 통해 추가 충전 시 최대 18시간까지 가능합니다.

15일 부터 출시되며 가격은 23만 9800원으로 책정되었습니다.

[구매] 갤럭시 버즈 프로 구매하러 가기

[클릭]

이번 언팩행사의 주인공 갤럭시 S21

삼성전자는 이번 갤럭시 S21의 카메라 성능을 극찬하며,

언팩행사에서의 시간 대부분을 카메라 성능을 소개하는데 사용하였습니다.

그만큼 카메라 성능의 자신이 있다는 이야기 입니다.

갤럭시S21은 8K 동영상 촬영을 지원합니다.

또한, 여러대의 카메라로 동시에 촬영하는 '디렉터스 뷰' 기능 등을 탑재했습니다.

특히 갤럭시 S21 울트라 모델은 최고 1억 800만 화소 카메라를 탑재하여,

10배 광학줌과 100배 디지털 줌을, 갤럭시 S21과 플러스 모델과는 다르게,

3배나 높은 광학줌과 30배나 높은 디지털 줌을 지원합니다

또한 삼성전자는 컨투어 컷이라는 디자인을 이번 갤럭시 S21에 적용을 하여,

속칭 카툭튀를 완화하였고, 카메라 모듈의 내구성을 개선하엿습니다.

또한 디스플레이는 엣지가 아닌 플랫 디스플레이를 적용하여, 디스플레이의 내구성을 높였으며,

S21과 S21+는 FHD 해상도를, 울트라는 QHD 해상도를 적용하였습니다.

다행이 120Hz 해상도는 세개의 모델 전부 다 적용하였습니다.

그리고 루머에 해당하는 S펜 적용은 울트라 모델만이 가능합니다.

가장 중요한 가격은

갤럭시S21 99만9900원
갤럭시S21+ 119만9000원
갤럭시S21 울트라(256GB) 145만2000원
갤럭시S21 울트라(512GB) 159만9400원

로 책정되었으며,

사전예약은 오는 15일 부터 21일까지 진행하며, 공식 출시는 29일에 출시됩니다.

[사전예약] 갤럭시 S21 최저가 사전예약

[클릭]

[사전예약] 갤럭시 S21 플러스 최저가 사전예약

[클릭]

[사전예약] 갤럭시 S21 울트라 최저가 사전예약

[클릭]

DELL P2421D 리뷰 및 드라이버 설치, 제품 인증, 2주 사용기

방현준 — Thu, 24 Dec 2020 19:41:28 +0900

해당 제품은 제가 직접 제 돈을 주고 구입하였으며 일체 지원을 받지 않았습니다.

요새 다들 듀얼모니터를 기본으로 사용합니다.

저 또한, 듀얼모니터를 사용하고 있구요.

그런데 사람의 욕심은 끝이 없다고 해야하나요?

모니터 암을 달아서 책상을 좀더 깨끗히 이용하고 싶다는 생각이 들었습니다.

하지만 제가 가지고 있던 모니터는 베사홀을 지원하지 않았죠....

그래서 이번에 모니터를 하나 장만하게 되었습니다.

바로 DELL P2421D 입니다.

DELL P2421D 소개

모니터 3대 회사중 하나인 Dell에서 나온 21년형 24인치 QHD모니터입니다.

매년 P24XX시리즈는 나오고 있는데요, 최근에 21년형으로 P2421D를 출시하였습니다.

사실 이 P시리즈의 델 모니터는 매년 나오는 만큼 그 변화가 미미하긴 하지만,

그만큼 매년 변화되면서 출시하고 있죠

먼저 P2421D 모니터 스펙을 알아보도록 하겠습니다.

제조회사	DELL
화면크기	60.45cm(24인치)
화면비율	16:9(와이드)
패널형태	평면
패널종료	IPS
시야각	광시야각
해상도	QHD(2560 X 1440)
응답속도	5ms
명암비	1000,:1
픽셀피티	0.2058mm
패널표면처리	안티글레어
최대주샤율	60Hz
부가기능	DP 포트 X 1
	HDMI 포트 X 1
	USB 포트 X 2
	USB 3.0 포트 X 2
	피벗기능
	틸트
베사홀(VESA), 월마운트	100 X 100mm
무게	3.37Kg

꽤 잘 빠진 모니터가 아닐 수 없네요

DELL P2421D 개봉기 및 설치

처음 모니터가 오면 이런식으로 옵니다.

모니터는 세로로 세워서 열지 말고 가로로 눕혀서 열라고 되어 있습니다.

이러한 세세한 설명이 DELL을 명품회사로 만드는 것이라 생각이 드네요.

이제 한번 부품을 봐보도록 하겠습니다.

모니터 부품은 심플합니다.

모니터 스탠드와 HDMI케이블, DP 케이블, 전원 케이블 입니다.

스탠드에 DELL 로고가 아름다운 모습입니다.

근데 모니터 암을 쓰시는 분한테는 필요없는 스탠드이므로

저는 패스하겠습니다.

모니터를 설치한 모습닙니다.

심플한 모습입니다.

사실 개봉기와 설치기는 크게 특색 있는게 없습니다.

그냥 설치하면 돼요

DELL P2421D 드라이버 설치

만약 모니터를 다 설치하셨다면, 두가지 해야할 부분이 있습니다.

바로 시리얼 등록과 모니터 드라이버 및 어플리케이션 설치입니다.

먼저 드라이브를 설치 및 어플리케이션 설치부터 해보겠습니다.

해당 사이트를 들어갑니다.

Dell P2421D에 대한 지원 | 드라이버 및 다운로드 | Dell 대한민국

www.dell.com

그 후 위 사진에 체크되어 있는 프로그램을 설치하세요

그럼 위 사진처럼 다운이 될 것입니다.

이 1번 프로그램은 드라이브고

2번 프로그램은 디스플레이 설정 어플리케이션 입니다.

먼저 "1번을 클릭"해 줍니다.

그럼 첫번째 사진처럼 뜨게 되는데 OK버튼을 눌러 압축을 풀어줍니다.

여기서 중요한것은 "이 드라이브에 경로"를 잘 기억해 두어야 합니다.

그 후 마우스 "오른쪽 클릭 후 디스플레이 설정"에 들어갑니다.

위 사진처럼 "디스플레이 설정"에 맨 아래에 있는 "고급 디스플레이 설정"을 클릭해 준 후

"디스플레이 2의 어댑터 속성"을 표시를 클릭해 주세요

그럼 위 창이 뜨게 되는데요

"모니터 탭"에 들어가 "속성"을 들어갑니다.

"드라이버 탭"에서 "드라이버 업데이트 버튼"을 클릭해 줍니다.

컴퓨터에서 드라이버 소프트웨어 검색 클릭 > 컴퓨너의 사용가능한 드라이버 목록에서 직접 선택 클릭 > 디스크있음 > 찾아보기

를 클릭해 주면되는데

여기서 중요합니다.

아까 전에 위 경로 기억해 두라고 했죠?

이 경로로 들어가 줍니다.

그럼 위 사진과 같이 드라이브를 찾을 수 있습니다.

드라이브를 열어주면

위 DELL P2421D 드라이버가 뜰 것이고 다음을 눌러주면 드라이버 설치가 끝나게 됩니다.

DELL P2421D 디스플레이 어플리케이션 설치

이제 모니터 디스플레이 어플리케이션을 설치해줍니다.

위에서 제가 2번이라고 했던 파일을 클릭해 줍니다.

위 방식대로 설치를 진행해 줍니다.

그럼 마우스 오른쪽 클릭 해주면

Dell Display Manager

를 볼 수 있고 Display Manager에서 모니터를 설정해 줄 수 있습니다.

DELL 모니터 인증

DELL같은 경우는 모니터를 인증 받을 수 있습니다.

아래 사이트에 들어가도록 합니다.

내 제품 및 서비스 | Dell 대한민국

내 제품 및 서비스 로그인하여 내 제품 및 서비스 사용 조직에 필요한 수백 대의 시스템을 추적하는 일이든, 단순히 가족의 디바이스를 확인하는 일이든 상관없이 내 제품 및 서비스를 이용하면

www.dell.com

그 후 "로그인"을 해준 후, "내 제품" 탭을 클릭해 줍니다.

그런 다음 "제품추가 버튼"을 클릭해 준 후, "서비스 태그"를 클릭해 줍니다.

이 서비스 태그는 모니터 뒷쪽에 있습니다.

위 사진에 빨간 네모칸 부분에 값을 입력해 주면 인증이 정상적으로 완료가 됩니다.

DELL P2421D 2주 사용 후기 및 총평

사실 이 글을 찾아오신 분들은 이 후기가 궁금해서 찾아오실거라 생각이 듭니다.

일단 저는 게임을 많이 하지 않는 개발자라는 것을 유의해 주시면서 봐주시면 감사하겠습니다.

이 제품은 24인치 QHD란 점 그리고 최근 144Hz 게이밍 모니터를 표방하는 여타 모니터 들과는 다르게

60Hz 사무용 모니터를 표방하고 있습니다.

사실 이 모니터는 게임을 하기에 완전 적합하지 않습니다.

이 모니터는 개발용 웹서핑용 글 읽는용에 적합한 모니터입니다.

24인치 QHD가 좀 과하다고 느낄수도 있으시지만,

제가 사용해본 결과 전혀 과하지 않습니다. 도리어 24인치 FHD보다 더 가독성이 좋으며,

특히 QHD 24인치 모니터라 피벗시에 목을 올리지 않아도 전체 글이 또렷히 보인다는 장점이 있습니다.

(이부분은 27인치 모니터를 피벗했을때 느끼는 목에 피로감을 느껴보신 분이라면 이해하실 겁니다)

또한 개발시, QHD덕분에 넓은 또는 긴 화면으로 소스코드를 볼 수 있다는 장점이 있습니다.

게다가 모니터 색도 누리끼리한 느낌이 있다고 하지만,

그건 뽑기인거 같습니다.

저는 전혀 그렇게 보이지 않더라구요....

사실 사무용 혹은 개발용으로는 단점이랄게 많이 없는 모니터입니다.

저는 이 모니터를 개발하실 때 피벗용으로 사용하시려면 적극 추천을 드릴것 같습니다.

다만 게임도 같이 한다면 이 모니터는 전혀 선택사항이 아님을 알려드립니다.

해당 제품은 제가 직접 제 돈을 주고 구입하였으며 일체 지원을 받지 않았습니다.

DELL P2421D 최저가 특가

[자세히 보기]

자바스크립트의 객체 참조할당과 얕은복사, 깊은복사

방현준 — Mon, 14 Dec 2020 03:06:08 +0900

함께 보면 좋은글

이전에 저희는 참조형 데이터에 대해서 알아보았습니다.

사실 참조형 데이터는 공부하면 공부할수록 많은 공부가 필요한 부분입니다.

그중에서도 저희는 오늘 참조할당과 얕은복사, 깊은복사에 대해서 알아보도록 하겠습니다.

이 포스트는 이전 포스트인 자바스크립트의 참조형 데이터 타입의 기초적인 지식이 필요한 포스트이므로, 만약 안보고 오셨다면 보고 오시길 추천드립니다.

자바스크립트의 참조형 데이터 타입

함께 보면 좋은글 2020/10/06 - [프로그래밍 언어/Javascript] - 자바스크립트의 기본형 데이터 타입 2020/09/02 - [프로그래밍 언어/Javascript] - 자바스크립트의 메모리 관리 이전에는 기본형 데이터 타입에

noogoonaa.tistory.com

객체의 참조할당 with 그림

자바스크립트를 배우고 있는 여러분들에게 객체를 복사하라고 하면

어떤 방식으로 복사를 시도할 것 같나요?

아마 대부분이 이러한 방식으로 복사를 생각 하실겁니다.

// obj 객체 생성 및 초기화
const obj = {
    a: 1,
    b: "test"
};

// obj2의 obj를 복사
let obj2 = obj;

하지만 이런 방식은 자바스크립트에선 복사라고 하지 않습니다.

그냥 객체를 참조하는 주소값을 할당한다고 합니다.

잘 이해가 안가신다구요?

그림을 통해 한번 알아보도록 하겠습니다.

해당 그림은 obj가 참조하는 객체 주소값을 obj2에 할당하는 방식을 설명한 그림입니다.

3006번 메모리에 obj2 객체의 메모리를 생성합니다.
그 후, obj가 참조하는 객체 주소값을 obj2 객체의 값으로 할당합니다.

이렇게하면 여러분들은 아마도 이게 복사라고 생각하실 수 있습니다.

하지만 이러한 방식은 문제가 꽤 많습니다.

그 이유는 아래 소스코드와 같은 방식으로 사용했을 때 예기치 않은 오류를 유발할 가능성이 있기 때문입니다.

// obj 객체 생성 및 초기화
const obj = {
    a: 1,
    b: "test"
};

// obj2의 obj를 복사
let obj2 = obj;

// obj2의 a요소를 3으로 변경
obj2.a = 3;

console.log(obj.a, obj2.a) // 3 3

이상합니다.

저희는 obj2의 a요소 값을 변경했는데, 왜 obj도 변경 되어졌을까요?

그림을 한번 보도록 하겠습니다.

obj2.a 요소의 값을 3으로 변경해 주여야 하므로 데이터 영역에서 3의 데이터 값이 없으므로 7002번 주소에 3을 저장합니다.
그 후 obj2의 a요소에 해당하는 1040주소의 값을 7002로 변경합니다.

이렇게 하면 obj2를 변경했지만 obj도 변경되는 이유를 설명할 수 있게 되어집니다.

즉 obj와 obj2는 5001 주소를 바라보고 있고, 5001은 1040부터 1041까지의 메모리를 바라보고 있기 때문에

obj2의 a요소인 1040메모리 값을 변경해 주어 obj도 같이 변경되어지기 때문입니다.

그렇다면 자바스크립트에서 객체를 어떻게 복사 해야할까요?

사실 자바스크립트에서 객체를 복사하는 방법은 다양합니다.

그 다양한 방식을 얕은복사와 깊은복사로 분류할 수 있는데,

먼저 얕은복사부터 알아보도록 하겠습니다.

객체의 얕은복사(shallow copy) with 그림

얕은복사란 객체를 복사할 때 객체 내부의 기본형 데이터는 복사가 가능하지만, 객체 내부의 또 다른 참조형 데이터는 복사가 아닌 할당을 해버리는 것을 말합니다.

잘 이해가 안되실 겁니다.

소스로 이해해 보도록 하죠

// 얕은복사를 진행하기 위한 함수
function shallowCopy(value) {
  const result = {};
 
  for(const key in value) {
    result[key] = value[key];
  }
 
  return result;
}

// obj 생성
let obj = {
    a: 1,
    b: [1, 2]
}

// obj2에 obj얕은 복사 실행
let obj2 = shallowCopy(obj);

// obj2 요사 값 변경
obj2.a = 3;
obj2.b[1] = 4;

// 결과
console.log(obj.a, obj2.a)	// 1 3
console.log(obj.b, obj2.b)	// [1, 4] [1, 4]

어떤가요? 이해가 되시나요?

obj를 obj2변수에 얕은복사를 진행했는데 a요소는 obj2 객체만 변경되었지만 b요소는 obj도 같이 변경되었습니다.

이것이 바로 얕은복사(shallow copy) 입니다.

이 코드의 핵심은 shallowCopy 함수입니다.

그러므로 shallowCopy 함수를 한번 찬찬히 보도록 할까요?

// 얕은복사를 진행하기 위한 함수
function shallowCopy(value) {
  // 빈 객체를 생성
  const result = {};
 
  // 매게변수로 넘어온 객체를 빈 객체에 저장
  for(const key in value) {
    result[key] = value[key];
  }
 
  // 매게변수로 넘어온 요소로 채워진
  // 빈 객체였던 객체를 반환
  return result;
}

이 함수는 빈 객체를 하나 생성하여,

반복문을 이용해 매게변수로 받은 객체를 빈객체에 저장하고

빈 객체였던 객체를 반환해주는 방식의 함수 입니다.

메모리 그림을 통해 알아보면 아래와 같습니다.

매게변수로 받아온 객체의 모습이 이렇다고 가정할 때 shallowCopy 함수를 사용하게 된다면,

아래와 같은 메모리 구조가 나오게 됩니다.

1080 주소에 result 이름을 가진 메모리를 생성합니다.
1080주소에 9001주소를 저장합니다.
9001은 1068 ~ 1069 주소의 값을 가지고 있습니다.
1068은 a 요소의 값이 7001 주소를 저장합니다.
1069는 b 요소의 값이 5010 주소를 할당 받습니다. 이 메모리는 obj의 b요소인 1041 주소의 값과 동일해 집니다.

이러한 방식을 얕은복사라 합니다.

이러한 구조를 띄고 있기 때문에 이전 obj2.b.1 의 값을 변경했을 때 obj.b.1 또한 같이 변경되었던 것입니다.

사실 이러한 얕은복사는 이렇게 함수로 만들지 않고도 다양한 방식으로 사용할 수 있습니다.

Object.assign() 메소드를 이용한 얕은복사

const a = {a: 1, b: 2};
const b = Object.assign({}, a);
 
console.log(b);	// {a: 1, b: 2}

전개(Spread) 연산자를 이용한 얕은복사

const a = {a: 1, b: 2};
const b = {...a};
 
console.log(b);	// {a: 1, b: 2}

객체의 깊은복사(deep copy)

이제 깊은복사에 대해서 알아보겠습니다.

깊은복사란, 내부 참조형 데이터를 할당받지 않고 복사하는 방식을 말합니다.

소스를 한번 보겠습니다.

// 깊은복사를 진행하기 위한 함수
function deepCopy(value) {
  const result = {};
 
  for(const key in value) {
    if (typeof value[key] === 'object') {
      result[key] = deepCopy(value[key]);
    } else {
      result[key] = value[key];
    }
  }
 
  return result;
}

// obj 생성
let obj = {
    a: 1,
    b: { c: 1, d: 2}
}

// obj2에 obj얕은 복사 실행
let obj2 = deepCopy(obj);

// obj2 요사 값 변경
obj2.a = 3;
obj2.b.c = 4;

// 결과
console.log(obj.a, obj2.a)	// 1 3
console.log(obj.b, obj2.b)	// {c: 1, d: 2} {c: 4, d: 2}

여기서도 가장 중요한 함수는 deepCopy 함수입니다.

// 깊은복사를 진행하기 위한 함수
function deepCopy(value) {
	// 빈 객체 생성
	const result = {};
    
	// 매게변수 데이터를 복사
	for(const key in value) {
		if (typeof value[key] === 'object') {
			// 참조형 데이터일 경우 재귀함수를 통해 한번 더 복사
			result[key] = deepCopy(value[key]);
		} else {
			// 참조형이 아닐경우 데이터를 빈객체에 저장
			result[key] = value[key];
		}
	}
    
    // 할당된 객체 반환
    return result;
}

이 함수는 얕은복사 함수에 확장형입니다.

반복문을 돌릴 때, 해당 데이터가 참조형일 경우 재귀함수를 이용해 기본형 데이터가 나올 때 까지 반복하는 함수입니다.

이러한 방법을 이용해 깊은 복사를 진행하게 됩니다.

이 깊은복사 또한, 함수를 구현하지 않아도 사용이 가능합니다.

바로 JSON.stringfy() 메소드를 활용해 구현이 가능합니다.

JSON.stringify() 메소드를 활용한 참조형 데이터 깊은복사

const obj = {
  a: 1,
  b: {
    c: 2,
  },
};

const copiedObj = JSON.parse(JSON.stringify(obj));

copiedObj.b.c = 3

obj.b.c === copiedObj.b.c //false

마무리

오늘은 참조형 데이터 타입 복사에 대해서 알아보았습니다.

만약 포스트에 문제가 있거나 틀린 부분, 잘 이해가 안 되는 부분이 있다면

댓글을 남겨주시기 바랍니다.

자바스크립트의 참조형 데이터 타입

방현준 — Mon, 14 Dec 2020 02:36:44 +0900

함께 보면 좋은글

이전에는 기본형 데이터 타입에 대해서 알아보았습니다.

오늘은 자바스크립트가 참조형 데이터를 어떻게 저장하고 사용하는지에 대해서 알아보도록 겠습니다.

만약 이전 포스팅인 자바스크립트의 기본형 데이터 타입 포스트를 읽고 오시지 않으셨다면 읽고 오시는것을 추천합니다.

자바스크립트의 데이터 타입 (1)

함께 보면 좋은 글 2020/09/02 - [프로그래밍 언어/Javascript] - 자바스크립트의 메모리 관리 2020/07/05 - [프로그래밍 언어/Javascript] - 자바스크립트 호이스팅(Hoisting)이란? 여러분들은 자바스크립트에..

noogoonaa.tistory.com

참조형 데이터 타입

참조형 데이터는 배열(Array), 함수(Function), Set, Map 등의 데이터 타입을 가지고 있지만

이 데이터 타입들을 까고 까다보면 객체 하나로 귀결됩니다.

그래서 참조형 데이터들이 메모리를 사용하는 방식을 보면 거의 비슷합니다.

하지만, 그렇다고 해서 쉬운건 또 아닙니다.

객체 하나로 귀결되는 만큼 내용도 방대하기 때문에 다양하게 알아야 할 것이 많기 때문이죠

또한, 참조형 데이터는 기본형 데이터와는 다르게 불변하지 않고 가변적으로 변하는 데이터 입니다.

그래서 더 신경을 많이 써야하고 어디서 어떻게 변할지 모르는 데이터 타입입니다.

그렇다면 어떻게 해서 자바스크립트의 참조형 데이터는 가변적인 데이터가 될 수 있었을까요?

그것은 바로 다음 섹션인 참조형 데이터가 어떻게 메모리를 사용하는지에 대해서 알아보도록 하겠습니다.

자바스크립트가 참조형 객체를 생성하고 추가 및 변경하는 방법 with 그림

// obj 객체 생성 및 초기화
let obj = {
    a: 1,
    b: "test"
};

먼저 소스를 통해 알아보도록 하겠습니다.

obj를 생성 후 객체로 초기화 해줍니다.

여기서, 객체의 내부는 키와 값으로 이루어져 있는데,

객체의 키를 "a" 와 "b"로 생성하고 각각 1과 "test"라는 기본형 데이터를 저장해 줍니다.

그렇다면 자바스크립트는 아래와 같이 메모리를 다루게 됩니다.

자바스크립트는 obj 객체를 301 메모리에 값으로 5001 메모리 주소를 저장합니다.
5001 메모리에는 obj가 가지는 임의의 메모리 영역을 저장합니다. 여기선 1040부터 1041이라고 잡겠습니다.
1040과 1041에는 각각 a와 b라는 이름을 제공하고 데이터가 저장되어있는 주소인 7001과 1003 주소를 저장합니다.
7001에는 숫자형인 1을 저장합니다.
기존에 "test"라는 문자열 데이터를 3003에서 사용하고 있었으므로 1041은 따로 메모리를 생성하지 않고 7003을 재사용 합니다.

기본형 데이터와 참조형 데이터의 차이는 각 객체의 요소들의 영역이 따로 존재한다는 것에 차이가 있습니다.

풀어서 설명하자면, 기본형 데이터는 변수 영역 -> 데이터 영역으로 접근한다면

참조형 데이터는 변수영역 -> 요소 데이터 영역 -> 요소 변수 영역 -> 요소 기본형 데이터 영역에 방식으로

이루어져 있다는 뜻입니다.

(물론 여기서 객체안의 객체가 존재하는 등의 depth가 깊어져 간다면 이러한 단계는 더욱더 많아집니다)

또한, 참조형 데이터가 가변값인 이유도 이 요소변수영역 존재이기 때문인데,

이 요소 변수영역으로 인해 추가 및 삭제, 업데이트가 가능하기 때문에 참조형 데이터가 가변값이 됩니다.

간단하게 업데이트와 추가를 통해 가변적으로 객체가 변경되는것을 보여드리겠습니다.

// 기존 데이터
const test = 2;

// obj 객체 생성 및 초기화
const obj = {
    a: 1,
    b: 2
};

// 객체에 데이터를 변경
obj.b = 56

// 객체에 데이터 추가
obj.c = 2;

console.log(obj)

obj 객체를 초기화 후 객체를 할당합니다.
그 후 obj 객체에 b요소의 값을 변경합니다. (가변적인 부분)
또, obj 객체에 c요소를 추가합니다. (가변적인 부분)

위 소스에서 주의깊게 보아야 할 부분은 obj 객체에 b요소를 변경하고 c요소를 추가한 부분입니다.

기본형 데이터의 특징인 불변성은 값을 변경할 때 값이 변경되는게 아닌 변수영역의 메모리가 변경되는것을 말합니다.

하지만 위 코드처럼 b를 변경하고 c를 추가할 때,

obj의 변수영역 값은 변경되지 않은 상태로 데이터가 변경되는 것을 볼 수 있습니다.

이러한 특성 때문에 참조형 데이터를 가변적인 데이터라고 하는것 입니다.

자바스크립트가 참조형 배열을 생성하는 방법 with 그림

맨 위에 기본형 데이터와 참조형 데이터 도표를 보면,

참조형 데이터에 객체뿐만 아니라 배열 및 다양한 타입들이 존재합니다.

그 중에서 대표적으로 배열이 어떻게 메모리를 사용하는지에 대해서 알아보도록 하겠습니다.

const test = 2;

let arr = [1, 2];

이러한 코드가 있다고 가정합시다.

그러면 메모리에는 아래 그림과 같이 저장되어 집니다.

메모리에 301주소에 arr 메모리를 할당하고, 5001 주소를 할당합니다.
주소 5001번에는 주소 1040번 부터 1041번 까지의 주소값을 할당합니다.
주소 1040번의 이름은 0으로 하고 1의 기본형 데이터가 존재하지 않으므로 주소 7001번에 숫자형 데이터 1을 저장합니다.
주소 1041번의 이름은 1으로 하고 숫자형 데이터 2가 주소 3003번에서 사용하는 주소 7002번에서 사용하고 있으므로 주소 7002번을 저장합니다.

어때요 위의 객체가 메모리를 사용하는것과 똑같이 사용하죠?

그냥 키값이 0, 1, 2, 3 이런식으로 다를 뿐, 메모리를 사용하는 방식은 똑같습니다.

Set이나 Map같은 데이터 타입도 이와 비슷한 방식으로 메모리를 사용합니다.

참고로, 객체에 키값만 0, 1, 2, 3 이런식으로 저장해놓고 배열이라고 우기면 안됩니다.

배열이 메모리를 사용하는 방식이 같을뿐이지, 실제로 까보면 엄연히 다릅니다.

마무리

오늘은 자바스크립트의 참조형 데이터 타입에 대해서 알아보았습니다.

사실 오늘은 그렇게 깊은 내용까지는 들어가지 않았습니다.

추후 포스팅 할 때 깊은내용까지 들어가도록 하겠습니다.

만약 포스트에 문제가 있거나 틀린 부분, 잘 이해가 안 되는 부분이 있다면

댓글을 남겨주시기 바랍니다.

감사합니다.

청년 내일채움공제 2년차 만기금 신청 방법 및 리뷰

방현준 — Thu, 5 Nov 2020 15:47:39 +0900

여러분들은 청년 내일채움공제를 진행하고 계신가요?

오늘은 제기 이 2년짜리 청년내일채움공제 만기금을 신청할 수 있게 되어

이 청년내일채움공제 만기금을 신청하는 방법에 대해서 알아보도록하겠습니다.

청년내일채움공제란?

먼저 청년내일채움공제 만기금을 신청하기 전에 청년 내일 채움공제가 무엇인지를 알아보도록 하겠습니다.

청년 내일채움공제는 미취업 청년(만15세 이상 34세 이하)의 중소·중견기업 유입을 촉진하고, 청년 근로자의 장기 근속과 자산 형성을 지원하기 위해 2016년 7월부터 시행한 제도로써 2년형과 3년형이 존재합니다.

2년형은 5인 이상 중소·중견기업(3년 평균 매출액 3천억원 미만인 기업)에 취업한 청년이 2년간 300만원을 적립하면, 정부가 900만원, 기업이 400만원을 공동 적립하여 만기 시 1,600만원의 목돈 마련할 수 있고

3년형은 5인 이상 중소·중견기업(3년 평균 매출액 3천억원 미만인 기업) 중 뿌리산업 진흥과 첨단화에 관한 법률에 따른 '뿌리기업'에 취업한 청년이 3년간 600만원을 적립하면, 정부가 1,800만원, 기업이 600만원을 공동 적립하여 만기 시 3,000만원의 목돈 마련

물론 모든 중소기업이 이 청년내일체움공제를 해 줄수 있는게 아닙니다. 청년내일채움공제 센터와 연계되어 있어야 하며, 사업장에서도 이 청년내일채움공제를 할 의향이 있어야 합니다.

청년내일채움공제 만기금 신청일

청년내일채움공제는 만기일자가 존재합니다.

이 만기일자가 곧 우리가 돈을 받을수 있는 날짜라고 생각하시면 안됩니다.

이 만기일자는 청약 가입자가 사업장을 퇴사하여도 청약에 큰 문제가 없다는 것을 말하는 날짜이고,

이 만기일자 전에 날짜 이전에 퇴사한다면 청약 중도 퇴사로 모든 금액을 받을 수 없습니다.

그러니 이 만기일자를 꼭 체크한 후 계획을 짜는것이 좋습니다.

자 그럼 우리는 만기금을 언제 신청할 수 있을까요?

일단 회사에서 기업기여금을 5회 다 내야하고 청약완료 신청서 같은것을 써야 합니다.

그 후 국가에서 준는 취업지원금 또한 다 납부하여야 만기금 신청이 가능합니다.

물론 이 금액을 계속해서 청년내일채움공제 사이트에서 지속적으로 확인할 필요는 없고

아래 사진과 같이 취업지원금이 납부되었다고 뜨게 됩니다.

이 때 이후부터 만기금 신청이 가능해 집니다.

그럼 이제 만기금 신청을 해보도록 하겠습니다.

청년내일채움공제 만기금 신청하는 방법

먼저 아래 사이트에 접속합니다.

https://www.sbcplan.or.kr/main.do

www.sbcplan.or.kr

그럼 위와 같은 사이트로 접속하게 됩니다.

로그인을 합니다.

로그인은 공인인증서로 하시면 됩니다.

그 후 위 탭에 접속해줍니다.

그럼 위 사진과 같은 페이지가 접속되어지게 됩니다.

그럼 테이블에 자기가 원하는 청약 상품에 왼쪽에 라디오버튼을 클릭하면

바로 아래 4개의 버튼이 나오게 됩니다.

여기서 만기금 신청 버튼을 클릭해줍니다.

그럼 이런 페이지가 나오게 됩니다.

이 페이지에 필요한 내용을 천천히 적어보도록 합시다.

먼저 여기서 일시수령 미수령이 있는데

저는 일시수령을 선택하였습니다.

그 후 아래 에 공제만기금 수령계좌를 선택하게 되는데

자신이 원하는 계좌를 선택해줍니다.

기본값으로 자신이 공제액을 납부하던 계좌가 설정되어 있습니다.

저는 귀찮으니 그냥 기존에 납부하던 계좌로 받겠습니다.

그런 다음 바로 아래에 간단한 설문조사가 있습니다.

중요한건 아니니까 그냥 소신것 설문조사를 한 후

아래에 공제 만기 신청 버튼을 클릭합니다.

그럼 위 사진과 같이 연계가입 어쩌구 하면서

청년내일채움공제에서 내일채움공제까지 연계하여 돈을 받으라는 말이 나옵니다.

저와는 상관이 없는 이야기니 깔끔하게 확인 버튼을 누릅니다.

그럼 위와같이 팝업이 뜨게 됩니다.

확인버튼을 클릭해 줍니다.

공인인증서를 인증해 주시구요

자 만기공제를 신청하였습니다.

문자로도 만기신청이 완료되었다고 문자가 오네요

이제 우리는 청년내일채움공제를 받을 수 있게 되었습니다. 축하합니다. 짝짝짝!

2년 청년내일채움공제 리뷰

여러분들은 청년내일채움공제를 어떻게 생각하시나요?

저는 이 청년내일채움공제를 중소기업 취업자에게는 꽤 좋은 정책이라고 생각하고 있습니다.

왜냐하면 이 청년내일채움공제 때문에 중소기업 인력수급에 큰 도움이 되고,

재직자에게도 목돈이 생길 수 있는 정책이기 때문입니다.

그래서 저 또한 이 청년내일채움공제를 위해 합격이 예정되어 있던 중견기업을 포기하고

중소기업에 들어와서 2년간 실무를 진행했습니다.

그리고 이 2년간의 실무는 저에게 있어서 참 생각을 많이하게 되는 시간이었습니다.

왜냐하면 제가 다니던 중소기업은 프론트엔드 개발자로서 큰 성장을 기대할 수 없는 환경이었고,

모르는게 있어도 누구에게 물어볼 수 없고 제가 찾아서 공부해야하는 환경이었기 때문입니다.

심지어는 잘못 코드를 짜고 있어도 이게 잘못 짠건지도 모르는 상황도 존재했습니다.

따라서 저는 이 청년내일채움공제를 좋은 정책이라고 생각을 하지만,

자신이 만약 신입으로 중견기업 이상의 입사를 노릴 수 있는 실력자라면

청년내일채움공제때문에 중견기업을 포기하고 중소기업에 가지 말라고 하고 싶습니다.

개발자로서 잘못을 알려줄 수 있는 사람의 존재 여부는 꽤나 크고, 성장의 도움이 되기 때문입니다.

또한 저는 2년짜리 청년내일채움공제를 추천합니다.

3년짜리 청년내일채움공제는 너무 길고 성장에 있어서 회사를 깨닫는 시기가 대략 1년차 부터라고 생각하기 때문입니다.

하지만 자신이 중소기업에 입사할 수 밖에 없다면 이 정책을 해 줄수 있는 기업으로 가시길 바랍니다.

청년내일채움공제는 좋은 정책이며, 장기적으로 근속할 수 있게 도와주는 정책이기 때문입니다.

마무리

오늘은 청년내일채움공제 만기금 신청하는 방법에 대해서 알아보았습니다.

만약 궁금한 점이 있거나 이상한 점이 있으면 댓글 남겨주시면 답변 드리겠습니다.

감사합니다.

자바스크립트의 기본형 데이터 타입

방현준 — Tue, 6 Oct 2020 01:06:43 +0900

함께 보면 좋은 글

여러분들은 자바스크립트에 타입이 존재한다는 것을 아시고 계신가요?

사실 C나 자바 같은 언어들과는 다르게 자바스크립트는 타입을 사용자가 선언하지 않습니다.

하지만 그럼에도 불구하고 변수에 데이터는 정상적으로 들어가고, 에러 또한 발생하지 않습니다.

이상합니다.

분명 C나 자바같은 언어에선 이런 것에 대해서 에러를 발생시키는데

자바스크립트는 그러지 않습니다.

그렇습니다.

오늘은 자바스크립트가 데이터 타입을 지정하는 방법에 대해서 알아보도록 하겠습니다.

(자바스크립트의 메모리 관리 포스트를 읽지 않으셨다면 읽고 해당 포스트를 보는 것을 추천드립니다)

출처 : https://dev.to/damxipo/javascript-versus-memes-explaining-various-funny-memes-2o8c

데이터 타입의 종류

자바스크립트를 이제 막 입문한 사람들은 잘 모를 수도 있지만,

자바스크립트엔 여러 종류에 데이터 타입들이 존재합니다.

문자열(string), 숫자(number), null, 객체(object) 등 다양한 데이터 타입이 존재하죠.

사실 말만 들어선 이해가 안 가실 것 이기 때문에 그림을 한번 보도록 하겠습니다.

이게 현재까지 존재하는 데이터 타입입니다.

어느 정도 자바스크립트를 사용하시는 분들은 익숙한 타입들이 보이실 겁니다.

이 포스팅에서 각 타입에 대해서 다루게 되면 포스팅이 길어지므로 타입 설명은 제쳐두고

우리가 집중적으로 봐야 할 타입은 기본형과 참조형 데이터 타입입니다.

기본형 데이터 타입

먼저 우리는 기본형 데이터 타입에 대해서 알아보도록 하겠습니다.

이 기본형 데이터 타입은 숫자(Number), 문자열(String), 불리언(Boolean) 등의 데이터 타입을 가지고 있는데,

왜 이 숫자나 문자열 등의 타입들(원시 값이라고도 함)을 기본형 타입이라고 할까요?

결론적으로 말하자면 기본형 데이터 타입은

할당이나 복제를 통해 데이터를 사용하고 불변 값을 가지는 타입입니다.

숫자나 문자열, 불리언, null 등이 그러하고요

전혀 이해가 안 됩니다...

머리가 쥐가 날 것 같습니다.

하지만 그림으로 이해를 하면 아마 이해하기 쉽기 때문에

최대한 쉽게 자바스크립트가 기본형 데이터 타입을 다루는 방식에 대해서

그림으로 한번 보도록 하겠습니다.

자바스크립트가 데이터를 할당하는 방법 with 그림

자바스크립트가 관리하는 메모리에는

아래 그림과 같이 변수 영역 메모리와 데이터 영역 메모리가 존재합니다.

그리고 우리는 자바스크립트에서 temp라는 변수를 생성하여

"변수값"이라는 문자열을 저장해 봅시다.

아래처럼 말이죠

let temp = "변수값"

그럼 자바스크립트는 아래와 같이 데이터를 저장하게 됩니다.

그리고 아래처럼 temp라는 변수를 사용해 봅시다.

let temp = "변수값"

console.log(temp);

그럼 자바스크립트는 temp라는 이름을 가진 변수 영역 메모리를 찾습니다.

아래 사진과 같이 말이죠

그리고 값이 데이터 영역 메모리의 103번 영역이라는 것을 확인하고,

103 주소에 저장되어 있는 값을 가져옵니다.

이렇듯 데이터 영역에 직접 데이터를 할당하여 데이터를 가져오는 방식을 데이터 할당이라고 합니다.

어때요? 이해하기 쉽죠?

그런데 좀 이상합니다.

그렇다면 왜 자바스크립트는 temp영역 메모리에 직접 데이터를 저장하지 않고

한 번을 거쳐서 데이터를 가져오는 것일까요?

그건 똑같은 값을 가지는 메모리의 중복을 없애기 위해서입니다.

사실 데이터 영역 메모리 한 칸에 "변수값" 이라는 데이터를 넣어놨지만,

저 "변수값" 이 저장되어 있는 영역은 6바이트에 메모리 영역을 잡고 있습니다.

(한글 한 글자가 2바이트 이므로)

그렇기 때문에 한 단계를 거쳐서 데이터를 저장하는 것입니다.

그리고 이러한 방식이 빛을 발할 때는 같은 데이터를 중복적으로 저장할 때인데,

가장 간단한 예시로 데이터 복제를 예로 들 수 있습니다.

먼저 자바스크립트가 데이터를 어떻게 복제하는지 알아볼까요?

자바스크립트가 데이터를 복제하는 방법 with 그림

자 바로 설명 들어가겠습니다.

일단 아래 코드처럼 temp2라는 변수에 temp를 넣어줍니다.

let temp = "변수값"
let temp2 = temp;

그럼 아래 그림들처럼 값 복제가 이루어지게 됩니다.

먼저 변수 영역 메모리에 temp2를 만들어 줍니다.

그 후 temp에 값을 가져오기 위해 203 메모리 영역으로 이동합니다.

그리고 203의 값을 가져옵니다.

요렇게 말이죠

어때요? 복제는 참 쉽죠?

자바스크립트는 그냥 temp의 메모리 영역인 203 영역에 접근하여 값을 들고 와

temp2에 데이터 영역인 214에 넣어줍니다.

그렇게 되면 메모리 영역 위치 값만 저장하면 되니까 메모리 소모가 크지 않게 되고

temp2가 6바이트에 메모리 소모 없이 "변수값"이라는 값을 가질 수 있게 됩니다.

그럼 여기서 또 하나의 의구심이 들 것입니다.

만약 temp에 데이터를 변경하면 temp2도 변경될 것 같은데??

좋은 의구심입니다.

하지만 이러한 방식을 해결하기 위해 자바스크립트는

데이터가 변경됐을 때의 방법도 존재합니다.

자바스크립트가 데이터를 변경하는 방법 with 그림

자 우리는 아래 코드와 같이 temp에 데이터를 변경했다고 가정해 봅시다.

let temp = "변수값"
let temp2 = temp;

temp = "템프값"

그럼 자바스크립트는 temp의 값이 변경되었다는 것을 알고

아래 그림과 같이 데이터 영역 메모리를 새로 잡아줍니다.

그리고 temp에 저장되어 있는 주소 값을 새로운 주소 값으로 변경해 줍니다.

자 이렇게 해서 temp와 temp2 가 가지는 값이 달라지게 됩니다.

자 이렇게 기본형 데이터가 변경되었을 때,

자바스크립트는 해당 데이터 자체를 변경하지 않고

새로운 데이터 영역을 만들어서

변경된 데이터를 저장합니다.

이렇게 해서 temp2의 데이터까지 자동으로 변경하지 않고

temp2의 값을 유지할 수 있게 되었습니다.

자 여기서 저는 뭔가 궁금합니다.

과연 기본형 데이터는 한번 만들면 변경할 수 없을까?

라고요...

결과를 말하자면

네!!! 변경할 수 없습니다.

기본형 데이터는 한번 만들면 변경할 수 없고,

가비지 콜렉터가 수거해가지 않는 이상 사라지지도 않습니다.

이것을 자바스크립트에선 불변 값이라고 하며

기본형 데이터 타입이 가지는 성질입니다.

불변 값과 상수의 차이

자 여기까지 온 사람들이라면 들 수 있는 또 한 가지 의구심

그럼 불변 값이 상수가 아닌가??

이것도 결론부터 말하면

네!!! 아닙니다.

상수는 변수 영역의 메모리 값이 변경되지 않는 것이고

불변 값은 데이터 영역의 메모리 값이 변경되지 않는 것입니다.

그러니 const 키워드로 만들어진 변수에 들어가 있는 데이터를

기본형 데이터 타입이라고 생각하지 않으셨으면 좋겠습니다.

기본형 데이터 타입 정리

자, 정리해 봅시다.

아까 제가 뭐라고 했죠?

기본형 데이터 타입은 할당이나 복제를 통해 데이터를 사용하고 불변 값을 가지는 타입입니다.

라고 했죠?

즉, 기본형 데이터 타입은 데이터 영역 메모리에 직접 데이터를 생성하고, 사용하는 타입이며

불변 값을 가지는 타입으로 값이 변경되면 데이터 영역 메모리에 새로운 값을 생성하여 접근하는 타입입니다.

또한 상수와 불변 값은 성질 자체가 다르며

상수는 변수 영역의 메모리 값 변경 여부를 따르며

불변 값은 데이터 영역 메모리 값 변경 여부에 따릅니다.

이것으로 우리는 기본형 데이터 타입에 대해 설명할 수 있게 되었습니다.

마무리

자! 오늘은 자바스크립트의 데이터 타입에 종류와 기본형 데이터 타입에 대해서 알아보았습니다.

쉽게 설명했는지 모르겠습니다.

다음 시간엔 참조형 데이터 타입에 대해서 한번 알아보도록 하겠습니다.

만약 포스트에 문제가 있거나 틀린 부분, 잘 이해가 안 되는 부분이 있다면

댓글을 남겨주시기 바랍니다.

감사합니다.

[javascript / 알고리즘] 소수 판별 알고리즘

방현준 — Mon, 5 Oct 2020 17:35:22 +0900

해당 포스팅은 제가 사용하려고 만든 포스팅이므로 자세한 설명은 생략합니다. 만약 이해가 안될 시 댓글을 남겨주시면 답변드리겠습니다.

소수란, 1과 자기자신을 제외한 다른 수로 나눠지지 않는 수 입니다.

그 예로 11, 71 등이 있습니다.

이 소수를 판별하는 알고리즘을 만들어 보겠습니다.

실행함수

// 소수 판별기
function isPrime(n) {
	// 1이하일 경우엔 소수가 아닙니다.
	if (n <= 1) return false;

	// 2와 3일 경우엔 소수 입니다.
	if (n === 2 || n === 3) return true;

	// 2로 나눴을 때 나머지가 0일 경우엔 소수가 아닙니다.
	// 이 말인 즉슨 짝수는 다 소수가 아닙니다.
	if (n % 2 === 0) return false;

	// 최대 n - 1까지 돌려줍니다.
	let divisor = 3;
	while (n > divisor) {
		// 무엇이라도 0으로 떨어진다면 소수가 아닙니다.
		if (n % divisor === 0) return false;

		// 짝수일 경우를 제외한 홀수일 경우를 판단
		divisor += 2;
	}

	// 모든 조건을 통과했을 경우 소수로 인정받습니다.
	return true;
}

사용

console.log(isPrime(71));

[javascript / 알고리즘] 문자열의 모든 경우의 수 가져오기

방현준 — Mon, 5 Oct 2020 17:25:30 +0900

해당 포스팅은 제가 사용하려고 만든 포스팅이므로 자세한 설명은 생략합니다. 만약 이해가 안될 시 댓글을 남겨주시면 답변드리겠습니다.

알고리즘을 풀다보면 배열의 경우의 수가 필요한 경우가 존재합니다.

Python 같은 경우는
내장라이브러리인 itertools에 Permutation같은 함수가 있어서
꽤 쉽게 구해지지만

Javascript 같은 경우는 따로 내장 라이브러리가 없어서
실제 구현해야합니다.

그래서 아래와 같이 만들게 되었습니다.
(더 좋은 방법이 있을거 같긴 한데... 내 머리로선 이게 한계인듯 하다...)

실행 함수

function getNumbeOfCases(numbers) {
	// 중복을 막기 위해서
	const result = new Set();

	// 재귀 함수를 통해 만든다.
	const temp = (currFix, eachArr) => {
		for (let i = 0; i < eachArr.length; i++) {
			const tempEachArr = [...eachArr];
			const tempCurrFixVal = tempEachArr.splice(i, 1)[0];
			const tempCurrFix = currFix + tempCurrFixVal;
			result.add(Number(tempCurrFix));
			if (tempEachArr.length > 0) temp(tempCurrFix, tempEachArr);
		}
	};

	// 시작
	for (let i = 0; i < numbers.length; i++) {
		let target = numbers[i];
		result.add(Number(target));

		const eachArr = [...numbers];
		eachArr.splice(i, 1);

		temp(target, eachArr);
	}

	return new Array(...result);
}

사용

console.log(getNumbeOfCases(["0", "1", "2"]));

javascript Dom 로드 시 실행되는 이벤트

방현준 — Thu, 17 Sep 2020 01:29:07 +0900

웹 페이지를 개발할 때 사용자의 이벤트에 따라 자바스크립트 코드를 실행시키는 경우도 존재하지만,

웹 문서가 로드되었을 때를 기점으로 자바스크립트를 실행하는 경우도 존재합니다.

오늘은 이 웹 문서가 로드되었을 때 자바스크립트를 로드하는 방법에 대해서 알아보도록 하겠습니다.

자바스크립트 로드될 때 웹 브라우저 [출처 : https://moz.com/blog/javascript-seo]

웹 문서를 로드하기 전 선행 과정

여러분들은 웹 브라우저가 웹 문서를 어떻게 로드하는지 아시고 계신가요?

사실 간단하게 보면 간단한 과정인데

본격적으로 공부를 하면 꽤 복잡해 집니다.

그래서 이번 포스팅에선 간략하게 알아볼 예정입니다.

(자세한 부분은 추후 포스팅하겠습니다)

일단, 처음 사용자는 어떠한 목적을 가지고 웹에 접근을 합니다.

저희는 날씨를 알아보려고 웹에 접근했다고 가정을 해보죠

그럼 사용자는 해당 주소를 가지고 웹 문서에 접근을 시도하게 됩니다.

그럼 웹 브라우저는 해당 주소에 도메인을 가지고 있는 서버에 접근하여

웹 문서를 달라고 말합니다.

그럼 이제 서버는 해당 웹 브라우저에 요청에 따라

HTML과 CSS, JAVASCRIPT, 이미지, 폰트 등 필요한 리소스를 웹 브라우저에 전송을 하게 됩니다.

자 그럼 서버에서 가져온 리소스들은 웹 브라우저가 가질 수 있게 되었습니다.

여기서부터 자바스크립트가 로드될 때를 개발자가 설정해 줄 수 있습니다.

그 첫 번째로 먼저 로드되는 것을 알아보겠습니다.

DOMContentLoaded

해당 이벤트는 Document 객체에 등록할 수 있는 이벤트로

웹 브라우저가 HTML을 DOM 트리 형식으로 만들고 난 후에 호출됩니다.

아래 그림을 한번 보도록 하죠.

HTML을 읽은 웹 브라우저는 Dom Tree를 만듭니다.

이렇게 Dom Tree가 다 만들어 진 후 웹 브라우저에선

DOMContentLoaded를 실행시켜달라고 요청합니다.

그럼 자바스크립트는 DOMContentLoaded를 실행하게 되죠

그림으로 봤을 때 이해가 쉬울지 모르겠습니다.

즉, 간단하게 말하면

브라우저에 HTML만 존재한다는 이야기 이고,

그 외 나머지 리소스는 자바스크립트가 접근할 수 없다는 이야기입니다.

이미지가 이해가 안가는 사람들이 있을수 있으니

소스를 한번 확인해 볼까요?

See the Pen DOMContentLoaded by HyeonJun, Bang (@noogoonaa) on CodePen.

어떠신가요?

이미지가 로드되지 않고 alert가 나타나죠?

(만약! 이미지가 먼저 뜬다면, 우측 상단에 Edit on CodePen을 클릭 후 직접 실행해 보시길 바랍니다.)

그 후 확인 버튼을 누르면 이미지가 나타납니다.

그렇습니다.

DOMContentLoaded는 스타일이나 이미지 등을 전혀 불러오지 않고,

오로지 로드된 HTML로만 접근하기 때문에 이러한 현상이 발생하는 것입니다.

그래서 이미지를 가져오기 전에 Alert가 발생한 것이지요.

그렇기 때문에 DOMContentLoaded는 직접적으로 이미지나 스타일 등의 접근하지 않는 기능을 적용해 주어야 합니다.

예를 들어서 모듈 초기화하여 Dom에 추가하거나, 노드의 이벤트 핸들러 등록 등을 할 수 있겠네요.

Load

해당 이벤트는 Window객체에 등록할 수 있는 이벤트로

웹 브라우저가 HTML, 스타일, 폰트, 이미지 등을 다 렌더링 한 후에 호출됩니다.

이번에도 그림을 먼저 한번 보도록 하겠습니다.

웹 브라우저는 CSS와 이미지 등을 전부 렌더링 한 후

자바스크립트에 Load를 실행해 달라고 요청합니다.

그럼 자바스크립트는 이 요청에 응해 Load를 호출하게 되죠

이 때문에 이전 DOMContentLoaded와는 다르게 모든 스타일과 리소스 등 의 접근할 있고,

조작 또한 가능하게 됩니다.

자 그럼 이번에도 소스를 한번 확인해 볼까요?

See the Pen load by HyeonJun, Bang (@noogoonaa) on CodePen.

이번에는 정상적으로 이미지가 렌더링 된 후 Alert가 실행되는 것을 확인할 수 있습니다.

이렇듯 Load를 사용하면 좀 더 완벽한 Dom에 접근할 수 있게 됩니다.

그래서 이 이벤트는 이미지의 사이즈나, 조작, DOM 스타일을 변경하는 경우에 사용됩니다.

다만 속도 측면에서는 DOMContentLoaded보다 느릴 수밖에 없습니다.

왜냐하면 모든 리소스가 다 정상적으로 로드될 때까지 기다려야 하기 때문이죠.

마무리

오늘은 DOMContentLoaded와 Load에 대해서 알아보았습니다.

이러한 이벤트는 자주 사용하는 이벤트이기 때문에 꼭 알아두셨으면 합니다.

다음에는 더 좋은 포스트를 가져오겠습니다.

만약 포스트에 문제가 있거나 틀린 부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

자바스크립트의 메모리 관리

방현준 — Wed, 2 Sep 2020 00:30:11 +0900

여러분들은 자바스크립트가 메모리를 어떻게 활용하는지 알고 계십니까?

사실 자바스크립트 개발자 중 그렇게 브라우저 메모리를 신경 쓰고 개발하는 경우는 많지 않습니다.

(여태까지 저만 그랬을 수도 있었습니다....)

하지만 C계열의 언어를 가지고 게임을 만들거나 임베디드를 다루는 사람들은 메모리 관리가 필수적이라 할 수 있습니다.

왜냐하면 임베딩이나 게임 개발은 컴퓨터의 메모리 누수를 최소한으로 줄여서 더 빠른 효율을 내야 하기 때문이죠.

그래서 임베디드 혹은 게임 현업에 투입될 때, 이것을 위해 고치고 발생하고 고치고를 반복하죠

하지만 자바스크립트 개발자는 크게 메모리 관리를 가지고 고민하지 않습니다.

왜그럴까요?

한번 자바스크립트 개발자가 메모리 관리를 중요하게 생각하지 않았던 이유를 한번 알아보도록 하겠습니다.

당신의 메모리는 재앙적인(catastrophe) 문제를 가지고 있으니, 귀여운 고양이를 보세요

컴퓨터 메모리에 대해서 알아보자

먼저 자바스크립트의 메모리를 어떻게 활용하는지를 알아보기 전, 컴퓨터가 어떻게 메모리를 다루는지에 대해서 알아보도록 하겠습니다.

여러분들은 세상이 무엇으로 이루어져 있다고 생각하시나요?

일단 저는 세상이 뭘로 이루어져 있는지는 모르겠고, 컴퓨터 세상은 0과 1로 이루어져 있습니다

그 말은 즉, 우리가 사용하는 크롬, VSCode 같은 프로그램은 결과적으로는 0과 1로 이루어져 있죠.

왜 0과 1로밖에 안 되어 있나요?라고 물어본다면 많은 이유가 있겠지만,

제가 알고 있는 이유로는 0과 1로 덧셈, 뺄셈 등의 사칙연산이 가능하며,

더 나아가, 컴퓨터에서 보일 수 있는 모든 것을 표현할 수 있기 때문입니다.

(좀 더 들어가면 이산수학 시간이 되기 때문에 자세한 건 넘어가도록 하겠습니다.)

출처 : http://newsteacher.chosun.com/site/data/html_dir/2015/03/12/2015031200424.html

그렇기 때문에 이 0과 1은 컴퓨터가 사용하는 데이터입니다.

이 데이터는 컴퓨터 어딘가에 저장해야 나중에 쓸 수 있고,

이 데이터를 저장하는 저장소의 크기를 비트(bit)라는 용어를 사용하여 구분하기로 했습니다.

즉, 데이터 1을 담고 있는 저장소의 크기는 1비트(bit)인 거죠

어때요? 여기까진 쉽죠?

자, 이제 좀 더 들어가 볼까요?

우리는 컴퓨터 어딘가에 1이라는 데이터를 1비트 크기의 메모리에 저장했습니다.

그리고 1주일 뒤 우리는 저장해 둔 데이터를 가져와서 쓰려고 컴퓨터에 요청했습니다.

"나의 친구 콤퓨타야~, 나의 1이라는 데이터를 가져와 줄 수 있니??"

"물론이지 친구야, 여기 있어"

하면서 컴퓨터는 저에게 1이라는 데이터를 똭 하고 주었습니다.

고마워~ 콤퓨타야~

근데 생각해보면 모든 데이터가 0과 1로 이루어져 있는데 컴퓨터는 그 많은 0과 1중에서

사용자가 원하는 1을 찾을 수 있었을까요?

사실 컴퓨터는 사용자가 원하는 데이터를 기반으로 찾은 게 아닙니다.

그 데이터가 저장되어 있는 주소를 가지고 찾은 것이죠.

사실 각각의 1비트의 메모리마다 각각의 주소를 가지고 있습니다.

이 주소는 고유해서 컴퓨터 안에 중복되는 주소를 가질 수 없고요,

그래서 컴퓨터는 이 주소를 가지고 중복되는 데이터 안에서 사용자가 원하는 데이터를 찾을 수 있었던 겁니다.

하지만, 제가 아까 말했죠?

컴퓨터는 1비트당 1개의 주소를 가지고 있다고...

이러한 경우 모든 비트의 주소를 알고 있어야 하므로 메모리 관리에 효율적이지 않습니다.

그렇기 때문에 우리의 친구 컴퓨터는 이 메모리를 효율적으로 관리하기 위해서

8개의 비트(bit)를 묶어서 바이트(byte)라는 단위를 만들어 냈습니다.

그렇게 해서 컴퓨터는 바이트의 첫 번째 주소만 가지고 있으면,

데이터의 묶음인 바이트 메모리에 접근해서 사용자가 원하는 데이터를 더 효율적으로 접근할 수 있게 되었습니다.

자바스크립트가 메모리를 관리하는 법

자 우리는 컴퓨터가 어떻게 메모리를 관리하는지 알아보았습니다.

그럼 이제 자바스크립트가 메모리를 관리하는 법에 대해서 알아볼까요?

여러분들은 자바스크립트를 사용하면서 혹시 메모리 관리를 해보신 경험이 있으신가요?

사실 많이 없으실 것이라 생각합니다.

자바스크립트도 프로그래밍 언어이기 때문에 메모리 관리를 해줘야 할 텐데 왜 굳이 신경을 안 써도 될까요?

자바스크립트도 Garbage Collector를 가지고 있습니다.

왜냐하면, 자바스크립트는 고수준 언어이기 때문에 대부분의 고수준 언어가 가지고 있는 GC(Garbage Collector)가 존재하여 메모리를 관리하고 있기 때문이죠.

그리고, 또 다른 이유는 옛날 컴퓨팅에서 숫자를 저장할 때 short(2 바이트)을 사용하다 메모리가 부족하면 int(4 바이트)로 형 변환을 해줘야 하는 시절과는 달리

현재의 컴퓨팅은 메모리가 상대적으로 커졌으며 이러한 여유로운 메모리 덕분에 우리의 자바스크립트는 이렇게 말합니다.

"야!! 너 그냥 귀찮으니까 64bit(8byte) 메모리 할당해 줄게, 가져!!"

이렇게 자바스크립트의 통 큰 메모리 할당 덕분에 자바스크립트 개발자는 젖과 꿀이 흐르는 메모리에서 데이터를 저장할 수 있게 된 것이지요

마무리

자! 오늘은 컴퓨터가 메모리를 관리하는 법과, 자바스크립트가 메모리 관리를 안 해도 되는 이유에 대해서 알아보았습니다.

다음 포스팅에선 자바스크립트에 데이터 타입에 대해서 알아보도록 하겠습니다.

만약 포스트에 문제가 있거나 틀린 부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

노션(Notion) 한국어 설정 방법

방현준 — Tue, 11 Aug 2020 22:59:43 +0900

최근 에버노트를 재치고 개발자, 기획자 등 다양한 직군에서 사용되어지는 메모 노트 서비스가 있습니다.

그 서비스의 이름은 "노션" 입니다.

이 서비스는 2020년 8월 11일 바로 오늘 한글화를 공개했습니다.

한국 사람으로서는 꽤 좋아할만한 이야기인데요

그럼 기존에 사용하던 노션사용자는 어떻게 노션의 한글 서비스를 사용할 수 있을까요?

한번 알아보도록 하겠습니다.

웹에서 노션(Notion)을 한글로 설정하는 방법

이번에 업데이트 된 노션을 한국어로 사용하기 위해서 하는 작업은 그렇게 어렵지 않습니다.

웹에서 Notion이라고 입력해 줍니다.

그럼 아래 사진과 같이 노션에 들어올 수 있습니다.

그 후 로그인을 해 줍니다.

만약 아이디가 없다면 Sign Up을 통해 회원가입을 해 줍니다.

저는 아이디가 있으므로 제 아이디로 로그인 하겠습니다.

그럼 아래와 같은 화면이 나오게 됩니다.

그 후 Setting & Members 를 클릭해 줍니다.

그럼 세팅창이 나오게 됩니다.

우리는 언어를 변경해야하니까 Language & region 메뉴를 클릭해 줍니다.

그럼 언어를 변경할 수 있는 메뉴가 나오게 됩니다.

여기서 한국어로 변경해 줍니다.

그 후 한국어를 진짜로 설정할 꺼냐는 팝업창에서 Update를 눌러줍니다.

그럼 짜잔 한국어로 변경 되었습니다.

이것으로 웹에서 한국어 설정 하는 방법에 대해서 알아보았습니다.

다음은 윈도우 프로그램에서 한국어 설정 하는 방법을 알아보도록 할까요?

윈도우 프로그램에서 노션(Notion)을 한글로 설정하는 방법

자 이번엔 윈도우 노션 프로그램에서 한국어 설정을 하는 방법에 대해서 알아보도록 하겠습니다.

윈도우 프로그램과 웹 Notion은 같은 UI를 가지고 있기 때문에 크게 다를게 없습니다.

먼저 Notion 프로그램을 실행시켜줍니다.

그 후 Setting & Members를 열어줍니다.

그럼 아래와 같이 팝업창이 나오게 됩니다.

여기서 Language & region을 클릭해 줍니다.

그럼 언어를 변경할 수 있는 화면이 나오게 됩니다.

여기서 한국어를 클릭해 줍니다.

그럼 웹과 마찬가지로 진짜로 언어를 한국어로 변경할 것이냐는 팝업창이 뜨게 됩니다.

여기서 Update를 클릭해 줍니다.

그럼? 어라? 그대로 영어 입니다.

이게 아직 업데이트 초기라 그런지 바로 변경이 안되더라구요

하지만 걱정하지 마세요 해결 방법은 있습니다.

프로그램을 껐다 다시 켜 볼까요?

짜잔 한국어 설정이 완료 되었습니다.

이것으로 윈도우 프로그램에서도 한글로 사용할 수 있게 되었습니다.

앱에서 노션(Notion)을 한글로 설정하는 방법

사실 아쉽지만,,,, 앱에서는 언어를 변경할 수 없습니다.

그럼 앱에서는 한국어 버전을 사용할 수 없는 걸까요?

당연히 아닙니다.

사용할 수 있어요.

하지만 먼저 위 웹이나 프로그램에서의 한국어 변경 작업이 선행되어야 합니다.

그 후 Notion 앱을 실행시켜줍니다.

그런 다음 아래와 같은 노션 창이 뜨게 됩니다.

여기서 빨간 네모칸이 쳐져 있는 햄버거 메뉴를 클릭해 줍니다.

그럼 아래와 같이 메뉴 화면이 뜨게 됩니다.

여기서 빨간 네모칸이 쳐져 있는 워크스페이스 관리 창으로 들어갑니다.

그럼 아래와 같은 화면이 나오는데

여기서 계정 로그아웃을 해줍니다.

(지금 화면이 한글인데.. 이건 한글화 후 찍은 사진이라 그렇습니다. 위치는 같으니 같은 위치를 클릭해 주세요)

그런 다음 다시 로그인을 하면!!

짜잔 한글로 변경된 것을 확인할 수 있습니다.

마무리

자 오늘은 이번에 나온 노션 한국어 설정하는 방법에 대해서 알아보았습니다.

이 설정은 웹이나 윈도우 프로그램 중 한군데에서 한국어로 설정해 놓으면 전부 변하게 됩니다.

앱같은 경우는 아직 업데이트가 제대로 안되어서 직접적으로 변경이 불가능 하므로 위 방법을 사용하시면 됩니다.

축하 드립니다.

이제 한국어 버전의 노션을 자유롭게 사용하시면 됩니다.

만약 포스트에 문제가 있거나 틀린부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

자바스크립트 "==" 과 "==="에 대해서 알아보자

방현준 — Tue, 11 Aug 2020 02:38:15 +0900

Javascript를 공부하다 보면 == 과 ===이라는 연산자를 종종 보게 됩니다.

이 연산자는 A와 B를 비교하는 연산자 인데,

다른 언어들과는 다르게 자바스크립트는 ==이 존재하고 ===이 존재합니다.

왜 자바스크립트는 이 두개의 연산자를 넣어두었을까요?

오늘은 "==" 과 "==="에 대해서 알아보도록 하겠습니다.

a 는 0이다. b 는 0이다. 고로 a 는 b가 아니다... https://www.reddit.com/r/ProgrammerHumor/comments/b2lx9v/javascript_at_its_finest/

동등 연산자 ( == : Equal Operator )

해당 연산자는 비교 연산자로 "A == B" 와 같은 형식으로 A와 B를 비교합니다.

해당 연산자는 각 A와 B의 자료형이 같지 않아도 같아지도록 변환한 후 엄격 비교를 수행하는 역할을 합니다.

만약 각 A, B가 모두 객체라면 이 A와 B가 같은 내부 참조를 바라보고 있는지를 체크합니다.

기본데이터 타입(Primitive DataType) 동등 비교

자 우리는 동등연산자의 이론적인 내용을 보았습니다.

이 이론에서 기본데이터 타입을 동등연산자로 비교를 할때 가장 중요한 내용은 "자료형이 같이 않아도 같아지도록 변환한 후 엄격 비교 수행" 입니다.

아직 잘 모르시겠다면, 백문이 불여일소스!!!

소스를 한번 보면서 알아볼까요?

위 소스에서 알 수 있듯이

문자열로 되어져있는 "1" 혹은 "0" 같은 데이터와 숫자 1과 0 데이터가 같다는 것을 알 수 있습니다.

왜 그럴까요?

아까 위에서 말씀 드렸다시피,

동등 연산자 같은 경우는 자료형이 같지 않아도 자료형이 같아지도록 변환한 후

엄격비교를 수행하는 연산자 입니다.

그렇기 때문에 데이터 타입이 달라도 true가 뜰 수 있는 이유입니다.

하지만 '1 == "true"', '0 == "false"' 같이 문자열이 값과 다른경우는 false가 뜨게 됩니다.

그러면 문자열 true를 숫자로 변경하면 1과 같다고 생각하는 분들이 많을겁니다.

하지만 같지 않습니다. 아래사진을 먼저 볼까요?

위에 대한 해답은 이 사진으로 해결이 가능할 것 같습니다.

1 == NaN이 같을 순 없죠

(사실 NaN은 어떠한 값과도 같을수 없습니다. 해당 부분은 아래에서 다시 설명 드리겠습니다)

참조데이터 타입(Reference DataType) 동등 비교

저희는 기본 데이터타입에서의 동등비교를 알아보았습니다.

이제는 참조 데이터타입의 동등비교를 알아보도록 하겠습니다.

이 참조데이터 타입에서 중요한 내용은 "같은 내부 참조를 바라보고 있는지를 체크"라는 문구입니다.

참조데이터 타입은 기본적으로 특정 메모리를 참조합니다.

만약 C언어를 공부하셨던 분이시라면, 포인터 주소로 생각하시면 편하십니다.

아직 이해가 잘 안갈꺼라고 생각합니다.

소스를 한번 보도록 하죠.

위 소스를 보면 각 객체와 배열 함수들을 초기화 하고 초기화한 데이터의 동등 비교를 수행합니다.

이 참조 데이터타입 동등 비교는 기본 데이터타입에 비해 비교적 간단합니다.

그냥 메모리 참조가 같은지 아닌지를 판단하면 되기 때문입니다.

그래서 같은 데이터 값을 가지고 있는 a와 b를 d와 e, g와 h는 false가 나오고

a가 참조하는 메모리를 c가 카피한 후 a == c를 실행했을 때 true가 나옵니다.

일치 연산자 ( === : Strict Equal Operator )

이 일치 연산자는 위의 동등 연산자처럼 형변환을 해서 같은지까지 확인하지 않습니다.

그냥 자료형 변환없이 비교 대상이 엄격한 기준으로 같은지를 비교하기 때문입니다.

물론 위 내용은 기본 데이터타입에 적용되는 이야기 이며

참조 데이터타입 같은 경우는 동등연산자와 일치연산자 둘다 결과는 같습니다.

예제를 한번 보도록 하겠습니다.

이 일치 연산자는 크게 어렵지 않아 기본데이터 타입과 참조 데이터타입을 같이 사용해 보았습니다.

어떠신가요? 잘 이해가 되시나요?

기본 데이터 타입 같은 경우는 값은 물론이고 데이터 타입까지 맞아야만 true를 반환해 줍니다.

하지만 데이터 타입이 틀린경우는 가차없이 false를 반환하죠

참조 데이터 타입은 위 동등 데이터와 같이 참조 메모리의 위치가 같은지를 체크하기 때문에 동등연산자와 같은 결과를 반환합니다.

동등연산자 vs 일치연산자 차이

자 여기까지 따라오셨으면 이 동등연산자와 일치연산자의 차이를 어느정도 알 수 있을것입니다.

그럼 한번 정리해 보도록 하겠습니다.

자체 제작

동등연산자 ( == : Equal Operator )

비교데이터의 타입을 같은 타입으로 강제 변환하여 값을 비교하는 연산자

일치 연산자 ( === : Strict Equal Operator)

비교데이터의 타입과 값이 맞는지를 비교하는 연산자

NaN(Not a Number)은 어떠한 데이터와도 비교를 할 수 없다!!!

맞습니다. 말 그대로 NaN(Not a Number)은 어떠한 데이터와도 비교할 수 없는 값 입니다.

심지어 NaN == NaN 이 두개도 false로 나오게 됩니다.

사실 왜 이렇게 되는지는 아직 정확히 잘 모르겠다.

그래도 찾아본 것을 설명하자면

컴퓨너 연산에서 NaN은 부동 소수점 연산에서 사용되는에 부동 소수점 숫자에 대한 IEEE 754 규격은 NaNs이 같지 않기 때문이라고 합니다.

(이게 정확한지는 나도 잘... 아시는 분 있으면 알려줘요 ㅠㅠ)

마무리

오늘은 동등연산자와 일치연산자에 대해서 알아보았습니다.

사실 실무에선 동등연산자보단 일치연산자를 많이 사용합니다.

왜냐하면 유지보수하기도 좋고, 코드의 직관성을 높여주는 등 다양한 이점이 있기 때문입니다.

그래서 자바스크립트에서도 일치연산자를 사용하는것을 권장합니다.

그렇기 때문에 이 글을 보는 개발자 분들도 동등연산자 보단 일치 연산자를 쓰시길 권장 드리며,

어느정도 동등연산자와 일치연산자의 차이는 알아두면 좋기 때문에 이 포스팅을 훑어본다는 느낌으로 보시길 바랍니다.

만약 포스트에 문제가 있거나 틀린부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

TDZ(Temporal Dead Zone)이란?

방현준 — Sun, 19 Jul 2020 01:56:37 +0900

TDZ(Temporal Dead Zone) 란?

먼저 let과 const가 왜 호이스팅이 되는지를 알기 전에,

이 TDZ에 의미에 대해서 알아보도록 하겠습니다.

TDZ(Temporal Dead Zone) 란, 한글로 직역하자면 일시적인 사각지대란 뜻입니다.

이 일시적인 사각지대는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 TDZ(Temporal Dead Zone) 라고합니다.

변수 선언의 3단계

자 사실 TDZ는 위의 내용으로 모든것을 설명할 수 있습니다.

하지만 여전히 잘 모르겠습니다... 좀 더 깊게 들어가 볼까요?

javascript에서의 변수는 위의 사진처럼 선언, 초기화, 할당이라는 3가지 단계의 걸쳐서 생성됩니다.

선언 단계(Declaration phase) : 변수를 실행 컨텍스트의 변수 객체에 등록하는 단계를 의미합니다. 이 변수 객체는 스코프가 참조하는 대상이 됩니다.
초기화 단계(Initialization phase) : 실행 컨텍스트에 존재 하는 변수 객체에 선언 단계의 변수를 위한 메모리를 만드는 단계 입니다. 이 단계에서 할당된 메모리에는 undefined로 초기화 됩니다.
할당 단계(Assignment phase) : 사용자가 undefined로 초기화된 메모리의 다른 값을 할당하는 단계 입니다.

여태까지 저희는 var혹은 let/const를 그냥 사용하였지만

사실은 위 3가지 단계를 거쳐서 생성되는 것 이었습니다.

그리고 var와 let/const의 차이는 이 3가지 단계의 순서에 차이가 존재합니다.

먼저 var 변수의 라이프사이클을 알아보도록하겠습니다.

위 사진은 var 키워드 변수의 라이프 사이클 입니다.

var 키워드 변수는 변수 선언전에 선언 단계와 초기화 단계를 동시에 진행합니다.

그래서 javascript는 실행 컨텍스트 변수 객체의 변수를 등록하고 메모리를 undefined로 만들어 버립니다.

그렇기 때문에 변수를 선언하기 전에 호출을 해도 undefined로 호출이 되는 호이스팅이 발생하는 것 입니다.

그렇다면 let의 라이프 사이클을 한번 봐보도록 하겠습니다.

let으로 선언된 변수는 var 키워드와는 다르게 선언단계와 초기화 단계가 분리되어서 진행이 됩니다.

그렇기 때문에 실행 컨텍스트에 변수를 등록했지만,

메모리가 할당이 되질 않아 접근할 수 없어 참조 에러(ReferenceError)가 발생하는 것 이고,

이것을 보고 우리가 호이스팅이 되질 않는다!! 라고 오해할 수 밖에 없었던 것 입니다.

그럼 우리가 처음 말했던 TDZ에 대해서 다시한번 알아보도록 하겠습니다.

TDZ는 스코프의 시작 지점부터 초기화 시작 지점까지의 구간을 말합니다.

어때요 이제는 위 말이 잘 이해가 가실거라 생각이 듭니다.

즉, let 또한 선언전, 실행 컨텍스트 변수 객체에 등록이 되어 호이스팅이 되지만,

이 TDZ 구간에 의해 메모리가 할당이 되질 않아 참조 에러(ReferenceError) 발생하는 것 입니다.

참고로 function 키워드 함수는 아래 사진과 같이 변수선언 3단계를 동시에 진행해 버립니다....

마무리

오늘은 TDZ(Temporal Dead Zone)에 대해서 알아보았습니다.

만약 포스트에 문제가 있거나 틀린부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

2020년 카카오 페이 서류, 과제, 1차 면접 후기

방현준 — Thu, 9 Jul 2020 02:07:13 +0900

최근 카카오페이에서 경력 개발자를 공개채용이 올라왔습니다. 저 또한 꽤 오랫동안 프론트엔드 개발을 해왔던 만큼, 이번 공개채용에 지원하였고 결과는 기술면접의 문턱을 넘지 못하고 떨어졌지만 면접까지 갈 수 있었던 경험이었기에 로그를 남겨보겠습니다.

전형 소개

위 사진에서 볼 수 있듯이 해당 공채는 총 4단계로 이루어져 있습니다.

서류전형 > 과제전형 > 1차 기술면접 > 2차 인성면접

이번 카카오페이 공개채용에서 가장 돋보였던것은 공개채용을 1달내로 끝낸다는 것 이었습니다. 경험해 본 결과 정말 엄청난 속도로 진행이 됩니다. 준비할 시간이 많이 부족하다는 단점도 있지만, 그만큼 빨라서 기다림의 미학을 안느껴도 된다는 장점이 있었습니다.

서류전형

서류전형은 자신의 인적사항과 경력사항, 그리고 지원동기를 써서 제출하는 방식이었습니다.

저는 따로 경력기술서가 존재했기에 경력사항을 하나하나 타이핑하지 않고 경력기술서를 첨부하여 제출을 하였고,

지원동기 또한 카카오페이가 추구하는 이념과 맞추어 작성하였습니다.

사실 이러한 전형에서 중요한 것은 자신의 경력이라고 생각했기에 경력 어필을 특히 열심히 했던것 같습니다.

그리고 바로 그 다음날 결과는 합격!!!

당연한 이야기지만, 적부전형이 아니기 때문에 이 전형에서 떨어지는 사람도 있었습니다.

(아는 지인이 떨어졌음....ㅠㅠ)

과제전형

두번째 전형은 과제전형이었습니다.

저는 프론트엔드 개발 직군으로 지원하였기에 프론트엔드 개발과 관련된 과제가 나왔습니다.

예전 전형들을 보면 서버 개발도 같이 나온걸로 보이는데 이번 공채에선 그냥 생 프론트엔드 개발이었습니다.

기간은 총 3일이었고, 그 기간이 목금토였습니다.

문제는 프론트 개발은 그렇게 어렵지 않았습니다만, 라이브러리나 프레임워크에 의존하는 사람들은 꽤 어려웠을만한 문제이기도 했습니다.

사실, 제가 개발한 과제를 올려놓고 싶기도 한데, 문제 유출이니 그건 자제하기로 하고,

약간의 문제 유형에 대해서만 말해보자면

바닐라 자바스크립트를 잘 다루는지 확인
웹팩을 잘 다루는지 확인
유닛 테스트를 잘 하는지 확인

이 3가지를 확인하고 싶어하는 듯한 느낌이 나는 과제였습니다.

저는 과제기간중 토요일에 결혼식이 있어서 어떻게든 목금안에 다 풀고 제출하였고,

결과는 다행히도 합격!!!

1차 기술면접

세번째 과정은 기술면접과 코드리뷰 전형이었습니다. 처음 판교역에 도착한 후 카카오페이 층에 딱 도착을 했을 무렵 꽤 많은 인원의 카카오페이 직원들이 다과나 탁구 등을 즐기는 것을 보았습니다. 그러한 문화의 "와 역시!! 카카오!! 이름에 걸맞는 문화구나!!" 하고 감탄을 받으며 면접 대기방에 입장하였습니다.

선물 내용물

면접 대기는 직군별로 1명씩 4명이 대기하고 있었고,

담당자의 호명에 따라 면접의 참여한 선물이라며 조그마한 봉투를 주고 면접장에 입장하였습니다.

면접은 지원자 1 : 면접관 3으로 약 1시간 30분정도 면접을 진행하였습니다.

처음 40분 정도는 기술면접으로 소모되었는데

주로 자바스크립트의 기초와 심화, 리액트와 관련된 내용, 회사에서 진행한 프로젝트 질문 등이 주를 이뤘습니다.

특히 자바스크립트에 대해서 빠삭하게 알아야 대답할 수 있는 질문들이 많아서 대략 40프로정도의 질문에 대해 답변을 하지 못했습니다.

그 후 50분 정도를 코드리뷰에 소모했습니다.

코드리뷰 방식은 자신이 제출했던 과제에 대해서 설명하는 것인데, 이 부분에서도 기습적으로 이건 왜이렇게 짰는지, 다른 더 좋은 방법이 있다면 어떤것이 있는지 등을 물어봅니다.

그 후 결과는 탈락 ㅠㅠ

하지만 면접을 진행하면서 제가 부족했던 부분과 좀 더 공부가 필요한 부분을 알게되었고,

결과는 탈락했지만, 면접 분위기는 좋았기에 나쁘지 않은 경험이었다고 생각했습니다.

마무리

이번 2020 카카오페이 공채는 아쉽게도 기술면접에서 떨어졌지만,

나중에 더 좋은 인연으로 연이 닿았으면 좋겠다고 생각했습니다.

만약 궁금한 사항이나, 질문이 있다면 댓글을 달아주세요

감사합니다.

자바스크립트 호이스팅(Hoisting)이란?

방현준 — Sun, 5 Jul 2020 23:16:16 +0900

함께보면 좋은 글

2020/07/19 - [프로그래밍 언어/Javascript] - TDZ(Temporal Dead Zone)이란?

오늘은 자바스크립트에 호이스팅(Hoisting)에 대해서 알아보도록 하겠습니다. 사실 이 호이스팅이란 ECMA 2016 이상 부터는 let과 const를 권장해서 사실 변수 호이스팅이 크게 의미는 없습니다. 하지만 함수는 아직 이 호이스팅이라는 개념이 적용되고, 자바스크립트를 주로 사용하는 회사에서 면접 질문으로 자주 나오는 개념이기 때문에 알아둬서 나쁠거 없는 개념이라고 생각합니다. 사실 그렇게 어렵지도 않습니다....ㅎ

그럼 한번 알아보도록 할까요?

호이~스팅

호이스팅(Hoisting)이란?

호이스팅(Hoisting)은 사전적 의미로 끌어 올리기 라는 의미를 가지고 있는 단어이며, 실제로 하는 일도 사전적 의미와 동일합니다. 모든 선언(var, function)들을 어느 위치에 호출하던지 간에 자바스크립트(Javascript)는 그 선언들을 맨 위로 끌어올립니다.

변수에서의 호이스팅(Hoisting)

먼저 변수 선언은 ECMA 2016 이전과 이후로 나뉘어 집니다. 왜냐하면 ECMA 2016이전에는 var를 많이 사용하였고 ECMA 2016 이후로는 let과 const를 사용하였기 때문입니다. 그럼 이 var와 let, const를 사용하여 호이스팅에 대해서 알아보도록 하겠습니다.

See the Pen 호이스팅 예시1 by HyeonJun, Bang (@noogoonaa) on CodePen.

소스를 한번 보겠습니다.

var로 선언된 변수는 undefined가 출력되고 let과 const는 에러가 발생하게 되어 catch로 빠지게 됩니다.

왜 이런 현상이 발생할 까요?

위 사진을 보면 var hoi1 이라는 변수가 try 위로 화살표 표시가 되어 있죠? 즉, var hoi1이라는 변수는 호이스팅이 발생하여 자바스크립트가 미리 hoi1이라는 메모리를 자바스크립트 최 상단에 만들어 놓게 되는것 입니다. 그래서 console.log(hoi1)이 hoi1이라는 메모리를 접근할 수 있고 undefined를 출력할 수 있는것 입니다.

그럼 왜 let과 const는 호이스팅이 발생하지 않아 에러가 발생했을 까요?

var는 전역적으로 사용되어지는 변수이지만 let과 const는 기본적으로 정의 된 블록 내에서만 유효한 변수라서 그렇습니다.

그렇기 때문에 let과 const는 호이스팅이 발생하지 않아 let, const 변수를 이전에 호출하면 에러가 발생합니다.

사실, 이건 비밀이지만... let과 const는 호이스팅이 발생하긴 합니다...

하지만 이번 포스팅에선 따로 다루지 않겠습니다.

만약 궁금하시면 링크를 통해 확인해주세요 ^,,,,,,^

너무 복잡해서 머, 머리가 몹시 아파....

함수에서의 호이스팅(Hoisting)

자 그럼 이제 함수에서의 호이스팅을 한번 알아보도록 하겠습니다.

자바스크립트에서는 함수 선언식과 함수 표현식이라는 두가지의 함수 선언이 가능합니다. 하지만 함수 선언식은 호이스팅이 발생되고 함수 표현식은 호이스팅이 발생되지 않습니다. 먼저 소스를 한번 봐 볼까요?

See the Pen 호이스팅 예시2 by HyeonJun, Bang (@noogoonaa) on CodePen.

위 예제에서 볼 수 있듯이

함수 선언문은 호이스팅이 발생하여 실행이 되는것을 확인할 수 있습니다.

하지만 함수 표현식에서는 실행이 되지 않고 에러가 발생하여 catch로 빠지게 됩니다.

왜 이런 현상이 발생할까요?

자 사진을 보면 금방 이해하실수 있습니다.

함수 선언문은 이름에서 알 수 있다시피 함수를 미리 선언해 놓는 것 이므로 함수가 호이스팅 되어 자바스크립트 최 상단에 올라가게 됩니다.

하지만 함수 표현식인 var func2는 그저 변수에 함수를 담는 것 이므로 자바스크립트는 var func2에 대한 변수 메모리만 만들어 놓게 되는것 입니다.

그래서 console.log(func2)는 위 변수 호이스팅 처럼 undfined가 출력되는것이고 console.log(func1)은 함수 자체가 출력되는 것 입니다.

호이스팅(Hoisting)에 우선순위

이 호이스팅도 우선순위가 존재합니다. 먼저 소스를 봐보도록 하겠습니다.

See the Pen 호이스팅 예시3 by HyeonJun, Bang (@noogoonaa) on CodePen.

자 같은 이름의 변수와 함수를 순서를 바꿔서 선언했을 때 변수를 먼저 선언하든 함수를 먼저 선언하든 함수 호이스팅이 먼저 발생하게 됩니다. 그 후 변수를 만나 변수에 데이터를 넣는 것 입니다.

변수 선언 > 함수 선언문

즉, 다시 말해서 우선 순위가 위와 같이 변수 선언 보다 함수 선언이 느린것 입니다. 변수 선언이 더 빠르기 때문에 먼저 호이스팅 되고 함수가 그것을 덮어 씌우는 것 이지요

그 후 선언 이후에 실행되는 변수의 값들이 덮어 씌워져 문자열이 출력되게 됩니다.

어때요? 잘 이해가 가시나요?

마무리

오늘은 호이스팅에 대해서 알아보았습니다.

만약 포스트에 문제가 있거나 틀린부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

자바스크립트 익명 함수(anonymous function) 기명 함수(named function)의 차이

방현준 — Sat, 4 Jul 2020 01:02:16 +0900

함께보면 좋은 글

자 오늘은 자바스크립트에서 사용되는 익명함수와 기명함수 또는 무명함수와 선언적 함수라고도 하는 이 두 함수의 차이에 대해 알아보도록 하겠습니다.

익명함수(Anonymouse Function)

자 첫번째로 익명함수에 대해 알아보도록 하겠습니다. 이 익명함수 또는 무명함수같은 경우는 따로 사용자가 함수를 만들 때 이름을 지정하지 않고 변수 혹은 그냥 호출만으로 선언할 수 있는 함수 입니다. 간단한 코드를 봐보겠습니다.

See the Pen Anonymouse Function by HyeonJun, Bang (@noogoonaa) on CodePen.

위 코드와 같이 이런식으로 사용이 가능합니다. 비록 익명함수 같은경우는 func라는 이름을 가지고 있지만. func는 그저 함수를 가지고 있는 변수에 불과하므로 이름을 가지고 있다고는 말 할 수 없습니다.

기명함수(Named Function)

기명함수는 사용자가 이름을 지정한 함수로, 선언적 함수라고도 부르는 함수입니다. 이 기명 함수란 것도 코드를 한번 살펴 볼까요?

See the Pen 기명함수 by HyeonJun, Bang (@noogoonaa) on CodePen.

위 코드와 같이 실행이 가능합니다.

익명함수(Anonymouse Function)와 기명함수(Named Function)의 차이

그럼 이 두개의 차이점은 무엇일까요? 이 두 함수는 브라우저가 읽는 순서의 차이가 있습니다.

익명함수 같은 경우는 브라우저가 런타임(RunTime)에 동적으로 선언되는 함수입니다.

기명함수 같은 경우는 브라우저가 런타임(RunTime) 이전에 선언되는 함수입니다.

잘 이해가 안가시나요? 한번 아래 코드를 한번 보도록 하겠습니다.

See the Pen 익명함수 기명함수의 차이 by HyeonJun, Bang (@noogoonaa) on CodePen.

어떤가요? 둘다 같은 이름으로 선언하고 호출했을 때 실행되는 함수는 둘다 무명함수 이지요?

이렇듯, 익명함수가 기명함수 이후에 실행이 되므로 익명함수가 실행되게 되는것 입니다.

어때요? 간단하죠?

(사실 이 또한 동작방식이 호이스팅과 연관이 있습니다. 하지만 이 포스팅에서는 따로 다루지 않고 호이스팅 포스팅, TDZ 포스팅에서 따로 다루도록 하겠습니다.)

그냥 두 함수의 차이는 런타임 이전에 실행되느냐, 아니면 런타임 이후에 실행되는냐로 나누면 됩니다.

마무리

오늘은 기명함수와 익명함수의 차이에 대해서 알 수 있었습니다.

만약 포스트에 문제가 있거나 틀린부분이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

[프로그래머스][Javascript] 멀쩡한 사각형

방현준 — Wed, 10 Jun 2020 01:53:37 +0900

문제 설명

가로 길이가 Wcm, 세로 길이가 Hcm인 직사각형 종이가 있습니다. 종이에는 가로, 세로 방향과 평행하게 격자 형태로 선이 그어져 있으며, 모든 격자칸은 1cm x 1cm 크기입니다. 이 종이를 격자 선을 따라 1cm × 1cm의 정사각형으로 잘라 사용할 예정이었는데, 누군가가 이 종이를 대각선 꼭지점 2개를 잇는 방향으로 잘라 놓았습니다.

그러므로 현재 직사각형 종이는 크기가 같은 직각삼각형 2개로 나누어진 상태입니다. 새로운 종이를 구할 수 없는 상태이기 때문에, 이 종이에서 원래 종이의 가로, 세로 방향과 평행하게 1cm × 1cm로 잘라 사용할 수 있는 만큼만 사용하기로 하였습니다.

가로의 길이 W와 세로의 길이 H가 주어질 때, 사용할 수 있는 정사각형의 개수를 구하는 solution 함수를 완성해 주세요.

제한사항

W, H : 1억 이하의 자연수

입출력 예

W	H	result
8	12	80

입출력 예 설명

입출력 예 #1

가로가 8, 세로가 12인 직사각형을 대각선 방향으로 자르면 총 16개 정사각형을 사용할 수 없게 됩니다. 원래 직사각형에서는 96개의 정사각형을 만들 수 있었으므로, 96 - 16 = 80 을 반환합니다.

문제 설명

그림을 한번 살펴봅시다.

3 X 1 의 사각형 일 경우 3개의 사각형을 지나게 됩니다.

3 X 2 사각형일 경우 4개의 사각형을 지나게 됩니다.

3 X 3 사각형 일 때는 3개 의 사각형을 지나게 됩니다.

자!!! 이제 어떠한 규칙인지 아시겠나요?

저는 솔직히 처음엔 이게 어떠한 규칙인지 사실 몰랐습니다.

(만약 이 규칙을 알아 차리셨다면 대단합니다. 부럽네요)

그래서 구글의 힘을 빌려 해당 블로그에서 힌트를 얻었고 그것을 바탕으로 설명 드리겠습니다.

사실은 저러한 대각선이 지나는 사각현 갯수를 구하는 공식이 따로 있다고 합니다.

(링크 참고)

그 공식은

사각형의 가로 + 사각형의 세로 - (사각형의 가로, 세로 최대공약수)

입니다.

즉,

W + H - (W, H의 최대 공약수)

라는 것이지요.

자 그럼 이제 이 최대공약수는 어떻게 구해야 할까요?

최대공약수를 구할때는 유클리드 호제법이라는 방식을 사용하면 됩니다.

유클리드 호제법을 잘 모르겠다구요?

그렇다면 예를 들어 설명해 보죠

예를들어 3과 5의 최대 공약수를 구한다고 생각해 봅시다.

3의 약수는 [ 1, 3 ]

5의 약수는 [ 1, 5 ]

입니다.

그렇기 때문에 둘의 공통 약수 중 가장 큰수는 1입니다.

그렇다면 이 1이라는 수를 어떻게 구해야 할까요?

그것은 바로 유클리드 호제법을 사용하여 구현할 수 있습니다.

아래 그림을 보시죠

유클리드 호제법은 W 와 H를 나눈 값의 나머지가 0이 나올때 까지 반복하여 0이 나올 경우 0이 나올 수 있었던 H를 반환하는 행위 입니다.

혹시 모르니 그림에 대한 설명을 드리자면 아래와 같습니다.

3 % 5 의 나머지가 3이므로 W에 5를 넣고 H에 3을 넣어 나머지를 구합니다.
5 % 3 의 나머지가 2 이므로 W에 3를 넣고 H에 2을 넣어 나머지를 구합니다.
3 % 2 의 나머지가 1 이므로 W에 2를 넣고 H에 1을 넣어 나머지를 구합니다.
2 % 1 의 나머지가 0 이므로 H인 1을 반환합니다.

어때요 이해가 가시나요?

그래도 이해가 안가신다구요?

그렇다면 코드로 한번 보시죠.

// 유클리드 호제법을 이용한 최대 공약수 구하기
function gcd(w, h) {    // 처음 W와 H를 받습니다.

    // W와 H의 나머지를 구합니다.
    const mod = w % h;

    // 만약 나머지가 0일 경우 H를 반환합니다.
    if (mod === 0) {
        return h;
    }

    // 만약 0이 아닐경우 W에 H를 넣고 H에 나머지인 mod를 넣어 해당 함수를 다시 호출해 줍니다.
    return gcd(h, mod);
}

어때요, 잘 이해가 가시나요?

이렇게 gcd를 구했으면 해당 문제는 다 해결된 것 입니다.

위에서 설명했듯이

W + H - (W, H의 최대 공약수)

이 공식을 사용하면 되기 때문입니다.

소스코드

// 유클리드 호제법을 이용한 최대 공약수 구하기
function gcd(w, h) {    // 처음 W와 H를 받습니다.

    // W와 H의 나머지를 구합니다.
    const mod = w % h;

    // 만약 나머지가 0일 경우 H를 반환합니다.
    if (mod === 0) {
        return h;
    }

    // 만약 0이 아닐경우 W에 H를 넣고 H에 나머지인 mod를 넣어 해당 함수를 다시 호출해 줍니다.
    return gcd(h, mod);
}


function solution(w, h) {
    // 최대 공약수를 구해줍니다.
    const gcdVal = gcd(w, h);

    // 공식에 맞춰 사용
    return w * h - (w + h - gcdVal);
}

console.log(solution(8, 12))

마치며

이번 문제는 공식을 몰랐다면 아예 풀지 못하는 문제였고,

Level 2 치고는 꽤 어려웠습니다만,

소스코드는 진짜 심플 합니다.

아직 제가 미숙하단것을 많이 느끼는 문제네요...

만약 문제가 잘못되었거나, 질문이 있으신 분들은 댓글을 남겨주세요

감사합니다.

[프로그래머스][Javascript] 기능개발

방현준 — Tue, 9 Jun 2020 21:36:12 +0900

문제 설명

프로그래머스 팀에서는 기능 개선 작업을 수행 중입니다. 각 기능은 진도가 100%일 때 서비스에 반영할 수 있습니다.

또, 각 기능의 개발속도는 모두 다르기 때문에 뒤에 있는 기능이 앞에 있는 기능보다 먼저 개발될 수 있고, 이때 뒤에 있는 기능은 앞에 있는 기능이 배포될 때 함께 배포됩니다.

먼저 배포되어야 하는 순서대로 작업의 진도가 적힌 정수 배열 progresses와 각 작업의 개발 속도가 적힌 정수 배열 speeds가 주어질 때 각 배포마다 몇 개의 기능이 배포되는지를 return 하도록 solution 함수를 완성하세요.

제한 사항

작업의 개수(progresses, speeds배열의 길이)는 100개 이하입니다.
작업 진도는 100 미만의 자연수입니다.
작업 속도는 100 이하의 자연수입니다.
배포는 하루에 한 번만 할 수 있으며, 하루의 끝에 이루어진다고 가정합니다. 예를 들어 진도율이 95%인 작업의 개발 속도가 하루에 4%라면 배포는 2일 뒤에 이루어집니다.

입출력 예

progresses	speeds	return
[93,30,55]	[1,30,5]	[2,1]

입출력 예 설명

첫 번째 기능은 93% 완료되어 있고 하루에 1%씩 작업이 가능하므로 7일간 작업 후 배포가 가능합니다.
두 번째 기능은 30%가 완료되어 있고 하루에 30%씩 작업이 가능하므로 3일간 작업 후 배포가 가능합니다. 하지만 이전 첫 번째 기능이 아직 완성된 상태가 아니기 때문에 첫 번째 기능이 배포되는 7일째 배포됩니다.
세 번째 기능은 55%가 완료되어 있고 하루에 5%씩 작업이 가능하므로 9일간 작업 후 배포가 가능합니다.
따라서 7일째에 2개의 기능, 9일째에 1개의 기능이 배포됩니다.

/* 남은 시간을 가져옵니다. */
function getLeftTime(progresse, speed) {
    return Math.ceil((100 - progresse) / speed);
}

function solution(progresses, speeds) {
    var answer = [];

    // 프로그래스가 없을 경우를 처리해 줍니다.
    if (progresses.length <= 0) return [];

    // 남은 시간들을 정리해 줍니다.
    const ledtTimes = progresses.map((progresse, idx) => getLeftTime(progresse, speeds[idx]));

    let temp = 1;
    let prev = ledtTimes[0];
    for (let i = 1; i < ledtTimes.length; i++) {
        let curr = ledtTimes[i];
        if (prev >= curr) {
            temp += 1;
        } else {
            answer.push(temp);
            prev = curr;
            temp = 1;
        }
    }
    answer.push(temp);

    return answer;
}

console.log(solution([93, 30, 55], [1, 30, 5]));

마치며

이번 시간엔 프로그래머스에 Level 2 수준의 문제였습니다.

Level 2 치곤 꽤 쉬운 문제였습니다.

하지만 소스코드가 좀 길기 때문에 더 짧게 쓸 순 없을까 라고 고민했던 문제였습니다.

만약 문제가 잘못되었거나, 질문이 있으신 분들은 댓글을 남겨주세요

감사합니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (6) - APK 빌드 및 설치하기

방현준 — Fri, 22 May 2020 08:50:04 +0900

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 시리즈

자 이번 포스팅에서는 저희가 만든 앱의 APK를 추출하고,

저희의 폰에 설치하는 방법에 대해서 알아보도록 하겠습니다.

APK 빌드하기

먼저 [프로젝트 루트 디렉토리] 에서 [명령 프롬프트]를 열어줍니다.

그 후 아래 명령어를 입력해 줍니다.

flutter build apk --split-per-abi

그럼 위 사진과 같이 APK 빌드 완료 출력이 나옵니다.

자 그럼 결과물이 잘 나왔는지 확인해 볼까요?

[프로젝트 디렉토리] - [build] - [app] - [outputs] - [apk] - [release]

로 이동하면 아래 사진에 빨간 네모칸에 결과물이 생성되게 됩니다.

이것으로 APK를 빌드하였습니다.

기기에 APK 설치

자 이제 APK를 생성하였으니 APK를 테스트 해 볼까요?

먼저 컴퓨터와 안드로이드 기기와 연결합니다.

그 후 프로젝트 루트 폴더로 이동한 다음 아래 명령어를 입력합니다.

flutter install

자 이제 기기를 확인해 보면 자신이 만든 앱이 정상적으로 설치가 된 것을 확인할 수 있습니다.

마무리

자 이번 포스팅에선 Flutter 앱에 APK를 생성 및 설치하는 방법에 대해서 알아보았습니다.

만약 포스트에 문제가 있거나 모르는 것이 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (5) - App Bundle 빌드하기

방현준 — Thu, 21 May 2020 06:45:53 +0900

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 시리즈

자 이번에는 앱 번들을 빌드해 보도록 하겠습니다.

사실 앱을 빌드하는 방식은 두가지가 있는데,

첫번째는 앱 번들 방식이며 두번째는 APK 방식입니다.

하지만 구글 플레이 스토어에서는 앱 번들을 이용하여 빌드한 방식을 추천하고 있으므로

이번 포스팅에서는 앱 번들을 이용한 빌드 방법을 소개해 보도록하겠습니다.

앱 번들 빌드

사실 앱 번들 빌드 방식은 엄청 간단합니다. 하지만 이 과정에서 오류가 많이 발생합니다.

이번 포스팅에서는이 오류가 발생하였을 때 해결하는 방법까지 같이 보도록 하겠습니다.

먼저 커맨드라인에서 [프로젝트 루트] 위치로 이동합니다.

그 후 아래 커맨드를 입력합니다.

flutter build appbundle

그럼 아래와 같은 사진처럼 결과가 나옵니다.

이것으로 앱 번들 빌드를 완료하였습니다.

어때요 엄청 간단하지 않나요??

그럼 제가 했던 삽질기를 같이 알아보도록 하겠습니다.

첫번째 삽질 - 런처 아이콘 확장자 오류

처음 앱 번들 빌드 커맨드를 입력했을 때,

이상한 오류가 발생하였습니다.

그 오류가 바로 밑과 같은 오류 입니다.

PS D:\programming\flutter\oneday_oneggang> flutter build appbundle
                                                                        
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-hdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-hdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: file failed to compile.


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: file failed to compile.


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 9s

위 오류는 런처 아이콘의 확장자 때문에 발생하는 오류 입니다.

일전에 저희는 런처 아이콘을 app icon generator라는 사이트를 통해서 만들었습니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (1) - 런처 아이콘 만들기

같이보면 좋은 글 2020/03/31 - [프로그래밍 언어/안드로이드] - 안드로이드 Google Play Store 개발자 계정 등록 방법 2020/05/16 - [프로그래밍 언어/안드로이드] - OpenJDK 14.0.1 설치하는 법 새로 생성된 Fl..

noogoonaa.tistory.com

하지만 해당 사이트는 런처 아이콘을 생성할 때, 이미지 확장자를 .png라고 생성합니다.

그리고 저희는 그대로 그 .png 아이콘을 그대로 넣었습니다.

하지만 이렇게 넣으면 앱 번들 빌드 시 위와같은 오류가 발생하게 됩니다.

그렇기 때문에 우리는 .png 아이콘들을 아래 사진과 같이 확장자를 .PNG로 전부 바꿔야 합니다.

이렇게 하면 위 오류가 해결이 되는것을 알 수 있습니다.

두번째 삽질 - key.properties storeFile 경로 오류

이번 삽질은 key.properties에서 발생한 오류 입니다.

먼저 오류 내용을 봐 보겠습니다.

Removed unused resources: Binary resource data reduced from 192KB to 191KB: Removed 0%

FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:validateSigningRelease'.
> Keystore file 'D:\programming\flutter\oneday_oneggang\android\app\C:Usersbhj28key.jks' not found for signing config 'release'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 3s
* What went wrong:
Execution failed for task ':app:validateSigningRelease'.
> Keystore file 'D:\programming\flutter\oneday_oneggang\android\app\C:Usersbhj28key.jks' not found for signing config 'release'.

* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 1m 3s

자 감이 잡히나요?? 그렇습니다.

key.jks 파일의 위치 경로가 비정상적이기 때문에 발생했던 오류 입니다.

해결 방법은 [android] - [key.properties] 경로로 이동합니다.

그 후 key.properties 파일 내용중 storeFile의 경로를 C:/Users/USERNAME/key.jks 에서C:\\Users\\USERNAME\\key.jks 로 변경해주세요

이렇게 하면 위 오류가 해결이 되는것을 알 수 있습니다.

마무리

오늘은 Flutter 앱 배포 그 다섯번째 앱 번들 빌드 방법을 알아보았습니다.

혹시 잘 안되는 부분이 있거나 포스트에 문제가 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (4) - 매니페스트 및 빌드 구성 검토하기

방현준 — Wed, 20 May 2020 08:00:19 +0900

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 시리즈

이번 포스팅에서는 AndroidManifest 파일과 빌드 구성을 검토하는 방법에 대해 알아보도록 하겠습니다.

이러한 작업이 필요한 이유는 개발자가 앱을 배포하는 과정에서 실수가 있을 때,

배포가 완료된 상태에서는 그 실수 수정이 쉽지 않기 때문입니다.

그럼 시작하도록 하겠습니다.

AndroidMenifest 검토하기

먼저 우리는 AndroidMenifest를 검토하도록 하겠습니다.

[android] - [app] - [src] - [main] - [AndroidManifest.xml]

해당 경로로 이동합니다.

그 후 빨간색 네모 박스를 중점으로 실수한 부분이 없는지 확인합니다.

특히 아래 내용을 잘 확인해 보도록 합니다.

앱의 이름이 정확한지
User Permission에서 필요한 것만 있는게 확실한지

build.gradle 검토하기

두번째로 우리가 할 것은 build.gradle을 검토하는 것 입니다.

[android] - [app] - [build.gradle]

해당 경로로 이동합니다.

이번에도 빨간색 네모 박스를 중점으로 확인합니다.

특히 아래 내용에 이상이 없는지를 확인합니다.

applicationId는 고유해야 합니다. 그렇기 때문에 꼭 확인을 해주시길 바라며 배포 시 변경이 불가능합니다.
versionCode & versionName에서 내부 앱 버전 번호를 지정하고, 문자열 형태로 명시하시길 바랍니다.
minSdkVersion & targetSdkVersion에서 최소 API 레벨과 개발 대상 버전으로 지정한 지정 API 레벨을 명시하세요.

마무리

이번 포스팅에서는 build.gradle과 AndroidManifest를 검토하는 방법에 대해서 알아보았습니다.

혹시 잘 안되는 부분이 있거나 포스트에 문제가 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (3) - Proguard 사용하여 앱 난독화 및 압축하

방현준 — Tue, 19 May 2020 08:00:21 +0900

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 시리즈

자 이번 포스팅에서는 Proguard를 사용하여

앱을 난독화 하고, 압축을 통해 크기를 줄이는 방법에 대해서 알아보도록 하겠습니다.

이러한 작업을 통해 우리는 APK의 크기를 줄이고 리버스 엔지니어링으로부터 코드를 보호할 수 있습니다.

Proguard 구성하기

먼저 [android] - [app] - [proguard-rules.pro] 란 파일을 생성해 줍니다.

그 후 아래 코드를 [proguard-rules.pro]에 추가해 줍니다.

## Flutter wrapper
-keep class io.flutter.app.** { *; }
-keep class io.flutter.plugin.**  { *; }
-keep class io.flutter.util.**  { *; }
-keep class io.flutter.view.**  { *; }
-keep class io.flutter.**  { *; }
-keep class io.flutter.plugins.**  { *; }
-dontwarn io.flutter.embedding.**

이 설정은 Flutter 엔진 라이브러리를 보호합니다.

다른 라이브러리(예. Firebase)를 보호하기 위해서는 추가적으로 규칙을 작성해야합니다.

앱 난독화 및 크기 축소 사용하기

해당 작업을 위해 [android] - [app] - [build.gradle] 파일에 들어가서

buildTypes {

란 코드를 찾아 아래 코드같이 변경해 줍니다.

android {
    buildTypes {
        release {
            signingConfig signingConfigs.release

            minifyEnabled true
            useProguard true

            proguardFiles getDefaultProguardFile('proguard-android.txt'), 'proguard-rules.pro'
        }
    }
}

이제 해당 설정을 통해 Flutter 엔진 라이브러리를 난독화 및 압축을 할 수 있게 되었습니다.

만약 Firebase같은 다른 라이브러리를 보호하기 위해서는 추가적인 규칙이 있을 수 있습니다.

마무리

오늘은 Flutter 앱 배포 그 세번째 Proguard를 사용한 난독화 및 압축 작업을 알아보았습니다.

혹시 잘 안되는 부분이 있거나 포스트에 문제가 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (2) - 앱 서명하기

방현준 — Mon, 18 May 2020 08:00:31 +0900

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 시리즈

Google Play 스토어에 출시하기 위해서는 반드시 앱에 디지털 서명을 해야 합니다.

만약 디지털 서명을 하지 않을 시 Google Play 스토어에 배포를 할 수 없으므로 해당 포스팅을 참고하여

앱에 디지털 서명을 하시길 바랍니다.

keystore 만들기

그런 다음 아래 명령어를 입력합니다.

(참고로, 경로 부분에 USER_NAME을 컴퓨터 이름으로 변경한 후 실행시킵니다.)

# MAC / LINUX
keytool -genkey -v -keystore ~/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

# Windows
keytool -genkey -v -keystore c:/Users/USER_NAME/key.jks -keyalg RSA -keysize 2048 -validity 10000 -alias key

그럼 아래와 같이 전자 서명에 들어갈 항목을 입력하는 부분이 나오게 됩니다.

해당 질문에 각각 맞게 입력을 해줍니다.

각 질문의 대한 내용은 아래와 같습니다.

Q > What is your first and last name? 당신의 첫번째와 마지막 이름은 무엇인가요?
A > Hong GilDong
Q > What is the name of your organizational unit? 당신의 부서의 이름은 무엇인가요?
A > NooGooNaa
Q > What is the name of your organization? 당신의 조직 이름은 무엇인가요?
A > NooGooNaa
Q > What is the name of your City or Locality? 당신의 도시 이름은 무엇인가요?
A > Gyeyang-gu
Q > What is the name of your State or Province? 당신의 지역 이름은 무엇인가요?
A > Incheon-si
Q > What is the two-letter country code for this unit? 당신의 국가 코드를 입력해 주세요
A > 82

그럼 key.jks라는 파일이 C:\Users\USER_NAME 디렉토리에 존재하는 것을 확인할 수 있습니다.

이렇게 Keystore를 만들게 되었습니다.

- 삽질 1

처음 Keytool을 사용하려고 하니 아래와 같은 오류가 발생하였습니다.

keytool : 'keytool' 용어가 cmdlet, 함수, 스크립트 파일 또는 실행할 수 있는 프로그램 이름으로 인식되지 않습니다. 이름이 정확한지 확인하고 경로가 포함된 경우 경로가 올바른지 검증한 다음 다시 시 도하십시오. 
위치 줄:1 문자:1 
+ keytool -genkey -v -keystore c:/Users/bhj28/key.jks -keyalg RSA -keys ... 
+ ~~~~~~~ 
           + CategoryInfo : ObjectNotFound: (keytool:String) [], CommandNotFoundException 
           + FullyQualifiedErrorId : CommandNotFoundException

해당 오류는 JDK가 설치가 안되어 있어서 발생하는 오류로 JDK를 설치해 주면 해당오류가 해결 됩니다.

아래 링크를 참고하여 JDK를 설치해 줍니다.

OpenJDK 14.0.1 설치하는 법

자 오라클의 JDK가 유료가 되면서 많은 사람들이 OpenJDK를 사용하고 있습니다. OpenJDK는 무료이기 때문에 사람들이 많이 사용하는 것 인데요. 여기 들어온 여러분들은 설치법이 궁금해서 온것을 알

noogoonaa.tistory.com

그러면 아래 사진과 같이 정상적으로 실행이 되는것을 확인할 수 있습니다.

앱에서 Keystore를 참조할 수 있도록 설정하기

앱을 빌드할 때 앱이 Keystore를 참조해야하므로 우리는 안드로이드에 특정 명령어를 입력해야 합니다.

먼저 배포할 앱 프로젝트 폴더에 접근한 후 [android] 폴더에 [key.properties] 이라는 파일을 생성해 줍니다.

그 후 아래에 내용을 [key.properties]에 입력해 줍니다.

storePassword=<password from previous step>
keyPassword=<password from previous step>
keyAlias=key
storeFile=C:\\Users\\User_Name\\key.jks

이 key.properties 파일은 개인적으로 보관하고 있어야 합니다.

공개된 저장소에 업로드 하면 안됩니다.

Gradle에서 서명 구성하기

Android에 Gradle에서도 해당 key.properties 파일에 접근할 수 있도록 설정해 줍니다.

[android] - [app] - [build.gradle] 로 들어가,

먼저 속성파일에서 keystore를 가져올 수 있도록 아래 코드를 입력해 주시길 바랍니다.

(주석을 읽으면서 입력하세요)

// build.gradle에서 해당 코드를 검색합니다.
android {

// 해당 코드를 추가해 줍니다.
def keystoreProperties = new Properties()
def keystorePropertiesFile = rootProject.file('key.properties')
if (keystorePropertiesFile.exists()) {
    keystoreProperties.load(new FileInputStream(keystorePropertiesFile))
}

// 검색 된 코드
android {

그리고 아래 코드 또한 입력해 주시가 바랍니다.

// build.gradle에서 해당 코드를 검색해 줍니다.
buildTypes {

// 해당 코드를 입력해주세요
signingConfigs {
    release {
        keyAlias keystoreProperties['keyAlias']
        keyPassword keystoreProperties['keyPassword']
        storeFile file(keystoreProperties['storeFile'])
        storePassword keystoreProperties['storePassword']
    }
}

// 검색된 코드
buildTypes {

이제 앱을 빌드할 때 자동으로 key 파일을 불러올 수 있습니다.

마무리

자 이번 포스팅에서는 앱에 디지털 서명을 하는 방법에 대해서 알아보았습니다.

혹시 잘 안되는 부분이 있거나 포스트에 문제가 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 (1) - 런처 아이콘 만들기

방현준 — Sun, 17 May 2020 03:00:16 +0900

Flutter로 개발한 앱 플레이스토어(Play Store)에 배포하기 시리즈

새로 생성된 Flutter 앱의 아이콘은 기본 런처 아이콘으로 설정되어있습니다.

그렇기 때문에 플레이스토어에 배포할 시 기본 런처 아이콘을 변경해 줄 필요성이 존재합니다.

이번편은 런처 아이콘을 추가하는 방법에 대해서 알아보도록 하겠습니다.

런처 아이콘 만들기

App Icon Generator

Generate icons and images for mobile apps, android and iOS. No need to upload or download. Works on your browser

appicon.co

먼저 위 링크에 접속합니다.

위 사이트를 이용하면 앱 아이콘을 만드는 것에 대한 공수를 줄일 수 있습니다.

처음 접속하면 위 사이트로 접속하게 됩니다. 그럼 저 빨간색 네모칸에 원하는 앱 아이콘 사진을 넣어주도록 합니다.

이렇게요, 그럼

그럼 위 사진 처럼 사진이 보여지게 됩니다. 이제 오른쪽에 스위치 버튼중에서 자신이 원하는 플랫폼에 맞춰 설정해 줍니다. 이번 포스트는 안드로이드를 타겟으로 하기 때문에 안드로이드만 스위칭 해줬습니다.

그런 다음 Generate를 눌러주면,

요렇게 다운로드가 되어집니다. 그럼 압축을 풀어보도록 하겠습니다.

자 요렇게 아이콘 이미지가 나오게 되었습니다.

그럼 android 파일로 들어가 보도록하겠습니다.

어디서 많이 본 적이 있는 폴더 구조 아닌가요? 그렇습니다. 안드로이드에 res파일 구조와 같습니다.

이 폴더 안에는 각 사이즈에 맞는 아이콘들이 들어가 있습니다. 이것을 Flutte 프로젝트에 있는 안드로이드 res 폴더에 넣어주면 됩니다.

Flutter 프로젝트에 안드로드 파일 구조는 아래와 같습니다.

D:\<프로젝트 루트>\android\app\src\main\res

어때요 똑같죠? 요 경로에 각 폴더에 맞춰 아이콘들을 넣어주면 됩니다.

요렇게요, 그리고 다 넣었으면 앱을 빌드 시켜보면

어때요 잘 들어갔죠?

이것으로 앱 아이콘은 변경되었습니다.

중요!!!

우리가 사용한 App Icon Generator라는 사이트는 .png라는 확장자로 이미지를 생성합니다.

하지만 확장자가 .png일 경우 앱 번들링 시 아래와 같은 에러를 뱉어냅니다.

PS D:\programming\flutter\oneday_oneggang> flutter build appbundle
                                                                        
FAILURE: Build failed with an exception.

* What went wrong:
Execution failed for task ':app:mergeReleaseResources'.
> Multiple task action failures occurred:
   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-hdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-hdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: file failed to compile.


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-mdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxxhdpi\ic_launcher.png: AAPT: error: file failed to compile.

   > A failure occurred while executing com.android.build.gradle.internal.tasks.Workers$ActionFacade
      > Android resource compilation failed
        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: failed to read PNG signature: file does not start with PNG signature.

        D:\programming\flutter\oneday_oneggang\android\app\src\main\res\mipmap-xxhdpi\ic_launcher.png: AAPT: error: file failed to compile.


* Try:
Run with --stacktrace option to get the stack trace. Run with --info or --debug option to get more log output. Run with --scan to get full insights.

* Get more help at https://help.gradle.org

BUILD FAILED in 9s

그렇기 때문에 .png 확장자를 .PNG로 변경해 줍니다.

마무리

오늘은 Flutter 앱 배포 그 첫번째 런처 아이콘을 만들어서 앱에 추가하는 방법까지 알아보았습니다.

혹시 잘 안되는 부분이 있거나 포스트에 문제가 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.

OpenJDK 14.0.1 설치하는 법

방현준 — Sat, 16 May 2020 18:45:13 +0900

자 오라클의 JDK가 유료가 되면서 많은 사람들이 OpenJDK를 사용하고 있습니다.

OpenJDK는 무료이기 때문에 사람들이 많이 사용하는 것 인데요.

여기 들어온 여러분들은 설치법이 궁금해서 온것을 알기 때문에,

사족은 그만하고 바로 설치법으로 넘어가 보도록하겠습니다.

OpenJDK 사이트 접속

OpenJDK

Download and install the open-source JDK for most popular Linux distributions. Oracle's free, GPL-licensed, production-ready OpenJDK JDK 14 binaries are at jdk.java.net/14; Oracle's commercially-licensed JDK 14 binaries for Linux, macOS, and Windows, bas

openjdk.java.net

위 링크에 접속합니다.

그럼 위와 같은 사진에 사이트로 접속하게 됩니다.

빨간 네모칸 부분에 링크를 클릭해 주세요

그럼 위와 같은 사진에 사이트로 오게 됩니다.

여기서 각자 환경에 맞게 설치를 하시면 되는데 저는 Windows 환경 이기 때문에 Windows 환경으로 깔도록 하겠습니다.

만약 다른 버전을 원하시는 분은 위 사진에 네모칸을 참고해 주시길 바랍니다.

자 이제 설치가 완료되면 하나의 압축파일이 보여질 것 입니다.

압축을 해제해 줍니다.

그럼 위와 같은 파일 구조가 나오게 됩니다.

여기서 [C:\Program Files] 폴더로 이동합니다.

그 후 [C:\Program Files] 폴더 안에 [openJDK]라는 폴더를 하나 만듭니다.

요렇게 말이죠

그 후 [우리가 압축을 해제한 OpenJDK] 파일을 [C:\Program Files\openJDK] 폴더에 추가해 줍니다.

그럼 [C:\Program Files\openJDK\jdk-14.0.1] 경로가 되어집니다.

자 이제 jdk 설치는 끝났습니다.

하지만 이게 끝은 아닙니다.

환경변수를 설정해 줘야 하기 떄문이죠

JDK 환경변수 설정하기

우리는 JDK 폴더를 경로로 환경변수를 추가하여

CMD에서 굳이 JDK 파일 경로로 이동하지 않아도 명령어 하나로만 사용이 가능하도록 설정해 주어야 합니다.

일단 Windows에서 폴더를 검색하는 부분에 [제어판] 이라고 입력 후 제어판에 들어가도록 합니다.

그럼 아래 사진과 같이 [제어판]에 항목들이 나오는데 여기서 [시스템]으로 들어가도록 합니다.

[시스템] - [고급 시스템 설정]으로 들어갑니다.

그 후 [고급 탭] - [환경변수]로 들어갑니다.

그럼 아래 사진과 같은 창이 하나 뜨는데 [시스템 변수] - [새로만들기]를 클릭해 줍니다.

그 후 아래와 같이 입력을 해줍니다.

변수 이름	JAVA_HOME
변수 값	C:\Program Files\openJDK\jdk-14.0.1

변수 값은 제 기준으로 적었기 때문에 사용자가 이동시킨 JDK에 위치로 설정해 주시면 됩니다.

그 후 확인 버튼을 누르면 아래와 같이 [JAVA_HOME]이 들어간 것을 확인할 수 있습니다.

자 이제 JDK bin파일의 PATH를 설정해 주도록 하겠습니다.

아래 사진과 같이 [시스템 변수] - [Path]를 더블클릭 해 줍니다.

그럼 아래 사진과 같이 환경변수를 편집할 수 있는 창이 뜨는데

여기서 [환경 번수 편집] - [새로 만들기]버튼을 클릭해 줍니다.

그 후 [%JAVA_HOME%\bin] 이라고 입력해 줍니다.

참고로 [%JAVA_HOME%]는 우리가 시스템 변수에서 설정해 놓은 jdk 경로 변수를 사용하겠다는 의미 입니다.

이제 [환경 변수 편집 창]과 [시스템 속성 창]에서 [확인] 버튼을 클릭해 줍니다.

자 이렇게 해서 우리는 JDK 환경변수 작업까지 완료 하였습니다.

JDK 실행해 보기

이제 JDK가 잘 실행 되어지는지 확인해 볼까요??

[Windows 검색창]에 [CMD]라고 입력한 후 명령 프롬프트를 실행시킵니다.

그 후 아래 커맨드를 입력해 주시면 정상적으로 입력해 주시면

잘 동작하는것을 확인하실수 있습니다.

# java 버전 확인
java -version

# java compiler 버전 확인
javac -version

만약 java를 찾을수 없다는 오류가 뜨면 위 과정을 정상적으로 하지 않았다는 의미이므로

빼먹은건 없는지 잘 확인해 보시기 바랍니다.

마무리

자 이것으로 openJDK 설치 방법을 알아보았습니다.

혹시 잘 안되는 부분이 있거나 포스트에 문제가 있다면 댓글을 남겨주시기 바랍니다.

감사합니다.