게시판 만들기는 정말 지겨워요...
하지만 게시판 만들기만큼 이것 저것 써보기에 적합한게 없으니깐 이번에는 Vue를 이용해서 게시판을 한 번 만들어보도록 하겠습니다.
내일 Vue로 게시판 만들기를 배우게 될 거 같은데 지금까지 배운 것만으로도 충분히 만들 수 있을 것만 같아서 한 번 시도해보고
안되면 접고 내일 배우면 되니깐요
저번 글에서 막혔던 CORS 해결부터 하도록 하겠습니다.
django cors로 검색을 하니 이런 라이브러리가 나옵니다.
다른 도메인이 제 리소스에 접근할 수 있게 만들어준다고 합니다.
바로 써보도록 하겠습니다.
https://pypi.org/project/django-cors-headers/
django-cors-headers
django-cors-headers is a Django application for handling the server headers required for Cross-Origin Resource Sharing (CORS).
pypi.org
예시로 나와있는 것들을 다 넣어주도록 합니다.
자 이제 다 넣어줬으니 CORS가 해결이 됐는지 확인을 해보도록 합니다.
바로 데이터들을 가져오는 것을 확인할 수 있습니다.
이렇게 간단하게 CORS를 해결할 수 있다니, 정말... django는 짱인것 같습니다.
이제 데이터들도 가져왔겟다 뿌려주기만 하면 되겠네요!!
자 그럼 게시판을 만들기 전에 게시판 레이아웃을 좀 쓰도록 하겠습니다.
심플한 게시판 nav가 만들어졌습니다.
홈키를 누르면 index화면이 나오게 만들고, 게시판을 누르면 게시글들의 목록이 나오게 만들어보겠습니다.
일단 메인화면입니다.
홈 키를 누르면 작동되는 router에는
HomeView 컴포넌트가 등록되어있는 걸 확인할 수 있습니다.
HomeView를 꾸며주도록 합시다.
메인 화면에는 고양이 사진이 나오면 좋겠습니다.
오늘 수업시간에 배운 고양이 api를 가져와 쓰도록 하겠습니다.
https://api.thecatapi.com/v1/images/search
이 곳에 get요청을 보내면 귀여운 고양이 사진을 줍니다. 바로 넣어보도록 하겠습니다.
인덱스에서만 사용할 고양이니 그냥 바로 methods 에 정의해주도록 하겠습니다.
이 HomeView에 정의를 해주도록 합시다.
axios로 고양이 사진을 가지고오고, 고양이 사진의 url을 data에 넣어주도록 합니다.
홈키가 불려질 때마다 작동을 해야하므로 created hooks에 메서드를 정의하도록 하겠습니다.
고양이 크기가 천차만별이라 매우 이쁘지 않습니다.
역시 디자인 감각이 와장창인 저는 그냥 원색에 글이나 박는게 더 낫겠습니다
그래도 허전하니 애니메이션정도는 넣어주도록 하겠습니다.
이게 차라리 낫네요
index에 fade in animation 넣는건 못참습니다. 무조건 넣어야합니다.
이런, css 하다가 시간이 다 가버렸습니다.
얼른 게시판 router 기능까지 넣어주도록 합시다
nav에서도 게시판으로 들어갈 수 있고 Go to Board 버튼을 눌러서도 들어갈 수 있습니다.
버튼을 누르면?
articles를 볼 수 있는 페이지로 잘 이동하는 걸 볼 수 있습니다.
색깔은 그냥 전체를 노란색으로 통일하는게 이쁘겠네요
저는 흰색에 분홍 초록 하늘색의 파스텔톤이 들어간 웹페이지를 만들고 싶지만 제가 만들면 촌스러워질게 뻔하기 때문에 참겠습니다...
디자이너 너무 필요해요 ㅠㅠ
자 그럼 일단 여기에 마지막으로 django에서 받아온 데이터들을 뿌려줘봅시다
ArticleListView에는 게시글 번호와 게시글 제목만 있는 ArticlePreview 컴포넌트들이 뿌려질겁니다.
ArticleListView에서 state에 담겨있는 articles를 가져와 v-for를 통해 하나씩 ArticlePreview에 넣어주도록 하겠습니다.
??????????
console.log에서 출력만 해주고 정작 state에 넣어주질 않았네요 얼른 넣어주도록 합시다.
actions에서 mutations을 호출하고 거기서 state값에 articles를 집어넣어 주었습니다.
이제 다시 articleListview에서 사용해보도록 합시다
computed에 this.$store.state.articleList를 반환하는 함수를 만들고 반복문을 돌려줍시다
요런 느낌으로다가 반복문으로 하나하나 쏴주면?
ArticlePreview에서 props로 받아주면 되는겁니다.
완벽합니다 이제 이것들을 다시 css를 적용시켜서 게시판처럼 만들어주면 되겠습니다.
그리고 각 게시글의 제목을 클릭하면 게시글의 Detail로 들어가주도록 하면 되겠네요
다음번에는 게시판을 눌러 detail로 들어가는 것을 해보도록 하겠습니다.