전체 글
[우분투] vsCode 업데이트
이번 시간에는 우분투 에서 vsCode를 업데이트 하는 방법을 알아보겠습니다. 가끔 코딩하다보면 오른쪽 하단에 이렇게 업데이트하라고 뜹니다. deb파일 다운 https://code.visualstudio.com/ Visual Studio Code - Code Editing. Redefined Visual Studio Code is a code editor redefined and optimized for building and debugging modern web and cloud applications. Visual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. code.visualstudi..
REACT - Github Pages SPA(Single-Page-App) 해결
이번 시간에는 단일 페이지 블로그를 제외한 클론 페이지 제작 시 중요한 SPA(Single-Page-App)에 대한 해결방법을 포스팅해보겠습니다. 기본적으로 깃허브에서는 SPA를 지원하지 않습니다. 리액트 라우터(React)의 를 사용하면 데모사이트 같은 리액트(react), 그 외 프런트엔드 라이브러리 및 프레임워크를 사용하면 애플리케이션을 쉽게 배포 할 수 있습니다. 1.SPA 가 필요한 이유? 기본적으로 github Pages는 단일 페이지 앱을 지원하지 않습니다. 예를 들어 URL이 example.tId/foo이고 /foo가 프론트엔드 경로인 경우, 깃허브 페이지 서버는 /foo를 모르기 때문에 404 에러를 반환합니다. 이 문제를 해결하는 방법을 알아보겠습니다. 작동방식 - Github 페이지 ..
Sentry.io로 프로젝트 오류 잡아내기
이번 시간에는 프로젝트에 오류를 쉽게 정리하고 찾아내는데 유용한 Sentry.io에 대해서 알아보겠습니다. setry.io란 프로젝트 진행중 어떤오류가 발생한지를 정리해주는 사이트인데요 우리가 일반적으로 오류가 발생하는 부분은 console.log나 vs code로 작성된 에디터에서 종종 발견하는데요 이에대해서는 우리가 검색해서 해결해야되는 복잡함도 있습니다. 또한 이 많은 오류들을 정리하는데에도 어렵움이있는데 이런 오류들을 잡기위해서 제일 유용한것이 . sentry.io라고 할수 있습니다. 1. Sentry.io를 사용하는 이유 - 우선 Sentry에 대해 알아보자면 프로젝트를 운용하는데 있어 발생하는 에러들을 로깅하여 쉽게 파악할 수 있으며, slack 같은 협업 도구들에 연동시 오류들을 쉽게 모니터..
정규표현식(javascript문법)
안녕하세요. 이번시간에는 javascript에 Regex 정규 표현식에 대해 알아보겠습니다. 정규표현식은 우리가 개발 시에 옵션을 주기위해서 사용하기 정말 좋은 언어인데요 저도 개발중에 이 표현식을 알게되서 로그인 방식설정에 큰 도움이 되었습니다. 1. 정규 표현식이란 ?? - 정규 표현식이란 문자열을 처리하는 방법 중의 하나로 특정한 조건의 문자를 "검색"하거나 "치환" 하는 과정을 매우 간편하게 처리하는 수단 중 하나 입니다. 1-1. 정규 표현식의 용어들 일단 주요 사용 예부터 설명드리자면 표현식 의미 ^x 문자열의 시작 표현하며 x 문자로 시작됨을 의미합니다. (즉 처음 문자열의 시작은 x문자다) x$ 문자열의 종료를 표현하며 x문자로 종료됨을 의미합니다. .x 임의의 한 문자의 자리수를 표현하며..
[Firebase] React에서 Firebase Auth를 사용한 로그인 구글 로그인 구현
이번 시간에는 React 프로젝트에서 Firebase 통한 로그인을 구현하는 법을 알아보겠습니다. Firebase Firebase는 고품질 앱을 빠르게 개발하고 비즈니스를 성장시키는 데 도움이 되는 Google의 모바일 플랫폼입니다. firebase.google.com Firebase 로그인을 구현하기전 먼저 Firebase 프로젝트를 만들어준다. 왼쪽 상단 톱니바퀴를 누르면 프로젝트 설정이 뜹니다. 프로젝트 설정에 가셔서 스크롤 내리시면 SDK 설정 및 구성이라는 곳에 가면 Config키들이 있으니 apiKey에서부터 measurmentid 까지 복사하세요 1.React 앱에 Firebase 추가하기 - 먼저 내가 생성한 프로젝트에 firebase 추가가 필요하다. yarn add firebase 다음..
[React+Node.js] Node.js(Express)연동하기 - 3.다시한번 도전!
저번 Express 시간에 실패 이후로 눈물을 머금꼬 다시한번 도전해보도록 하겠습니다. 기준 은 여러 블로그를 참조해서 그떄 처럼 맟추었습니다. 1. React Project 만들기 npx create-react-app react-express 새로운 프로젝트를 만들어 줍니다. 2. Node.js express 설치하기 npm install express --save && yarn add express 터미널에서 express 를 설치해준다. 3. Proxy 설정하기 server 폴더를 만들어주고 그 아래 routes 폴더를 만들고 index.js 와 server.js를 해당하는 폴더 아래에 생성 초록색으로 표시된 부분만 새로 생성해주세요 termial 에서 middleware를 설치해주세요 npm in..
[heroku] React Heroku 배포하기
이번시간에는 React를 배포하는 방법중 하나인 Heroku를 알아보도록 하겠습니다. Herokut란 여러 프로드래밍에 언어를 지원하는 클라우드 컴퓨팅 플랫폼입니다. Git과 Github를 지원해주고 많은 서비스를 애드 온과 API로 지원합니다. 소규모 프로젝트에서 무료 플랜을 기본적으로 제공해주면서 굉장히 좋기 때문에 한번 사용하는 것도 나쁘지 않을 거라 봅니다. 우선 heroku를 이용하기 위해 Heroku 공식 페이지에서 다운받으셔야 합니다. 위에 홈페이지에서 The Heroku CLI | Heroku Dev Center Last updated April 27, 2021 The Heroku Command Line Interface (CLI) makes it easy to create and mana..
[Material-Ui] React에서 자주사용하는 스타일 UI라이브러리
이번 시간에는 React에서 자주 사용하는 기능/디자인들을 Compnent/Api로 제공해서, Reacr 개발시 다양한 UI를 만들어주는 Meterial-ui 에 대해 알아보도록 하겠습니다. 1. Material-UI 시작하기 @material-ui/core // npm 사용시 npm install @material-ui/core // yarn 사용시 yarn add @material-ui/core @material-ul/icons // npm 사용시 npm install @material-ui/icons // yarn 사용시 yarn add @material-ui/icons meterial에서 제공하는 icon도 다운받아줍니다. material-ui을 불러오기위해 아래 명령어른 입력한다. import ..
[React] Firebase 배포하기
이번 시간에는 정말 간단한 Firebase 웹배포하는 법을 알아봅시다 이번시간에는 정말 할게없어서 빨리 끝날 겁니다. 1. 설치 CLI 설치법 npm install -g firebase-tools && yarn add firebase-tools yarn && npm 둘중 하나로 firebase-tools을 설치해주세요 2. firebase 권한주기 우선 firebaes 홈페이지에서 시작하기를 눌러줍시다. 프로젝트 만들기 - 프로젝트 추가 - 프로젝트 이름 설정 - 서버설정 - 끝 여기까지 끝입니다. Hosting 아이콘을 눌러 시작하기 아래 내용에 제가 코드를 치면서 설명해드리겠습니다. yarn add firebase-tools 먼저 방금 전 위 에서 설명한 tools를 받아주세요 저는 yarn을 선호해..
Js와 tsx,ts의 차이점
이번시간에는 개발시에 가장 중요한 파일 설정에 관해서 알아보겠습니다. 1. 파일 구성 우선 React 개발시에는 3가지의 구성된 파일 규칙이 있는데요 먼저 가장 기본인 JS 부터 JSX, ts , TSX 로 구성되어있습니다. 1. Javascript 우선 자바스크립트는 객체 지향 프로그래밍으로 브라우저 내에서 주로 사용되며, 다른 응용 프로그램 내장 객체에도 접근 가능한 언어입니다. 또한 Node.js라는 런타임 환경과 같이 서버 프로그래밍에도 사용되고 있습니다. 자바스크립트 기반으로 된 언어들도 많은데요 대표적으로 뽑자면 가장 핫한 React를 뽑을 수 있습니다. React에 가장 장점인 유지보수 모바일 개발이 가장 좋은점인데요. 이런것과 JS와 합친것이 가장 큰 장점입니다. JS의 장점은 가장 효율적..
[REACT]CORS 란 무엇인가?
리액트 Express를 두번째를 이해하기 위한 CORS를 알아보도록 하겠습니다. - 리액트 영화앱을 만들기 위한 TMDB(The Movie API)에 API키를 사용해보겠습니다. PostMan에서 데이터가 들어오는 것을 확인하고 react에서 axios를 이용해 데이터를 불러오겠습니다. import React, { useState, useEffect } from 'react'; import './App.css'; import axios from 'axios'; import SingleMovie from './SingleMovie'; const REACT_TMDB_API_KEY = "xxxxxxxxxxxxxxxxxxxxxxxxxxx" function App() { const [movies, setMovie..
[React + Express] Node.js, Express란 무엇인가
안녕하세요?? 이번시간에는 React를 개발할때 프론트와 백엔드를 구축해주는 서버-클라이언트 React+ Express JS에 대해 알아보겠습니다. 이번 시간에는 가장 중요한 서버를 연결하는 부분이기에 좀더 자세히 복잡한것을 좀더 간편하게 알아보도록 하겠습니다. 제가 분석한 날짜는 최근 ~ 1년전 까지의 포스트를 분석하며 만들었으며 가장 중요한 라이브러리 이기때문에 업데이트에 맟춰 포스팅 해드리도록 하겠습니다. 먼저 Express의 대한 개념부터 살펴보도록 하겠습니다. 1.Express 란 ? - Express.js 또는 간단한 익스프레스는 Node.js를 위한 웹 프레임워크 중 하나로, MIT허가서로 라이선스되는 자유-오픈 소스 소프트웨어 입니다. 웹 어플리케이션, API 개발을 위해 설계되었습니다. ..