Programming/React4 [React] 컴포넌트(Component) Fade In/Fade Out 구현 Fade In / Fade Out 을 구현해보자 1. 소스코드 2. 설명 z-index 때문에 반드시 visibility: hidden; 적용이 필요한 상황. 결론부터 말하자면 transition: all 0.2s linear 0s; 처럼 사용하면 된다. 이 때 가장 마지막에 오는 시간은 animaition-delay 에 사용되는 시간이다. 1s 로 설정 시 1초 뒤에 애니메이션이 실행된다. 검색해서 찾아보니 transition: opacity 0.2s visibility 0.2s; 같은 형식으로 사용하면 적용될거라 하던데, 막상 해보니 그냥 툭 하고 사라지며 애니메이션이 먹히지 않았다. useState를 사용하여 true/false 값에 따라 className을 분기처리 한 내용은 너무나도 당연한 부분.. 2022. 8. 3. [React] 'react-scripts'은(는) 내부 또는 외부 명령 실행할 수 있는 프로그램, 또는 배치 파일이 아닙니다. node_modules 폴더가 없는 것이 원인이다. 최초 React 프로젝트를 설치할 때 해당 폴더가 gitignore 걸려있는데, 다른 PC에서 Git Clone을 받을 경우 각종 의존성이 설치되어 있는 해당 폴더가 없어 react-scripts를 실행하지 못해 발생하는 에러이다. npm install 해당 명령어를 통해 package.json에 정의된 의존성을 설치하면 된다. 참고로 npm update 는 package.json에 정의된 의존성을 최신 버전으로 업데이트한다. 즉 package-lock.json 파일이 업데이트 되어 Git 변경사항에 잡힌다 (당연히 Rollback 해줘야한다). 2022. 8. 3. [Git] .env 파일 gitignore 가 안될 때 결론부터 말하자면 "기존에 있던 .env 파일을 삭제해야한다." 1. gitignore에 .env 추가 # .gitignore .env .env.local .env.production .env.development 2. 기존 .env 파일 삭제 # Commit 해도 .env 파일은 삭제되지 않는다. 백업 필요 X. $ git rm .env --cached $ git commit -m "Your Commit Message" 2022. 3. 22. [React] Modal 만들기 (React-Modal 사용 X) React에는 React-Modal 이라는 라이브러리가 존재한다. 그런데 사용법을 익히기도 귀찮았고(무엇보다 문서가 없었다), CSS 적용하기도 어려워서 그냥 직접 만들기로 했다. 생각보다 어려운 작업이 아니었다. 약간의 CSS 지식만 있다면 빠르게 구현할 수 있을 정도의 수준이지만, 이번 게시글에선 그 조차도 쉽게 설명해서 모두가 이해하도록 해보겠다. Index.js import React from 'react'; import ReactDOM from 'react-dom'; import Main from './components/main'; import './index.css'; ReactDOM.render( , document.getElementById('root') ); App.js 사용하지 않았다.. 2022. 2. 26. 이전 1 다음
