Ideveloper's software blog

FrontendSkills :loader | css 파일 - css loadercss를 import하면 더 편하게 관리컴포넌트 단위개발 시작, js,css 등등의 파일을 컴포넌트 단위로 모아서 개발하기 시작함 -> 통째로 import 하면 재사용성 증가 따라서 웹팩은 css를 import하자!라는 결론 (loader를 통해 css를 분석해서 js화, import 결과물이 js의 형태로 나옴) -> 로더의 역할 이기도 함. https://webpack.js.org/loaders/css-loader/#usage 참고 > css-loader적용시 file import 1.import css from './Hello.css'; 2.import './Hello.css'; loader안에 여러개 쓰면 배열, 하나만..

FrontEnd Skillsmobx 사용시 Decorating class property failed.~~ 에러 뜰때 해결방법 | 시작하기에 앞서 mobx 사용시, Error: Decorating class property failed. Please ensure that transform-class-properties is enabled. 와같은 에러가 뜰때 가있다. | 해결방법yarn add transform-class-propertiesbabelrc 파일 plugin 부분에 "transform-class-properties" 추가 { "presets": [ "next/babel" ], "plugins": [ "transform-decorators-legacy","transform-class-prope..

Frontend Skills:모듈, browserify, polyfill과 babel | 모듈 : model, module :라틴어 modulars에서 따왔으며, 어원이같다.js는 원래 전역객체만 있었다.ember, backbone.js 같은게 등장하면서 client 코드가 복잡해졌다. -> 모듈의 필요성 > 모듈의 전개과정 IIFE module pattern -> require.js (AMD) -> common.js / node -> import참고하면 좋을글 : JavaScript 표준을 위한 움직임: CommonJS와 AMDhttps://d2.naver.com/helloworld/12864> 모듈의 등장 js파일을 쪼개야하는경우가 있었다. 그럴땐, 각각의 스크립트를 일일히 다넣어줬다. ex) 문제점..

Frontend Skills:Babel 설치하기, 그리고 spread operator es5코드로 바꾸기 | Babel 전역적으로 설치 npm install babel-cli -g | spread operator가 사용된 코드를 es5 코드로 바꿀 js파일 생성 # script.js window.onload = function() { var btn = document.querySelector(".btn"); var obj = { test: 1, test: 1, test: 1 }; let code; btn.addEventListener("click", function() { alert("Hello world"); code=({ ...obj }); });}; | spread operator 관련 플러그인 설..

Frontend Skills-특정 뷰의 body에만 layout적용하기 >어떤 뷰파일에는 background를 입히고, 다른 나머지 뷰파일에는 적용하고 싶지않을때가 있습니다. 그럴때 유용한 방법입니다.! 아래와 같은 코드를 특정 뷰에다가 넣어줍니다.저는 ruby on rails로 프로젝트를 진행하고 있어 알맞은 .html.erb 파일에 위의 코드를 아래와 같이 넣어주었습니다.//이렇게 추가해줍니다. //아래는 기존코드 Are you in CAU-likelion? ​ 다음은 css파일에 추가할 코드입니다. body.login{ background: url('/assets/img/team-bg.jpg') no-repeat center center fixed; -webkit-background-size: co..

Frontend Skills - interval을 두고 글자가 바뀌는 효과 입히기example.html var text = ['a','b', 'c', 'd','e','f']; function callMe(){ var myText = document.getElementById('mytext'); var curIdx = text.indexOf(myText.innerHTML); myText.innerHTML = text[(curIdx+1)%text.length]; } setInterval(callMe,1000);example.js위와 같이 각각의 html파일,js파일에 넣어주면1초의 interval을 두고 div태그안의 텍스트가 바뀌는효과를 적용시킬수있습니다! >적용 예

Frontend skills- type writing 기능 이용하기 https://css-tricks.com/snippets/css/typewriter-effect/ 참고