2021/09
어떻게하면 구글링을 잘 할까?
어떻게하면 구글링을 잘 할까?
2021.09.30해당 글은 코딩애플 - 구글링 잘하는 법 6개 (네이버쓰셈 ㅅㄱ) 을 보고 해당 영상 내용을 정리 및 제 생각을 추가한 글입니다. 코딩애플님께서도 재미있게 잘 소개해주셨으니 영상을 보는 것도 추천드립니다. 온전히 구글만 사용하는 것이 아니기 때문에 "웹사이트를 통한 검색"이 좀 더 명확하지만, 글에서는 좀 더 편한 용어인 "구글링"이라는 용어를 사용하려합니다. 🤔 구글링은 왜하는 걸까? 우리가 개발 초보인 경우, 심지어는 고수일지라도 구글링 없이 문제를 해결할 수는 없다. 특히 개발 분야는 특정 기술에 대해 모든 것을 알 수 없고, 정확히 코드화되어있기 때문에 생각을 통해 뇌피셜로 결론을 낼 수 없는 문제이기 때문이다. 🧑💻 구글링의 차이 = 개발 실력 성장 속도의 차이 하지만 같은 구글링을 할 지라도..
티스토리 블로그에 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..