코르시카's Blog

1. Port 란? 1-1) 정의 한 IP에 여러 연결이 필요한 경우 사용하게 되는 것, 패킷이 Port로 구분 됨 받을 때와 전송할 때 마찬가지 > 한 IP 내에서 다음과 같이 포트 번호로 Application / 응용프로그램 별로 구분하여 패킷 접수/전송 가능 ( Port로 구분되는 적용 대상이 "패킷"인것이 중요! ) - IP는 출발 / 목적 IP 정보 가지고 있음 - TCP는 출발 / 목적 PORT 정보 가지고 있음 1-2) 주 정의된 PORT 0 ~ 65535 : 전체 할당 범위 0 ~ 1023 : 잘 알려진 포트, 사용하지 않는 것이 좋음 FTP - 20 ,21 TELNET - 23 HTTP - 80 HTTPS - 443 2. DNS 2-1) DNS 란? Domian Name Server 의 ..

1. 인터넷 통신 복잡한 인터넷 망을 통해 두대의 컴퓨터가 연결됨 이러한 통신을 하기 위한 규약이 있고 이가 IP(Internet Protocol) 임 1-1) IP (internet protocol) 통신하기 위한 규약의 총칭 통신규약을 따르는 통신 과정은 다음의 일련의 process를 거친다 (a) 두대의 컴퓨터 모두 ip 주소가 있어야 함 (b) 클라이언트(computer 1) IP 패킷 이라는 통신 단위로 데이터 전달 > 다음과 같이 패킷에 대한 정보를 추가로 기술해주어야 함 > 노드를 연결하는 서버들 끼리 규약을 따르기 때문에 최종 서버로 전달 될 수 있음 (c) 서버(computer 2) 마찬가지로 답장 전달(반드시 응답 해야 함) 1-2) IP 프로토콜의 한계 비연결성 - 패킷을 받을 대상이..

1. 기본기가 중요한 이유 프레임 워크를 사용하면, http를 안다고 가정하고 기본을 모른채 기능위주의 개발을 하게 될 가능성이 높음 POST, PUT, http 상태 코드등... 에대한 고민 2. 강의 목표 HTTP 전체 흐름 이해 실무에 꼭 필요한 핵심 내용 예시 / 그림으로 쉬운 설명을 통한 이해 3. 강의 대상 모바일 앱 웹 프론트엔드 백엔드 4. 강의 흐름 인터넷 네트워크 - 복잡한 인터넷 망 - 프로토콜 계층 - TCP 3 way handshake - DNS URI web browser request - HTTP 메세지 전송 HTTP 기본 - HTTP 특징 - 무상태 - Stateless - HTTP 지속연결 - HTTP 메세지 구조 HTTP 메서드 - API URI 설계와 문제점, http ..

■ setState의 위치 ※ 반드시 main.js 의 render( ) 밖에서 이루어져야함 밖에서는 몇번이고 mutiple update 가능 하지만 render( ) 부를 때는 state / props가 바뀔 때 이므로 고정 된 상태에서 call 되어야 하고 결과적으로 render( )안에서는 setState등이 불리는 구조면 안됨 하지만 하위 component의 props change에 의한 상위단에서 callback을 불러 setStage를 부르는 경우는 하위 component의 변경을 받는 것이므로 OK ■ delete Controller 소속이었으므로 controller component 안에서 다음과 같이 구현 > delete가 아닌 경우 callback에 의해서 setState가 불리고 th..

■ Update 기능? > read + create 를 합친 것 > 기존의 contents를 불러와서 수정하는 것 > 이를 위해서는 기존 contents의 "read" + 수정하여 put하는 "create"기능이 합쳐져야 함 ■ 구현 create에서 마찬가지로 원본은 보존, 업데이트할 contents의 index를 구한 후 new Object로 교환 ■ Input tag의 Placeholder vs Value attribute Input tag에서 Placeholder은 그대로 text area에 dummy value를 표시해주지만, Value attribute를 사용하면 text 원본을 가져와서 표시 ※ 다만 props 값은 readonly가 원칙이므로 바로 value에 JSX로 값을 읽으면 다음과 같..

■ Create에 Form 추가 1) form 태그 생성 + 하위에 input - submit type 추가 > 위와 같은 구성으로 form 태그 안의 내용을 원래는 서버 등에 보낼 수 있음 > 서버의 주소는 form tag attribute에 넣으면 됨 action = "server location", method = "get / post" (post URL에서 보내는 값 노출 안됨) onSubmit = "callback for submit from input tag" ( form태그 하위 input-submit 클릭시 호출되는 콜백 ) 2) App.js에서 props로 하위 component 값 받아오고 업데이트 > new object를 list에 추가해줌 > 기본 JS method 사용( push ..

■ CRUD create, read, update, delete의 관점에서 필요하기 때문에 create가 중요 ■ Delete 기능 > link 구성이후 reload기능 끄고 주소를 a tag를 사용하는 경우 - create, update 경우는 상관이 없는데, 만약 미리 방문하는 addon등을 사용자가 쓰는 경우가 있을 수 있으므로 delete 기능은 다음과 같이 input 형태로 기능을 추가 ■ 실제 mode 수정부분 component 추가 - Contoller component 작성 - mode에 따른 state 변경 Component 매써드 setState( ) 함수 이용 ■ Mode에 따른 영역 reloading 1) App.js에 JSX를 받아올 변수 선언 2) JSX로 mode에 맞게 com..

■ Component에 Event 전달법 > Main component에서 하위 component로 이벤트 전달하고 State 변경하는것이 필요함 ( 모듈단위로 component를 구현하고 있기 때문에 ) 1) Main component level 에서 state 변경할 함수를 설정 + 이 함수를 props로 하위 component가 access할 수 있도록 전달 2) 하위 component에서 event를 생성한 후 click시 상위 사용자 event State 관리하는 함수를 call ■ 하위 component에서 상위로의 정보전달 1) 하위 component에서 부를 때 parameter를 전달 2) 다음과 같은 3가지 방식으로 전달 > (1), (2) 번은 ev object를 받고 안에서 targ..

■ State / Props와 Render의 관계 > Render 메써드에 state나 참조하는 props가 있을 시 state나 props가 어떤 방식으로던 변경이 이루어지면 render가 재호출되며 처음부터 다시 페이지를 그리게 됨 ※ main Component의 render가 reload되면 하위 component들이 가진 render 메써드도 차례로 다시 호출 됨 ∵ ▲main Component는 state변경으로 인해 reload되고, 하위 component들은 그 state에서 props를 받으므로 차례로 변경되는 것 ■ Mode 도입 > Mode에 event를 설치하여 반응형으로 만드는 방식은? ■ Event 추가 > a tag로 href가 있으면 클릭시 reloading이 되므로 event..

■ Data State로 전달받기 > Component 가 data를 받는 것을 다음과 같이 작성할 수 있음 ※ 완벽히 적절한 데이터 전달방식인 것인지 모르겠으나, 아래와 같이 array안의 object들로 받음 ■ Component 내부 여기서는 TOC 컴포넌트를 예시로 들고 왔음 ※ 특이한 점 : 1) push할 데이터 자체를 JSX로 해도 무방 ( [흰색 박스] 안을 string으로 주면 변환이 안되고 그대로 string으로 전달 됨. JSX로 줄 것) 2) [주황색 박스]HTML element를 직접 생성할 때는, key 값을 주어야 React 내부적으로 오류가 생기지 않음 ■ State와 Props 사용의 장점 모듈단위로 분리가 되고, 그 값을 state에서 주입하므로써 재사용성 용이해지고, H..