Next.js 환경에서 개발을 하다보면 Hydration에러를 종종 만나게 되는데요. 이 에러는 서버에서 생성된 HTML과 클라이언트에서 생성되는 HTML간에 불일치가 발생할때 발생합니다.

가령 useEffect내 API호출을 한다던지, 세션이나 쿠키 같은 요인에 따라 렌더링 컴포넌트가 다를때라던지, 자바스크립트 실행 타이밍이 다를때 이 에러를 접하게 되는데요.

이 Hydration에러는 왜 발생하는 것일까요??
근본적인 원인은 렌더링을 두 번 하기 때문입니다. 서버 사이드 렌더링 후, 클라이언트 사이드에서 추가 렌더링을 하면서 데이터의 불일치가 발생하는 것인데요. 

그럼 왜 렌더링을 두 번 할까요? 언뜻 보기엔 두 번 렌더링이 비효율적인것 같아 보이는데요. 두 번 렌더링을 하게 되면 최초 초기 로딩 시 최소한의 정보만을 포함하고 있어 빠르게 렌더링이 가능합니다. 또한 검색엔진은 빠른 렌더링을 중요한 랭킹 요소로 고려하므로 SEO에도 유리 합니다. 초기 렌더링 이후에는  DOM 요소에 속성을 매칭 시키는 작업을 하는데요. 이 이벤트 리스너를 붙이는 작업은 페이지를 다시 그리지 않으므로 추가적인 렌더링 비용이 발생하지 않습니다.

따라서, Hydration은 효율적인 초기 페이지 로딩과 동적 웹 애플리케이션 기능의 균형을 맞추기 위한 과정 입니다. 다만 Hydration 에러는 개발 과정에서 다루기 까다로운 문제중 하나인데요. Next.js 에서도 에러를 줄이기 위한 방안을 지속적으로 모색하고 기술적인 접근을 제공하고 있습니다. 예를 들어 Zustand에서는 과거에 persist미들웨어를 사용할때 Hydration에러가 발생하였는데요 V3부터는 클라이언트 측에서 상태를 다시 로드하도록 하여 서버와 클라이언트 사이의 데이터 불일치 문제를 해결하였습니다. 

Hydration 과정과 이로 인해 발생할 수 있는 에러를 제대로 관리하면, 사용자 경험을 향상시키고 웹사이트의 성능을 최적화할 수 있습니다.

Next.js 환경에서 개발을 하다보면 Hydration에러를 종종 만나게 되는데요. 이 에러는 서버에서 생성된 HTML과 클라이언트에서 생성되는 HTML간에 불일치가 발생할때 발생합니다. 가령 useEffect내 API호출을 한다던지, 세션이나 쿠키 같은 요인에 따라 렌더링 컴포넌트가 다를때라던지, 자바스크립트 실행 타이밍이 다를때 이 에러를 접하게 되는데요. 이 Hydration에러는 왜 발생하는 것일까요??근본적인 원인은 렌더링을 두 번 하기 때문입니다. 서버 사이드 렌더링 후, 클라이언트 사이드에서 추가 렌더링을 하면서 데이터의 불일치가 발생하는 것인데요.&nbsp; 그럼 왜 렌더링을 두 번 할까요? 언뜻 보기엔 두 번 렌더링이 비효율적인것 같아 보이는데요. 두 번 렌더링을 하게 되면 최초 초기 로딩 시 최소한의 정보만을 포함하고 있어 빠르게 렌더링이 가능합니다. 또한 검색엔진은 빠른 렌더링을 중요한 랭킹 요소로 고려하므로 SEO에도 유리 합니다. 초기 렌더링 이후에는&nbsp; DOM 요소에 속성을 매칭 시키는 작업을 하는데요. 이 이벤트 리스너를 붙이는 작업은 페이지를 다시 그리지 않으므로 추가적인 렌더링 비용이 발생하지 않습니다. 따라서, Hydration은 효율적인 초기 페이지 로딩과 동적 웹 애플리케이션 기능의 균형을 맞추기 위한 과정 입니다. 다만 Hydration 에러는 개발 과정에서 다루기 까다로운 문제중 하나인데요. Next.js 에서도 에러를 줄이기 위한 방안을 지속적으로 모색하고 기술적인 접근을 제공하고 있습니다. 예를 들어 Zustand에서는 과거에 persist미들웨어를 사용할때 Hydration에러가 발생하였는데요 V3부터는 클라이언트 측에서 상태를 다시 로드하도록 하여 서버와 클라이언트 사이의 데이터 불일치 문제를 해결하였습니다.&nbsp; Hydration 과정과 이로 인해 발생할 수 있는 에러를 제대로 관리하면, 사용자 경험을 향상시키고 웹사이트의 성능을 최적화할 수 있습니다.

Next.js 개발 시 자주 마주치는 Hydration 에러 이해하기

몇 달 전, 반려생활에 처음 합류한 후 진행했던 첫 과제에 대한 내용을 블로그에 포스팅했더니 좋은 반응을 많이 받았습니다. 그래서 이번엔 시간을 조금 더 앞당겨, 반려생활에 합류하게 되기까지의 과정을 블로그에 적어 공유해 보고자 합니다. 반려생활에 지원할 무렵인 2023년 11월, 저는 우아한테크코스라는 부트캠프 캠퍼스에서 한창 프로그래밍 공부를 하고...

반려생활, 서버 개발자, 700대 1

반려생활에 입사하진 4개월된 승현님이 합류까지의 과정을 재미나게 적어주셨네요.

https://blog.ban-life.com/%EB%B0%98%EB%A0%A4%EC%83%9D%ED%99%9C-%EC%84%9C%EB%B2%84-%EA%B0%9C%EB%B0%9C%EC%9E%90-700%EB%8C%80-1-1aa370e64781

반려생활에 입사하진 4개월된 승현님이 합류까지의 과정을 재미나게 적어주셨네요. https://blog.ban-life.com/%EB%B0%98%EB%A0%A4%EC%83%9D%ED%99%9C-%EC%84%9C%EB%B2%84-%EA%B0%9C%EB%B0%9C%EC%9E%90-700%EB%8C%80-1-1aa370e64781

Medium

반려생활에 합류하기 위한 여정

이번에 소개해 드릴 글은 다양한 방식의 재시도 전략에 대해서 알려드리고자 합니다. 저자는 자바스크립트에서 활용할 수 있는 6가지 다양한 방식의 전략과 효과적인 수행을 위한 2가지의 라이브러리를 소개해 주고 있습니다.

(번역) 자바스크립트를 이용한 재시도 로직 구현하기

오늘 소개해드릴 글은 이스트소프트의 김태현님이 번역해주신 글입니다.

여러분들은 데이터 요청 시 발생하는 일시적인 오류나 불안정한 네트워크, 서비스 중단과 같은 문제가 발생할 때 얼마나 고민하시나요? 재요청을 시도할 효과적인 전략을 갖추지 않으면 사용자에게 좋지 않은 경험을 제공하게 됩니다.

이번에 소개해 드릴 글은 다양한 방식의 재시도 전략에 대해서 알려드리고자 합니다. 저자는 자바스크립트에서 활용할 수 있는 6가지 다양한 방식의 전략과 효과적인 수행을 위한 2가지의 라이브러리를 소개해 주고 있습니다.

매끄러운 사용자 경험을 위한 개발자라면 한 번쯤 고민해 보시는 것도 좋을 것 같습니다.

글 링크: https://velog.io/@tap_kim/implement-retry-logic-using-javascript

오늘 소개해드릴 글은 이스트소프트의 김태현님이 번역해주신 글입니다. 여러분들은 데이터 요청 시 발생하는 일시적인 오류나 불안정한 네트워크, 서비스 중단과 같은 문제가 발생할 때 얼마나 고민하시나요? 재요청을 시도할 효과적인 전략을 갖추지 않으면 사용자에게 좋지 않은 경험을 제공하게 됩니다. 이번에 소개해 드릴 글은 다양한 방식의 재시도 전략에 대해서 알려드리고자 합니다. 저자는 자바스크립트에서 활용할 수 있는 6가지 다양한 방식의 전략과 효과적인 수행을 위한 2가지의 라이브러리를 소개해 주고 있습니다. 매끄러운 사용자 경험을 위한 개발자라면 한 번쯤 고민해 보시는 것도 좋을 것 같습니다. 글 링크: https://velog.io/@tap_kim/implement-retry-logic-using-javascript

Velog

자바스크립트를 이용한 재시도 로직 구현하기

사용자가 공유한 콘텐츠

메타의 많은 엔지니어 중에서 E9은 1%이내이고, 그들은 연간 $3,251,000 이상을 벌어들인다고 합니다.

대부분 훌륭한 작가라고 하네요. 명확한 문서를 쓰고, 글쓰기를 통해 큰 영향력을 끼친다고 합니다.

단기간 커리어에 큰 도움이 될지 모르지만 긴 시간이 흐르면 분명 도움이 될거라고 믿습니다.

저는 지금의 상태를 개선하기보다 먼 미래에 운동을 시작하며 10년만 일찍 시작할껄 후회할 일을 막는다고 생각하고 운동하고 있습니다. 이런 마음 가짐으로 글쓰기를 시작해보세요.

내용 출처: https://twitter.com/ryanlpeterman/status/1787860017695326479

메타의 많은 엔지니어 중에서 E9은 1%이내이고, 그들은 연간 $3,251,000 이상을 벌어들인다고 합니다. 대부분 훌륭한 작가라고 하네요. 명확한 문서를 쓰고, 글쓰기를 통해 큰 영향력을 끼친다고 합니다. 단기간 커리어에 큰 도움이 될지 모르지만 긴 시간이 흐르면 분명 도움이 될거라고 믿습니다. 저는 지금의 상태를 개선하기보다 먼 미래에 운동을 시작하며 10년만 일찍 시작할껄 후회할 일을 막는다고 생각하고 운동하고 있습니다. 이런 마음 가짐으로 글쓰기를 시작해보세요. 내용 출처: https://twitter.com/ryanlpeterman/status/1787860017695326479

커리어에 도움을 줄 수 있는 글쓰기

오늘 리액트 네이티브 0.74가 출시됩니다! 이번 릴리스에는 Yoga 3.0, 기본값으로 제공되는 브릿지 없는 새 아키텍처, 배치 처리된 onLayout 업데이트(새 아키텍처)가 포함되었습니다. 또한, 새 프로젝트의 기본 패키지 매니저로 Yarn 3이 추가되었습니다. 또한 사용이 중단된(deprecated) API와 PropTypes가 제거되고...

리액트 네이티브 0.74 - Yoga 3.0, 브릿지 없는 새로운 아키텍처 등

오늘 소개드릴 글은 리액트 네이티브 0.74 업데이트 소식입니다. 이번 주 react conf를 앞두고 지난 몇 주간 새로운 업데이트 소식이 리액트 측에서 계속 소개되고 있는데요. RN과 비슷한 역할을 하는 다른 프레임워크들과 항상 비교될 때 언급이 되던 아키텍처 부분에서 큰 개선에 대한 소식을 다룹니다. 그리고 기존에 사용이 중단된 API들의 제거와 여러 업데이트에 대해 간략하게 공유합니다. 아마 이 소식을 많은 분들이 꽤 오래 기다리셨을 것 같은데요. 선택을 고민하고 계신 분들, 그리고 이미 적용하신 모든 분께 큰 도움이 될 것 같습니다.

 * 글 링크: https://bit.ly/3WCvC2y

오늘 소개드릴 글은 리액트 네이티브 0.74 업데이트 소식입니다. 이번 주 react conf를 앞두고 지난 몇 주간 새로운 업데이트 소식이 리액트 측에서 계속 소개되고 있는데요. RN과 비슷한 역할을 하는 다른 프레임워크들과 항상 비교될 때 언급이 되던 아키텍처 부분에서 큰 개선에 대한 소식을 다룹니다. 그리고 기존에 사용이 중단된 API들의 제거와 여러 업데이트에 대해 간략하게 공유합니다. 아마 이 소식을 많은 분들이 꽤 오래 기다리셨을 것 같은데요. 선택을 고민하고 계신 분들, 그리고 이미 적용하신 모든 분께 큰 도움이 될 것 같습니다. <ul ><li>글 링크: https://bit.ly/3WCvC2y</li></ul>

리액트 네이티브 0.74: Yoga 3.0, 브릿지 없는 새로운 아키텍처

함께 멀리, 그리고 빠르게 갈 순 없을까요? '혼자 가면 빨리 가지만 함께 가면 멀리 간다.

소프트 스킬과 협업, 그리고 인문학 | 독서모임 | 커넥트 에브리원 Connect Everyone | 트레바리

<소프트 스킬과 협업, 그리고 인문학>이라는 주제로 좋은 책을 바탕으로 서로의 생각과 경험을 공유하고 새로운 사람들을 함께하는 독서클럽이 어느덧 새로운 시즌3를 맞이하게 되어 새로운 사람들을 모집하고자 합니다.

책을 좋아하고 소프트스킬에 대해서 함께 이야기를 나눠보고 새로운 사람들과 함께 하는 경험을 가져보고 싶은 많은 분들 환영합니다. 부담없이 대화하고 경험할 수 있도록 많은 준비를 하고 있으니 많은 관심 부탁드려요

<시즌1: 개발자의 인문학>, <시즌2: 인간관계와 나>에 이은 시즌3의 주제는 바로 <시즌3: 결정적 순간의 대화>입니다.

소프트 스킬을 떠올릴 때 가장 먼저 생각나는 것은 커뮤니케이션, 즉 소통입니다. 우리는 상대방의 마음을 읽어낼 수 없기 때문에 대화를 통해 생각을 전달하고 또 전달 받아야만 합니다. 대화가 제대로 되지 않으면 생각이 온전히 전달되지 않거나 서로의 생각을 다르게 해석하여 어려움을 겪곤합니다.

우리가 대화하는 상황은 다양합니다. 회의를 하거나 보고를 하거나 수다를 떨거나 논의를 하거나 논쟁이나 설득 등 다양한 상황이 있습니다. 일반적인 대화에서는 경청이나 유머가 중요할 수 있지만, 이번에 주목할 상황은 바로 결정적인 순간의 대화입니다.

대화가 문제가 되는 순간은 이해관계가 개입되고, 서로의 생각을 관철시켜야 할 때, 감정이 막 요동치고 힘들고 괴롭지만 대화를 이어나가야 할 때입니다. 분노하거나 공포에 휩싸이거나 혼란에 빠지기도 합니다. 이성과 감정이 충돌하는 순간, 이것이 바로 결정적인 순간입니다.

인간에게는 이성은 유한하고 감성은 무한하기에, 커뮤니케이션을 하면서 감정을 손해보는 순간을 마주하면 이성보다 감성을 돌보는 쪽을 택하려고 합니다. 그러면서 우리가 원하는 대화의 방향으로 이어지지 않습니다. 반대로 원하는 방향의 대화로 이어지지 않을 경우 답답함, 짜증, 분노와 같은 감정적인 충동에 빠지게 됩니다.

이번 4개월간의 모임에서는 이러한 결정적 순간을 맞이했을 때 좀 더 커뮤니케이션을 잘하기 위해 무엇을 알면 좋을지 배우고, 또 각자의 경험들에 대해 이야기하며 서로의 생각들을 나눌 수 있는 시간을 가지고자 합니다.

많은 기대 부탁드립니다.

___

우리가 4개월간 함께 읽고 이야기를 나눠볼 책입니다.

1. 결정적 순간의 대화 | 조셉그리니
- 상황과 사람을 내 편으로 만드는 성공적 대화 기술

결정적 순간이 무엇인지 자각할 수 있는 능력과 결정적인 순간 왜 대화는 엇나가는지, 어떻게 하면 대화의 방향타를 끝까지 잡고 이어나갈 수 있는지 함께 알아보는 시간을 가져봅시다.

2. 당신의 분노에는 이유가 있다 | 충페이충
- 툭하면 화가 나는 당신을 위한 분노 처방전

결정적 순간의 대화의 주된 감정은 분노입니다. 분노라는 현상은 1가지이만 그 이면에 숨은 맥락과 이유는 다양합니다. 분노가 발생하는 이유에 대해서 알아보고 분노에 대처하는 방식에 대해서 알아봅시다.

3. 물고기는 존재하지 않는다
-- 스포일러 방지 --

4. 리더의 질문법
- 조직의 성과를 이끄는 신뢰와 협력의 소통 전략

결정적 순간 리더는 어떻게 대화를 이끌어 나가야 하는지 함께 이야기를 나눠 보고자 합니다. 꼭 상위 직책만 리더가 아닙니다. 결정적 순간을 맞이 하였을때 그 상황의 리더가 되기 위해서는 어떤 식으로 대화를 해야 하는지 함께 이야기를 해보고자 합니다.

https://trevar.ink/M96DYG

&lt;소프트 스킬과 협업, 그리고 인문학&gt;이라는 주제로 좋은 책을 바탕으로 서로의 생각과 경험을 공유하고 새로운 사람들을 함께하는 독서클럽이 어느덧 새로운 시즌3를 맞이하게 되어 새로운 사람들을 모집하고자 합니다. 책을 좋아하고 소프트스킬에 대해서 함께 이야기를 나눠보고 새로운 사람들과 함께 하는 경험을 가져보고 싶은 많은 분들 환영합니다. 부담없이 대화하고 경험할 수 있도록 많은 준비를 하고 있으니 많은 관심 부탁드려요 &lt;시즌1: 개발자의 인문학&gt;, &lt;시즌2: 인간관계와 나&gt;에 이은 시즌3의 주제는 바로 &lt;시즌3: 결정적 순간의 대화&gt;입니다. 소프트 스킬을 떠올릴 때 가장 먼저 생각나는 것은 커뮤니케이션, 즉 소통입니다. 우리는 상대방의 마음을 읽어낼 수 없기 때문에 대화를 통해 생각을 전달하고 또 전달 받아야만 합니다. 대화가 제대로 되지 않으면 생각이 온전히 전달되지 않거나 서로의 생각을 다르게 해석하여 어려움을 겪곤합니다. 우리가 대화하는 상황은 다양합니다. 회의를 하거나 보고를 하거나 수다를 떨거나 논의를 하거나 논쟁이나 설득 등 다양한 상황이 있습니다. 일반적인 대화에서는 경청이나 유머가 중요할 수 있지만, 이번에 주목할 상황은 바로 결정적인 순간의 대화입니다. 대화가 문제가 되는 순간은 이해관계가 개입되고, 서로의 생각을 관철시켜야 할 때, 감정이 막 요동치고 힘들고 괴롭지만 대화를 이어나가야 할 때입니다. 분노하거나 공포에 휩싸이거나 혼란에 빠지기도 합니다. 이성과 감정이 충돌하는 순간, 이것이 바로 결정적인 순간입니다. 인간에게는 이성은 유한하고 감성은 무한하기에, 커뮤니케이션을 하면서 감정을 손해보는 순간을 마주하면 이성보다 감성을 돌보는 쪽을 택하려고 합니다. 그러면서 우리가 원하는 대화의 방향으로 이어지지 않습니다. 반대로 원하는 방향의 대화로 이어지지 않을 경우 답답함, 짜증, 분노와 같은 감정적인 충동에 빠지게 됩니다. 이번 4개월간의 모임에서는 이러한 결정적 순간을 맞이했을 때 좀 더 커뮤니케이션을 잘하기 위해 무엇을 알면 좋을지 배우고, 또 각자의 경험들에 대해 이야기하며 서로의 생각들을 나눌 수 있는 시간을 가지고자 합니다. 많은 기대 부탁드립니다. ___ 우리가 4개월간 함께 읽고 이야기를 나눠볼 책입니다. 1. 결정적 순간의 대화 | 조셉그리니- 상황과 사람을 내 편으로 만드는 성공적 대화 기술 결정적 순간이 무엇인지 자각할 수 있는 능력과 결정적인 순간 왜 대화는 엇나가는지, 어떻게 하면 대화의 방향타를 끝까지 잡고 이어나갈 수 있는지 함께 알아보는 시간을 가져봅시다. 2. 당신의 분노에는 이유가 있다 | 충페이충- 툭하면 화가 나는 당신을 위한 분노 처방전 결정적 순간의 대화의 주된 감정은 분노입니다. 분노라는 현상은 1가지이만 그 이면에 숨은 맥락과 이유는 다양합니다. 분노가 발생하는 이유에 대해서 알아보고 분노에 대처하는 방식에 대해서 알아봅시다. 3. 물고기는 존재하지 않는다-- 스포일러 방지 -- 4. 리더의 질문법- 조직의 성과를 이끄는 신뢰와 협력의 소통 전략 결정적 순간 리더는 어떻게 대화를 이끌어 나가야 하는지 함께 이야기를 나눠 보고자 합니다. 꼭 상위 직책만 리더가 아닙니다. 결정적 순간을 맞이 하였을때 그 상황의 리더가 되기 위해서는 어떤 식으로 대화를 해야 하는지 함께 이야기를 해보고자 합니다. https://trevar.ink/M96DYG

Trevari

트레바리 <시즌3: 결정적 순간의 대화> 멤버 모집

Corepack | Node.js v22.2.0 Documentation

Node.js 생태계 내에서 npm 이후 다양한 패키지 매니저가 등장하였습니다. 특히 Yarn과 pnpm 같은 기존 NPM의 문제점을 개선한 패키지 매니저들이 널리 사용되고 있는데요. 이에 Node.js는 Corepack이라는 기능을 도입하여 이들 패키지 매니저의 버전 관리를 보다 체계적으로 지원합니다.

Corepack은 특정 패키지 매니저가 시스템에 설치되어 있지 않은 경우에도, 개발자가 해당 패키지 매니저를 필요로 하는 명령어(예:
pnpm install
)를 실행하면, 자동으로 해당 패키지 매니저를 설치하는 기능을 제공합니다. 이는 패키지 매니저 설치의 복잡성을 제거하고, 사용자가 무리 없이 명령어를 실행할 수 있게 함으로써 개발 편의성을 크게 향상시키는데요.

또한, Corepack은 프로젝트별로 특정 패키지 매니저 버전을 지정할 수 있는 기능을 제공합니다. 'package.json' 파일의 'packageManager' 필드에 원하는 패키지 매니저와 버전을 명시하면, Corepack은 해당 프로젝트에서 지정된 버전의 패키지 매니저를 사용하도록 설정합니다. 아래는 'package.json' 파일에서 'pnpm' 버전 6.14.2를 지정하는 예시입니다:
{ "packageManager": "pnpm@6.14.2" }

이렇게 패키지 매니저 버전을 명시하면, 프로젝트 간 호환성 문제나 버전 불일치로 인한 이슈를 예방할 수 있습니다. Corepack은 프로젝트에 설정된 버전에 맞춰 패키지 매니저를 자동으로 설치하고, 필요한 경우 업데이트 또는 다운그레이드하여 일관된 개발 환경을 유지합니다.

Corepack은 항상 바이너리 파일을 사용하여 동작하므로, 사용자의 추가 설정 없이도 패키지 매니저 버전을 효율적으로 관리할 수 있습니다. 이를 통해 개발자는 패키지 매니저 호환성 문제로 인한 골치 아픈 상황을 피할 수 있고, 프로젝트의 안정성과 일관성을 보장받을 수 있습니다.

Node.js 16 버전부터는 Corepack이 기본적으로 활성화되어 있으므로, 별도의 설정 없이 바로 사용할 수 있습니다.

https://nodejs.org/api/corepack.html

Node.js 생태계 내에서 npm 이후 다양한 패키지 매니저가 등장하였습니다. 특히 Yarn과 pnpm 같은 기존 NPM의 문제점을 개선한 패키지 매니저들이 널리 사용되고 있는데요. 이에 Node.js는 Corepack이라는 기능을 도입하여 이들 패키지 매니저의 버전 관리를 보다 체계적으로 지원합니다. Corepack은 특정 패키지 매니저가 시스템에 설치되어 있지 않은 경우에도, 개발자가 해당 패키지 매니저를 필요로 하는 명령어(예: <code >pnpm install</code>)를 실행하면, 자동으로 해당 패키지 매니저를 설치하는 기능을 제공합니다. 이는 패키지 매니저 설치의 복잡성을 제거하고, 사용자가 무리 없이 명령어를 실행할 수 있게 함으로써 개발 편의성을 크게 향상시키는데요. 또한, Corepack은 프로젝트별로 특정 패키지 매니저 버전을 지정할 수 있는 기능을 제공합니다. 'package.json' 파일의 'packageManager' 필드에 원하는 패키지 매니저와 버전을 명시하면, Corepack은 해당 프로젝트에서 지정된 버전의 패키지 매니저를 사용하도록 설정합니다. 아래는 'package.json' 파일에서 'pnpm' 버전 6.14.2를 지정하는 예시입니다:<pre ><code>{ "packageManager": "pnpm@6.14.2" }</code></pre>이렇게 패키지 매니저 버전을 명시하면, 프로젝트 간 호환성 문제나 버전 불일치로 인한 이슈를 예방할 수 있습니다. Corepack은 프로젝트에 설정된 버전에 맞춰 패키지 매니저를 자동으로 설치하고, 필요한 경우 업데이트 또는 다운그레이드하여 일관된 개발 환경을 유지합니다. Corepack은 항상 바이너리 파일을 사용하여 동작하므로, 사용자의 추가 설정 없이도 패키지 매니저 버전을 효율적으로 관리할 수 있습니다. 이를 통해 개발자는 패키지 매니저 호환성 문제로 인한 골치 아픈 상황을 피할 수 있고, 프로젝트의 안정성과 일관성을 보장받을 수 있습니다. Node.js 16 버전부터는 Corepack이 기본적으로 활성화되어 있으므로, 별도의 설정 없이 바로 사용할 수 있습니다. https://nodejs.org/api/corepack.html

nodejs.org

Node.js Corepack: 패키지 매니저 버전 관리 도구

한 줄 평. 할 수 있는 걸 했다. 😅

우선 모델 관련으로 Gemini 1.5 Pro의 컨텍스트 윈도우가 2M까지 늘어났습니다.(프리뷰) 그리고 빠른 버전인 Gemini 1.5 Flash도 발표했는데요.

Gemini 1.5 Pro의 가격을 128K 이하인 경우 $3.5(Input)/1M토큰 으로 가격을 절반으로 낮추면서 GPT-4o 보다 30% 저렴한 가격으로 가격 경쟁력을 챙겼습니다.

제품 관련해서는 Gemini를 구글 포토, 이미지 검색, 워크 스페이스, 구글 밋, 이메일, 검색, 안드로이드 등 거의 모든 제품에 반영한다고 발표했고, 이미지 생성, 음악 생성, 비디오 생성 등의 기술도 발표했습니다.

대부분 이미 이전에 다 발표했던 내용이고 데모도 라이브 데모가 아닌데다, 대부분 여름이나 올해 말에 나온다고 하니 지금 당장 쓸 수 있는게 아니어서 약간 김이새고 임팩트가 별로 없었는데요.

물론 생각해보면 지구상에 이정도 수준을 따라 할 수 있는 회사가 없을겁니다. 모든 방면의 AI 기술을 모두 다 최고 수준으로 만들고 있으니까요. 그정도로 대단하긴 한데..뭔가 지금에 와서는 다들 하고 있는 걸 우리도 한다 정도의 느낌이었달까.. 😅

그리고 발표 중 Project Astra라는 시각적인 장면의 이해가 가능한 음성 비서를 발표했는데요. 바로 어제 OpenAI가 발표했던 GPT-4o 데모의 일부와 유사한 데모였습니다. 그런데 반응성과 자연스러움이 ChatGPT보다 훨씬 떨어져서 “으음..” 하는 느낌.. 어제 발표 때문에 구글 팀이 확실히 김이 팍 샜을 것 같습니다. 😅

OpenAI와 비교해보면, 전형적인 스타트업과 대기업의 발표라고 할 수 있었는데요. OpenAI는 모든 일을 해 주는 하나의 비서를 만들고 있는 느낌이고, Google은 모든 제품에 Gemini를 기능적으로 통합한다의 느낌에 가까운 것 같습니다.

순다 피차이 CEO가 키노트 마지막에 오늘 발표중에 AI라는 말을 얼마나 많이 했는지를 보여줬는데요. 무려 121번이나 말했습니다. 구글은 무려 8년 전 부터 AI-first 회사가 되겠다고 한 만큼 AI에 정말 진심이고 최근엔 전력을 다하고 있습니다만, 아직 임팩트 있는 무언가를 보여주진 못했는데요.

저도 개발자로써 구글을 응원하는 사람이라, 조만간 “구글이 구글했다.” 라는 말을 할 수 있게 되기를 바라겠습니다. 🤗

한 줄 평. 할 수 있는 걸 했다. 😅 우선 모델 관련으로 Gemini 1.5 Pro의 컨텍스트 윈도우가 2M까지 늘어났습니다.(프리뷰) 그리고 빠른 버전인 Gemini 1.5 Flash도 발표했는데요. Gemini 1.5 Pro의 가격을 128K 이하인 경우 $3.5(Input)/1M토큰 으로 가격을 절반으로 낮추면서 GPT-4o 보다 30% 저렴한 가격으로 가격 경쟁력을 챙겼습니다. 제품 관련해서는 Gemini를 구글 포토, 이미지 검색, 워크 스페이스, 구글 밋, 이메일, 검색, 안드로이드 등 거의 모든 제품에 반영한다고 발표했고, 이미지 생성, 음악 생성, 비디오 생성 등의 기술도 발표했습니다. 대부분 이미 이전에 다 발표했던 내용이고 데모도 라이브 데모가 아닌데다, 대부분 여름이나 올해 말에 나온다고 하니 지금 당장 쓸 수 있는게 아니어서 약간 김이새고 임팩트가 별로 없었는데요. 물론 생각해보면 지구상에 이정도 수준을 따라 할 수 있는 회사가 없을겁니다. 모든 방면의 AI 기술을 모두 다 최고 수준으로 만들고 있으니까요. 그정도로 대단하긴 한데..뭔가 지금에 와서는 다들 하고 있는 걸 우리도 한다 정도의 느낌이었달까.. 😅 그리고 발표 중 Project Astra라는 시각적인 장면의 이해가 가능한 음성 비서를 발표했는데요. 바로 어제 OpenAI가 발표했던 GPT-4o 데모의 일부와 유사한 데모였습니다. 그런데 반응성과 자연스러움이 ChatGPT보다 훨씬 떨어져서 “으음..” 하는 느낌.. 어제 발표 때문에 구글 팀이 확실히 김이 팍 샜을 것 같습니다. 😅 OpenAI와 비교해보면, 전형적인 스타트업과 대기업의 발표라고 할 수 있었는데요. OpenAI는 모든 일을 해 주는 하나의 비서를 만들고 있는 느낌이고, Google은 모든 제품에 Gemini를 기능적으로 통합한다의 느낌에 가까운 것 같습니다. 순다 피차이 CEO가 키노트 마지막에 오늘 발표중에 AI라는 말을 얼마나 많이 했는지를 보여줬는데요. 무려 121번이나 말했습니다. 구글은 무려 8년 전 부터 AI-first 회사가 되겠다고 한 만큼 AI에 정말 진심이고 최근엔 전력을 다하고 있습니다만, 아직 임팩트 있는 무언가를 보여주진 못했는데요. 저도 개발자로써 구글을 응원하는 사람이라, 조만간 “구글이 구글했다.” 라는 말을 할 수 있게 되기를 바라겠습니다. 🤗

📝 구글 I/O 2024 요약 및 감상

Vision Pro에 AI 페르소나 넣고 Siri 통해서 ChatGPT랑 대화하게 해 주면 끝내줄 듯.

애플과 OpenAI 정책상 안 할 것 같지만, 정책은 언제든 변할 수 있는 것이니.. 😏

Vision Pro에 AI 페르소나 넣고 Siri 통해서 ChatGPT랑 대화하게 해 주면 끝내줄 듯. 애플과 OpenAI 정책상 안 할 것 같지만, 정책은 언제든 변할 수 있는 것이니.. 😏

NEXTSTEP에서 개발자들을 위해 디자인된 강의를 수강해보세요.

교육 콘서트

🎉 지식을 변화로 만드는 교육 콘서트에 초대합니다

저는 현재 우아한테크코스라는 개발자를 위한 부트캠프를 6년째 운영중입니다. 주업무인 만큼 효과적인 교육적 경험에 대해 늘 관심이 많았는데요. 함께자라기의 저자 김창준님이 이전에 진행하셨던 RET(Really Effective Teacher)와 경험적 학습 교육을 듣고 교육을 설계하는 사고 방식이 완전히 바뀌게 되었습니다.

이를 팀 내에도 전파해서 교육을 설계 할 때 무엇을 가장 중요하게 생각 해야하는지, 어떻게 접근하는게 효과적이고, 교육생들에게서는 무슨 피드백을 받아야하는지에 대해 많은 시도를 해볼 수 있었습니다.

그리고 이런 교육적 경험을 만드는 교육자로서의 역량을 더욱 잘 만들고자 ‘교육자 양성 과정’ 이라는 교육을 진행했습니다. 이 교육을 하면서 수강생 분들은 실제 효과적인 경험적 학습을 설계하고 실제 진행하는 과정을 거쳤는데요.

이 수료생분들이 경험 기반의 교육을 만들었던 경험을 한 단계 더 밀도있게 개선해서 진행하는 ‘교육 콘서트’라는 세션을 만들게 됐습니다. 아래 주제에 대해서 경험 기반의 교육이 어떻게 이루어지는지, 어떤 경험을 할 수 있는지 궁금하시다면 참여해보시면 좋을것 같아요~!

⏰ 콘서트 타임 테이블
 1. 협업의 핵심, 짝 작업 13:00 ~ 14:00 (1시간, 쉬는 시간 포함)
 2. 코딩테스트만 잘하면 되는 걸까? / 코드로 그리는 UI, UI로 읽는 코드 14:00 ~ 16:00 (2시간, 쉬는 시간 포함)
 3. 전제의 힘을 깨닫고 대화의 변화를 만들기 / 인공지능과 대화하기 위한 교양 수학 16:00 ~ 18:00 (2시간, 쉬는 시간 포함)
    
    
🗓️ 일정
2024년 5월 18일 토요일 오후 1시 ~ 6시

💬 장소
테크살롱 (선릉역 부근, 추후 안내)

https://edu.nextstep.camp/c/swD6x7H4

🎉&nbsp;지식을 변화로 만드는 교육 콘서트에 초대합니다 저는 현재 우아한테크코스라는 개발자를 위한 부트캠프를 6년째 운영중입니다. 주업무인 만큼 효과적인 교육적 경험에 대해 늘 관심이 많았는데요. 함께자라기의 저자 김창준님이 이전에 진행하셨던 RET(Really Effective Teacher)와 경험적 학습 교육을 듣고 교육을 설계하는 사고 방식이 완전히 바뀌게 되었습니다. 이를 팀 내에도 전파해서 교육을 설계 할 때 무엇을 가장 중요하게 생각 해야하는지, 어떻게 접근하는게 효과적이고, 교육생들에게서는 무슨 피드백을 받아야하는지에 대해 많은 시도를 해볼 수 있었습니다. 그리고 이런 교육적 경험을 만드는 교육자로서의 역량을 더욱 잘 만들고자 ‘교육자 양성 과정’ 이라는 교육을 진행했습니다. 이 교육을 하면서 수강생 분들은 실제 효과적인 경험적 학습을 설계하고 실제 진행하는 과정을 거쳤는데요. 이 수료생분들이 경험 기반의 교육을 만들었던 경험을 한 단계 더 밀도있게 개선해서 진행하는 ‘교육 콘서트’라는 세션을 만들게 됐습니다. 아래 주제에 대해서 경험 기반의 교육이 어떻게 이루어지는지, 어떤 경험을 할 수 있는지 궁금하시다면 참여해보시면 좋을것 같아요~! ⏰&nbsp;콘서트 타임 테이블<ol ><li>협업의 핵심, 짝 작업 13:00 ~ 14:00 (1시간, 쉬는 시간 포함)</li><li>코딩테스트만 잘하면 되는 걸까? / 코드로 그리는 UI, UI로 읽는 코드 14:00 ~ 16:00 (2시간, 쉬는 시간 포함)</li><li>전제의 힘을 깨닫고 대화의 변화를 만들기 / 인공지능과 대화하기 위한 교양 수학 16:00 ~ 18:00 (2시간, 쉬는 시간 포함) </li></ol>🗓️&nbsp;일정 2024년 5월 18일 토요일 오후 1시 ~ 6시 💬&nbsp;장소테크살롱 (선릉역 부근, 추후 안내) https://edu.nextstep.camp/c/swD6x7H4

Nextstep

🎉 지식을 변화로 만들기 - 제 3회 교육 콘서트

 1. 기본기 확실히 하기
 2. 학습 능력 키우기
 3. 의사 소통 잘하기
 4. 문제 정의 잘하기
 5. 태스크 완료 시간 추정 잘하기
 6. 운영을 고려한 코드 작성하기
 7. 서비스 사고 대처 능력 키우기
 8. 결과를 내는데 집중하기
 9. 영향력 갖기 (코딩 멍키)

개발자로 전문성에 너무 집중하면 나는 개발 이외의 다른 업무에 관심없다고 생각하거나 개발 밖의 일을 하는 것이 내 커리어에 도움이 안된다고 생각하기 쉽다. 앞서 글에서 자주 언급했지만 커리어는 내가 맡은 업무를 통해 성과를 내며 팀플레이어로 일을 할 때 발전한다.

성과를 낸다는 관점에서 중요한 포인트는 내 업무 바깥이라도 필요하다면 하나의 팀으로 도와주며 일을 할 필요가 있다는 점이며 이는 작은 회사에서는 더 필요한 역량 아닌 역량이다. 보통 작은 회사에서 다양한 일을 하다보면 전문성이 없다고 생각하고 연차에 맞는 역량을 갖고 있는지 의문을 많이 갖던데 조금 다른 포인트이고 따로 글을 써보려고 하지만 "연차"가 주는 잘못된 압박감도 만만치 않은 것 같다. 각자 자기의 길을 따라 쌓는 것이 연차이기에 남과 비교하며 나는 뒤쳐져 있나 조바심내기 보다는 내가 맡은 일에 성과를 내고 있는지 그리고 성과를 내기 위한 학습을 하고 있는지에 초점을 맞출 필요가 있다.

내가 만든 코드가 잘못 동작할 때 고생할 다른 사람들을 생각하면 코드를 작성하는 것부터 시작해서 다양한 대화 채널을 만드는 것이 하나의 팀으로 일하는 방법 중의 하나이다. 예를 들면 다음과 같은 것을 들 수 있다.

 * 에러 메시지를 기술적인 지식이 없는 사람들도 이해하고 액션을 취하기 쉽게 만든다. 이것만 잘해도 CS팀과 영업팀과의 의사소통의 질이 올라갈 뿐만 아니라 개발자 본인의 문제해결도 쉬워진다.
 * 관련해서 서버 단에도 로그를 최대한 많이 심어두면 고객 관련 불만이나 장애 등이 생겼을 때 문제 해결이 쉬워지며 이는 다음 포스팅에서 이야기할 서비스 사고 대처 능력을 키우는 기본 자세 중의 하나가 된다. 로그를 남기는 것에 대해서는 다음 회에 더 이야기해보겠다.
 * CS팀과 영업팀과 주기적인 소통을 통해 고객과의 대화를 통해 그들이 느끼는 고통을 느껴봐야한다. CS팀과 같이 많이 들어오는 티켓이나 큰 문제의 가능성을 보여주는 티켓을 리뷰해보는 것이 중요하다. B2B단이라면 영업을 담당하는 AM(Account Manager)들과 비슷한 프로세스를 만들어보는 것이 필요하다. 하지만 좋은 의도로 요청이 들어올 때마다 문제해결을 하려고 하다보면 정작 다른 일을 못하는 문제가 생기에는 사람이 바뀌어도 돌아가는 형태로 협업이 정착되려면 프로세스를 만드는 것이 중요하다. 아마존의 순서파괴(Working Backwards)에서 이야기한 "Good intentions never work, you need good mechanisms to make anything happen"가 기억해야할 점이다. 즉 좋은 의도만으로 일이 돌아가지는 않는다는 점이며 계속 돌아갈 수 있는 프로세스를 만드는 것이 필요하다.
 * 이 부분은 프로덕트 매니저가 리드하는 것이 일반적이긴 하지만 개발자들도 새로운 기능이 추가되거나 기존 기능이 변경되는 경우 관련 팀에 뉴스가 미리 전달되어야 한다는 점을 명확하게 인지하고 관련해서 노력을 기울여야 한다. 이게 안되면 CS팀이나 세일즈팀이 고생한다. 릴리스 노트 공유가 잘 이뤄지는 것이 운영단의 어려움을 크게 줄인다.

개발자니 개발만 잘 하면 된다고 생각할지 모르지만 결국은 의사소통 능력이며 이 중의 하나는 내가 만든 결과물로 인해 고생할지도 모르는 사람들을 고려한 개발을 하고 많이 대화해보면서 개선하는 거다.

<ol ><li>기본기 확실히 하기</li><li>학습 능력 키우기</li><li>의사 소통 잘하기</li><li>문제 정의 잘하기</li><li>태스크 완료 시간 추정 잘하기</li><li>운영을 고려한 코드 작성하기</li><li>서비스 사고 대처 능력 키우기</li><li>결과를 내는데 집중하기</li><li>영향력 갖기 <s>(코딩 멍키)</s></li></ol> 개발자로 전문성에 너무 집중하면 나는 개발 이외의 다른 업무에 관심없다고 생각하거나 개발 밖의 일을 하는 것이 내 커리어에 도움이 안된다고 생각하기 쉽다. 앞서 글에서 자주 언급했지만 커리어는 내가 맡은 업무를 통해 성과를 내며 팀플레이어로 일을 할 때 발전한다. 성과를 낸다는 관점에서 중요한 포인트는 내 업무 바깥이라도 필요하다면 하나의 팀으로 도와주며 일을 할 필요가 있다는 점이며 이는 작은 회사에서는 더 필요한 역량 아닌 역량이다. 보통 작은 회사에서 다양한 일을 하다보면 전문성이 없다고 생각하고 연차에 맞는 역량을 갖고 있는지 의문을 많이 갖던데 조금 다른 포인트이고 따로 글을 써보려고 하지만 "연차"가 주는 잘못된 압박감도 만만치 않은 것 같다. 각자 자기의 길을 따라 쌓는 것이 연차이기에 남과 비교하며 나는 뒤쳐져 있나 조바심내기 보다는 내가 맡은 일에 성과를 내고 있는지 그리고 성과를 내기 위한 학습을 하고 있는지에 초점을 맞출 필요가 있다. 내가 만든 코드가 잘못 동작할 때 고생할 다른 사람들을 생각하면 코드를 작성하는 것부터 시작해서 다양한 대화 채널을 만드는 것이 하나의 팀으로 일하는 방법 중의 하나이다. 예를 들면 다음과 같은 것을 들 수 있다. <ul ><li>에러 메시지를 기술적인 지식이 없는 사람들도 이해하고 액션을 취하기 쉽게 만든다. 이것만 잘해도 CS팀과 영업팀과의 의사소통의 질이 올라갈 뿐만 아니라 개발자 본인의 문제해결도 쉬워진다.</li><li>관련해서 서버 단에도 로그를 최대한 많이 심어두면 고객 관련 불만이나 장애 등이 생겼을 때 문제 해결이 쉬워지며 이는 다음 포스팅에서 이야기할 서비스 사고 대처 능력을 키우는 기본 자세 중의 하나가 된다. 로그를 남기는 것에 대해서는 다음 회에 더 이야기해보겠다.</li><li>CS팀과 영업팀과 주기적인 소통을 통해 고객과의 대화를 통해 그들이 느끼는 고통을 느껴봐야한다. CS팀과 같이 많이 들어오는 티켓이나 큰 문제의 가능성을 보여주는 티켓을 리뷰해보는 것이 중요하다. B2B단이라면 영업을 담당하는 AM(Account Manager)들과 비슷한 프로세스를 만들어보는 것이 필요하다. 하지만 좋은 의도로 요청이 들어올 때마다 문제해결을 하려고 하다보면 정작 다른 일을 못하는 문제가 생기에는 사람이 바뀌어도 돌아가는 형태로 협업이 정착되려면 프로세스를 만드는 것이 중요하다. 아마존의 순서파괴(Working Backwards)에서 이야기한 "Good intentions never work, you need good mechanisms to make anything happen"가 기억해야할 점이다. 즉 좋은 의도만으로 일이 돌아가지는 않는다는 점이며 계속 돌아갈 수 있는 프로세스를 만드는 것이 필요하다.</li><li>이 부분은 프로덕트 매니저가 리드하는 것이 일반적이긴 하지만 개발자들도 새로운 기능이 추가되거나 기존 기능이 변경되는 경우 관련 팀에 뉴스가 미리 전달되어야 한다는 점을 명확하게 인지하고 관련해서 노력을 기울여야 한다. 이게 안되면 CS팀이나 세일즈팀이 고생한다. 릴리스 노트 공유가 잘 이뤄지는 것이 운영단의 어려움을 크게 줄인다.</li></ul> 개발자니 개발만 잘 하면 된다고 생각할지 모르지만 결국은 의사소통 능력이며 이 중의 하나는 내가 만든 결과물로 인해 고생할지도 모르는 사람들을 고려한 개발을 하고 많이 대화해보면서 개선하는 거다.

좋은 개발자가 알아야하는 9가지 포인트들 - 6. 운영 고려 코드

Get a Free System Design PDF with 158 pages by subscribing to our weekly newsletter: https://bit.ly/bytebytegoytTopic Animation tools: Adobe Illustrator and After Effects. Checkout our bestselling System Design Interview books: Volume 1: https://amzn.to/3

Top 12 Tips For API Security

YouTube

Top 12 this For API Security

운전할 때 팟캐스트 듣는 걸 좋아합니다. 개발자 팟캐스트.

3년 전쯤 xguru님이 긱뉴스를 팟캐스트로 운영했던 적이 있습니다.
이 팟캐스트가 너무 좋아서 운전하는 날이 기다려질 정도였습니다.
잠시만 운영하고 끝나서 아쉽습니다.

최근에 아웃사이더님이 레트로테크라는 팟캐스트를 시작해주셔서 위안을 받고 있습니다.
옛날 기술들을 듣다보면 코딩을 처음 배우던 시절로 푹 빠져들곤 합니다.

어제는 조코딩의 팟캐스트도 오픈을 했습니다.
유튜브 앱만이 아니라 애플 팟캐스트와 스포티파이를 통해서도 들을 수 있게 됐습니다.
(저도 출연해서 1인 개발 이야기로 한 꼭지를 다뤘습니다.)

앞으로 재밌는 경험을 가진 분들을 많이 모셔서 이야기를 들어볼 수 있게 되길 바랍니다.

팟캐스트들을 쭉 살펴보다가 우리나라 개발자 팟캐스트가 너무 부족한 건 아닐까 생각이 들었습니다.
어쩌면 여기에도 기회가 있는 건 아닐까?
유익한 개발자 팟캐스트가 많이 생겼으면 좋겠습니다.

운전할 때 팟캐스트 듣는 걸 좋아합니다. 개발자 팟캐스트. 3년 전쯤 xguru님이 긱뉴스를 팟캐스트로 운영했던 적이 있습니다. 이 팟캐스트가 너무 좋아서 운전하는 날이 기다려질 정도였습니다. 잠시만 운영하고 끝나서 아쉽습니다. 최근에 아웃사이더님이 레트로테크라는 팟캐스트를 시작해주셔서 위안을 받고 있습니다. 옛날 기술들을 듣다보면 코딩을 처음 배우던 시절로 푹 빠져들곤 합니다. 어제는 조코딩의 팟캐스트도 오픈을 했습니다. 유튜브 앱만이 아니라 애플 팟캐스트와 스포티파이를 통해서도 들을 수 있게 됐습니다. (저도 출연해서 1인 개발 이야기로 한 꼭지를 다뤘습니다.) 앞으로 재밌는 경험을 가진 분들을 많이 모셔서 이야기를 들어볼 수 있게 되길 바랍니다. 팟캐스트들을 쭉 살펴보다가 우리나라 개발자 팟캐스트가 너무 부족한 건 아닐까 생각이 들었습니다. 어쩌면 여기에도 기회가 있는 건 아닐까? 유익한 개발자 팟캐스트가 많이 생겼으면 좋겠습니다.

개발자 팟캐스트

From Solo MVP to Scaled Success - Building a $70k+/Month Transactions E-Commerce App | GO Lee

How Two Front-End Developers Built an E-Commerce App in 10 Weeks

https://www.golee.me/blog/early-stage-startup-tech-stack

응원합니다

다음 글은 월 100$ 이하로 커머스앱 운영 하기라고 하네요 👍

https://www.golee.me/blog/early-stage-startup-tech-stack 응원합니다 다음 글은 월 100$ 이하로 커머스앱 운영 하기라고 하네요 👍

golee.me

프론트엔드 개발자 2명이 만든 명품 주얼리 거래 이커머스 앱

어떤 일을 꾸준하게 하기 위해선 완벽함과 거리를 두어야 하는 것 같습니다.

돌이켜보면 2022년 블로그 글을 쏟아낼 땐 별 기대가 없었습니다. 누구도 제 글에 관심 두지 않았으니까요.

글을 자주 올리면서 점차 좋아해 주시는 분들이 늘어갔죠. 늘어가는 관심은 부담, 완벽해야 한다는 생각으로 돌아왔습니다.

개발자로서의 역량, 메이커로서 자질 등. 모든 면에서 완벽해 보여야 한다는 압박감만 커졌습니다. 실행은 더 어려워지고 자기 검열은 강화됐죠. 한 번의 글을 쓰기가 더 어려워졌습니다.

어떤 일을 꾸준히 하기 위해선 주위의 시선에 신경 쓰지 않고 행동해야 하는 것 같습니다. 완벽해야 한다는 생각은 잠시 내려두고요.

어떤 일을 꾸준하게 하기 위해선 완벽함과 거리를 두어야 하는 것 같습니다. 돌이켜보면 2022년 블로그 글을 쏟아낼 땐 별 기대가 없었습니다. 누구도 제 글에 관심 두지 않았으니까요. 글을 자주 올리면서 점차 좋아해 주시는 분들이 늘어갔죠. 늘어가는 관심은 부담, 완벽해야 한다는 생각으로 돌아왔습니다. 개발자로서의 역량, 메이커로서 자질 등. 모든 면에서 완벽해 보여야 한다는 압박감만 커졌습니다. 실행은 더 어려워지고 자기 검열은 강화됐죠. 한 번의 글을 쓰기가 더 어려워졌습니다. 어떤 일을 꾸준히 하기 위해선 주위의 시선에 신경 쓰지 않고 행동해야 하는 것 같습니다. 완벽해야 한다는 생각은 잠시 내려두고요.

완벽함과 거리두기

01 . '세상에 내 맘에 드는 사람만 있는 건 아니다...', '모두를 품으려고 하는 것도 주제넘은 짓이다...', '가뜩이나 힘든 세상 저 사람에 때문에 더 힘들어하지 말자...'란 말을 수십 번 되뇌어도 늘 우리를 괴롭히는 사람들은 존재하는 법입니다. 그리고 그런 사람이 단순히 나와 코드가 맞지 않는 수준을 벗어나 누구에게나 나쁜 영향을 주는 사람이라면 상황은 보다 심각해지는 법이죠.

02 . 얼마 전 한참하고도 또 한참 동생뻘쯤 되는 지인분으로부터 메시지 한 통을 받았습니다. 딱 봐도 하루를 참 힘들게 보냈겠구나 싶은 분위기가 물씬 풍기는 와중에 대뜸 이런 질문을 저에게 던지더군요.
'도영님은 주위에 나쁜 영향을 주는 사람이 있으면 그 사람을 어떻게 대하시나요?'
무슨 고된 일이 있었냐는 질문을 되돌려주기엔 괜히 짐 하나를 더 얹어주는 것도 같았고, 한편으로는 저 스스로를 돌아보게 만드는 것도 같은 질문이었죠.
그러게요. 저는 저에게 나쁜 영향을 주는 사람을 어떻게 대하고 있는지 문득 궁금해지기 시작했습니다.

03 . 맘 같아서야 속으로 열 번도 더 윽박지르고 싶을 만큼 얄밉고 이기적인 사람들이 어디에나 존재하는 법이지만 또 그 사람들이 주는 스트레스를 떠안고 살기엔 제 인생이 너무 아깝다는 생각도 들기 마련이죠. 그래서 매번 모기를 쫓으려 허공에 쉐도우 복싱을 하듯 '근데 그 사람 진짜 너무 한 거 같아... 아니야 괜히 이런 생각에 매몰되지 말자. 그럴 시간에 좋은 생각 한 번 더해야지'라는 혼잣말을 수십 번 반복하게 되는 게 사실입니다.

04 . 하지만 어느 순간부터는 나쁜 생각을 털어내는 것만큼이나 내가 받은 나쁜 영향을 다른 사람에게 전달하지 않는 것도 너무너무 중요한 일이라는 생각을 하게 되었습니다. 물론 이걸 몰라서 실천하지 않는 사람은 거의 없겠지만 실제로 마음먹은 대로 잘되지 않는 대표적인 행동이기도 하죠. 나 혼자만 이 기분을 떠안긴 억울하고 그렇다고 대놓고 표현하자니 나도 똑같은 사람이 되는 것 같아 망설여지는 순간이면 세상에서 내가 제일 답답한 사람인 것 같은 생각마저 드니까요.

05 . 대신 저는 분명하게 실천하는 한 가지가 있긴 합니다. 바로 '그 사람의 언어를 사용하지 않는 것'입니다. 다시 말해 내게 나쁜 영향을 주는 사람이 사용하는 묘하디 묘하게 귀에 거슬리는, 아주 얄팍한 방법으로 타인의 감정을 갉아먹는 그 단어와 표현들을 절대 사용하지 않는 거죠.
그게 무슨 대응법이냐고 반론을 제기할 분도 있겠지만 조금만 생각해 보면 아주 현실적이고 우아한(?) 복수이기도 합니다. 아니 정확히는 나쁜 사람이 주는 나쁜 영향을 모조리 튕겨내는 일종의 방수복을 입는 것과도 같은 효과라 할 수 있죠.

06 . 사실 우리 주위에서 천벌을 받을 정도로 극악무도한 사람을 만나는 건 극히 드문 일입니다. 좋은 사람만큼이나 나쁜 사람도 많은 게 슬픈 현실이지만 적어도 우리와 사회적 관계를 유지하고 살 정도의 사람이라면 '그것이 알고싶다'에 등장할 법한 인물들은 없을 테니 말이죠.
하지만 그 정도로 나쁜 사람이 아니더라도 늘 나쁜 영향을 주는 사람들은 말 그대로 '나쁜 언어'를 즐겨 사용합니다. 욕설을 하거나 험악한 말들을 내뱉는 게 아니라 상대로 하여금 수많은 불쾌감을 안겨주는 표현들을 큰 죄책감 없이 하는 사람들인 거죠.

07 . 당연히 저도 그런 사람을 겪어본 적이 있습니다. (아니..현재진행형이려나요... 암튼) 많은 사람을 힘들게 했던 그분은 팀원들이 좋은 아이디어를 내서 역량을 발휘하는 순간에도 '끼를 제대로 부렸다'고 표현하거나, 디테일까지 살뜰히 챙기는 동료들을 보고도 '편집증 환자 수준으로 이잡듯이 뒤졌다'고 비유하곤 했습니다. 이런 표현들은 날이 갈수록 정도를 더해 나중에는 서로 모여 그 의미를 해석해야 하는 수준에게까지 이르렀죠. 그 사람이 쓰는 나쁜 용어들로 사전 하나를 만들라고 해도 딱히 불가능해 보이는 미션은 아닌 것 같았으니까요.
처음엔 '꼭 저렇게까지 표현해야 하나...'하는 생각이 들었지만 괜히 제가 예민하게 구는 것 같아서 몇 번이고 달게 삼켜보려 했는데 주위에 있는 모든 사람들이 불편해하는 걸 보고서 이건 크게 잘못된 것이라는 걸 깨달았죠. 그 사람의 언어 때문에 그 사람과 대화하는 우리 모두가 피해를 보고 있었던 겁니다.

08 . 더 경악스러웠던 건 본인도 불쾌하게 들었으면서 어느 순간 그 사람의 언어를 따라 하는 사람들이 생겨나기 시작했다는 겁니다. 그렇게 후배들은 물론이고 새로 협업하는 동료들에게까지 아무렇지 않게 나쁜 언어들을 전파하고 다녔고, 죄책감은커녕 본인은 쿨한 업계 용어(?)를 쓰는 것 즈음으로 생각하고 말더군요. 나쁜 영향이 대물림되는 전형적인 순간을 목도하고 만 것이죠.

09 . 이제는 저도 어느 정도 연차가 쌓인 만큼 나쁜 언어들과 마주할 때면 최대한 정중하게 그런 말을 쓰지 말 것을 권유하지만 나쁜 사람들은 대부분 크게 개의치 않습니다. 오히려 지적하는 사람을 나이브 한 사람으로 매도하는 경우도 많고 말이죠.
하지만 그렇다고 해서 쉽게 포기하진 않습니다. 나쁜 언어로 타인을 괴롭히는 사람들은 그 어떤 폭력보다도 악질에 가까우니까요, 과하다 싶을 때는 현장 분위기가 어색해질 것을 감안하고라도 그 자리에서 짚고 넘어가는 것이 옳은 행동임은 분명합니다.

10 . 그럼에도 쉽게 해결되지 않는다면 적어도 내가 그 사람의 언어를 함께 공용어(?)로 사용하지 않는 것부터 실천해야 합니다. 내가 몸담은 조직에서 아무리 흔하게 쓰는 표현이더라도, (백 번 양보해서) 상대에게 해를 끼칠 생각이 요만큼도 없이 사용한 장난에 가까운 말들이더라도 그 사람의 언어를 함께 쓰는 순간 나도 똑같은 사람이 되는 건 부정할 수 없는 사실이거든요. 그러니 친하다고, 익숙하다고, 상대가 크게 내색하지 않았다고 해서 찝찝한 말들을 그대로 방치하거나 사용하지는 말았으면 합니다. 그건 나쁜 사람에게서 받은 나쁜 영향을 좋은 사람들에게 묻히고 다니는 진정으로 어리석은 짓이니 말이죠.

01 . '세상에 내 맘에 드는 사람만 있는 건 아니다...', '모두를 품으려고 하는 것도 주제넘은 짓이다...', '가뜩이나 힘든 세상 저 사람에 때문에 더 힘들어하지 말자...'란 말을 수십 번 되뇌어도 늘 우리를 괴롭히는 사람들은 존재하는 법입니다. 그리고 그런 사람이 단순히 나와 코드가 맞지 않는 수준을 벗어나 누구에게나 나쁜 영향을 주는 사람이라면 상황은 보다 심각해지는 법이죠. 02 . 얼마 전 한참하고도 또 한참 동생뻘쯤 되는 지인분으로부터 메시지 한 통을 받았습니다. 딱 봐도 하루를 참 힘들게 보냈겠구나 싶은 분위기가 물씬 풍기는 와중에 대뜸 이런 질문을 저에게 던지더군요.'도영님은 주위에 나쁜 영향을 주는 사람이 있으면 그 사람을 어떻게 대하시나요?'무슨 고된 일이 있었냐는 질문을 되돌려주기엔 괜히 짐 하나를 더 얹어주는 것도 같았고, 한편으로는 저 스스로를 돌아보게 만드는 것도 같은 질문이었죠. 그러게요. 저는 저에게 나쁜 영향을 주는 사람을 어떻게 대하고 있는지 문득 궁금해지기 시작했습니다. 03 . 맘 같아서야 속으로 열 번도 더 윽박지르고 싶을 만큼 얄밉고 이기적인 사람들이 어디에나 존재하는 법이지만 또 그 사람들이 주는 스트레스를 떠안고 살기엔 제 인생이 너무 아깝다는 생각도 들기 마련이죠. 그래서 매번 모기를 쫓으려 허공에 쉐도우 복싱을 하듯 '근데 그 사람 진짜 너무 한 거 같아... 아니야 괜히 이런 생각에 매몰되지 말자. 그럴 시간에 좋은 생각 한 번 더해야지'라는 혼잣말을 수십 번 반복하게 되는 게 사실입니다. 04 . 하지만 어느 순간부터는 나쁜 생각을 털어내는 것만큼이나 내가 받은 나쁜 영향을 다른 사람에게 전달하지 않는 것도 너무너무 중요한 일이라는 생각을 하게 되었습니다. 물론 이걸 몰라서 실천하지 않는 사람은 거의 없겠지만 실제로 마음먹은 대로 잘되지 않는 대표적인 행동이기도 하죠. 나 혼자만 이 기분을 떠안긴 억울하고 그렇다고 대놓고 표현하자니 나도 똑같은 사람이 되는 것 같아 망설여지는 순간이면 세상에서 내가 제일 답답한 사람인 것 같은 생각마저 드니까요. 05 . 대신 저는 분명하게 실천하는 한 가지가 있긴 합니다. 바로 '그 사람의 언어를 사용하지 않는 것'입니다. 다시 말해 내게 나쁜 영향을 주는 사람이 사용하는 묘하디 묘하게 귀에 거슬리는, 아주 얄팍한 방법으로 타인의 감정을 갉아먹는 그 단어와 표현들을 절대 사용하지 않는 거죠. 그게 무슨 대응법이냐고 반론을 제기할 분도 있겠지만 조금만 생각해 보면 아주 현실적이고 우아한(?) 복수이기도 합니다. 아니 정확히는 나쁜 사람이 주는 나쁜 영향을 모조리 튕겨내는 일종의 방수복을 입는 것과도 같은 효과라 할 수 있죠. 06 . 사실 우리 주위에서 천벌을 받을 정도로 극악무도한 사람을 만나는 건 극히 드문 일입니다. 좋은 사람만큼이나 나쁜 사람도 많은 게 슬픈 현실이지만 적어도 우리와 사회적 관계를 유지하고 살 정도의 사람이라면 '그것이 알고싶다'에 등장할 법한 인물들은 없을 테니 말이죠. 하지만 그 정도로 나쁜 사람이 아니더라도 늘 나쁜 영향을 주는 사람들은 말 그대로 '나쁜 언어'를 즐겨 사용합니다. 욕설을 하거나 험악한 말들을 내뱉는 게 아니라 상대로 하여금 수많은 불쾌감을 안겨주는 표현들을 큰 죄책감 없이 하는 사람들인 거죠. 07 . 당연히 저도 그런 사람을 겪어본 적이 있습니다. (아니..현재진행형이려나요... 암튼) 많은 사람을 힘들게 했던 그분은 팀원들이 좋은 아이디어를 내서 역량을 발휘하는 순간에도 '끼를 제대로 부렸다'고 표현하거나, 디테일까지 살뜰히 챙기는 동료들을 보고도 '편집증 환자 수준으로 이잡듯이 뒤졌다'고 비유하곤 했습니다. 이런 표현들은 날이 갈수록 정도를 더해 나중에는 서로 모여 그 의미를 해석해야 하는 수준에게까지 이르렀죠. 그 사람이 쓰는 나쁜 용어들로 사전 하나를 만들라고 해도 딱히 불가능해 보이는 미션은 아닌 것 같았으니까요. 처음엔 '꼭 저렇게까지 표현해야 하나...'하는 생각이 들었지만 괜히 제가 예민하게 구는 것 같아서 몇 번이고 달게 삼켜보려 했는데 주위에 있는 모든 사람들이 불편해하는 걸 보고서 이건 크게 잘못된 것이라는 걸 깨달았죠. 그 사람의 언어 때문에 그 사람과 대화하는 우리 모두가 피해를 보고 있었던 겁니다. 08 . 더 경악스러웠던 건 본인도 불쾌하게 들었으면서 어느 순간 그 사람의 언어를 따라 하는 사람들이 생겨나기 시작했다는 겁니다. 그렇게 후배들은 물론이고 새로 협업하는 동료들에게까지 아무렇지 않게 나쁜 언어들을 전파하고 다녔고, 죄책감은커녕 본인은 쿨한 업계 용어(?)를 쓰는 것 즈음으로 생각하고 말더군요. 나쁜 영향이 대물림되는 전형적인 순간을 목도하고 만 것이죠. 09 . 이제는 저도 어느 정도 연차가 쌓인 만큼 나쁜 언어들과 마주할 때면 최대한 정중하게 그런 말을 쓰지 말 것을 권유하지만 나쁜 사람들은 대부분 크게 개의치 않습니다. 오히려 지적하는 사람을 나이브 한 사람으로 매도하는 경우도 많고 말이죠. 하지만 그렇다고 해서 쉽게 포기하진 않습니다. 나쁜 언어로 타인을 괴롭히는 사람들은 그 어떤 폭력보다도 악질에 가까우니까요, 과하다 싶을 때는 현장 분위기가 어색해질 것을 감안하고라도 그 자리에서 짚고 넘어가는 것이 옳은 행동임은 분명합니다. 10 . 그럼에도 쉽게 해결되지 않는다면 적어도 내가 그 사람의 언어를 함께 공용어(?)로 사용하지 않는 것부터 실천해야 합니다. 내가 몸담은 조직에서 아무리 흔하게 쓰는 표현이더라도, (백 번 양보해서) 상대에게 해를 끼칠 생각이 요만큼도 없이 사용한 장난에 가까운 말들이더라도 그 사람의 언어를 함께 쓰는 순간 나도 똑같은 사람이 되는 건 부정할 수 없는 사실이거든요. 그러니 친하다고, 익숙하다고, 상대가 크게 내색하지 않았다고 해서 찝찝한 말들을 그대로 방치하거나 사용하지는 말았으면 합니다. 그건 나쁜 사람에게서 받은 나쁜 영향을 좋은 사람들에게 묻히고 다니는 진정으로 어리석은 짓이니 말이죠.

나쁜 사람에 대한 최고의 복수는 '그 사람의 언어를 쓰지 않는 것

대한민국 5대 IT회사 네카라쿠배 국적

네(이버) - 한국 회사
카(카오) - 한국 회사
라(인) - 일본 회사 (진행중)
쿠(팡) - 미국 회사
배(민) - 독일 회사

음… 그 중 라인이 유일하게 “진정한” 글로벌 서비스를 하는 회사인데…

대한민국 5대 IT회사 네카라쿠배 국적 네(이버) - 한국 회사카(카오) - 한국 회사라(인) - 일본 회사 (진행중)쿠(팡) - 미국 회사배(민) - 독일 회사 음… 그 중 라인이 유일하게 “진정한” 글로벌 서비스를 하는 회사인데…

대한민국 5대 IT회사 네카라쿠배 국적

네(이버) - 한국 회사

작년에 예상한 올해 ’2024년 마케팅&시장 트렌드 TOP 10‘ 중간 점검을 해보았다. 정리해서 강연을 하고, 멘토링과 컨설팅 근간으로 활용하고, 관련 콘텐츠를 쓴 지 6개월이 되었으니 점검이 필요한 시점이다.

난 트렌드라 말하며 그럴 듯한 말포장해서 그냥 던지고 끝내지 않는다. 그건 트렌드팔이 샐럽이나 사짜 브랜드쟁이들이나 할 일이고, 난 예상한 트렌드가 맞았는지 틀렸는지 체크하고 트렌드가 어떻게 움직이고 실제 사업에 어떤 영향을 미치는지까지 확인한다. 트렌드를 예측해야 하는 이유가 바로 그것이기 때문이다. 거기에 다른 트렌드 예측과 달리 시간축을 넣어서 연속성을 함께 이야기한다. 대부분의 트렌드는 인과관계가 명확하기 때문이다.

모두 예상했던대로 한창 진행 중인 듯하다. 각각 속도는 다르지만 말한대로 움직이고 있다. 다만 ‘10. 카오스’는 생각보다 빨리 정돈되고 있어서 올해가 넘어가면 사라질 듯하다.

[2024년 마케팅&시장 트렌드 TOP 10]

1. Club X : 화려하게 컴백한 그들, X세대
2. 고립사회 : 그들만의 리그 VS 나만의 세상
3. 모순사회 : 눈에 띄지 않게 인정받고 싶은 사람들
4. 보수로의 회귀 : 직업의 가치, 근로수입, 책임감의 강조
5. 빅테크 시대의 개막 : 영화로 보던 미래가 일상으로
6. 인생 아웃소싱 : 라이프 스타일 큐레이션
7. 분노사회 : 모두가 화나 있는 세상
8. 극단사회 : 빈부격차, 생활 수준의 극단화
9. 본능사회 : 쾌락과 자극에 반응하는 사람들
10. 카오스 : 모든 시장 트렌드의 근원

작년에 예상한 올해 ’2024년 마케팅&amp;시장 트렌드 TOP 10‘ 중간 점검을 해보았다. 정리해서 강연을 하고, 멘토링과 컨설팅 근간으로 활용하고, 관련 콘텐츠를 쓴 지 6개월이 되었으니 점검이 필요한 시점이다. 난 트렌드라 말하며 그럴 듯한 말포장해서 그냥 던지고 끝내지 않는다. 그건 트렌드팔이 샐럽이나 사짜 브랜드쟁이들이나 할 일이고, 난 예상한 트렌드가 맞았는지 틀렸는지 체크하고 트렌드가 어떻게 움직이고 실제 사업에 어떤 영향을 미치는지까지 확인한다. 트렌드를 예측해야 하는 이유가 바로 그것이기 때문이다. 거기에 다른 트렌드 예측과 달리 시간축을 넣어서 연속성을 함께 이야기한다. 대부분의 트렌드는 인과관계가 명확하기 때문이다. 모두 예상했던대로 한창 진행 중인 듯하다. 각각 속도는 다르지만 말한대로 움직이고 있다. 다만 ‘10. 카오스’는 생각보다 빨리 정돈되고 있어서 올해가 넘어가면 사라질 듯하다. [2024년 마케팅&amp;시장 트렌드 TOP 10]​1. Club X : 화려하게 컴백한 그들, X세대2. 고립사회 : 그들만의 리그 VS 나만의 세상3. 모순사회 : 눈에 띄지 않게 인정받고 싶은 사람들4. 보수로의 회귀 : 직업의 가치, 근로수입, 책임감의 강조5. 빅테크 시대의 개막 : 영화로 보던 미래가 일상으로6. 인생 아웃소싱 : 라이프 스타일 큐레이션7. 분노사회 : 모두가 화나 있는 세상8. 극단사회 : 빈부격차, 생활 수준의 극단화9. 본능사회 : 쾌락과 자극에 반응하는 사람들10. 카오스 : 모든 시장 트렌드의 근원

작년에 예상한 올해 ’2024년 마케팅&시장 트렌드 TOP 10‘

SOLID 원칙 많이들 공부하시죠. 다섯 가지 원칙들의 정의, 그리고 원칙들이 적용된 코드를 습득하는데에서 그치지 말고 각 원칙들의 단점까지 파악해서 상황에 맞게 tradeoff를 제대로 할 줄 아는게 중요합니다.

S: 단일 책임 원칙을 지킬 때의 이점은 코드의 기능을 이해하기 쉽고 유지보수가 편리해지는 반면 단점으로는 지나치게 분리를 하면 전체 시스템을 파악하기가 어려울 수도 있고, 구현 난이도가 올라갈 수도 있습니다.

O: 개방폐쇄 원칙을 지켰을 때의 이점은 기능 변경 시 코드 수정 범위가 작고 확장성이 좋다는 것입니다. 반면에 단점은 코드의 복잡성이 증가하게 되죠. 코드를 읽기 더 어려워질수도 있고 타입이 많아지는 오버헤드도 발생하고요.

L: 리스코프 치환 원칙을 잘 지켰을 때의 이점은 코드의 예측 가능성, 신뢰성이 높아진다는 점입니다. 어떤 타입을 받았을때 내가 알고 있는 대로 동작할거라고 예상할 수 있으니까요. 반면에 단점은 유연함을 잃게 됩니다. 자식 클래스에서 약간의 창의성도 발휘할 수 없게 되죠.

저는 시간 관계상 여기까지만 쓰도록 하겠습니다. 인터페이스 분리 원칙과 의존성 역전 원칙은 어떤 장점과 단점들이 있을까요?

프로그래밍에서 보통 얻는 것이 있으면 잃는 것도 있다는걸 언제나 기억해야 합니다. 새로운걸 공부할 때는 동전의 양면을 모두 파악하는 습관을 들이는 것이 좋습니다.

SOLID 원칙 많이들 공부하시죠. 다섯 가지 원칙들의 정의, 그리고 원칙들이 적용된 코드를 습득하는데에서 그치지 말고 각 원칙들의 단점까지 파악해서 상황에 맞게 tradeoff를 제대로 할 줄 아는게 중요합니다. S: 단일 책임 원칙을 지킬 때의 이점은 코드의 기능을 이해하기 쉽고 유지보수가 편리해지는 반면 단점으로는 지나치게 분리를 하면 전체 시스템을 파악하기가 어려울 수도 있고, 구현 난이도가 올라갈 수도 있습니다. O: 개방폐쇄 원칙을 지켰을 때의 이점은 기능 변경 시 코드 수정 범위가 작고 확장성이 좋다는 것입니다. 반면에 단점은 코드의 복잡성이 증가하게 되죠. 코드를 읽기 더 어려워질수도 있고 타입이 많아지는 오버헤드도 발생하고요. L: 리스코프 치환 원칙을 잘 지켰을 때의 이점은 코드의 예측 가능성, 신뢰성이 높아진다는 점입니다. 어떤 타입을 받았을때 내가 알고 있는 대로 동작할거라고 예상할 수 있으니까요. 반면에 단점은 유연함을 잃게 됩니다. 자식 클래스에서 약간의 창의성도 발휘할 수 없게 되죠. 저는 시간 관계상 여기까지만 쓰도록 하겠습니다. 인터페이스 분리 원칙과 의존성 역전 원칙은 어떤 장점과 단점들이 있을까요? 프로그래밍에서 보통 얻는 것이 있으면 잃는 것도 있다는걸 언제나 기억해야 합니다. 새로운걸 공부할 때는 동전의 양면을 모두 파악하는 습관을 들이는 것이 좋습니다.

SOLID 원칙의 이면

웹 컴포넌트는 그 기능을 나머지 코드로부터 캡슐화하여 재사용 가능한 커스텀 엘리먼트를 생성하고 웹 앱에서 활용할 수 있도록 해주는 다양한 기술들의 모음입니다.

웹 컴포넌트 - Web API | MDN

웹 컴포넌트(Web Components)는 웹 개발에서 코드의 재사용성을 높이고 컴포넌트의 캡슐화를 실현하기 위한 기술입니다.
전통적인 웹 표준에서는 코드의 재사용이 쉽지 않았는데요. 웹 컴포넌트는 웹 표준 기술을 사용하여 컴포넌트를 재사용할 수 있도록 합니다. 이는 개발 효율성을 높이고 코드의 유지보수성을 향상시키는 데 도움이 되는데요.

웹 컴포넌트는 다음과 같은 주요 개념으로 구성됩니다:
 1. 사용자 정의 요소(Custom Elements): 개발자가 직접 정의한 HTML 태그와 해당 태그의 동작을 나타내는 API입니다. 이를 통해 커스텀 엘리먼트를 생성하고 활용할 수 있습니다.
 2. 섀도우 DOM(Shadow DOM): 컴포넌트의 내부 구조와 스타일을 외부로부터 격리시키는 기술입니다. 이를 통해 컴포넌트의 기능을 프라이빗하게 유지할 수 있으며, 다른 부분의 스타일과 충돌하지 않도록 보장합니다.
 3. HTML 템플릿(HTML Templates): 컴포넌트의 구조를 정의하는 마크업 템플릿입니다. 이 템플릿은 렌더링된 페이지에 직접 나타나지 않으며, 컴포넌트가 인스턴스화될 때 사용됩니다.
 
 
웹 컴포넌트는 자바스크립트의 클래스 문법을 사용하여 구현됩니다. 또한, 리액트나 뷰와 유사하게 라이프사이클 메서드를 제공하여 컴포넌트의 생성, 업데이트, 제거 등의 과정을 제어할 수 있습니다. 웹 컴포넌트는 웹 표준 기술이기 때문에 별도의 라이브러리나 프레임워크 없이 사용할 수 있다는 장점이 있습니다.
다음은 간단한 웹 컴포넌트 코드 예제입니다:
<script>
 class SimpleGreeting extends HTMLElement {
 constructor() {
 super();
 const shadowRoot = this.attachShadow({mode: 'open'});
 shadowRoot.innerHTML = `안녕하세요 웹컴포넌트 예제입니다!`;
 }
 }
 customElements.define('simple-greeting', SimpleGreeting);
</script>
</head>
<body>
 <simple-greeting></simple-greeting>
</body>

웹 컴포넌트는 클래스 문법을 사용하기 때문에 익숙하지 않은 개발자에게는 다소 복잡해 보일 수 있을것 같은데요. 또한, 현재 리액트나 뷰와 같은 인기 있는 라이브러리가 널리 사용되고 있어 웹 컴포넌트가 이들을 완전히 대체하기는 쉽지 않을것 같습니다.

하지만 웹 컴포넌트의 가장 큰 장점은 웹 표준 기술을 사용하여 컴포넌트를 구현할 수 있기 때문에 라이브러리 사용이 제한된 특수한 환경이나 간단한 컴포넌트 구현이 필요한 상황에서 유용하게 활용될 수 있을것 같습니다.

https://developer.mozilla.org/ko/docs/Web/API/Web_components

웹 컴포넌트(Web Components)는 웹 개발에서 코드의 재사용성을 높이고 컴포넌트의 캡슐화를 실현하기 위한 기술입니다. 전통적인 웹 표준에서는 코드의 재사용이 쉽지 않았는데요. 웹 컴포넌트는 웹 표준 기술을 사용하여 컴포넌트를 재사용할 수 있도록 합니다. 이는 개발 효율성을 높이고 코드의 유지보수성을 향상시키는 데 도움이 되는데요. 웹 컴포넌트는 다음과 같은 주요 개념으로 구성됩니다:<ol ><li>사용자 정의 요소(Custom Elements): 개발자가 직접 정의한 HTML 태그와 해당 태그의 동작을 나타내는 API입니다. 이를 통해 커스텀 엘리먼트를 생성하고 활용할 수 있습니다.</li><li>섀도우 DOM(Shadow DOM): 컴포넌트의 내부 구조와 스타일을 외부로부터 격리시키는 기술입니다. 이를 통해 컴포넌트의 기능을 프라이빗하게 유지할 수 있으며, 다른 부분의 스타일과 충돌하지 않도록 보장합니다.</li><li>HTML 템플릿(HTML Templates): 컴포넌트의 구조를 정의하는 마크업 템플릿입니다. 이 템플릿은 렌더링된 페이지에 직접 나타나지 않으며, 컴포넌트가 인스턴스화될 때 사용됩니다. </li></ol>웹 컴포넌트는 자바스크립트의 클래스 문법을 사용하여 구현됩니다. 또한, 리액트나 뷰와 유사하게 라이프사이클 메서드를 제공하여 컴포넌트의 생성, 업데이트, 제거 등의 과정을 제어할 수 있습니다. 웹 컴포넌트는 웹 표준 기술이기 때문에 별도의 라이브러리나 프레임워크 없이 사용할 수 있다는 장점이 있습니다.다음은 간단한 웹 컴포넌트 코드 예제입니다:<pre ><code>&lt;script&gt;
 class SimpleGreeting extends HTMLElement {
 constructor() {
 super();
 const shadowRoot = this.attachShadow({mode: 'open'});
 shadowRoot.innerHTML = `&lt;p&gt;안녕하세요 웹컴포넌트 예제입니다!&lt;/p&gt;`;
 }
 }
 customElements.define('simple-greeting', SimpleGreeting);
&lt;/script&gt;
&lt;/head&gt;
&lt;body&gt;
 &lt;simple-greeting&gt;&lt;/simple-greeting&gt;
&lt;/body&gt;</code></pre> 웹 컴포넌트는 클래스 문법을 사용하기 때문에 익숙하지 않은 개발자에게는 다소 복잡해 보일 수 있을것 같은데요. 또한, 현재 리액트나 뷰와 같은 인기 있는 라이브러리가 널리 사용되고 있어 웹 컴포넌트가 이들을 완전히 대체하기는 쉽지 않을것 같습니다. 하지만 웹 컴포넌트의 가장 큰 장점은 웹 표준 기술을 사용하여 컴포넌트를 구현할 수 있기 때문에 라이브러리 사용이 제한된 특수한 환경이나 간단한 컴포넌트 구현이 필요한 상황에서 유용하게 활용될 수 있을것 같습니다. https://developer.mozilla.org/ko/docs/Web/API/Web_components

MDN Web Docs

웹 표준 기술로 구현하는 웹 컴포넌트(Web Components)

섹션을 추가하는 h1~h6태그 대신 hgroup과 p로 서브해딩을 추가할 수 있게 되었다.

https://www.tpgi.com/subheadings-subtitles-alternative-titles-and-taglines-in-html/

코비젼 고객사업팀 add-in

박주형

신입 웹 개발자입니다.
회사에서 ASP.NET을 주로 사용하고있습니다.
#개발자 #끊임없이배우기 #도전적인 #독서 #문제를해결하는 #소프트웨어엔지니어

프론트엔드개발자

강경석(핸디)

편리함을 추구하는 개발자, 핸디(Handy)
편리함을 주는 서비스로 언젠가 창업을 하고싶은 그런 사람입니다.
#개발자 #블로거 #소프트웨어엔지니어 #스타트업 #프론트엔드 #UX디자인 #독서 #사이드프로젝트 #창업

댓글 0

비슷한 게시물

주간 인기 TOP 10

추천 프로필