.then을 썼다고 기다려주는게 아니라 그 then 콜백 안에서만 데이터를 다룰 수 있다. then까지 다 기다려주길 원한다면 await을 써야한다..!! 프로미스를 리턴한 결과를 사용하고 싶다면 → resolve에서 넘겨준건 .then으로 받아서 쓰고, reject에서 넘겨준건 .catch에서 받아서 쓴다.
html, css, js, jquery cheatsheet 디자인 관련 아이콘 (font awesome) 무료 고화질 이미지 색깔 파레트 온라인 이미지 파일 수정 무료 폰트(구글 폰트) - 한글 있음 Lorem Ipsum 사이트 모음 (한글, 다국어) 기본으로 설정되어있는 css 다 없애기 누끼따기 간단하게 배경으로 쓸 수 있는 패턴 그래디언트 패턴 api 날씨 카카오 지도 영화 기타 툴 온라인 bash shell 작성 온라인 마크다운 작성 (동시에 여러명이서 실시간으로 작성 가능) 프로토타입 gitignore 만들기 정규식 테스트 코드 시각화 : 디버깅하는 과정과 비슷한데 데이터가 저장된걸 시각적으로 볼 수 있음 git 유용한 정보가 있는 깃허브 저장소 : star 찍어두시면 좋아요 면접 질문 프론트엔..
리액트 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..
