JavaScript 썸네일형 리스트형 Naver ESLint 적용 프로젝트를 총 세명이 진행하다보니, 다들 코드 스타일이 달랐다. 코드의 품질을 높이고, 좋은 코딩 스타일을 익히기 위해 eslint를 프로젝트에 적용하기로 했다. https://github.com/naver/eslint-config-naver naver/eslint-config-naver Naver JavaScript Coding Conventions rules for eslint - naver/eslint-config-naver github.com eslint 는 Airbnb를 기반으로 한 naver eslint를 적용하기로 하였다. # 적용 순서 1. 프로젝트에 eslint를 설치한다. yarn add eslint -D 2. 설치가 완료되었다면, IDE(phpstorm 사용)에 eslint를 설정한다.. Refused to apply style from 'http://localhost:8080/video/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. 클로버 동영상 기능 개발 중 http://localhost:8080/video/1 다음과 같이 접근 했을 경우 이러한 에러가 발생하였다. Refused to apply style from 'http://localhost:8080/video/style.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled. index.html에 를 추가 함으로써 해결했다. 원인도 모르고 왜 이렇게 해야되는지도 모른다 > VELOPERT 리액트 강의 강좌 목록 https://velopert.com/reactjs-tutorials [React.JS] 강좌 목록 | VELOPERT.LOG velopert.com 앞으로의 공부 방향 https://velopert.com/3642 누구든지 하는 리액트 10편: 앞으로의 공부 방향 | VELOPERT.LOG 이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요. 리액트는 따지고보면 정말 간단한 라이브러리입니다. 지금까지 공부해본것들을 요약해보자면.. 재사용 가능한 컴포넌트를 만듭니다. props 는 부모에게서 전달받는 값입니다. state 는 자기 자신이 지니고 있는 데이터입니다. props 나 state 가 바뀌면 컴포넌트는 리렌더링 합니다. LifeCycle AP.. 불변성 우리가 sameArray = array 를 했다고 해서 기존에 있던 배열이 복사되는것이 아니라 똑같은 배열을 가르키고 있는 레퍼런스가 하나 만들어진 것이기 때문에, 우리가 sameArray 에 push 를 하게 된다고 해서 array 와 sameArray 가 달라지지 않는다. const array = [1,2,3,4]; const sameArray = array; sameArray.push(5); console.log(array !== sameArray); // false 하지만, 우리가 불변성을 유지하려면 아래와 같이 작성해야 된다. const array = [1,2,3,4]; const differentArray = [...array, 5]; // 혹은 = array.concat(5) console... You may need an appropriate loader to handle this file type. webpack.config.development.js를 작성할 때까지만 해도 아래 에러가 안났는데, webpack.config.production.js을 작성한 후 빌드하니깐 다음과 같은 에러가 났다 ㅎ.. ERROR in ./src/index.js 8:4 Module parse failed: Unexpected token (8:4) You may need an appropriate loader to handle this file type. | const render = Component => | ReactDOM.render( > | | , @ multi (webpack)-dev-server/client?http://localhost:8080 ./src main[1] 분명 webpack.config.pr.. webpack 설정 깊이 있는 리액트 개발 환경 구축하기 https://sujinlee.me/webpack-react-tutorial/ [번역] 깊이 있는 리액트 개발 환경 구축하기 브라질 출신 풀스택 개발자인 에수 실바(Esau Silva)의 How to use Webpack with React: an in-depth tutorial 튜토리얼을 번역한 글이다. 리액트에 익숙한 경험자를 대상으로 웹팩(webpack)과 바벨(babel)을 사용해 리액트 개발 환경을 만드는 과정을 소개한다. 완성된 코드는 react-starter-boilerplate-hmr에서 확인할 수 있다. 리액트 라우터(React Router), 핫 모듈 sujinlee.me 웹팩 입문: HTML, CSS 사용하기 https://medium.com/@s.. Object.entries() Object.entries()메서드는 for...in와 같은 순서로 주어진 객체 자체의 enumerable 속성 [key, value] 쌍의 배열을 반환한다. (for-in 루프가 다른 점은 프로토 타입 체인의 속성도 열거한다는 점이다.) const object2 = { 0: 'a', 1: 'b', 2: 'c' }; console.log(Object.entries(object2)[2]); // expected output: Array ["2", "c"] 고수의 코드를 염탐하다 Object.entries()를 신기하게 활용하는 코드조각을 보았다. * 예시 const temp = { fn1(event) { console.log("fn1테스트 입니다."); }, fn2(event) { console.log(".. 자바스크립트 비동기 처리와 콜백함수 비동기 처리 자바스크립트의 비동기 처리란 특정 코드의 연산이 끝날 때까지 코드의 실행을 멈추지 않고 다음 코드를 먼저 실행하는 자바스크립트의 특성을 의미한다. 비동기 처리의 첫번째 사례 비동기 처리의 가장 흔한 사례는 제이쿼리의 ajax이다. 제이쿼리로 실제 웹 서비스를 개발할 때 ajax 통신을 빼놓을 수가 없다. 보통 화면에 표시할 이미지나 데이터를 서버에서 불러와 표시해야 하는데 이때 ajax 통신으로 해당 데이터를 서버로부터 가져올 수 있기 때문이다. function getData() { var tableData; $.get('https://domain.com/products/1', function (response) { tableData = response; }); return tableData.. 이전 1 ··· 8 9 10 11 12 다음
