[8주차] 프론트엔드 8주 완성 with React : React & Redux - react 강의
고차 컴포넌트 Higher Order Component https://ko.reactjs.org/docs/higher-order-components.html https://jeonghwan-kim.github.io/2022/05/28/react-high-order-component 컴포넌트를 가져와서 새로운 컴포넌트를 반환하는 함수 함수형 컴포넌트에서도 사용할 수 있다. export default function Button() { const [loading, setLoading] = useState(true); useEffect(()=> { const timer = setTimeout(()=> setLoading(false), 1000)); return ()=> clearTimeout(timer); }..
[7주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : 공식문서로 학습 - react강의
React Element에 style 적용하기 css로 적용하기 (className) className을 사용하는 것을 추천(HTML에서 이미 사용하는 이름은 React에서 지양) 문자열 inline style 로 적용 props로 전달되어 사용된다. style은 객체로 적용, 카멜케이스로 작성할 것(예 : backgroundColor) const element = ( 버튼 ) ref로 DOM다루기 useRef를 사용 스스로 최적화하는 React DOM조작을 하게 되면, 이를 벗어나게 된다. const inputRef = React.useRef(); const Input = () => { return () } inputRef.current.focus();로 해당 input 요소에 focus DOM? El..
[6주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : React 시작 - react강의
Object 정적메소드(static method) Object.assign()과 같이 prototype이 없는 경우(Object.prototype.assign이 아님) {}.assign()과 같이 사용할 수 없음. Object.assign() mdn: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Object/assign const target = { a: 1, b: 2 }; const source = { b: 4, c: 5 }; const returnedTarget = Object.assign(target, source); source에서 속성이 target으로 복사되어 들어간다. target또한 변경되고 re..
[5주차] 패스트캠퍼스 프론트엔드 8주 완성 with React : npm, node.js 시작!- react강의
npm 프로젝트 버전 일치시키기 package.json : 수동 모듈 관리 package-lock.json : 수동 모듈과 연결된 다른 외부 모듈 두 파일이 필요하다. 두 파일을 프로젝트 디렉토리의 루트경로에 이동시키고 npm i 명령어를 통해 설치한다. node.js https://nodejs.org/ko/ chrome V8 자바스크립트 엔진으로 만들어진 JavaScript런타임 기존 main.js에 연결한 js(import)한 것들을 한 파일로 만듦 parcel bundler는 웹브라우저에서 동작하는 것x 개발용으로만 사용하므로 "devdependency"로 설치 유의적 버전 Semantic Versioning, SemVer node --version 으로 node 버전을 확인할 수 있다. npm -..