React/Start (4) 썸네일형 리스트형 [React] .env 파일로 환경 변수 관리 하기 (Feat. API Key) 환경 변수란 컴퓨터 시스템에서 프로그램이 실행될 때 동작을 제어하거나 설정하기 위해 사용되는 값들의 모임입니다. 개발 환경에서의 환경 변수로는 API Key, 비밀키, 서버 URL, DB URL, DB Password 등이 있겠네요 그럼 이러한 값들을 .env 파일로 관리하지 않게되면 어떻게 될까요? // API Key const myApiKey = 'abcdefg12345'; 우리가 작성한 코드는 깃허브의 공개된 리포지토리에 올리게 되면 별다른 조치를 하지 않는 이상 그대로 올라가게 됩니다. 위에 있는 내 API Key를 아무나 볼 수 있고 또, 무분별하게 사용될 수도 있습니다. 그렇기 때문에 공개되어서는 안되는 민감한 정보들을 .env 파일에 저장하여 필요할 때 환경 변수로 불러오는 것입니다. 아래 .. [React] 파비콘(Favicon) 설정하기 (With. 티스토리) 파비콘이란 웹 사이트나 웹 페이지의 브라우저 탭에 표시되는 작은 아이콘입니다. 웹 사이트를 대표하는 아이콘이므로 통상적으로 로고를 많이 사용합니다. 리액트 프로젝트를 처음 생성하면 \public\favicon.ico 파일과 함께 사진에 보이는 파비콘이 기본으로 설정됩니다. 이 파비콘을 내가 원하는 이미지로 바꿔보겠습니다! 이미지 확장자 변환 무료 Favicon 생성기, 이미지 변환-Wizlogo 무료로 몇 초 안에 귀하의 웹 사이트에 대한 즐겨 찾기 아이콘을 생성하십시오. 이미지 파일 (GIF, JPG 및 PNG)을 업로드하고 즐겨 찾기 아이콘 (ICO) 또는 앱 아이콘으로 변환하십시오. wizlogo.com 리액트에서 파비콘(이미지)의 확장자로 jpg, png 파일도 사용 가능하지만 ico 파일이 기본.. [React] 폴더 구성하기 + 파일 예시 폴더 구성에는 프로젝트 또는 회사마다 폴더 구조를 다르게 설정하므로 정답은 없습니다.참고하셔서 프로젝트 스타일에 맞게 구성하시길 바랍니다.📁 project\ js App.js (실제 보여질 컴포넌트, 라우팅 구성) js Index.js (Root DOM Node에 App 컴포넌트를 렌더링) ⬇️ src\⬇️ app\ js store.js (Redux Store 생성)⬇️ auth\ (인증 관련 폴더) js register.js (회원가입 처리) js RequireAuth.js (기능 처리 후 페이지 유지)⬇️ assets\ (이미지 폴더) ⬇️ images\ 🖼️ logo.png 🖼️ main.jpg ⬇️ icons\ 🖼️ search.svg 🖼️.. [React] 개발 환경 세팅 설치할 라이브러리styled-components : CSS 문법을 그대로 사용하면서 스타일된 컴포넌트 형태로 만들어주는 라이브러리styled-reset : 기본 css를 초기화react-icons : 다양한 아이콘을 쓸 수 있는 라이브러리react-router-dom : 라우팅(사용자가 원하는 경로로 보내는 과정) 라이브러리@reduxjs/toolkit react-redux : 전역 상태 관리 라이브러리react-bootstrap bootstrap : 레이아웃을 복사 붙여넣기 식으로 개발 가능한 css, js 라이브러리 전체 설치npm install styled-components styled-reset react-icons react-router-dom @reduxjs/toolkit react-redu.. 이전 1 다음
