이번 시간에는 Node.js기반의 Ajax 통신의 꽃 Axios를 배워보겠다 Node.js기반으로 움직이는 것들은 대부분 사용 가능하다고 생각한다 1. Axios Install 하기 npm install axios 2. Axios Import App.js에서 아래의 코드를 입력한다 import axios from 'axios' 3. 데이터 준비 아래의 링크에서, 간단하게 받아올 데이터를 준비한다 https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB As of D..
이번에는 Redux라는 것을 공부한다 React에서 꼭 필요한 거라고 보면 된다 Redux란, 데이터를 전달할 때, 하나하나 거쳐가지 않고 한 번에 전달하기 위해서 사용하는 것이다. 상태를 관리할 때, 다른컴포넌트를 전달할 때, props로 전달해야 했는데, 한 번에 전달할 수 있는 별도의 store라는 저장소에 저장해서 사용할 수 있다 예를 들면, 공공기관에 전화했는데, 〇〇부서로 전화 해보시겠어요? 그 〇〇부서 전화하면 또 부서에서 〇〇부서로 전화해 보세요 라고 하면 깊은 빡침이 생길 것이다. Redux를 쓰게 한다면 그런 뻉뺑이 없이 바로 전화통화가 가능하게 하는 좋은 일이 생긴다고 한다 1. Redux 설치 npm install react-redux 2. 실험대상인 component를 생성한다 T..
저번시간에 Component를 만들어 보았다. 근데 상위 Component에서, 하위 Component로 데이터를 보내고 싶었는데 보낼수가 없었다... 왜냐하면 함수가 다르기 때문이였다. 그래서 이번엔 props를 배워보았다. 저번시간에 내용은 이거시다. 일단 props를 이용해서 문자열을 하나 보내보자! 아래의 사진의 빨간색 네모안을 추가하였다 title이나 name이나 src나 저런 것들을 속성이라고 한다 React 도큐멘트에서도 저런식으로 쓰면 된다 카더라 저걸 보고 깨닫고 난 아래의 코드를 작성하였다 props의안에 title라는 속성이 담겨져 있다고 보면 된다 그리고 그걸 바로 변수에 담아서 jsx코드에 넣어 보았다 그러는순간 바로 간지나게 이렇게 되어버렸당 그렇다면 좀 더 응용을 해보자 데이터..
React는 Component기반이기 때문에 Component단위로 만들지 않으면 의미가 없다고 한다. 그러기 때문에 이번엔 Component를 배워본다 컴포넌트를 만들기 위해서, 기존에 있는 코드 중에 를 추가 하였다. 근데 피가 흘리게 된다. 왜냐하면 함수를 작성하지 않았기 때문이다 * React에서 컴포넌트를 만들 땐 무조건 반드시 맨 앞에 문자는 대문자를 하도록 하자 ex ) Createcomponent, TestComponent, Rrrrrr etc.. const TestComponent = () => { return ( 안녕 난 Component야 반가워 ) } 이런 식으로 추가하면, 아까 피가 흐르던걸 지혈할 수가 있다 그러면 이렇게 컴포넌트를 분리시켰고, 화면에 나타나게 해 보았다! 다음엔..
이번 시간에는 Ajax를 이용해서 댓글 수정을 해보겠다 일단 【수정】 버튼을 만들어 준다. 삭제도 나중에 추가할 거라서 【삭제】 버튼, 【취소】 버튼 등을 만들어 주도록 한다 {{ item.id }} 를 이용해서 class명을 고유하게 번호 ( reply의 Id )를 붙여 준다 ( 그래야 선택한 요소를 찾을 수 있음 ) onclick=함수에도 고유한 번호 ( reply의 Id )를 넘겨 주도록 한다 그리고 【진짜 수정】 버튼과 【취소】 버튼은 처음에는 안 보이도록 하게 한다 {% if item.member.id == session %} {% endif %} 이거 같은 경우는 게시판의 【수정】, 【삭제】, 【진짜 수정】, 【취소】와 다를 것이 없다 그리고, onclick에 있는 함수 이름 그대로 함수를 작..
이번 시간은 Django 게시판을 슬슬 마무리해보려고 한다 저번 시간엔 상세보기 화면에서 수정, 삭제가 있었는데 누구나 수정할 수 있고, 누구나 삭제할 수가 있다 그렇기 때문에 자기가 등록한 게시글을 수정, 삭제를 할 수 있고 다른 사람은 수정, 삭제를 못하게끔 한다 그래서 detail.html를 수정해보도록 하겠다 게시글을 등록한 사람의 ID와 로그인한 사람의 ID가 같은지 확인하는 조건문을 넣어준다 그리고 다른사람으로 로그인해보자 그러기 위해선 새로 회원등록을 해야겠다 로그인 화면에서 회원등록이라는 버튼을 만들어 주자 이번에는 a 태그로 붙여 보았다 그리고 화면으로 돌아와서 【회원등록】을 클릭해보자 클릭 화면 잘 이동한다. 여기서 되돌아가기 버튼이 없어서 허전한다 그거도 넣어줘야겠다 이번에는 java..
11강에서는 Django의 간단하게 게시판의 삭제기능을 만들도록 하겠다 이전 시간에 업데이트를 만들었는데 그화면을 잠시 보도록하자 【삭제】 버튼이 없으니 만들어주도록 하자! 이렇게 하면 삭제 버튼이 생기는데 클릭을 해도 아무소용이 없다. 왜냐하면 돈을 주지 않았 아니 코드를 넣어주지 않았 기 때문에, 그러므로 코드를 넣어주도록 하겠다 이번에는 공부를 위해 다른방법으로 하겠다 보통 a 태그를 이용해 href를 써서 하는데, 그런 예제는 너무 많다. 그러므로 새로운건 아니지만 다른방법으로 해보자 이렇게 input 태그에 【onclick】을 추가해준다. 클릭했을때 click 함수를 발생한다는 것이다 그 다음 deleteBoard() 라는 함수를 생성하자 ! 이 코드는 const deleteBoard = id ..
이번 시간에는 등록한 글을 수정 ( Update ) 하도록 해 보겠다 일단 상세페이지로 들어가서 끄적여보자 이전 시간까지 만든 모습을 보여주겠다 여기서 수정버튼이 없구나 추가 해준다 수정버튼을 생성했다 여기서 더 추가할 것이 있을텐데 일단 과정을 보기위해 하나씩 하겠다 수정을 눌렀을때 따로 페이지를 타지 않고, 같은 페이지에서 바로 할 수 있도록 한다 수정을 눌렀을때 readOnly를 풀어주는 Java Script코드를 작성하겠다 버튼 class명 btnUpdate인 아이를 추가 ( add ) 한다 이벤트 ( EventListener ) 를 무슨이벤트? 클릭 ( 'click' ) 이벤트를, 그리고 클릭했을 때의 함수 ( e => {} ) 를 넣는다 document.querySelector('.btnUpd..
