본문 바로가기
728x90
반응형

전체 글220

[GitHub] 리액트 프로젝트 GitHub Desktop으로 배포하는 방법 - 리액트 깃허브에 올리는 가장 쉽고 간단한 방법 리액트는 자바스크립트 프로젝트 배포방법과 다르다! 조금 더 복잡한 것 같다. 최대한 쉽고 쉽게 설명을 해놓으려고 시간을 투자했으니 부디 미래의 내가 헷갈릴때마다 도움이 되길... 먼저 깃허브 데스크탑이 컴퓨터에 설치되어있어야합니다. [GitHub Deaktop 설치방법 바로가기] 1. 깃허브 데스크탑에서 repository를 새로 생성하기 (repository명은 소문자와 - 로만 해야함) [repository 생성하는 방법 바로가기] 2. 하위 경로에 배포하고 싶으시면 프로젝트에 설정이 따로 필요함! 2-① 깃허브 홈페이지에 들어가서 깃허브 데스크탑에서 만든 레파지토리 잘 만들어졌나 확인하고 경로 복사 [경로 어딨는지 모르면 클릭] 2-② 배포하고자 하는 프로젝트 파일 중 package.json 이라는.. 2022. 11. 15.
[React] 리액트에서 아이콘 사용하기 / 리액트에서 Font Awesome 사용하기 자바스크립트에서처럼 설치없이 링크만으로 import 해서 사용하는 방법은 없는 것 같다.. 1. 일단 터미널에서 아래 코드입력해서 설치하고 npm install react-icons --save https://react-icons.github.io/react-icons React Icons React Icons Include popular icons in your React projects easily with react-icons, which utilizes ES6 imports that allows you to include only the icons that your project is using. Installation (for standard modern project) npm install r.. 2022. 11. 14.
[에러] 리액트 에러 - Objects are not valid as a React child (found: [object Date]). 📖 에러 경위 Date 날짜를 화면에 나타내보려다가 이런 에러 메세지를 만났다. Objects are not valid as a React child (found: [object Date]). 📌 에러 원인 찾아보니 new Date 이거나 Date의 값인 경우 Object라서 리액트에서 렌더링을 못한다는 것이다. 💡 결론 toString()을 해줘야 한다고 한다. 그런데!!! toLocaleString('ko-KR') 이런식으로 하면 굳이 따로 설정하지 않아도 내가 원하는 방식대로 나오네?! [참고사이트] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/toLocaleString Date.protot.. 2022. 11. 14.
[자바스크립트] Array filter( ) 함수 filter( ) 사용 방법 callback함수를 통해 주어진 3개의 인자(요소 값, index, 순회하는 대상 객체)를 사용해 Boolean 값인 true 또는 false 값을 반환하는 함수를 등록하는 것 const numbers = [1]; numbers.filter((number, index, source) => { // number: 요소값 // index: source에서 요소의 index // source: 순회하는 대상 console.log(number); // 1 console.log(index); // 0 console.log(source); // [1] return number > 3; }); 예제 const words = ['spray', 'limit', 'elite', 'exuber.. 2022. 11. 12.
[에러] 리액트 에러 - Expected an assignment or function call and instead saw an expression 📖 에러 경위 Expected an assignment or function call and instead saw an expression 갑자기 이런 에러가 남 📌 에러 원인 1. 찾아보니 보통 map을 사용할때 중괄호를 잘못써서 나오는 에러같은데 나는 일단 map을 사용하지 않았음 2. 화살표 함수를 잘못 사용해도 나오는 문제지만 화살표 함수에서 사용한 것들은 틀린 부분이 없었음 3. 친절하게 라인 17번에서 틀렸다는 걸 알려줘서 다시보니 setToDo에 저렇게 쓰는게 아님.. 💡 결론 에러나오면 아직도 무조건 겁먹고 검색부터 하는데 일단 에러 화면을 잘 읽어보고 틀린 부분은 없나 침착하게 다시보자! 2022. 11. 11.
[React] 리액트 Hooks - useEffect( ) 함수 1) useEffect( ) 함수란? - React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook - 렌더링 혹은 변수의 값 혹은 오브젝트가 달라지게 되면 그것을 인지하고 업데이트를 해주는 함수 - 콜백 함수를 부르게 되며 렌더링 혹은 값, 오브젝트의 변경에 따라 어떠한 함수 혹은 여러 개의 함수들을 동작 - useEffect는 component가 mount 됐을 때, component가 unmount 됐을 때, component가 update 됐을 때 특정 작업을 처리 - 클래스형 컴포넌트에서 사용할 수 있었던 생명주기 메소드를 함수형 컴포넌트에서도 사용할 수 있게 된 것 2) useEffect( ) 사용법 ※ 기본 형태 useEffec.. 2022. 11. 11.
728x90
반응형

티스토리툴바