document.hidden 현재 탭이 활성상태인지(보이는지) 체크하는 속성값이다. 위 코드를 console창에 입력하고 해당 브라우저에서 탭을 새로 만들어서 왔다리 갔다리 해보면 log에 true -> false -> true 이런식으로 찍히는걸 볼 수 있다. parseInt parsetInt(string, radix) 두번째 인자인 radix는 해당 string을 몇진수로 해석할건지를 의미한다. parseInt 함수는 특정 radix(진수)값에 따라 문자열 아규먼트 내용의 해석을 하고, 그 영향을 받은 정수 값을 […]
Archives: 프론트엔드
설치하기 설정파일 만들기 프로젝트 폴더의 최상위 위치에 .eslintrc.js 파일을 생성해준다. .eslintrc.js 심플예제 “semi”: [“error”, “always”] : 세미콜론은 항상 써줘야 하고, 안쓰면 에러를 내뿜는다 “quotes”: [“error”, “double”] : 따움표는 큰따움표를 써줘야하고, 안쓰면 에러를 내뿜는다 에러의 단계 off “semi” : [“off”, “always”] : semi콜론을 항상 붙여야 하는 규칙을 꺼버린다. 다시말해 규칙을 안지켜도됨. 안지켜도 되는 규칙을 굳이 추가해서 […]
ESLint ESLint에 관한 설명은 ESLint 사용법(1) 과 ESLint 사용법(2) 를 참고하시길 바랍니다. Webpack (1) Webpack 설정파일의 개괄적인 설명은 Webpack4 설정 을 참고해 주시고, (2) 이 프로젝트에 사용된 다양한 플러그인들이 어떤 역할을 하는지는 이전글을 참고해주시기 바랍니다. 마지막으로 이 프로젝트에 적용된 Code Spliting 에 관련된 내용은 이글을 참고해 주시기 바랍니다. 다만, 위의 코드들은 4년전 코드고 현재는 안쓰는 […]
chvin/react-tetris는 만들어진지 벌써 4년이 넘었다. 그래서 여기에 사용된 플러그인/기술들중 현재 안쓰는것들이 많다. 하지만, 남이쓴 코드니까 제대로 분석하려면 어떤 플러그인들이 사용되었는지 그 재료들을 살펴볼 필요성을 느낀다. 사용되는 재료들 autoprefixer 자동으로 브라우저 전용 CSS접두어를 붙여준다. 예를들어서 내가 border-radius: 10px; 으로 CSS를 작성하면 위와같이 모든 브라우저에서 border-radius가 잘 적용되도록 접두어를 자동으로 붙여준다. babel-core 여기 참고 Babel은 (예를들어) ES6문법으로 […]
차이점 package.json에 다르게 반영된다 –save-dev는 devDependencies 항목에들어가고 –save는 dependencies 항목에 들어간다. 그리고 나중에 빌드할때 나오는 결과물 코드에는 dependencies 항목에 기재된 라이브러리들만 포함된다. devDependencies 에 해당되는 라이브러리들은 그냥 개발할때만 쓰는 것들만 들어간다. 예를들면, [Babel, Webpack, Typescript, Nodemon] 같은것들. 공통점 node_modules폴더에 들어간다 어쨋든 라이브러리는 써야하니까 node_modules폴더에 해당 라이브러리가 다운로드된다. 기타 npm install bootstrap3 와 npm install –save […]
Story 버튼을 누른다 서버에 POST메세지를 보내서 포인트를 체크한다 201을 응답받았으면 e.currentTarget에 접근한다 원인 this.checkPoint()를 지우면 잘 작동하는데, 저게 있으면 제대로 작동하지 않는다. 내 생각에는 비동기 통신을 하는동안 브라우저가 기다려야 하는데, 그 사이에 저 e가 가리키는 대상이 DOM에 계속 있으리란 보장이 없으니까 저렇게 쓰지 말라는 의미같다. 해결방안 this.checkPoint()를 더 아래쪽에서 사용한다.
React프로젝트를 Webpack으로 빌드할때 Killed error Command failed with exit code 137 이런 에러가 떴다. 구글링 해보니, RAM 용량이 부족해서 일어난 문제였다. 참고 https://github.com/nimiq-network/core/issues/295
왜 필요하지? js파일에 포함된 css코드들을 하나의 파일로 만들어준다. 다시 말하면, 보통 css-loader를 사용해서 css코드를 javascript string으로 읽고 그 string을 style-loader가 <style>태그 안에 넣는데, MiniCSSExtractPlugin은 css-loader를 써서 받은 css코드를 파일로 추출해낸다. 그래서 결국 하나의 css파일을 만들어준다. 설치방법 webpack.config.js 자세한 부분은 공식 사이트를 참고해주시기 바랍니다 😀