분류 전체보기
티스토리 블로그에 TOC 추가하기
티스토리 블로그에 TOC 추가하기
2021.09.30마크다운으로 글을 작성하다보면 글이 계층화되어진다. 제목의 크기로 계층을 확인할 수 있지만, 좀 더 가시적으로 보여줄 무언가가 필요했고, TOC를 적용하기로 결정했다. TOC란? TOC는 목차(Table Of Content)라는 뜻으로 웹 문서에서는 헤더 태그들을 모아서 계증화하여 보여주고, 클릭 시 해당 헤더 태그로 자동으로 이동해주는 역할을 하는 부분을 뜻한다. TOC를 아주 잘 사용한 사이트로는 나무위키가 있겠다. 나무위키는 설명하고자하는 내용이 계층화되어 있어서 이를 자동으로 목차화해준다. 그리고 위에 언급한 것처럼 클릭시 해당 헤더 태그로 이동하게 된다. TOC 적용하기 아래 소개할 적용 방식은 프라치노 공간 스킨으로 진행한 내용으로, 본인의 스킨에 따라 다르게 적용해야할 수 있습니다. Tocb..
URI와 URL
URI와 URL
2021.09.29이전까지는 URL만 알고 있다가, 학교에서 웹 프로그래밍 수업을 들었을때 URI라는 것을 처음 알게되었다. 그렇다고 찾아본 건 아니고, 현재까지도 일을 하면서 매번 URI, URL 구분없이 사용하고 있다. 구분없이 사용한다고 큰 문제는 생기지 않지만, 개발자는 명확한 정의를 아는 직업 아닌가? 이 기회에 URI와 URL의 정의와 용도를 통해 둘의 차이를 알아보자. URI URI는 특정 자원(Resource)를 식별하는 통합 자원 식별자(Uniform Resource Idendifier)를 의미한다. 웹 상에서 논리적/물리적 리소스를 식별하는데 사용되는 고유한 문자열의 시퀀스이다. URI의 하위 개념으로는 URL과 URN이 있다. URL URL은 일반적으로 이야기하는 웹사이트 주소이다. 통합 자원 지시자(..
로컬과 리모트 데이터 상태 관리를 동시에 Apollo Client
로컬과 리모트 데이터 상태 관리를 동시에 Apollo Client
2021.09.27Apollo Client는 GraphQL을 이용하여 로컬과 리모트 데이터를 다룰 수 있는 자바스크립트의 포괄적인 상태 관리 라이브러리이다. 이를 이용해서 데이터를 가져오거나, 캐시, 애플리케이션 데이터의 수정 이 모든 것을 UI를 업데이트하면서 할 수 있다. Apollo Client는 현대의 개발 방식과 동일하게 코드를 경제적이고, 예상가능하며 선언적인 방식으로 짤 수 있게 해준다. @apollo/client 라이브러리는 리액트와의 통합성을 제공하며, 다른 유명 라이브러리/프레임워크를 위한 통합도 거대한 아폴로 커뮤니티를 통해 유지되고 있다. 특징 선언적인 데이터 패칭: 직접 로딩 상태를 따라갈 필요 없이 쿼리를 작성하고 데이터를 가져올 수 있다. 휼륭한 개발자 경험: 타입스크립트, 크롬 / 파이어폭스 ..
구글 애드센스로 1000달러 벌기까지의 여정 💸
구글 애드센스로 1000달러 벌기까지의 여정 💸
2021.09.24👋 들어가며 1000달러 번지는 조금 지났지만, 애드센스로 1000달러를 벌었다. 작년 초에 썼던 애드센스로 100달러를 벌기까지의 여정 💸을 생각하며 이번에도 1000달러를 벌기까지의 여정을 공유해보려한다. 🆚 애드센스 vs 애드핏 더 많이 더 적게 : 💸 애드핏(Adfit) 광고로 수익내기 와 구글 애드센스(AdSense)와 다음 애드핏(AdFit) 비교하기에서도 비교를 했지만, 애드센스와 애드핏은 버는 수익의 차이가 너무 커서 일부 애드핏을 사용하는 곳을 제외하고는 애드센스 심사 이후에는 애드센스를 적용하고 있다. 심지어 애드핏은 카카오 애드핏으로 바뀌었는데, 애드센스는 사이사이 사용성 업데이트를 한 반면, 애드핏은 업데이트도 진행하고 있지 않다. 국내에서도 애드센스를 대항할 수 있는 좋은 광고 플..
구글 애널리틱스 트래픽 채널을 해석해보자
구글 애널리틱스 트래픽 채널을 해석해보자
2021.09.23구글 애널리틱스을 연동해놓고 데이터만 쌓고 있었는데, 문득 데이터의 의미가 무엇인지 정확하게 알고싶어졌다. 이번 글에서는 트래픽 채널을 확인하고, 각 용어가 어떤 것을 의미하는 지 알아보자. 구글 애널리틱스 > 획득 > 전체 트래픽 획득의 전체 트래픽 메뉴는 채널, 트리맵, 소스/매체, 추천 네가지 서브 메뉴로 구성되어있다. 전체 트래픽 > 채널 전체 트래픽을 대분류(채널)로 구분하여 보여준다. 채널 그룹에 해당하는 요소들은 다음과 같다. Direct : 직접 해당 사이트의 주소를 입력하여 방문한 트래픽 Referral : 구글, 빙 등 대형 검색 엔진 사이트가 아닌 다른 사이트에서 링크를 타고 방문한 트래픽 Organic : 구글, 빙 과 같은 대형 검색 엔진 사이트를 통해 방문한 트래픽으로, 광고 영..
맥 터미널에서 code 명령어로 VS Code 열기
맥 터미널에서 code 명령어로 VS Code 열기
2021.09.16맥 터미널에서 code 명령어로 VSCode 열기 맥으로 진행하는 웹 강의를 듣다보면 터미널에서 프로젝트 생성 후, code . 명령어를 통해 바로 해당 디렉토리의 VS Code를 띄우는 모습을 볼 수 있다. 처음 봤을 때 굉장히 간지나고 편리한 방법이여서 방법을 정리해봤다. VS Code 상에서 진행하기 VSCode를 실행한다. 커맨드 파레트(Cmd+Shift+P)를 열고 'shell command'라고 친다. Shell Command: Install 'code' command in PATH 라는 명령어를 찾아서 실행한다. 새로운 $PATH의 변경을 반형하기 위해 터미널을 재실행한다. 이제 터미널에서 code 명령어를 사용할 수 있다. ⚠️ 주의사항: 과거 VS Code 버전에서 쓰던 code 명령어 ..
맥에서 $PATH 설정이 오류 난 경우 해결 방법
맥에서 $PATH 설정이 오류 난 경우 해결 방법
2021.09.16bash나 zsh의 설정값 .bash_profile, .zshrc를 vi를 이용해 수정하다보면 코드를 잘못 입력해서 기존에 적용해두었던 PATH 설정 전체를 쓸 수 없는 경우가 생긴다. 필자의 경우 VSCode에서 code 명령어를 통해 VSCode를 여는 경로를 추가하다가 문제가 생겼다. $PATH 설정 전체가 오류나면 생각보다 당황스러운데 다음과 같은 문제가 생긴다. $PATH 설정 전체가 오류나면 생기는 일 모든 명령어 실행 경로에 오류가 나서 가장 자주 쓰는 Shell Script 명령어도 사용할 수 없게 된다. 이 때쯤 머리에서는 악순환의 고리가 떠오른다. Shell Script 명령어를 사용할 수 없음 => .zshrc에서 $PATH 설정을 바꿔서 오류를 수정해야지 => vi 명령어도 안돼서 ..
네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자
네비게이션 영역 GNB, LNB, SNB, FNB에 대해 알아보자
2021.09.09👋 들어가며 웹사이트 개발, 기획 등을 하다보면 GNB, LNB 등의 단어를 듣게 된다. 필자도 실무를 하면서 알게되었고, 항상 들을때마다 헷갈려서 이번 기회에 한 번 정리해보려한다. 네비게이션 영역? 네비게이션 영역은 이름처럼 네비게이션 즉 특정 페이지 이동을 위해 필요한 영역을 의미한다. 또한, 이러한 영역들은 모든 페이지에서 항상 고정된 영역을 차지하는 특징을 가지게된다. GNB(Global Navigation Bar) 사이트 전체에 동일하게 적용되는 최상위 공통 네비게이션 포함되는 콘텐츠 사이트 로고 - 홈페이지 링크 메인 메뉴 - 대분류 메뉴라고도 하며, 주요 페이지 링크 버튼 역할을 하거나 호버시 서브 메뉴를 볼 수 있는 버튼 역할을 한다. 서브 메뉴가 있는 경우 클릭시 메인 서브 메뉴로 가는..
VS Code 설정 및 확장 프로그램 동기화하기
VS Code 설정 및 확장 프로그램 동기화하기
2021.09.08기존에 Setting Sync라는 확장프로그램을 이용해서 VSCode를 동기화하는 글을 작성했었는데, 댓글을 통해 알아보니 v1.48부터 VSCode에서 자체적으로 해당 기능을 제공하게 되어서 이에 맞게 글을 다시 작성한다. 들어가며 👋 새로운 환경에 들어갔을 때 IDE를 다운받아서 처음부터 환경설정을 다시 하는 작업은 굉장히 귀찮은 작업이다. 이는 웹에서 자주 사용하는 IDE인 VSCode에서도 마찬가지인데, 자신만의 단축키나 특히 VSCode의 장점인 확장프로그램을 사용하는 경우 하나하나 이를 입력 및 설치하는 건 정말 힘든 일이다. VSCode에서 이러한 동기화 작업을 할 수 있는 방법에 대해 알아보자! 준비사항 해당 기능은 계정을 기반으로 연동 데이터를 저장하게 되는데, Github 계정이나 마이..
트위터 클론 코딩 #0 Introduction ~ #1 Set up
트위터 클론 코딩 #0 Introduction ~ #1 Set up
2021.09.08노마드 코더의 트위터 클론 코딩 강의를 듣고 정리한 강의노트입니다. 0.0 Welcome! / 환영합니다! 강의에서 구현할 Firebase를 이용하여 가능한 기능 이메일, 비밀번호을 이용한 인증 회원가입 로그인 구글 소셜 로그인 깃헙 소셜 로그인 실시간 처리 트윗 보내기 파일 업로드 프로필 수정 트윗 수정하기 트윗 삭제하기 심지어 모든 기능을 백엔드 코드 작성없이 할 수 있다. 사이트를 만드는 데 가장 많이 드는 시간이 CSS 작업일 정도 ㅎㅎ 0.1 Requirements / 요구사항 해당 강의를 듣기 전에 들어야 할 강의 코코아톡 클론 코딩 - HTML, CSS, Github ReactJS로 영화 웹 서비스 만들기 - ReactJS Fundamantals 초보를 위한 React JS - React R..
로컬 브렌치와 같은 이름의 리모트 브렌치에 푸쉬하게 설정하기
로컬 브렌치와 같은 이름의 리모트 브렌치에 푸쉬하게 설정하기
2021.09.07로컬에서 새로운 브랜치에 작업한 내용을 리모트 브랜치에 푸쉬하는 경우 해당 로컬 브랜치에 업스트림 브랜치를 설정하지 않았다면, 다음과 같은 Git 오류가 뜹니다. fatal: 현재 브랜치 add/join에 업스트림 브랜치가 없습니다. 현재 브랜치를 푸시하고 해당 리모트를 업스트림으로 지정하려면 다음과 같이 하십시오. git push --set-upstream origin add/join 물론, 오류 메시지에 나온대로 현재 브렌치에 해당하는 리모트 저장소의 브렌치를 업스트림으로 설정해도 됩니다. 하지만, 매번 브렌치를 파서 작업할때마다 해당 작업을 하는 건 시간 낭비라고 느껴서 해결책을 검색해봤습니다. 해결책은 생각보다 간단했습니다. git config --global push.default current..
가상 오피스: 폰출근의 시대
가상 오피스: 폰출근의 시대
2021.08.18출근 VS 재택근무 사회적 거리두기 단계가 점점 올라가면서 기존에 출근을 고수하던 회사들까지 재택을 고려하는 시대가 도래했다. 필자의 회사도 올해 한 번도 회사에 출근하지 않고 재택을 하고 있으며 올해까지는 재택 근무으로 진행하기로 결정했다. 필자야 사회 진출과 함께 코로나가 찾아오면서 회사 근무 = 재택 수준이 되었지만, 기존에 회사 근무 = 출근 이라는 공식을 몇 십년간 정설처럼 받아들인 이들에게는 재택이라는 환경은 많이 어색한 것 같다. 이렇듯 과거에 작성한 글 코로나 시국 재택근무, 무조건 좋기만 할까? 👨💻에서도 언급했지만 재택이라는 상황은 출근과 여러 방면에서 다르다. "다르다"한 점이 중요한데, 출근 vs 재택근무 누가 더 좋다 말 할 수 없는 내용이고, 끝까지 결론이 안날 것이며 결국 각..