Skip to content

Instantly share code, notes, and snippets.

View johnnykoo84's full-sized avatar

Johnny Ilmo Koo johnnykoo84

21 followers · 6 following
View GitHub Profile
@johnnykoo84
johnnykoo84 / Change Current Category
Created April 17, 2019 14:53
changeCurrentCategory = userSelectedCategory => {
const { allArticles } = this.state;
const category = this.categories.find(category => category.name === userSelectedCategory);
this.setState({
currentCategory: category.name,
currentArticles: allArticles
.filter(post => post.UserId === category.id)
.slice(0, this.articlesPerPage),
currentPage: 1
@johnnykoo84
johnnykoo84 / tab component
Created April 17, 2019 14:53
const Tabs = props => {
const { categories, currentCategory } = props;
return (
<>
<ul className="nav nav-pills nav-justified">
{categories.map(category => {
let btnClassName;
category.name === currentCategory
@johnnykoo84
johnnykoo84 / constructor
Created April 17, 2019 14:52
constructor(props) {
super(props);
this.state = {
allArticles: [],
currentCategory: '정치',
currentArticles: [],
currentPage: 1,
};
this.articlesPerPage = 5;
this.categories = [
@johnnykoo84
johnnykoo84 / get articles
Created April 17, 2019 14:51
componentDidMount = async () => {
const articlesData = await axios.get('https://koreanjson.com/posts');
const allArticles = articlesData.data;
this.setState({
allArticles,
currentArticles: allArticles
.filter(article => article.UserId === 1) // UserId 1이 정치 카테고리라고 가정합니다
.slice(0, this.articlesPerPage)
})
@johnnykoo84
johnnykoo84 / App.js
Created April 17, 2019 14:51
constructor(props) {
super(props);
this.state = {
allArticles: [],
currentCategory: '정치',
currentArticles: [],
currentPage: 1,
};
this.articlesPerPage = 5;
}
@johnnykoo84
johnnykoo84 / render
Created April 17, 2019 14:50
render() {
return (
<div className="App">
<Tabs />
<Articles />
<Button />
</div>
)
}
@johnnykoo84
johnnykoo84 / koreanjs 응답 예시
Created April 17, 2019 14:49
[
{
id: 1,
title: "대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다.",
content: "주거에 대한 압수나 수색을 할 때에는 검사의 신청에 의하여 법관이 발부한 영장을 제시하여야 한다. 대한민국은 국제평화의 유지에 노력하고 침략적 전쟁을 부인한다. 국가유공자·상이군경 및 전몰군경의 유가족은 법률이 정하는 바에 의하여 우선적으로 근로의 기회를 부여받는다. 여자의 근로는 특별한 보호를 받으며, 고용·임금 및 근로조건에 있어서 부당한 차별을 받지 아니한다. 모든 국민은 주거의 자유를 침해받지 아니한다.",
createdAt: "2019-02-24T16:17:47.000Z",
updatedAt: "2019-02-24T16:17:47.000Z",
UserId: 1
},
{
@johnnykoo84
johnnykoo84 / App.css
Created April 17, 2019 14:48
.App {
width: 500px;
margin: 5px auto 5px;
}
@johnnykoo84
johnnykoo84 / App.js
Created April 17, 2019 14:47
import React, { Component } from 'react';
import './App.css';
class App extends Component {
render() {
return <div className="App">Hello World</div>;
}
}
export default App;
@johnnykoo84
johnnykoo84 / index.html
Created April 17, 2019 14:45
<head>
<link
rel="stylesheet"
href="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css"
integrity="sha384-GJzZqFGwb1QTTN6wy59ffF1BuGJpLSa9DkKMp0DgiMDm4iYMj70gZWKYbI706tWS"
crossorigin="anonymous"
/>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous">