Dreams come true

[ React ] React와 프레임워크 React.js Next.js의 차이점과 특징

React : facebook에서 개발한 Javascript 라이브러리 입니다. 분리 가능한 컴포넌트를 사용하여 중복되는 코드 재사용이 용이합니다. 컴포넌트 상태를 개발자가 효율적으로 관리할 수 있으며, 복합적인 UI를 만들 수 있습니다. 특징 가상DOM : 우리 시야에 보이는 부분만 업데이트할 수 있습니다. 컴포넌트 : 프로그램의 다른 부분에서도 재사용할 수 있으며, 유지 보수가 쉽고 코드의 중복을 줄일 수 있습니다. 단방향 데이터 바인딩 : 단방향 데이터 흐름을 가지며 데이터 변경이 이루어집니다. 프로그램 동작을 이해하기 쉽고 디버깅이 용이합니다. JSX : JSX(JavaScript XML)를 사용하여 자바스크립트 코드 안에서 XML과 유사한 구문으로 UI 요소를 작성할 수 있습니다.. React와..

[ github ] repositiry nodemodeules 삭제하기

이미 올려버린 repositiry 의 nodemodeules 삭제 React 프로젝트를 github로 올릴 때, nodemoduels를 제외하지 못하고 올려버리는 실수를 종종할 때가 있습니다. 'nodemodules' 를 제외하고 github에 올리는 이유는 직접 작성한 코드가 아닐 뿐더러, 용량이 매우 크기 때문에 따로 제외하고 올린다. 제외된 'nodemoduels'는 git clone 후 install로 쉽게 다운받을 수 있다. 1) .gitignore 에 node_modules를 등록 ( .gitignore에 있는 파일은 제외하고 push를 해줍니다. ) 2) 터미널에 입력 ( repository의 nodemodule를 삭제후 다시 push 합니다. ) git rm -r --cached . git..

[ mdiea-query ] React 반응형 웹 레이아웃 만들기

반응형 웹이란? PC, 모바일, 태블릿 등 다양한 디바이스에 맞는 해상도에 따라 레이아웃과 스타일에 최적화 해주어 사용자에게 편의성이 높은 UI 를 제공합니다. React-responsive React 애플리케이션에서 반응형 디자인을 쉽게 구현할 수 있도록 도와줄 수 있는 라이브러리 입니다. 다양한 장치 및 화면 크기에 따라 UI를 적절히 조정하여 사용자 경험을 향상시킬 수 있습니다. MediaQuery : 화면 크기에 따라 컴포넌트 스타일을 적용할 수 있도록 지원합니다. (버튼의 크기, 색상 ..) 반응형 컴포넌트 : 동일한 컴포넌트를 여러 번 작성하지 않고도 장치별로 다른 UI를 제공할 수 있습니다. 미디어 유틸리티 : Javascript 코드 내에서 화면 크기에 따른 조건부 로직을 작성할 수 있습니..

ReactPlayer 로 동영상 삽입하기

다양한 동영상의 URL을 가져와 보여줄 수 있는 ReactPlayer 입니다. 외부 영상 url을 가져오는 방법과 저장한 영상을 가져 오는 2가지 방법입니다. 1) 라이브러리 설치 사용하는 패키지 매니저에 따라 라이브러리를 설치해줍니다. $ npm install react-player $ yarn add react-player 2-1) 외부 url 동영상 재생 import ReactPlayer from 'react-player' export default function BodyImage():JSX.Element { return( ) } 2-2) 저장한 동영상 재생 public - videos 에 저장한 mp4 영상을 파일 경로를 통해 동영상을 재생합니다. 동영상 재생에 필요한 설정을 할 수 있습니다. ..

Node.js 삭제 후 재설치 npm 권한 Error 해결!

온라인 강의를 보면서 node.js 를 처음 깔아보고 이것 저것 라이브러리를 install 하는데 앞에 계속 sudo를 붙여야 하고. 파일을 삭제할 때도 계속 유저패스워드를 입력해야되는 상황이였다. 구글 검색 후 정리를 해보았다. 지우고 새로 처음부터 설치 일단 터미널에서 node.js 삭제 sudo npm uninstall npm -g sudo rm -rf /usr/local/lib/node /usr/local/lib/node\_modules /var/db/receipts/org.nodejs.\* sudo rm -rf /usr/local/include/node /Users/$USER/.npm sudo rm /usr/local/bin/node sudo rm /usr/local/share/man/man1/..