본문 바로가기

프론트엔드 공부

 (134)
vue create createapp CLI (comand line interface: 터미널을 통해 프로젝트진행) npm i -g @vue/cli (view cli를 전역설치) cd라는 명령어를 통해 vue3-test를 열어주고 npm run serve 라는 명령어로 열수 있다는 의미 설치 진행후 폴더내 ***package.json - "scripts" -"serve"(개발서버오픈)는 "dev"와 동일 -"build"(제품화과정 -"lint"(규칙에 맞게 확인) ***폴더 1.public > index.html 에 #root main.js에 연결 2.src > main.js import { createApp } from 'vue' //create-vew 연결 import App from './App.vue' //app.view import..
codepen에서 cdn으로 연습하기 //html 상단에 cdn 추가 {{message}} Vue.createApp({ data(){ return{ //반응성 message:'hello view' } } }).mount('#app')
npx create-react-app npx (npm 5.2.0이상부터 함께 설치된 커멘드라인 명령어) =>최신버전 라이브러리를 실행해줌 커맨드창에 npx create-react-app 폴더명 입력후 cd 폴더명 package.json에 dependencies에서 설치내역 확인가능 (react-scripts 가 실제 create-react-app의 라이브러리, @texting-library는 테스팅시 사용, web-vitals: 구글에서 사이트 경험 측정및 개선) "scripts" 가 직접적인 명령어 npm start > react script 시작, development server 시작 npm run build > react script build, optimized production build 생성 npm install serve -..
componentDidCatch(error,info) componentDidCatch(error,info)는 자기자신에게 문제가 있을때는 캐치가 되지 않는다. 이 때문에 에러바운더리 라이브러리를 설치후 그 하위에 서비스 컴퍼넌트에서 확인시 사용하는 경우가 많다 https://ko.reactjs.org/docs/error-boundaries.html#gatsby-focus-wrapper
component 라이프사이클 변경(v16.3이후) component 라이프사이클 변경(v16.3이후) getDerivedStateFromProps(shouldComponentUpdate >render>getSnapshotBeforeUpdate>componentDidUpdate -state( shouldComponentUpdate>render > getSnapshotBeforeUpdate(dom에적용 직전)>componentDidUpdate componentDidUpdate componentWillUnmount
react component lifycycle (16.3ver이전) react component lifecycle : 탄생에서 죽음까지 여러지점에서 개발자가 작업가능하도록 메서드 오버라이딩 ***declarative(lifecycle을 선언적으로 표현해 이를 사용) 1.initilization //constructor가불리고 props와 state 세팅 2.mounting //componentWillmount > render > componentDidmount 3.Updation(props,state 변경 ) -props(componentWillRecieveProps 추가만 state와 다른점) //componentWillRecieveProps>shouldComponentUpdate>comonentWillUpdate>render>componentDidUpdate -sta..
이벤트적용(함수형,class) 1.class로 event 발생시키기
객체형state,constructor형 state/setState 두가지방법 class Component extends React.Component{ //1.객체형 state // state = { // count : 0, // }; //2.contructor 형 state constructor(props){ super(props); this.state = {count:0}; } render(){ return ( {this.props.message}이것은 클래스로 만든 컴퍼넌트! {this.state.count} ); } //라이프사이클 훅 맛보기 componentDidMount(){ setTimeout(()=>{ //this.state.count = this.state.count +1; //state변경해주는 함수실행,React.Component에 이미구현 //1.setStat..

티스토리툴바