Journey to Dev

2023-Memoirs

Raadian — Fri, 29 Dec 2023 12:34:56 +0900

서론

검은 토끼의 해가 저물고 있다.

작년은 여러 일로 인해, 몸과 마음이 무너져서 올해는 그냥 마이웨이로 하고 싶은걸 하자라는 심정으로 달리는 걸 목표로 했다.

그 결과, 사고 싶은 것도 사고 먹고 싶은거랑 하고 싶은 것도 하면서 전반적인 만족도가 컸던 해였다.

또한, 인연도 닿아 좋은 직장에서 많은 개발 경험을 익힐 수 있어 정말 운이 좋았다.

2023년에 이룬 것

Vue랑 React 중급 단계까지 올려보기

Vue의 경우, 외주 업무를 여러번 진행하면서 Option API에 대한 전반적인 스킬을 향상한 것 같다.

예시로, deep 셀렉터를 이용한 기존 scoped를 깨트리지 않으면서 스타일링을 하는 방법을 익힌 것과 어느 타이밍에 created와 watch, computed를 사용하는 감각들이 있었다.

다만, Composition API와 SSR(Nuxt)를 접할 기회가 없어 내년에는 기회가 있다면 익혀보고 싶다.

React의 경우 실무에서 다양하게 접한게 행운이라 할 정도로 기회가 많았다.

먼저, 메모이제이션을 통해 함수를 재활용하는 useCallback과 렌더링 값을 재활용하는 useMemo를 적재적소에 이용하는 요령을 깨달아 내 기준에 생각하는 중급 수준의 초입에 다다른 것 같다.

두 번째로, 18버전 이후에 생긴 기능인 부분 렌더링(Suspense)을 통해 Layout Shifting과 같은 렌더링 최적화 문제를 해결하여 좀 더 쾌적한 클라이언트 환경을 서비스 계층에 제공할 수 있었다.

세 번째는, Redux 이외의 전역 상태관리 라이브러리를 접할 수 있었는데 Recoil이라는 것을 통해 좀 더 hooks 친화적인 상태관리를 할 수 있었다.

마지막으로, SSR 프레임워크를 팀단위로 접할 수 있었는데 NextJS를 통해 전반적인 SSR을 익힐 수 있게 되었고 무엇보다 Remix로도 다른 방식의 SSR을 익힐 수 있었다.

MacOS로 개발하기

바야흐로 23년 1분기…

m2 프로의 성능이 m1에 비해 그닥 시원치않아 언제까지고 m3를 기다릴 수는 없기에 m1 프로 막차를 타기로 했다.

다행히 결과는 성공적이었고 전반적인 만족도는 최상이었다.

초반에 windows와 같은 UX에서 좀 헤매긴 했지만 어찌저찌 적응해서 이제는 개발은 거의 MacOS로만 하고 있다.

2023년에 추가로 이룬 것

한 직장에서 1년 재직

나의 20대 생활은 집, 학교, 군대 말고는 한 곳에서 1년 이상 머무른 적이 없었다…

기설과를 전공한 다음 첫 회사에서 항공 부품 QA로 5개월, 그 후 개발자로 전직하여 첫 직장에서는 4개월, 그 다음 직장에서도 4개월…

그 중에서는 내가 고른 결정이랑 자의 반, 타의 반도 있었다.

그래서 내가 잘할 수 있을지 불안감도 있었고 항상 의심하면서 그렇게 스스로 하나하나 계단을 밟은 것 같다.

아직도 내 능력에 확신이 들지는 않지만 늘 하겠다는 의지와 겸손한 마음을 가지면서 나아가고 싶다.

Ruby on Rails 실무 경험

어쩌다보니 Ruby on Rails로 API를 만드는 외주 업무를 받게 되었다.

맨 처음엔 나말고도 여럿이서 맨땅에 헤딩하여 개발을 하게 되었는데 어쩌다보니 나 혼자 개발을 하게 되었다…

불행 중 다행히도 기존 V1에서 V2로 기능을 업그레이드 하는 유지보수 작업이어서 API 기능을 만드는 것에만 집중할 수 있었고, 난이도도 한 기능에 일주일 이하일 정도로 그렇게 어렵지는 않았던 것 같다.

다만, 6개월 이하의 실무 경험이었기 때문에 의미있을정도의 역량은 키우지는 못해 다소 아쉽긴했다.

블록체인 관련 실무 경험

작년 블록체인 업계에서 잠깐이나마 몸 담았지만 본격적인 경험을 쌓기도 전에 회사가 망해… 아쉬움이 많았다.

그런데, 운이 좋게도 올해에는 NFT와 토큰 거래와 같은 이더리움 기반의 기술들을 많이 접할 수 있게 되었고 내년에도 이와 같은 실무 경험을 계속 쌓게 될거 같다.

2023년에 이루지 못한 것

Angular OR Svelte 독학하기

작년에는 이 둘도 배워야 하지 않을까? 싶었지만, 되돌이켜 보니 아직은 후순위로 미뤄도 될거 같다.

이 것보다 우선적으로 배우고 싶은거랑 해야 되는게 많기에…

React Native 독학하기

올해 말 즈음에 Flutter 관련 업무를 토스받다보니, RN을 배우는 것에 대한 중요성이 크게 낮아졌다.

따라서 꼭 필요한 상황이 아니라면 접하지는 않을 것이다.

알고리즘 공부하기

알고리즘과 청소의 공통점은 해야되긴 해야되는데 하기 싫다는 마음인거 같다…

올해도 결국 강의랑 책 한 장도 펴지 못했다.

2024년에 하고 싶은 것

NestJS 실무 접하기

내년에 할 업무에 백엔드로 API를 만드는게 생겼다.

대략적인건 아직 Node.js로 뭘한다는 것만 있어서, 명확하게 정해지진 않았는데 만약 프레임워크 선정을 하는 기회가 생길때 NestJS로 하고 싶다라는 어필을 하고 싶다.

알고리즘 공부하기

어처피 안할거 알지만… 그래도 한 번쯤을 하게 될거 같다.

머신러닝 공부하기

정확히는 사이킷런을 통해 추천 영화 데이터를 출력하는 API를 만드는 토이 프로젝트를 하고 싶다.

예전에 딥러닝을 배웠던 마음가짐으로 임하고 싶다.

오픈 소스 개발 혹은 기여하기

개발 관련 유튜브 영상을 보던 중 흥미를 끌었던 영상 하나가 있었다.

깃허브에서 오픈 소스를 만들던게 우연히 알골리아 개발하는 사람에게 눈에 띄여 소개를 받게 되었고 그 길로 이직을 하게 되었다는 스토리인데(~~물론 영어도 잘해서 갔지만은…~~)

내 스스로 만든 오픈 소스 하나가 다른 사람에게도 영향을 끼칠 수 있고, 그로 인해 다양한 인연을 접할 수 있겠다는 느낌이 확들어 언젠간 좋은 오픈 소스를 만들거나 기여하고 싶다는 마음이 생겼다.

다만, 정확히 어떤 오픈 소스를 할건지는 정하지 못했지만 내년에 윤곽을 잡게 되면 본격적으로 하게 될 예정이다.

마무리하며…

점점 마음이 단단해지는거 같다.

못할거 같은 일이 올해는 간간히 닥쳤는데, 막상 일정이 심하게 딜레이 되는 일도 적었고 어떻게 또 해낸 걸보면 아직도 얼떨떨하다.

다만, 아직까지는 내 운이 좋다는 마음이기에 이게 확신이 들려면 계속 부딪혀야 할거 같다.

그리고 하고 싶은것도 하는게 좋지만 그에 따른 책임도 져야되기에 균형을 맞춰가면서 24년을 보내고 싶다.

[Nextjs] 14버전 정리

Raadian — Mon, 30 Oct 2023 13:01:47 +0900

References

https://nextjs.org/blog/next-14

Turbocharged(Nextjs 컴파일러) 성능 개선

Turbopack을 통한 Nextjs의 컴파일러의 성능이 개선되었다.

local 서버 시작시 기존 대비 최대 53.3% 속도 증가
새로고침시 기존 대비 최대 94.7%의 코드 업데이트 속도 증가

다만, 아직 준비 단계 이므로 향후 안정화가 되면 정식으로 업데이트가 될 예정이라고 한다.

또한, 호환성을 위해 webpack은 계속 지원할 것이라고 한다.

Forms와 Mutations

이번 14버전을 통해 Form과 Mutations의 기능을 좀 더 단순화 했다고 한다.

Server Actions

export default function Page() {
  async function create(formData: FormData) {
    'use server';
    const id = await createItem(formData);
  }
 
  return (
    <form action={create}>
      <input type="text" name="name" />
      <button type="submit">Submit</button>
    </form>
  );
}

Page Router의 경우, React Canaries를 기반으로 구축하여 좀 더 안정적인 서버액션을 포함하는 React의 기능들을 반영하였다.
Caching, Revalidation, Redirectiong 등…
- revalidatePath() / revalidateTag()
  - 캐싱된 데이터를 재검증
- redirect()
  - 다른 경로로 리다이렉션
- cookies()
  - cookie 설정 및 읽기
- useOptimistic()
  - 능동적인 UI 업데이터 처리
- useFormState()
  - 서버의 오류 포착 및 표시
- useFormStatus()
  - 서버를 통한 클라이언트에 로딩 표시

Partial 렌더링(준비중)

기존 Nextjs의 고질적인 문제였던 SSR의 문제(Layout Shifting)에서 나온 솔루션으로

사전에 대략적인 HTML을 먼저 렌더링을 한 뒤 세부사항들을 가져오는 형식으로 성능적인 문제들을 어느정도 해결했다.

그리고 이번 14버전에서는 React의 렌더링을 최적화 하는 기능들을 도입하여 SSR에 맞게 수정했다고 한다.

React의 Suspense을 공식적으로 지원이러한 점을 두어, Suspense 기능을 사용하면 내부에서 정적 HTML Shell이 먼저 제공을 한 뒤 Stream을 통해 추가적인 정보들을 가져오게끔 구현이 되었다고 한다.

/** Suspense 사용시 먼저 정적인 HTML Shell을 제공한다. */

<main>
  <header>
    <h1>My Store</h1>
    <div class="cart-skeleton">
      <!-- Hole -->
    </div>
  </header>
  <div class="banner" />
  <div class="product-list-skeleton">
    <!-- Hole -->
  </div>
  <section class="new-products" />
</main>

/** cookies라는 기능으로 streaming을 통해 ShoppingCart 컴포넌트의 내부 구성 요소를 가져온다. */

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

/** cookies라는 기능으로 streaming을 통해 ShoppingCart 컴포넌트의 내부 구성 요소를 가져온다. */

import { cookies } from 'next/headers'
 
export default function ShoppingCart() {
  const cookieStore = cookies()
  const session = cookieStore.get('session')
  return ...
}

Metadata 개선

페이지의 내용들을 SSR하기 위해 필요한 Metadata들을 꾸미는 기능들이 강력해졌다.

또한, 차단 및 비차단 메타데이터를 분리하여 비차단 메타이터가 Partial 렌더링 된 페이지에 정적 HTML Shell을 제공하는데에 지장을 주지 않도록 개선이 된다고 한다.

다만, 아래의 Metadata의 옵션은 더 이상 사용되지 않아 향 후 버전에서 삭제된다.

viewport
- viewport의 초기 확대 및 축소와 기타 속성들을 설정
colorScheme
- viewport의 지원 모드(light / dark)를 설정
themeColor
- viewport 주변의 클라이언트(Chrome)가 렌더링해야 하는 색상을 설정

대신, 향후 generateViewport라는 기능을 통해 보다 통합된 Metadata의 옵션들을 다룰 예정이라고 한다.

[Javascript] Date 타입 데이터 관리

Raadian — Sat, 4 Feb 2023 14:11:10 +0900

References

https://www.youtube.com/watch?v=CSWc0HYjxEs

https://www.ibm.com/docs/ko/rtw/9.0.0?topic=reference-formatting-parsing-date-time-patterns

https://ohgyun.com/416

https://marsland.tistory.com/530

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

https://tc39.es/proposal-temporal/docs/

개요

Javascript의 경우 Java와 흡사한 문법이 많은 언어이다.

그 중 하나가 Date 타입인데, 이 언어가 생긴 뒤로 날짜 관련 데이터 사용이 어떻게 변화했는지 알아보자.

new Date()

보통 일반적으로 Date 타입을 쓴다면 사용하게 되는 과정으로 Javascript가 생긴 이래로 가장 오래 사용된 문법이다.

// RFC 형식 시간으로 날짜 가져오기
let date1 = new Date(); // Sat Feb 04 2023 12:22:15 GMT+0900 (한국 표준시)
date1.getFullYear(); // 2023
date1.getMonth() + 1; // 2
date1.getDate(); // 4
date1.getTime(); // 1675480935089

RFC 822 : RFC(국제 인터넷 표준화 기구)에서 정한 데이터 규격으로, 자바스크립트 상에선 현지 시간으로 출력이 된다.

// ISO 형식 시간으로 날짜 가져오기
let date1 = new Date().toISOString(); 
console.log(date1); // 2023-02-04T03:22:15.089Z

ISO 8601 : ISO(국제 표준화 기구)에서 정한 데이터 규격으로, 자바스크립트 상에선 국제협정시(UTC)를 기준으로 출력이 된다.

moment.js

Javascript에서 많이 사용 중인 외부 날짜 라이브러리로, 기존 new Date()와 달리 보다 다양한 기능들을 지원한다.

let now = moment().format();
console.log(now); // YYYY-MM-DDTHH:MM:SS+09:00

다만, moment의 경우 Javascript가 지금처럼 자리 잡히기 이전에 만들어진 체계이기 때문에 그만큼 오래된 방식이고 최신 Tree Shaking*에 적합하지 않아 최근 사이트에 맞게 적용하기 어려운 형태이다.

따라서 이러한 이유들로 인해 2020년 10월 6월 이후로 업데이트가 되지 않아 사후지원이 중단되었다.

Tree Shaking : 모듈을 번들링 할 때 사용하지 않는 코드를 정리하여 최적화 하는 과정

Intl

ECMAScript에서 정한 Javascript 내장 라이브러리로, 날짜 출력을 비롯하여 문자, 시간, 날짜비교까지 지원한다.

let datetime = now Date();

let convertIntl = new Intl.DateTimeFormat('kr').format(datetime);
console.log(convertIntl); // YYYY. M. D. (한국 날짜 형식으로 출력)

let customIntl = new Intl.DateTimeFormat('kr', { dateStyle: 'full', timeStyle: 'full' }).format(datetime);
console.log(customIntl); // 원하는 날짜 형식으로 출력

let dDay = now Intl.RelativeTimeFormat().format(-10, 'days');
console.log(dDay); // 지정된 날짜로 부터 시간차 출력

Temporal

향 후, Javascript에 내장 적용 예정인 라이브러리로 최신화 된 Javascript의 생태계에 맞게 다양한 날짜 기능을 제공한다.

let nowDateTime = Temporal.Now.plainDateTimeISO();
console.log(nowDateTime.toString()); // YYYY-MM-DDTHH:MM:SS:ms

let nowDate = Temporal.Now.plainDateISO();
console.log(nowDate.toString()); // YYYY-MM-DD

let nowTime = Temporal.Now.plainTimeISO();
console.log(nowTime.toString()); // HH:MM:SS:ms

let nowCustomDate = new Temporal.PlainDate(2023, 2, 4);
console.log(nowCustomDate.toString()); // 2023-02-04

let now = Temporal.Now.plainDateTimeISO();

now = now.add({ days: 10, months: 3, years: 1 });
console.log(now); // 현재 날짜에 수치를 더함

now = now.subtract({ days: 10, months: 3, years: 1 }); 
console.log(now); // 현재 날짜에 수치를 뺌

now = now.round({ smallestUnit: 'hour', roundingMode: 'floor' });
console.log(now); // 현재 날짜에 반올림

let dDay = Temporal.PlainDateTime.from('2023-12-31T23:59:59');
let now = Temporal.Now.plainDateTimeISO();

let result = dDay.since(now); // 기준날짜에서 현재날짜 시간차 계산

[Javascript] Jest의 기본 개념

Raadian — Mon, 9 Jan 2023 11:08:39 +0900

References

https://jestjs.io/

https://www.daleseo.com/jest-snapshot/

Jest란?

Jest는 테스트 프레임워크로 단순성에 초점을 맞춰 설계되었다.

현재 지원하는 프레임워크 및 라이브러리는 Babel, Typescript, Node, React, Angular, Vue 등이 있다.

Jest가 가진 특성

Zero Config

Jest aims to work out of the box, config free, on most JavaScript projects.

Jest의 경우 여러 자바스크립트 프레임워크 및 라이브러리에 호한 목적으로 설계 되었기 때문에 별도의 설정 과정 없이 사용 할 수 있다.

// 먼저 npm을 통해 Jest를 설치한 후
npm install —save-dev jest

// 별도의 테스트 파일(자바스크립트 확장자 이름 앞에 .test를 붙인다)을 만들고 코드만 작성하면 준비 완료!
function sum(a, b) {
  return a + b;
}
module.exports = sum;

{
  "scripts": {
    "test": "jest"
  }
}

// 이 후엔 터미널로 test 명령어를 실행 한 뒤 CLI에서 원하는 테스트 작업을 수행하면 된다.
PASS  ./sum.test.js
✓ adds 1 + 2 to equal 3 (5ms)

Snapshots

Make tests which keep track of large objects with ease. Snapshots live either alongside your tests, or embedded inline.

Jest의 경우 구현된 기능의 예상 결과를 예측하고자 할 때 이러한 작업과정을 쉽게 할 수 있다.

// 예를 들어 배열 타입을 반환하는 함수를 만들었다 칠때...
const multipleTimesNumbers(getNumber) {
	let arr = [];
	for (let i=0; i<getNumber; i++) {
		arr.push(i);
	}
	
	return arr;
}

export default multipleTimesNumbers;

// 이 후엔 터미널로 test 명령어를 실행 한 뒤 CLI에서 원하는 테스트 작업을 수행하면 된다.
import multipleTimesNumbers as mtns from "./multipleTimesNumbers";

test("Is Correct Three Times?", () => {
	expect(mtns(3)).toMatchInlineSnapshot();
});

Isolated

Tests are parallelized by running them in their own processes to maximize performance.

Jest의 경우 테스트에 초점을 맞추기 위해 별도의 프로세스에서 실행이 된다.(병렬성)

Great API

From it to expect - Jest has the entire toolkit in one place. Well documented, well maintained, well good.

Jest는 test 코드가 직관적으로 설계 되어있어 협업 과정에서 어떠한 기능을 테스트하고자 하는지 빠르게 알 수 있다.

// test 함수 내부의 expect 기능을 통해 기댓값이 무엇인지 알 수 있다.
import multipleTimesNumbers as mtns from "./multipleTimesNumbers";

test("Is Correct Three Times?", () => {
	expect(mtns(3)).toMatchInlineSnapshot();
});

2022-Memoirs

Raadian — Mon, 2 Jan 2023 15:47:54 +0900

주의

내용의 대부분이 작성자의 기억 이므로 일부 미화(?)가 섞여 들어갔을 수도 있습니다.

서론

벌써 2023년 검은 토끼의 해가 밝았다.

2021년 코로나로 인해 여러모로 고통 받았던 나는 2022년 만큼은 건강하게 달려보자… 했지만 어림도 없지, 담석 1cm와 간수치 250 IU/L을 얻고 몇 개월 내내 간 건강에 신경쓰게 생겼다.

개발 커리어는 늘 그렇듯 올해도 기회가 오면 놓치지 않고 잡아보자! 였지만 아직 날개가 덜 핀거 같다. 항상 매의 눈으로 존버가 필요한 시기다…

본론

2022년에 이룬 것

재취업

하긴 했다. 4개월 이지만(…)

좋은 회사에 들어가 드디어 운 없는 내 인생에 빛을 보나 했지만 그건 또 아니었다.

다시 자의 반 타의 반 퇴사 후 한 두 달 간은 내가 꿈을 꾸고 있는 건가 할 정도의 비현실적인 일을 겪었지만 이내 겨우 제정신을 차렸다.

앱개발 독학하기

코핀홀딩스 재직시절 앱 개발 투입 대비 차 Flutter를 독학했다.

비록 실 개발 업무로 이어지지 않았지만 기본적인 앱 개발을 알 수 있었던 것 같다.

GitHub - roqhdehd502/flutter-todo: Flutter를 이용한 미니 프로젝트 입니다.

Flutter를 이용한 미니 프로젝트 입니다. Contribute to roqhdehd502/flutter-todo development by creating an account on GitHub.

github.com

Vue 개발하기

2021년의 나는 나름 Vue 개발을 한 것 같지만, 제대로 개발 현장에 투입되어보니 그냥 수박 겉핥기 수준도 안됐다.

코핀홀딩스 당시 업무 대비 차 Vue3를 처음부터 다시 시작하여 어느새 걸음마 단계를 뗄 무렵 두 프로젝트에 투입이 되었고 비록 사내 프로젝트라 결과물이 남지 않았지만 어느정도 쌓은 실력에 만족하게 되었다.

2022년에 추가로 이룬 것

ELK(Elasticsearch, Logstash, Kibana) 독학

코핀홀딩스 재직시 인원이 없어 백엔드 업무도 겸해야 했던 나는 Java, ELK 파트를 인수인계 받아 진행을 해야했다.

Java는 WebFlux만 스터디하면 됐으니 그렇다 쳤지만 ELK는 완전 몰랐기에 부랴부랴 독학하여 진행을 하였다.

그 과정에서 엘라스틱 서치가 가진 역 인덱스의 매력을 깨닫게 되어 나중에 검색 기능을 만들게 된다면 한 번 도입해보고 싶다.

NextJS 프로젝트 독학 및 개발

22년 10월 경, 이력서는 완성이 됐지만 포트폴리오가 매우 부실하는 걸 깨달은 나는 모자란 하나를 채우기 위해 NextJS 개인 프로젝트를 시작했다.

그 과정에서 CSR(Crient Side Rendering) 이외에 SSR(Server Side Rendering)과 SSG(Static Side Generation)의 매력 또한 느꼈던 것 같다.

GitHub - roqhdehd502/rounded-round: 리액트, Next.js를 기반으로 한 음반 플랫폼 웹 사이트 개인 프로젝트

리액트, Next.js를 기반으로 한 음반 플랫폼 웹 사이트 개인 프로젝트 입니다. Contribute to roqhdehd502/rounded-round development by creating an account on GitHub.

github.com

Atomica 프로젝트 개발 (진행 중)

바야흐로 22년 12월…

개발 직군 서류만 수십번 광탈을 하고 한창 절망에 빠져있을 무렵, 전 직장에 같이 일하셨던 분께 리액트 개발 건의가 들어왔다.

순간 마음 속으로 무언가 주저했지만 찬밥 더운밥 가릴 형편이 아니었다. 나는 바로 하겠다고 답변을 했고 이윽고 리액트 개발과 관련된 테스크가 들어왔다.

맡고 있는 곳은 일본 쪽 기업으로 현지 담당자 분과 협업하면서 진행을 하였고 지금도 진행 중이다.

コワーキングスペースのATOMica（アトミカ）

「多種多様な地域の人々」と「地域のあらゆる願い/相談」を集め、そして繋げるための仕組みを「ソーシャルコワーキング」と名付け、有意義で心躍るような出会いや共創を持続的に生み出

atomica.co.jp

2022년에 이루지 못한 것

취업이 되는 수준으로 알고리즘 실력 끌어올리기

대략 두 세 달은 꾸준히 했으나 별별 핑계로 매너리즘에 빠져서 제대로 못했던 것 같다.

23년도에 하고 싶은 목록을 이룬 다면 N순위로 진행해보고 싶은 사항이다.

GitHub - roqhdehd502/IiCoTe-Practice: 나동빈 저 이것이 코딩 테스트다의 실습 자료물입니다.

나동빈 저 이것이 코딩 테스트다의 실습 자료물입니다. Contribute to roqhdehd502/IiCoTe-Practice development by creating an account on GitHub.

github.com

2023년에 하고 싶은 것

Vue랑 React 중급 단계까지 올려보기

둘 다 기본적인 실전 및 이론은 어느정도 할 줄 알게 된거 같다.

이제 남은 건 **최적화(렌더링 및 메모이제이션 등)**를 얼마나 심도 있게 하느냐 인 거 같은데… 어려운 숙제이지만 꼭 달성하고 싶은 과제이기도 하다.

MacOS로 개발하기

~~탐난다. 맥북 프로가…~~ M3가 올해 출시된다면 무지성으로 지르고, 아니라면 M2라도 지르고 싶다.

Angular OR Svelte 독학하기

React랑 Vue를 했으니… 이제 다음 프론트엔트 프레임워크나 라이브러리를 익힐 차례가 온 거 같다.

욕심 같아선 둘 다 하고 싶지만 선택과 집중으로 하나라도 독학 해보고 싶다.

React Native 독학하기

22년도엔 플러터로 개발을 했다면 올해에는 리액트로 쌓은 경험치를 발판 삼아 이를 앱 개발로 이어가고 싶다.

알고리즘 공부하기

22년도 처럼 빡세게 공부하는 것이 아닌 어느정도 여유있게 공부하고 싶다.

마무리하며…

만약 19년도의 내가 지금의 나를 만날 때 “무슨 개발자가 되었냐?” 라고 묻는다면 나는 어떻게 답할 수 있을지 모르겠다. 그렇기 때문에 아직도 내 개발 실력은 창피하고 남루하게 느껴진다.

다만, 아직도 마음 한 켠 자신감은 남아 있기에 유지가 된다면 올 23년은 그래도 덜 창피한 개발자가 될 수 있지 않을까 생각한다.

늘 불안정 하긴 해도 올해는 내 커리어에 작은 꽃을 피우길 희망한다.

[React] Redux Vs. Recoil

Raadian — Thu, 8 Dec 2022 13:20:45 +0900

References

https://recoiljs.org/ko/

https://velog.io/@katanazero86/redux-recoil-내용-정리

Recoil이란?

React 기반 전역 상태관리 라이브러리로 기존 Context API의 기능적 한계를 보완하기 위한 목적으로 생겼다.

Recoil과 Redux의 차이점

Redux

Redux의 경우 Flux 아키텍쳐 기반으로 데이터 흐름을 가진다.

가장 먼저 Type과 Payload를 가진 Action을 생성하여

이를 Dispatcher에게 전달하고 여러 Action들의 상태 값을 가진 Store에게 전달한 뒤,

Store 내부의 상태 값이 변경되면 View 단에게 업데이트 상황을 알려주어 이를 리 렌더링하는 구조를 가진다.

따라서, 중앙 집중식으로 Store를 관리하여 전역적인 상태 관리가 이루어지기에 프로젝트의 규모가 커질수록 안정적일 수 있으나, 그만큼 불필요한 렌더링 등 성능 이슈가 생길 수도 있다.

Recoil

Recoil의 경우 Atomic 모델 기반의 데이터 흐름을 가진다.

Atoms라는 가장 작은 단위 상태를 지정하여 필요한 컴포넌트가 있을 때만 별도로 구독한 뒤 이를 가져오기만 하여 전역적으로 사용하는 형태이다.

또한, Selectors란 순수 함수를 통해 캐싱하는 기능도 있어 여러 Atoms 와의 조합 등 세부적인 요소를 기대할 수 있다.

따라서, 필요한 상태 값이 있을 때만(구독) 이를 가져와 렌더링을 하는 구조이기에 성능에 이점을 챙길 수 있으나, Redux와 달리 다양한 기능 지원이 아직 부족하기 때문에 안정성을 꾀하기엔 아직 시간이 필요할 것으로 보인다.

[Javascript] Base64 이미지 최적화

Raadian — Thu, 1 Dec 2022 19:46:42 +0900

References

https://ko.wikipedia.org/wiki/베이스64

https://blue-boy.tistory.com/227

https://stackoverflow.com/questions/35940290/how-to-convert-base64-string-to-javascript-file-object-like-as-from-file-input-f/38935990

서론

핵심만 보고 싶으신 분은 하단의 “그래서 어떻게 최적화 할 것인가?” 파트만 보시면 됩니다.

글과 사진을 다채롭게 표현 하고자 할 때 위지윅(WYSIWYG, What You See Is What You Get) 기능이 담긴 텍스트 에디터가 필요한 순간이 있다.

그러나 어느 순간 이미지와 같은 데이터가 포함 된 글을 포스팅 하기 전에 반드시 부딪히는 순간이 있는데 바로, Base64 이다.

Base64란?

위키피디아에선 Base64를 다음과 같이 정의하고 있다.

8비트 이진 데이터(예를 들어 실행 파일이나, ZIP 파일 등)를 문자 코드에 영향을 받지 않는 공통 ASCII 영역의 문자들로만 이루어진 일련의 문자열로 바꾸는 인코딩 방식을 가리키는 개념 (… 후략)

즉, 우리가 접하고 있는 이미지와 동영상과 같은 이진(바이너리) 데이터를 컴퓨터가 인식할 수 있는 **로우 레벨 단계(공통 ASCII 코드 문자)**로 번역된 것을 Base64라 이해하면 편할 것이다.

그런데 Base64가 왜?

우선, ‘Base64가 잘못된 기능은 아니다.’ 라고 짚고 넘어가고 싶다.

왜냐하면 앞서 말했다시피 데이터를 다루는 과정에서 컴퓨터가 이해할 수 있도록 보다 안전한 공통 ASCII 코드 문자 형태로 운용되기 때문이다.

다만, 기존 바이너리 데이터에서 상대적으로 저차원인 Base64로 변환하는 경우 그만큼 더 변환되는 크기가 커질 수 밖에 없다.

이는 곧 DB에 Base64가 그대로 적용된 상태에서 insert가 될 경우 그만큼 부하가 온다는 의미가 되는데 그렇다면, 전 후를 비교하여 데이터가 얼마나 커지는지 한 번 알아보자.

base64 적용 전 / 후

텍스트 에디터에 첨부하고자 하는 이미지의 크기는 다음과 같다.

크기가 10.4KB 인 것을 확인할 수 있다.

그리고 텍스트 에디터에 적용 후, Base64에 적용한 이미지의 크기는 다음과 같다.

확실히 크기가 10.4KB인 전보다 데이터가 커졌음을 알 수 있다.

이처럼 1~2개 아닌 데이터의 경우 당장 체감이 오지 않을 수 있지만 이것이 수십개, 수백개 이상의 규모가 될 경우 상당한 크기의 데이터 규모를 부담할 수 밖에 없다.

그래서 어떻게 최적화 할 것인가?

결국 이러한 문제로 인해 Base64 형태의 데이터를 최적화는 필수 불가결 해지는데 필자는 다음과 같이 추상화 및 구현을 하기로 했다.

주어진 조건

Javascript (예제는 NextJS에서 이루어졌으나 구현 할 코드 대부분이 Plane 자바스크립트 코드)
Google Firebase Storage
Quill Editor

요구사항 및 추상화

1. 텍스트 에디터 작성이 완료되고 submit 클릭 이벤트가 이루어질때 최적화 한다.

로직 단순화 및 파이어베이스 스토리지 파일 업로드 및 다운로드 하는 과정을 최소화 하기 위해서 이다.

2. 텍스트 에디터의 base64 이미지 경로를 탐색하여 배열 A에 담는다.

이후 파이어베이스 스토리지에 저장된 이미지 url로 변경할 때 비교 군으로 쓰기 위해서 이다.

3. base64 이미지를 File 객체의 형태로 변환 후 배열 B에 담는다.

파이어베이스 스토리지에 업로드 및 다운로드 과정을 최적화 하기 위해서 이다.

4. File 객체로 변환한 이미지 이름에 규칙을 부여한다.

파이어베이스 스토리지의 경우, 같은 이름의 파일명이 업로드 될 때 알아서 덮어쓰기가 되는 기능이 있다.
따라서, 이후 텍스트 에디터 내용에 UPDATE 기능이 생길 때 이를 대비할 목적으로 각 이미지 명 마다 규칙을 부여 한다.

5. 파이어베이스 스토리지에 업로드 후 데이터의 URL을 받아 배열 C에 담는다.

이유는 2번과 동일…

6. 기존에 작성한 텍스트 에디터 내용을 탐색 후 배열 A의 요소와 매칭될 때 배열 C의 요소로 변경한다.

적용 전 내용, 비교할 내용 들, 변경할 내용 들을 각 그룹으로 두어
최종적으로 파이어베이스 스토리지에 업로드 된 이미지 URL를 적용한 내용으로 변경을 마친다.

요구사항 및 추상화

1. 작성한 내용 속 base64 이미지 경로 추출 (배열 A)

const findBase64s = (includeBase64) => {
		// 정규식을 이용하여 base64 경로만 추출한다.
    const base64Match = Array.from(includeBase64.matchAll(/<img[^>]+src=["']([^'">]+)['"]/gi));
    return base64Match.map(item => item.pop() || '');
}

// contents: event.htmlValue
const extractBase64s = findBase64s(contents);

2. base64 경로를 File 객체로 변환 (배열 B)

const convertBase64ToFiles = (base64URLs, imageUuid) => {
    let base64ToFiles = [];

    for (let i=0; i<base64URLs.length; i++) {
        const arr = base64URLs[i].split(',');
        const mime = arr[0].match(/:(.*?);/)[1];
        const fileExtension = mime.substring('image/'.length, mime.length);
        const bstr = atob(arr[1]);
        const n = bstr.length;
        const u8arr = new Uint8Array(n);

        while(n--) {
            u8arr[n] = bstr.charCodeAt(n);
        }

        base64ToFiles.push(new File([u8arr], `${imageUuid}_${i}.${fileExtension}`, {type:mime}));
    }

    return base64ToFiles;
}

// imageUuid: 파일명에 규칙성을 부여하기 위해 필자는 Uuid 뒤에 넘버링을 붙이기로 했다
const base64ToFiles = convertBase64ToFiles(extractBase64s, imageUuid);

3. 배열 B를 파이어베이스 스토리지에 업로드 후 downloadURL 가져오기 (배열 C)

/**
* contentsStorageRef 중복코드가 있는데 이건 사전에 함수 scope 밖에 선언하자...
*/

const uploadContentsImages = async (storage, imageFiles, imageUuid, uid) => {
    for (let i=0; i<imageFiles.length; i++) {
        const contentsStorageRef = firebaseStorage.ref(storage, `customercontentsimages/${uid}/${imageUuid}_${i}`);
        await firebaseStorage.uploadBytes(contentsStorageRef, imageFiles[i])
          .then((snapshot) => {
              console.log(`thumbnail images ${i}`, snapshot);
          }).catch((error) => {
              console.log("contents image upload error!", error);
          });
    }
}

const downloadContentsImages = async (storage, imageFiles, imageUuid, uid) => {
    let downloadURLs = [];
    
    for (let i=0; i<imageFiles.length; i++) {
        const contentsStorageRef = firebaseStorage.ref(storage, `customercontentsimages/${uid}/${imageUuid}_${i}`);
        await firebaseStorage.getDownloadURL(contentsStorageRef)
          .then((url) => {
              downloadURLs.push(url);
          }).catch((error) => {
              console.log("contents image download error!", error);
          });
    }
    console.log("downloadURLs", downloadURLs);

    return downloadURLs;
}

await uploadContentsImages(storage, base64ToFiles, thumbnailUuid, contentObj.uid);
const contentImages = await downloadContentsImages(storage, base64ToFiles, thumbnailUuid, contentObj.uid);

4. 기존 내용, 배열 A와 대조 후 base64 경로가 일치하면 배열 C로 변경하기

let afterContents = contents;

for (let i=0; i<base64ToFiles.length; i++) {
    afterContents = afterContents.replaceAll(extractBase64s[i], contentImages[i]);
}

~~되…된다!~~

이 후 개선할 사항

작성한 코드는 어디까지나 텍스트 에디터 내용에 이미지가 들어가 있을 경우에만 작성이 되었다.

따라서, 이미지가 없는 일반 글로만 작성된 경우에도 분기처리를 하여야 한다.

또한, 작성글 업데이트시 파이어베이스 스토리지에 더미 데이터가 남는 경우도 감안을 해야 할 것 같다.

[React] Next.js 레이아웃 설정

Raadian — Wed, 19 Oct 2022 23:14:13 +0900

References

https://logfetch.com/nextjs-multiple-layouts/

개요

Next.js의 경우 기존 React와 달리 별다른 라우터 사전 설정이 필요 없는 장점이 있다.

그로 인해, 레이아웃을 설정하는 방법이 달라지는데 어떻게 해야 하는지 알아보자.

레이아웃 기본 설정

레이아웃 파일 만들기

레이아웃 파일을 생성한 뒤 다음과 같이 구현한다.

/** DefaultLayout.js */
/** 레이아웃 파일 명칭은 자유! */

import { NavigationBar } from '../components/Header/NavigationBar';
import { Footer } from '../components/Footer/Footer';

// children : 해당 레이아웃에 종속될 컴포넌트
export default function DefaultLayout({ children }) {
  return (
      <>
          {/* 이런 식으로 공통되는 구현부와 다르게 해야하는 구현부를 작성한다 */}
          <NavigationBar />
          <div>
              { children }
          </div>
          <Footer />
      </>
  );
}

레이아웃 파일 적용하기

/pages/_app.js 내부에 해당 레이아웃 파일을 적용한다.

/** _app.js */

import '../styles/globals.css'
// 만든 레이아웃 가져오기
import DefaultLayout from '../layouts/DefaultLayout'; 

function MyApp({ Component, pageProps }) {
    return (
        <>
            {/* 이런 식으로 태그를 씌워 레이아웃을 적용한다! */}
            <DefaultLayout >
                <Component {...pageProps} />
            </DefaultLayout >
        </>
    ) 
}

export default MyApp;

이런식으로 공통되는 구현부를 재활용한다!

다양한 레이아웃 설정

이번에는 다양한 레이아웃을 통해 페이지를 다채롭게(?) 만들어보자.

레이아웃 파일 만들기

똑같이 레이아웃 파일을 생성해서 구현한다.

/** EmptyLayout.js */

// 레이아웃 파일마다 props는 공통적으로 적용할 것!
export default function EmptyLayout({ children }) {
  return (
      <>
          <div>
              { children }
          </div>
      </>
  );
}

레이아웃 파일 적용하기

/pages/_app.js 내부에 해당 레이아웃 파일을 적용한다.

/** _app.js */

import '../styles/globals.css'
// 만든 레이아웃 가져오기
import DefaultLayout from '../layouts/DefaultLayout';
import EmptyLayout from '../layouts/EmptyLayout';

// 여러 레이아웃 별로 Key:Value를 설정한다 (Key 명칭은 자유!)
const layouts = { 
    L1: DefaultLayout,
    L2: EmptyLayout,
};

function MyApp({ Component, pageProps }) {
    // 해당 레이아웃 별(Component.layout) 지정된 페이지(children)를 불러온다
    const Layout = layouts[Component.layout] || ((children) => <>{children}</>);

    return (
        <>
            {/* 정의 된 Layout 태그로 레이아웃을 적용 */}
            <Layout>
                <Component {...pageProps} />
            </Layout>
        </>
    ) 
}

export default MyApp;

레이아웃 파일 지정하기

각 페이지마다 원하는 레이아웃을 지정한다.

/** pages/index.js */

import { NewAlbum } from '../components/Main/NewAlbum';
import { PopularContent } from '../components/Main/PopularContent';

// export할 함수명.layout = "_app.js에 지정한 레이아웃 Key 명칭";
Home.layout = "L1";
export default function Home() {

    return (
      <>
          <NewAlbum />
          <PopularContent />
      </>
    );
}

/** pages/auth/signIn.js */

// 이런 식으로 각 페이지마다 원하는 레이아웃을 지정하면 된다!
signIn.layout = "L2";
export default function signIn() {
    return (
        <>
            ...
        </>
    );
}

네비게이션 바가 있는 레이아웃 페이지

네비게이션 바가 없는 레이아웃 페이지

[React] React의 라이프사이클

Raadian — Thu, 13 Oct 2022 15:19:52 +0900

References

https://kyun2da.dev/react/리액트-라이프사이클의-이해/

https://velog.io/@minbr0ther/React.js-리액트-라이프사이클life-cycle-순서-역할

https://react.vlpt.us/basic

서론

React에서 데이터가 업데이트 되는 상황은 기본적으로 4가지이다.

props가 바뀌는 경우
state가 바뀌는 경우
부모 Component가 다시 렌더링 되는 경우
Force Update 기능으로 인해 강제로 다시 렌더링 되는 경우

이러한 이벤트를 원활하게 처리하기 위해선 라이프사이클(Life-Cycle)이 필요한데 React에서는 어떤 방식으로 흘러가는지 기술한다.

React의 라이프사이클 (Hooks)

React의 라이프사이클은 크게 Mounting(생성) ⇒ Updating(변경) ⇒ UnMounting(삭제) 으로 이루어진다.

useState

컴포넌트 내부의 데이터 상태를 관리하는 기능으로 state와 setState의 형식으로 처리된다.

function App() {
    const [number, setNumber] = useState(0);

    // setState를 통한 데이터 변경
    return (
        <button onClick={() => setNumber(number + 1)}>숫자 증가</button>
        <button onClick={() => setNumber(number - 1)}>숫자 감소</button>
    );
}

useEffect

화면이 렌더링 된 후 수행되는 기능으로, 컴포넌트의 최적화를 목적으로 사용된다.

// DOM이 업데이트 될 때 호출
useEffect(() => {}); 

// DOM이 최초로 생성될 때만 호출
useEffect(() => {}, []); 

// 특정 DOM만 최초로 생성될 때 호출, 특정 DOM 중 하나라도 변경되어도 다시 호출
useEffect(() => {}, [DOM 1, DOM 2]);

useEffect의 경우 기존 클래스 형 에서의 componentDidMount와 componentDidUpdate , componentWillUnmoun 기능이 합쳐졌다.

useContext

Context API*를 이용한 상태 값을 가져오는데 사용된다.

const value = useContext(사전에 정의한 Context 기능);

Context API : React에서 전역적으로 상태를 관리하는 API. 과도한 props로 인한 로직 추적의 어려움을 개선해준다.

useReducer

useState와 비슷한 기능으로, 컴포넌트 상에서 업데이트하는 상태 로직을 외부로 분리할 수 있다.

function reducer(state, action) {
    switch (action.type) {
        case 'INCREMENT':
            return state + 1;
        case 'DECREMENT':
            return state - 1;
        default:
            return state;
    }
}

function Counter() {
    const [number, dispatch] = useReducer(reducer, 0);

    const onIncrease = () => {
        dispatch({ type: 'INCREMENT' });
    };

    const onDecrease = () => {
        dispatch({ type: 'DECREMENT' });
    };

    return (
        <div>
            <h1>{number}</h1>
            <button onClick={onIncrease}>숫자 증가</button>
            <button onClick={onDecrease}>숫자 감소</button>
        </div>
    );
}

reducer : 현재 상태와 액션 객체를 파라미터로 받아와서 새로운 상태를 반환해주는 함수

useRef

특정 DOM를 가리킬 때 사용되며 useRef의 .current로 전달된 인자로 초기화된 변경 가능한 ref 객체로 반환한다. 이때, 반환된 객체는 라이프사이클에 따라 유지되어 사라진다.

function InputSample() {
    const [name, setName] = useState('');
    const nameInput = useRef();

    const onReset = () => {
        setInputs(name = '');
        nameInput.current.focus();
    };

    return (
        <div>
            <input
              name="name"
              placeholder="이름"
              value={ name }
              ref={ nameInput }
            />
            <button onClick={ onReset }>초기화</button>
        </div>
    );
}

useMemo

메모이제이션 된 값을 반환하는 기능으로, 이미 연산 된 값을 재활용한다.

// 메모이제이션 된 특정 데이터가 없는 경우 렌더링 될 때마다 다시 계산
useMemo(() => computeExpensiveValue(state), []);

// 메모이제이션 된 특정 데이터가 변경될 때 다시 계산
useMemo(() => computeExpensiveValue(state1, state2), [state1]);

메모이제이션 : 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술

useCallback

메모이제이션 된 Callback을 반환하는 기능으로, 이미 연산 된 함수를 재활용한다.

useCallback(() => { 함수(a, b); },
    [a, b],
);

[Javascript] 데이터 바인딩의 이해

Raadian — Thu, 13 Oct 2022 15:16:06 +0900

References

https://sungjk.github.io/2015/11/22/AngularJS(2).html

https://velog.io/@sunaaank/data-binding

https://medium.datadriveninvestor.com/implementing-two-way-data-binding-without-using-any-framework-703963d00a94

데이터 바인딩이란?

데이터 바인딩(Data Binding)은 제공자(개발자)와 사용자가 접하는 데이터를 동일하게 묶는 기법으로, 자바스크립트 상에서 선언 및 반환한 데이터를 HTML 상에서도 동일하게 보일 수 있게 끔 하는 것이다.

<!DOCTYPE html>
<html>
<head>
    ...
<head>    
<body>
    <div id="sample">변경 전</div>

    <script type="text/javascript">
        let dataSample = document.getElementById('sample');
        /** innerHTML를 통해 '변경 후'라는 데이터 바인딩을 함으로써 html상에서도 같은 데이터로 보여진다  */
        dataSample.innerHTML = '변경 후';
    </script>
</body>
</html>

데이터 바인딩의 종류

단방향 데이터 바인딩

사용자의 입력에 따른 변경 이벤트를 감지하고 이를 업데이트하는 방식이다.

이를 이용한 대표적인 예시가 리액트(React) 라이브러리로, View 내부에서 부모 ⇒ 자식 순으로 업데이트 된 데이터를 전달한 뒤 이를 어플리케이션에게 콜백(Callback) 하는 형태이다.

양방향 데이터 바인딩

Controller(혹은 ViewModel)나 View에서 변경 이벤트가 감지 될 때 상호 간 업데이트하는 방식이다.

이를 이용한 대표적인 예시가 뷰(Vue) 프레임워크로, v-model과 v-on*의 기능을 들 수 있다.

v-model의 경우, Model 상에서 업데이트가 될 때 ViewModel을 거쳐 View와 데이터를 일치시키는 방식이고

v-on의 경우, View 상에서 업데이트가 될 때 ViewModel을 거쳐 Model과 데이터를 일치시킨다.

Vue의 이런 기능을 이유로 MVVM 패턴이라고 일컫기도 한다.