web study

리액트 프로젝트를 구글 애널리틱스와 연동하여 방문자 추적 등 여러 데이터를 수집하고 활용해보자. 목차 웹사이트 분석이 필요한 이유 리액트와 구글 애널리틱스 연결하기 웹사이트 분석이 필요한 이유 방문자가 사는 지역에 대한 정보를 얻을 수 있다. 내 비즈니스에 더 관심이 있는 연령대를 이해할 수 있다. 방문자가 평균적으로 얼마나 많은 시간 동안 머무르는지 알 수 있다. 신규 사용자를 추적할 수 있다. 애플리케이션에 버그가 있는지 추적할 수 있다. 사용자의 관심에 따라 최적화 할 수 있다. 리액트와 구글 애널리틱스 연결하기 1. 계정 & 속성 생성 1-1. 구글 애널리틱스 페이지에서 계정을 생성한다. 1-2. 홈-관리로 들어가서 속성 만들기를 클릭한다. 1-3. 속성 이름, 보고 시간대, 통화를 설정하고 '고..

카카오에서 제공하는 지도 API를 사용하기 위해 애플리케이션을 생성하고 키를 발급받아보자. 목차 카카오 애플리케이션 생성하고 키 발급받기 카카오 API 사용하기 카카오 애플리케이션 생성하고 키 발급 받기 1) 카카오 개발자 페이지에서 로그인한다. 2) 내 애플리케이션으로 들어가 애플리케이션을 추가한다. 3) 앱 이름과 사업자명을 작성한다. 중요하지 않으니 대충 적는다. 4) 애플리케이션을 생성하고 클릭해서 들어가면 앱 키를 확인할 수 있다. 5) 플랫폼-Web에서 사이트 도메인을 등록해준다. 로컬 경로도 등록해주어야 한다. 리액트라면 http://localhost:3000을 등록한다. 배포 시에는 배포 사이트의 도메인으로 변경한다. 카카오 API 사용하기 1) 민감한 정보이기 때문에 .env 파일을 생성..

웹 프로젝트를 시작할 때 폴더와 파일 구성, 설치할 라이브러리, config 설정 등 초기 세팅에 머리 싸맨 적 많을 것이다. 만들어 둔 Boilerplate도 없다면 Create App을 이용해보자. Create App 사용하기 1. Create App 홈페이지에 들어간다. 2. 프로젝트에 적용할 라이브러리나 번들러, 언어 등을 선택한다. 3. 프로젝트명을 입력 후, Download project를 클릭해 다운로드한다. 4. 프로젝트 폴더가 생성되면, READ.md 파일을 열어 가이드대로 초기 세팅을 해주면 끝이다.

Slick Slider는 꽤나 잘 알려진 Carousel 라이브러리다. 리액트에서 사용하려면 리액트용 Slick Slider를 설치해야 한다. 설치부터 사용 방법까지 알아보자. React Slick Slider 사용하기 1. React 프로젝트 경로에서 npm으로 설치한다. react-slick : react slick 설치 slick-carousel : slick 기본 스타일 css 설치 npm install react-slick slick-carousel 타입스크립트 버전 타입스크립트의 경우 여러 옵션에 타입이 정해져 있어야 하기 때문에 타입스크립트용 react-slick도 설치해주어야 정상적으로 작동한다. npm install react-slick @types/react-slick slick-car..

리액트 설치부터 Client, Server 초기 세팅까지 과정에 대해 알아보자. React 설치와 Client + Server 세팅 프로젝트 폴더 생성 터미널에서 프로젝트 폴더 경로로 이동한다. cd my-app/ 리액트 프로젝트 개발 환경을 구축하기 위해 아래 명령어를 입력한다. npx create-react-app client 타입스크립트 버전 npx create-react-app --template typescript my-app 아래에 client 폴더가 생성되면서, 그 안에 리액트 패키지가 설치되었다. 프로젝트 폴더에 server 폴더를 생성한다. mkdir server 현재까지 폴더 구조 my-app ├── client │ ├── README.md │ ├── package-lock.json │..

작업한 애플리케이션이 어떤 식으로 작동하는지 움직이는 이미지로 보여주고 싶은 경우가 있다. 이럴 때 애플에서 제공하는 앱을 통해 아주 쉽게 Gif를 만들 수 있다. Giphy로 웹 페이지 GIF 캡처하기 1. GIPHY를 설치한다. 2. 원하는 만큼 영역을 잡고 녹화 버튼을 누른다. (최대 30초 녹화 가능) 3. 녹화 후 정지 버튼을 누르면 아래 리스트에 녹화한 Gif가 올라온다. 클릭! 📌 리스트에 올라오지 않는다면? 맥에서 접근을 막아서 제대로 실행되지 않는 것이다. 아래 경로에서 설정해주면 된다. 맥 시스템 환경 - 보안 및 개인 정보 보호 - 개인 정보 보호 - 화면 기록 GIPHY 체크해서 허용! 4. 원하는 대로 옵션을 조정한 후 Save as 버튼을 클릭해 저장한다. 🌟 완성 🌟

네이버에서 제공하는 API를 사용하려면 KEY를 발급받아야 한다. 네이버 개발자센터에서 애플리케이션 등록을 통해 검색용 API를 KEY를 받아두자. 1) 네이버 개발자센터 > 애플리케이션 > 애플리케이션 등록 검색 관련 앱을 제작한다면 사용 API를 '검색'으로 선택한다. (작성 예시) 2) 아래 경로에서 Client ID, Secret KEY를 확인할 수 있다. 네이버 개발자센터 > 애플리케이션 > 등록한 애플리케이션 클릭

개발 시 하나의 포트로 여러 작업을 하면 해당 포트를 닫으라는 에러가 출력되는 경우가 있다. 사용하지 않는 포트는 그때그때 닫아주면 오류 방지에 도움이 된다. 포트 닫는 방법 열려있는 전체 포트의 정보를 확인하려면 아래 명령어를 입력한다. sudo lsof -PiTCP -sTCP:LISTEN 닫으려는 특정 포트의 정보를 확인하려면 아래 명령어를 입력한다. sudo lsof -i :3000 부팅 시 암호를 입력하고 엔터 닫으려는 포트의 PID 번호를 확인한다. 아래 명령어를 입력해 해당 포트를 닫아준다. sudo kill -9 (PID번호)

React 컴포넌트 형식은 클래스형 컴포넌트와 함수형 컴포넌트로 나뉜다. 리액트 16.8 이전에는 함수형 컴포넌트는 간단한 동작에만 사용이 되었지만, 요즘은 클래스형 컴포넌트보다 함수형 컴포넌트를 많이 사용하는 추세이다. 이 둘의 차이점에 대해 자세히 알아보자. 목차 기본 형태 비교 Functional(함수형) 컴포넌트와 Hooks 기본 형태 Class (클래스형) 컴포넌트 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 import React, { Component } from 'react' class Hello extends React.Component { constructor(props) { super(props); this.state = { name: props.name };..

포스트맨으로 네이버의 OPEN API를 실행하여 테스트하는 방법에 대해 알아보자. 목차 포스트맨(Postman) 사용 이유 포스트맨으로 네이버 OPEN API 실행하기 1. 포스트맨(Postman) 사용 이유 API 요청할 때 서버가 제대로 동작하는지 확인해보기 위해 API 요청 후 출력되는 데이터를 확인하기 위해 2. 포스트맨으로 네이버 OPEN API 실행하기 (영화 검색 API 사용한다고 가정) 1) 네이버 개발자 센터 - 새 애플리케이션 생성 애플리케이션 - NAVER Developers developers.naver.com 2) 포스트맨 설치 Postman API Platform | Sign Up for Free Postman is an API platform for building and us..