분류 전체보기

Pinia 사용법 (설치 및 적용)

1. Pinia 설치 yarn 또는 npm을 통해 Pinia를 설치합니다. 설치 명령어는 아래와 같습니다. yarn add pinia // or npm install pinia2. Pinia 등록 main.js에 Pinia 인스턴스를 만들어 적용시킵니다. - Vue3의 경우 //main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia = createPinia() const app = createApp(App) app.use(pinia) app.mount('#app')- Vue2의 경우 1. npm i..

React input 에러 (Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`.)

# 에러 내용 Uncaught Error: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. ❯ ❮ 문제의 에러코드. html에서 별반 다르지 않았다. # 해결 방법 input 사이에 있는 텍스트를 삭제한다. value나 label (for)로 수정한다.

React 에서 이미지가 불러와지지 않을 때 (엑박 뜰때)

# 문제점 메인 로고를 불러오려고 img 태그 속 src에 이미지 주소를 넣었다. 그런데 이미지는 불러와지지 않고, 깨진 파일처럼 떠있는 것이다. import './App.css'; function App() { return ( ); } 실제 코드는 일반 html로는 잘 돌아간다. # 해결법 import를 통해 불러오면 해결된다! import './App.css'; import mainlogo from './assets/image/mainlogo(black).png'; function App() { return ( ); } export default App;

React 오류 : 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다.

문제 상황 git clone 을 실행했는데 React 프로젝트가 실행되지 않는다! 에러 메세지 아래와 같은 에러 메세지가 떴다. 'react-scripts'은(는) 내부 또는 외부 명령, 실행할 수 있는 프로그램, 또는배치 파일이 아닙니다. 해결법 npm install -save react-scripts 전역 설치가 필요할 경우, -g 옵션을 붙이면 된다!

React props로 데이터 전달하기

1. 부모 컴포넌트 부모컴포넌트에 props="value" 를 입력한다. (아래에 TodoList를 보면 todo="TODO" 라고 쓰여진 부분) function App() { return ( TODO LIST ); } 2. 자식 컴포넌트 props를 파라미터로 넘겨주고, {props.XXX}로 바인딩 해서 사용한다. XXX 부분에는 부모컴포넌트에서 옮겨준 이름을 사용하면 된다. {props.todo} 부분! import React from "react"; const TodoList = (props) => { return ( {props.todo} ); }; export default TodoList;

React 컴포넌트 호출 오류 : [ ... is using incorrect casing. ]

처음 컴포넌트에 대해 공부하고 있는데, 이런 오류가 났다. Warning: is using incorrect casing. Use PascalCase for React components, or lowercase for HTML elements. at todoList at div at App 뭔가 싶어 해석해보면 리액트 컴포넌트는 PascalCase 를, HTML 엘레먼트는 lowercase(소문자)를 사용하라는 것이다! 그럼 PascalCase는 뭘까? 파스칼 표기법 "PascalCase" 첫 단어를 대문자로 시작하는 표기법 예시: BackgroundColor, TypeName, PowerPoint CamleCase와 비슷하지만 첫단어도 대문자라는 차이점이 있다. 오류 메시지에서 나왔듯, 내가 만든 컴..

React : 클래스형(class) 컴포넌트, 함수형(function) 컴포넌트

각 컴포넌트를 만드는 법 1. 클래스형(class) 컴포넌트 class App extends Component { render(){ const name ='react'; return {name} 연습 } } class를 이용해서 만듭니다. 2. 함수형(function) 컴포넌트 function App() { const name = "react"; return {name} 연습; } function을 이용해서 만듭니다.

React 시작하기

1. React 프로젝트 만들기 $ npm init react-app or $ yarn create react-app

React 시작하기 전, 환경 구비

1. Node.js / npm 리액트를 사용하기 위해서는 Node.js가 필수적이다. 프로젝트를 개발하는데에 필요한 중요 도구들이 Node.js를 사용되기 때문. 다운로드 바로가기 > https://nodejs.org/ko/download/ 2. VSCode https://code.visualstudio.com/download 추천 Extensions ESLint : 자바스크립트 문법 정리를 위한 익스텐션. Reactjs Code Snippets : Prettier : 코드를 더 예쁘게! 자동으로 정리해준다.

~2022년 여름을 맞아, 중간 결산!

🐢 BTP 프로젝트 👉 모든 사진은 디자이너님의 시안을 임시로 가져왔다! 아직 미완성인 부분도 있어 설명용으로는 적절하지 않다고 생각했기 때문이다. 👉 모든 영상은 현재 완성된 상태이다! (개발 서버 기준) 실제로 돌아가 직접 녹화했다! 👉 백엔드의 경우, 다른 백엔드 개발자 분이 API를 만들어주셨다! 멋쟁이! 👉 +의 경우, 개인적인 목표/추가할 점을 메모했다. 💚 스트레칭 가이드 > 스트레칭 가이드 (전체) 1. 모든 html 레이아웃 및 css작업 flex를 이용해 정렬시켰고, margin에서 벗어나 gap을 통해 더 깔끔하게 만들 수 있게 되었다. 리스트 형식이 많다보니, flex에 대해 많은 공부가 되었다. 2. 카테고리 메뉴. (+ 북마크 on/off) 기존에 만들었던 카테고리는 button..