매일 꾸준히, 더 깊이

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 이번 포스트를 통해서 Web개발에 중요한 개념인 DOM(Document Object Model)과 가상 DOM에 대해서 설명하고자 한다. 이 두 가지의 차이점을 이해한다면 보다 효율적인 Web어플리케이션 개발이 가능해진다. DOM이란? DOM은 HTML이나 XML 문서 프로그램에 따른 인터페이스를 의미한다. Web 브라우저가 HTML을 읽어들이면 그것을 해석해서 DOM 트리를 구축한다. 이 DOM 트리를 통해서 JavaScript등의 언어로 문서 내용이나 구조, 스타일을 조작하게 된다. 다음과 같은 HTML코드가 있다고 하자. 이 HTML을 DOM트리를 변환되면 html, he..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. JWT란? JWT이란 Json Web Token의 약어로 정보를 안전히 송수신하기 위한 오픈 스탠드이다. 짧고 간단하게 JWT는 HTTP 헤더나 쿼리 스트링으로 확실히 정보를 보내거나, 받을 수 있게 된다. 주로 유저 인증이나 정보 교환을 위해 사용된다. JWT는 "헤더", "페이로드", "시그니처" 세 부분으로 구성되어 있으며, 각각 Base64Url로 엔코딩된다. JWT의 필요성과 장점 그럼 여기서 JWT가 필요한 이유와 어떤 장점이 있는지에 대해 알아보자. JWT의 최대 장점은 "상태를 유지하지 않는" 성질이다. 즉, JWT는 정보 자체를 토큰 내에 보유하고 있으므로 서버..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 수정하도록 하겠습니다. 1. 가능한 방법을 함께 생각해준다. 다른 부서 사람의 입장에서 개발의 상세한 부분을 잘 알지 못하기 때문에 엔지니어에게 상담하여 판단을 받는 경우가 많다고 생각한다. 예를 들어 다른 부서에서 개발과 관련해서 상담했을 때, 아래와 두 타입으로 답변을 하는 엔지니어가 존재한고 생각한다. A : "그건 무리입니다", "안됩니다" B : "그대로는 무리입니다만, 이렇게 하면 원하는 형태에 가깝게 될지도 모릅니다" A와 같은 답변을 받으면 가지고 있는 스킬 분야가 다르기 때문에 다른 부서의 입장에서는 이 이상의 발전적인 토론이 불가능하다. B와 같은 답변을 해주는 엔지니어는 이..

유독 2023년은 정신없이 지나갔다. 새로운 직장에서의 적응은 물론 이사도 있었고, 코로나가 어느정도 안정되면서 친구, 친척, 가족을 포함해서 많은 사람들이 일본으로 여행을 오게 되어 주말에 만남을 가지거나 가이드를 하는 일이 중간 중간 있었기 때문인 것 같다. 2023년을 한마디로 요약하자면 나보다는 주위 사람들을 챙긴 한 해였다고 할 수 있겠다. 아무튼 이번해에도 늘 그랬듯 한 해를 회고하면서 다가오는 2024년 계획을 세워보고자 한다. 나의 2023년 1. 지난 2022년에 세운 목표 달성 여부 확인 올해 초에 작성한 목표를 다시 살펴보니 크게 일곱가지였다. 그 중에 확실히 달성했다고 자신을 가지고 말할 수 있는 것은 네 가지로 "비자, 여권 갱신", "운동 다시 시작하기", "책 30권 읽기 + ..

이메일 발신자 가이드라인 - Gmail 고객센터이 도움말의 가이드라인은 Gmail 계정으로 이메일을 성공적으로 전송하는 데 도움이 됩니다. Gmail 계정은 다음 계정 유형 중 하나입니다. @gmail.com 또는 googlemail.com으로 끝나는 개인 계정 Google Workspsupport.google.com 2024년 2월 1일부터 Google이 대량으로 메일을 보내는 발신자에 대한 가이드 라인을 변경한다는 공지를 올렸다. 여기서 대량으로 메일을 보내는 발신자의 기준은 1일에 5,000개 이상의 메일을 보내는 발신자이다. 이 가이드 라인을 위반했을 경우 이메일이 정상적으로 전송되지 않거나 스팸으로 표시 될 수 있으므로, 메일 관련된 기능이 있는 서비스를 운영하고 있는 경우 가이드 라인을 확인하..

※ 일본의 한 블로그 글을 번역한 포스트로 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 새로운 서비스나 제품을 성공으로 이끌기 위해 무엇보다도 필요한 것이 "아이디어"이다. 개인 스타트업, 거대 기업의 신규 사업등 할 것 없이 혁신적인 아이디어는 시장을 변혁하고 새로운 가치를 생성하는 중요한 요소가 된다. 그러나 독자적인 아이디어를 내는 것은 많은 개발자의 입장에서는 엄청난 과제이다. 그러한 과제의 원인 중 하나로는 "고정관념"을 가지고 있기 때문일지도 모른다. SoftBank창업자이자, 많은 기업가를 키우고 있는 손정의는 탁월한 아이디어 발성법으로 계속해서 업계를 리드하고 있다. 그의 성공 뒤에는 어떤 사고방식이나 수법이 숨겨져 있을까? 이번 포스트에서는 손정의의 아..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 어느 데이터 타입에서 다른 데이터 타입으로 변환을 쉽게 해주는 것을 유틸리티 타입이라고 한다. 타입 스크립트에는 Partial이 외에 몇 가지 유틸리티 타입을 제공하고 있다. Partial타입 Partial 타입은 오브젝트를 변환하는 타입 중 하나로 Partial 형태로 사용하며 T의 모든 속성을 옵셔널 타입으로 만들어준다. type Human1 = Partial const human1_1: Human1 = { name: "nao", age: 18 } const human1_2: Human1 = { name: "nao" } Human1에는 옵셔널 속성을 선언하기 위한 "?"가..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. https://www.youtube.com/watch?v=6D58SI9P-aU&t=1237s 영상의 내용을 번역했다. ref() vs reactive() ref()와 reactive() 중 어느 쪽을 쓰는 것이 좋을까? Composition API를 이용한 라이브러리의 코드를 집계한 결과는 다음과 같다. 거의 ref()를 사용하고 있다는 것을 알 수 있다. 생각할 수 있는 주된 이유는 "일관성(consistency)"일 것이다. reactive에는 제한이 있지만 ref는 어디에서 사용할 수 있으며 대부분의 개발자들은 일관성을 중시하기 때문에 ref를 선택하는 경우가 많다고 예..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 존재할 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 지금까지 알게 된 사소하고 자잘한 TypeScript관련 테크닉을 모은 포스트이다. 자신이 정의한 타입에 대해 타입 가드하기 유저 정의 타입 가드에 대해서 TypeScript에서는 typeof, instanceof, in등의 연산자를 이용하여 변수에 대해 타입 가드할 수 있지만, 이러한 연산자로는 자신이 정의한 타입을 가드할 수 없다. type Hoge = "hoge" | "fuga"; const attr = document.querySelector(".hoge")?.getAttribute("name") ?? ""; if (typeof attr === Hoge) { // NG..

※ 일본의 한 블로그 글을 번역한 포스트입니다. 오역 및 의역, 직역이 있을 수 있으며 틀린 내용은 지적해주시면 감사하겠습니다. 즉시 실행 함수란? 먼저 즉시 실행 함수의 기본부터 설명하도록하겠다. 즉시 실행 함수란 정의된 직후에 실행되는 함수를 의미한다. 보통의 함수와 다른 점은 이름을 가지지 않고, 바로 실행된다는 특징이 있다. 기본적으로는 다음과 같이 쓸 수 있다. (function() { console.log("이것은 즉시 실행함수입니다！"); })(); 이 코드에서는 함수가 정의된 직후, 콘솔에 메시지가 출력된다. 인수를 가진 즉시 실행 함수의 사용법 다음은 즉시 실행함수에 인수를 전달하는 방법에 대해서 소개하도록 하겠다. 인수를 전달하여 외부의 데이터를 함수 안에서 이용할 수 있게 된다. 그럼..