update form 요소가 있는 CreateContent를 복사해서 UpdateContent로 만들어준다. article이 mode에 따라 바뀌는 부분이 길어서 코드가 지저분해 보이기 때문에 render밖으로 getContent라는 함수로 만들어준다. getContent(){ let _title, _desc, _article = null; if(this.state.mode === 'welcome'){ ... } _article = } else if(this.state.mode === 'create'){ ... }.bind(this)}> } else if(this.state.mode === 'update'){ ... }.bind(this)}> } return _article; } 그리고 _article을..
네트워크 모델 TCP/IP 모델 :네트워크에서 데이터 전송 시 컴퓨터 내부에서 하는 일들을 4계층으로 나눈 것. 4계층 응용 3계층 전송 2계층 네트워크 1계층 네트워크 인터페이스 OSI 7계층 :네트워크 통신을 체계적으로 다루는 ISO에서 표준으로 지정한 모델 :데이터를 주고받을 때 데이터 자체의 흐름을 각 구간별로 나눠 놓은 것 :네트워크에서 데이터 전송 시 컴퓨터 내부에서 하는 일들을 7계층으로 나눈 것. ▷OSI 7계층 모델의 계층별 프로토콜 7계층 응용 HTTP, SMTP, IMAP, POP, SNMP, FTP, TELNET, SSH 6계층 표현 SMB, AFP, XDR 5계층 세션 NetBIOS 4계층 전송 TCP, UDP, SPX 3계층 네트워크 IP, ICMP, IGMP, X.25, CLN..
props, state, event 3개가 서로 상호작용하며 애플리케이션의 역동성을 만든다. !목표! WEB을 누르면 welcome 메시지가, 각 목차를 누르면 그에 해당하는 내용이 뜨도록 만들 것이다. 그래서 우리는 각 링크에 이벤트를 만들 것이다. 그 이벤트를 클릭하면 App 컴포넌트의 state가 바뀌고 그 바뀐 state가 Content 컴포넌트에 동적으로 전달되도록 하는 것이 목표! 코드 변경 전 전체 코드↓ 더보기 https://github.com/YJZero/React/tree/main/components state 설정하기 지금 보고 있는 페이지가 welcome 페이지인지 read(읽기) 페이지인지 구분하기 위해 mode를 추가한다. 그리고 mode가 welcome일 때 content 영역..
컴포넌트 만들기 WEB world wide web! HTML CSS JavaScript HTML HTML is HyperText Markup Language. 이러한 순수 html 코드가 있다. 이 부분들을 컴포넌트를 만들어서 리액트로 구현해보자. WEB world wide web! 먼저 이 헤더 부분을 리액트를 통해 subject라는 이름의 컴포넌트로 바꿀 것이다. =Subject라는 컴포넌트를 만들겠다. 컴포넌트의 이름의 첫글자는 무조건 대문자! 그게 룰임!! 그 다음 render 함수를 만들고 (class 안에서 함수를 만들 땐 function을 안 붙여도 된다.) return(); 을 쓴 후 이 괄호 안에 원하는 내용을 넣는다. 이때! 컴포넌트는 무조건 하나의 최상위 태그만 있어야 한다. ..
샘플 애플리케이션을 수정하는 것으로 시작해보자. 수정하기 위해서 어떤 디렉토리 구조를 가지고 있고 어디를 수정하면 코딩을 할 수 있는지를 알아야 한다. JS 코딩하기 public 파일은 샘플 애플리케이션이 나타나는 index.html이 있는 파일이다. 이 index.html을 살펴보면, 이렇게 id root가 있다. 리액트를 사용하면서 만들어지는 component는 모두 이곳에 넣기로 creat-react-app은 약속되어 있다. 실제로 개발자 도구를 통해 살펴보면 이렇게 root 안에 리액트로 만들어진 태그들이 들어있는 것을 볼 수 있다. 그렇다면 이러한 component들은 어떤 파일에서 만들 수 있는가? 그것은 바로 src 디렉토리 안에 있는 파일을 수정해서 만들 수 있다. 그래서..
생활코딩 이고잉 님의 리액트 강의를 부스트코스를 통해서 수강하고 있다. 웹 프론트엔드 시작하기 (리액트&리덕스) > 오리엔테이션 : 부스트코스 (boostcourse.org) component란 리액트에서 사용자 정의 태그를 작성하는 것을 component 라고 한다. 이렇게 component를 사용할 경우 가독성이 좋아진다. 재사용성이 좋아진다. 유지보수하기 좋다. 가독성의 경우, 복잡한 코드를 따로 component로 저장하고 실제 코드에선 component만 작성하면 되기 때문에 훨씬 좋다. 재사용성의 경우, component를 한번 정의해두면 다른 사이트에서도 사용할 수 있기 때문에 좋다. 유지보수의 경우, 만약 component에 오류가 있어서 변경할 경우 그 component..
