전체 글
-
WireShark 기본 설명네트워크/프로그램 2022. 10. 28. 10:25
와이어샤크 - 네트워크 패킷 캡처 및 분석 프로그램이다. '통신망의 상어' 라는 뜻, 우스워 보이는 이름이지만 사실 이름의 컨셉은 다음과 같다. 피 한 방울만 떨어져도 감지해내는 상어처럼 통신망을 감시한다는 취지이다. -출처: 나무위키 WireShark를 설치하면 처음에 볼수있는 화면이다. 캡쳐할 네트워크를 선택하면 실시간으로 해당 네트워크의 패킷이 오고가는 것을 스크롤의 압박으로 볼 수 있다. 상단 위를 보게 되면 여러 카테고리가 있다. 이 카테고리의 내용은 다음과 같다. No. 캡쳐된 패킷의 순서 Time 캡쳐된 패킷의 시간 0초는 Capture Start Time Source 패킷 송신지 Destination 패킷 수신지 Protocol 패킷 송/수신에 사용된 프로토콜 Length 패킷의 길이 In..
-
Java Server와 Client TCP/IP Socket 통신BackEnd/JAVA 2022. 10. 27. 13:17
Socket 통신 - 클라이언트와 서버가 지정된 포트를 이용해 통신한다. Client Socket - 최초 포트에 접속을 요청하는 소켓, 서버소켓으로 연결을 요청하고 데이터 전송을 한다. Server Socket - 서버에서만 사용하는 소켓, 클라이언트에서 연결요청이 오기까지 대기 상태를 유지한다. -Server.java import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.io.OutputStream; import java.io.PrintWriter; import java.net.ServerSocket; import ja..
-
input을 활용한 useStateFrontEnd/React 2022. 9. 3. 10:31
먼저 App 컴포넌트에 InputSample 컴포넌트를 렌더링하게 설정합니다. import React, { useState } from "react"; function InputSample() { const [text, setText] = useState(''); const onChange = (e) => { setText(e.target.value); } const onReset = () => { setText(''); } return ( 초기화 값: {text} ); } export default InputSample; 해당 컴포넌트에서 useState를 활용할수 있게 다음과 같이 입력합니다. onChange 라는 함수에 e라는 값을 받으면 그것을 해당 타겟 value 값에 넣어서 setText로 넘..
-
useState를 통해 컴포넌트 값 바꾸기FrontEnd/React 2022. 9. 2. 17:01
리액트 16.8 이전 버전에서는 함수형 컴포넌트에서는 상태를 관리할 수 없었지만 이후로는 Hooks 라는 기능을 통해 함수형 컴포넌트에서도 상태를 관리 할수 있게 되었습니다. 버튼을 누르면 숫자가 바뀌는 예제를 만들어 보겠습니다 import React, { useState } from 'react'; function Counter() { const [number, setNumber] = useState(0); const onIncrease = () => { setNumber(number + 1); } const onDecrease = () => { setNumber(number - 1); } return ( {number} +1 -1 ); } export default Counter; React 패키지에..
-
조건부 렌더링FrontEnd/React 2022. 9. 2. 10:05
특정 조건에 따라 다른 결과물을 렌더링 하는 것을 조건부 렌더링 이라고 합니다. function App() { return ( ); } 위와 같이 isSpecial 이라는 props를 설정하여 Hello 컴포넌트로 사용해보겠습니다. function Hello({ color, name, isSpecial }) { return ( {isSpecial ? * : null} 안녕하세요 {name} ) } 상항연산자를 활용해서 isSpecial이 true면 *을 출력하고 false면 null로 아무것도 출력하지 않게 조건을 걸겠습니다. App 컴포넌트에서 isSpecial에 true 값을 줬기 때문에 결과값은 *가 출력 됩니다.
-
props.childrenFrontEnd/React 2022. 9. 1. 13:44
컴포넌트 태그 사이에 넣은 값을 출력하고 싶을 때 props.children을 사용하면 출력이 가능합니다. function App() { return ( ); } Wrapper 이라는 컴포넌트로 여러 컴포넌트를 감싸고 안에 있는 내용을 출력하고 싶을때 props.children을 사용합니다. function Wrapper({ children }) { const style = { border: '2px solid black', padding: '16px', }; return ( {children} ) } 비구조화 할당 문법을 사용하여 다음과 같이 표기하면 다음과 같이 출력됩니다!