Programming/React 썸네일형 리스트형 [React] 자주쓰는 yarn commend 목록 npm 말고 yarn React Project 생성 시 Node.js 를 설치하면 기본적으로 설치되는 패키지 모듈인 npm 을 이용하는 법이 있지만 npm 보다 속도나 기능적인 면, 그리고 보안적인 문제에서도 조금 더 좋은 yarn 을 사용하려 합니다. 실제 yarn commend 는 npm과 크게 다르지 않아 어렵지는 않습니다. yarn은 yarn.lock이나 package.json으로부터 설치만 하며, yarn.lock은 모든 디바이스에 같은 패키지를 설치하는 것을 보장하기 때문에 버전의 차이로 인해 생기는 버그 방지가 가능합니다. yarn package 설치하기 따로 파일을 다운받아 설치할 필요가 없습니다. 먼저 명령 프롬포트를 열거나 VSCode 내의 터미널 창에 아래의 코드를 입력하여 yarn .. 더보기 [React]filter, map, react-router-dom v6 활용기 filter 그리고 map 개인적으로 까먹지 않기 위해 기록한 코드입니다!!! 해당 코드가 무조건 맞는 것은 아닙니다! 분명 제가 작성한 코드보다 더 안전하면서 깔끔한 코드를 작성하신 분이 있을겁니다…. 개인적인 포트폴리오를 업그레이드 하는 중 NAS 를 집에 들여놓기엔 초기셋팅비용이 부담스럽고 서버를 대여하자니 현재로썬 그냥 단순하게 업그레이드하는 수준이라 그냥 DB를 사용하지 않고(?) github Page를 활용하기로 했습니다. React라면 REST API라도 사용해봐야하는데… JSON 대신 배열 컴포넌트를 활용하여 화면 구성을 진행하고 있습니다… 이상하게 꼬인 컴포넌트 구조 작성한 컴포넌트와 코드들입니다. 무작정 작성하며 나누다보니 이상하게 꼬인 경향이 있습니다… App.js에 Route를 모두.. 더보기 [React] Images 활용하기 React에서 img 사용하는 법! 일반적으로 html에서 img를 사용 할 때는 처럼 사용하지만 해당 방법을 사용하면 오류가 뜨지는 않지만 image가 정상적으로 출력되지 않습니다. React에서는 image를 사용할 때 조금 다른방식으로 사용합니다. import Img from '이미지경로'; const App = () => { return( ); }; export default App; React에서는 위의 코드와 같이 사용됩니다. 또한 추가로 alt값을 공백으로라도 둬야합니다. 만약 img 엘리먼트에 alt값을 추가하지 않았다고 오류를 출력하면서 프로젝트 구동이 안되는건 아니지만 console에서는 경고성 메시지를 뿜어냅니다. 그렇다면 React에는 위의 방법말고는 image를 사용 할 수 있는 .. 더보기 [React]React말고 next.js사용 next.js 프로젝트 생성하기 next.js 를 생성하는법은 React 프로젝트를 생성할 때 처럼 매우 간단합니다. // React // use npm npm create-react-app 프로젝트명 // use yarn yarn create react-app 프로젝트명 // next.js // npm npx create-next-app // yarn yarn create next-app 일반적인 React와 다를 것이 없습니다…. next.js 개발서버 구동하기 next.js 개발서버 구동도 어렵지 않습니다. // React // use npm npm start // use yarn yarn start // next.js // use npm npm run dev // use yarn yarn dev 더보기 [React]라이프사이클 알아보기 React 라이프사이클이란 React는 컴포넌트 기반의 VIEW 를 중심으로 한 라이브러리입니다. React는 프레임워크 가 아닌 라이브러리 입니다! 그래서 각각의 컴포넌트에는 라이프사이클(LifeCycle), 즉 컴포넌트의 수명 주기 가 존재하는데 이 생명 주기는 컴포넌트가 렌더링 되기 전인 준비과정에서 시작해서 페이지에서 사라질 때 끝나게 됩니다. 참고로 라이프사이클 메서드는 클래스형 컴포넌트에서만 사용이 가능하며 함수형 컴포넌트에서는 사용할 수 없습니다. 다만 React가 업데이트 되면서 Hooks 이 생기면서 함수형 컴포넌트에서도 라이프사이클과 비슷한 작업을 처리할 수 있게 됬습니다. React 라이프사이클 컴포넌트 라이프사이클은 총 9가지로 나눌 수 있는데, 이 9가지들을 크게 3가지의 카테고리.. 더보기 [React] 에러 : A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for .. react_devtools_backend.js:4026 Warning: A component is changing an uncontrolled input to be controlled. This is likely caused by the value changing from undefined to a defined value, which should not happen. Decide between using a controlled or uncontrolled input element for the lifetime of the component 영어실력이 부족해서 구글번역을 돌려보면 react_devtools_backend.js:4026 경고: 구성 요소가 제어되지 않는 입력을 제어하도록 변경하고 있습니다... 더보기 이전 1 2 다음
