function isKoreanFood(food) {
if (["불고기", "비빔밥", "떡볶이"].includes(food)) {
return true;
}
return false;
}
const food1 = isKoreanFood("불고기");
const food2 = isKoreanFood("파스타");
console.log(food1);
console.log(food2);const meal = {
한식: "불고기",
중식: "멘보샤",
일식: "초밥",
양식: "스테이크",
인도식: "카레"
};
const getMeal = (mealType) => {
return meal[mealType] || "굶기";
};
console.log(getMeal("중식"));
console.log(getMeal());
flexbox 는 중요한 3가지 개념이 있다.
flex는 container와 item으로 구분되며 각각 지정할 수 있는 속성이 정해져 있다.
| display | flex |
| flex-wrap | nowrap(한줄로 표현), wrap |
| flex-direction | 중심축 지정 : row(기본값, 수평), column(수직) |
| flex-flow | column nowrap 으로 지정가능 |
| justify-content | 중심축 아이템 배치 |
| align-items | 반대축 아이템 배치 |
| align-content | 반대축 justify-content와 비슷 nowrap일 경우 의미 없음 |
| order | 아이템 속성을 변경할 수 있음 |
| flex-grow | 화면사이즈 증가시 특정 아이템 가중치(0~1) |
| flex-shrink | 화면사이즈 감소시 특정 아이템 가중치(0~1) |
| flex-basis | 화면사이즈 변경시 아이템별 가중치를 퍼센트(%) 로 지정 |
| align-self | 컨테이너와 배치 상속하지 않고 아이템만 따로 설정 |
flxe-direction을 row 로 할 경우 중심축은 수평선 (파랑색) 이며 되며 반대축은 수직선이 된다.
flexl-direction을 column으로 하면 수직선이 중심축이 된다.
참고 : https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
| flex-start | 왼쪽에서 부터 정렬 |
| flex-end | 오른쪽에서 정렬 |
| space-around | 플렉스 요소는 앞, 뒤, 그리고 요소들 사이에도 모두 여유 공간을 두고 배치 (간격 1:2:2:2:1) |
| space-evenly | 플렉스 요소를 일정한 크기로 배치 (간격 1:1:1:1:1) |
| space-between | 플렉스 요소는 요소들 사이에만 여유 공간을 두고 배치됩니다. (간격 3:3:3) |
https://github.com/FortAwesome/vue-fontawesome
FortAwesome/vue-fontawesome
Font Awesome 5 Vue component. Contribute to FortAwesome/vue-fontawesome development by creating an account on GitHub.
github.com
위 링크를 참조하였음
NPM 으로 설치
$ npm i --save @fortawesome/fontawesome-svg-core
$ npm i --save @fortawesome/free-solid-svg-icons
$ npm i --save @fortawesome/vue-fontawesomevue /src/main.js 에서 설정
import { library as faLibrary } from '@fortawesome/fontawesome-svg-core'
import { faHome, faSearch, faPlus } from '@fortawesome/free-solid-svg-icons'
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
// Set up FontAwesome
faLibrary.add(faHome, faSearch, faPlus)
Vue.component('font-awesome-icon', FontAwesomeIcon)화면에서 사용
<font-awesome-icon icon="plus" />context/index.js
import React, { Component, createContext} from 'react'
const context = createContext()
const { Provider , Consumer: SimpleConsumer } = context
class TodoProvider extends Component {
state = {
idx: 0,
todos : [
{ idx: 0 , text:'test', checked : false }
]
}
actions = {
insert_todo : (value) => {
let new_idx = this.state.idx
new_idx++
this.setState({
idx: new_idx,
todos: [
...this.state.todos,
{
idx: new_idx,
text: value,
checked: false
}
]
})
},
delete_todo: (idx) => {
this.setState( {
...this.state,
todos: this.state.todos.filter((data) => data.idx !== idx)
})
},
toggle_todo: (idx) => {
this.setState( {
...this.state,
todos: this.state.todos.map( (data) => {
if(data.idx === idx){
data.checked = !data.checked
}
return data
})
})
}
}
render() {
const { state, actions } = this
const value = {state , actions }
return (
<Provider value={value}>
{this.props.children}
</Provider>
)
}
}
export {
TodoProvider, SimpleConsumer
}App.js
import React from 'react';
import { TodoProvider } from './context/index'
import TodoList from './components/TodoList'
import TodoInsert from './components/TodoInsert'
import './App.css';
function App() {
return (
<TodoProvider>
<div className="App">
<TodoList/>
<TodoInsert/>
</div>
</TodoProvider>
);
}
export default App;components/TodoInsert.js
import React, { Fragment, Component } from 'react'
import { SimpleConsumer } from '../context/index'
import styled from 'styled-components'
class Todo extends Component {
state = {
input : ''
}
handleChange = (e) => {
this.setState({
input: e.target.value
})
}
handleSave = (e) => {
this.props.setValue(this.state.input)
this.setState({input : ''})
}
handleUp = (e) => {
if(e.keyCode === 13){
this.handleSave()
}
}
render() {
return (
<Fragment>
<Input type="text" value={this.state.input}
onChange={this.handleChange}
onKeyDown={this.handleUp}>
</Input>
<button onClick={this.handleSave}>저장</button>
</Fragment>
)
}
}
const Input = styled.input`
margin-left: 20px;
width: 250px;
margin-right: 5px;
`
const SendsContainer = () => (
<SimpleConsumer>
{
({actions})=> (
<Todo setValue={actions.insert_todo}/>
)
}
</SimpleConsumer>
)
export default SendsContainercomponents/TodoList.js
import React from 'react'
import { SimpleConsumer } from '../context/index'
import styled from 'styled-components'
const list = () => {
return (
<ul>
<SimpleConsumer>
{
({state, actions}) => {
return state.todos.map(t =>
<Li key={t.idx}>
<Span done={t.checked ? true : false} onClick={ (e) =>
actions.toggle_todo(t.idx)
}>{t.text}</Span>
<Button onClick={ (e) =>
actions.delete_todo(t.idx)
}>삭제</Button>
</Li>
)
}
}
</SimpleConsumer>
</ul>
)
}
const Li = styled.li`
width: 280px;
position: relative;
margin: 3px;
`
const Span = styled.span`
text-decoration : ${props => props.done ? "line-through" : "none"};
cursor: pointer;
`
const Button = styled.button`
position: absolute;
right:0;
`
export default list
div 태그 안에 요소를 화면 정중앙에 배치시키는 방법
display: flex;
height: 100%;
justify-content: center;
align-items: center;
 |
 |
 |
myCalendar.zip