분류 전체보기
로컬과 리모트 데이터 상태 관리를 동시에 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 재택근무 누가 더 좋다 말 할 수 없는 내용이고, 끝까지 결론이 안날 것이며 결국 각..
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
지금 바로 사이트에 픽토그램 넣는 법 Font Awesome
2021.08.02들어가며 웹에서 앱과 같은 경험을 주고자하는 시도가 많아지면서, 웹사이트 제작시 아이콘은 필수적인 요소가 되었습니다. 아이콘 혹은 픽토그램은 사용자에게 전달하고자하는 복잡한 정보를 간단한 이미지로 보여줄 수 있습니다. "메뉴모음"이라는 단어가 아닌 햄버거 아이콘으로 모두가 이해하는 아이콘으로 보여줌으로써 사용자가 좀 더 깔끔한 웹사이트를 이용한다는 경험을 느끼게할 수 있습니다. 웹사이트에 픽토그램을 넣는 방법은 다양하게 있으나 주로 웹 아이콘 폰트를 이용하며, 일부 사용이 무료이면서 가장 유명한 것이 Font Awesome입니다. Font Awesome의 특징 1. HTML의 font 스타일 속성이 모두 사용 가능 Font Awesome은 이미지가 아닌 웹 폰트이기 때문에 HTML의 font 스타일을 모..
더 많이 더 적게: 고장나버린 사이트 살려야한다
더 많이 더 적게: 고장나버린 사이트 살려야한다
2021.07.30고장나버린 사이트 거의 방치하고 있던 더 많이 더 적게 프로젝트를 오랫만에 한 번 들어갔는데, 뭔가 문제가 생겼었다. "문제가 생겼습니다."라는 저 문구 저건 분명히 GraphQL 요청이 실패했을 때 뜨는 화면이였다. 타임어택 기능 이후로 방치는 하고 있었지만, 처음으로 흥한 소중한 사이드 프로젝트라 문제의 원인 파악에 나섰다. 문제는 내가 사용하고 있었던 GraphCMS라는 서비스에 있었다. GraphCMS의 과거 Lagacy 버전 프로젝트를 그대로 사용하고 있었는데, GraphCMS 측에서 Lagacy 프로젝트를 다 지워버린 것이다. 덕분에 사이트에 오류가 뜬 건 물론이고 내가 어렵게 모은 키워드 + 사진 + 검색량 자료도 날라갔다. 억울하긴 하지만, Lagacy 프로젝트를 계속 사용해 온 내 잘못도..