독고다이 퍼블리셔 독고다이 퍼블리셔

프레임워크/리액트 React

• 240708 - 0712 코드로 떠먹는 리액트 - 에러 정리

  프레임워크/리액트 React 2024. 7. 12. 16:00

  240708 - 0712 코드로 떠먹는 리액트 - 에러 정리[node.js 와 npm 설치 여부 확인]//노드 버전 확인node -v//npm 버전 확인npm -v//npm 최신버전으로 업데이트npm install -g npm@latest [에러 1]npm을 이용해 업데이트 하려고 했는데, win32라고 os 버전이 안맞아서 사용이 안된다고 한다.→ https://nodejs.org/en 사이트에 가서 msi 파일 다운받아서 업데이트 하자. [에러 2]java: error, gradle: error가 뜨며 빌드가 안되었다. //java 버전 확인java -version//gradle 버전 확인gradlew --version → openjdk와 gradle 삭제 후 다시 받아준다  + 자바는 환경변수(JA..

  Read More
• 모듈 호출 방식 (import, require)

  프레임워크/리액트 React 2024. 7. 9. 16:53

  모듈 호출 방식 (import, require)리액트 프로젝트에선 ES6 방식인 import 방식을 더 사용하지만, 필요에 따라 import를 쓰기도, CommonJS 방식인 require를 쓰기도 한다.  1. import 방식 / ES6 모듈ES6 모듈: import { createBrowserRouter } from "react-router-dom"; 2. require 방식 / CommonJSconst { createBrowserRouter } = require("react-router-dom");3. 차이점방식 ES6 / import CommonJs / require 임포트 시점정적 임포트 / 컴파일 시점동적 임포트 / 런타임 시점데이터 교환 방식import - export를 통해 모듈 간 데..

  Read More
• ERROR 1045(28000) 비밀번호 오류

  프레임워크/리액트 React 2024. 7. 9. 11:22

  ERROR 1045 (28000): Access denied for user 'malldbuser'@'localhost' (using password: YES)→ 마리아DB 계정 연결 중 발생한 오류 - 비밀번호 오류→ 아래의 개념이 제대로 잡히지 않아서 생겼다.* 원인 : malldbuser로  로그인하면서 처음 설정했던 root 비밀번호로 로그인한게 이유   1. CREATE DATABASEmalldb 데이터베이스를 만들어라CREATE DATABASE malldb;  2. CREATE USER새로운 생성자를 만들어라 'USER명'@'호스트명' 암호설정 '사용할암호';CREATE USER 'malldbuser'@'localhost' IDENTIFIED BY 'malldbuser'; 3. % 의 의미CR..

  Read More
• state 개별 숫자 증가, props

  프레임워크/리액트 React 2023. 1. 19. 01:09

  1. 과제 1-1. 반복문 처리 없이, 👍 클릭시 개별적으로 숫자 증가 구현하기 /*eslint-disable*/ //경고메세지가 뜨는 eslint 기능을 꺼준다. import './App.css'; import {useState} from 'react'; function App() { let [글제목, 글제목변경] = useState(['남자코트 추천', '강남 우동맛집', '파이썬독학']); let [좋아요, 좋아요변경] = useState([0,0,0]); let [modal, setModal] = useState(false); return ( ReactBlog {글제목[0]} { let good = [...좋아요]; good[0] = good[0] + 1; 좋아요변경(good) } }>👍 {좋아요..

  Read More
• map()

  프레임워크/리액트 React 2023. 1. 17. 01:33

  리액트에서 반복문 처리 JSX에서 자바스크립트 사용시 중괄호를 쓰고, 안에다 입력한다.주로 사용했던 조건문인 if문 대신 {} 안에서 삼항 연산자를 사용했듯,반복문을 처리할 때는 for문 대신 map() 을 이용해 반복문을 처리해야 한다. array.map() ⭐반복문 사용 시 유용하다! array의 자료 개수만큼 함수 안의 코드를 실행해준다. 함수의 파라미터는 array 안에 있던 자료이다. return 오른쪽에 있는 것 array에 담아준다. //array.map(콜백함수); array.map(function() { 실행할 코드 }); [1,2,3].map(function(a) { console.log(a) // 1,2,3 순서대로 나옴 }); [1,2,3].map(function(a) { retur..

  Read More
• 컴포넌트 생성, 사용하기

  프레임워크/리액트 React 2023. 1. 16. 18:23

  컴포넌트 html은 사용이 많아지기 때문에 코드가 더러워지는 단점이 있다. 리액트에서는 이 부분을 해결하기 위해 컴포넌트를 만들어 사용한다. 뿐만 아니라 해당 컴포넌트를 보면, 어떤 기능을 하는지 명확히 알 수 있는 장점도 있다. → 가독성이 좋아지고, 코드의 재활용에 좋다. 1. 컴포넌트(component) 생성 function을 만들고, return() 안에 html 담기 쓰기 또는 1) 주의사항 다른 function 바깥쪽에 작성할 것 function 이름은 영문 대문자로 시작 (ex: Modal) return() 안에는 하나의 태그로 시작해 하나의 태그로 끝나야 함 → 여러개의 태그를 사용하고 싶을 때는 가장 바깥쪽에 로 감싸준다(fragment 문법) → 참고사이트 : https://ko.rea..

  Read More
• 리액트 기본문법 JSX, state

  프레임워크/리액트 React 2023. 1. 14. 18:22

  리액트 기본문법 리액트는 html 대신 jsx를 사용한다. class 사용 시, class 대신 className 사용 변수를 html에 사용하고 싶을 땐 {중괄호} - 데이터 바인딩 html에 style속성 넣고 싶을 때는 중괄호에 {} 자료형 사용, 속성은 - 대신 모든 단어 붙여씀 (font-size → fontSize) return 안에는 병렬로 태그 2개 이상 기입 금지 import './App.css'; // css 연결 function App() { let post = '강남 우동 맛집' //변수 선언 let data = 'red' return ( {/* class 지정(className 사용) */} 블로그 {/* 태그 내 인라인으로 속성 넣기 style = {{}}, html 태그 내 변..

  Read More
• 리액트 설치 및 세팅

  프레임워크/리액트 React 2023. 1. 14. 17:49

  1. 리액트 설치 및 세팅 우선 node.js 최신 버전을(왼쪽 안정화 버전 사용) 다운받아야 함 node.js 버전 확인은 터미널을 연 후 (ctrl + `) npm -v 작업할 폴더를 만든 후 powershell에서 프로젝트를 생성한다. (Create React App을 생성) 리액트 앱을 생성하는 방법은 npm과 npx 방식이 있는데, npm은 프로그램을 설치 npx는 프로그램을 임시로 설치한다.공식 문서에서는 npx 방식을 권장하며, npx는 컴퓨터 공간을 낭비하지 않고, 최신 버전을 유지할 수 있도록 해주는 장점이 있다. npx create-react-app blog //blog대신 임의의 프로젝트명을 입력해도 됨 //npm install -g create-react-app //create-re..

  Read More