티스토리 유입 경로 직접 유입 증가 분석 원인 파악

티스토리에서는 블로그 관리에서 통계 ▶️ 유입경로를 통해서 내 블로그에 들어온 사람의 경로를 알 수 있습니다. 검색, SNS, 기타 등 있습니다. 검색 경로는 네이버, 다음, 구글 등 사이트에서 검색을 해서 제 블로그에 방문을 하는 것이고, SNS는 제 블로그 링크를 누군가 SNS에 올려서 그 링크를 타고 들어오는 것이 SNS입니다. 그중 기타에는 직접유입과 기타 유입이 있습니다. 직접 유입은 제 블로그 주소를 직접 입력해서 방문하는 것입니다. 그 외 기타 유입은 대부분 제 블로그에서 다른 글로 이동할 때 찍힙니다. 검색, SNS 등의 경우에는 어디서 유입되는지 바로 알 수 있습니다. 하지만, 직접 유입의 경우에는 누가 어디서 접근했는지 알 수가 없습니다. 개인이 접근할 수도 있고, 혹시 구글이나 검색엔..

• format_list_bulleted 일상/블로그
• · 2023. 10. 22.
• textsms

Zustand - 요즘 인기 있는 간편한 React 상태 관리 라이브러리

React 상태 관리 라이브러리란? React에서는 상태 값을 useState나 useReducer를 이용해서 관리할 수 있습니다만, 다양한 컴포넌트, 페이지에서 공유하기 위해는 상태 관리 라이브러리를 사용하는 것이 편리하고 좋습니다. 그중 유명한 것들이 Redux, Recoil, Zustand 등이 있습니다. 그중 Zustand 특징, 설치 방법, 사용법에 대해서 작성해 보겠습니다. Zustand 란? React 상태 관리 라이브러리 중 하나입니다. 가볍고 사용하기 간편해서 Redux 다음으로 가장 npm 다운로드수가 가장 높습니다. Zustand 특징 React 상태 관리 라이브러리 중 하나인 Redux의 경우에는 사용하기 어렵고, 코드가 복잡합니다. 그래서 React를 공부하는 분들 중에, Redu..

• format_list_bulleted Develop/React
• · 2023. 10. 19.
• textsms

Tailwind 설치 방법 사용법 장단점 CSS와 비교

Tailwind 란? Tailwind는 CSS를 HTML 코드에서 class이름으로 이용하여 스타일을 생성하고 작성합니다 클릭하세요 장점 생산성 최적화 HTML과 CSS 파일을 두 개를 열어놓고 작업하지 않아도 돼서 작업 속도가 빠르고, 다양한 에디터에서 자동완성 기능을 제공합니다. 또 CSS 파일 크기가 감소하여, 로딩 속도 향상에도 도움을 줍니다. CSS 파일을 만들게 되면, 스타일을 주기 위해 클래스 이름을 뭐로 할까 고민을 하게 되는데, 그런 시간도 줄일 수 있습니다. 단점 예쁘지 않은 코드 스타일 많게 되면, 코드가 길어지게 되고, 예쁘지 않게 되고 이해하기 어렵습니다. 타이틀 내용 확인 클래스명 학습 런닝 커브 처음 사용하게 되면, 클래스명을 외워서 사용해야 하는데, 조금 공부가 필요합니다 초..

• format_list_bulleted Develop/CSS
• · 2023. 10. 17.
• textsms

CSS - Gap 속성 사용법 margin과의 차이점

Gap이란? grid와 flex 요소 행과 열에 간격을 지정할 수 있습니다. margin은 요소 외부에 여백이 생성되지만, gap 속성은 요소 내부에 지정 됩니다. margin은 첫번째, 마지막 요소에 여백을 제거하기 위해서 first-child, last-child 구문을 쓰기도 하였지만, gap 요소 내부에 간격이 생기기 때문에 간편하게 사용할 수 있습니다. 단, ie 브라우저에서는 지원하지 않습니다. 사용법 { gap: 10px; } { gap: 10px 20px; // row-gap, column-gap } 예시 See the Pen Untitled by powerku (@powerku) on CodePen.

• format_list_bulleted Develop/CSS
• · 2023. 10. 14.
• textsms

회사에서 업무 우선 순위 정하는 방법

안녕하세요, 직장 생활을 하면 한가할 때도 있고, 업무가 한 번에 몰릴 때도 있습니다. 업무가 한번에 몰릴 때, 어떤 순서로 일을 처리하는 것이 좋을까 저의 생각을 한번 작성해 보도록 하겠습니다. 업무 우선 순위 직속 상사가 시킨 일 같은 팀원이 요청한 일 다른 팀원이 요청한 일 매 일/주/월 하는 반복적인 업무 저는 위와 같은 순서로 업무의 우선순위를 정하고 실행합니다. 1. 직속 상사가 시킨 일 직장 생활에서 가장 우선적으로 생각하고 하는 일입니다. 사장 > 본부장 > 팀장 > 사수 등 직속 상사가 시킨 일에 대해서 가장 우선적으로 처리하고 실행합니다. 단, 같은 팀원이나, 다른 팀원이 요청한 게 더 긴급하고 우선적이다고 판단이 되면 상사에게 보고 후 우선적으로 처리하는 경우도 있습니다. 2. 팀원이..

• format_list_bulleted Develop/etc
• · 2023. 10. 13.
• textsms

직장 동료와 의견이 다를 때 해결 방법 노하우

면접 때, 이런 질문을 받은 적이 있습니다. 면접관: "프론트엔드 개발자로 가장 중요한 역량이 무엇이라고 생각하시나요?" 나: "의사소통 능력이라고 생각합니다. 프론트엔드 개발자는 기획, 디자인, 퍼블리셔, 백엔드 개발자 등 다양한 직군 사람들과 협업이 필요합니다. 원활한 의사소통을 통해서 문제를 빨리 파악하고 해결하는 능력이 중요하다고 생각합니다" 면접관: "그럼 지원자만의 특별한 노하우가 있나요?" 나: ??? 면접관이 의사소통을 잘하는 특별한 노하우가 있냐고 질문을 하였는데, 상대방 입장에서 생각해서 이야기해야 한다고 대충 얼버무렸던 경험이 있습니다. 이번에 고전책인 카네기의 인간관계론에 대해서 읽어보았습니다. 앞으로 직장생활, 사회생활에서 나와 의견이 다른 사람이 있을 때, 이렇게 하면 좋겠다고 ..

• format_list_bulleted Develop/etc
• · 2023. 10. 12.
• textsms

CSS 자식 margin이 부모에게 적용 될 때, 마진 상쇄 현상

CSS 스타일에 마진 상쇄 규칙이 있습니다. 인접하는 요소, 부모 자식 요소에서 더 큰 마진으로 결합되어 마진이 상쇄 되는 현상이 있습니다. 자식 margin-top이 부모 요소의 margin에 적용 될때 Hello, Superman p태그의 margin이 div 요소 내부에서 적용되지 않고, div 상단에 margin이 적용 되고 있습니다. 부모와 자식을 구분하는 내용이 없어서, 자식 요소의 마진이 부모에게 결합되는 현상입니다. ​ 구분하는 내용은 overflow, padding, inline 속성을 보고 판단하게 됩니다. ​ 해당 현상을 해결하기 위해서는 div 태그에 div { overflow: hidden | auto; padding-top: 1px; margin-top: -1px; border:..

• format_list_bulleted Develop/CSS
• · 2023. 10. 9.
• textsms

Next 13 서버 컴포넌트와 클라이언트 컴포넌트 SSR 차이점

Next.js 13 버전 이전에는 Page 폴더 내에서 라우팅을 하였습니다. 하지만 13 버전 이후에는 App 폴더 내에서 라우팅을 할 수 있는 새로운 개념이 생겼습니다. Next13에서 앱 라우터는 컴포넌트 단위로 Hydration이 가능할 수 있도록 변경되었습니다. Hydration이란? Next.js에서 미리 렌더링 된 HTML에 이벤트 리스너를 연결하고, 사용자와 상호 작용할 수 있도록 합니다. 서버 컴포넌트 Next13 버전에서는 기본적으로 서버 컴포넌트로 사용됩니다. 장점 데이터 페치 보안 캐시 자바스크립트 번들 감소 서버에서 바로 데이터에 접근하기 때문에 빠르고, 한번 조회한 데이터는 캐시로 가지고 있어서 성능이 우수합니다. 그리고 민감한 정보들을 클라이언트에서 볼 수 없어서 더욱 안전합니다..

• format_list_bulleted Develop/Next.js
• · 2023. 10. 7.
• textsms

jQuery serialize() 이용해서 Form 데이터 ajax POST 전송하기

html의 폼 태그에 입력한 정보들을 POST 요청으로 전달하고 싶을 때가 있습니다. serialize jQuery serialize 메서드를 이용하면 폼 패너 내에 input, selelct, textarea의 value 값을 간단하게 표준 url 인코딩 형태 문자열로 만들 수가 있습니다. 회원가입 var formData = $('form').serialize() // id=1&password=2&username=superman&userEmail=superman@naver.com POST 전송 form Data를 jQuery ajax 옵션의 data 속성에 적용하면 POST로 데이터 전송이 가능합니다. $(document).ready(function() { $("#submitBtn").click(fun..

• format_list_bulleted Develop/JavaScript
• · 2023. 10. 4.
• textsms

Next.js 클릭 이벤트 적용이 안될때 해결 방법

아래와 같이 카운터 컴포넌트를 만들어서 사용하려고 하는데 버튼 클릭 이벤트가 작동하지 않아서, 원인을 찾아보았습니다. import {useState} from "react"; export default function Counter() { const [count, setCount] = useState(0) return ( Counter count: {count} setCount(count + 1)}>+ ) } 1. use client 추가 하기 next13 이후에는 기본적으로 서버 컴포넌트입니다. DOM 이벤트 또는 React 훅을 사용하기 위해서는 컴포넌트 상단에 use client를 붙여 줘야 합니다. use client 2. Node 16.14 버전 이상으로 버전 업데이트 next.js 는 최소 조..

• format_list_bulleted Develop/Next.js
• · 2023. 9. 29.
• textsms