전체 글 (179) 썸네일형 리스트형 [#. React] NginX를 이용해서 React 배포하기 ec2에서 serve로 React를 배포하니 새로고침할 때마다 404 에러가 발생하는 문제가 생겼다 React, Vue 등의 SPA 프레임워크에서 발생하는 문제이며, 브라우저가 React에 "/경로"에 GET을 보내지만 실제 서버에서는 "/경로"에 대한 정보가 없기 때문이다 connect-history-api-fallback 현상이라고 한다 SPA는 일반적으로 브라우저에서 액세스할 수 있는 하나의 파일(index.html)만 사용한다 그래서 특정 경로에서 새로고침 등을 했을 경우 서버가 해당 파일을 찾을 수 없어 발생하며, 404 메세지를 사용자에게 반환하게 된다 => React 웹을 웹서버인 Nginx를 통하여 실행되도록 만들어서 해결해 보자 Web Server vs WAS(Web Application.. [#. React] react-scripts 4.0.3 사용으로 인한 에러 해결 react 프로젝트를 실행해 보자 npm을 이용했다고 했을 때 $ npm install $ npm start 명령어를 실행했지만 아래와 같이 process is not defined 에러가 발생하면서 웹 화면이 안 보이는 경우가 있다 react-error-overlay(react-scripts의 dependency) 패키지의 종속성이 webpack v5를 지원하도록 업데이트되었기 때문에 발생한다 ① react-script v4 -> v5로 update npm install react-scripts@latest # or yarn upgrade --latest react-scripts 하지만 다른 패키지와의 종속성도 고려해야 하고, webpack v5 이상은 폴리필을 수동으로 구성해야 하기 때문에 더 큰 문.. [#. React] React+Typescript+Tailwind CSS 프로젝트 초기 세팅하기 Tailwind CSS는 마크업에서 직접 모든 디자인을 구축하도록 구성할 수 있 고 flex, pt-4, text-center와 같은 클래스를 사용하는 프레임워크다 Tailwind CSS에서 정해놓은 클래스명을 사용해서 HTML 코드 내에서 쉽게 CSS를 작성할 수 있다 장점 Utility-First의 편리함과 빠른 개발 자유롭고 쉬운 커스텀 단점 초반에 파악하기 위한 시간 필요 HTML와 CSS 코드 혼재(가독성) $ yarn create react-app [프로젝트명] --template=typescript $ yarn add -D tailwindcss postcss autoprefixer postcss-cli npm-run-all -D 옵션 => 패키지를 개발 종속성으로 추가 📁src 📁styles.. [#. React] React + Firebase Instagram Clone, 인스타그램 클론 프로젝트 1 (프로젝트 생성, Firebase 설정, 라우팅) $ yarn create react-app instagram $ yarn add date-fns $ yarn add firebase $ yarn add react-loading-skeleton 📁public에서 favicon.ico, index.html 파일만 남기고 📁src에서 App.js, index.js 파일만 남기고 정리한다 폴더를 아래 구조와 같이 생성해 준다 📁public 📁images 📁avatars 📁users 📁public 📄index.html 📁src 📄App.js function App() { return ( Hello ); } export default App; 📁src index.js import React from 'react'; import ReactDOM from 'react.. [#. HTML] HTML에서 font-face 설정하기, preload 사용해서 폰트 버벅이는 문제 해결하기 웹에서 기본 폰트가 적용되어 있지만 특정 페이지에서 다른 폰트를 적용하려고 한다 먼저 폰트 포맷을 살펴보면 TTF, OTF, WOFF, WOFF2 4가지 타입이 있다 Font Format 포맷 특징 TrueType Fonts (TTF) 가장 일반적 대부분의 브라우저 OpenType Fonts (OTF) TTF 기반 TTF에서 지원하지 않는 기능 사용 가능 The Web Open Font Format (WOFF) OTF와 TTF로 이루어져 있는 압축된 폰트 경량 The Web Open Font Format (WOFF 2.0) 향상된 WOFF https://caniuse.com/ttf https://caniuse.com/woff https://caniuse.com/woff2 *포맷별 지원 가능한 브라우저 및.. [#. chart] billboard.js 사용해서 그래프 그렸을 때 bar 색상에 gradient 사용하기 naver에서 지원하는 billboard.js를 사용해서 그래프를 그리고 있다 https://naver.github.io/billboard.js/release/latest/doc/index.html Home - billboard.js API doc billboard.js is a re-usable, easy interface JavaScript chart library, based on D3.js. The name "billboard" comes from the famous billboard chart which everybody knows. Documents Playground Play with the diverse options generating on the fly! https://naver. na.. [#. ETC] 웹 브라우저에서 URL을 입력했을 때 과정(OSI 7계층) 브라우저에서 www.tistory.com을 입력했을 때 어떤 일이 일어나고 어떤 과정을 거치게 되는지 알아보자 1 브라우저를 연 후 주소입력창에 URL을 입력한다(www.tistory.com) DNS를 통해 www.tistory.com의 IP를 알아낸다 2 OS(운영체제)에게 www.tistory.com의 IP와 HTTP PORT인 80을 기준으로 TCP 연결을 해달라고 요청한다 OS는 www.tistory.com 80번 PORT에TCP 3-way-handshakes를 요청하며 패킷을 보낸다 3 3-way-handshakes가 성공적으로 이루어졌다면 웹 브라우저는 http를 통해 https://www.tistory.com HTML 파일을 보내달라는 데이터를 적는다 4 응용 계층(응용+표현+세션)에서 H.. [#. React] react-scripts: Permission denied 해결하기 $ npm start react 프로젝트를 실행하려고 하는데 react-scripts: Permission denied 실행을 못 하는 문제가 발생했다 $ sudo chmod +x node_modules/.bin/react-scripts react가 node_modules를 참고해서 빌드해야 하는데 권한이 없는 것이다 아래와 같이 node_modules 권한을 풀어줘야 한다 이전 1 2 3 4 ··· 23 다음
