Ideveloper's software blog

CSS: 쉽게 가운데로 수직 정렬하기 | 시작하기에 앞서 종종, 요소들을 가운데로 수직정렬해야 할때가 있다. 그때 사용할수 있는 css tip이 있다. | 정렬하는법 가운데 수직 정렬을 하려면 아래와 같이해주면 깔끔하게 요소들이 수직 정렬된다. display: inline-block; vertical-align: middle; height: 100%; https://stackoverflow.com/questions/7273338/how-to-vertically-align-an-image-inside-a-div위의 링크를 참고해보면, 위와 같이 수직정렬하는것이 크로스 브라우징 이슈도 해결하고 best practice라고 나와있다.자주 애용해도 좋을 것 같다!> 예제http://jsfiddle.net/kiz..

css :선택자(selector) | 부모 자식 선택자 1. 모든 자식에게 적용 ( ul 밑의 모든 li 에게 css 적용)ul li{ }2. 직계 자손에만 적용 ( id가 example인것 바로 아래 li에만 적용)#example > li{ } 3. 모두에게 적용 (ul태그와 ol 모두에 적용)ul,ol { }[예제] 1, 2, 3 사용된 예제 코드 // ul 밑의 모든 li 에 적용 ul li{ color:red; } // #lecture밑의 직계자손 li에만 적용 #lecture>li{ border:1px solid red; //color: blue; 더 많은 pseduo class selector참고링크: https://developer.mozilla.org/ko/docs/Web/CSS/Pseud..

React :페이지 스크롤 후 특정시점에 액션 실행시키는 방법, 특정 컴포넌트의 브라우저 위치에 따라 특정 액션 실행시키는 방법 | 시작하기에 앞서스크롤시에, 특정시점 (1. 웹 페이지를 특정영역만큼 스크롤 했을때 2. 컴포넌트가 브라우저상에서 특정 위치에 위치해 있을때)에 navbar의 css 클래스를 변경시켜줘서 기본 display none인 nav bar를 css를 업데이트 시켜줘서 상단에 보이게하는등과 같이 구현할때 활용하면 좋은 예제이다.1. 웹페이지를 특정역역만큼 스크롤했을때는 compononentDidMount에서 스크롤 이벤트를 등록하고, onScroll 메소드를 활용해서 state를 스크롤할때마다 업데이트하여 이를 활용하는 방식으로 기능을 구현하면 된다.2.컴포넌트가 브라우저 상에서 특정..

React:svg 파일 컴포넌트로 만들어서 스타일링 하기 | 시작하기에 앞서 리액트로 개발을 하다보면, svg파일을 좀더 확장성 있게 사용하기 위해 부모컴포넌트에서 받아온 props에 따라 조건부 렌더링 (ex: 다른 배경색)을 해주고 싶을때가 있다. 각각의 svg파일을 색만 다를 뿐인데 파일을 여러개 만들어 import하면 비효율적이기 떄문이다. 따라서 아래와 같이 확장성 있게, svg 컴포넌트를 만들어 배경색만 props에 따라 바꿔주면 디자인 리소스도 줄어들게 될것이다. (ex) svg 파일을 넘어온 props에 따라서, 배경색이 다르게 보여주고 싶을때 | 해결방법 그럴때는 간단히 svg파일을 리액트 컴포넌트로 export 해주기만 하면 되고, 이러한 컴포넌트를 import 하고, 이 컴포넌트에 클..

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..

React:create-react-app 에서 mobx 사용하는방법(+오류해결) | 순서create-react-app으로리액트 프로젝트를 만든다.yarn eject로 eject를 한다.npm install --save mobx mobx-react컴포넌트 구성#App.js import React, {Component} from 'react'; import {observer} from 'mobx-react';import Devtools from "mobx-react-devtools"; @observer class App extends Component { render() { return ( Counter{this.props.store.count} + - ) } handleDec=()=>{ this.props..

Webpack:Webpack 0부터 CRA 까지 | 웹팩 사용전번들러 (browserify)reload (browser sync)transform (babel, babelify(browserify 와 연결))| 웹팩 사용후번들러 (webpack)reload (webpack dev server)transform (babel-loader)웹팩이 cache를 사용해 속도를 향상 시킴.hot module: 바뀐 위치에 다른 모듈을 끼어넣음module: 모든것이 모듈이다. browserify (오직 js 빌드) 웹팩(모든 파일을 빌드) | 바벨6->바벨7babel-preset-env -> @babel/preset-env.babelrc-> babel.config.js | 웹팩3->웹팩4webpack-dev-serv..