Studying Coding Studying Coding

주의 : component의 이름은 항상 대문자 react는 소문자로 시작하는 componrnt를 DOM태그로 처리하기때문이다. 예시 > HTML div tag 5. State와 생명주기 생명주기 메서드를 클래스에 추가하기 처음 Dom이 렌더링 될때 함수 설정 > '마운팅' 생성된 DOM이 삭제 될때마아 함수 해제 > '언마운팅' 컴포넌트 로컬 state를 업데이트하기 위해 this.setState()를 사용합니다.

propTypes 1. conponent의 props를 지정 2. props의 type을 지정 Method 1. import PropTypes from ‘prop-types‘; 2. MyComponent.propTypes = { name: PropTypes.string }; - MyComponent : component - name : props isRequired method MyComponent.propTypes ={ name:PropTypes.string, favoriteNumber : PropTypes.number.isRequired }

함수 component를 사용할때 다른 component 와 정보를 공유하기 위해 props를 사용한다. 1. props의 공식적인 사용 const MyComponent = (props) =>{ return my name is {props.name} } 2. 구조 분해 문법 const MyComponent = (props) =>{ const {name} = props return my name is {name} } 3. More simple const MyComponent = ({name}) =>{ return my name is {name} }

import React from 'react'; 리액트를 불러와 사용할수 있게 해준다. 리액트 프로젝트를 만들 때 node_modules라는 디렉터리도 함께 생성되는데요. 프로젝트 생성 과정에서 node_modules 디렉터리에 react 모듈이 설치됩니다. 그리고 이렇게 import 구문을 통해 리액트를 불러와서 사용할 수 있는 것이죠. 모듈을 불러와서 사용하는 것은 브라우저에 없는 기능이다. 브라우저가 아닌 환경에서 자바스크립트를 실행할 수 있게 해주는 Node.js에서 가능한 기능이다. 이러한 기능을 브라우저에서도 사용할수 있게 하기위해 번들러 사용, 파일을 묶듯이 연결한다. 번들러로 웹팩을 사용한다. 번들러를 사용하면 import로 모듈을 불러 하나의 파일을 생성한다. 파일을 불러오는 것을 웹팩의..

DOM은 Document Object Model의 약어 , 객체로 문서구조를 표현하는 방법으로 XML, HTML으로 작성한다. 웹 브라우저는 DOM을 활용해 객체에 JS나 CSS를 적용한다. 리액트는 Virtual DOM 방식을 사용해 DOM업데이트를 추상화함으로써 DOM 처리횟수를 최소화 한다. 리액트에서 데이터가 변하면 1. 전체UI를 Virtual DOM에 리렌더링 합니다. 2. 이전 Virtual dom에 있던 내용을 현재내용과 비교합니다. 3. 바뀐 부분만 실제 DOM에 적용합니다. React Start $ npm init react-app npm start

Where did I learn? https://www.youtube.com/watch?v=a_7Z7C_JCyo&t=328s settting 1. 5초 마다 오른쪽으로 화면 자동 이동 2. 왼 오 버튼누르면 화면 이동 method 1. data와(people의 정보가 들어있는) , index 번호 세팅 function App(){ const [people, setPeople] = useState(data) // data는 info가 들어있는 js파일 const [index, setIndex] = useState(0); // index순서대로 화면의 정보가 달라짐 } 2. usestate를 이용해서 index변경 최대, 최소 부분 설정 + setInterval 이용해서 index번호 변경 useEffect..

nav의 각각의 link를 클릭할때 마다 , 해당페이지로 url을 이동시켜주는 기능이다. router을 왜 해야 하는 가? 특정 페이지에 대한 즐겨찾기 등록이 불가합니다. 컴포넌트가 전환되더라도 브라우저 주소창의 URL은 고정되어 있기 때문입니다. 뒤로 가기 버튼을 누르면 해당 앱내에서 이전 페이지로 이동하는 것이 아니라 그 전에 서핑하던 다른 웹사이트로 이동해버립니다. 새로 고침 버튼을 누르면 사용 중이던 컴포넌트가 아닌 무조건 최초에 렌더링되었던 Home 컴포넌트로 이동합니다. 1. install npm i react-router-dom //을 termanal 에서 작동 해준다. package.json에서 'react-router-dom'이 다운되어진것을 확인할수 있다. 2. import해주기 imp..

https://www.daleseo.com/js-node-process-env/#:~:text=process.env%20%EB%8A%94%20%EA%B0%80%EB%B3%80%20%EA%B0%9D%EC%B2%B4,%EB%98%90%EB%8A%94%20%EC%A0%9C%EA%B1%B0%ED%95%A0%20%EC%88%98%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4. Node.js에서 환경 변수 다루기 (process.env) Engineering Blog by Dale Seo www.daleseo.com 위의 글을 읽고 정리한 글입니다. 환경변수 란? 일반적으로 코드베이스는 하나만 관리하고 개발, 테스트 운영들은 여러환경에 어플리케이션을 배포 한다. 어느 환경에 배포하느냐 따라서..