리액트(React) styled-components 설치 & 사용하기

styled-components 설치 & 사용 styled-comforts는 "CSS-in-JS"(JavaScript의 CSS)라는 기술을 사용하여 React 애플리케이션의 스타일을 지정하는데 사용되는 JavaScript 라이브러리이다 터미널을 열어서 다음 명령어를 실행해 라이브러리를 설치해준다 npm install styled-components styled-componets를 사용하기 위해서는 디자인 작업을 하는 폴더의 상단에 선언을 해주어야한다 import style from "styled-components"; 이렇게 하면 styled-componets를 사용할 수 있게 된다 styled. 기능을 이용해서 javascript 안에서 디자인 구현이 가능하도록 해준다 const StyledButton..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 27.
• textsms

리액트(React) 라우터 설치&셋팅

리액트에서 페이지 나누는 방법 리액트를 사용하지 않는 경우 페이지를 나눌 때 html 파일을 만들어서 상세페이지 내용을 채우고 사용자가 접속을 했을 때, html 파일을 보내 페이지를 보여주는 방식으로 되어있다 리액트에서는 html을 하나만 사용하기 때문에 컴포넌트를 만들어서 상세페이지 내용을 채워주고 사용자가 접속을 했을 때, 컴포넌트를 보여주는 방식으로 되어있다 리액트(React) 라우터 설치&셋팅 터미널 창을 열어서 npm install react-router-dom@6 라우터를 설치하는 명령어를 실행해 준다 그리고 폴더 안의 index.js 파일을 열어준다 태그를 하나 만들어서 App태그를 감싸 준다 태그를 사용하기 위해서 상단에 react-router-dom 라이브러리를 import 를 선언 해..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 26.
• textsms

[React]리액트에서 이미지 넣는 방법(background-image/size/position)

리액트에서 이미지 넣는 방법 CSS 파일에서 이미지 불러오기 background-image: url("./path/to/your/image.jpg"); html 파일에서 이미지 불러오기 이미지를 넣어주기 위해서 상단에 이미지에 대한 경로를 설정해준다 import 사용할이름 from "./이미지파일 경로.jpg"; 원하는 이름안에 이미지의 경로를 작성해주고 이미지를 넣어줄 태그 안에 style 속성안에 CSS 파일과 마찬가지로 backgroundImage 를 넣어주면 이미지가 뜨는 것을 확인 할 수 있다 문자열 안에 변수를 넣어주기 위해서 + 연산자를 이용해서 다음과 같이 코드를 작성해주었다 이미지 사이즈 변경하기 background-image: url("./main-bg.jpg"); background-..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 24.
• textsms

[React]리액트 부트스트랩(Bootstrap) 설치&사용

리액트(React) 부트 스트랩 사용하기 명령어는 변할 수 있기 때문에 항상 사이트로 들어가서 최신 버전의 명령어를 가져와야 한다 구글에 React Bootstrap 검색하면 나오는 최상단 사이트로 들어가준다 https://react-bootstrap.netlify.app/docs/getting-started/introduction Introduction | React Bootstrap Learn how to include React Bootstrap in your project. react-bootstrap.netlify.app Bootstrap 설치하기 터미널에서 해당 명령어를 입력해서 bootstrap을 설치해준다 css 스타일시트 설정하기 React bootstrap 에서 CSS를 사용하기 위해서..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 24.
• textsms

[React]Github Pages 활성화 &리액트 build 올리기

Github Page 열기 열고자하는 프로젝트의 Repository 로 들어가준다 그리고 Setting 에 Pages 메뉴를 선택해준다 그리고 Branch에서 None을 Main으로 변경해준다 https://docs.github.com/ko/pages/getting-started-with-github-pages/configuring-a-publishing-source-for-your-github-pages-site GitHub Pages 사이트에 대한 게시 원본 구성 - GitHub Docs 변경 내용이 특정 분기에 푸시될 때 게시하도록 GitHub Pages 사이트를 구성하거나 GitHub Actions 워크플로를 작성하여 사이트를 게시할 수 있습니다. GitHub Pages is available i..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 22.
• textsms

[React]Error: Uncaught ReferenceError: React is not defined

Uncaught ReferenceError: React is not defined 해당 메세지는 프로젝트에서 React 라이브러리를 올바르게 가져오지 못했거나 참조 하지 못했을 때 나타나는 버그이다 잘 사용하던 프로젝트 코드였는데 안 된다고 해서 개발자프롬프트로 확인을 했는데 다음과 같이 떠있었다 이 프로젝트는 Class 를 만드는 프로젝트였는데 프로젝트 파일을 생성하면서 React.Componet 에서 뭔가 문제가 생긴거 같다 뭔가 프로젝트가 충돌이 일어나면 react 를 업데이트를 한번 시켜주면 되는 경우가 있길래 이번에도 업데이트를 시켜주었다 npx update 그래도 리액트는 실행이 되는데 랜더링이 되지 않는... 이번에는 'React is not defined' 라서 리액트를 새로 설치해 보았다..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 22.
• textsms

[React] useState([배열]) 요소 값 변경하기

useState([배열]) 요소 값 변경하기 let [Blog1, setBlog1] = useState([ "최저가 마우스", "당근 직거래", "일본 여행 패스", ]); let [Date, setDate] = useState(["2023-11-13", "2023-11-14", "2023-11-15"]); {Blog1[0]} {Date[0]} {Blog1[1]} {Date[1]} {Blog1[2]} {Date[2]} 위 UI는 useState([배열])를 사용해서 각 요소들 그려주고있다 이제 여기에서 [다음 페이지] 버튼을 누르면 Blog1의 값과 Date 값을 동시에 변경해주려고 한다 { 어떻게 동작할 것 인가 }} >새로고침 다음 onClick={ 이벤트 함수} 버튼안에 Blog1(state 객체)..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 15.
• textsms

리액트(React) 터미널 경고 메시지안보이게 하는 방법

리액트(React) 터미널(TERMINAL) 경고 메시지 안보이게 하는 방법 리액트를 사용하다보면 프로젝트를 실행하거나 했을때 오류는 아니지만 다음과 같이 WARNING 이라는 경고가 뜬다 이 경고 메시지를 안뜨게 하는 코드가 있는데 Line 1:8: 'logo' is defined but never used no-unused-vars logo가 선언되었지만 사용된지 않고 있어서 나오는 경고 메시지이다 /*eslint-disable*/ 이 코드를 상단에 작성해주면 경고가 사라지는 것을 볼 수있다 WARNING 문제 코드보다 아래에 있는 코드에만 적용이 되기 때문에 상단에 적어주는 것이 좋다

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 15.
• textsms

[React]훅/상태(state)/useState() 사용해서 상태 값 변경하는 법

훅(Hook) 훅(Hook)은 함수형 컴포넌트에서 상태(state : 컴포넌트의 상태를 나타내는 객체)와 다양한 리액트 기능을 사용할 수 있게 해주는 함수로 컴포넌트의 상태 관리, 생명주기 메서드 호출, 컨텍스트 사용 등과 같은 리액트의 핵심 기능을 함수형 컴포넌트에서 사용할 수 있게 해준다 상태(State) 상태(state)는 컴포넌트가 렌더링 될 때 변할 수 있는 값들을 말한다 useState 함수는 이런 상태(state)를 선언하고 업데이트 할 수있게 도와준다 useState() 사용해서 자료 보관/변경하기 상태 선언하기 useState()를 사용하기 위해서는 import React, { useState } from 'react'; 위의 코드를 선언이 되어있어야지 useState를 사용할 수있다 /..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 15.
• textsms

[React]리액트 'JSX 문법' 사용하기

리액트 'JSX 문법' JSX 기본 구조 HTML과 유사한 구조를 가지면서 JavaScript 코드를 통합 해서 사용할 수 있는 확장 문법이다 리액트에서는 JSX( JavaScript의 확장 문법 ) 을 사용해서 UI를 구조를 선언한다 리액트 파일을 만들면 src 안에 기본적으로 포함되어있는 App.js는 위와 같이 생겼다 리액트에서 레이아웃을 만들기 위해서는 import logo from './logo.svg'; import './App.css'; function App() { return ( //여기에 코드 작성하기! ); } export default App; function App() 안에 있는 return() 문 안에 작성을 해주어야 한다 하지만 변수 같은 경우, return() 밖에 작성 해주..

• format_list_bulleted Frontend Dev📚/🔖React_JS
• · 2023. 11. 15.
• textsms