코딩 공부 일지

Goodbye 2024, Hello 2025

Cocoon_ — Thu, 2 Jan 2025 03:18:57 +0900

2024년에 세웠었던 목표

(1) 받는 만큼 일하는 게 아닌 받고 싶은 만큼 일하기
2년간 열심히 일해온 덕분에 올해 성공적으로 이직을 하게 되었다.

(2) 5000 commit 달성하기
전 회사에서는 개인 git 계정으로 개발을 했었기 때문에 2024년에는 이게 가능했었을 수도 있었을 테지만 이직 후 회사일에 집중하게 되면서 집에 와서 따로 개발을 하지 않다 보니 이루기 쉽지 않은 목표가 되었다.

(3) Modern Javascript Deep Dive 책 완독
이 부분도 회사일에 집중하다 보니 개인 공부 시간이 많지 않아 쉽지 않았다.

(4) 건강을 위한 주 3회 운동
야근을 많이 하다 보니 가장 근간이 되는 기초 체력이 중요하다고 크게 느끼게 되었었다. 요즘은 일이 좀 바빠서 주 2회로 30~40분씩 꾸준히 유산소 운동을 하고 있다.

(5) 사이드 프로젝트 미니 거래소 앱 만들기
어쩌다 보니 거래소 도메인으로 다시 돌아오게 되었고(CEX -> WEB3 -> CEX), 회사일에 집중하다 보니 따로 사이드 프로젝트를 할 시간이 없었다.

2024년 회고

2024년 한 해를 한 문장으로 정의하자면 "야근으로 시작해서 야근으로 끝난 한 해"라고 정리할 수 있을 것 같다. 2024년 12월 31일 ~ 2025년 1월 1일 새벽 서비스 점검으로 새해를 회사에서 보냈다. 주변에서는 그러다가 번아웃이 올 것이라고 걱정하는 시선이 많지만 만 3년 차가 다되어 가는 현시점에 아직까지는 일하게는 재밌고 시간도 정말 빨리 가는 것 같다. 아무래도 자기가 하고 싶은 일을 하다 보니 가능한 게 아닌가 싶다. 이 직종이 나와 잘 맞는 직종 같으나 5년 뒤에도 Frontend를 할까 라는 질문에는 잘 모르겠다는 생각이 든다. 지금은 Frontend 가 재밌지만 AI, ML, DL 데이터 분석 업무도 재밌어 보이고 BE도 재밌어 보인다. 그냥 개발 자체가 재밌는 게 아닐까 싶다.

2024년 5월까지 블록체인 스타트업에서 근무를 하면서 WEB3 적인 지식과 스킬들을 배웠고 좋은 동료들과 재밌는 회사 생활을 보냈었다. 특히 자율 출퇴근과 재택이 가능했던 점이 너무나도 좋았다.(실제로는 출근을 선호해서 재택을 많이 하지는 않았다) 그러나 블록체인 업계에서 근무를 하면서 하면서 한국에서의 WEB3 입지나 회사 방향성을 생각했었을 때 내가 생각했던 것과는 좀 다른 부분이 있었고 나의 방향성과는 맞지 않다고 생각되어 이직하는 것을 결심하게 되었다.

채용 공고가 올라온 강남, 성수, 판교에 있는 유니콘 회사들, 시리즈 C 이상 투자를 받은 회사들에 지원을 했었느냐 채용 한파를 직접적으로 겪어보니 정말 쉽지 않았고 좌절도 많이 했었다. 신입, 주니어급 PO가 확실히 줄어들고 서류 탈락 커트라인이 꽤나 높아졌다는 생각이 들었다. 또한 이력서상으로 블록체인 쪽으로 많이 기술되어 있고 지원하는 회사의 도메인에 플러스가 될만한 요소가 없었기 때문은 아닐까 생각을 하였다.

그러나 여러 개의 지원중에 딱 한 군데를 붙게 되었고 그 회사가 현재 재직 중인 CEX이다. 아무래도 커리어가 블록체인 쪽으로 일관성이 있어 합격에 플러스 요소가 되지 않았나 싶다. (여담이지만 사실 블록체인에는 별 관심이 없다... 첫 회사는 붙어서 바로 갔고, 두 번째 회사는 잘 모르고 갔기 때문...)
회사는 이때까지 다녔던 회사 중에서 가장 큰 편이었고, 무엇보다도 같은 포지션 직군이 많고 잘하시는 개발자분들도 많아서 배울 점이 많다는 점이 장점인 것 같다. 작년 4분기에는 Bull market이다 보니 일이 꽤 많이 들어왔고 야근도 많이 했던 것 같다.

연차가 쌓일수록 느끼는 점은 기술적 능력치도 중요하지만 사람과 함께 생활하고 일을 하다 보니 원활한 커뮤니케이션 방식과 협업 스킬이 정말 중요하다는 점이었다. 이전까지는 거의 혼자 또는 두 명이서 일을 같이 하다 보니 크게 못 느낀 부분이었는데 좀 큰 회사에 들어가 보니 이러한 생각을 많이 느끼게 되었다. 아무리 뛰어난 개인의 능력도 팀의 시너지를 따라갈 수 없다는 것을 깨달았고 대규모 프로젝트에서 여러 팀과의 협업, 다양한 이해관계자들과의 소통에 대한 중요성을 새롭게 인식하게 되었다. 신입 때 매번 생각했었던 "팀에 기여할 수 있는 개발자"에 대한 정의가 바뀌게 된 계기가 된 것 같다.

2024년 말에는 4년 동안 살았던 6평 원룸에서 10평 오피스텔로 이사를 가게 되었다. 원하는 지역에 매물이 없어 네이버 부동산을 거의 한 달간 매일 봤었고 동시에 회사 업무하느라 정신없고 집주인은 보증금을 안 주려고 해서 육체적 + 정신적으로 힘들었던 연말이었다. 다행히도 잘 해결되었고 집도 이전보다 넓어져서 행복한 나날을 보내고 있다. 직전 집은 바닥이 장판이어서 바퀴 달린 의자로 오래 앉아있으면 장판이 울고 밀리고 했었는데, 이번에는 마루 바닥인 집으로 이사 와서 그 부분이 정말 마음에 드는 것 같다.

2025년 다짐, 목표

매년 새해 목표를 포스팅하다 보니 역시 사람은 쉽게 변하지 않고 같은 실수를 반복한다는 것을 깨달았다.
목표는 거창하지 않고 소소하면서 매우 현실적인 것들이 좋을 것 같다.

(1) 팀에 기여할 수 있는 개발자 되기
새로운 회사에서 적응하고 신뢰가 쌓이고 업무 효율이 나오는 시기가 입사 후 1년 차로 생각한다. 2024년 5월 27일에 입사를 하여 7개월 정도가 지났지만 아직 업무적으로 배우고 좀 더 알아가야 할 부분이 많이 있는 것 같다.
나의 장점은 업무를 대하는 태도와 책임감이다. 그러한 점을 바탕으로 6개월 뒤에는 더 큰 가치를 창출하는 팀원으로 발전하기 위해 노력할 것이다.

(2) 주 2~3회 꾸준한 유산소 운동
운동 1시간이 결론적으로 1시간 반 이상의 효율성을 더 벌어다 준다고 생각을 한다.
좀 더 많은 시간 안정적으로 야근을 하기 위해서 꾸준하게 운동을 하자. (나처럼 생각하는 사람이 또 있으려나...)
2024년에 했던 그대로 하면 될 것 같다. (주말에 종종 등산 가는 것도 도움이 될 것 같다.)

(3) 사이드 프로젝트 개발하기
개발적으로 성장하기 위해서는 회사일도 중요하지만 외부적으로 새로운 기술도 써보고 다른 환경에서 개발을 하는 것이 회사에서는 채울 수 없는 부분을 채우는데 도움이 된다고 생각한다. 작년에 개발했었던 React UI library인 Lite UI의 주간 다운로드 수 1000회 달성하기를 목표로 할 것이다.

[2024년 회고록]

Goodbye 2023, Hello 2024

2023년도 회고록 Work 2023년 3월 20일에는 역삼역과 강남역 사이에 위치한 새로운 회사로 이직을 하게 되었다. 첫 회사였던 이전 회사는 딱 1년을 채우고 퇴사를 했었고 현재 회사에서 근무한 지는 1

cocoon1787.tistory.com

저의 첫 오픈소스를 소개합니다.

Cocoon_ — Wed, 15 May 2024 15:47:10 +0900

안녕하세요. 3년차 프론트엔드 개발자 김준영이라고 합니다.

고객들의 돈이 오가는 서비스를 개발하다 보면 서버에서 값을 받아 aggregation 하여 화면에 금액이나 수량을 표시해 주는 상황이 많이 생기게 됩니다. 자바스크립트에서는 0.1+0.2 !== 0.3인 문제가 있기 때문에 이와 같은 정확도 문제를 해결하기 위해서 bignumber.js, big.js, decimal.js와 같은 정밀 계산 라이브러리를 많이 사용하게 됩니다. 하지만 실무에서 해당 라이브러리들을 사용해 보면서 조금 아쉬운 포인트들이 있었고, 아래와 문제들을 좀 더 개선한 오픈소스를 만들어보자는 생각이 들었습니다..!

- 계산할 때마다 new 생성자를 사용해야 하는 점을 어떻게 개선할 수 있을까?
- 0.000001보다 작은 수는 왜 string type의 지수표현식으로 반환될까? (ex : new Big(0.0000001).valueOf() => "1e-7")
- add, sub, mul, div와 같은 메서드들에서 single parameter가 아닌 rest parameter 방식으로 값을 받게 할 수는 없을까?

이러한 포인트들을 개선하기 위해서 big.js를 활용하여 @ma9pie/math라는 계산 유틸 라이브러리를 개발하였습니다. 내부적으로 계산은 big.js로 처리하고 DX(Developer Experience)에 좀 더 중점을 두었습니다.

Install

npm i @ma9pie/math

Use

import { math } from '@ma9pie/math';

math(1).add(2).sub(3).value(); // 0
math(10).add(5).sub(7).mul(2).div(4).value(); // 4

value
value() => string
returns calculated value as string.

math(1000).value(); // '1000'
math('1e7').value(); // '10000000'
math(1e-7).value(); // '0.0000001'

toNumber
toNumber() => number
returns calculated value as number.

math(1000).toNumber(); // 1000
math('1e7').toNumber(); // 10000000
math(1e-7).toNumber(); // 1e-7

add
.add(n) => Big n : number | string | BigInt
returns the current value added by n.
if the n is invalid, it is treated as 0.

0.1 + 0.2, // 0.30000000000000004
math(0.1).add(0.2).value(); // '0.3'
math(1).add(2).add(3).value(); // '6'
math(1).add(2, 3, 4).value(); // '10'

sub
.sub(n) => Big n : number | string | BigInt
returns the current value subtracted by n.
if the n is invalid, it is treated as 0.

0.3 - 0.1, // 0.19999999999999998
math(0.3).sub(0.1).value(); // '0.2'
math(1).sub(2).sub(3).value(); // '-4'
math(1).sub(2, 3, 4).value(); // '-8'

mul
.mul(n) => Big n : number | string | BigInt
returns the current value multiplied by n.
if the n is invalid, it is treated as 0.

0.6 * 3, // 1.7999999999999998
math(0.6).mul(3).value(); // '1.8'
math(2).mul(2).mul(2).value(); // '8'
math(2).mul(2, 2, 2).value(); // '16'

div
.div(n) => Big n : number | string | BigInt
returns the current value divided by n.
if the n is invalid, it is treated as 0.

355 / 113, // 3.1415929203539825
math(355).div(113).value(); // '3.141592920353982300'
math(10).div(3).value(); // '3.333333333333333333'
math(1000).div(10, 10, 10).value(); // '1'

abs
.abs() => Big returns the absolute current value.

math(-0.8).abs().value(); // '0.8'

pow
.pow(n) => Big n : number | string | BigInt
returns the current value nth power.
if the n is invalid, it is treated as 0.

0.7 ** 2, // 0.48999999999999994
Math.pow(0.7, 2); // 0.48999999999999994
math(0.7).pow(2).value(); // '0.49'

eq
.eq(n) => boolean n : number | string | BigInt
returns whether the current value and n are the same.

0.1 + 0.2 === 0.3, // false
math(0.1).add(0.2).eq(0.3); // true
math('0.0000001').eq(1e-7); // true
math(1e7).eq(10000000); // true

gt
.gt(n) => boolean n : number | string | BigInt
returns whether the current value is greater than n.

0.1 + 0.2 > 0.3, // true
math(0.1).add(0.2).gt(0.3); // false

gte
.gte(n) => boolean n : number | string | BigInt
returns whether the current value is greater than or equal to n.

0.1 + 0.2 <= 0.3, // false
math(0.1).add(0.2).gte(0.3); // true

lt
.lt(n) => boolean n : number | string | BigInt
returns whether the current value is less than n.

0.1 + 0.2 > 0.3, // true
math(0.1).add(0.2).lt(0.3); // false

lte
.lte(n) => boolean n : number | string | BigInt
returns whether the current value is less than or equal to n.

0.1 + 0.2 <= 0.3, // false
math(0.1).add(0.2).lte(0.3); // true

isZero
.isZero() => boolean
returns whether the current value is 0.

math(0).isZero(); // true
math(-0).isZero(); // true
math(0.0).isZero(); // true
math('0').isZero(); // true
math('-0').isZero(); // true
math(Number.MIN_SAFE_INTEGER).isZero(); // false
math(Number.MAX_SAFE_INTEGER).isZero(); // false

Test

npm run test

git : https://github.com/ma9pie/math
npm : https://www.npmjs.com/package/@ma9pie/math

감사합니다!

Jest 메서드 정리

Cocoon_ — Tue, 14 May 2024 12:17:52 +0900

jest는 프론트엔드에서 자주 사용되는 테스팅 라이브러리 입니다. 간단한 유닛 테스트부터 통합 테스트, E2E 테스트까지 가능합니다.

Common Matchers

toBe

같은 메모리 주소를 가리키고 있는지 확인

test('two plus two is four', () => {
  expect(2 + 2).toBe(4);
});

toEqual

값 자체가 같은지 비교

test('object assignment', () => {
  const data = {one: 1};
  data['two'] = 2;
  expect(data).toEqual({one: 1, two: 2});
});

Truthiness

test('null', () => {
  const n = null;
  expect(n).toBeNull();
  expect(n).toBeDefined();
  expect(n).not.toBeUndefined();
  expect(n).not.toBeTruthy();
  expect(n).toBeFalsy();
});

test('zero', () => {
  const z = 0;
  expect(z).not.toBeNull();
  expect(z).toBeDefined();
  expect(z).not.toBeUndefined();
  expect(z).not.toBeTruthy();
  expect(z).toBeFalsy();
});

toBeNull

null 인지

toBeUndefined

undefined 인지

toBeDefined

toBeDefined의 반대

toBeTruthy

true 인지

toBeFalsy

false 인지

Numbers

test('two plus two', () => {
  const value = 2 + 2;
  expect(value).toBeGreaterThan(3);
  expect(value).toBeGreaterThanOrEqual(3.5);
  expect(value).toBeLessThan(5);
  expect(value).toBeLessThanOrEqual(4.5);
})

toBeGreaterThan

초과

toBeGreaterThanOrEqual

이상

toBeLessThan

미만

toBeLessThanOrEqual

이하

Strings

toMatch

정규표현식으로 검사

test('there is no I in team', () => {
  expect('team').not.toMatch(/I/);
});

test('but there is a "stop" in Christoph', () => {
  expect('Christoph').toMatch(/stop/);
});

Arrays and iterables

toContain

배열이나 반복 가능 항목에 해당 값을 포함하는지 체크

const shoppingList = [
  'diapers',
  'kleenex',
  'trash bags',
  'paper towels',
  'milk',
];

test('the shopping list has milk on it', () => {
  expect(shoppingList).toContain('milk');
  expect(new Set(shoppingList)).toContain('milk');
});

Exceptions

toThrow

특정 함수가 호출될 때 오류가 발생하는지 테스트

Goodbye 2023, Hello 2024

Cocoon_ — Mon, 1 Jan 2024 00:00:10 +0900

2023년도 회고록

Work

2023년 3월 20일에는 역삼역과 강남역 사이에 위치한 새로운 회사로 이직을 하게 되었다. 첫 회사였던 이전 회사는 딱 1년을 채우고 퇴사를 했었고 현재 회사에서 근무한 지는 10개월 정도 지났다. 지금 회사는 친구의 지인분이 근무 중이셔서 친구의 소개로 별생각 없이 FE 포지션 커피챗을 보러 갔었었는데, 커피챗 경험이 좋았었고 어쩌다 보니 사전과제, 실무핏, 컬처핏, CEO 면접에 모두 pass 하게 되었으며, 근무 조건도 이전보다 더 나은 조건이어서 일주일 정도 고민하다가 이전 회사에 퇴사하기 한 달 전 이직 의사를 밝혔었다. 시니어분들, 동료들 모두 좋은 사람들이었고, 최대한 좋은 모습으로 떠나고 싶어서 마지막 한 달간은 인수인계도 철저히 하면서 정말 열심히 했었던 것 같다.(3월 17일 마지막 근무일에도 지라에 등록된 이슈 20여 개를 수정 후 자리 정리한 뒤 모든 직원분들에게 인사드리고 퇴근을 했었다.)

그리고 한 달간 쉰다거나 그런 것 없이 바로 다음 주에 새 회사로 출근을 하였다. 첫날에 출근하니 자리에 맥북과 모니터 2개가 있었는데 책상은 모션데스크에 의자는 시디즈 T80이어서 너무 좋았다. 그리고 필요 장비 구매 복지도 있어 회사에서 사용할 키보드를 주문했었고, 식사 또한 정기 배달 서비스를 이용 중이어서 식사 시간 때마다 밖에 나가 근처 식당 앞에 줄 서거나 하지 않아도 돼서 그런 부분들이 참 마음에 들었다. 사내 직원수는 30명 정도에 대부분 젊은 편이었고 회사 소속 카페도 있어 커피는 무료로 마시고 싶을 때 마실 수 있다. 그리고 출퇴근 시간이 따로 정해져 있지 않아 근무시간은 전적으로 자율에 맡기며, 재택 또한 가능해서 좋았다.(물론 회사 출근하는 게 좋아서 실제로 재택 한 날은 손에 꼽힌다...) 업무 자체는 FE가 적성에 맞아 재밌지만 블록체인 회사다 보니 Front를 구현하기 위해 해당 지식을 필요로 하는 부분이 존재해 어려움이 있었지만 주변의 좋은 동료들의 친절한 설명 덕분에 쉽게 이해할 수 있었다.

11월 달 즈음에는 이전 회사에서 자금 사정으로 인해 거래소 서비스를 종료한다는 소식을 듣게 되었다. 첫 회사에서 처음으로 만든 프로젝트 였었는데 너무나도 아쉬운 소식이었고, 서비스를 만들기 위해서 갈아 넣었던 시간과 야근 및 주말 출근이 주마등처럼 스쳐 지나가면서 남은 건 개발 실력뿐이라는 생각이 들었다. 요즘 고금리 시대에 투자 위축으로 스타트업들이 죽어나가고 있고, 개발자 채용 한파로 인해 경기가 많이 힘든 상황인 것 같다. 그래도 내가 지금 회사를 다니고 있다는 사실에 항상 감사하고 있다.

Skills

이전 회사에서는 기술스택이 Next.js, React, Javascript, Emotion, Redux였고, 현재 회사는 Next.js, React, Typescript, TailwindCSS, Jotai이다. 입사 후 typescript와 tailwind에 익숙하지 않아 어려움이 많았었다. 특히 Styling의 경우 Styled component 방식을 선호해서 가독성이 좋지 않고 속성을 외워야 하는 tailwind 사용에 불편함이 많았지만 이제는 어느 정도 익숙해졌고, 현재는 카카오페이에서 사용하는 방식처럼 tw.macro를 통해서 emotion과 tailwind를 결합하여 사용 중이다. 2023년도 커리어적으로 가장 잘한 일은 아마 typescript와 tailwind를 배운 게 아닐까 싶다. 그리고 Sentry error logging을 통한 버그 수정, GA event tracking을 통한 유저 행동 분석 및 UX 증대, Jest test code 작성 및 git action 연동과 같은 경험들을 하게 되었다.

Health

새로운 서비스 런칭으로 인해 높은 업무강도와 반복되는 야근으로 체력적으로 힘들다고 느꼈으며, 체력을 키워야겠다고 생각이 먼저 들어 무작정 회사 주변 헬스장을 등록했다. 5월부터 헬스장에서 주 3회(월, 수, 금) 운동을 시작하였고, 작심삼일이 되지 않기 위해서 초반부터 너무 무리하지 않고 재미를 붙여서 퇴근 후 운동가는 습관을 만들고자 했다. 덕분에 7개월째 주 3회 퇴근 후 운동을 하고 있고, 살이 빠지면서 근육이 늘어 몸이 좀 좋아진 것 같다. 처음에는 유산소 1시간에 근력 10분 정도만 했었는데, 살을 5kg 정도 빼고 나서 근력 30분에 유산소 30분으로 비중을 바꿔서 운동 중이다. 식단까지 하게 될 경우 못 버티고 폭식을 하게 될 것 같아서 따로 식단은 안 하고 새벽 야식을 안 먹기 위해서 배고픔 달램용으로 닭가슴살 단백질 핫바를 구매해서 먹고 있는데 꽤나 도움이 되는 것 같다. 그리고 운동을 시작하니 주말에 치킨, 피자를 먹어도 월요일에 오히려 살이 빠져있는 경우도 있어 신기했었다.

Side Project

작년에 목표 삼았었던 4개의 사이드 프로젝트들 중에서 하나인 ToDo List App을 완성하였다. 사실 직장 다니면서 회사 업무가 1순위 이기 때문에 퇴근 후 피곤한 상태로 프로젝트 하나를 만드는 게 쉬운 일은 아닌 것 같다.

[Project] Todo List App 개발

Site URL https://check-todo.vercel.app/ Todo List App This is a Todo List App that allows users to add tasks to a list and mark completion with a checkbox. Users can manage their to-do tasks more systematically, and the intuitive and simple design makes it

cocoon1787.tistory.com

내가 원하는 디자인에 심플하면서 필요한 기능은 다 있는 그런 Todo List App을 만들고 싶었는데, 프로젝트를 완성하여 휴대폰에 설치하여 잘 사용 중이다. 시간 날 때 List drag and drop 기능도 추가할 예정이다.

2024년도 목표

Career

받는 만큼 일하는 게 아닌 받고 싶은 만큼 일하자 라는 모토를 가지고 있다.
2023년도 열심히 달려왔고 2024년에도 받는 것의 2배 이상으로 열심히 일하며 알차게 보낼 것이다.

Commit

2023년도에는 3700개 이상의 commit을 하였다. 2024년도에는 5000 commit에 도전해보려고 한다.

Study

웹 개발을 하면서 곧 3년 차가 다돼 가는데 아직도 자바스크립트에 모르는 부분이 많고 Chat GPT의 도움을 받을 때가 많은 것 같다. 3년 차가 되기 전에 Modern Javascript Deep Dive 책을 완독 할 것이다.

Health

2024년도에도 현재 주 3회 운동하는 것을 계속 유지할 계획이다. 운동이 생활에 긍정적인 영향을 준다는 것은 확실한 것 같다.

Side Project

작년에 목표했었지만 시도하지 못했던 미니 거래소 앱을 만들어 볼 계획이다. Upbit API를 사용할지, Binance API를 사용할지 정하지는 못했지만, 아무래도 초당 socket message수가 많은 Binance API를 사용하여 렉 없이 Rendering 최적화가 된 앱을 만들어 보고 싶다.

2023년도 다들 고생 많으셨고 새해 복 많이 받으세요..!

[Project] Todo List App 개발

Cocoon_ — Mon, 4 Sep 2023 04:23:21 +0900

Site URL

https://check-todo.vercel.app/

Todo List App

This is a Todo List App that allows users to add tasks to a list and mark completion with a checkbox. Users can manage their to-do tasks more systematically, and the intuitive and simple design makes it easy to use.

check-todo.vercel.app

안녕하세요. Google Tasks나 Microsoft Todo 앱을 사용해 보면서 나만의 todo app을 만들어보면 어떨까 하는 생각을 계속 가지고 있었는데, 바쁘고 피곤해서 미루다가 드디어 Todo list app을 완성하게 되었습니다. 어떻게 보면 2023-09-04 오늘이 Todo list app 런칭일이자, v1.0.0이라고 할 수 있을 듯하네요.

LocalStorage만 사용하는 버전을 선 런칭 후에 로그인 연동 + 데이터 서버 연동 기능을 개발하여 배포를 하려고 했었는데, 다행히도 next-auth라는 좋은 라이브러리가 있어 쉽게 로그인 기능을 연동할 수 있었습니다.

웹서버 같은 경우에는 vercel로 호스팅을 하고 서버 데이터의 경우 firestore로 관리하여 서버 비용 zero로 운영하고 있습니다. 원래는 mongoDB의 shared cluster(무료)를 사용하여 데이터를 관리할까 고민하였었는데, 개인 프로젝트를 할 때 firestore도 많이 쓰인다는 얘기를 들어서 이번에 한번 써봤습니다. 아직은 데이터가 많지 않아 응답속도도 괜찮게 나오는 듯합니다.

프로젝트 기술 스택은 Next.js, React, Typescript이고 styling은 emotion을 사용하였습니다. 그리고 개인 프로젝트에는 한 번도 도입해보지 못했던 Sentry를 처음으로 넣어봤습니다. Sentry는 실시간 로그 취합 및 분석 도구이자 모니터링 플랫폼인데, 무료로도 사용이 가능하고 좀 더 정밀한 에러 분석을 위해서 플랜을 업그레이드할 수 있습니다. 런칭하기 전에 PC, Android, ios에서 기능 및 디자인 QA를 스스로 많이 했었는데, 아무래도 QA에서 발견하지 못한 에러들이 실사용자에게 발생할 가능성은 항상 있기 때문에 Sentry로 에러를 분석하고 Bug fix를 할 수 있다는 점에서 굉장히 좋은 툴이라고 생각됩니다.

Service screenshot

남은 여정

~~LocalStorage를 사용한 데이터 관리 및 기능 구현~~
~~소셜 로그인 서비스 연동~~
~~Firestore 연동 및 서버 데이터 관리~~
~~Sentry 도입~~
~~v1.0.0 런칭~~
Jest를 통한 테스트 코드 작성
Storybook을 통한 컴포넌트 테스트
~~List edit 기능 추가~~
List drag and drop 기능 추가
다국어 지원
...

혹시 사용하시다가 불편했던 경험, 개선 사항에 대한 의견이 있으신 분들은 편하게 아래의 문의 링크 혹은 댓글로 남겨주시면 정말 감사드리겠습니다.

Todo List App 문의하기

Github Link

https://github.com/ma9pie/todo-list-app

GitHub - ma9pie/todo-list-app

Contribute to ma9pie/todo-list-app development by creating an account on GitHub.

github.com

[Next.js] Next.js에서 styled-components 사용 시 발생하는 "Warning: Prop `className` did not match." 에러

Cocoon_ — Wed, 7 Jun 2023 00:35:38 +0900

Warning: Prop `className` did not match. Server: "sc-hmdomO rgEEX" Client: "sc-jlZhew bwbgGd" at button at P (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19658) at Button (webpack-internal:///./components/Button.tsx:19:23) at div at P (webpack-internal:///./node_modules/styled-components/dist/styled-components.browser.esm.js:31:19658) at Page (webpack-internal:///./pages/recoil.tsx:30:78) at Provider (webpack-internal:///./node_modules/react-redux/es/components/Provider.js:13:3) at App (webpack-internal:///./pages/_app.tsx:27:24) at _PathnameContextProviderAdapter (webpack-internal:///./node_modules/next/dist/shared/lib/router/adapters.js:118:24) at ErrorBoundary (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:305:63) at ReactDevOverlay (webpack-internal:///./node_modules/next/dist/compiled/@next/react-dev-overlay/dist/client.js:854:919) at Container (webpack-internal:///./node_modules/next/dist/client/index.js:149:5) at AppContainer (webpack-internal:///./node_modules/next/dist/client/index.js:314:24) at Root (webpack-internal:///./node_modules/next/dist/client/index.js:533:25) See more info here: https://nextjs.org/docs/messages/react-hydration-error

Next.js에서 Emotion을 사용할 때는 해당 에러를 마주한 적이 없었는데, styled-components 라이브러리를 사용하고 해당 에러를 만나게 되었습니다.

해당 에러의 경우 Next.js에서 styled-components를 사용할 경우 className이 달라서 생기는 에러입니다.
npm run dev를 통해서 첫 화면 로딩 시에는 해당 에러가 발생하지 않지만, 개발을 하면서 코드가 변경될 시 해당 에러가 발생하는 것을 확인하였습니다. 원인은 첫 로딩 시 서버사이드 렌더링(SSR)으로 화면을 그리게 되고, 그 이후부터 클라이언트사이드 렌더링(CSR)으로 화면을 그리기 때문에 서버와 클라이언트의 클래스명이 동일하지 않기 때문에 발생하는 에러입니다.

해결 방법

(1) babel-plugin-styled-components 설치

npm i -D babel-plugin-styled-components

설치 후 루트 디렉토리의 .babelrc 파일에 설정을 해줍니다.(없을 시 .babelrc 파일 생성!)

{
  "presets": ["next/babel"],
  "plugins": ["babel-plugin-styled-components"]
}

(2) Next.js 12 버전부터는 (1) 번 방식으로 해결되지 않을 수 도 있습니다. 12 버전부터는 babel 대신 swc를 사용하여 컴파일하도록 업데이트되었기 때문에 아래와 같이 next.config.js 파일에서 styledComponents 관련 설정을 하여 해결해 줍니다.

/** @type {import('next').NextConfig} */
const nextConfig = {
  reactStrictMode: false,
  compiler: {
    styledComponents: true,
  },
};

module.exports = nextConfig;

[Web3] ethers.js BigNumber 사용법

Cocoon_ — Fri, 2 Jun 2023 12:00:45 +0900

BigNumber

BigNumber은 일반 JavaScript 숫자로 표현하기에는 너무 큰 큰 숫자로 작업할 수 있는 방법을 제공하는 ethers.js 라이브러리의 모듈입니다. BigNumber은 최대 256비트의 정밀도로 임의로 큰 정수를 나타내는 불변 개체입니다. 자바스크립트의 기본 자료형의 연산은 정확하지 않은 경우가 많기 때문에 높은 수준의 정밀도가 필요한 Ether와 같은 암호화폐를 다룰 때는 BigNumber을 통해 정확한 연산이 가능하게 됩니다.

사용 방법

const { BigNumber } = require('ethers');

const bigNumber = BigNumber.from('12345678901234567890');
console.log(bigNumber.toString()); // '12345678901234567890

BigNumber.from(BigNumberish) → BigNumber
BigNumber.from은 BigNumberish에 대한 BigNumber 인스턴스를 반환하는 메서드입니다.

BigNumberish

ethers.js에는 BigNumberish라는 타입이 있으며 아래와 같이 지정될 수 있습니다.

string : hexString 또는 10진수 문자열
ByteLike : 배열 또는 Uint8Array와 같은 BytesLike 객체
BigNumber : BigNumber 인스턴스
number : safe range에 있는 자바스크립트 숫자 (Number.MAX_SAFE_INTEGER === 9007199254740991 === 2^53-1)
BigInt : 자바스크립트의 BigInt 객체

사용 예제

console.log(BigNumber.from('42').toString());
// Output: 42
console.log(BigNumber.from('0x2a').toString());
// Output: 42
console.log(BigNumber.from('-0x2a').toString());
// Output: -42
console.log(BigNumber.from([42]).toString());
// Output: 42
console.log(BigNumber.from(42).toString());
// Output: 42
console.log(BigNumber.from(BigInt(42)).toString());
// Output: 42
console.log(BigNumber.from(Number.MAX_SAFE_INTEGER - 1).toString());
// Output: 9007199254740990

BigNumber 사칙연산 예제

// 10^18 ==> "1000000000000000000"
const bigNumber = BigNumber.from('1000000000000000000');

console.log(bigNumber.add(100).toString());
// Output: "1000000000000000100"
console.log(bigNumber.sub(50).toString());
// Output: "999999999999999950"
console.log(bigNumber.mul(2).toString());
// Output: "2000000000000000000"
console.log(bigNumber.div(3).toString());
// Output: "333333333333333333"
console.log(bigNumber.mul(2).div(2).add(2).sub(2).toString());
// Output: "1000000000000000000"

비교 메서드

BigNumber.eq( otherValue ) ⇒ boolean
Returns true if and only if the value of BigNumber is equal to otherValue.

BigNumber.lt( otherValue ) ⇒ boolean
Returns true if and only if the value of BigNumber < otherValue.

BigNumber.lte( otherValue ) ⇒ boolean
Returns true if and only if the value of BigNumber ≤ otherValue.

BigNumber.gt( otherValue ) ⇒ boolean
Returns true if and only if the value of BigNumber > otherValue.

BigNumber.gte( otherValue ) ⇒ boolean
Returns true if and only if the value of BigNumber ≥ otherValue.

BigNumber.isZero( ) ⇒ boolean
Returns true if and only if the value of BigNumber is zero.

가장 흔한 NUMERIC_FAULT

1. overflow

자바스크립트의 숫자는 IEEE754로 규정된 64비트 부동소수점 숫자를 사용하여 값을 나타내는데 결과적으로 9,007,199,254,740,991 이상의 값부터는 오차가 있으며, 안전 범위를 벗어난 숫자를 사용하는 것을 방지하기 위해 overflow 오류를 발생시킵니다.

2. underflow

underflow오류는 값의 정밀도를 현재 데이터 유형으로 안전하게 표현할 수 없을 때 발생하는 오류입니다.

BigNumber은 소수점이 있는 숫자를 생성할 수 없습니다.

utils.parseUnits(value, decimal)에서 decimal보다 긴 소수점 자릿수를 가진 value를 생성할 수 없습니다.

3. Division by zero

0으로 나누려고 할 때 에러가 발생합니다.

추가로 알아두면 좋은 정보

단위

1이더 = 1000000000000000000 Wei (0이 18개)
1이더 = 1000000000000000 Kwei (0이 15개)
1이더 = 1000000000000 Mwei (0이 12개)
1이더 = 1000000000 Gwei (0이 9개)
1이더 = 1000000 Szabo
1이더 = 1000 Finney
1이더 = 0.001 Kether
1이더 = 0.000001 Mether
1이더 = 0.000000001 Gether
1이더 = 0.000000000001 Tether

ethers.utils 라이브러리 내에 구현되어 있는 메서드 캡처

1.parseUnits(value: string, decimals) → BigNumber

parseUnits 함수는 value 문자열과 숫자를 인수로 사용하고 소수 자릿수를 기준으로 토큰의 최소 단위로 입력 값을 나타내는 BigNumber 객체를 반환합니다.

console.log(utils.parseUnits('1.5', 18).toString());
// Output: "1500000000000000000"

parseUnits('1.5', 18)은 1500000000000000000(Wei의 1.5 ETH)인 BigNumber 객체를 반환합니다.

2. parseEther(value: string) → BigNumber

parseUnits(value, 18)의 줄임말입니다. value 문자열을 받고 Ether의 최소 단위인 Wei로 나타내는 BigNumber 객체를 반환합니다.

console.log(utils.parseEther('1.5').toString());
// Output: "1500000000000000000"

3. formatUnits(value: BigNumberish, decimals) → string

formatUnits 함수는 BigNumberish인 value와 decimals 숫자를 인수로 사용하고 소수 자릿수를 기준으로 토큰의 최대 단위로 입력 값의 문자열 표현을 반환합니다.

console.log(utils.formatUnits('1500000000000000000', 18));
// Output: "1.5"

formatUnits("1500000000000000000", 18)은 값이 "1.5"(1.5 ETH)인 문자열을 반환합니다.

4. formatEther(value: BigNumberish) → string

formatEther 함수는 formatUnits(value, 18)의 줄임말입니다. BigNumberish인 value를 인수로 받아 ETH값을 문자열로 표현해 반환합니다

console.log(utils.formatUnits(BigNumber.from('1500000000000000000')));
// Output: "1.5"

참고 문헌

https://docs.ethers.org/v5/api/utils/bignumber/

BigNumber

Documentation for ethers, a complete, tiny and simple Ethereum library.

docs.ethers.org

https://docs.ethers.org/v5/troubleshooting/errors/#help-NUMERIC_FAULT-overflow

Error Codes

Documentation for ethers, a complete, tiny and simple Ethereum library.

docs.ethers.org

https://docs.ethers.org/v5/api/utils/display-logic/#utils-parseUnits

Display Logic and Input

Documentation for ethers, a complete, tiny and simple Ethereum library.

docs.ethers.org

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Number/MAX_SAFE_INTEGER#description

Number.MAX_SAFE_INTEGER - JavaScript | MDN

The Number.MAX_SAFE_INTEGER static data property represents the maximum safe integer in JavaScript (253 – 1).

developer.mozilla.org

[React] 모달 깊게 파헤치기 : 효율적인 모달 관리에 대하여 (useModal custom hooks)

Cocoon_ — Tue, 30 May 2023 23:48:59 +0900

안녕하세요.
이번 포스팅은 제가 1년간 모달 관련해서 깊게 고민하고 생각했던 부분에 대한 내용입니다.
개인 프로젝트에서는 모달 관련해서 구글링을 하여 나오는 내용으로 쉽게 관리가 가능했지만,
실무를 하다 보니 프로젝트 크기가 커지고, 모달 위에 또 다른 모달이 띄워져야 하는 상황들이 많아 관리 포인트가 많아지는 문제가 발생했었습니다. 관리 포인트가 많아지면 오류가 발생했을 때의 이슈 대응이나 유지보수가 힘들어질 수 도 있겠다고 생각하였고, 이를 해결하기 위해 제가 연구하고 테스트했었던 가장 쉬운 방법부터 제가 현재 사용하고 있는 방법까지 공유를 해드리려 합니다.

react-modal과 같은 npm 라이브러리를 사용해서 모달을 구현할 수도 있지만, 프로젝트 내부의 라이브러리 의존성을 최소화해야겠다는 생각이 들어 간단하게 직접 구현을 하였습니다.

️ 점진적으로 코드를 개선하려 했던 이유

페이지마다 모달을 조건부 렌더링으로 관리해야 함
하나의 컴포넌트에 모달이 여러 개면, 관리해야 하는 state도 여러 개인 부분
컴포넌트 내부가 아닌 외부(일반 자바스크립트 util 파일 등등)에서 모달을 열어야 하는 경우가 생김

Index

useState로 구현하기
createPortal 적용
useModal로 리팩토링
createRoot 방식
with redux
with recoil
with context

️ 시작하기 전에

포스팅 내 코드 참고 Repository

https://github.com/ma9pie/modal

GitHub - ma9pie/modal

Contribute to ma9pie/modal development by creating an account on GitHub.

github.com

package.json

{
  "name": "modal",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@next/font": "13.4.4",
    "@reduxjs/toolkit": "^1.9.5",
    "@types/node": "20.2.5",
    "@types/react": "18.2.7",
    "@types/react-dom": "18.2.4",
    "axios": "^1.4.0",
    "eslint": "8.41.0",
    "eslint-config-next": "13.4.4",
    "next": "13.4.4",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-redux": "^8.0.5",
    "recoil": "^0.7.7",
    "sass": "^1.62.1",
    "styled-components": "^5.3.11",
    "typescript": "5.0.4"
  },
  "devDependencies": {
    "@types/styled-components": "^5.1.26",
    "babel-plugin-styled-components": "^2.1.3"
  }
}

Confirm 컴포넌트

/* @/components/Confirm.tsx */

import React from "react";
import styled from "styled-components";

type Props = {
  title?: string;
  message?: string;
  close?: () => void;
  confirm?: () => void;
};

const Confirm = ({ title, message, close, confirm }: Props) => {
  return (
    <Wrapper>
      <Overlay onClick={close}></Overlay>
      <Content>
        <Top>
          <Title>{title}</Title>
          <CloseBtn onClick={close}>&#x2716;</CloseBtn>
        </Top>
        <Message>{message}</Message>
        <BtnContainer>
          <CancelBtn onClick={close}>cancel</CancelBtn>
          <ConfirmBtn
            onClick={() => {
              confirm && confirm();
              close && close();
            }}
          >
            confirm
          </ConfirmBtn>
        </BtnContainer>
      </Content>
    </Wrapper>
  );
};

export default Confirm;

const Wrapper = styled.div``;
const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
`;
const Content = styled.div`
  position: fixed;
  display: grid;
  gap: 16px;
  top: 50%;
  left: 50%;
  padding: 16px;
  min-width: 200px;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  transform: translate(-50%, -50%);
  z-index: 999;
`;
const Top = styled.div`
  display: flex;
  justify-content: space-between;
`;
const Title = styled.h3``;
const CloseBtn = styled.div`
  width: 24px;
  height: 24px;
  line-height: 24px;
  font-size: 20px;
  text-align: center;
  cursor: pointer;
`;
const Message = styled.p``;
const BtnContainer = styled.div`
  display: flex;
  gap: 8px;
`;
const CancelBtn = styled.div`
  flex: 1;
  height: 24px;
  text-align: center;
  border: 1px solid lightgrey;
  border-radius: 4px;
  cursor: pointer;
`;
const ConfirmBtn = styled.div`
  flex: 1;
  height: 24px;
  text-align: center;
  color: white;
  background-color: royalblue;
  border-radius: 4px;
  cursor: pointer;
`;

모달은 Alert, Confirm, BottmSheet, Toast, ModalForm, ModalDialog 등등 여러 가지가 있지만, 그중에서도 가장 일반적인 Confirm 형식으로 모달을 디자인해 봤습니다.

props로는 title, message, confirm 함수를 내려줄 수 있고, 필요에 따라 message대신 children을 받아서 컴포넌트를 모달 props로 전달하도록 구성할 수 도 있습니다.

그리고 닫기버튼, cancel버튼, overlay부분을 클릭 시 모달이 닫히도록 props로 받은 close 함수를 onClick이벤트로 등록을 해주었습니다.

1. useState

가장 기본적인 방법입니다. DOM 내부에 Modal을 삽입하고 useState값으로 조건부 렌더링하는 방식입니다.

import React, { useState } from "react";
import Confirm from "@/components/Confirm";
import Button from "@/components/Button";
import styled from "styled-components";

const UseState = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const open = () => {
    setIsOpen(true);
  };
  const close = () => {
    setIsOpen(false);
  };
  const confirm = () => {
    console.log("confirm clicked");
    setIsOpen(false);
  };
  return (
    <Wrapper>
      <Button onClick={open}>Open Confirm</Button>
      {isOpen && (
        <Confirm
          title="알림"
          message="상품을 주문하시겠습니까?"
          close={close}
          confirm={confirm}
        ></Confirm>
      )}
    </Wrapper>
  );
};

export default UseState;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

버튼을 클릭하면 isOpen의 상태값이 true로 바뀌게 되고 모달이 렌더링 됩니다. confirm을 클릭 시 실행시킬 함수도 정의가 가능합니다.

2. createPortal 적용

1번 방법의 경우 해당 페이지 또는 컴포넌트 내부에서 modal이 렌더링 되므로, modal사용 시 다른 컴포넌트와 겹치거나 z-index를 지정하여 관리를 해야 한다는 문제점이 있습니다. 이러한 문제를 해결하기 위해 createPortal을 사용합니다.

모달이 페이지 내부에 렌더링 되어있는 상태

(1) 먼저 next.js를 사용하신다면 _document.tsx, react만 사용하신다면 public 폴더의 index.html에 <div id='modal'></div>을 삽입해 줍니다.

/* @/pages/_document.tsx */

import { Html, Head, Main, NextScript } from "next/document";

export default function Document() {
  return (
    <Html lang="ko">
      <Head />
      <body>
        <div id="modal"></div>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

(2) 그리고 Portal 컴포넌트를 생성해 줍니다.

/* @/components/Portal.tsx */

import { ReactNode } from "react";
import { createPortal } from "react-dom";

type Props = {
  children: ReactNode;
};

const Portal = ({ children }: Props) => {
  const node = document.getElementById("modal") as HTMLElement;

  return createPortal(children, node);
};

export default Portal;

ReactDOM에서 제공하는 createPortal은 부모 컴포넌트 DOM 외부에 존재하는 DOM 노드에 해당 컴포넌트를 렌더링 할 수 있게 해주는 함수입니다. 쉽게 말해서 portal을 사용해서 모달 렌더링 시 부모 컴포넌트의 내부가 아닌, 위에서 삽입해 준 <div id='modal'></div>에 모달을 렌더링 시킬 수 있는 것입니다.

(3) 모달에 Portal 컴포넌트를 감싸줍니다.

import React, { useState } from "react";
import Confirm from "@/components/Confirm";
import Button from "@/components/Button";
import Portal from "@/components/Portal";
import styled from "styled-components";

const UseState = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const open = () => {
    setIsOpen(true);
  };
  const close = () => {
    setIsOpen(false);
  };
  const confirm = () => {
    console.log("confirm clicked");
    setIsOpen(false);
  };
  return (
    <Wrapper>
      <Button onClick={open}>Open Confirm</Button>
      {isOpen && (
        <Portal>
          <Confirm
            title="알림"
            message="상품을 주문하시겠습니까?"
            close={close}
            confirm={confirm}
          ></Confirm>
        </Portal>
      )}
    </Wrapper>
  );
};

export default UseState;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

페이지 요소 확인 시 모달이 컴포넌트 내부가 아닌 <div id='modal'></div> 내부에 생성된 것을 확인할 수 있습니다.

저의 경우 예시를 위해서 Portal이라는 컴포넌트를 생성해서 모달에 감싸줬지만, 실사용시에는 Portal 컴포넌트를 생성할 필요 없이 모달 컴포넌트 내부에서 createPortal을 사용하여 적용하시는 게 훨씬 깔끔합니다.

3. useModal로 리팩토링

import React, { useState } from "react";
import Confirm from "@/components/Confirm";
import Button from "@/components/Button";
import Portal from "@/components/Portal";
import styled from "styled-components";

const Page = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const open = () => {
    setIsOpen(true);
  };
  const close = () => {
    setIsOpen(false);
  };
  const confirm = () => {
    console.log("confirm clicked");
    setIsOpen(false);
  };
  return (
    <Wrapper>
      <Button onClick={open}>Open Confirm</Button>
      {isOpen && (
        <Portal>
          <Confirm
            title="알림"
            message="상품을 주문하시겠습니까?"
            close={close}
            confirm={confirm}
          ></Confirm>
        </Portal>
      )}
    </Wrapper>
  );
};

export default Page;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

useState를 통해 모달을 관리할 시 컴포넌트마다 useState로 모달을 렌더링 할지 말지에 대한 state를 정의하고 open과 close 함수를 생성해줘야 하는 문제점이 있습니다. 해당 부분을 리팩토링 해봅시다.

먼저 모달 state를 아래와 같이 useModal이라는 custom hook으로 만들어 줍니다.

/* @/hooks/useModal.tsx */
import { useState } from "react";

const useModal = () => {
  const [isOpen, setIsOpen] = useState<boolean>(false);
  const open = () => {
    setIsOpen(true);
  };
  const close = () => {
    setIsOpen(false);
  };
  return { isOpen, open, close };
};

export default useModal;

useModal custom hook을 생성했으니 이제 모달 렌더링이 필요한 컴포넌트에서 사용해 봅시다.

import React from "react";
import Confirm from "@/components/Confirm";
import Button from "@/components/Button";
import Portal from "@/components/Portal";
import styled from "styled-components";
import useModal from "@/hooks/useModal";

const Page = () => {
  const { isOpen, open, close } = useModal();

  const confirm = () => {
    console.log("confirm clicked");
    close();
  };
  return (
    <Wrapper>
      <Button onClick={open}>Open Confirm</Button>
      {isOpen && (
        <Portal>
          <Confirm
            title="알림"
            message="상품을 주문하시겠습니까?"
            close={close}
            confirm={confirm}
          ></Confirm>
        </Portal>
      )}
    </Wrapper>
  );
};

export default Page;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;

리팩토링 시 위와 같이 state관리를 custom hook에 위임하고 open, close함수를 정의할 필요도 사라지게 됩니다.
코드가 좀 더 깔끔해진 듯합니다.

(1) 페이지에 모달을 삽입하고 모달 관련 state관리 및 open & close 함수를 useModal이라는 custom hook으로 split
(2) createPortal을 사용해서 부모 컴포넌트 DOM 외부에서 모달을 렌더링

여기까지가 제가 생각하기에 가장 일반적인 모달 관리에 대한 내용입니다.

4. createRoot 방식

해당 방식을 설명드리기 전에 먼저 빌드업부터 하겠습니다.
Front에서는 서버와 통신하기 위해서는 아래와 같이 axios라는 라이브러리를 많이 사용합니다.

import React, { useEffect } from "react";
import axios from "axios";

const Page = () => {
  useEffect(() => {
    axios.get("/api/hello").then((res) => {
      // business logic
    }).catch((err) => {
      // error handling
    });
  }, []);
  return <div>index</div>;
};

export default Page;

그리고 해당 api가 오류를 발생시킬 때를 대비하여 catch 함수로 에러 핸들링을 하게 됩니다.

지금 여러분들은 Frontend 개발자이고 회사에서 프로젝트를 하나 담당하고 있다고 가정하겠습니다.
회사 프로젝트에 페이지마다 2~3개씩 api를 호출하고, 프로젝트 전체에서 사용하는 총 api 수는 100개가 넘습니다.
그래서 매일 아침 출근하자마자 해야 할 일은 상용 서비스에서 api응답에 오류가 없는지 확인하기 위해 콘솔창 네트워크 탭을 켜서 500 error 발생하는 api가 있는지 일일이 확인을 합니다.

import React, { useEffect } from "react";
import axios from "axios";

const Page = () => {
  useEffect(() => {
    axios
      .get("/api/user")
      .then((res) => {
        // business logic
      })
      .catch((err) => {
        if (err.response.status === 500) {
          // 서버 오류 알림 관련 모달
        }
      });
  }, []);
  useEffect(() => {
    axios
      .get("/api/login")
      .then((res) => {
        // business logic
      })
      .catch((err) => {
        if (err.response.status === 500) {
          // 서버 오류 알림 관련 모달
        }
      });
  }, []);

  // ... 중략

  useEffect(() => {
    axios
      .get("/api/signup")
      .then((res) => {
        // business logic
      })
      .catch((err) => {
        if (err.response.status === 500) {
          // 서버 오류 알림 관련 모달
        }
      });
  }, []);

  return <div>index</div>;
};

export default Page;

그래서 위와 같이 사용하는 api마다 catch로 500 error를 처리하게 된다면 100개가 넘는 api를 관리하고 유지보수하기 어려울 것입니다. 따라서 api 공통 에러 처리를 위해 axios라는 util을 만들어서 모든 api 통신의 톨게이트로 사용합니다.

/* @/utils/axios.tsx */
import Axios from "axios";

const headers = {
  "Content-Type": "application/json",
};

const axios = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
  timeout: 15000,
  headers: headers,
});

axios.interceptors.request.use(
  (req) => {
    return req;
  },
  (err) => {
    return Promise.reject(err);
  }
);

axios.interceptors.response.use(
  (res) => {
    return Promise.resolve(res);
  },
  (err) => {
    if (err.response.status === 500) {
      // 서버 오류 알림 관련 모달
    }
    return Promise.reject(err);
  }
);

export default axios;

axios를 사용하기 위해서 import axios from "axios" 대신 import axios from "@/utils/axios"를 사용합니다

import axios from "@/utils/axios";

이제 일반 타입스크립트(자바스크립트) utils 파일에서 서버 오류 관련 모달을 렌더링 하여 서버 오류에 대한 공통 처리가 가능하게 됩니다.

axios util file은 컴포넌트가 아니라서 useState도 사용 못하는데...
어떻게 모달을 렌더링 할 수가 있죠?

ReactDOM.createRoot 함수를 사용해서 구현할 수 있습니다.
getElementById를 통해서 모달을 띄울 node를 찾고 ReactDOM.createRoot를 통해서 root를 생성하여 해당 node에 root.render, root.unmount 함수를 통해서 모달을 rendering 하고 unmount 할 수 있습니다.

먼저 서버 오류를 띄울 Alert 모달을 하나 만들어 보겠습니다.

/* @/components/Alert.tsx */

import React from "react";
import styled from "styled-components";

type Props = {
  title?: string;
  message?: string;
  btnText?: string;
  close?: () => void;
};

const Alert = ({ title, message, btnText, close }: Props) => {
  return (
    <Wrapper>
      <Overlay onClick={close}></Overlay>
      <Content>
        <Title>{title}</Title>
        <Message>{message}</Message>
        <ConfirmBtn onClick={close}>{btnText}</ConfirmBtn>
      </Content>
    </Wrapper>
  );
};

export default Alert;

const Wrapper = styled.div``;
const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
`;
const Content = styled.div`
  position: fixed;
  display: grid;
  gap: 16px;
  top: 50%;
  left: 50%;
  padding: 16px;
  min-width: 200px;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  transform: translate(-50%, -50%);
  z-index: 999;
`;
const Title = styled.h3`
  text-align: center;
`;
const Message = styled.p``;
const ConfirmBtn = styled.div`
  flex: 1;
  height: 24px;
  text-align: center;
  color: white;
  background-color: royalblue;
  border-radius: 4px;
  cursor: pointer;
`;

그리고 modal util을 하나 만들어 줍니다.

/* @/utils/modal.tsx */
import ReactDOM from "react-dom/client";

import Alert from "@/components/Alert";

type Props = {
  isOpen?: boolean;
  title?: string;
  message?: string;
  btnText?: string;
  component?: () => JSX.Element;
};

const modal = {
  open: (Component: (props: Props) => JSX.Element, props: Props) => {
    const defaultProps = {
      isOpen: true,
      close: () => {},
    };
    const container = document.getElementById("modal");
    if (!container) return;
    const root = ReactDOM.createRoot(container);

    defaultProps.close = () => {
      defaultProps.isOpen = false;
      root.unmount();
    };

    defaultProps.isOpen = true;
    root.render(<Component {...defaultProps} {...props}></Component>);
  },

  // alert
  openAlert: (props: Props) => {
    modal.open(Alert, props);
  },
};

export default modal;

그리고 axios uitl에서 아래와 같이 modal을 open 시킬 수 있습니다.

/* @/utils/axios.tsx */
import Axios from "axios";
import modal from "@/utils/modal";

const headers = {
  "Content-Type": "application/json",
};

const axios = Axios.create({
  baseURL: process.env.NEXT_PUBLIC_SERVER_URL,
  timeout: 15000,
  headers: headers,
});

axios.interceptors.request.use(
  (req) => {
    return req;
  },
  (err) => {
    return Promise.reject(err);
  }
);

axios.interceptors.response.use(
  (res) => {
    return Promise.resolve(res);
  },
  (err) => {
    if (err.response.status === 500) {
      // 서버 오류 알림 관련 모달
      modal.openAlert({
        title: "알림",
        message: "서버 오류가 발생하였습니다.",
        btnText: "확인",
      });
    }
    return Promise.reject(err);
  }
);

export default axios;

api에서 일부러 500 error를 발생시키면 아래와 같은 모달이 뜨는 것을 확인할 수 있습니다.

컴포넌트 내부에서도 모달을 띄울 수 있습니다.

import React, { useEffect } from "react";
import modal from "@/utils/modal";

const Page = () => {
  useEffect(() => {
    modal.openAlert({
      title: "Notice",
      message: "Message",
      btnText: "Ok",
    });
  }, []);

  return <div>index</div>;
};

export default Page;

그러나 createRoot 방식 같은 경우에는 next/router의 useRouter나 recoilState 같은 일부 기능사용 시 에러가 발생하는 문제점이 있습니다.(React DOM의 계층구조에서 렌더링 된 것이 아닌 node에 컴포넌트를 create 하는 방식이기 때문인 것으로 생각됩니다.)

그렇기 때문에 createRoot 방식의 경우는 util파일에서 데이터 변경이 없는 정적이고 간단한 알림 모달이 필요할 경우에만 사용하는 것을 추천드립니다.

5. with Redux

useState로 모달을 사용하면서 모달 관련 상태관리 코드가 많아지게 되었고 "모달을 전역상태로 관리를 하면 어떨까?"라는 아이디어가 떠올라서 그 당시 프로젝트에서 사용 중인 전역상태관리 라이브러리인 redux로 모달을 구현하여 썼었던 경험이 있습니다.

컴포넌트를 props로 받는 모달 컴포넌트 생성

/* @/components/Modal.tsx */

import React from "react";
import styled from "styled-components";

type Props = {
  close?: () => void;
  component?: () => JSX.Element;
};

const Alert = ({ component, close }: Props) => {
  return (
    <Wrapper>
      <Overlay onClick={close}></Overlay>
      <Content> {component && component()}</Content>
    </Wrapper>
  );
};

export default Alert;

const Wrapper = styled.div``;
const Overlay = styled.div`
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.4);
`;
const Content = styled.div`
  position: fixed;
  display: grid;
  gap: 16px;
  top: 50%;
  left: 50%;
  padding: 16px;
  min-width: 200px;
  max-width: 400px;
  border-radius: 12px;
  overflow: hidden;
  background-color: white;
  transform: translate(-50%, -50%);
  z-index: 999;
`;

(1) 프로젝트 redux 폴더 내 store, reducer, hooks 구현

/* @/redux/store.ts */

import { configureStore } from "@reduxjs/toolkit";
import modalReducer from "@/redux/modal";

export const store = configureStore({
  reducer: { modal: modalReducer },
  middleware: (getDefaultMiddleware) =>
    getDefaultMiddleware({ serializableCheck: false }),
});

// @ts-ignore
export type RootState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;

Store 설정입니다. 가장 간단하게 설정하였고 state로 컴포넌트를 저장하기 때문에 미들웨어 serializableCheck를 false로 설정해 줍시다.(컴포넌트 children의 순환구조 때문에 직렬화 이슈가 있어 콘솔 에러가 발생하는 것으로 기억)

/* @/redux/hooks.ts */

import { TypedUseSelectorHook, useDispatch, useSelector } from "react-redux";
import type { RootState, AppDispatch } from "@/redux/store";

export const useAppDispatch = () => useDispatch<AppDispatch>();
export const useAppSelector: TypedUseSelectorHook<RootState> = useSelector;

타입스크립트에서 useSelector, useDispatch를 좀 더 쉽게 사용하기 위해 만들어 줍니다.

/* @/redux/modal.ts */

import { createSlice } from "@reduxjs/toolkit";
import type { RootState } from "@/redux/store";

export type ModalProps = {
  key?: string;
  component?: () => JSX.Element;
};

const initialState: ModalProps[] = [];

const modalReducer = createSlice({
  name: "modal",
  initialState,
  reducers: {
    setState(state, action) {
      return action.payload;
    },
  },
});

export const modalActions = { ...modalReducer.actions };
export const selecModal = (state: RootState) => state.modal;
export default modalReducer.reducer;

reducer부분입니다. 상태 관리를 위한 setState함수만 추가해 줍니다.

(2) _app.tsx에 redux Provider를 감싸주고, 모달을 띄워줄 root 컴포넌트를 생성하여 _app.tsx에 넣어줍니다.

/* @/components/ReduxModalRoot.tsx */

import React from "react";
import { useAppSelector } from "@/redux/hooks";
import Modal from "@/components/Modal";

const ReduxModalRoot = () => {
  const modals = useAppSelector((state) => state.modal);

  return (
    <div id="redux-modal">
      {modals.map((modal) => (
        <Modal key={modal.key} {...modal}></Modal>
      ))}
    </div>
  );
};

export default ReduxModalRoot;

모달을 띄워줄 root입니다. 배열을 map으로 돌려서 modal들을 띄워주는 역할을 합니다.

/* @/pages/_app.tsx */

import "@/styles/globals.scss";
import type { AppProps } from "next/app";
import { store } from "@/redux/store";
import { Provider } from "react-redux";
import ReduxModalRoot from "@/components/ReduxModalRoot";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <Provider store={store}>
      <ReduxModalRoot></ReduxModalRoot>
      <Component {...pageProps} />
    </Provider>
  );
}

(3) 모달 사용을 위한 custom hooks를 만들어 줍니다.

/* @/hooks/useReduxModal.tsx */

import { modalActions, ModalProps } from "@/redux/modal";
import { useAppSelector, useAppDispatch } from "@/redux/hooks";

const useReduxModal = () => {
  const dispatch = useAppDispatch();
  const modals = useAppSelector((state) => state.modal);

  const openModal = (props: ModalProps) => {
    const key = Math.random().toString(36).substring(2);
    const nextProps = {
      key,
      close: () => dispatch(modalActions.setState([...modals])),
      ...props,
    };
    dispatch(modalActions.setState([...modals].concat(nextProps)));
  };

  return { openModal };
};

export default useReduxModal;

openModal 함수에서는 unique 한 key와 close 함수를 만들어 modals state 배열에 모달을 추가해 주는 역할을 합니다.

사용 예시

import React from "react";
import useReduxModal from "@/hooks/useReduxModal";
import styled from "styled-components";
import Button from "@/components/Button";

const Page = () => {
  const modal = useReduxModal();

  const open = () => {
    modal.openModal({ component: () => <Content>modal content</Content> });
  };

  return (
    <Wrapper>
      <Button onClick={open}>Open Modal</Button>
    </Wrapper>
  );
};

export default Page;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;
const Content = styled.div`
  width: 200px;
  height: 300px;
`;

useReduxModal hooks를 사용하여 modal.openModal로 모달을 띄워줄 수 있습니다. 전역 상태로 모달을 관리할 경우 장점은 모달의 props로 전달하는 component 내부에서도 next/router나 redux state값들을 사용할 수 있다는 점, 모달에 type이라는 property를 추가하여 openAlert, openConfirm, openBottomSheet 같은 함수들을 생성하고 root에서 type별로(Alert, Confirm, BottomSheet,...) 필터링하여 렌더링 할 수 있다는 장점이 있습니다.

5. with Recoil

recoil을 사용하는 방법은 redux를 사용하여 구현한 방법과 흡사하며, redux보다 boilerplate 코드가 적다는 장점이 있습니다.

(1) 상태 atoms 생성

/* @/recoil/atoms.ts */

import { atom } from "recoil";

export type ModalProps = {
  key?: string;
  component?: () => JSX.Element;
};

export const modalState = atom<ModalProps[]>({
  key: "modalState",
  default: [],
});

(2) ModalRoot 생성 및 _app.tsx 설정

/* @/components/RecoilModalRoot.tsx */

import React from "react";
import Modal from "@/components/Modal";
import { useRecoilValue } from "recoil";
import { modalState } from "@/recoil/atoms";

const RecoilModalRoot = () => {
  const modals = useRecoilValue(modalState);
  return (
    <div id="recoil-modal">
      {modals.map((modal) => (
        <Modal key={modal.key} {...modal}></Modal>
      ))}
    </div>
  );
};

export default RecoilModalRoot;

/* @/pages/_app.tsx */

import "@/styles/globals.scss";
import type { AppProps } from "next/app";
import { RecoilRoot } from "recoil";
import RecoilModalRoot from "@/components/RecoilModalRoot";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <RecoilRoot>
      <RecoilModalRoot></RecoilModalRoot>
      <Component {...pageProps} />
    </RecoilRoot>
  );
}

_app.tsx에서는 전체를 RecoilRoot로 감싸주고 ModalRoot를 삽입해 줍니다.

(3) useRecoilModal custom hooks 생성

/* @/hooks/useRecoilModal.tsx */

import { useRecoilState } from "recoil";
import { modalState, ModalProps } from "@/recoil/atoms";

const useRecoilModal = () => {
  const [modals, setModals] = useRecoilState(modalState);

  const openModal = (props: ModalProps) => {
    const key = Math.random().toString(36).substring(2);
    const nextProps = {
      key,
      close: () => setModals([...modals]),
      ...props,
    };
    setModals([...modals].concat(nextProps));
  };

  return { openModal };
};

export default useRecoilModal;

redux를 이용한 방식에서와 같이 openModal이라는 함수를 통해 모달 상태 관리를 해줍니다.

사용 예제

import React from "react";
import useRecoilModal from "@/hooks/useRecoilModal";
import styled from "styled-components";
import Button from "@/components/Button";

const Page = () => {
  const modal = useRecoilModal();

  const open = () => {
    modal.openModal({ component: () => <Content>component</Content> });
  };

  return (
    <Wrapper>
      <Button onClick={open}>Open Modal</Button>
    </Wrapper>
  );
};

export default Page;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
`;
const Content = styled.div`
  width: 200px;
  height: 300px;
  background-color: #eeeeee;
  border-radius: 12px;
`;

useReduxModal hooks와 마찬가지로 openModal을 통해서 모달에 렌더링 할 컴포넌트를 props로 전달하여 모달을 렌더링 시킬 수 도 있고, openAlert, openConfirm 함수 생성 후 title, message, onClickConfirm을 props로 전달하여 Alert나 Confirm을 띄울 수 도 있습니다. 아무래도 redux보다는 recoil이 보일러플레이트 코드가 적고 사용이 쉬워서 사용하기에 간편하다는 생각이 듭니다.

6. with Context

redux, recoil을 통해서 모달 관리를 할 시 redux나 recoil을 무조건 사용해야 한다는 의존성이 생기게 됩니다. 그러한 의존성을 제거하기 위해서 React 내장 API인 useContext를 통해서 구현을 해봤습니다.

(1) useContextModal를 만들어주고 ModalProvider 생성 후 _app.tsx에 설정

/* @/hooks/useContextModal.tsx */

import { useContext } from "react";
import { ModalContext } from "@/components/ModalProvider";
import { ModalProps, Modals } from "@/types";

let tmpModals: Modals;

const useContextModal = () => {
  const { modals, setModals } = useContext(ModalContext);
  tmpModals = modals;

  const openModal = (props: ModalProps) => {
    const hashMapA: Map<string, ModalProps> = new Map(tmpModals);
    const key = Math.random().toString(36).substring(2);
    props.key = props.key || key;
    props.close = async () => {
      const hashMapB = new Map(hashMapA);
      if (props.key) {
        hashMapB.delete(props.key!);
        setModals(new Map(hashMapB));
      }
    };
    hashMapA.set(props.key, props);
    setModals(hashMapA);
  };

  const closeModal = (key?: string) => {
    const hashMap: Map<string, ModalProps> = new Map(tmpModals);
    if (key) {
      const props = hashMap.get(key);
      if (props) {
        hashMap.delete(key);
        setModals(new Map(hashMap));
      }
      return;
    }
  };

  const openAlert = (props: ModalProps) => {
    openModal({ ...props, type: "ALERT" });
  };

  const openConfirm = (props: ModalProps) => {
    openModal({ ...props, type: "CONFIRM" });
  };

  return {
    openModal,
    closeModal,
    openAlert,
    openConfirm,
  };
};

export default useContextModal;

/* @/components/ModalProvider.tsx */

import React, { createContext, ReactNode, useState } from "react";

import Alert from "@/components/Alert";
import Confirm from "@/components/Confirm";
import Modal from "@/components/Modal";
import { ModalProps, Modals } from "@/hooks/useContextModal";

type Props = {
  children: ReactNode;
};

export const ModalContext = createContext({
  modals: new Map(),
  setModals: (state: Modals) => {},
});

const ModalProvider = ({ children }: Props) => {
  const [modals, setModals] = useState<Modals>(new Map());

  const alertList: ModalProps[] = [];
  const confirmList: ModalProps[] = [];
  const modalList: ModalProps[] = [];

  modals.forEach((value, key) => {
    switch (value.type) {
      case "ALERT":
        alertList.push(value);
        break;
      case "CONFIRM":
        confirmList.push(value);
        break;
      default:
        modalList.push(value);
        break;
    }
  });

  return (
    <ModalContext.Provider value={{ modals, setModals }}>
      <div id="alert">
        {alertList.map((modal) => (
          <Alert key={modal.key} {...modal}></Alert>
        ))}
      </div>
      <div id="confirm">
        {confirmList.map((modal) => (
          <Confirm key={modal.key} {...modal}></Confirm>
        ))}
      </div>
      <div id="modal">
        {modalList.map((modal) => (
          <Modal key={modal.key} {...modal}></Modal>
        ))}
      </div>
      {children}
    </ModalContext.Provider>
  );
};

export default ModalProvider;

redux와 recoil에서 구현했던 방식과는 조금 다르게 Hash Map을 사용하여 state를 관리합니다. 그리고 Map 순회를 통해 각 타입별(Alert, Confirm, Modal)로 배열에 담아 DOM에 모달을 렌더링을 합니다. 그리고 해당 컴포넌트를 ModalContext.Provider로 감싸주어 state를 공급합니다.

/* @/pages/_app.tsx */

import "@/styles/globals.scss";
import type { AppProps } from "next/app";
import ModalProvider from "@/components/ModalProvider";

export default function App({ Component, pageProps }: AppProps) {
  return (
    <ModalProvider>
      <Component {...pageProps} />
    </ModalProvider>
  );
}

사용 예제

import React from "react";
import useContextModal from "@/hooks/useContextModal";
import styled from "styled-components";
import Button from "@/components/Button";

const Page = () => {
  const modal = useContextModal();

  const openAlert = () => {
    modal.openAlert({
      title: "알림",
      message: "할인 특가 이벤트 중",
      btnText: "바로가기",
    });
  };
  const openConfirm = () => {
    modal.openConfirm({
      title: "주문",
      message: "상품을 주문하시겠습니까?",
      confirm: () => {
        console.log("주문 완료");
      },
    });
  };
  const openModal = () => {
    modal.openModal({ component: () => <Content>Modal component</Content> });
  };

  return (
    <Wrapper>
      <Button onClick={openAlert}>Open Alert</Button>
      <Button onClick={openConfirm}>Open Confirm</Button>
      <Button onClick={openModal}>Open Modal</Button>
    </Wrapper>
  );
};

export default Page;

const Wrapper = styled.div`
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
`;
const Content = styled.div`
  width: 400px;
  height: 200px;
`;

이 방식의 경우 제가 현재 사용하고 있는 방식이며 라이브러리 의존성 없이 내장 함수만을 사용하여 구현할 수 있는 방법입니다. 본 포스팅에서는 아이디어를 공유한다는 느낌으로 최대한 간단하게 구현을 하였고 실제로 사용을 하신다면 해당 아이디어를 통해서 커스터마이징하고 프로젝트의 특성에 맞게 변환시켜줘야 합니다.

예를 들어 modal의 width, height, padding, top, left, cancelBtnText, confirmBtnText, onAfterOpen, onAfterClose 등등을 props로 받아서 처리를 할 수 도 있고, isOpen이라는 변수를 props로 넘겨줘서 모달이 만들어지고 사라지는 애니메이션을 보여주고 200ms 뒤 모달을 state에서 제거하는 방식으로도 구현이 가능합니다.

그리고 컴포넌트가 아닌 파일에서 모달이 띄울 필요가 생길 때는 해당 방식을 사용할 수 없어 (4) createRoot 방식을 혼용해서 사용하고 있습니다. 좀 더 좋은 아이디어를 아시는 분은 댓글로 알려주시면 감사드리겠습니다.

아래의 링크는 제가 시간 날 때마다 만들고 있는 todo list app에서 사용할 모달들을 테스트하는 페이지입니다. context를 통해서 모달을 관리하는 프로젝트이며 실제 사용 코드는 해당 레포에서 확인이 가능합니다.

https://todo-list-ma9pie.vercel.app/test/modals

Todo List App

사용자가 할 일을 리스트에 추가하고, 체크박스로 완료 여부를 표시할 수 있도록 해주는 Todo List App입니다. 사용자들은 할 일을 보다 체계적으로 관리할 수 있으며, 직관적이고 간단한 디자인으

todo-list-ma9pie.vercel.app

https://github.com/ma9pie/todo-list

GitHub - ma9pie/todo-list

Contribute to ma9pie/todo-list development by creating an account on GitHub.

github.com

글을 읽으시고 의문점이나 잘못된 점 있을 시 편하게 질문 주시면 감사드려요!

[React] "Manifest: Line: 1, column: 1, Syntax error." 에러

알 수 없는 사용자 — Thu, 27 Apr 2023 13:00:37 +0900

CRA를 통해서 리액트 프로젝트를 생성하면 manifest.json이 생기는데, 저의 경우에는 next.js 프로젝트에서 manifest.json파일을 추가하여 작업 중에 콘솔에서 해당 에러가 발생하는 것을 확인하였습니다.

해결 방법은 간단하게도 경로의 문제였습니다.

메타태그를 설정해 주는 부분에 경로가 상대경로로 되어있어 루트("/")가 아닌 경로에서 해당 에러가 발생하고 있어 절대경로로 수정해 주었습니다.

추가 포스팅

manifest.json은 무슨 역할을 하는 파일일까?

[WEB] manifest.json은 무슨 역할을 할까?

manifest.json은 웹 애플리케이션에 대한 메타데이터를 제공하여 웹 애플리케이션을 다운로드할 수 있도록 하는 파일입니다. 파일 내에는 아래와 같이 애플리케이션 이름, 버전 번호, 사용될 아이

cocoon1787.tistory.com

[WEB] manifest.json은 무슨 역할을 할까?

알 수 없는 사용자 — Thu, 27 Apr 2023 00:17:57 +0900

manifest.json은 웹 애플리케이션에 대한 메타데이터를 제공하여 웹 애플리케이션을 다운로드할 수 있도록 하는 파일입니다. 파일 내에는 아래와 같이 애플리케이션 이름, 버전 번호, 사용될 아이콘 및 애플리케이션에 대한 다른 세부 정보와 같은 정보를 포함합니다.

manifest.json를 통해서 웹 앱도 PWA(Progressive Web App)의 기술 중 하나인 "설치" 기능을 제공하여 웹을 데스크톱 또는 모바일에 설치를 가능하게 하고, 모바일 앱과 유사한 경험을 지원할 수 있습니다.

short_name : 화면에 설치된 아이콘의 이름
name : 애플리케이션의 이름
strat_url : 해당 애플리케이션을 실행하면 이동하는 주소
display : 표시 방법에 관련된 속성입니다.
- fullscreen : 전체 화면
- standalone : 상단 URL bar 제거
- minimal-ui : standalone에서 일부 UI를 추가적으로 표시
- browser : 일반적인 브라우저 창으로 보임(URL bar 표시)
orientation : 기기의 방향
- portrait : 세로 모드
- landscape : 가로 모드
theme_color : 애플리케이션의 시스템 UI 색을 지정
background_color : 애플리케이션의 배경색
icons : 애플리케이션이 사용할 아이콘 배열

{
  "short_name": "Todo List App",
  "name": "Todo List App",
  "start_url": ".",
  "display": "standalone",
  "orientation": "portrait",
  "theme_color": "#ffffff",
  "background_color": "#ffffff",
  "icons": [
    {
      "src": "icons/apple-touch-icon-57x57.png",
      "sizes": "57x57",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-60x60.png",
      "sizes": "60x60",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-72x72.png",
      "sizes": "72x72",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-76x76.png",
      "sizes": "76x76",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-114x114.png",
      "sizes": "114x114",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-120x120.png",
      "sizes": "120x120",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-144x144.png",
      "sizes": "144x144",
      "type": "/image/png"
    },
    {
      "src": "icons/apple-touch-icon-152x152.png",
      "sizes": "152x152",
      "type": "/image/png"
    },
    {
      "src": "icons/favicon-512x512.png",
      "sizes": "512x512",
      "type": "/image/png"
    },
    {
      "src": "icons/favicon.ico",
      "sizes": "64x64",
      "type": "/image/icon",
      "purpose": "any maskable"
    }
  ]
}

manifest.json 파일을 추가한 웹 서비스 예시 (안드로이드)

아이폰의 경우 사파리 앱 중앙 하단에 공유 버튼을 탭 하여 "홈 화면에 추가"로 아이콘 생성이 가능합니다.

[IT] 출퇴근 시간 지하철에서 틈틈이 보는 개발자 커뮤니티 '커리어리'

알 수 없는 사용자 — Sat, 1 Apr 2023 22:03:36 +0900

2023년 개발자 채용 혹한기 속에서도 여전히 개발자를 꿈꾸는 사람들의 수는 지속되고 있으며, 빠르게 변화하는 개발 트렌드나 Q&A, 채용, 사이드프로젝트, 네트워크 등등의 수요를 충족시켜 줄 커뮤니티가 많이 생겨나고 있는 것 같습니다. 그중에서도 제가 시간 날 때마다 짬짬이 보는 careerly에 관해 소개를 시켜드릴까 합니다.

커리어리 | 요즘 개발자 커뮤니티 커리어리

개발 트렌드, Q&A, 탑 개발자들과의 네트워킹까지. 누구나 쉽고 간편하게 성장할 수 있도록. 요즘 개발자들의 필수 커뮤니티

careerly.co.kr

프로그래밍 질문이나 개발자 트렌드, 자기 계발, 시니어 개발자들의 피드 등등 출퇴근길이나 심심할 때 커리어리 눈팅만 해도 생각보다 많은 것을 알게 되었던 것 같습니다.

커리어리는 무슨 사이트인가요?

커리어리는 개발자 커뮤니티 사이트로, 개발 트렌드부터 Q&A, 네트워킹까지, 누구나 쉽게 성장할 수 있도록 국내외 다양한 분야의 IT기업 현직 개발자들이 직접 자신의 커리어 경험과 지식을 공유해 주는 서비스를 제공해 주는 사이트입니다.

스택오버플로우는 여전히 개발자에게서 떼려야 뗄 수 없는 개발자 필수 커뮤니티이지만, 네카라쿠배당토처럼 현재 유명한 IT 기업에 재직 중이신 개발자분들도 활동 중이시며, 시니어 개발자들의 콘텐츠 피드, 프로그래밍 Q&A를 할 수 있는 커리어리도 정말 유용한 서비스라고 생각이 됩니다.

IT업계는 5년만 지나도 기술 스택이나 트렌드가 빠르게 바뀌는 생태계이기 때문에 이러한 시장 상황에서 살아남기 위해서는 개발자들이 현재 어떠한 기술을 많이 사용하고 있고, 개발자 채용 시장 트렌드가 어떠한지 빠르게 파악할 필요가 있다고 생각합니다. 저의 경우는 Frontend 개발자이기 때문에 2021년도부터 React로 개발을 시작하였지만 리액트 이전의 웹 개발은 jQuery로 했었다는 것만 알고 있고, 또 3년 혹은 5년 뒤에도 React를 대체할 언어가 올 것이라 예상하고 있습니다.

검색 서비스 또한 존재하는데 궁금한 부분이나 특정 주제를 검색하여 관련된 포스팅을 볼 수 있습니다.

특히나 제가 커리어리를 사용해 보면서 가장 좋다고 느꼈던 서비스는 대기업에서 Frontend 개발자로 재직 중이신 분들을 팔로우하고 TOP 개발자들의 실무 이야기를 읽어볼 수 있었던 점인데요..!

쉽게 접할 수 없었던 실무에 대한 내용이나 기술 관련 포스팅 등등에서 유용한 정보들을 얻을 수 있었습니다. 저 또한 아직은 다른 사람의 경험을 통해서 배움을 얻는 주니어 개발자이지만, 윗분 들처럼 내가 배운 경험을 통해 다른 사람들에게 영감을 주고 선한 영향력을 행사할 수 있는 좋은 개발자가 되고 싶다는 생각이 들어 커리어리 글 포스팅도 고려를 해봐야겠다는 생각도 들었습니다.

그리고 개발자 Q&A나 사이드프로젝트 탭을 둘러보고 커리어리가 개발자들의 네트워크를 구축하고 커뮤니티 역할을 잘할 수 있는 서비스라고 생각이 들었습니다. 개발을 하다가 막힐 때, 스택오버플로우나 ChatGPT로 해결이 안 되는 부분이 생길 때, 커리어에 대한 고민이 있을 때 편하게 질문을 올리고 국내 개발자들과 언어적 제약을 느끼지 않고 최적화된 네트워킹이 가능하다는 점이 장점인 것 같습니다.

- 웹 : https://careerly.co.kr/?utm_source=social&utm_medium=21&utm_campaign=49&utm_content=ma9pie

커리어리 | 요즘 개발자 커뮤니티 커리어리

개발 트렌드, Q&A, 탑 개발자들과의 네트워킹까지. 누구나 쉽고 간편하게 성장할 수 있도록. 요즘 개발자들의 필수 커뮤니티

careerly.co.kr

- 앱 :https://careerly.onelink.me/Gbs9/ma9pie

커리어리 | 요즘 개발자 커뮤니티 커리어리

개발 트렌드, Q&A, 탑 개발자들과의 네트워킹까지. 누구나 쉽고 간편하게 성장할 수 있도록. 요즘 개발자들의 필수 커뮤니티

careerly.onelink.me

[VSCODE] typescript 파일에서 빨간줄 에러가 도배되는 현상

알 수 없는 사용자 — Wed, 22 Mar 2023 00:09:00 +0900

요즘 typescript를 공부 중인데 다른 레포를 클론 후 분석하려고 할 때 typescript파일을 열면 바로 빨간 줄 에러가 도배되는 현상이 있었습니다. 해당 문제로 해결 방법이 없나 마음속으로 불편했었는데 오늘 드디어 해결법을 찾게 되었습니다.

해당 문제의 원인은 오류라기보다는 typescript 버전에 따른 문제였습니다.

F1을 누른 후 typescript 검색

Typescript 버전 선택 클릭

확인해보면 VS Code 버전 사용이 선택되어 있습니다.
이 부분에서 작업 영역 버전 사용을 클릭하여 해당 작업 영역의 node_modules typescript 버전과 맞춰줍니다.

버전을 맞춰주게 되면 도배되었던 빨간 줄 에러가 모두 사라지게 되는 것을 확인할 수 있습니다.

요즘 핫한 ChatGPT 사용후기 (feat. Todo App 만들기)

알 수 없는 사용자 — Wed, 22 Feb 2023 12:00:21 +0900

요즘 가장 핫한 기술인 대화형 인공지능(AI) 서비스 ChatGPT를 소개해드리려고 합니다.

What is ChatGPT?

ChatGPT는 GPT(Generative Pre-trained Transformer)라는 대화에 최적화되어 훈련된 언어 모델을 기반으로, 인공지능 회사인 Open AI에서 출시한 AI기반의 챗봇 서비스입니다. ChatGPT의 경우 질문에 대한 이해력과, 문장력이 뛰어나며 마치 사람과 대화를 나누듯 원하는 정보를 얻을 수 있습니다.

‍ How to use

https://chat.openai.com/auth/login

현재는 ChatGPT 베타버전이 무료로 공개되어 있기 때문에 무료로 사용이 가능하지만 곧 유료 서비스로 전환될 예정이기 때문에 유료로 전환되기 전에 한번 체험해 보시는 것을 추천드립니다.

사용방법은 위의 URL로 접속하셔서 회원가입을 하시면 바로 사용할 수 있습니다.

회원가입 후 ChatGPT 홈으로 이동하시면 ChatGPT의 질문 예제, 할 수 있는 일, 제한사항, 질문 검색창이 있습니다.

질문을 검색하시면 위와 같이 ChatGPT가 딥러닝 기술을 통해 답변을 해줍니다.

Make a TodoList App with React

사실 이 글을 포스팅하는 이유는 ChatGPT로도 코딩이 가능하다는 점을 보여드리기 위해서 작성하게 되었습니다. 프론트엔드 개발자로서 "과연 인공지능 챗봇에서 만들어진 코드가 실제로 동작할까?"라는 의구심이 들었고 ChatGPT로 TodoList 만드는 법에 대해 질문을 하였고 나온 답변을 토대로 코드를 실행해 보았습니다.

실제로 프로젝트를 생성 후 ChatGPT에서 나온 답변대로 src 폴더에 TodoList.js, TodoList.css를 추가하고 App.js를 수정하였습니다.

// App.js
import React from 'react';
import TodoList from './TodoList';

function App() {
  return (
    <div>
      <TodoList />
    </div>
  );
}

export default App;

// TodoList.js
import React, { useState } from 'react';
import './TodoList.css';

function TodoList() {
  const [tasks, setTasks] = useState([]);
  const [newTask, setNewTask] = useState('');

  const handleNewTaskChange = (event) => {
    setNewTask(event.target.value);
  };

  const handleAddTask = (event) => {
    event.preventDefault();
    if (newTask.trim() !== '') {
      setTasks([...tasks, { text: newTask, completed: false }]);
      setNewTask('');
    }
  };

  const handleToggleCompleted = (index) => {
    const newTasks = [...tasks];
    newTasks[index].completed = !newTasks[index].completed;
    setTasks(newTasks);
  };

  return (
    <div className="TodoList">
      <h1>Todo List</h1>
      <form onSubmit={handleAddTask}>
        <input
          type="text"
          placeholder="New task..."
          value={newTask}
          onChange={handleNewTaskChange}
        />
        <button type="submit">Add</button>
      </form>
      <ul>
        {tasks.map((task, index) => (
          <li key={index}>
            <label className={task.completed ? 'completed' : ''}>
              <input
                type="checkbox"
                checked={task.completed}
                onChange={() => handleToggleCompleted(index)}
              />
              {task.text}
            </label>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

// TodoList.css
.TodoList {
  max-width: 600px;
  margin: 0 auto;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

h1 {
  margin-top: 0;
}

form {
  display: flex;
  margin-bottom: 10px;
}

input[type="text"] {
  flex: 1;
  padding: 5px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 3px;
}

button {
  padding: 5px 10px;
  font-size: 16px;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 3px;
  cursor: pointer;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

label {
  display: flex;
  align-items: center;
  flex: 1;
  font-size: 16px;
  cursor: pointer;
}

label.completed {
  text-decoration: line-through;
}

input[type="checkbox"] {
  margin-right: 10px;
}

npm start

ChatGPT로 간단한 Todo List App이 완성되었습니다. 진짜로 코드가 돌아가서 많이 신기했고, 질문에 따라 Todo List App 개발방법에 대해 조금씩 다른 답변을 해주는 것 같습니다. 실사용은 무리가 있겠지만 React를 시작한 지 얼마 안 되었거나 Todo List 작동 원리에 대해 공부를 하신다면 꽤나 도움이 될만한 코드인 것 같습니다.

프론트엔드 기술 면접 질문 리스트 모음

알 수 없는 사용자 — Mon, 30 Jan 2023 11:00:49 +0900

구글, 티스토리, 깃헙 등등 프론트엔드 면접에서 자주 물어보는 질문 자료들을 직접 정리하여 만든 사이트입니다.
PWA(Progressive Web App)를 적용하여 반응형 모바일 웹앱으로 개발을 하였고,
모바일에서 앱을 설치하여 사용할 수 있습니다.

저도 출퇴근할 때 지하철에서 폰으로 보면서 유용하게 사용 중입니다

프레임워크는 Next.js, React 최신버전 18.2.0, 스타일링은 Styled component 라이브러리인 Emotion을 사용하여 프로젝트를 개발하였고, Vercel로 배포하고 있습니다.

사이트 링크

https://frontend-interview-question.vercel.app/

프론트엔드 면접질문

기존 클래스형 컴포넌트의 Lifecycle method(componentDidMount, componentDidUpdate, componentWillUnmount)을 대체하는 hook으로, 컴포넌트가 마운트, 업데이트, 언마운트될 때 특정 작업을 실행할 수 있습니다. useEffec

frontend-interview-question.vercel.app

깃헙 링크

https://github.com/ma9pie/frontend-interview

GitHub - ma9pie/frontend-interview

Contribute to ma9pie/frontend-interview development by creating an account on GitHub.

github.com

모바일 Install (Android)

우측 상단 설정(점 3개) 클릭 후 홈 화면에 추가 터치

홈 화면에 추가 후 서비스 이용

안드로이드의 경우 크롬에서 우측 상단 점 3개 표시를 클릭하여 "홈 화면에 추가" 클릭
사파리의 경우 사파리 앱 중앙 하단에 공유 버튼을 탭 하여 "홈 화면에 추가" 클릭

✨업데이트 내역

2023-02-18
- 코드 리팩토링 및 검색 기능 추가

목록 리스트

객체 지향 프로그래밍에 대해 설명해주세요.
프로세스와 스레드의 차이에 대해 설명해주세요.
멀티 프로세스와 멀티 스레드의 차이에 대해 설명해주세요.
Stack과 Queue의 차이에 대해 설명해주세요.
List, Map, Set의 차이점을 설명해주세요.
라이브러리와 프레임워크의 차이점을 설명해주세요.

JavaScript

Sync와 Async의 차이점을 설명해주세요.
Blocking과 Non-Blocking의 차이를 설명해주세요.
콜백함수에 대해 설명해주세요.
콜백지옥의 의미와 콜백지옥을 해결하는 방법을 설명해주세요.
Promise와 Async, Await의 차이를 설명해주세요.
map과 forEach의 차이를 설명해주세요.
var, let, const의 차이를 설명해주세요.
메서드 체이닝에 대해 설명해주세요.
일반 함수와 화살표 함수의 차이
this의 의미를 설명해주세요.
함수 선언형과 함수 표현식의 차이를 설명해주세요.
호이스팅에 대해 설명해주세요.
이벤트 버블링과 이벤트 캡처링에 대해 설명해주세요.
이벤트 전파와 이벤트 위임에 대해 설명해주세요.
클로져에 대해 설명해주세요.
렉시컬 스코프에 대해 설명해주세요.
스코프와 스코프 체인에 대해 설명해주세요.
실행 컨텍스트에 대해 설명해주세요.
프로토타입과 프로토타입 체인에 대해 설명해주세요.
깊은복사와 얕은복사의 차이점을 설명해주세요.
구조 분해 할당(destructuring) 대해 설명해주세요.
spread 문법과 rest 문법의 차이에 대해 설명해주세요.
ES6에서 생긴 큰 변화들에 대해 설명해주세요.
Ajax에 대해 설명해주세요.
import와 require의 차이점에 대해 설명해주세요.
npm에 대해 설명해주세요.
package.json과 package-lock.json의 역할에 대해 설명해주세요.
typescript를 쓰는 이유에 대해 설명해주세요.
null, undefined, undeclared, NaN에 대해 설명해주세요.
자바스크립트 데이터 타입에 대해 설명해주세요.
mutable과 immutable에 대해 설명해주세요.
throttle과 debounce에 대해 설명해주세요.
iterable, iterator, generator에 대해 설명해주세요.
자바스크립트 동작 원리에 대해 설명해주세요.

React

DOM에 대해 설명해주세요.
Virtual DOM에 대해 설명해주세요.
클래스형 컴포넌트와 함수형 컴포넌트의 차이를 설명해주세요.
React의 장점과 단점을 설명해주세요.
JSX에 대해 설명해주세요.
브라우저는 JSX 파일을 읽을 수 있나요?
재조정(Reconciliation) 개념에 대해서 설명해주세요.
state와 props의 차이를 설명해주세요.
자식 컴포넌트에서 props를 변경할 수 있나요?
React Hooks에 대해 설명해주세요.
React Lifecycle에 대해 설명해주세요.
useState에 대해 설명해주세요.
useEffect에 대해 설명해주세요.
useEffect와 useLayoutEffect의 차이 대해 설명해주세요.
state를 직접변경하지 않고 setState를 사용하는 이유를 설명해주세요.
React rendering 성능을 향상시키기 위한 방법들을 설명해주세요.
Props drilling의 개념과 Props drilling을 피하는 방법에 대해 설명해주세요.
전역 상태 관리 방법에 대해 설명해주세요.

Frontend

브라우저 주소창에 google을 입력하면 발생하는 일을 설명해주세요.
브라우저 렌더링 과정을 설명해주세요.
DNS에 대해 설명해주세요.
REST API에 대해 설명해주세요.
Webpack, Babel, Polyfill에 대해 설명해주세요.
SPA, CSR, SSR의 차이를 설명해주세요.
CORS가 무엇인지, 해결해 본 경험이 있으신지 말씀해주세요.
Sementic Markup에 대해 설명해주세요.
HTML에서의 attributes와 properties의 차이점을 설명해주세요.
로컬 스토리지, 세션 스토리지, 쿠키에 대해 설명해주세요.
Event loop와 Task queue에 대해 설명해주세요.
MVC, MVVM 패턴에 대해 설명해주세요.
HTTP와 HTTPS의 차이점을 설명해주세요.
페이지 로드 시간을 줄이는 방법들에 대해서 설명해주세요.
테스트 코드를 작성하신 경험이 있으신가요?
웹 서비스 배포 시스템 구축 경험이 있으신가요?
CI/CD에 대해 설명해 주세요.

기타

자기소개 부탁드립니다.
회사 지원 동기가 어떻게 되시나요.
프론트엔드 포지션을 선택한 이유가 어떻게 되시나요?
최근에 경험했던 기억에 남는 에러에 대해 말씀해주세요.
요즘 공부중이시는 것에대해 설명해주세요.
새로운 기술을 습득하기 위해 어떠한 방식으로 연구하시나요?
협업을 하면서 갈등이 생겼던 경험이 있으신가요?
개발 도중에 발생하는 에러에 대해 보통 어떻게 대처하시나요?

[JavaScript] navigator.vibrate로 모바일 웹뷰 진동 기능 추가하기

Cocoon_ — Sun, 29 Jan 2023 18:17:39 +0900

요즘 대부분의 모바일 기기는 vibration 하드웨어를 포함하고 있습니다.
Android, IOS로 만든 서비스들을 보면 진동 기능이 거의 필수이지만 일반적인 웹 같은 경우에는 데스크톱을 사용하기 때문에 진동 기능을 잘 사용하지 않습니다. 하지만 모바일 웹뷰의 경우에는 진동 기능이 필요한 경우가 많으며 해당 기술을 vibration API를 통해 구현이 가능합니다.

참고로 IOS 모바일 기기(또는 사파리 등등)에서는 해당 API를 지원하지 않기 때문에 진동 기능이 동작하지 않습니다.

/**
 * 진동 함수
 * @param {Number} ms millisecond
 */
const vibration = (ms = 10) => {
  navigator.vibrate =
    navigator.vibrate ||
    navigator.webkitVibrate ||
    navigator.mozVibrate ||
    navigator.msVibrate;
  if (navigator.vibrate) navigator.vibrate(ms);
};

참고

https://shapeshed.com/html5-vibrate-api/
https://developer.mozilla.org/ko/docs/Web/API/Vibration_API

Algorithm Skills

알 수 없는 사용자 — Tue, 10 Jan 2023 20:43:21 +0900

[BOJ RANK]

2020.04.12

2020.12.07

2020.12.23

2021.02.01

2021.03.01

2021.03.22

2021.03.31

처음 정답비율이 23%정도였는데 35%까지 올라온것을 보면 점점 실력이 느는것 같다.

[Solved.ac RANK]

2020.12.06 골드 V 달성

2020.12.23 골드 IV 달성

2020.12.28 골드 III 달성

2021.02.01 골드 II 달성

2021.03.01 골드 l 달성 (레이팅 시스템 업데이트로 인한 승급)

2021.03.22 플레 V 달성

롤 실력은 만년 브론즈이지만, 백준 랭크만큼은 플래티넘 가보자. (2020.12.28)

(경축) 드디어 플래티넘 달성!! ㅜ.ㅜ 플래티넘 달성하니 다이아도 가보고싶은 생각이 드네요... (2021.03.22)

2021.03.31 백준 500 solve.

백준 500문제 풀이 달성 (2021.03.31)

[React] Next.js - Parsing error: Cannot find module 'next/babel' 에러

알 수 없는 사용자 — Tue, 10 Jan 2023 00:17:19 +0900

Parsing error: Cannot find module 'next/babel'

Next.js로 프로젝트를 구성하던 도중 해당 에러가 발생하여 해결 방법을 공유드립니다.

해결 방법

프로젝트 루트에 .babelrc 파일을 생성하고 프로젝트 루트에 있는 .eslintrc.json 파일을 수정합니다.

.babelrc

{
  "presets": ["next/babel"],
  "plugins": []
}

.eslintrc.json

{
  "extends": ["next/babel","next/core-web-vitals"]
}

위와 같이 파일을 생성하고 수정하면 babel parsing error가 사라지게 됩니다.

Goodbye 2022, Hello 2023

알 수 없는 사용자 — Sun, 1 Jan 2023 00:00:12 +0900

작가 Harryarts 출처 Freepik

2022년도 회고록

1, 2월에 사이드 프로젝트를 진행하면서 취업준비를 했었고 2월 말에는 어디라도 들어가서 경력을 쌓자는 생각으로 jumpit에서 5곳을 지원했었다. 그중에서 4곳은 서류탈락을 하게 되었지만, 운 좋게 한 곳의 연락을 받아 3월 10일 면접을 보러 갔었고 바로 면접 후 바로 다음날 합격 통보를 받아 설레는 마음으로 3월 16일에 첫 출근을 하게 되었다.

회사는 강남에 위치한 암호화폐 거래소였고 개발팀 인원은 20명이 안 되는 작은 회사였다. 업무는 기존의 웹 서비스를 갈아엎고 9월에 새로운 2.0 웹 서비스를 오픈하는 Frontend 업무였다. 하지만 인원이 적다 보니 대부분 신입인 젊은 조직이었고 5월까지 Frontend 인원이 나 혼자여서 삽질하는 시간이 꽤나 길었었다. 특히나 트레이딩뷰로 거래소 차트를 구현하는 과정에서 관련 레퍼런스도 적었으며 도저히 해결이 안 될 때는 본사에 이메일로 문의를 하거나 디스코드로 트레이딩뷰 개발자에게 직접 영어로 질문도 하고 그랬었다.

그리고 가장 힘들었었던 부분이 소켓으로 많은 데이터를 받을 때 사이트가 버벅거린다는 것이었는데, 해당 문제를 해결하기 위해 관련 부분을 하나씩 분리하면서 렌더링 비용이 큰 부분을 찾아내어 계속해서 코드를 최적화하고 속도를 개선하기 위해 많은 노력을 했었었다. 또한 일이 많다 보니 오전 9시에 출근하여 오후 11시에 퇴근을 하거나 주말에도 출근하여 업무를 하는 날이 잦았었다. 물론 몸이 힘들고 많이 피곤하긴 했었어도 워낙 React를 좋아하고 Frontend 업무가 적성에 너무나도 맞아 일하는 게 재미있었다. 그리고 사내에 좋은 사람들, 좋은 환경 덕분에 회사생활도 즐거웠었다. 다른 회사를 거쳐온 신입 동료들도 이렇게 자유롭고 즐겁고 재미있게 회사생활 할 수 있는 곳이 흔치 않다는 말을 했었었다.

다들 열심히 한 끝에 9월 27일에 2.0 서비스를 오픈하였고 오픈 전후로 1개월간 굉장히 바쁜 나날을 보냈었다. 현재는 어느 정도 서비스가 안정화되어 그렇게 급하게 일하지 않아도 되었고 야근과 주말 출근으로 다져진(..?) 개발 노하우와 지식으로 빠르게 일처리를 할 수 있게 되었다.

2022년도는 업무에 몰두하면서 이뤄낸 성과에 대해 만족스러운 한 해였고, 고생한 나 자신에게 정말 고맙고, 고생 많았다고 말해주고 싶다.

2023년도 도전과 다짐

사이드 프로젝트

사이드 프로젝트에 대한 나의 생각은 "회사에서 시도해보지 못했었던 새로운 기회"라고 표현을 하고 싶다. 물론 사이드 프로젝트를 한다는 것 때문에 회사 업무에 지장이 가면 안 되며, 항상 1순위는 회사 업무여야 한다. 퇴근 후 집에 오면 아무것도 하기 싫고, 주말에 남들 쉴 때 사이드 프로젝트 한다는 것이 정말 힘든 일이라는 것을 대부분의 직장인들은 공감할 것이다. 그렇기 때문에 나의 개발에 대한 열정을 보여줄 수 있는 부분이 바로 사이드 프로젝트이고, 새로운 라이브러리, 새로운 기술과 패턴을 사용해보면서 회사에서는 채울 수 없었던 부분을 채울 수 있는 장점이 있다.

매번 사이드 프로젝트 하는 것에 대해 미루고 미루시는 분들에게 "시작이 반이고 허술해도 괜찮으니 일단 시작하는 게 좋습니다."라는 말을 전해드리고 싶다.

타입 스크립트 기반 TodoList
Upbit OPEN API Websocket을 이용한 미니 거래소 앱
요기요 음식점 API를 이용한 배달 앱
토스 앱 클론코딩

알고리즘

2020년도, 2021년도에는 취업을 준비한다고 백준에서 알고리즘 문제를 많이 풀곤 했었는데, 취직을 하게 되면서 알고리즘 문제를 풀지 않은지 꽤나 오래되었었다. 그 당시에는 "알고리즘 공부가 회사 업무에 큰 도움을 줄까?"라고 의구심이 들었었는데, 회사 업무를 하면서 느낀 것은 예전 알고리즘 문제를 풀려고 고민하고 또 고민했었던 과정이 실직적인 문제 해결력에 큰 영향을 준다는 점이었다. 자바스크립트로 서버 데이터를 다루면서 "어떻게 하면 깔끔하게 로직을 짜고 시간복잡도를 줄일 수 있을까?"라는 생각을 항상 하면서 개발을 했었다. 그만큼 알고리즘이 중요하다고 생각되며 2023년도에는 많이는 아니더라도 꾸준하게 알고리즘 문제를 풀 것이다.

프로그래머스 LEVEL 4 달성하기
프로그래머스 문제 풀기 (주당 최소 4개)

CS 지식 및 자격증

cs지식이 당장 업무에는 관련 없을지라도 기본적인 소양으로 가져야 할 중요한 지식으로 생각이 된다. 인터넷으로 검색을 하다가 포스팅할만한 cs 주제를 찾게 되면 google task에 쌓아두는 편인데 현재 80개나 쌓이게 되었다. 꾸준하게 배운 지식을 공부하면서 블로그에 포스팅을 할 것이다. 또한 2023년도는 그동안 해보지 못했던 자격등 취득도 해볼 예정이다.

cs지식 관련 포스팅 하기 (주당 최소 2개)
정보처리기능사 자격증 취득
정보처리기사 자격증 취득

건강

예전에는 등산도 많이 가고 했었는데 요즘은 운동도 잘 안 하게 되고 맨날 앉아서 일하다 보니 살이 많이 찌게 되었다. 앞으로는 야식은 물론, 먹는 양을 좀 줄일 수 있도록 노력하고 좀 덜 바빠지면 헬스장도 등록해서 다이어트를 해야겠다는 생각이 들었다.

2월에 헬스장 등록하기
야식 자제하기

블로그

처음에 React를 배울 때 나의 선생님과도 같은 분이신 벨로퍼트(vlpt)님의 글들을 보면서 공부를 많이 했었다. 회사 일을 하면서 정보도 많이 찾아보고 공부도 많이 했었는데, 그동안 배운 지식들을 정리할 시간이 없었던 것 같다. 2023년도에는 벨로퍼트님처럼 react 관련 글을 많이 작성하고 자바스크립트에 대해 심도 깊은 공부 및 관련 포스팅을 많이 작성하는 것을 목표로 할 것이다.

React 관련 포스팅 하기 (주당 최소 3개)
Javascript 관련 포스팅 하기 (주당 최소 3개)
일 조회수 1만명 달성하기

2022년도 어느 때와 같이 정말 순식간에 지나가버렸지만 다들 고생 많으셨으며,
2023년도에도 알차게 보내시길 바랍니다..! 감사합니다.

[HTML/CSS] Footer 하단 고정

Cocoon_ — Wed, 7 Dec 2022 20:24:16 +0900

모바일 웹의 경우에는 하단에 footer 대신 navigationBar를 position: fixed; 하기도 하는데,
일반적인 사이트의 경우 위와 같은 형식으로 레이아웃이 구성되어 있습니다.

HTML 구조

  <body>
    <header>header</header>
    <div id="wrap">
      <div id="content-wrap">
        <div>content-wrap</div>
      </div>
    </div>
    <footer>footer</footer>
  </body>

대략적인 HTML 구조는 위와 같습니다.
일반적으로 header와 footer에 height를 60px씩 주고 wrap에 height로 200px정도를 주면
다음과 같은 결과가 나오게 됩니다.

    <style>
      html,
      body {
        height: 100%;
        padding: 0px;
        margin: 0px;
      }

      header {
        height: 60px;
        background-color: #e9eaed;
      }

      #wrap {
        height: 200px;
      }

      footer {
        height: 60px;
        background-color: #e9eaed;
      }
    </style>

footer영역 아래로 공간이 남게 되어 좋지 않은 레이아웃을 보여주게 됩니다.

이제 CSS 코드를 수정해봅시다.

CSS 코드 수정

    <style>
      html,
      body {
        height: 100%;
        padding: 0px;
        margin: 0px;
      }

      header {
        height: 60px;
        background-color: #e9eaed;
      }

      #wrap {
        min-height: calc(100% - 120px);
      }

      footer {
        height: 60px;
        background-color: #e9eaed;
      }
    </style>

#wrap부분만 바뀌었습니다.
전체 화면 영역에서 header와 footer부분이 각각 60px씩 총 120px을 차지하고 있으므로
#wrap 영역의 min-height를 calc(100% - 120px)로 설정하면 footer을 하단에 고정시킬 수 있습니다.

전체 코드

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      html,
      body {
        height: 100%;
        padding: 0px;
        margin: 0px;
      }

      header {
        height: 60px;
        background-color: #e9eaed;
      }

      #wrap {
        min-height: calc(100% - 120px);
      }

      footer {
        height: 60px;
        background-color: #e9eaed;
      }
    </style>
  </head>
  <body>
    <header>header</header>
    <div id="wrap">
      <div id="content-wrap">
        <div>content-wrap</div>
      </div>
    </div>
    <footer>footer</footer>
  </body>
</html>

[React] safari/iOS 에서 정규식 Invalid regular expression 에러 해결

Cocoon_ — Sun, 24 Jul 2022 20:02:46 +0900

SyntaxError: Invalid regular expression: invalid group specifier name

Next.js, React로 구성된 웹페이지에서 크롬이나 안드로이드에서는 오류가 발생하지 않지만 사파리나 아이폰에서 웹사이트 접속 시 위와 같은 에러가 발생하였습니다.

에러 원인

구글링하여 찾아본 결과 크롬에서는 작동하지만 파이어폭스 또는 사파리에서는 작동하지 않는 x(?<=y) x(?<!y)와 같은 정규표현식 lookbehind 문법을 사용한 것이 문제의 원인이었습니다.

기존 코드

let number = 1000000.123;
     return number.toString().replace(/\B(?<!\.\d*)(?=(\d{3})+(?!\d))/g, ",");

//returns 1,000,000.123

위와 같은 정규식에서 ?<! 과 같은 표기법은 최신 기법으로 익스, IOS, Safari에서 통하지 않는 스크립트입니다.

따라서 아래와 같이 수정하여야 합니다.

수정 코드

let number = 1000000.123;
     return number.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");

//returns 1,000,000.123

[CSS] Transition 성능 최적화 (애니메이션 버벅거림 해결)

Cocoon_ — Sat, 9 Jul 2022 17:24:36 +0900

Next.js로 만든 홈페이지의 배너를 제작하면서 슬라이더를 구현하고 테스트 중 버벅거리는 현상을 발견하였습니다. 사실 이미지의 크기가 작으면 애니메이션이 버벅거림 문제는 발생하지 않지만 큰 사이즈의 이미지를 사용하자마자 이러한 문제가 발생해서 UX적으로 굉장히 좋지 않다고 판단하였고 이를 해결하기 위해 이미지를 최적화할 수 있는 방법에 대해서 알아보았습니다.

배너 이미지 크기

배너 이미지 크기가 꽤 큰편

슬라이더 버튼 클릭 시 버벅거림 발생

작은 사이즈의 이미지(24KB)의 경우

큰 사이즈의 이미지 애니메이션보다 부드러움

사실 사용할 이미지를 미리 최대한 압축해서 사용하여 성능을 끌어올릴 수 있지만 저는 개발자이기 때문에(?) 최악의 케이스를 염두에 두고 코드로서 최적화할 수 있는 방법이 있는지 찾아봤습니다.

스타일 적용 순서

  left: ${(props) => `${props.left}px`};
  transition: left 0.2s ease;

위의 배너 슬라이더 애니메이션을 구현하면서 transtion 속성을 사용하였는데 먼저 웹브라우저에 스타일이 어떤 순서로 적용되는지 알아보겠습니다.

1. Style

브라우저가 객체에 적용할 스타일의 값을 계산 및 재계산

2. Layout

브라우저가 객체의 모양과 위치 생성

<적용되는 속성>

position	display	overflow	overflow-y
width	height	min-width	min-height
padding	margin	border	border-width
top	bottom	left	right
font	font-family	font-size	font-weight
white-space	line-height	vertical-align	float
clear

3. Paint

브라우저가 객체 영역의 픽셀들을 채움

<적용되는 속성>

color	background	visibility	text-deocration
background-image	background-position	background-repeat	background-size
outline	outline-color	outline-style	outline-width
border-radius	border-style	box-shadow

4. Composite

브라우저가 레이어(z-index) 순으로 객체를 화면에 그림

transform

opacity

스타일 성능 최적화

위의 순서에 따라 Layout 속성을 바꾸면 Paint, Composite 순서를 거치기 때문에 성능 저하가 발생하고 이를 Reflow라 합니다. 또한 Paint 속성을 바꾸면 Composite 순서를 거치기 때문에 성능 저하가 발생하고 이를 Repaint라 합니다.

따라서 최대 성능을 위해 최대한 적은 순서를 거치도록 Composite 속성만 바꿔야 합니다.

.banner{
    left: -100px;
    transition: left 0.2s ease;
}

.banner-move .banner{
    left: 0px;
}

.banner{
    transform: translateX(-100px);
    transition: transform 0.2s ease;
}

.banner-move .banner{
    transition: none;
}

첫 번째 코드에서는 left가 변할 시 Layout->Paint->Composite 순서를 거치게 되고
두 번째 코드에서는 transform이 변할 시 Composite 순서만 거치게 됩니다.

  left: ${(props) => `${props.left}px`};
  transition: left 0.2s ease;

하지만 저의 경우 Next.js에서 Styled-components를 사용 중이고 배너의 개수가 고정된 것이 아닌 가변적인 여러 개의 배너를 띄울 수 도 있고 적용되는 스타일의 값이 변하므로 항상 Style->Layout->Patin->Composite의 모든 순서를 거치게 됩니다. 즉, 다른 방법을 모색해야 합니다.

will-change 속성

will-change: 속성명;

will-change 속성은 브라우저에게 값이 변경될 속성에 대한 힌트를 미리 지정해주어 앞으로 동적으로 변화할 값을 알고 부드러운 이벤트를 구사할 수 있게 해주는 속성입니다.

GPU 가속을 이용하여 애니메이션의 프레임을 최대로 끌어올릴 수 있습니다.

그러나,

MDN web docs에 있는 글에 따르면 이 속성을 너무 남발해서는 안된다고 합니다. 이미 페이지가 잘 돌아간다면 사용하지 말고 당장의 성능 문제를 빠르게 해결하기 위한 마지막 수단으로 사용되기 위해 만들어진 속성이며, 너무나도 많은 will-change의 사용은 과도한 메모리 사용과 복잡한 렌더링을 초래할 수 있다고 합니다.

또한 will-change 속성은 애니메이션이 종료되었을 때 속성을 제거해주는 것을 권장하고 있습니다.

will-change: auto;

비교샷

(아래의 코드에서 props는 리액트 컴포넌트에 전달하기 위한 값으로 해당 styled-component에 left값을 변수로 내려주는 역할을 한다고 보시면 될 것 같습니다.)

bannerNum에 따라 다른 left값을 props로 전달

transition : left

 left: ${(props) => `${props.left}px`};
 transition: left 0.2s ease;

transition : transform

 transform: ${(props) => `translateX(${props.left}px)`};
 transition: transform 0.2s ease;

transition : left + whill-change

left: ${(props) => `${props.left}px`};
transition: left 0.2s ease;
will-change: transform;

transition : transform + whill-change

transform: ${(props) => `translateX(${props.left}px)`};
transition: transform 0.2s ease;
will-change: transform;

will-change를 사용 후 애니메이션 속도가 확실히 빨라진 것을 체감하였습니다. 그러나 너무 남발하면 안 될 것 같은 속성이고 급한 불을 끄기 위한 속성 같아 보입니다. 따라서 사이트의 속도를 최대로 끌어올리기 위해서는 근본적인 문제(이미지의 크기, 압축, 최적화)를 해결해야 하지 않을까 싶습니다.

참고

https://aproid.github.io/2019/03/21/transition-optimize/

https://developer.mozilla.org/ko/docs/Web/CSS/will-change

[React] Warning: validateDOMNesting(...): <p> cannot appear as a descendant of <p>. 오류 해결

Cocoon_ — Wed, 22 Jun 2022 19:48:44 +0900

페이지를 개발하다가 만난 오류!

무슨 문제인가 구글링하여 찾아보니 p태그 내부에 p태그를 넣으면 생기는 오류라고합니다.

오류메시지 안에 답이 있었는데

오류 메시지 제대로 읽지도않고 자동반사로 ctrl+c, ctrl+v로 구글링해서 찾아봤네요

[OS] 페이징(Paging)과 세그멘테이션(Segmentation)

Cocoon_ — Thu, 9 Jun 2022 05:49:06 +0900

어떠한 프로그램을 실행할 때, 컴퓨터에서는 프로그램들을 메모리 공간에 연속적으로 할당하게 됩니다. 만약 여러 프로그램들이 메모리에 할당되고 해제되는 것이 반복되다 보면 메모리 공간이 조각조각 나뉘게 되어 총메모리가 충분함에도 불구하고 프로그램에 메모리를 할당하는 것이 불가능한 상태가 발생하게 됩니다. 이러한 현상을 바로 메모리 단편화라고 하며, 이번 포스팅은 메모리 단편화 해결방법인 페이징과 세그멘테이션에 대해 알아보도록 하겠습니다.

추천 링크 - [메모리 단편화란?]

https://cocoon1787.tistory.com/859

사전 지식

메모리 관리 기법

연속 메모리 기법
- 프로그램 전체가 메모리에 연속적으로 할당
- 고정 분할 기법 : 메모리가 고정된 파티션으로 분할. 내부 단편화 발생
- 동적 분할 기법 : 파티션들이 동적으로 생성되고 자신의 크기와 같은 파티션에 메모리 할당. 외부 단편화 발생
불연속 메모리 기법
- 프로그램의 일부가 서로 다른 주소 공간에 할당될 수 있는 기법
- Page : 프로세스를 고정된 크기로 나눈 블록
- Frame : 메모리를 고정된 크기로 나는 블록
- Segment : 서로 다른 크기의 논리적 블록

가상 메모리

실제 메모리 크기와 관계없이 메모리를 사용할 수 있도록 가상 메모리 주소를 사용
프로세스의 일부분만 메모리에 로드하고 나머지는 보조 기억 장치(가상 메모리 공간)에 할당
MMU(Memory Management Unit)를 통해 논리 주소, 물리 주소를 나누어서 사용
가상 주소를 주기억장치의 실제적인 주소로 매핑(Mapping)하는 방법을 통해 구현

페이징(Paging)

프로세스의 주소 공간을 고정된 사이즈의 페이지 단위로 나누어 물리적 메모리에 불연속적으로 할당하는 방식
메모리는 Frame이라는 고정크기로 분할되고, 프로세스는 Page라는 고정크기로 분할됨
페이지와 프레임은 크기가 같음
페이지와 프레임을 대응시키는 page mapping 과정이 필요하여 paging table을 생성해야 함
연속적이지 않은 공간도 활용할 수 있기 때문에 외부 단편화 문제 해결
페이지 테이블에는 각 페이지 번호와 해당 페이지가 할당된 프레임의 시작 물리 주소를 저장

But, 프로세스의 크기가 페이지 크기의 배수가 아닐 경우 마지막 페이지에 내부 단편화가 발생하고 페이지의 크기가 클수록 내부 단편화가 커짐
=> 페이지 단위를 작게 하면 내부 단편화 문제도 해결할 수 있겠지만 page mapping 과정이 많아지므로 효율이 떨어짐

세그멘테이션(Segmentation)

프로세스를 서로 크기가 다른 논리적인 블록 단위인 세그먼트(Segment)로 분할하여 메모리에 할당
각 세그먼트는 연속적인 공간에 저장
세그먼트들의 크기가 서로 다르기 때문에 프로세스가 메모리에 적재될 때 빈 공간을 찾아 할당하는 기법
페이징과 마찬가지로 mapping을 위한 segment table 필요

But, 프로세스가 필요한 메모리 공간만큼 메모리를 할당해주기 때문에 내부 단편화 문제는 발생하지 않지만, 중간에 메모리를 해제하면 생기는 외부 단편화 문제가 발생

⚖️ Paging vs Segmentation

Paging은 고정 크기를 가짐
Segmentation은 가변 크기를 가짐
Paging은 내부 단편화 발생 가능, Segmentation은 외부 단편화 발생 가능

[OS] 메모리 단편화(Memory Fragmentation)란?

Cocoon_ — Wed, 8 Jun 2022 10:57:10 +0900

메모리 단편화(Memory Fragmentation)의 정의

컴퓨터에서 프로그램을 실행하거나 작업을 할 때 컴퓨터는 메모리에 해당 프로그램을 올리고 실행을 하게 됩니다.
이때 주기억장치 상에서 빈번하게 기억 장소가 할당되고 반납됨에 따라 메모리 공간이 작은 조각 공간으로 나뉘게 될 경우, 사용 가능한 메모리가 충분함에도 불구하고 메모리 할당이 불가능한 상태가 발생하게 되는데, 이를 메모리 단편화라고 합니다.

메모리 단편화의 종류로는 내부 단편화와 외부 단편화가 있습니다.

내부 단편화

주기억장치 내의 실행 프로그램보다 사용자 영역이 커서 메모리 할당 후 사용되지 않고 남아있는 공간을 의미

<예시>
메모장을 실행시키고 OS가 4KB만큼의 메모리를 할당해주었지만 사실상 1KB만큼만 사용하고 있을 때 필요 이상으로 프로세스가 메모리를 할당받았기 때문에 내부 단편화가 3KB만큼 생김

외부 단편화

주기억장치 내의 사용자 영역보다 실행 프로그램이 커서 프로그램이 메모리가 할당되지 않고 남아있는 공간을 의미
메모리가 할당되고 해제되는 작업이 반복적으로 일어날 때 발생

<예시>
메모리 처음 주소에 프로세스를 4KB만큼 할당하고 바로 이어서 8KB만큼의 메모리를 또 다른 프로세스에게 할당했다고 가정할 때, 4KB만큼의 메모리를 할당하고 있던 프로세스를 종료시키면 메모리의 처음 주소부터 4KB만큼의 공간이 생기게 되고 이런 식으로 계속해서 빈 메모리 공간 생기게 되면 전체적으로 메모리 여유는 있지만 메모리를 많이 잡아먹는 프로세스를 실행시킬 수 없는 현상

[OS] 교착상태(Deadlock, 데드락)의 정의, 발생 조건, 해결 방법

Cocoon_ — Wed, 8 Jun 2022 03:14:51 +0900

안녕하세요. 이번 포스팅은 NSC 전공시험이나 신입 기술면접에서도 자주 등장하는 주제인
교착상태(Deadlock)에 대해 한번 알아보고자 합니다.

교착상태란?

교착상태란 두 개 이상의 프로세스가 자원을 점유한 상태에서 서로 다른 프로세스가 점유하고 있는 자원을 요구하며, 서로의 작업을 끝나기만을 기다리며 둘 다 영원히 끝나지 않는 상황을 뜻합니다.

위의 그림과 같이 자동차(프로세스)들이 각각의 도로(자원)를 점유한 상태에서 다른 자동차(프로세스)들이 사용하고 있는 도로(자원)를 사용하기 위해 대기하고 있지만, 도로 위에서 이러지도 저러지도 못하는 상황을 예시로 들 수 있겠습니다.

교착상태의 발생 조건 4가지

교착상태는 아래의 4가지 조건이 모두 만족되는 경우(필요충분조건)에 발생할 가능성이 있으며,
하나라도 만족하지 않으면 교착상태가 발생하지 않습니다.

1. 상호 배제(Mutual Exclusion)

한 번에 한 개의 프로세스만이 공유자원을 사용할 수 있음

2. 점유 대기(Hold and Wait)

프로세스가 할당된 자원을 가진 상태에서 다른 자원을 기다림

3. 비선점(No Preemption)

프로세스가 작업을 마친 후 자원을 자발적으로 반환할 때까지 기다림
(이미 할당된 자원을 강제적으로 빼앗을 수 없음)

4. 순환 대기(Circular Wait)

프로세스의 자원 점유 및 점유된 자원의 요구 관계가 원형을 이루면서 대기하는 조건.
각 프로세스는 순환적으로 다음 프로세스가 요구하는 자원을 가지고 있음

교착상태 해결방법

- 예방(Prevention)

교착상태 예방 방법은 교착상태가 애초에 일어나지 않도록 방지하는 방법으로 교착상태의 발생조건 4가지 중 하나를 부정함으로써 교착상태를 예방하는 방법입니다.

1. 상호 배제 부정

여러 개의 프로세스가 동시에 공유자원을 사용할 수 있음

2. 점유 대기 부정

프로세스가 실행되기 전에 필요한 모든 자원을 할당하여 프로세스 대기를 없애거나, 자원이 점유되지 않은 상태에서만 자원 요청을 받도록 함

3. 비선점 부정

모든 자원에 대한 선점을 허용

4. 순환 대기 부정

자원을 선형으로 분류하여 고유 번호를 할당하고, 각 프로세스는 현재 점유한 자원의 고유번호보다 앞이나 뒤 한쪽 방향으로만 자원을 요구하도록 함

그러나 이렇게 교착상태 발생조건을 방지해서 데드락을 예방하는 방법은 시스템 처리량이나 자원 사용의 효율성을 떨어트리는 단점이 있습니다.

- 회피(Avoidance)

교착상태가 발생할 가능성이 있는 자원 할당(Unsafe allocation)을 하지 않고 안전한 상태(Safe state)에서만 자원 요청을 허용하는 방법입니다. 하지만 교착상태 회피를 하기 위해서는 아래와 같은 가정이 필요합니다.

프로세스 수 고정
자원의 종류와 수 고정
프로세스가 요구하는 최대 자원의 수를 알아야 함
프로세스는 자원 사용 후 반드시 반납

Safe state

safe sequence(교착상태를 발생시키지 않고 자원을 할당하는 순서)가 존재하며 모든 프로세스가 정상적으로 종료될 수 있는 상태를 의미

Unsafe state

교착상태가 발생할 가능성이 있는 상태

교착상태를 회피하기 위한 알고리즘으로 크게 두 가지가 있습니다.

은행원 알고리즘(Banker's Algorithm)

다익스트라가 제안한 기법으로, 은행에서 모든 고객의 요구를 충족할 수 있도록 현금을 대출해주는 것에서 유래하였습니다. 은행원 알고리즘은 자원 할당 결정전에 예상되는 모든 자원의 최대 할당량을 가지고 시뮬레이션을 하여 safe state에 들 수 있는지 여부를 검사하여 교착상태의 가능성을 미리 조사하는 알고리즘입니다.

기본 개념 자체는 "CPU는 최소한 하나의 프로세스에게 할당해줄 만큼의 자원을 항상 보유하고 있어야 한다" 입니다.

<예시> 시스템은 총 12개의 자원을 가지고 있다고 가정

(t=t0)	최대 자원 요청량	할당중인 자원량	남은 필요한 자원의 양
P0	10	5	5
P1	4	2	2
P2	9	2	7

현재 할당 중인 자원량의 합 은 5+2+2 = 9 입니다. 시스템은 총 12개의 자원을 가지고 있으므로 현재 상태에서 가용 자원량은 12 - 9 = 3 이 됩니다.

여기서 가용자원을 어느 프로세스에게 할당해주느냐에 따라서 자원을 효율적으로 이용할 수 있게 됩니다.

남은 가용자원 3개를 P1에게 할당 => 가용자원은 3 - 2 = 1
P1의 작업이 끝나고 할당되어 있던 자원 4개 반납 => 가용자원은 1 + 4 = 5
남은 가용자원 5개를 P0에게 할당 => 가용자원은 5 - 5 = 0
P0의 작업이 끝나고 할당되어 있던 자원 10개 반납 => 가용자원은 0 + 10 = 10
남은 가용자원 10개 중 7개를 P2에게 할당 => 가용자원은 10 - 7 = 3
P2의 작업이 끝나고 할당되어 있던 자원 9개 반납 => 가용자원은 3 + 9 = 12

이렇게 P1 - P0 - P2 순서로 자원 할당 시 Safe sequence를 만족하게 됩니다.

그러나 은행원 알고리즘의 경우 미리 자원의 최대 요구량을 알아야 하고, 할당할 수 있는 자원의 수가 일정해야 하는 등등 사용에 제약조건이 많습니다.

이처럼 교착상태 회피 방법의 가장 큰 문제는 문제 발생에 대한 일관성과 가정이 완벽할 것이라는 것을 보장하기가 현실적으로 어렵다는 점입니다. 시스템의 규모가 작은 운영체제라면 고려해볼 만한 방법이지만, 멀티 리소스, 멀티 프로세스의 복잡한 운영체제 환경에서는 자원 할당 그래프를 분석하면서 Safe state를 파악하기가 상당히 어렵습니다.

자원 할당 그래프 알고리즘(Resource-Allocation Graph Algorithm)

자원 할당 그래프에 예약 간선을 추가하여 예약 간선으로 설정한 자원에 대해서만 자원 할당을 요청할 수 있고 사이클이 형성되지 않을 때만 자원을 할당받는 방법입니다.

자원 할당 그래프 : 프로세스가 어떤 자원을 사용 중이고, 어떤 자원을 기다리는지 방향성 있는 그래프로 표시한 것
예약 간선 : 향후 요청할 수 있는 자원을 가리키는 점선으로 표시된 간선

<예시> 그래프에서 사이클 발생 시 교착상태일 가능성이 있음

상호 배제 : R1, R2, R3, R4
점유 대기 : P1, P2
비선점 : O
순환 대기 : X
=> 교착상태 X

상호 배제 : R1, R2, R3, R4
점유 대기 : P1, P2, P3
비선점 : O
순환 대기 : O
=> 교착상태 O

상호 배제 : R1, R2
점유 대기 : P1, P3
비선점 : O
순환 대기 : O
=> 교착상태 X (P4가 R2를 해제하면 해결)

- 탐지(Detection)

말 그대로 시스템에 데드락이 발생했는지에 대한 여부를 탐색하고 회복 기법 알고리즘에 활용하는 것을 의미합니다. 교착상태가 탐지되었다면 회복 기법을 통해 교착상태를 복구합니다.

그러나 탐지 기법은 지속적으로 교착상태를 확인하는 작업이 필요하기 때문에 오버헤드(성능 저하)가 발생하게 됩니다.

- 회복(Recovery)

교착상태 회복 기법은 교착상태가 발생했을 때 해결하는 기법을 의미합니다.

1. 사용자 처리

교착상태에 있는 프로세스 중 하나의 프로세스를 사용자가 강제 종료

2. 시스템 처리

프로세스 중지
- 교착상태에 속해있는 모든 프로세스를 중지
- 교착상태가 해결될 때까지 한 프로세스씩 중지
자원 선점
- 프로세스들로부터 자원을 빼앗아 교착상태가 해결될 때까지 다른 프로세스들에게 자원을 할당

[AWS] EC2 원격 인스턴스에서 열린 포트 확인 방법

Cocoon_ — Fri, 3 Jun 2022 01:03:30 +0900

sudo netstat -tlnp

[Next.js] 리액트 다크모드 새로고침 시 화면 깜빡임 이슈 해결

Cocoon_ — Fri, 27 May 2022 03:13:21 +0900

다크 모드 새로고침 시 화면 깜빡임

Next.js 프로젝트를 진행하면서 다크 모드를 개발하게 되었는데 다크 모드 상태에서 새로고침 시 흰 화면이 보였다가 어두운 화면으로 바뀌어서 깜빡이는 현상을 발견하였고 이는 UX(사용자 경험)적으로 마이너스가 될 수 도 있을 것 같아서 해결방법을 알아봤습니다.

다크 모드 코드

ToggleTheme.jsx

import React, { useEffect, useCallback } from "react";

const ToggleTheme = ({ changeTheme }) => {
  const setDark = useCallback(() => {
    localStorage.setItem("theme", "Dark");
    document.documentElement.setAttribute("data-theme", "Dark");
    if (changeTheme !== undefined) changeTheme();
  }, [changeTheme]);

  const setLight = () => {
    localStorage.setItem("theme", "Light");
    document.documentElement.setAttribute("data-theme", "Light");
    if (changeTheme !== undefined) changeTheme();
  };

  const toggleTheme = (e) => {
    if (e.target.checked) {
      setDark();
    } else {
      setLight();
    }
  };
  const storedTheme = localStorage.getItem("theme");

  const prefersDark =
    window.matchMedia &&
    window.matchMedia("(prefers-color-scheme: Dark)").matches;

  const defaultDark =
    storedTheme === "Dark" || (storedTheme === null && prefersDark);

  useEffect(() => {
    if (defaultDark) {
      setDark();
    }
  }, [defaultDark, setDark]);

  return (
    <input
      type="checkbox"
      id="checkbox"
      onChange={toggleTheme}
      defaultChecked={defaultDark}
    />
  );
};

export default ToggleTheme;

Test.jsx

import React from "react";
import styled from "@emotion/styled";
import dynamic from "next/dynamic";

const ToggleTheme = dynamic(() => import("@/components/common/ToggleTheme"), {
  ssr: false,
});

function Test() {
  return (
    <Container>
      <Title>다크 모드</Title>
      <ToggleTheme></ToggleTheme>
    </Container>
  );
}

export default Test;

const Container = styled.div`
  width: 300px;
  height: 100px;
  margin: 100px auto;
  text-align: center;
`;

const Title = styled.h1`
  font-size: 50px;
`;

global.scss

* {
  color: var(--font-color);
  background-color: var(--background-color);
  box-sizing: border-box;
}

:root {
  --font-color: #1d212c;
  --background-color: #ffffff;
}

[data-theme="Dark"] {
  --font-color: #ffffff;
  --background-color: #1d212c;
}

새로고침 시 흰색 화면이 나타나 깜빡임

위의 gif처럼 새로고침 시 화면이 번쩍이는 현상을 확인할 수 있습니다.

해결 방법

테마를 변경하는 과정이 DOM 트리가 구성된 후 자바스크립트 파일을 파싱 한 후에 이루어졌기 때문에 처음 흰 화면이 렌더링 되고 그다음 어두운 화면이 렌더링 되어 깜빡임 현상이 발생했던 것입니다. 따라서 테마를 설정하는 시점이 스타일시트를 불러오고, DOM트리가 구성되기 전에 결정되어야 하므로 html 파일의 head에 script 태그로 dangerouslySetInnerHTML를 아래와 같이 설정해주면 화면 깜빡임 현상을 해결할 수 있습니다.

<script
  dangerouslySetInnerHTML={{
    __html: `
              const theme = localStorage.getItem("theme");
              document.documentElement.setAttribute("data-theme", theme);
              console.log(theme);
            `,
  }}
></script>;

pages/_document.js

import { Html, Head, Main, NextScript } from "next/document";

function Document() {
  return (
    <Html>
      <Head>
        <script
          dangerouslySetInnerHTML={{
            __html: `
              const theme = localStorage.getItem("theme");
              document.documentElement.setAttribute("data-theme", theme);
              console.log(theme);
            `,
          }}
        ></script>
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  );
}

export default Document;

리액트의 경우 해당 스크립트 코드를 public/index.html 파일에 심으면 됩니다.

새로고침 시 기존 모드 유지

[React] 리액트 다음 주소 검색 (react-daum-postcode)

Cocoon_ — Thu, 26 May 2022 09:30:28 +0900

react-daum-postcode install

npm install react-daum-postcode

✔️ 다음 주소 검색을 사용할 컴포넌트에 import

import DaumPostcode from 'react-daum-postcode';

코드

/**
 * [Title] Daum 우편번호 검색
 * [Description] 리액트 컴포넌트로 만든 Daum 우편번호 검색 서비스
 * [Usage]
 * @props onComplete {Function} : 우편번호 검색 시 선택한 정보 받아올 콜백함수
 * @props onSearch {Function} : 주소를 검색할 경우 실행되는 콜백함수
 * @props onClose {Function} : 검색 결과선택 후 우편번호 검색이 닫힐때 실행되는 콜백함수
 * @props onResize {Function} : 검색결과로 우편번호 화면 크기가 변경될때 실행되는 콜백함수
 * @props className {String} : 우편번호 검색창을 감싸는 최상위 엘리먼트 ClassName
 * @props style : 우편번호 검색창 최상위 엘리먼트 스타일
 *  @default {width:100%,height:400px}
 * @props scriptUrl {String} : Daum 우편번호 스크립트 주소
 *  @default "https://t1.daumcdn.net/mapjsapi/bundle/postcode/prod/postcode.v2.js"
 * @props defaultQuery {String} : 우편번호 검색창에 기본으로 입력할 검색어
 *  @default undefined
 * @props autoClose {Boolean} : 우편번호 검색 완료시, 자동닫힘 여부
 *  @default true
 * @props errorMessage {React element} : 로드되지 않을때 보이는 에러 메시지
 *  @default "<p>현재 Daum 우편번호 서비스를 이용할 수 없습니다. 잠시 후 다시 시도해주세요.</p>"
 */

import React from "react";
import DaumPostcode from "react-daum-postcode";
import styled from "@emotion/styled";

function SearchAddress(props) {
  const handleComplete = (data) => {
    let fullAddress = data.address;
    let extraAddress = "";
    // console.log(data);
    if (data.addressType === "R") {
      if (data.bname !== "") {
        extraAddress += data.bname;
      }
      if (data.buildingName !== "") {
        extraAddress +=
          extraAddress !== "" ? `, ${data.buildingName}` : data.buildingName;
      }
      fullAddress += extraAddress !== "" ? ` (${extraAddress})` : "";
    }

    console.log(fullAddress); // e.g. '서울 성동구 왕십리로2길 20 (성수동1가)'
  };

  const handleSearch = (data) => {
    // console.log(data);
  };

  return (
    <DaumPostcode
      onComplete={handleComplete}
      onSearch={handleSearch}
      {...props}
    />
  );
}

export default SearchAddress;

SearchAddress.defaultProps = {
  style: {
    width: "700px",
    height: "450px",
  },
};

/**
 * "학동로 31길 12" 입력 시
onComplete {Function}
@return
{
  "q": "학동로 31길 12",
  "count": 1
}

handleSearch {Function}
@return
{
  "postcode": "",
  "postcode1": "",
  "postcode2": "",
  "postcodeSeq": "",
  "zonecode": "06052",
  "address": "서울 강남구 학동로31길 12",
  "addressEnglish": "12, Hakdong-ro 31-gil, Gangnam-gu, Seoul, Korea",
  "addressType": "R",
  "bcode": "1168010800",
  "bname": "논현동",
  "bnameEnglish": "Nonhyeon-dong",
  "bname1": "",
  "bname1English": "",
  "bname2": "논현동",
  "bname2English": "Nonhyeon-dong",
  "sido": "서울",
  "sidoEnglish": "Seoul",
  "sigungu": "강남구",
  "sigunguEnglish": "Gangnam-gu",
  "sigunguCode": "11680",
  "userLanguageType": "K",
  "query": "학동로 31길 12",
  "buildingName": "벤쳐캐슬빌딩",
  "buildingCode": "1168010800100820018000001",
  "apartment": "N",
  "jibunAddress": "",
  "jibunAddressEnglish": "",
  "roadAddress": "서울 강남구 학동로31길 12",
  "roadAddressEnglish": "12, Hakdong-ro 31-gil, Gangnam-gu, Seoul, Korea",
  "autoRoadAddress": "",
  "autoRoadAddressEnglish": "",
  "autoJibunAddress": "서울 강남구 논현동 82-17",
  "autoJibunAddressEnglish": "82-17, Nonhyeon-dong, Gangnam-gu, Seoul, Korea",
  "userSelectedType": "R",
  "noSelected": "N",
  "hname": "",
  "roadnameCode": "4166791",
  "roadname": "학동로31길",
  "roadnameEnglish": "Hakdong-ro 31-gil"
}
 */

https://www.npmjs.com/package/react-daum-postcode

react-daum-postcode

React daum-postcode component. Latest version: 3.0.3, last published: 11 days ago. Start using react-daum-postcode in your project by running `npm i react-daum-postcode`. There are 16 other projects in the npm registry using react-daum-postcode.

www.npmjs.com

[React] "Warning: Unknown event handler property `onToggleBackground`. It will be ignored." 오류 해결

Cocoon_ — Sun, 22 May 2022 22:24:59 +0900

오류 발생

재사용 가능한 토글 컴포넌트를 제작하다가 발견한 오류

해당 속성을 props로 보내는 컴포넌트나 페이지가 있는지 살펴보다가 도저히 해결되지 않아서 구글링 해본 결과....

마침 스택오버플로우에 저와 같은 현상을 경험하신분이 있으셔서 해당 글의 답변을 보고 해결하였습니다.

https://stackoverflow.com/questions/53945281/warning-unknown-event-handler-property-onheaderclick-it-will-be-ignored

Warning: Unknown event handler property `onHeaderClick`. It will be ignored

I am creating Higher order components for passing some props with another component. But getting the warning for Unknown event handler property. export class TableHeaderRow extends React.PureComp...

stackoverflow.com

✔️ 해결

코드에서 onToggleBackground를 사용하였는데 리액트에서 props를 전달할 때 "on"으로 시작하는 단어들을 onClick. onChange와 같이 자바스크립트 이벤트로 가정하고 바인딩을 시도하려고 하기 때문에 발생하는 에러라고 합니다.

[CSS] 클래스 네이밍 시 container와 wrapper의 차이

Cocoon_ — Sat, 21 May 2022 12:59:17 +0900

<div class="container">
    ...
</div>

<div class="wrapper">
    ...
</div>

페이지를 제작하다 보면 공통 요소들이나 단일 요소를 담거나 감쌀 때 container나 wrapper를 많이 사용하게 됩니다. container와 wrapper 모두 일반적으로 어떠한 요소들을 포괄하는 의미를 지니고 있고 클래스 네임으로 많이 사용되는 단어들입니다.

퍼블리싱 업무를 하면서 코드를 보니 문득 제가 container와 wrapper를 혼용해서 사용하고 있다는 사실을 알게 되었고, 해당 단어에 대해 규칙이나 관례가 있는지 한번 찾아보았습니다.

2010년 스택오버플로우에 container vs wrapper 관련 토론 게시글이 있어서 공유드립니다.

https://stackoverflow.com/questions/4059163/css-language-speak-container-vs-wrapper

CSS Language Speak: Container vs Wrapper?

What's the difference between container and wrapper? And what is meant by each?

stackoverflow.com

스택 오버플로우의 내용을 요약하자면

container(컨테이너)

하나 이상의 요소를 포함할 수 있는 구조

✉️ wrapper(래퍼)

단일 개체를 감싸는 것

사탕을 상자에 담는다고 가정했을 때 개별 사탕들을 포장지(wrapper)에 포장한 후 상자(container)에 넣습니다.

프로그래밍적 관점으로 봤을 때도 일반적으로 container는 하나 이상의 요소를 포괄하는 개체를 지칭하고 wrapper는 하나의 개체만을 포함하는 것을 뜻합니다.

<ul class="items-container">
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
    <li class="item-wrapper">
        <div class="item">...</div>
    </li>
</ul>

‍ ‍

하지만 사람들마다 wrapper나 container를 사용하는 방법과 보는 관점, 취향이 다르므로 어느 것이 맞고 어느 것이 틀리다고 단정 지을 수는 없습니다. 저 또한 다른 웹페이지들을 분석했을 때 페이지 html 최상단에 전체를 감싸는 것을 wrapper로 되어 있는 것을 많이 봐왔으며 사람에 따라서 "하나의 페이지를 감싸는 wrapper가 맞다", "아니다 페이지 내의 구성요소들을 담고 있으므로 container가 맞다" 등등 의견의 서로 다를 수 도 있기 때문입니다. 따라서 협업을 할 때 위의 내용을 토대로 팀원 간의 충분한 논의, 협의를 통해서 클래스 네이밍을 하시면 좋을 것 같습니다.

[React] "Error: error:0308010C:digital envelope routines::unsupported" 에러 해결

Cocoon_ — Sun, 15 May 2022 22:44:03 +0900

Error log

Error: error:0308010C:digital envelope routines::unsupported

...

{
opensslErrorStack: [ 'error:03000086:digital envelope routines::initialization error' ],
library: 'digital envelope routines',
reason: 'unsupported',
code: 'ERR_OSSL_EVP_UNSUPPORTED'
}

Node.js v17.0.1

⚙️ 작업 환경

package.json

‍ 해결 과정

어느 날부터 갑자기 위와 같은 오류가 발생하기 시작하였는데 스택오버플로우나 구글링으로 검색 결과 Node.js 버전 17 이상을 제거하고 버전 16을 설치, 명령 프롬프트 창에서 노드 옵션으로 아래와 같이 붙여 넣기 등등을 해봤으나 해결되지 않았습니다.

Linux 및 Mac OS(Windows git bash)-

export NODE_OPTIONS=--openssl-legacy-provider

Windows 명령 프롬프트-

set NODE_OPTIONS=--openssl-legacy-provider

좀 더 찾아본 뒤 package.json의 scripts에서 start 명령어에 옵션을 주어 임시방편으로 해결하는 방법을 알아냈습니다.

"start": "react-scripts start"

에서

"start": "set NODE_OPTIONS=--openssl-legacy-provider && react-scripts start"

으로 변경

그러나 근본적인 문제를 해결하지는 못하였으므로 npx create-react-app으로 생성한 프로젝트로 실행해보니 잘 실행되어 두 프로젝트의 package.json 파일의 차이점을 분석하였고 react, react-dom, react-scripts 패키지를 하나하나씩 업그레이드해보면서 react-scripts의 버전 문제였다는 것을 알게 되었습니다.

️ 해결 방법

react-scripts 버전 업그레이드

$ npm install --save react-scripts@5.0.1

[Next.js] Module not found: Can't resolve 'fs' 오류 해결

Cocoon_ — Sun, 15 May 2022 17:44:46 +0900

Error log

Module not found: Can't resolve 'fs'

fs 모듈은 nodejs의 기본 파일 시스템 모듈입니다. 해당 오류는 일반적으로 클라이언트 측에서 nodejs 라이브러리를 사용하려고 할 때 발생하는 오류입니다. 즉, fs모듈은 컴퓨터의 파일 시스템에 접근하여 읽고 쓰기 위한 것인데 클라이언트(브라우저)에서는 사용이 불가능한 패키지 이므로 오류가 발생하게 된 것입니다.

Next.js로 만든 프로젝트에서 해당 모듈을 찾을 수 없다는 에러를 만나게 되었고 구글링 해본 결과 웹팩을 설정하면 해결이 되는 것을 확인하였습니다.

"Next.js v12.1.6"

package.json

{
  "name": "coin.gg",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "dev": "next dev",
    "build": "next build",
    "start": "next start",
    "lint": "next lint"
  },
  "dependencies": {
    "@emotion/css": "^11.9.0",
    "@emotion/react": "^11.9.0",
    "@emotion/styled": "^11.8.1",
    "axios": "^0.27.2",
    "bootstrap-icons": "^1.8.2",
    "fs": "^0.0.1-security",
    "js-cookie": "^3.0.1",
    "lodash": "^4.17.21",
    "lodash.clonedeep": "^4.5.0",
    "moment": "^2.29.3",
    "net": "^1.0.2",
    "next": "12.1.6",
    "next-i18next": "^11.0.0",
    "react": "18.1.0",
    "react-dom": "18.1.0",
    "request-promise": "^4.2.6",
    "sass": "^1.51.0",
    "socket.io-client": "^4.5.0",
    "styled-components": "^5.3.5",
    "tls": "^0.0.1"
  },
  "devDependencies": {
    "@babel/plugin-transform-runtime": "^7.17.10",
    "eslint": "8.15.0",
    "eslint-config-next": "12.1.6"
  }
}

기존 next.config.js 파일

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
};

module.exports = nextConfig;

️ 해결 방법

Next,js v12에서 webpack4에 대한 지원 제거
(https://nextjs.org/docs/messages/webpack5)

for webpack4

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  webpack: (config, { isServer }) => {
    // Fixes npm packages that depend on `fs` module
    if (!isServer) {
      config.node = {
        fs: 'empty'
      }
    }

    return config
  }
};

module.exports = nextConfig;

for webpack5

/** @type {import('next').NextConfig} */

const nextConfig = {
  reactStrictMode: true,
  webpack5: true,
  webpack: (config) => {
    config.resolve.fallback = { fs: false };

    return config;
  },
};

module.exports = nextConfig;

참고

https://stackoverflow.com/questions/64926174/module-not-found-cant-resolve-fs-in-next-js-application

Module not found: Can't resolve 'fs' in Next.js application

Unable to identify what's happening in my next.js app. As fs is a default file system module of nodejs. It is giving the error of module not found.

stackoverflow.com

[AWS] MobaXterm으로 EC2 접속하기

Cocoon_ — Sat, 7 May 2022 20:51:49 +0900

안녕하세요. 서버를 관리하면서 git bash로 리눅스 명령어를 써가며 폴더를 찾고 해당 파일의 내용을 확인하고 수정하는 작업을 했었었는데 회사에서 환경세팅을 하면서 모바엑스텀(MobaXterm)이라는 프로그램을 알게 되었고 굉장히 유용하게 사용중입니다. 이번 포스팅으로 MobaXterm으로 EC2에 접속하는 방법에 대해 알아보도록 하겠습니다.

️ MobaXterm이 무엇인가요??

PUTTY와 같이 SSH, RDP, SFTP 등등 다양한 네트워크 클라이언트와 터미널을 제공하는 툴입니다. 다른 클라이언트 프로그램들에 비해 훨씬 편리한 세션 연결과 작업들을 지원하기 때문에 꼭 사용하시길 바랍니다!

⬇️ 다운로드 링크

https://mobaxterm.mobatek.net/download-home-edition.html

MobaXterm free Xserver and tabbed SSH client for Windows

The ultimate toolbox for remote computing - includes X server, enhanced SSH client and much more!

mobaxterm.mobatek.net

환경

OS : Windows
MobaXterm 설치
EC2 인스턴스 생성 후 키페어 다운받음

접속하기

1. MobaXterm 실행 후 상단 탭 Session 클릭

2. Session setting에서 SSH, Advanced SSH settings 클릭

3. EC2 정보들을 기입합니다.

Remote host : EC2 세부정보의 퍼블릭 IP4주소 혹은 탄력적 IP 주소
user private key : 다운받은 .pem 키의 경로 선택

4. 세션 접속 후 username 입력

<defalut username>

ubuntu : ubuntu
linux : ec2-user

5. 접속 완료

[OS] 스레드(Thread)란?

Cocoon_ — Mon, 2 May 2022 12:34:35 +0900

스레드의 개념

스레드(Thread)란 프로세스 내에서 실행되는 흐름의 단위를 의미합니다.

일반적으로 하나의 프로그램은 하나의 스레드를 가지고 있지만, 프로그램의 환경에 따라 다수의 스레드를 동시에 실행할 수 있으며 이러한 실행 방식을 멀티스레드(Multi Thread)라고 합니다.

⚖️ 프로세스 vs 스레드

프로세스 : 별도의 메모리 공간에서 실행
스레드 : 동일한 프로세스 내의 공유 메모리 공간에서 실행

스레드의 장단점

장점

스레드는 하나의 프로세스 내의 자원(코드, 데이터, 힙)을 공유하기 때문에 프로세스에 비해 자원 할당 비용이 적게 들고 문맥 교환(Context Swtich) 비용도 적게 듦
다중 스레드의 경우 일부 스레드의 처리가 지연되더라도 다른 스레드에서 작업을 계속 처리할 수 있음
프로세스 간의 통신은 IPC가 필요한 반면, 스레드는 공유(데이터, 힙) 주소 공간을 사용하여 데이터를 교환할 수 있음
프로세스를 생성하여 자원을 할당하는 시스템 콜이 줄어들어 자원을 효율적으로 관리

단점

하나의 스레드에서 발생한 문제가 프로세스 전반에 영향을 미칠 수 있음
자원을 공유하기 때문에 동기화 문제가 발생할 수 있음

스레드의 유형

스레드는 크게 커널 영역과 사용자 영역으로 구분되는데, 이 중 멀티 스레드를 어느 영역에서 구현했느냐에 따라 사용자 수준 스레드와 커널 수준 스레드로 구분할 수 있습니다.

1. 커널 수준 스레드(1 : 1 매핑 방식)

스레드를 OS(커널)이 직접 관리(스레드 생성, 스케줄링 등등)합니다.

장점

커널이 각 스레드를 개별적으로 관리
프로세스 내 스레드들이 병행 수행 가능
하나의 스레드가 block 되어도 다른 스레드는 계속 작업 가능

단점

커널 영역에서 스레드의 생성 및 관리
문맥 교환으로 인한 오버헤드가 큼
사용자 스레드보다 생성 및 관리 속도가 느림

2. 사용자 수준 스레드(N : 1 매핑)

사용자 영역의 스레드 라이브러리로 구현하며, 라이브러리는 스레드의 생성, 스케줄링 담당합니다. 또한 커널은 스레드의 존재를 인식하지 못하기 때문에 커널의 개입을 받지 않습니다.

장점

커널의 개입을 받지 않아 스레드의 생성 및 관리의 부하가 적음
동일한 메모리 영역에서 스레드가 생성 및 관리되므로 속도가 빠름
라이브러리를 통한 이식성이 높음

단점

커널은 프로세스 단위로 자원을 할당하기 때문에 하나의 스레드가 block 될 시 모든 스레드가 대기해야 함
(커널이 프로세스의 내부 스레드를 인식하지 못하여 해당 프로세스를 대기상태로 전환시키기 때문)

3. 혼합 스레드(N : M 매핑 방식)

사용자 수준 스레드와 커널 수준 스레드를 혼합한 구조입니다. 일-대-일 방식과 다-대-일 방식의 문제점을 해결하기 위해 고안되었습니다.

장점

프로세스 내 스레드들이 병행 수행 가능
사용자는 원하는 수만큼 스레드 사용
효율적이면서도 유연함
스레드 풀링 기법을 통해 일대일 스레드 매핑에서의 오버헤드를 줄여줌

스레드 풀링?

시스템이 관리하는 스레드의 풀을 응용프로그램에 제공하여 스레드를 효율적으로 사용할 수 있게 하는 방법.

미리 생성한 스레드를 재사용하도록 하여 스레드 생성 시간을 줄이고 시스템 부하를 덜어줍니다. 그리고 동시에 생성할 수 있는 스레드수를 제한하여 시스템의 자원 소비를 줄이고 해당 응용프로그램의 성능을 일정 수준으로 유지할 수 있습니다.

참고 사이트

https://yoongrammer.tistory.com/55

[ OS] 프로세스의 개념, 상태, 제어

Cocoon_ — Mon, 2 May 2022 02:28:51 +0900

프로세스의 개념

운영체제에서 프로세스는 일련의 작업 단위입니다. 프로그램은 파일이 저장장치에 저장되어 있지만 메모리에는 올라가 있지 않은 정적인 상태이며, 이러한 프로그램을 실행시켜 운영 체제로부터 CPU를 할당받고 실행되고 있는 상태를 바로 프로세스라고 합니다.

메모리에 올라와 실행되고 있는 프로그램
실행 중인 프로시저
운영 체제로부터 시스템 자원을 할당받는 작업의 단위
운영체제에 들어있는 프로세스 제어 블록

즉, 프로세스는 실행 중인 프로그램을 의미하며, 프로그램이 실행 중이라는 것은 디스크에 저장되어있던 프로그램을 메모리에 저장한 뒤 운영체제의 CPU 제어권을 받을 수 있는 상태가 된 것을 의미합니다.

프로세스 메모리 구조

프로세스는 아래와 같이 스택, 힙, BSS, 데이터, 코드로 구성되어 있습니다.

OS Kerner Space : 드라이버 설치
Stack : 지역변수, 매개변수, 후입 선출(LIFO) 방식, 높은 주소에서 낮은 주소의 방향으로 할당됨
Heap : 동적 메모리(new), 선입선출(FIFO) 방식, 낮은 주소에서 높은 주소의 방향으로 할당됨
BSS : Block Started by Symbol, 초기화되지 않은 변수를 위한 영역
Data : 전역 변수, 정적(static) 변수
Text : 상수, 실행할 프로그램의 코드가 저장되는 부분

오버플로우(Overflow)

오버플로우란 말 그대로 넘쳐흐른다는 의미입니다.

한정된 메모리 공간이 부족하여 데이터가 넘친다는 의미로, 힙의 경우에는 낮은 주소에서 높은 주소로 할당되고, 스택의 경우에는 높은 주소에서 낮은 주소로 할당되어 서로의 영역을 침범할 수 있습니다. 이때 힙이 스택 영역을 침범하는 경우를 힙 오버플로우, 스택이 힙 영역을 침범하는 경우를 스택 오버플로우라고 합니다.

‍ 프로세스의 상태

프로세스의 상태는 크게 실행(Running), 준비(Ready), 봉쇄(Blocked || Waiting || Sleep) 세 가지로 분류됩니다.

new : 프로세스 생성 상태
ready : 프로세스 할당 대기 상태
running : 프로세스의 명령어를 실행 중인 상태
waiting : 프로세스가 어떠한 이벤트가 일어나는 것을 기다리는 상태
terminated : 프로세스가 종료된 상태

Admitted [생성 -> 준비] : 준비 큐가 비어있을 때 작업 스케줄러에 의해 실행

Dispatch [준비 -> 실행] : 스케줄러에 의해 준비 큐 맨 앞에 있는 프로세스에게 CPU를 할당

Blocked [실행 -> 대기] : CPU를 할당받은 프로세스가 입출력 작업등으로 인해 명령을 실행할 수 없는 상태

Wake up [대기 -> 준비] : block상태의 프로세스가 입출력 작업이 끝나면 대기 상태에서 준비 상태가 됨

Interrupt [실행 -> 준비] : Timer run out, CPU를 점유 중인 프로세스가 할당된 시간을 모두 사용하여 타임 아웃되거나, CPU 스케줄링 정책에 따라 우선순위가 높은 프로세스로 CPU 디스 패치된 상태

Exit [실행 -> 종료] : 프로세스가 CPU를 할당받아 작업을 모두 수행한 상태

문맥 교환

문맥 교환(Context Switch)란 하나의 프로세스로부터 다른 프로세스로 CPU 제어권이 이양되는 과정을 뜻하는데, 이러한 과정을 CPU 디스패치(Dispatch)라고 합니다. 어떠한 프로세스가 CPU를 할당받고 실행되는 도중 인터럽트가 발생하면 CPU의 제어권은 운영체제로 넘어가게 되고 타이머 인터럽트 처리 루틴으로 가서 수행 중이던 프로세스의 문맥을 저장하고 새롭게 실행시킬 프로세스에게 CPU를 이양합니다. 하지만 프로세스 간 문맥 교환이 빈번하게 발생 시에는 오버헤드가 발생할 수 있습니다.

️ 프로세스 제어블록

프로세스 제어블록(PCB, Process Control Block)이란 운영체제가 시스템 내의 프로세스들을 관리하기 위해 프로세스마다 유지하는 정보를 담는 커널 내의 자료구조를 뜻합니다. 프로세스의 상태 관리와 문맥 교환 때문에 필요합니다.

프로세스 생성 시 PCB 생성
프로세스 종료 시 PCB 제거

PCB 모듈

프로세스 식별자 : PID
프로세스 상태 : CPU 할당 가능 여부
프로그램 카운터 : 다음에 수행할 명령의 위치
레지스터 저장 영역 : 레지스터 관련 정보
프로세서 스케줄링 정보 : 우선순위, 스케줄 큐에 대한 포인터, 다른 스케줄 매개변수 포함
계정 정보 : CPU 사용시간, 계정 번호 등등
입출력 상태 관련 정보 : 프로세스에 할당된 입출력 장치들과 열린 파일 목록 등등

[OS] 컴퓨터 시스템의 기본 구성 요소

Cocoon_ — Mon, 25 Apr 2022 06:57:18 +0900

1. 중앙처리장치(CPU, Centeral Processing Unit)

컴퓨터 동작 제어 및 데이터 처리를 담당하며 중앙처리장치(CPU)라고 부름

산술 논리 장치(ALU, Arithmetic and Logic Unit)
데이터 처리
산술/논리 연산을 수행
제어 장치(CU, Control Unit)
명령어 레지스터에 저장된 명령어 해석
각 컴퓨터의 구성요소를 제어할 제어신호 생성
레지스터(Register)
명령어를 실행하기 위해 필요한 데이터와 상태, 명령어 저장
내부 버스(Internal bus)
CPU 내부의 구성요소 간의 데이터 전달과 연결을 위한 통로

2. 주기억장치(Main memory)

데이터와 프로그램을 저장. 휘발성(volatile) 메모리.
보조 저장장치보다 저장 용량이 적지만 속도가 빠르기 때문에 실행되는 프로그램을 적재하고 있음

3. 입출력 장치(I/O Unit)

사용자 또는 컴퓨터 외부에서 데이터를 입력받고 출력하기 위한 장치

마우스, 키보드, 모니터
랜선
하드디스크

4. 시스템 버스(System bus)

컴퓨터의 각 구성요소 간의 데이터, 신호를 전달하기 위한 데이터 전달 경로

주소 버스
기억장치의 주소 또는 입출력 장치의 포트번호를 지정하고 전달
데이터 버스
컴퓨터 구성 요소들 간에 데이터 전달
제어 신호
각 구성 요소 간 제어신호 전달

[OS] 운영체제의 구성요소

Cocoon_ — Mon, 25 Apr 2022 02:46:51 +0900

운영체제의 구성요소

운영체제는 커널과 인터페이스로 이루어져 있습니다.

커널(Kernel)

프로세스 관리, 메모리 관리, 저장장치 관리와 같은 운영체제의 핵심적인 기능을 모아놓은 부분입니다. 커널의 주요 기능은 컴퓨터에 속한 자원들에 대한 접근을 중재하는 것인데, 구체적으로는 입출력 관리, 자원이 필요한 프로세스에 메모리 할당, 프로세스, 메모리 제어, 프로세스 간의 통신, 파일 시스템 관리, 시스템 콜과 같은 역할을 운영체제 맨 하부에서 수행합니다.

커널 종류

단일형 구조(MS-DOS, VMS)
계층형 구조(Windows 등 오늘날의 대부분의 운영체제)
마이크로 구조(애플의 OS X, IOS)

인터페이스(Interface)

사용자의 명령을 컴퓨터에 전달하고 결과를 사용자에게 알려주는 소통의 역할을 합니다. 운영체제가 제공하는 대표적인 인터페이스로는 GUI, CLI가 있습니다.

시스템 콜(System call)

사용자나 프로그램이 직접적으로 컴퓨터 자원에 대한 접근하는 것을 막고 커널을 보호하기 위해 만든 인터페이스입니다. prinf(), write(), read()와 같이 사용자나 응용 프로그램이 컴퓨터 자원을 사용하기 위해서는 시스템 호출을 사용해야 합니다.

드라이버(Driver)

커널과 하드웨어의 인터페이스를 담당합니다. 운영체제가 각각의 하드웨어에 맞는 인터페이스를 개발하는 것을 비효율적이고 어렵기 때문에 드라이버를 통해 컴퓨터에서 하드웨어를 사용할 수 있게 하는 것이 바로 드라이버입니다. 마우스나 키보드와 같은 하드웨어는 꽂기만 해도 잘 작동이 되지만 복잡한 하드웨어의 경우 제작사가 만든 소프트웨어를 따로 설치해야 하는 경우가 있는데 이러한 소프트웨어를 디바이스 드라이버라고 합니다.

[Node.js] 무신사 상품 재입고 알림 만들기 (ver 1.1)

Cocoon_ — Sat, 26 Mar 2022 22:15:25 +0900

<이전 ver 1.0 개발 포스팅>

https://cocoon1787.tistory.com/741

[Node.js] Node + Kakao API로 상품 재입고 알림 만들기 (ver 1.0)

이제 날이 슬슬 추워지기 시작하는 것 같고 패딩도 좀 필요해서 무신사에서 숏 패딩 하나 구매나 할까 하고 좀 둘러봤습니다. 괜찮은 상품이 있어서 살려했는데 아쉽게도 L, XL 사이즈 모두

cocoon1787.tistory.com

️ 주요 업데이트 사항

메서드 모듈화
여러 상품 크롤링
코드 리팩터링

디렉터리 구조

Run Code

server.js

const crawl = require("./crawl.js");

crawl.restock(1145380, "L");
crawl.restock(1520534, "XL");
...

restock 함수의 첫 번째 파라미터는 itemNum, 두 번째 파라미터는 size

상품의 주소 goods/ 다음 값이 itemNum

사이즈는 해당 상품의 사이즈들

터미널에서 다음을 입력.

node server.js

전체 코드

crawl.js

const scheduler = require("node-schedule");
const cheerio = require("cheerio");
const request = require("request");
const kakaoTalk = require("./kakaoTalk.js");

function restock(itemNum, size) {
  const schedule = scheduler.scheduleJob("*/2 * * * * *", function () {
    let url = "https://store.musinsa.com/app/goods/" + itemNum;
    request(url, function (error, response, html) {
      if (error) {
        throw error;
      }
      const $ = cheerio.load(html);
      const productTitle = $(".product_title em").text();
      const option = $(".option1 option");
      let map = new Map();
      console.log(productTitle);
      for (let i = 1; i < option.length; i++) {
        // console.log(option[i].attribs.value + " " + option[i].attribs.jaego_yn);
        map.set(option[i].attribs.value, option[i].attribs.jaego_yn);
      }

      console.log("사이즈: " + size);
      console.log("재고: " + map.get(size));

      if (map.get(size) === "Y") {
        const msg = productTitle + " " + size + " 재고있음";
        console.log(msg);
        kakaoTalk.sendMessage(msg);
        schedule.cancel();
      }
    });
  });
}

module.exports = {
  restock: restock,
};

kakaoTalk.js

const request = require("request");
const accessToken = "tFcr8OIN47i4J6dgN9JL9FrHHx_6a52OaY4jfAo9dJkAAAF_xjVFJg";
const headers = {
  "Content-Type": "application/x-www-form-urlencoded",
  Authorization: "Bearer " + accessToken,
};

function sendMessage(msg) {
  const dataString = `template_object={
    "object_type": "text",
    "text": "${msg}",
    "link": {
        "web_url": "https://developers.kakao.com",
        "mobile_web_url": "https://developers.kakao.com"
    },
    "button_title": "바로 확인"
}`;
  const options = {
    url: "https://kapi.kakao.com/v2/api/talk/memo/default/send",
    method: "POST",
    headers: headers,
    body: dataString,
  };
  request(options, (error, response, body) => {
    console.log(response.statusCode);
    if (!error && response.statusCode == 200) {
      console.log("메시지 전송 완료.");
    } else {
      console.log(error);
    }
  });
}

module.exports = {
  sendMessage: sendMessage,
};

server.js

const crawl = require("./crawl.js");

crawl.restock(1145380, "L");
crawl.restock(1520534, "LL");

Node.js 크롤링

crawl.js

const scheduler = require("node-schedule");
const cheerio = require("cheerio");
const request = require("request");
const kakaoTalk = require("./kakaoTalk.js");

function restock(itemNum, size) {
  const schedule = scheduler.scheduleJob("*/2 * * * * *", function () {
    let url = "https://store.musinsa.com/app/goods/" + itemNum;
    request(url, function (error, response, html) {
      if (error) {
        throw error;
      }
      const $ = cheerio.load(html);
      const productTitle = $(".product_title em").text();
      const option = $(".option1 option");
      let map = new Map();
      console.log(productTitle);
      for (let i = 1; i < option.length; i++) {
        // console.log(option[i].attribs.value + " " + option[i].attribs.jaego_yn);
        map.set(option[i].attribs.value, option[i].attribs.jaego_yn);
      }

      console.log("사이즈: " + size);
      console.log("재고: " + map.get(size));

      if (map.get(size) === "Y") {
        const msg = productTitle + " " + size + " 재고있음";
        console.log(msg);
        kakaoTalk.sendMessage(msg);
        schedule.cancel();
      }
    });
  });
}

module.exports = {
  restock: restock,
};

상품명 출력

const $ = cheerio.load(html);  
const productTitle = $(".product_title em").text();

옵션 값들 map으로 저장(key : 사이즈, value : 재고 존재 여부)

const $ = cheerio.load(html);
const productTitle = $(".product_title em").text();
const option = $(".option1 option");
let map = new Map();
console.log(productTitle);
for (let i = 1; i < option.length; i++) {
	// console.log(option[i].attribs.value + " " + option[i].attribs.jaego_yn);
	map.set(option[i].attribs.value, option[i].attribs.jaego_yn);
}

해당 사이즈의 재고가 있을 경우 카카오톡 메시지 보내기

if (map.get(size) === "Y") {
  const msg = productTitle + " " + size + " 재고있음";
  console.log(msg);
  kakaoTalk.sendMessage(msg);
  schedule.cancel();
}

✉️ 카카오톡 메시지 보내기

kakaoTalk.js

const request = require("request");
const accessToken = "tFcr8OIN47i4J6dgN9JL9FrHHx_6a52OaY4jfAo9dJkAAAF_xjVFJg";
const headers = {
  "Content-Type": "application/x-www-form-urlencoded",
  Authorization: "Bearer " + accessToken,
};

function sendMessage(msg) {
  const dataString = `template_object={
    "object_type": "text",
    "text": "${msg}",
    "link": {
        "web_url": "https://developers.kakao.com",
        "mobile_web_url": "https://developers.kakao.com"
    },
    "button_title": "바로 확인"
}`;
  const options = {
    url: "https://kapi.kakao.com/v2/api/talk/memo/default/send",
    method: "POST",
    headers: headers,
    body: dataString,
  };
  request(options, (error, response, body) => {
    console.log(response.statusCode);
    if (!error && response.statusCode == 200) {
      console.log("메시지 전송 완료.");
    } else {
      console.log(error);
    }
  });
}

module.exports = {
  sendMessage: sendMessage,
};

⭐️ 카카오 API 액세스 토큰 발급

kakao developers에서 애플리케이션 생성

https://developers.kakao.com/console/app

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

애플리케이션을 추가하고 추가한 애플리케이션을 클릭합니다.

애플리케이션을 생성했으니 이제 아래의 URL로 들어가 봅시다.

https://developers.kakao.com/tool/rest-api/open/post/v2-api-talk-memo-default-send

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

요청 - 인증 앱 부분이 developers-sample로 되어있습니다. 오른쪽에 목록 아이콘을 클릭하여 아까 만들어준 애플리케이션으로 변경시켜 줍니다.

그리고 토큰 발급을 받아보려고 하니....

지금 사용해야 할 기능은 talk_message이지만 활성화할 수 없는 상태입니다. talk_message기능을 활성화해주러 가봅시다.

최상단의 "내 애플리케이션"으로 들어가 생성한 애플리케이션을 클릭해주시고

제품 설정 - 카카오 로그인으로 들어가 주세요.

카카오 로그인을 활성화시켜줍니다.

그리고 이번엔 제품 설정 - 카카오 로그인 - 동의 항목으로 들어가 주세요.

맨 아래쪽 접근권한 - 카카오톡 메시지 전송 - 설정

선택 동의로 체크해줍니다.

https://devtalk.kakao.com/t/topic/60237 (선택 동의, 이용 중 동의 차이점)

동의를 하였으니 이제 아까 페이지로 돌아가서 토큰을 발급받아 봅시다.

https://developers.kakao.com/tool/rest-api/open/post/v2-api-talk-memo-default-send

카카오계정 로그인

여기를 눌러 링크를 확인하세요.

accounts.kakao.com

talk_message 항목이 활성화되었습니다.

선택항목을 체크하고 "동의하고 계속하기"를 눌러주면 토큰 발급됩니다.

발급받으신 토큰을 kakaoTalk.js의 accessToken이라는 변수에 붙여 넣어 주세요.

테스트

server.js

const crawl = require("./crawl.js");

crawl.restock(1145380, "L");
crawl.restock(1520534, "LL");

<상황>

itemNum : 1145380 -> 플리스 집업 자켓 블랙 / L 사이즈 / 재고 있음

itemNum : 1520534 - > 304-ALT 드라이 무지 긴팔티 블랙 / LL 사이즈 / 재고 없음

scheduler 모듈을 통해 2초마다 크롤링하도록 하였고 크롤링 후 재고가 있을 시에 카카오톡으로 메시지를 보내고 scheduler를 종료하도록 하였습니다.

위의 콘솔 창에서 1145380번 상품의 L사이즈 재고를 확인하고 스케쥴러를 종료하여 1520534번 상품만 크롤링되고 있는 것을 확인할 수 있습니다.

물론 카카오톡 나와의 채팅에서는 "플리스 집업 자켓 블랙 L 재고 있음"이라고 메시지가 하나만 와있게 됩니다.

Bug

const crawl = require("./crawl.js");

crawl.restock(9999999, "L");
crawl.restock(1520534, "asdasd");

존재하지 않는 itemNum이거나 사이즈 명이 이상할 경우 위와 같이 출력될 수 있으니 꼭 해당 상품의 itemNum과 사이즈명을 확인하시고 크롤링하시길 바랍니다.

https://github.com/K-Junyyy/MUSINSA-CRWALING

GitHub - K-Junyyy/MUSINSA-CRWALING

Contribute to K-Junyyy/MUSINSA-CRWALING development by creating an account on GitHub.

github.com

[React] 리액트 .js vs .jsx 차이점

Cocoon_ — Fri, 18 Mar 2022 06:37:35 +0900

⏲ TL;DR

jsx는 JavaScript 확장 문법
JavaScript안에서 HTML 사용 가능
jsx 사용이 필수는 아니지만 추천 (리액트 공식 홈페이지 - 문서 - JSX 소개 탭)
기능적인 차이는 없으나 팀 내 협의의 문제

리액트를 공부할 때 js보다 jsx를 쓰는 이유가 "자바스크립트 내에 HTML을 사용할 수 있어서"라고 얼핏 본거 같은데 구체적으로 뭐가 더 왜 좋은지, 대체적으로 뭘 더 많이 쓰는지 몰라서 한번 제대로 알아봤습니다.

JSX란?

JSX는 JavaScript XML의 약자로 자바스크립트에서 XML을 추가한 확장형 문법입니다. 큰 특징은 자바스크립트에서 HTML 문법을 사용할 수 있다는 점이고 주로 리액트나 다른 프론트엔드 프레임워크에서도 사용이 가능합니다.

// jsx
const element = <h1>Hello, world!</h1>;

.js vs .jsx 논쟁

// JS
class Hello extends React.Component {
  render() {
    return React.createElement("div", null, "Hello ", this.props.name);
  }
}

ReactDOM.render(
  React.createElement(Hello, {name: "World"}),
  document.getElementById('container')
);

// JSX
class Hello extends React.Component {
  render() {
    return <div>Hello {this.props.name}</div>;
  }
}

ReactDOM.render(
  <Hello name="World" />,
  document.getElementById('container')
);

https://stackoverflow.com/questions/46169472/reactjs-js-vs-jsx

ReactJS - .JS vs .JSX

There is something I find very confusing when working in React.js. There are plenty of examples available on internet which use .js files with React but many others use .jsx files. I have read abou...

stackoverflow.com

"js vs jsx"라고 구글링 시 가장 먼저 나오는 스택오버플로우 게시물입니다.

질문

답변

<질문>

.js를 사용하는 많은 예시가 있지만 .jsx 또한 많이 사용되는 것 같습니다. 저는 jsx관련 문서를 읽었고 JavaScript안에 HTML을 사용할 수 있다는 점을 알게 되었습니다. 그렇다면 실질적으로 .js와 .jsx의 차이점은 어떻게 되나요?

<답변>

.js와 .jsx의 확장자로서의 차이점은 없으나 jsx가 표준 자바스크립트 문법이 아닌 만큼, Plain하지 않은 자바스크립트가 js파일에 들어가는 것에 대한 논쟁이 있을 수도 있습니다.

요약하자면 기능에는 차이가 없으나 팀 내 convention에 관련하여 js를 쓸 것인지, jsx를 쓸 것인지 협의를 해야 하는 부분이 존재하는 것 같습니다.

그럼 리액트 공홈은?

리액트 공식 홈페이지 JSX 소개 페이지

리액트 공식 홈페이지에서 JSX 관련해서는 자바스크립트 내에서 직관적으로 UI 관련 작업이 가능하고, 개발에 도움을 주는 에러 및 경고 메시지를 표시할 수 있게 해 준다고 하고 있습니다. 뉘앙스 자체는 선호 or 추천하는 듯한 느낌입니다.

⚙️ JSX의 특징

JSX에 표현식 포함

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

ReactDOM.render(
  element,
  document.getElementById('root')
);

JSX 속성 정의

const element = <a href="https://www.reactjs.org"> link </a>;

const element = <img src={user.avatarUrl}></img>;

JSX 태그 자식 포함

const element = (
  <div>
    <h1>Hello!</h1>
    <h2>Good to see you here.</h2>
  </div>
);

XSS(cross-site-scripting) 공격 방지

const title = response.potentiallyMaliciousInput;
// 이것은 안전합니다.
const element = <h1>{title}</h1>;

JSX 객체 표현

const element = (
  <h1 className="greeting">
    Hello, world!
  </h1>
);

const element = React.createElement(
  'h1',
  {className: 'greeting'},
  'Hello, world!'
);

// 단순화된 구조
const element = {
  type: 'h1',
  props: {
    className: 'greeting',
    children: 'Hello, world!'
  }
};

참고

https://ko.reactjs.org/docs/introducing-jsx.html

[CSS] CSS, SASS, SCSS 차이점, 사용방법

Cocoon_ — Fri, 18 Mar 2022 01:54:15 +0900

⏲ TL;DR

SASS와 SCSS는 CSS를 편리하게 사용할 수 있도록 하며 추가 기능 또한 있는 확장판 스크립트 언어
SASS, SCSS에서 기존의 CSS의 기능 부재 단점을 보완한 다양한 기능 추가
SASS는 들여 쓰기+줄 바꿈 형식, SCSS는 중괄호+세미콜론 형식
전 세계적으로 SCSS 사용자 수, SCSS를 활용한 라이브러리&프레임워크 수가 SASS 보다 더 많음
SASS보다 SCSS가 CSS와의 호환성이 더 좋음

SCSS SASS

CSS는 잘 알지만 SASS? SCSS??

CSS : Cascading Style Sheets - 종속형 시트

SASS : Syntactically Awesome Style Sheets - 문법적으로 어썸한 스타일시트

SCSS : Sassy CSS - 문법적으로 짱 멋진(Sassy) CSS

full-name으로 봤을 때 SASS, SCSS 둘 다 문법적으로 어썸한 CSS라는 뜻을 가지고 있습니다. SCSS의 경우 SASS보다 뒤에 나왔고(SASS 3 버전에서 SCSS가 생겨남) 약간의 문법 차이가 있지만 SCSS가 좀 더 넓은 범용성과 CSS의 호환성의 장점을 가집니다. 큰 차이점은 SASS는 중첩으로 들여 쓰기를 사용하고 속성 구분은 줄 바꿈을 이용하지만 SCSS의 경우 중괄호로 중첩을 표현하고 세미콜론으로 속성을 구분합니다.

또한 공식 레퍼런스는 SASS보다 CSS와 더 비슷한 SCSS를 선호한다고 합니다. 그리고 다수의 라이브러리, 프레임워크가 SCSS 문법을 활용하며, 사용자 수는 SASS보다 SCSS가 더 많습니다.

<2012년 css-tricks.com에서 12,712명의 사용자로부터 받은 응답>

사용하는 이유

css가 그렇게 복잡한 언어는 아니지만 프로젝트의 크기가 커지고 고도화될수록 유지보수에 큰 어려움이 생기게 됩니다. 예를 들어 기존의 CSS는 불필요한 선택자(Selector), 연산 기능 한계, 구문(Statement)의 부재의 문제점이 있고 SASS와 SCSS는 이러한 이슈를 해소시켜줄 수 있습니다.

팀 프로젝트로 진행한 CSS 파일 상태 (React 기반 Web)

통상적으로 SASS보다 SCSS를 사용을 많이 하는데 SCSS의 경우 CSS문법과 완벽하게 호환이 되는 장점 또한 가지고 있습니다. 또한 코드의 가속성과 재사용성을 높여주며 심플한 표기법으로 CSS 구조를 평준화할 수 있습니다.

⚙️ 제공하는 기능 / 예시

변수(Variable) 할당
중첩(Nesting) 구문
모듈화(Modularity)
믹스인(Mixins)
확장&상속(Extend/Inheritance)
연산자(Operators)

1. 변수(Variable) 할당

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

/* SCSS */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

자주 사용하는 색이나 폰트 등등 변수로 지정하여 재사용할 수 있습니다.

2. 중첩(Nesting) 구문

/* CSS */
nav ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
nav li {
  display: inline-block;
}
nav a {
  display: block;
  padding: 6px 12px;
  text-decoration: none;
}

/* SCSS */
nav {
  ul {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  li { display: inline-block; }

  a {
    display: block;
    padding: 6px 12px;
    text-decoration: none;
  }
}

중첩기능을 통해 쉬운 구성과 높은 가독성을 가질 수 있습니다.

3. 모듈화(Modularity)

/* CSS */
body {
  font: 100% Helvetica, sans-serif;
  color: #333;
}

.inverse {
  background-color: #333;
  color: white;
}

/* _base.scss */
$font-stack: Helvetica, sans-serif;
$primary-color: #333;

body {
  font: 100% $font-stack;
  color: $primary-color;
}

/* styles.scss */
@use 'base';

.inverse {
  background-color: base.$primary-color;
  color: white;
}

@use를 사용하여 파일을 분할하고 모듈화 할 수 있습니다.

4. 믹스인(Mixins)

/* CSS */
.info {
  background: DarkGray;
  box-shadow: 0 0 1px rgba(169, 169, 169, 0.25);
  color: #fff;
}

.alert {
  background: DarkRed;
  box-shadow: 0 0 1px rgba(139, 0, 0, 0.25);
  color: #fff;
}

.success {
  background: DarkGreen;
  box-shadow: 0 0 1px rgba(0, 100, 0, 0.25);
  color: #fff;
}

/* SCSS */
@mixin theme($theme: DarkGray) {
  background: $theme;
  box-shadow: 0 0 1px rgba($theme, .25);
  color: #fff;
}

.info {
  @include theme;
}
.alert {
  @include theme($theme: DarkRed);
}
.success {
  @include theme($theme: DarkGreen);
}

함수처럼 defalut parameter를 지정할 수 있고 parameter를 받아서 속성을 부여할 수 있습니다. (재사용성)

5. 확장&상속(Extend/Inheritance)

/* CSS */
/* This CSS will print because %message-shared is extended. */
.message, .success, .error, .warning {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

.success {
  border-color: green;
}

.error {
  border-color: red;
}

.warning {
  border-color: yellow;
}

/* SCSS */
/* This CSS will print because %message-shared is extended. */
%message-shared {
  border: 1px solid #ccc;
  padding: 10px;
  color: #333;
}

/* This CSS won't print because %equal-heights is never extended. */
%equal-heights {
  display: flex;
  flex-wrap: wrap;
}

.message {
  @extend %message-shared;
}

.success {
  @extend %message-shared;
  border-color: green;
}

.error {
  @extend %message-shared;
  border-color: red;
}

.warning {
  @extend %message-shared;
  border-color: yellow;
}

@extend 사용 시 css 속성 집합을 상속받을 수 있습니다.

6. 연산자(Operators)

/* CSS */
.container {
  display: flex;
}

article[role="main"] {
  width: 62.5%;
}

aside[role="complementary"] {
  width: 31.25%;
  margin-left: auto;
}

/* SCSS */
@use "sass:math";

.container {
  display: flex;
}

article[role="main"] {
  width: math.div(600px, 960px) * 100%;
}

aside[role="complementary"] {
  width: math.div(300px, 960px) * 100%;
  margin-left: auto;
}

math.div(나누기) 외에도 sin, cos, tan, random, max, min 등등 여러 가지 수학적 기능을 사용할 수 있습니다.

✔️ SASS, SCSS가 적용되는 원리

SASS, SCSS를 CSS pre-processor(전처리기)라고도 하는데 스크립팅 언어이기 때문에 SASS, SCSS로 작성된 파일들은 곧바로 웹에 적용될 수는 없습니다. 웹은 기본적으로 CSS파일로 동작하므로 별도의 컴파일 과정을 거친 다음 CSS파일로 변환하여 사용하게 됩니다.

단점

전처리기를 위한 도구 필요
컴파일 시간 소요

✒️ 마치며

저의 경우 기존의 프로젝트를 진행하면서 프로젝트 크기가 커질수록 CSS파일 수도 많아지고 Div Class명 짓는 것도 굉장히 난감했던 적이 많았습니다. 평소에 선택자를 사용해가면서 CSS를 작성했을 때 코드에 중복되는 부분이 많이 보였고 뭔가 리팩터링 하고 싶은 열망이 있었으나 당시에는 SCSS의 존재를 몰랐었습니다. 최근에 들어서야 SCSS를 알아보게 되면서 새로운 프로젝트에 적용해봤고, 코드 재사용성, 가독성, 유지보수성 등등 많은 차원에서의 이점을 몸소 체험할 수 있었습니다. 물론 간단한 프로젝트이고 코드량이 작다면 그냥 CSS를 쓰는 것이 좋지만 프로젝트의 크기가 커질수록 SCSS 사용의 장점이 두각 되므로 한번 사용해보시는 것을 추천드립니다.

참고

https://sass-lang.com/guide

[리뷰] 쿠팡에서 에어팟 프로(AirPods Pro) 구매후기 & 개봉기

Cocoon_ — Mon, 14 Mar 2022 05:08:26 +0900

기존에 QCY-T5를 쓰다가 언젠가는 에어팟 프로를 사려고 했는데

마침 쿠팡에서 할인도 하고 여유가 돼서 큰맘 먹고 지르게 되었습니다.

2022.03.14

https://www.coupang.com/vp/products/6135671327?itemId=11731447886&vendorItemId=79005405788&pickType=COU_PICK&q=%EC%97%90%EC%96%B4%ED%8C%9F+%ED%94%84%EB%A1%9C&itemsCount=36&searchId=aebc8188e6754927b11b1c10069f9899&rank=1&isAddedCart=

Apple 2021 에어팟 프로 블루투스 이어폰 맥세이프 호환

COUPANG

www.coupang.com

에어팟 프로 언박싱 & 구성품

처음에 상자를 여니 인증서? 설명서? 같은 게 보입니다.

그리고 에어팟 프로입니다.

그 밑에는 케이블과 이어폰 마개가 있습니다.

이어팁은 S, M, L 사이즈가 있으며 기본적으로 에어팟 프로에는 M사이즈가 장착되어있습니다.

그리고 저기 라이트닝 to C타입 케이블은 저처럼 라이트닝 케이블을 사용하는 제품이 없다면 굳이 풀지 않는 것을 추천드립니다. 저걸 다시 박스에 넣으려면 딱 맞게 감아서 정리해야 하는데 좀 힘든 작업입니다...^^;;

에어팟 프로 충전기 구멍은 보시다시피 라이트닝 8핀입니다.

내부와 이어폰은 이렇게 생겼고 저기 마그네틱 부분이랑 뚜껑 맞물리는 곳에 생활 속 철가루가 잘 붙는다고 하여 내일 다이소에서 철가루 방지 스티커나 사볼 예정입니다.

에어팟 프로 근접샷! 이어팁을 뺀 스피커 부분은 저렇게 생겼습니다. 그리고 움푹 파인 곳이 포스 센서 부분입니다. 손가락으로 누르시면 신호음이 나면서 기능을 실행할 수 있습니다.

케이스에 배터리 잔량도 표시됩니다. 에어팟 프로 정말 열롱 하네요....

⚙️ 조작법 & 기능

센서 1번 누름 : 재생/정지(전화받기)
센서 2번 누름 : 다음 곡으로(전화 거절)
센서 3번 누름 : 이전 곡으로
센서 길게 누름 : 노이즈 캔슬링 on/off

솔직 후기

1. 노이즈 캔슬링

솔직히 신세계였습니다... 일단 기본적으로 구매 후 바로 끼자마자 주변 소음이 차단되는 느낌이었고 블루투스 연결해서 음악을 들어보니 더 잘 들리는 기분이었습니다. 그리고 놀랐던 점은 포스 센서 기능 테스트해본다고 노이즈 캔슬링은 끄는 순간 집안에 냉장고 소음이라던지 평소에는 인지 못했던 여러 잡음이 이렇게나 심했나..?라는 생각이 들 정도였습니다. 물론 노이즈 캔슬링을 한 상태로 밖에 나가면 뒤에서 차가 오는지 킥보드가 오는지 잘 안 들릴 수 도 있으니 길거리를 다니실 때는 노이즈 캔슬링을 끄는 것을 추천합니다.

2. 음질

갤럭시 버즈나 에어팟 1,2 세대를 사용해보지는 않았지만 기존에 QCY 제품을 이용하던 저로서는 음질이 너무 좋다고 느끼고 있습니다. 근데 다른 리뷰들을 살펴보니 329,000원이라는 가격에도 불구하고 음질이 밍밍하거나 뭔가 좀 2프로 부족한 음질이라는 평이 꽤나 있는 것으로 보입니다.

3. 디자인

디자인적으로는 기존 에어팟 모델보다 길이가 짧아지고 통통해졌으며 충전케이스 역시 모서리가 둥근 정사각형에 가깝게 변경되었습니다.

4. 배터리

케이스에 넣어 여러 번 충전 시 24시간 이상의 재생시간 또는 18시간 이상의 통화 가능
한 번의 충전으로 최대 4.5시간의 재생시간 또는 최대 3.5시간의 통화 가능
5분 동안 충전하면 약 1시간의 재생시간 또는 약 1시간의 통화 가능

에어팟의 배터리 충전량이 20, 10, 5% 일 때 아이폰 또는 아이패드에 알림을 보내고 배터리 충전량이 10% 혹은 꺼질 때는 한쪽 또는 양쪽의 에어팟에서 신호음을 울립니다.

5. 착용감

평소에 집에 있을 때 컴퓨터를 하면서 이어폰을 오래 착용하는 편입니다. 잠깐 낄 때는 별 문제가 없지만 시간이 지날수록 귀가 살짝 뜨겁고 아픈 느낌이 듭니다. 참지 못할 정도는 아니고 한두 시간 착용하고 10분 정도 쉬어주는 식으로 하면 괜찮을 것 같습니다.

저 같은 경우에는 귀를 막아주고 소리가 울리는 것을 선호해서 오픈형보다는 커널형을 선호하고 디자인이나 음질, 기능 모두 아주 만족스러웠습니다. 노이즈 캔슬링을 경험한 저로써는 이제 다른 무선 이어폰을 끼지 못할 것 같습니다.

에어팟 프로 강추드립니다.

+ 추가로 이어팁 빼는 꿀팁

귀에 맞는 이어팁을 찾으려고 교체하다가 이어팁이 잘 빠지지 않았고 "이거 고무인데 이렇게 세게 당겨도 되나...?"라는 생각이 들어 유튜브로 찾아봤습니다.

1. 이어팁을 뒤집는다.

2. 이어팁의 플라스틱 부분을 잡는다.

이어팁을 자세히 보시면 에어팟 프로 스피커랑 맞물리는 부분이 타원형 플라스틱으로 이루어져 있습니다. 위 사진처럼 손가락 면적을 최대한 넓게 하시고 이어팁의 플라스틱 부분을 잡는다 생각하고 잡아주세요

3. 위아래로 당기면서 이어팁을 분리한다.

이어팁 찢어지면 큰일 납니다... 너무 힘주셔서 하시면 안 되고 위아래로 당기다 보면 톡 하면서 분리가 됩니다. 그리고 플라스틱 부분이 타원형이라 돌려서 빼려고 해도 어차피 안 돌아가니 참고하세요!

[React] 리액트 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달하기

Cocoon_ — Sat, 12 Mar 2022 12:31:58 +0900

리액트에서 부모 컴포넌트의 데이터를 자식 컴포넌트에 전달할 때는 props를 사용하여 간단하게 전달할 수 있습니다.

1. 부모 컴포넌트 -> 자식 컴포넌트

App.jsx

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

function App() {
  const [data, setData] = useState(1);

  return <Child data={data}></Child>;
}

export default App;

Child.jsx

import React from "react";

function Child({ data }) {
  console.log(data);
  return <div>Child</div>;
}

export default Child;

그러나 자식 컴포넌트의 데이터를 부모 컴포넌트로 끌어올려야 하는 상황이 종종 생기고 이러한 문제는 함수를 props로 전달하여 해결할 수 있습니다.

2. 자식 컴포넌트 -> 부모 컴포넌트

App.jsx

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

function App() {
  const parentFunction = (x) => {
    console.log(x);
  };

  return <Child parentFunction={parentFunction}></Child>;
}

export default App;

Child.jsx

import React, { useState } from "react";

function Child({ parentFunction }) {
  const [data, setData] = useState(2);

  parentFunction(data);

  return <div>Child</div>;
}

export default Child;

먼저 부모 컴포넌트에서 함수를 정의하고 이 함수를 자식 컴포넌트에 props로 내려줍니다.

그리고 자식 컴포넌트의 데이터를 부모 컴포넌트에게 전달받은 함수의 인자로 전달하게 되면 자식 컴포넌트에서 부모 컴포넌트로 데이터를 전달할 수 있게 됩니다.

[면접 후기] 프론트엔드 신입 개발자의 면접 후기 (합격)

Cocoon_ — Sat, 12 Mar 2022 01:47:48 +0900

작년 10월부터 5개월간 4인 팀 프로젝트 진행하면서 리액트에 대해 혼자 공부하고 많이 배웠는데 이제 슬슬 여러 곳 지원을 해보려고 점핏에서 저의 기술 스택에 맞는 회사들 5곳을 지원하였습니다. 그중에서 한 곳에서 연락이 와서 어제(2022.03.10) 학동역 쪽에 면접을 보러 갔고 오늘(2022.03.16) 합격 문자 및 입사제의를 받아 면접에서 받은 질문들에 대해 포스팅하고자 합니다. 면접은 2대 1로 진행되었습니다.

포트폴리오에 넣은 프로젝트 간단 설명

1. Polypoli - 관심 있는 국회의원의 피드를 받아볼 수 있는 서비스

http://polypoli.kr/

Polypoli

polypoli.kr

프론트는 리액트로, 백엔드는 스프링 부트로 작업을 하였습니다. 리액트의 경우 클래스형 컴포넌트에 redux를 사용하였고 react-router-dom v5.3.0을 사용하였습니다. 포지션은 풀스택입니다. 아직 개발 중에 있으며 4월에 론칭을 할 예정입니다.

[Service]

관심 있는 국회의원의 정보(국회 회의 출결, 법안 발의 내용 등등)를 인스타그램 피드 형식으로 제공
피드 별 좋아요 & 싫어요 버튼
좋아요 & 싫어요 수 기준 유저에게 가장 관심도가 높은 국회의원 월간 랭킹
이번 주 핫한 법안
현재 팔로잉 중인 국회의원 목록
국회의원 프로필 및 검색 기능

2. Chatting-App

socket.io와 express를 사용한 간단한 채팅 서비스

채팅 서버로 접속 시 Pug로 만든 페이지를 클라이언트로 전송하도록 하였고 사용자는 채팅 및 닉네임 변경이 가능합니다. 유저가 채팅방에 참여, 종료, 닉네임 변경 시 채팅 로그에 알림이 뜨도록 하였습니다.

첫 질문

안녕하세요~ 저는 ~ 직책을 맡고 있는 ~입니다. 반갑습니다.

네 안녕하세요~!

혹시 뭐하다 오셨나요?

저 집에서 프로젝트 작업하다가 왔습니다!

자기소개

자기소개 부탁드립니다.

저는 기계공학과를 졸업하였고 비전공자로 개발 공부를 하고 있습니다. 개발에 관심이 있음을 보이기 위해 2년 전부터 현재까지 개발 블로그를 운영 중이고, 주로 알고리즘 문제풀이, cs지식, 에러 해결법, 언어 문법(메서드 사용법 등등) 관련하여 포스팅하고 있습니다. 작년 10월부터 현재까지 팀 프로젝트를 진행하고 있습니다.

본인의 장단점을 설명해주세요.

장점에 대해 제 평가가 아닌 주변 사람들의 평가로 말씀드리자면 저는 매사에 열정이 넘친다는 얘기를 많이 들었습니다. 대신 단점은 잠이 좀 많다는 것입니다. 하나에 꽂히면 밤늦게까지 붙들고 있어서 늦게 잘 때도 많습니다.

Project 관련 질문

폴리폴리 서비스에 대해 어떠한 서비스인지 설명해주세요.

자신의 지역구 국회의원이 누구인지 잘 모르는 경우가 많고 열려라국회와 같은 국회 사이트에서 원하는 정보를 찾기에는 접근성이 떨어진다고 생각하였습니다. 만약 인스타그램의 피드처럼 자신이 관심 있는 국회의원에 대한 정보를 피드 형식으로 받아볼 수 있으면 좋겠다는 생각에 개발을 시작하게 되었습니다.

로그인, 회원가입, 계정 찾기가 가능하고 메인 페이지의 경우 피드 탭에서는 팔로우 중인 국회의원의 대한 정보, 랭킹 탭에서는... (중략)

그러한 서비스를 제공하고 있습니다.

데이터들은 어디서 받아오시나요?

국회의원 300명에 대한 정보는 공공데이터 포털에서 제공하는 API에서 받아오고 있으며, 국회의원이 발의한 법안 내용의 경우에는 국민참여입법센터에서 node로 크롤링하여 받아오고 있습니다. 공공데이터 포털처럼 API로 제공해주었으면 정말 좋겠는데 아무리 찾아봐도 관련 API가 존재하지 않는 것 같습니다.

아까 전에 오시기 전에 포트폴리오에 있는 polypoli URL로 접속해서 한번 봤는데 문자인증 부분이 적용 안된 것 같습니다.

원래는 실제로 문자인증이 되도록 해야 하는데 다른 부분 작업하느라 바빠서 아직 작업하지 못하였습니다.

로그인을 하지 않고는 피드 탭, 랭킹 탭 등등을 볼 수 있나요?

리덕스로 userKey라는 state를 default로 -1로 주고 로그인 시 store의 uerKey 값을 DB의 PK값으로 업데이트되도록 하였습니다. 그렇기 때문에 꼭 로그인을 하여야 메인 페이지를 볼 수 있도록 하였습니다.

그렇다면 모든 컴포넌트에서 userKey를 검사하여 라우팅 하나요?

최상단에 Router.js라는 파일을 만들어두고 여기에서 store의 userKey를 받아와서 라우팅 처리를 하였습니다.

만약에 사용자가 접속 중에 있다가 네트워크 불안정으로 접속이 끊어졌다고 가정할 때 다시 연결은 어떻게 할까요?

혹시 jwt 같은 웹 토큰 말씀하시는 건가요? 그 부분은 아직 잘 모르겠습니다.

리액트 함수형 컴포넌트가 아닌 클래스형 컴포넌트를 사용하셨는데 이유는?

함수형 컴포넌트에 Hook을 사용하고 싶었으나 팀원이 클래스형 컴포넌트로만 작성이 가능하고 백엔드 개발자 직장인이기도 해서 새롭게 배울 시간이 없어서 클래스형 컴포넌트로 작성하기로 협의를 했습니다. 저는 개인적으로 함수형 컴포넌트를 선호해서 현재 개인 토이 프로젝트로 진행 중인 ToDo List App에서는 함수형 컴포넌트를 사용하고 있습니다. 그러나 프론트엔드 업무 시 이미 작성된 코드(혹은 레거시 코드)들 중에서 클래스형으로 작성된 것도 많을 테니 클래스형 컴포넌트도 어차피 알아야하는 내용이라고 생각합니다.

작년 10월부터 지금까지 프로젝트 진행 중이신데 그럼 리액트 5개월 정도 하신 건가요?

정확히 말씀드리자면 작년 10월부터 12월까지 디자이너가 피그마로 UI 디자인해주었고 그 기간 동안에는 필요한 데이터들을 크롤링하는 작업과 리액트 기초를 공부하였습니다. 리액트를 한 순수 기간으로 따지면 2개월 정도라고 생각합니다.

디자인할 때 부트스트랩을 사용하였나요?

부트스트랩 아이콘을 사용하긴 했는데 디자인에 부트스트랩을 적용하지는 않았습니다.

앱 너비가 고정되어있는 것 같습니다. 폰마다 크기가 다를 텐데 옆에 마진으로 비어있는 부분은 왜 그런가요?

처음에 회의할 때 너비를 아이폰의 너비 기준으로 360px로 고정하기로 협의를 해서 폰마다 옆에 너비가 남는 현상이 있습니다.

채팅 앱 관련해서 어떻게 동작하는지 설명해주세요.

작업은 모두 로컬에서 작업하고 node express로 서버를 열어서 emit 되는 이벤트들을 처리하였습니다. 클라이언트는 Pug로 보여주었고 인스타그램 DM처럼 개인 메시지 가능하고 채팅룸 기능도 구현하였습니다. 이벤트 경우 클라이언트에서 특정 함수를 emit 하면 서버에서 해당 emit을 받아 처리를 하고 다시 클라이언트들에게 emit으로 수정된 내역을 뿌려주는 형식으로 처리하였습니다. 그리고 해당 채팅 내역은 MongoDB에 저장하였습니다.

Pug가 뭔가요?

저도 잘 모르겠습니다.... HTML이랑 비슷하면서도 조금 다른 것이라는 것 밖에 모릅니다... ㅜ

SCSS를 사용해보셨나요?

안 써봐서 잘 모르겠습니다.

Babel을 써보셨나요?

안 써봐서 잘 모르겠습니다.

마크업, 퍼블리싱 작업은 어떻게 하시나요?

디자이너에게 받은 UI를 피그마로 띄워놓고 리액트로 npm start 한 다음 코드 작성하고 새로고침하여 보고 다시 수정하는 식으로 작업합니다. 사실 프론트엔드 실무자분들이 어떻게 작업하는지 궁금하기도 합니다.

⭐️ React 관련 질문

리액트 관련 질문의 경우 이 글을 읽으러 들어오신 분들이 가장 궁금해할 사항이니 저의 답변이 아닌 구글링 하여 찾은 답을 적어놨습니다. 실제 면접에서 아래의 질문을 받았을 때는 70% 이상은 자신 있게 답변했던 걸로 기억합니다.

state와 props의 차이는?

state는 현재 컴포넌트의 생명주기 동안에 변경될 수 있는 정보를 담고 있는 상태이고, props는 부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터입니다.

Props Drilling이란?

Props 내리꽂기란 상위 컴포넌트에서 하위 컴포넌트로 props를 전달하는 과정을 말합니다.

깊이가 깊을수록 그 과정이 귀찮고 힘들며 예기치 못한 오류를 발생시킬 수도 있고 이것에 대한 꼬리 질문으로 이러한 현상을 해결하는 방법(전역으로 state를 관리할 수 있는 redux, context API 사용 등등)에 대한 질문이 나올 가능성이 높습니다.

Redux의 정의, 필요성, 구조에 대해 설명해주세요.

리덕스는 리액트에서 사용되는 상태 관리 라이브러리 중 하나입니다. 프로젝트의 규모가 커지면 state의 전달이 복잡하고 어려워지게 되고 오류가 발생할 가능성이 높아집니다. 리덕스 사용 시 순수 함수를 사용하기 때문에 상태가 예측 가능하고 유지보수 및 디버깅에 유리하다는 이점이 존재합니다.

스토어(Stroe) : 상태가 관리되는 오직 하나의 공간
액션(Action) : 상태 변화를 발생시킬 때 참조하는 객체 (애플리케이션에서 저장소로 보내는 데이터 묶음)
리듀서(Reducer) : 현재 state와 action을 이용해 다음 state를 만들어냄
디스패치(Dispatch) : 액션을 발생시키는 것
구독(Subscribe) : Subscribe 함수 안에 리스너 함수를 파리미터로 넣어주면 store의 state가 변경될 때마다 리스너 함수를 호출

제어 컴포넌트와 비제어 컴포넌트의 차이점은?

제어 컴포넌트의 경우 리액트 state에 의해서 값이 관리 및 변경이 되고, 비제어 컴포넌트의 경우 ref를 통해 DOM 자체에서 form 데이터가 다뤄집니다. 가장 큰 차이점은 동기화인데, 제어 컴포넌트의 경우 사용자가 입력할 때마다 input의 state가 동기화되지만 state가 변경될 때마다 리렌더링이 발생하여 불필요한 자원의 낭비로 이어질 수 있습니다. 반면 비제어 컴포넌트의 경우 입력을 하고 버튼을 누르는 최종적인 상황에서만 input의 value에 접근을 하므로 리렌더링이 계속해서 발생하지는 않지만 입력의 최신 값에 접근하기 힘든 특성이 존재합니다.

Virtual DOM에 대해 설명해주세요.

DOM과 유사한 객체를 메모리 상으로 구현하고 변경사항이 생기면 메모리에 올라간 Virtual DOM을 수정하고. DOM에 대한 비교를 수행하여 변경 사항에 대해서만 DOM에 반영합니다. 이로 인해 더 반응성이 빠른 웹을 구현할 수 있습니다.

리액트 라이프사이클에 대해서 설명해주세요.

React LifeCycle은 컴포넌트가 DOM위에 생성되거나 사라질 때, 혹은 업데이트될 때 호출되는 API입니다.

constructor : 컴포넌트의 생성자 메서드. 컴포넌트 생성 시 가장 먼저 실행되는 메서드. 초기 state를 설정
getDerivedStateFromProps : props로 받아온 것을 state에 넣어주고 싶을 때 사용
render : 컴포넌트를 렌더링 하는 메서드
componentDidMount : 컴포넌트의 첫 번째 렌더링을 마치고 호출되는 메서드. 주로 여기서 비동기 요청 작업 처리
shouldComponentUpdate : 컴포넌트를 리렌더링 할지 말지를 결정하는 메서드
getSnapshotBeforeUpdate : Virtual DOM이 실제 DOM에 반영되기 직전에 실행. 이 메서드에서는 이전과 현재의 props와 state에 접근이 가능하고 return으로 넘겨진 값은 componentDidUpdate의 3번째 인자로 전달됨
componentDidUpdate : 리렌더링을 마치고 화면에 변화가 모두 반영되고 난 뒤 호출되는 메서드
componentWillUnmount : 컴포넌트가 화면에서 사라지기 직전에 호출되는 메서드

함수형 컴포넌트의 장점은?

클래스형 컴포넌트보다 선언이 간편
클래스형 컴포넌트보다 메모리 자원을 절약
프로젝트 빌드 후 배포 시 빌드 파일의 크기가 작음(사실상 별 차이 없음)
리액트 16.8 버전부터 Hook으로 라이프사이클 사용 가능

클래스형 컴포넌트와 함수형 컴포넌트 차이점은?

함수형이 클래스형보다 메모리 덜 사용
state 사용법
함수형이 클래스형보다 사용하기 편함

Context란 무엇인가요?

Props drilling 과정 없이 컴포넌트 트리 전체에 데이터를 제공할 수 있는 방법입니다. 리덕스의 비교대상이 아니며 상태를 관리하는 것이 아닌 Props drilling을 피하기 위해 값을 전달해주는 파이프와 같은 존재입니다.

JSX란 무엇인가요?

JSX는 JavaScript XML의 약자로 자바스크립트에서 XML 유사 구문을 확장시킨 문법입니다. HTML과 같은 문법과 함께 JS를 표현할 수 있어 편리하고 가독성이 높고 작성하기 쉽습니다.

리액트 훅이란?

React Hook은 함수형 컴포넌트에서도 클래스형 컴포넌트의 기능을 사용할 수 있게 하는 기능입니다. Hook을 통해서 함수형 컴포넌트에서도 컴포넌트의 상태 값을 관리할 수 있고 생명주기 메서드 또한 사용이 가능합니다.

Hook이 추가된 리액트 버전은?

version 16.8

쿠키, 세션에 대해 아시나요?

- 쿠키

특정 웹서버에 접속할 때 생성되는 개인 아이디, 비밀번호 등 방문한 사이트 정보를 담은 임시파일
데이터 형태는 Key와 Value로 구성되고 String 형태로 이루어져 있음
서버가 아닌 사용자에게 저장되기 때문에 임의 수정이나 가로채기가 쉬워 보안에 취약
사용자의 브라우저에 저장되기 때문에 클라이언트의 자원을 사용

- 세션

클라이언트와 웹서버 간 네트워크 연결이 지속적으로 유지되고 있는 상태
클라이언트가 페이지를 이동하거나 재접속했을 때 구분할 수 있는 수단
쿠키에 비해 보안성이 좋으며 주로 로그인 정보 유지에 사용됨
서버에 데이터를 저장하기 때문에 서버의 자원을 사용

Props의 Type을 강제하는 방법에 대해 아시나요?

"prop-types"라는 라이브러리를 사용하여 props의 데이터 type을 지정해줄 수 있습니다. props에 유효하지 않은 값이 전달되면 콘솔 창에 경고문을 띄웁니다.

❔ 궁금한 점 있으신가요?

보통 처음 신입으로 들어가면 바로 실무에 투입되지 않고 과제를 받는다고 들었는데 어떠한 과제인지 여쭤봐도 될까요?

회사 By 회사인데 저희 같은 경우에는 따로 과제는 없고 실무에 필요한 트레이딩 뷰와 웹소켓에 대해 배우고 그것만 해도 50% 정도는 했다고 보시면 됩니다.

커피 머신이 있나요? 아니면 아이스티라도,,,,!

에스프레소 머신 있고 아이스티는 없지만 냉장고에 음료수 많습니다.

느낀 점 정리

1. 자기소개도 중요하지만 경험이 가장 중요하다.

이번 면접 과정을 거치면서 경험이 가장 중요하다는 생각이 들었습니다. 회사의 인사담당자분들마다 다르겠지만 채용하려는 지원자의 최소한의 커트라인(예를 들어 리액트로 이 페이지 정도는 3일 안에 완성이 가능한 실력인지 등등)이 있을 것입니다. 저의 경우 작년 10월부터 프로젝트를 하면서 리액트 모르는 게 있으면 구글링 하면서 배워가면서 작업을 해나갔고 그러한 경험 속에서 리액트 관련 지식이 쌓이게 되었습니다. 작년에 면접을 볼 때는 면접 가기 전에 외운 것을 답하느라 많이 횡설수설하고 힘들었으나 이번 면접은 별다른 준비를 하지 않았고 면접 가서 외운 내용이 아닌 머리에 들어있는 개념을 말하는 식으로 면접을 굉장히 편안하게 봤던 것 같습니다. 면접관분들도 아마 질문을 통해 이 지원자가 단순히 외운 내용인지 아니면 몸소 체험하면서 머리에 박힌 개념인지 아실 겁니다.

2. 생각보다 자세히 보신다.

면접관분들도 바쁘시고 자기 업무가 있으시니까 포트폴리오나 이력서에 있는 URL은 잘 안 눌러보신다고 알고 있습니다. 그런데 이번에 면접 본 곳은 이력서에서 깃헙, 블로그, 프로젝트 서비스 링크 모두 들어가 보시고 깃헙 저장소의 package.json의 내용까지도 물어보셨습니다. 정말 꼼꼼하게 이것저것 피드백과 질문을 받았고 가장 인상 깊었던 질문은 "블로그에 광고가 달려있는데 광고수익은 얼마나 되나요? 하루에 스타벅스 커피 한잔...?"이라는 질문을 받았던 게 생각이 납니다

3. 모르는 것은 모른다고 답하자.

친구가 한창 신입으로 일할 때의 경험담인데, 자기 사수가 어떤 것에 대해 아냐고 물었을 때 자기 자신이 자세히 모름에도 불구하고 안다고 대답해놓고 나중에 가서 일처리가 제대로 안되어 문제가 된 적이 있었습니다. 그러한 일을 겪고 저에게 "사수나 면접관이 질문을 할 때 확실하게 알고 있는 부분이면 확실하게 대답하고, 잘 모르는 부분이면 확실하게 잘 모른다고 대답하는 게 중요하다"라고 조언을 해주었습니다. 어차피 추가 질문이 들어오게 되어있고 거기에서 잘 모르는 사실이 들통 하면 마이너스이니까 잘 모르는 부분은 걱정 마시고 확실하게 모르신다고 답하시면 됩니다. 저도 리액트 관련 질문 중에서 잘 모르는 내용은 확실하게 잘 모른다고 답하고 전체 질문 중에서 70% 정도만 답했던 것 같습니다.

✒️ 마침표

진행 중인 프로젝트의 끝이 보이기 시작해서 한번 그냥 지원해봤는데 운 좋게도 면접을 보러 오라고 연락이 왔었고 가벼운 마음으로 면접을 갔었습니다. 면접 가서도 대답도 나쁘지 않게 하고 면접관님들도 저에 대해 궁금한 점이 많으신 것 같고 분위기도 괜찮았었습니다. 그리고 마지막에는 희망연봉도 물어보시던데 면접 끝나고 친구한테 말하니 그거 힌트일 수도 있다고 하더라구요 ㄷㄷ.... 합격 문자는 다음 주 중으로 갈 것이라 해서 오늘 무방비상태로 있었는데 아까 점심때 합격 연락 및 입사 제의가 와서 어안이 벙벙했습니다. 6개월간 준비해서 드디어 취업에 성공했고 이 글을 읽으시는 분들 모두 면접 파이팅 하시길 바라겠습니다! 궁금한 점 있으면 댓글 남겨주세요~

[React] 리액트 setState Callback 함수 사용법

Cocoon_ — Fri, 11 Mar 2022 12:15:43 +0900

리액트에서 setState 후 변경된 state값을 사용하는 경우가 종종 있으며, Callback 함수를 사용하여 해결할 수 있습니다.

setState를 한 뒤 state를 사용하는 경우

코드

import React, { Component } from "react";
import styled from "styled-components";
import "./App.css";

const Wrapper = styled.div`
  display: flex;
  margin: 20px;
`;

const Print = styled.div`
  border-radius: 5px;
  border: 1px solid #6c757d;
  width: 80px;
  height: 30px;
  font-size: 20px;
  text-align: center;
`;

const Button = styled.button`
  background-color: #6c757d;
  border-radius: 5px;
  border: 0px;
  color: white;
  width: 80px;
  height: 30px;
  margin-left: 10px;
  &:hover {
    background-color: #5a6268;
  }
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  onClick = () => {
    this.setState({ counter: this.state.counter + 1 });
    console.log(this.state.counter);
  };

  render() {
    return (
      <Wrapper>
        <Print>{this.state.counter}</Print>
        <Button onClick={this.onClick}>+1</Button>
      </Wrapper>
    );
  }
}

export default App;

버튼을 누르면 state의 counter 값이 +1씩 증가하게 하는 예제입니다.

  onClick = () => {
    this.setState({ counter: this.state.counter + 1 });
    console.log(this.state.counter);
  };

onClick 함수에서 setState로 state를 변경해주고 this.state.counter 출력 시 결과는 아래와 같습니다.

1이 출력되기를 기대했지만 예상과는 다르게 바뀌기 이전 값이 '0'이 출력되었습니다.

Why?

setState 함수는 비동기 함수이기 때문에 이벤트 핸들러 함수에서 바로 값을 갱신하는 것이 아닌 이벤트 핸들러 함수 종료 후 state값이 갱신됩니다.

✔️ 클래스형 컴포넌트의 setState Callback 사용법

<setState 함수의 정의>

setState<K extends keyof S>(
  state: ((prevState: Readonly<S>, props: Readonly<P>) => (Pick<S, K> | S | null)) | (Pick<S, K> | S | null),
  callback?: () => void
): void;

setState함수는 2개의 인자를 받는데 첫 번째 인자는 변경할 state를 전달하며, 두 번째 인자는 state가 변경된 후 실행되는 callback 함수를 전달합니다.

코드

import React, { Component } from "react";
import styled from "styled-components";
import "./App.css";

const Wrapper = styled.div`
  display: flex;
  margin: 20px;
`;

const Print = styled.div`
  border-radius: 5px;
  border: 1px solid #6c757d;
  width: 80px;
  height: 30px;
  font-size: 20px;
  text-align: center;
`;

const Button = styled.button`
  background-color: #6c757d;
  border-radius: 5px;
  border: 0px;
  color: white;
  width: 80px;
  height: 30px;
  margin-left: 10px;
  &:hover {
    background-color: #5a6268;
  }
`;

class App extends Component {
  constructor(props) {
    super(props);
    this.state = { counter: 0 };
  }

  onClick = () => {
    this.setState({ counter: this.state.counter + 1 }, () => {
      console.log(this.state.counter);
    });
  };

  render() {
    return (
      <Wrapper>
        <Print>{this.state.counter}</Print>
        <Button onClick={this.onClick}>+1</Button>
      </Wrapper>
    );
  }
}

export default App;

// function App() {
//   return (
//     <Wrapper>
//       <Print></Print>
//       <Button></Button>
//     </Wrapper>
//   );
// }

  onClick = () => {
    this.setState({ counter: this.state.counter + 1 }, () => {
      console.log(this.state.counter);
    });
  };

따라서 위와 같이 state를 변경하고 callback함수로 변경된 state를 사용할 수 있게 됩니다.

✔️ 함수형 컴포넌트의 setState Callback 사용법

리액트 16.8 이전 버전에서는 함수형 컴포넌트에서 상태를 관리할 수 없었는데, 리액트 16.8 버전에서 Hooks라는 기능이 도입되면서 useState라는 함수를 사용하여 함수형 컴포넌트에서도 상태를 관리할 수 있게 되었습니다.

그러나 useState 함수의 경우 두 번째 인수가 존재하지 않기 때문에 userEffect를 사용하여 변경된 state를 사용해보겠습니다.

코드

import React, { Component, useState, useEffect } from "react";
import styled from "styled-components";
import "./App.css";

const Wrapper = styled.div`
  display: flex;
  margin: 20px;
`;

const Print = styled.div`
  border-radius: 5px;
  border: 1px solid #6c757d;
  width: 80px;
  height: 30px;
  font-size: 20px;
  text-align: center;
`;

const Button = styled.button`
  background-color: #6c757d;
  border-radius: 5px;
  border: 0px;
  color: white;
  width: 80px;
  height: 30px;
  margin-left: 10px;
  &:hover {
    background-color: #5a6268;
  }
`;

function App() {
  const [counter, setCounter] = useState(0);

  const onClick = () => {
    setCounter(counter + 1);
  };

  useEffect(() => {
    console.log(counter);
  }, [counter]);

  return (
    <Wrapper>
      <Print>{counter}</Print>
      <Button onClick={onClick}>+1</Button>
    </Wrapper>
  );
}

export default App;

useEffrct에서 두 번째 인자로 배열에 state를 넣어서 해당 state가 변경(업데이트)되면 useEffect 함수가 실행되도록 하였습니다.

useEffect 추가 설명

  useEffect(() => {
    console.log("마운트 될 때만 실행");
  }, []);

  useEffect(() => {
    console.log("렌더링 될 때마다 실행");
  });

  useEffect(() => {
    console.log("counter가 업데이트 될 때마다 실행");
  }, [counter]);

[HTML/CSS] 텍스트가 넘칠 때 생략하는 방법 (... 말줄임 표시)

Cocoon_ — Fri, 11 Mar 2022 07:21:00 +0900

웹페이지에서 UI를 만들 때 박스 안의 텍스트의 길이가 길어서 해당 영역을 벗어나는 경우 말줄임(...)을 적용해야 하는 방법에 대해서 포스팅해보겠습니다.

✔️ 말줄임 표시 방법

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      body {
        background: #ddd;
      }
      .area {
        margin: 20px 10px;
        width: 240px;
        background: white;
      }

      .white-space {
        white-space: nowrap;
      }

      .overflow {
        overflow: hidden;
      }
    </style>
  </head>
  <body>
    <div class="area">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="area white-space">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
    <div class="area white-space overflow">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </body>
</html>

white-space: no-wrap 속성은 해당 영역 내에 텍스트가 길 때 자동으로 줄 바꿈 하는 것을 방지합니다.
overflow: hidden 속성은 해당 영역을 벗어나는 텍스트를 숨깁니다.

여기서 3번째 div에 대해 말줄임을 적용하기 위해 아래의 css 속성을 추가해줍니다.

text-overflow: ellipsis;

해당 속성 적용 시 텍스트가 영역을 벗어날 때 말줄임을 적용할 수 있습니다.

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      body {
        background: #ddd;
      }
      .area {
        margin: 40px 30px;
        width: 180px;
        height: 40px;
        background: white;
      }

      .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
    </style>
  </head>
  <body>
    <div class="area ellipsis">
      Lorem ipsum dolor sit amet, consectetur adipisicing elit.
    </div>
  </body>
</html>

✔️ 2줄 이상의 텍스트에 대해서 말줄임 적용하기

코드

<!DOCTYPE html>
<html lang="ko">
  <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    <style>
      body {
        background: #ddd;
      }
      .area {
        margin: 40px 30px;
        width: 300px;
        background: white;
      }

      .ellipsis {
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
      }
    </style>
  </head>
  <body>
    <div class="area">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, quo nesciunt
      aliquid nulla eveniet cupiditate odit nemo dolor nobis vel dicta, aliquam
      suscipit id assumenda eius consectetur blanditiis deleniti dolorum?
    </div>
    <div class="area ellipsis">
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Non, quo nesciunt
      aliquid nulla eveniet cupiditate odit nemo dolor nobis vel dicta, aliquam
      suscipit id assumenda eius consectetur blanditiis deleniti dolorum?
    </div>
  </body>
</html>

display: -webkit-box 속성은 해당 영역을 box 형태로 관리되도록 합니다.
-webkit-line-clamp 속성은 해당 영역 내의 텍스트의 최대 라인수를 결정합니다.
-webkit-box-orient: vertical 속성은 box의 흐름 방향을 수직으로 지정합니다.