전체 글787

• 

  티스토리를 접은지 8개월이 지났습니다. 2023년 01월 24(화) [티스토리]티스토리를 떠납니다.를 포스팅하고 8개월이 지났습니다. 제 근황보다 블로그 방문자 수는 유지가 되는지? 수익은 감소했는지?에 대해 궁금하신 점이 많을 것 같은데요. 방문자 수는 평일 기준으로 하루 6,000 ~ 8,000명 방문하고 있고 구글 애드센스 수익은 월 20~30만원씩 들어오고 있습니다. 티스토리를 8개월만에 로그인했는데, 방문자 수와 구글 애드센스 수익이 유지되는게 놀라울 따름입니다. 요새 ChatGPT가 각광받고 있어서 블로그 방문자 수가 감소할 줄 알았거든요. 이제, 제 근황을 이야기하고자 합니다. 연구원에서 주임연구원으로 승진함과 동시에 많은 업무를 맡게 되었고 책임져야하는 일도 많아졌습니다. 프로젝트를 완벽하게 성공해야한다는 책임감, 후임들에게 올.. 일상/개발이야기 2023. 9. 22.

• 

  [티스토리]티스토리를 떠납니다. 블로그를 시작한 이유 회사 급여만으로는 경제적 자유를 누릴 수 없기에 2021년부터 다양한 부업을 알아봤습니다. 유튜브, 블로그, 스마트 스토어등 다양한 부업 리스트를 나열하고 '지금 당장 내가 할 수 있는 것은 무엇일까?', '꾸준히 할 수 있는 것은 무엇일까?'에 대해 고민하다가 2021년 4월 티스토리를 시작했습니다. 물론 개발 블로그가 다른 주제에 비해 돈이 안된다는 사실은 알고 있었지만, 다른 주제로 글을 작성할 자신이 없었습니다. '내가 잘못된 정보를 알려주는 게 아닐까?', '내가 이 분야에 아는 것도 없는데 아는 것처럼 글을 써도 문제없을까?'라는 두려움에 직종과 관련 있는 개발을 주제로 블로그를 운영하고 추후 다른 주제에 대해서도 블로그를 운영하기로 다짐했습니다. 개발 블로그가 돈이 안 .. 티스토리/블로그 결산 2023. 1. 24.

• 

  [React]Element 크기 조절을 감지하는 방법 개요 일반적으로 웹 페이지를 제작할 때, Element의 크기를 사용하는 기기(PC, 태블릿, 모바일)에 따라 설정하고 크기를 조절할 수 없도록 개발하지만 반대로 사용자가 컴포넌트의 크기를 조절할 수 있도록 개발하는 경우도 존재한다. 컴포넌트의 크기를 변경할 수 있는 경우 크기가 변경되었는지 감지해야 하는 상황이 존재한다. 예를 들어, 특정 컴포넌트가 DOM에 마운트(mount) 되었는데 textarea의 크기를 변경하는 경우 특정 컴포넌트를 언마운트(unmount) 해야 한다고 가정하자. 이러한 경우 textarea의 크기가 변경되면 특정 state의 값을 변경해서 특정 컴포넌트를 언마운트하는 코드를 작성해야 한다. 하지만, textarea에는 resize라는 이벤트가 존재하지 않기에 textarea의.. React/React 문법 2023. 1. 9.

• 

  CodeSandbox와 Github 연동 본 포스팅은 CodeSandbox와 Github 연동하는 방법을 소개합니다. CodeSandbox 버전에 따라 스크린샷이 일치하지 않을 수 있습니다. 개요 CodeSandbox는 웹 브라우저에서 코드를 작성할 수 있는 온라인 컴파일러다. CodeSandbox는 FrontEnd 개발자들이 사용하는 다양한 라이브러리를 제공하며 React, Next, Node와 같은 라이브러리를 로컬 PC에 설치하지 않고 웹 브라우저에서 사용할 수 있다. 그리고 CodeSandbox에서 생성한 프로젝트를 폴더별로 관리할 수 있으며 사용자가 폴더를 추가하거나 제거할 수 있다는 장점이 있다. 로컬 PC에서 React 프로젝트를 생성할 때마다 create-react-app 명령어를 입력하고 dependencies를 설정하는 과정이.. 개발자 도구/CodeSandbox 2022. 12. 26.

• 

  [티스토리]누적 방문수 100만 달성 티스토리 누적 방문수 100만 달성 2020년 5월 티스토리를 개설했지만 글 쓰는 방법도 몰랐고 블로그 운영 방법도 몰라서 11개월 방치하다가 2021년 4월부터 본격적으로 티스토리를 운영했습니다. 직업이 개발자라서 개발을 주제로 글을 작성했으며 2021년 4월을 기준으로 1년 9개월이 지난 지금(2022년 12월 19일) 누적 방문수 100만을 달성하였습니다. 2022년 목표가 티스토리 누적 방문수 백만이었는데, 다행히 이번 연도가 지나기 전에 목표를 달성하였으며 제 블로그를 방문해주신 많은 분들에게 감사의 인사를 드립니다. 이번 포스팅은 누적 방문수 100만을 달성하면서 겪었던 시행착오와 후기를 작성합니다. 블로그를 시작한 이유 2020년부터 욜로족(돈을 소비하는 사람)보다 파이어족(돈을 모으는 사람.. 티스토리/블로그 결산 2022. 12. 21.

• 

  [티스토리]코드블럭 highlight 적용방법 티스토리의 코드블럭 대부분의 개발자들은 티스토리, Velog, GitHub 또는 워드프레스로 개인 사이트를 구축하여 개발 자료를 공유한다. 카카오 계정만 있으면 바로 운영할 수 있는 티스토리의 점유율이 제일 높지 않을까(?)라고 생각하는데 티스토리의 문제점은 기본으로 제공하는 코드블럭의 디자인이 매우 밋밋하다는 것이다. 아래는 티스토리의 기본 스킨인 오디세이에서 코드블럭을 사용했을 때 화면이다. 한눈에 봐도 디자인이 별로다. 기본 코드블럭의 디자인이 별로라서 능력 있는 개발자들은 기본 코드블럭의 디자인을 커스텀해서 사용하고 있다. 아래 스크린샷은 가장 많이 사용하고 있는 carbon이라는 커스텀 코드블럭이다. 서농님의 블로그에서 확인할 수 있다. 다음은 개발자가 직접 커스텀한 것으로 추측되는 코드블럭이다.. 티스토리/티스토리 스킨 제작 2022. 12. 21.

• 

  개발자가 알아야 할 글쓰기 기본 - 문장을 작성하는 방법 개요 지난 포스팅에서는 개발자가 글을 못 쓰는 이유와 개발자의 글쓰기 세 가지 특징(정확성, 간결성, 가독성)에 대해 설명하였다. 이번 포스팅은 개발자가 글을 작성하기 전에 알아야 하는 기본에 대해 정리한다. 문장을 구조화하는 방법 토익을 처음 입문하면 '영어 5 형식 문장'에 대해 배우게 된다. 기본적으로 모든 문장은 주어, 동사가 존재하며 문장의 의미를 좀 더 자세하게 표현하기 위해 보어, 목적어, 수식어가 사용되기도 한다. 이러한 문장 구조는 한글도 마찬가지다. 한글에서도 문장을 표현하기 위해 기본적으로 주어와 동사를 사용하며 경우에 따라 보어, 목적어, 수식어가 사용되기도 한다. 신기한 점은 문장의 구조는 바뀔 수 있다는 것이고 어떻게 바뀌느냐에 따라 글을 쓰는 속도 그리고 글을 해석하는 속도가 .. 일상/개발이야기 2022. 12. 18.

• 

  개발자가 글을 못 쓰는 이유 개요 개발이라는 주제로 1년 6개월 동안 블로그를 운영하면서 779개의 포스팅을 발행했다. 포스팅에는 도움이 되었다고 댓글을 작성해주신 분들도 있었지만, 반대로 무슨 말인지 이해가 안 된다는 댓글을 작성해주신 분들도 많았다. 아이러니하게도 글 작성자인 나도 과거에 작성한 포스팅을 보면 무슨 내용인지 이해되지 않은 경우가 많았다. 몇 가지 문제점을 살펴보자면 다음과 같다. 방문 유입을 늘리고자 글 퀄리티를 크게 신경 쓰지 않음 줄 간격, 폰트 등 CSS 문제로 가독성이 떨어짐 글로 설명하지 않아도 되는 내용을 글로 설명하여 가독성이 떨어짐 강의할 수 있는 능력이 부족한데, 강의하듯이 글을 작성함 첫 번째 문제점은 블로그 방문 유입을 늘리려면 많은 글을 포스팅하는 것이 좋으므로 퀄리티 있는 글을 작성하기 위.. 일상/개발이야기 2022. 12. 17.

• 

  [JS]data 애트리뷰트(Attribute) 사용 방법 개요 HTML에서 애트리뷰트(Attribute)는 스타일 제어 또는 고유한 정보를 할당하거나 JavaScript에서 HTML 요소를 접근하기 위해 사용된다. 일반적으로 가장 잘 알려진 애트리뷰트는 id 및 class 애트리뷰트이며, 이 외에도 name, tab, role, tabindex, target, rel 등 다양한 애트리뷰트가 존재한다. 개발자는 위에서 언급한 애트리뷰트가 아닌 커스텀 애트리뷰트를 사용할 수 있는데, 아래 예제처럼 말도 안 되는 이름으로 애트리뷰트를 설정하는 것이 가능하고 JavaScript에서 커스텀 애트리뷰트를 접근하는 것도 가능하다. 버튼 하지만 대부분의 개발자들은 커스텀 애트리뷰트를 사용하는 것을 꺼려한다. 커스텀 애트리뷰트를 작성한 본인은 해당 애트리뷰트를 사용한 이유를 .. JavaScript/DOM 2022. 12. 15.

• 

  [JS]이스케이프를 문자열로 처리하는 String.raw() 메서드 해당 포스팅은 String.raw() 메서드의 필요성과 사용 방법을 설명합니다. 개요 JavaScript에서 문자열을 설정하는 방법은 크게 두 가지로 분류된다. 첫 번째 방법은 작은따옴표(') 또는 큰 따옴표(")를 사용하는 것이고 두 번째 방법은 백틱(`)을 사용하는 것이다. // 작은 따옴표(') 또는 큰 따옴표(")를 사용하여 문자열 할당 const str1 = 'Hello'; const str2 = "Hello"; // 백틱(`)을 사용하여 문자열 할당 const str3 = `Hello`; 백틱을 사용하여 문자열을 할당하는 것을 템플릿 리터럴(Template literals)이라고 말하는데 줄 바꿈을 처리하기 위해 이스케이프를 작성하지 않아도 된다는 장점이 있다. const str1 = "Hi,.. JavaScript/문자열 2022. 12. 13.

• 

  [JS]커스텀 이벤트 생성하기(CustomEvent 및 dispatchEvent) 해당 포스팅은 JavaScript에서 커스텀 이벤트를 생성할 수 있는 방법을 설명합니다. 개요 대부분의 개발자는 JavaScript에서 "click" 또는 "change" 이벤트를 많이 사용할 것이다. 아이디(id)와 패스워드(password)를 서버로 전송하기 위해 로그인 버튼을 클릭해야 하며, 네이버와 다음 또는 구글과 같은 웹 사이트의 검색 창에서 키워드를 변경할 때마다 자동 완성이 표시되어야 하기 때문이다. 하지만 경우에 따라 JavaScript에서 제공하는 기본 이벤트가 개발 요구 사항을 충족하지 않을 수 있다. 이러한 경우 개발자는 커스텀 이벤트를 생성하여 원하는 작업을 수행하도록 할 수 있다. 커스텀 이벤트 생성 방법 JavaScript에서 커스텀 이벤트를 생성하는 두 가지 방법이 존재한다... JavaScript/DOM 2022. 12. 11.

• 

  [JS]이벤트 위임(Event Delegation)이란? 이벤트 위임(Event Delegation) JavaScript의 대부분 이벤트는 이벤트 흐름(Event Flow)의 이벤트 캡처링, 이벤트 버블링 단계를 거칩니다. 일반적으로 addEventListener() 메서드의 세 번째 매개변수로 true를 전달하지 않은 이상 이벤트 캡처링 단계는 수행되지 않고 이벤트 버블링 단계를 거치는데, 이벤트 버블링은 타겟에서 이벤트가 발생하면 타겟에서 위로 이벤트를 전파하는 것을 말합니다. 아래 예제에서 태그에서 click 이벤트가 발생하면, button → span → div로 이벤트가 전파됩니다. 버튼 const divNode = document.getElementById("div-content"); const spanNode = document.getElement.. JavaScript/DOM 2022. 12. 11.