AI Platform / Web

React element에서 이벤트를 처리하는 방식과 DOM element에서 이벤트를 처리하는 방식을 비교하면서 알아보자. - React의 이벤트는 소문자 대신 camelCase를 사용한다 - JSX를 사용하여 문자열이 아닌 함수로 이벤트 핸들러를 전달한다. HTML Activate Lasers React Activate Lasers React에서는 false를 반환해도 기본 동작을 방지 할 수 없다. 반드시 preventDefault를 명시적으로 호출해야한다. 새 페이지를 여는 링크의 기본 동작을 방지하기는 코드를 비교해 보자 HTML Click me React function ActionLink() { function handleClick(e) { e.preventDefault(); console...

한가지 예를 들어보려 한다. https://developers.kakao.com/ Kakao Developers 카카오 API를 활용하여 다양한 어플리케이션을 개발해보세요. 카카오 로그인, 메시지 보내기, 친구 API, 인공지능 API 등을 제공합니다. developers.kakao.com 위의 사이트를 들어가서 확인을 해보면 어떻게 요청을 보내는지 알 수 있다. 메세지클릭 - rest API 클릭 - 프로필 받기를 보면 GET 방식으로 되어있고, 메세지클릭 - rest API 클릭 - 메세지 만들기를 보면 POST 방식으로 되어있다. REST API(Representational State Transfer) URL과 Method로 어떠한 표현을 하는 것이다. HTTP 프로토콜을 사용해서 요청과 응답을 ..

0.들어가면서 현재 장고 프로젝트 안에서 github에 올릴 시 설치한 파일을 다 올릴 필요 없이 나중에 필요한 사람이 로컬에서 받을 수 있도록 하면 된다. 그렇다면 우리는 github에 올리기 전에 파일을 다 지워야 하나? 그렇지 않다. .gitignore라는 파일을 만들어 올리지 말아야 할 폴더나 파일 이름을 적어주면된다. 그러나 하나씩 다 적을 필요 없이 아래의 사이트에 들어가서 사용하는 프레임워크를 검색하고 나오는 내용을 다 복사 후에 .gitignore에 넣어주면된다. 그리고 commit 하고 push 하면 된다. 명령어 정리 git log - git에서 커밋 내용을 보기위한 명령어는 git log이다. git log --oneline -3 - 최근 commit한 내용중 3개 보기 django ..

detail.html 삭제 urls.py path("/delete/", views.delete) views.py def delete(request, pk): article = Article.objects.get(pk=pk) article.delete() : 실제 쿼리메세지 return redirect('/articles/') 삭제 부분에 살을 붙여서 적용해보자. a태그 부분을 위에서는 GET으로 했다. 그러나 delete는 DB를 삭제하는것이니 POST하자. 이때 POST는 a태그로는 불가능 하고 form으로만 가능하다. 따라서 form으로 변경 문제발생)POST로 보내기만 하면 url을 통해서 GET요청으로 /3/delete/를 하면 3번글이 지워진다. GET일 때는 안지워지게 해야한다. view.py..

React 컴포넌트 안의 state와 생명주기 개념을 알아보고 캡슐화를 해보자. 아래의 예시는 ReactDOM.render()를 사용하여 렌더링 된 출력값을 변경하는 것을 알아보았다. function tick() { const element = ( Hello, world! It is {new Date().toLocaleTimeString()}. ); ReactDOM.render( element, document.getElementById('root') ); } setInterval(tick, 1000); 위의 코드를 캡슐화 해보자 function Clock(props) { return ( Hello, world! It is {props.date.toLocaleTimeString()}. ); } funct..

컴포넌트를 사용해서 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴보자. 함수 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 객체 인자(props)를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이 컴포넌트는 JavaScript 함수이므로 '함수 컴포넌트'라 한다. 클래스 컴포넌트(ES6 class) class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } React의..

element -element는 React 앱의 가장 작은 단위이다. - element는 화면에 표시할 내용을 기술한다. - 브라우저의 DOM 엘리먼트와 달리 리엑트 엘리먼트는 일반 개체이다. - 리액트 DOM은 리액트 엘리먼트와 일치하도록 DOM을 최신화 한다. const element = Hello, world; + 컴포넌트와 엘리먼트는 다른 개념이다. 엘리먼트는 컴포넌트의 구성요소라고 생각하면 된다. DOM에 엘리먼트 렌더링 하기 예시로 HTML 안에 가 아래와 같이 있다고 해보자 우리는 위의 div 태그를 “root” DOM node 라고 부른다. 왜냐하면 div 안의 모든 것들이 react DOM으로 관리 되기 떄문이다. 보통 리액트로 만들어지는 어플리케이션은 하나의 root DOM node를가..

0.들어가면서 기초 부분에서는 GET방식의 /article/pk/edit/로 수정 form을 보여주고 GET방식의 /article/pk/update/로 url을 바꾸는 방식으로 DB로 저장을 할것이다. 하지만 최종코드부분에서는 url은 같지만 DB저장 부분을 POST로 바꿔서 할것이다. update 기초 수정하기를 누르면 기존의 게시물을 수정할 수 있는게 뜨고, 수정완료를 누르면 저장하는 로직을 만들어야한다. detail.html 수정 :을 누르면 form을 보여주게우선하자. urls.py path("/edit/", views.edit) views.py def edit(request, pk): context = { 'pk' : pk } return render(request, 'article/edit.h..