기록하고 싶은 것들

서버 컴퓨터에 3개의 서버 소프트웨어가 동작 중일 때 접속하려면? 어떤 포트랑 연결할지 지정 필요 python 개발 서버는 기본적으로 8000번 포트 이미 다른 서버가 8000번 사용 중 일 때는 다른 포트(8888)랑 연결 시켜 사용

django 설치 $ python -m pip install django 원하는 디렉토리에 myproject 생성 $ django-admin startproject myproject . settings.py에는 여러가지 설정이 들어가 있음 urls.py 사용자가 접속하는 path에 따라서 라우팅을 해주는 중요한 파일 manage.py 프로젝트 진행시 필요한 여러가지 기능이 있는 유틸리티 파일 django 실행 $ python manage.py runserver 실행 후 http://127.0.0.1:8000/ 접속 화면 만약 이미 실행하는 서버가 8000번 포트를 사용 중일 때는 $ python manage.py runserver 8888 http://127.0.0.1:8888/ 으로 접속이 가능하다. ..

지금까지는 필요한 웹페이지를 미리 만들었다가 요청을 하면 응답 해결 방법 파이썬으로 웹 페이지를 만드는 프로그램을 만든 후 요청이 올 때마다 프로그램이 요청에 맞는 웹페이지를 만들어 응답 웹 프레임워크 : 웹 애플리케이션을 만드는 작업을 미리 해 놓은 소프트웨어 웹 프레임워크 예 JAVA : JSP, Servlet, Spring PHP : Laravel, Cordeignitor Ruby : Ruby on rails Node js : Express.js Python : Flask, Fast API 우리가 배울 것은 Python 진영의 Django 요청이 들어올 때마다 웹페이지를 순간적으로 찍어내서 서비스하는 공장

Stackblitz 사용하여 개발 환경 구현 react redux 설치 방법 redux와 react-redux 설치 npm install redux react-redux 기존 react 사용 시 컴포넌트 안에 컴포넌트가 중첩 되어서 사용 할 때 props의 연쇄적 연결이 필요, 마치 유선으로 이어진 것과 같음 하지만 redux 사용 시 redux의 store 중심으로 컴포넌트 끼리 직접 연결 가능 provider : state를 어떤 컴포넌트에 적용할지 정의 useSelector : 어떤 state 값을 선택할지 정의 useDispatch : state값을 변경 시킬 때 사용 connect : 재사용성을 높이기 위해서는 필요하지만 사용하기 어려움

Delete는 누르자마자 삭제를 하면 안되기 때문에 링크 대신 버튼 사용 App.js import logo from './logo.svg'; import './App.css'; import {useState} from 'react'; //state 사용 function Header(props){//컴포넌트 생성(대문자로 시작) return { //event객체를 첫번째 파라미터로 event.preventDefault(); //태그 의 기본동작 방지-> reload 되지 않게 props.onChangeMode(); // alert 호출 }}>{props.title} } function Nav(props){ const lis =[] for(let i=0; i{t.title}) //lis에 하나씩 넣기, 동적..

Update는 Create와 Read를 합친 난이도 있는 작업 function Update(props){ const [title, setTitle] =useState(props.title); //props에 들어온 title에서 state로 const [body, setBody] =useState(props.body); return Update { event.preventDefault(); const title = event.target.title.value; //event target은 form 태그 지칭 const body = event.target.body.value; props.onUpdate(title,body); }}> {//state를 value값으로 줌 setTitle(event.targe..

대부분의 어플리케이션은 CRUD 기능을 가지고 있으며 지난 강의까지는 Read를 구현했다. 지금부터는 Create를 구현해보자 state를 만들 때 원시 데이터 타입이라면 기존 방식대로 생성하면 된다 하지만 객체,배열 같이 범 객체 안에 들어간다면 처리 방법이 달라진다. 데이터를 복제 후 복제 본을 변경한다. 그 후 setValue에 newValue를 넣어주면 component가 다시 실행된다. 여기서 핵심은 오리지널 데이터를 건들지않고 복제본을 변경하는 것이다. why? React는 오리지널 데이터와 새로 들어온 데이터가 같은 데이터인지 확인 후 같다면 component를 재실행 하지 않음 위) 객체 타입일 때 state 생성 예시 아래) 원시 타입일 때 state 생성 예시 App.js import ..

prop과 state의 차이점 prop은 component를 사용하는 외부자를 위한 데이터 state는 component를 만드는 내부자를 위한 데이터 App.js import logo from './logo.svg'; import './App.css'; function Header(props){//컴포넌트 생성(대문자로 시작) return { //event객체를 첫번째 파라미터로 event.preventDefault(); //태그 의 기본동작 방지-> reload 되지 않게 props.onChangeMode(); // alert 호출 }}>{props.title} } function Nav(props){ const lis =[] for(let i=0; i{t.title}) //lis에 하나씩 넣기, 동..

component의 이벤트 기능 넣기 onChangeMode prop에 함수 호출 App.js import logo from './logo.svg'; import './App.css'; function Header(props){//컴포넌트 생성(대문자로 시작) return { //event객체를 첫번째 파라미터로 event.preventDefault(); //태그 의 기본동작 방지-> reload 되지 않게 props.onChangeMode(); // alert 호출 }}>{props.title} } function Nav(props){ const lis =[] for(let i=0; i alert('Header'); }}> ); } export default App; 해당 코드 변경 후 WEB 클릭 시..

props는 component의 외부에서 사용하는 입력 값 App.js import logo from './logo.svg'; import './App.css'; function Header(props){//컴포넌트 생성(대문자로 시작) return {props.title} } function Nav(props){ const lis =[] for(let i=0; i