Develop/Web19 크롬 개발자 도구로 HTTP 통신 확인하기 이 글에서는 크롬 개발자 도구를 활용하여 현재 웹 페이지가 어떤 HTTP 통신을 주고받는지 확인하는 방법에 대해 알아보겠습니다. 크롬 개발자 도구로 HTTP 통신 확인 방법? * 웹 브라우저는 크롬 브라우저를 이용해야 합니다. 구글 검색창에 '크롬'을 검색하는 경우를 예로 들어보겠습니다. 여기서 크롬 개발자 도구를 켜야하는데요, 크롬 개발자 도구를 켜는 방법은 다음 세 가지 방법 중 하나로 가능합니다. - F12를 누른다. - Ctrl + Shift + I를 누른다. (Mac OS의 경우, command + option + i) - 마우스 우클릭 -> 검사를 누른다. 개발자 도구 상단의 Network 탭을 클릭하시고, 새로고침 (F5)를 해주세요. Name 부분을 클릭하면 상세한 Request, Resp.. 2021. 5. 14. MERN (MongoDB Express React NodeJS) - 구글 로그인과 토큰 관리에 대하여 MERN 프로젝트를 진행하며 구글 소셜 로그인에 대해 다루어보았다. 소셜 로그인에 대해 어떻게 토큰을 관리해야 하는건지에 대해 알아보는데에 많은 시간이 들었는데, 큰 그림이 머릿속에 그려져 있었다면, 보다 빠르게 문제를 해결할 수 있지 않았을까 생각이 들었다. 이 포스팅에서는 큰 그림에 해당하는 부분을 기록해두고자 한다. 0. 역할 소셜로그인을 구현하며, 다양한 방법들을 접했다. 웹에서 소셜로그인을 하고, 해당 결과를 서버에 보내주는 방식, 웹에서는 서버에 요청을 하고, 서버에서 소셜로그인을 인지하여 구글과 데이터를 주고받는 방식 크게 위와 같이 두 가지 방법이 존재 했으나, 필자는 전자의 방식대로 진행하였다. 이 과정에서 자연스레 '토큰'이라는 녀석에 대해 궁금증이 생겼다. 1. 토큰이란 무엇인가? 애.. 2021. 4. 30. React 취소 버튼 컴포넌트 만들기 React는 반복 사용되는 컴포넌트를 만들어두고 어느 곳에서든 재사용 할 수 있다는 장점을 갖고 있습니다. 이번 포스팅에서는 프로젝트를 만들며 빈번하게 사용되는 취소 버튼을 컴포넌트로 만들고 이용하는 방법에 대해 적어보겠습니다. 1. CancelButton.jsx 만들기 import React from "react"; import { css } from "@emotion/css"; export default function CancelButton({cancelAction}) { return ( 취소 ); } 취소 버튼을 컴포넌트로 따로 제작해둡니다. index.jsx를 만들어 해당 컴포넌트를 빼주는 것도 잊지 마세요! 2. 취소 버튼에 동작 넣기 취소 버튼의 행동에는 여러가지가 있을 수 있습니다. 모달 .. 2021. 4. 24. 리액트 프로젝트에 구글 로그인 연동하기 리액트를 이용하여 개발할 때, 구글 로그인을 연동하는 방법에 대해 알아보겠습니다. 1. Google Cloud Platform에 프로젝트 만들기 구글 인증을 사용하기 위해는 Google Cloud Platform에 접속하여, 프로젝트를 생성해야 합니다. Google Cloud Platform 하나의 계정으로 모든 Google 서비스를 Google Cloud Platform을 사용하려면 로그인하세요. accounts.google.com 구글 로그인을 연동하고자 하는 서비스 이름으로 만들어주세요. 2. 사용자 인증 정보 만들기 프로젝트 생성 이후 대시보드에서 다음과 같이 이동해주세요. 좌측 메뉴의 사용자 인증 정보 - OAuth 클라이언트 ID 만들기에 오셔서 해당하는 정보들을 적어주고, URI에는 http.. 2021. 4. 18. 리액트 프로젝트 만들기 create-react-app 0. 준비물 Nodejs - 리액트 관련 라이브러리들하을 손쉽게 설치할 수 있도록 해주는 npm, yarn을 위해 필요하다. VSCode (코드 편집기중 하나인데, 다른 편집기를 사용해도 괜찮다) 1. yarn 설치하기 yarn은 페이스북에서 만든 녀석인데, 프로젝트 의존성 관리를 담당하는 Javascript 기반의 패키지 매니저다. npm이 존재하긴 하나, 이보다 훨씬 빠르고 안전하다. npm의 속도, 성능, 보안 문제들을 해결하기 위해 개발되었다. 설치는 Yarn의 홈페이지에서 할 수 있다. https://yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarn.. 2021. 4. 18. Javascript - Daum 도로명주소 API 사용하기 javascript를 사용하여 도로명 주소 찾기를 해보자. 참고한 공식 문서는 글 제일 하단에 링크를 걸어두었다. 왜 Daum API인가? 우체국, 도로명주소 API등 많은 주소 관련 API가 있는데 왜 다음 API를 이용하여 개발하는가에 대한 내용이다. 다른 주소 API의 경우 별도로 Key를 발급 받거나, 응답 형태가 XML이라 추가적으로 파싱을 해야 할 필요가 있었다. 이 때문에 구현하는 것에도 진입장벽이 높았고, 유지보수 또한 만만치 않았다. 하지만, Daum API가 등장하고, 10분 만에 도로명 주소 검색을 구현할 수 있게 되었다. 사용 형태 Daum API를 사용하여 주소 검색을 구현하면, 크게 세 가지 형태로 구현이 가능하다. 첫 번째로, 팝업을 띄우는 형태이다. 팝업을 띄우는 것은 PC .. 2021. 4. 6. 이전 1 2 3 4 다음 반응형
