내가 기억하려고 만든

드디어 둘을 분리하여 만든 후 합치는 날이 왔다. 현대의 Web은 Front단과 Back단을 따로 만드는데 Front단에도 지원하는 서버가 있어 둘을 Webpack으로 통신을 통해 연결해 하나의 것처럼 처리하는 것이다. 주로 Front단은 JS처리를 위해 Vue,React같은 프레임워크로 Node위에서 동작하고 Backend는 Django,PHP등으로 작성되어 DB와 연결되어있다. 여기서는 React로 만든 App과 Django로 만든 웹서버API를 연결해보고자 한다. Backend 설정 #Django 기본설정 >(가상환경을 키고)conda activate venv pip install django(옵셔널) pip install djangorestframework pip install django-cor..

Hook이란 간단히 말하자면 함수형 컴포넌트에서도 state를 가질 수 있도록 하는 것이다. 기존에는 조금 무거워도 클래스형 컴포넌트만이 state를 가질 수 있었기에 주로 사용하였지만 hook이 React버전 16.8이후로 도입되어 함수형 컴포넌트에 변화를 가져왔다. 간단한 공식 홈페이지의 예제를 통해 어떻게 동작하는지 살펴보자. 대표 예제를 보묜 useState를 통해 함수형 컴포넌트 내에서 state를 설정함을 볼 수 있다. uesState의 사용법을 정리하면 위와 같다. https://ko.reactjs.org/docs/hooks-intro.html Hook의 개요 – React A JavaScript library for building user interfaces ko.reactjs.org

클래스형 컴포넌트의 구조 앞서 살펴본 리액트의 클래스 컴포넌트의 구조를 정리해보면 아래와 같다. 클래스는 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 ..