본문 바로가기

Develop75

크롬 개발자 도구로 HTTP 통신 확인하기 이 글에서는 크롬 개발자 도구를 활용하여 현재 웹 페이지가 어떤 HTTP 통신을 주고받는지 확인하는 방법에 대해 알아보겠습니다. 크롬 개발자 도구로 HTTP 통신 확인 방법? * 웹 브라우저는 크롬 브라우저를 이용해야 합니다. 구글 검색창에 '크롬'을 검색하는 경우를 예로 들어보겠습니다. 여기서 크롬 개발자 도구를 켜야하는데요, 크롬 개발자 도구를 켜는 방법은 다음 세 가지 방법 중 하나로 가능합니다. - F12를 누른다. - Ctrl + Shift + I를 누른다. (Mac OS의 경우, command + option + i) - 마우스 우클릭 -> 검사를 누른다. 개발자 도구 상단의 Network 탭을 클릭하시고, 새로고침 (F5)를 해주세요. Name 부분을 클릭하면 상세한 Request, Resp.. 2021. 5. 14.
Mixpanel에서 내부 IP Address를 제외하는 방법 Mixpanel에서 내부 IP 주소를 필터링하는 방법에 대해 알아보겠습니다. IP 주소를 제공하지 않는 Mixpanel Mixpanel에서는 Amplitude와 달리, IP 주소가 Tracking 되지 않습니다. 때문에 퍼널, 인사이트 등 분석을 할 때, 내부 트래픽을 걸러주는 방법을 직접 추가해주어야 하는데요, 그 방법에는 다음과 같은 선택지가 있습니다. 회원 관리 시스템이 있는 경우, 이메일을 통해 걸러내기 내부 사용자들에게만 ignore 속성을 추가하여, 데이터가 Tracking되지 않도록 처리하기 직접 IP Address를 Tracking하고, 필터링 하기 IP Address를 직접 넣고 필터링 하는 이유 위 선택지 중, 나머지 두 가지는 다음과 같은 문제를 갖고 있었습니다. 이메일을 통해 거르는.. 2021. 5. 10.
MERN (MongoDB Express React NodeJS) - 구글 로그인과 토큰 관리에 대하여 MERN 프로젝트를 진행하며 구글 소셜 로그인에 대해 다루어보았다. 소셜 로그인에 대해 어떻게 토큰을 관리해야 하는건지에 대해 알아보는데에 많은 시간이 들었는데, 큰 그림이 머릿속에 그려져 있었다면, 보다 빠르게 문제를 해결할 수 있지 않았을까 생각이 들었다. 이 포스팅에서는 큰 그림에 해당하는 부분을 기록해두고자 한다. 0. 역할 소셜로그인을 구현하며, 다양한 방법들을 접했다. 웹에서 소셜로그인을 하고, 해당 결과를 서버에 보내주는 방식, 웹에서는 서버에 요청을 하고, 서버에서 소셜로그인을 인지하여 구글과 데이터를 주고받는 방식 크게 위와 같이 두 가지 방법이 존재 했으나, 필자는 전자의 방식대로 진행하였다. 이 과정에서 자연스레 '토큰'이라는 녀석에 대해 궁금증이 생겼다. 1. 토큰이란 무엇인가? 애.. 2021. 4. 30.
MERN (MongoDB, Express, React, NodeJS) 시작할 때 명령어 모음 1. 리액트 프로젝트 생성 npx create-react-app MyProject MyProject는 만드려고 하는 프로젝트의 이름으로 설정해준다. 2. 서버 환경 구축하기 콘솔에서 cd MyProject를 통해 해당 폴더로 이동한 뒤 서버 폴더를 만들어준다. mkdir backend 해당 폴더로 다시 이동한다. cd backend 이후 package.json 파일을 만들어준다. npm init -y express, cors, mongoose, dotenv를 설치해준다. yarn add express cors mongoose dotenv // yarn이 없다면 npm install express cors mongoose dotenv - express : NodeJS를 쉽게 개발할 수 있도록 해주는 프레임.. 2021. 4. 27.
npm package.json 파일 생성하기 node를 하며 package.json 파일을 만드는 방법에 대해 다뤄보겠다. package.json은 현재 노드 프로젝트의 정보를 담고 있는 파일을 뜻한다. 이 파일 내의 정보는 키 : 값 쌍의 조합으로 저장되는 단일 JSON 객체로 구성된다. 이름(name), 버전번호(version)는 반드시 입력해야 하는 필드다. { "version": "1.0.0", "name": "Node Project" { 필수 입력 필드를 제외한 내용들을 추가한다면, 추후 프로젝트 관리 및 사용에 있어서 유리할 것이다. 그 내용은 package.json을 만드는 명령어를 통해 확인해보자. package.json을 만드는 것은 간단하다. 터미널에서 아래 코드를 입력하면 된다. npm init 이 명령을 실행하면, 필드에 대한.. 2021. 4. 27.
mongo db 클러스터와 연결하기 1. IP 주소 추가하기 Mongo DB의 클러스터와 연결하려면 Network Access 설정을 해줘야 한다. 현재 사용하는 IP주소만 해당 DB에 접근이 가능하도록 추가해줄 필요가 있다. includes your current IP address 를 통해서 현재 내 IP만 추가해주면 된다. 2. MongoDB Compass 설치하기 각자 버전에 맞게 MongoDB Compass를 설치해주면 된다. www.mongodb.com/try/download/compass MongoDB Compass Download MongoDB Compass, the GUI for MongoDB, is the easiest way to explore and manipulate your data. Download for fre.. 2021. 4. 26.
반응형

티스토리툴바