전체 글 (150) 썸네일형 리스트형 #0. Dummy text, dummy image 작성 방법 1. Dummy text만들기 1) html body 사이에 lorem 친 후 tab키 Lorem ipsum dolor sit amet consectetur, adipisicing elit. Reiciendis facere sit unde fuga quasi earum, autem error temporibus magnam molestias quisquam accusantium provident voluptatum, nemodolorem. Fugiat perspiciatis eum explicabo? 2) lorem5 입력후 tab치기 Lorem ipsum dolor sit amet consectetur. 여기서 숫자는 단어 개수. 이렇게 결과물 만들어줌. 2. Dummy Image 만들기 2.1 뒤의 .. 프로젝트 gh-page에 deploy하는 방법 페이지 설정하는 법 1. npm i gh-pages 2. package.json에 home page 추가 e.g. 3. npm run build 4. script에 "deploy":"gh-pages -d build" 추가. -d는 directory를 의미한다. 5. script에 "predeploy": "npm run build" 추가 6. npm run deploy 실행. 이게 보이면 제대로 실행된 것. Warning: Unknown DOM property class. Did you mean className? Since JSX is JavaScript, identifiers such as class and for are discouraged as XML attribute names. Instead, React DOM components expect DOM property names like className and htmlFor, respectively. 출처: https://stackoverflow.com/questions/30968113/warning-unknown-dom-property-class-did-you-mean-classname HTML 구성요소 https://webdir.tistory.com/category/%EC%9B%B9%EC%BD%94%EB%94%A9/HTML '웹코딩/HTML' 카테고리의 글 목록 개발자모드 ON, 부스터 디자인 webdir.tistory.com 정리가 무척 잘되어있다. 공부하기. # 4.0 Make a movie app # 4.0 Fetching Movies from API 자바스크립트에서 데이터를 가져오는 방법 1) fetch 2) axios 나는 axios를 사용할 것. YTS라는 불법 영화사이트가 있는데 얘네가 계속 링크를 바꿈. 그래서 니꼬쌤이 이걸 편하게 사용할 수 있도록 YTS-proxy라는 서비스를 만듦. https://github.com/serranoarevalo/yts-proxy ES6가 있기에 movies.data.data.movies라고 접근 할 필요 없다. 위와 같이 쓰자. #4.2 Styling the movies 스타일 주는 방법 1 -> 태그 안에 집어넣기 스타일 주는 방법 2 -> CSS file 만들기 # 3. State #3.2 Component life cycles 1. mounting constructor() : 클래스를 만들 때 자바스크립트에서 호출. rennder() componentDidMount():컴포넌트가 render 됐음을 알려줌. 2. update shouldComponentUpdate(): 기본적으로 업데이트를 할지 말지 결정하는 것. render(); componentDidUpdate() 3. unmounting Component가 죽는 경우 - Change page, replace component, .. componentWillUnmount() #3.3 Planning the Movie Component 매번 this.state.isLoading 하기 귀찮다. ES6의 어썸한 기능을 써보자. c.. React JS로 웹서비스 만들기 #2 JSX & Props #2.0 Creating your first React Component React는 모두 Component로 이루어져있다. Component란? html을 반환하는 함수이다. JSX : 자바스크립트 안의 html react로 부터 등장한 개념. 새로운 컴포넌트를 더해보자. BIG NO-NO JSX 특징 1. react application은 하나의 컴포넌트만 랜더링해야한다. 따라서 Potato는 App 안으로 넣어줘야한다. #2.1 Reusable Components with JSX + Props JSX 특징 2. Component에 정보를 보낼 수 있다. -> Reusable한 Component로 이용 가능! fav는 name이고 kimchi는 property이다. 전달 예제 *probs.fav와 {.. React JS로 웹서비스 만들기 #1 Setup #1.0 Creating your first React App 브라우저가 우리가 기깔나게 쓴 자바스크립트를 이해하게 만들려면, 슬프게도 이걸 브라우저가 이해하는 못난 자바스크립트로 바꿔줘야 한다. 그래서 쓰는게 Webpack과 Babel. 그 다음에 React 코드를 Compile 해야 한다. -> 이거 CRA(Create React App)으로 단순화 가능. 하나의 명령 실행해서 React Web App을 셋업해준다. 1. 설치 npx create-react-app movie_app 관련 문서: https://github.com/facebook/create-react-app facebook/create-react-app Set up a modern web app by running one command.. 이전 1 ··· 13 14 15 16 17 18 19 다음
