내가 기억하려고 만든

클래스형 컴포넌트의 구조 앞서 살펴본 리액트의 클래스 컴포넌트의 구조를 정리해보면 아래와 같다. 클래스는 React.Component를 상속하고 constructor를 비롯한 LifeCycle관련 함수 정의하고 eventHandler들을 정의한후 반환할 JSX태그들을 렌더하기. 이렇게 모양은 생겼지만 언제 생겨나서 언제 수정되고 인터렉션에 따라 사라지기까지 하는 컴포넌트의 생애에 대해서 잘 알아야 계속 변하는 컴포넌트들을 제대로 활용할 수 있으므로 알아보자. 컴포넌트의 Life Cycle 간단히 말하자면 위 그림과 같다. 크게 3단계로 생성될 때, 업데이트 할 때,제거할 때로 나뉘어 그때마다 자동으로 호출할 수 있는 함수가 있는 것이다. 자세히 말하자면 각 단계에서 왼쪽과 같이 호출하는 함수가 더 많다...

이벤트란 간단히 웹 상에서 일어나는 모든 행위를 말합니다. 버튼을 누른다든지,무언가를 입력한다든지 등등을 통해 인터랙션을 발생시키는 이벤트! 크롬의 Inspect>sources에서 EventListener Breakpoint로 확인할수 있지~! 이런 이벤트가 발생하는것을 듣기 위해서는 이벤트 리스너를 두고 이벤트 발생시 리스너가 이를 알아차리면 다음 인터랙션이 일어나도록 이벤트 핸들링을 만든다. 이벤트 리스너는 On+(이벤트행위이름)이런식으로 만든다. 다음은 간단한 자바스크립트 문법만으로 EventListener를 사용하는 예제이다. document에 onclick()리스너를 부착해 아무데나 클릭할 시 "DOCUMENT CLICKED"가 출력되게 하였고, 동영상을 getElementsByTagName()..

컴포넌트를 만들기 위한 가장 중요한 요소 Props와 State Props와 State를 설명하는데 위같은 그림이 적절한것 같다. state는 일종의 컴포넌트가 가지고 있는 정보의 집합이다. props를 통해 하위 컴포넌트로 정보를 넘길 수 있다. state는 모든 컴포넌트에 있는 것은 아니고 없는 컴포넌트도 있다. 역으로 생각하면 props는 state의 정보를 전달하는 역할이고!props의 특징은read only.즉, 상위의 컴포넌트에서 온 변화를 아래의 컴포넌트에서 바꿀 수 없다. 이것때문에 state와 props를 따로 저장하는일이 필요하다. Props props는 각 컴포넌트들간을 이동해 데이터를 전달하는 수단이다.read only라는 특징을 가지고 있다. 본격적으로 코드를 작성하며 알아보자. ..

React란 React는 페이스북에서 만든 웹프레임워크로, vue나 Angular 많이 비교되기도 한다.프런트단에서 많이 쓰인다. 장점 1.상호작용이 많은 UI:선언형 2.컴포넌트기반-효율적인 컴포넌트 갱신 및 렌더링 3.컴포넌트 기반-스스로 상태 관리하는 컴포넌트 4.DOM과 별개로 상태 관리(즉,DOM이 아닌 컴포넌트와 가상DOM 사용) 5.앱 안 데이터 손쉽게 전달(폭포수처럼) *DOM vs. 컴포넌트 DOM은 문서구조 자체이고 컴포넌트는 이를 추상화한 모듈화시킨것이다. DOM의 문제:모든 하위의 태그 거쳐야하므로 렌더링이 느리다. 리액트: 이전과 비교해 바뀐 부분만 새로 렌더링한다 컴포넌트들의 state를 이전과 비교해 바뀐부분을 props로 바꾼다,새로고침도 안해도 된다! React활용 순서랄까..

1.Arrow Function 기본형 ()=>{} ()=> function plusTwo(s){ return s+2; } plusTwo=(s)=>{ return s+2; } 입력이 하나일 때 =>{} => plusTwo=(s)=>s+2; plusTwo=s=>s+2 모두 console.log(plusTwo(3)) 결과값이 같다. arrow function를 활용해 Map과 Filter를 사용하면 훨씬 간편한 것을 알 수 있다. //Map과 Filter arr=[1,2,3,4,5,6,7,8,324,563,32,3] //arr_map=arr.map(function(value){return value*2}) arr_map=arr.map(v=>v*2) console.log(arr_map) //[i*2 for i ..

0.view of DRF DRF에는 view를 작성하는 방법이 여러가지 있다. (지난 2편에서는 serializer쓰고, 모델기반의 viewset상속하는 방법으로 view를 작성했지! ViewSet은 view(CRUD)를 구현하는 DRF의 쉽고 간단한 view설계 방법이다.) view의 종류 중 위 그래프를 보면 왼쪽에서(API View) 오른쪽(ViewSet)으로 갈 수록 코드 복잡도가 낮아 지는데 이는 상속을 통해 이루어지는 것이다. APIView는 2편의 Django기반 CBV와 유사항 형태이므로 익숙하니깐 APIView에서 시작해 ViewSet까지 순서대로 django_rest_framework의 GitHub문서와 튜토리얼을 보고 3편의 실습 예제였던 Post의 view를 작성해보자. DRF vi..

본격적으로 Django Rest Framework를 통해 API서버를 만들어보쟈! 먼저 DRF로 만든 API 서버는 Django의 웹어플리케이션과 다르게 문자열로된(serialized된) JSON을 클라이언트와 주고 받는다고 알고 있다. 클라이언트에서 데이터를 처리해주라는 POST요청을 서버에 할 때도 Django는 데이터를 form으로 입력받아 html로 넘기고 DRF는 데이터를 JSON으로 문자화(직렬화,Serialize)해서 전달하는 것이다. 그렇다면 '데이터 직렬화'가 DRF의 가장 큰 역할이라 여겨지는데,, 그래서 serializer를 작성하고 임포트해서 쓸 것이다! form대신 serializer/model은 상속받아서/router를 사용하는 url 1.JSON의 직렬화 Serializer D..

서버 HTTP Request&Response :HTTP프로토콜 기반의 통신을 수행할 때 오고가는 request&response 메소드와 종류 -Django는 클라이언트와 CSS,html,JS를 주는 반면, -DRF는 API서버로서 HTTP프로토콜 기반의 JSON형식의 데이터를 클라이언트에게 준다. 클라이언트로부터 서버로 들어오는 응답 또한 JSON 형태로 HTTP상태코드를 준다(2XX,4XX:등) -서버와 클라이언트 사이의 통신 규약인 HTTP -Restful Framework가 HTTP Request Method(GET,POST,PUT,DELETE,PATCH,OPTION)중심이다. HTTP Request Method 비교 GET vs. POST, PUT vs. PATCH GET:갖다줘,URL입력 데이터..

Generic View는 Class based view이다. Django와 DRF 둘 다에서 널리 쓰인다. 함수 기반 뷰도 많이 쓰이나 DRF에서는 뷰를 기본적으로 CBV로 작성하는 경우가 많아 짚고 넘어가려 한다. Generic View를 쓰면 간편한 장점이 있는데 그만큼 제약도 많다. 1.함수기반 view와 클래스 기반 view의 차이 view를 작성할 때 함수나 클래스 둘 다 가능한 이유는 둘 다 collable object이기 때문이다. 즉, Django의 view는 collable object로 정의하는 것이다. 그러나 함수와 클래스의 차이 중 가장 큰 것은 클래스는 '상속'이 가능하다는 점이다. 따라서 CBV는 상속을 통해 간단히 구현할 수 있다. 그러나 그만큼 미리 약속된 것들도 많다(특히 ..

이전까지 Django 프레임워크로 웹페이지를 만들어보는 실습을 해봤다면 이제부터는 Django Rest Framework로 실습을 진행해볼까 한다. 먼저 Django와 DRF(Django REST framework)의 차이를 짚고 넘어가자. 1.RESTful의 의미 REST(Representational State Transfer)는 로이 필딩(Roy Fielding)이 자신의 2000년 박사 학위 논문에 정의한 웹 기반 아키텍쳐다. 자원을 이름(자원의 표현)으로 구분하여 해당 자원의 상태(정보)를 주고 받는 모든 것을 의미한다. 즉, 데이터가 요청되어지는 시점에서 자원의 상태(정보)를 전달한다. 그리고 그 표현은 보통 JSON 혹은 XML를 통해 데이터를 주고 받는 것이 일반적이다. REST는 기본적으..