리액트 life cycle 컴포넌트가 마운팅될 때 : constructor( ) → render( ) → componentDidMount( ) 컴포넌트가 업데이트 될 때 : setState( ) → render( ) → componentDidUpdate( ) 컴포넌트 unmounting : componentWillUnmount( ) render( )도 life cycle 함수다..! 리액트 스타일 인라인 스타일 css 파일 만들어서 import github pages 배포.. npm i gh-pages package.json에서 "homepage" : "https://github_user_name.github.io/저장소_이름" npm run build 하면 build 폴더 생김 scripts에 추가 "..
비동기, fetch 외부 데이터를 가져오는 것은 비동기 → 싱글스레드기 때문에 서버를 가져오는 동안에 클라이언트가 멈춰있을 수 없어서 기초 세팅은 constructor에서 하지만, fetch를 constructor에서 한다면 기다리지 않고 render를 하겠지.. 그래서 비동기적인 일을 할 때는 didMount에서 해주기 초기 데이터가 없을 때 넘겨주는 props가 undefined인 문제 해결 데이터 초기화 레퍼런스 런코 React Async Handling 동영상 https://tinyurl.com/yxeqdmag https://tinyurl.com/yda5np3g https://tinyurl.com/yxgprsdo 인프런 생활코딩 리액트 input, textarea 태그의 디폴트 값을 넣고 싶으면 ..
리액트 공부 : 인프런 생활코딩 컴포넌트로 구성 가독성, 재사용성, 유지보수가 좋다 파일을 수정할 때마다 자동으로 리로드 됨 create react app npx create-react-app my-app cd my-app npm start npx를 이용하면 잠깐 create-react-app을 설치하고 바로 지움 → 그래서 항상 최신버전 index.html에 있는 에 App.js 컴포넌트를 넣어 랜더링한다. ReactDOM.render(, document.getElementById('root')); 배포하는 방법 npm run build → build라는 폴더가 생김 → 이 폴더 안에 있는 파일들을 배포해야한다. npx serve -s build 우리가 만든 build 폴더를 루트로 해서 server를..
서버-클라이언트 모델 클라이언트가 서버에게 요청하고, 서버는 요청에 응답한다. stateless : 서버는 응답을 하고 연결을 바로 끊기 때문에 다음 요청을 받을 때는 이전의 상황을 알 수 없다. AJAX 브라우저에서는 새로 요청을 보내서 정보를 받아오고, 이걸 화면에 보여주려면 새로고침이 되어야 한다. 그런데 AJAX를 사용하면 화면을 새로고침 하지 않고, 원하는 부분만 변경해 줄 수 있다. 일부분만 변경되기 때문에 속도도 빠르고, 새로고침시 발생하는 깜빡임도 없어서 보기에도 좋다. API a publicly available web-based API that returns data, likely in JSON or XML”. The API is not the database or even the se..
Bracket Pair Colorizer : 괄호를 중첩해서 사용할 때 색깔로 구분이 잘되게 해줌. JavaScript (ES6) code snippets : 축약한 키워드를 사용해 코드 자동완성 해줌 예를들어서 fre를 입력하면 array.forEach(currentItem => {})로 바꿀 수 있다. clg는 console log console.log(object) Live Server : 로컬 서버를 띄워서 html 파일을 볼 수 있다. 코드를 수정해서 저장하면 바로 html에서 새로고침이 된다. 새로고침 안해도 바로 바로 바뀐걸 확인할 수 있어서 편하다. Material Theme : vscode의 테마를 바꿀 수 있다. Prettier : 코드를 이쁘게 만들어 준다. 끝에 세미콜론을 붙여준다던..
ES6 class 와 extends, super 키워드 MDN (https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Statements/class) ES6에서 클래스를 정의할 때는 class 키워드를 사용한다. 보통 클래스 이름의 첫글자를 대문자로 쓴다. - constructor는 옵션이다. 123456789class Phone { constructor(brand){ this.brand = brand; } sendMsg(msg){ console.log(msg); }}cs 객체의 인스턴스를 생성할 때는 new 키워드를 사용한다. 123var iphone = new Phone("apple");console.log(iphone.brand); // a..
ESlint → 내가 세세한 스타일 규칙 정하는 것 설치 npm install eslint --save-dev 세부 설정을하기 위해 JSON 형식의 .eslintrc.json 파일을 만든다. "extends": "eslint:recommended" → 추천하는 여러 rules가 설정되어있는걸 사용 Configuring ESLint eslint/eslint env key는 global variables 설정할 때 사용 → https://eslint.org/docs/user-guide/configuring#specifying-environments 주석 사용해서 특정 라인은 규칙이 적용되지 않게 하기 1 2 3 /* eslint-disable */ alert('foo'); /* eslint-enable */..
git remote git remote를 이용하면 다른 저장소로부터 merge하거나 pull 할 수 있다. 내가 fork했던 저장소를 원래 저장소의 최신 버전으로 동기화하고 싶을 때 사용 할 수 있고(참고), 코드스테이츠에서는 페어프로그래밍을 할 때 사용한다. 두 사람이 하나의 저장소를 사용하는게 아니라 각자 저장소가 따로 있고, 서로의 저장소를 pull해서 동기화한다. 먼저 동기화하고 싶은 remote 저장소를 추가한다. $ git remote add 리모트_이름 저장소_url 등록됐는지 확인 $ git remote -v 상대방이 로컬에서 작업을 하고 내 저장소의 master(또는 브랜치)로 커밋/푸시한다. 그 후에 내가 pull을 해서 최신으로 동기화한다. $ git pull 리모트_이름 master..
