develop (58) 썸네일형 리스트형 React : public 폴더 이미지 절대경로로 사용하기 오픈 그래프로 썸네일 이미지를 넣으려는데 아무리 넣어도 썸네일이 뜨지 않았다. 우선 에서 이미지 경로는 상대경로가 아니라 절대경로로 들어가야한다! publlic 폴더에 썸네일에 사용할 이미지를 넣어주고 이렇게 %PUBLIC_URL% 를 사용하면 된다. 나같은 경우엔 public 폴더 안에 바로 이미지가 있으니 %PUBLIC_URL%/jeju.jpg가 됨. 더 자세한 내용은 공식 문서를 참고하세요! https://create-react-app.dev/docs/using-the-public-folder/ Using the Public Folder | Create React App Note: this feature is available with react-scripts@0.5.0 and higher. cre.. React : useRef() 사용 프로젝트를 진행하면서 리액트 상태 관리에서 애를 많이 먹었다. 덕분에 라이프사이클과 useEffect에 대해 공부할 수 있었다! useEffect()에서 setState()를 사용하면 state가 바로 업데이트 되지 않아 초기값만 반환했다. 그러다 hook에서 useRef를 알게 되었고 useEffect에서 사용하니 컴포넌트가 마운트 되는 시점에서도 원하는 값을 불러올 수 있었다 ㅎㅎ 다음에도 비슷한 문제가 발생했을 때 참고할 수 있도록 정리해보고자 한다. useRef const resetRef = useRef(initialValue); useRef는 current 프로퍼티로 전달된 인자로 초기화된, 변경 가능한 ref객체를 반환합니다. 반환된 객체는 컴포넌트의 전 생애주기를 통해 유지된다. useRef.. [JavaScript] ES6 문법 여러 강의를 들으면서 공부를 해오고 있는데 ES6문법을 주로 사용하고 있어서 이참에 ECMAScript2015 또는 ECMAScript 6이라고도 하는 ES6문법을 정리해보려고 한다. ES6 문법의 주요 특징 - const, let 변수 const는 ES6에서 새로 등장한 키워드다! 말 그대로 constant(상수)역할을 하는데 반드시 선언과 동시에 초기화해야 한다. 재할당이 금지 되어있다. const 키워드는 재할당을 금지할 뿐, 불변을 의미하진 않는다. const 키워드로 선언된 변수에 원시 값을 할당한 경우 값을 변경할 수 없다. 하지만 const 키워드로 선언된 변수에 '객체'를 할당한 경우 값 변경이 가능하다. let은 변경 가능하며, 재할당도 가능하다. let 과 const는 블럭 단위에서 동.. Uncaught TypeError: querySnapshot.forEach is not a function 에러 해결 firestore를 이용해 read기능을 구현하던 중 마주친 오류.. is not a function 오류 자주 마주쳐서 힘들다 .. 처음엔 배열 객체 오류인줄 알았으나 스택 오버플로우 답변을 참고하니 get() 메서드가 비동기방식이라 then(), async/await 를 사용해야 한다고 함! 해결! FirebaseError: Missing or insufficient permissions 에러 발생 FirebaseError: Missing or insufficient permissions firebase로 프로젝트를 진행 중 데이터가 등록하려는 순간 이런 에러가 떴다. 뭔가 허가가 안되었다는 말인데..!! 이럴 경우 본인 firebase에 들어가서 생성한 데이터베이스로 들어간다 거부 수를 보면 뭔가 문제가 있는 것을 알 수 있다 해결 방법은 그 옆에 규칙 수정을 눌러서 보안 규칙을 수정해주면 된다! 더 자세한 보안 규칙은 공식 문서를 참고하기 https://firebase.google.com/docs/firestore/security/get-started Cloud Firestore 보안 규칙 시작하기 | Firebase Documentation 의견 보내기 Cloud Firestore 보안 규칙 .. React 4: 함수형과 클래스형 보호되어 있는 글입니다. React 3 : CRUD 생활코딩 강의 들으면서 주석으로 정리한거 읽어보면서 복기하기 App.js import './App.css'; import React, { Component } from 'react'; import TOC from './components/TOC'; import ReadContent from './components/ReadContent'; import Subject from './components/Subject'; import Control from './components/Control'; import CreateContent from './components/CreateContent'; import UpdateContent from './components/UpdateContent'; //App 컴.. React 2 : props, state 리액트의 인프라라고 할 수 있는 컴포넌트 컴퍼넌트는 js와 비슷한데 props라는 인자를 입력 받아 화면에 어떻게 나타날지 기술하는 react 엘리먼트를 반환ㄹ한다. 모든 리액트의 컴포넌트는 자신의 Props를 다룰 때 반드시 순수 함수처럼 동작해야 함. state는 props와 유사하지만, 은닉되어 있으며 컴포넌트에 의해 제어되는 특성을 가지고 있다. java에서 생성자랑 비슷한거같음...state는 props는 읽기 전용이고 컴포넌트 외부에 있음 그리고 수정할 수 없다. 부모 컴포넌트가 자식 컴포넌트에 값을 전달할 때 사용하는 것 class App extends Component { render() { return( ; //title과 content에 해당하는게 props ) } } //Subject.. 이전 1 2 3 4 ··· 8 다음
