만족

SSID 브로드캐스팅 우리가 스마트폰으로 사용할 때 손쉽게 주변의 와이파이 리스트를 확인할 수 있다. 이 때 표시되는 와이파이의 이름이 SSID인데, 이는 AP가 주기적으로 자신의 SSID를 브로드캐스트하기 때문이다. 보안이 중요하다면 브로드캐스팅하지 않고, 사용자가 직접 입력해 들어올 수 있도록 한다. WEP(Wired Equivalent Privacy) AP 접속 시 WEP Key를 요구하는 방법. 웹키는 40~128비트 키를 사용하며, 만약 64비트 이하의 웹키라면 무선 랜 스니핑을 통해 30분 정도에 웹키 복호화가 가능하다. WPA(WiFi Protected Access) 와 WPA-PSK(Pre-Shared Key) 처음 연결 시 WEP Key를 이용해 통신하고, 이후 주기적으로 공유키를 재설정..

Sniffing 주로 유선 연결된 네트워크 상에서 다른 시스템이 보내는 내용을 엿보는 방법. 만약 허브 환경이라면 모든 패킷이 모든 네트워크 구성원에게 전달되므로, 이 때 랜카드의 promisicuos 모드를 활성화하면 패킷 필터링 기능이 해제되어 모든 정보를 들여다볼 수 있게 된다. 시스템에 꽂힌 랜카드들은 IP주소와 MAC주소를 통해 전송받은 패킷을 필터링해, 자신을 대상으로 하는 패킷만 받아들인다. 그러나 스위치 환경에서는 이런 필터링 방식이 스위치에서 이루어지기 때문에 스니핑을 위해 다른 방법을 사용한다. Sniffing: with Switch 스위치에는 MAC 테이블이 존재하므로, 들어온 패킷에 대해 목적지 MAC이 몇번 포트에 해당하는 네트워크인지를 알 수 있다. 이 때, ARP 프로토콜을 악..

DoS (Denial of Service) 서비스 거부 공격, 즉 서버가 정상적인 서비스를 하지 못하도록 하는 공격을 말한다. DoS: Ping of Death ICMP 프로토콜(패킷을 보낸 후 수신자가 다시 송신자에게 특정 메시지를 보낼 수 있다)을 활용해 네트워크가 정상적으로 작동하는지 확인하는 ping 유틸리티가 있다. Ping of Death 공격은 ICMP 프로토콜을 악용하여 수신자에게 최대 크기의 데이터를 전송하면 수신자의 네트워크에서는 해당 데이터를 모두 적절한 크기의 패킷으로 나누어 처리해야 하므로 부하가 커진다. 따라서 수신자는 정상적인 네트워크 서비스를 사용할 수 없게 된다. 현재 대부분의 대형 IT회사들은 아예 ICMP프로토콜을 막아버리거나, 일정 크기를 넘어설 경우 무시하고 있다. ..

프로토콜 서로 다른 시스템에 있는 개체가 통신하기 위해 필요한 동일한 통신 규약(약속) 프로토콜의 기능 주소지정 상대의 주소를 지정한다 순서지정 프토로콜 데이터 단위가 전송될 때 보내는 순서를 명시하는 기능으로, 연결 지향형(TCP/IP)에서만 사용 단편화 및 재조합 대용량 데이터 전송 시, 일정한 데이터 블록으로 나누어(단편화) 전송하고 수신자는 그 데이터를 재조합한다 데이터 흐름제어 수신자가 수신한 데이터의 양이나 속도 제어 연결제어 연결 지향형 데이터 전송에서는 연결 설정, 데이터 전송, 연결 해제의 3단계로 구성된다. 캡슐화 데이터에 제어 정보를 덧붙이는 것 오류제어 데이터 교환 시 오류를 발견하는 기법 동기화 송수신 개체가 먼저 정의된 인자를 공유하는 기법 멀티플렉싱 하나의 통신 선로에서 여러 ..

https://satisfactoryplace.tistory.com/131?category=829221 [React] 검색엔진 최적화(SEO):: Prerendering (react-snap) React는 대표적인 SPA제작 라이브러리이다. SPA가 사용감이나 개발적인 측면에서는 유리하지만, 빌드된 결과물을 보면 는 텅 비어있고 js가 body를 바꾸기 때문에 검색엔진은 이 사이트를 비어있는 satisfactoryplace.tistory.com 위 포스트에서 작성한 내용에서 최근 부족한 내용을 찾아 추가하려고 한다. 문제 react-snap은 지정된 url을 돌면서 html을 크롤링한다. 따라서 지정된 url로 접속했을 때는 그 페이지의 내용이 개략적으로 보이지만, 만약 동적인 url로 접속했을 때(/p..

이전 포스트에서 계속되는 내용이다. 아래 영상을 참고하여 작성되었다. https://www.youtube.com/watch?v=kWQ84S13-hw&t=33s&ab_channel=SimplyExplained 이전 코드의 문제점 이전 포스트에서 언급했듯이, 지갑의 주인이 아닌 사람이 마음대로 트랜잭션을 생성해서 남의 코인을 전부 자기 지갑으로 가져올 수 있다는 문제가 있었다. 따라서 fromAddr, 즉 보내는 사람이 자신일 경우만 트랜잭션이 유효하도록 조치를 취해야 한다. Key Pair 여기에서 공개키-개인키 개념을 사용할 것이다. 먼저 개인키는 자신만 가지고 있어야 하며(외부에 노출되어서는 안됨) 공개키는 개인키에서 파생된 키로, 외부에 공개되는 데이터이다. 어떤 알고리즘 f에 의해 f(개인키)= 공..

이전 포스트에서 계속되는 내용이다. 아래 링크를 참조하여 작성된 포스트이다. https://www.youtube.com/watch?v=kWQ84S13-hw&ab_channel=SimplyExplained 트랜잭션 트랜잭션은 말 그대로 거래 내역을 의미한다. 코인을 생각해보면, 코인을 보내는 사람+ 코인을 받는 사람+ 전송되는 코인의 양 이라는 데이터가 트랜잭션이 된다. //Transaction은 보내는 지갑주소, 받을 지갑주소, 보낸 코인의 양을 포함하는 객체이다 const Transaction = function (fromAddr, toAddr, amount) { this.fromAddr = fromAddr; this.toAddr = toAddr; this.amount = amount; }; 따라서 우..

이전 포스트에서 계속되는 내용이다. https://satisfactoryplace.tistory.com/285 [Blockchain] js로 이해하는 블록체인의 기본 구조 https://www.youtube.com/watch?v=zVqczFZr124&list=LL&index=4&ab_channel=SimplyExplained 위 영상을 참고하여 작성된 포스트임을 먼저 밝힌다. 블록체인이란? 여러 개의 블록이 체인처럼 엮여있는 형상을 가지.. satisfactoryplace.tistory.com 또한 이 포스트는 아래 영상을 참고하여 만들어졌다. https://www.youtube.com/watch?v=HneatE69814&ab_channel=SimplyExplained POW (Proof of Work)..

https://www.youtube.com/watch?v=zVqczFZr124&list=LL&index=4&ab_channel=SimplyExplained 위 영상을 참고하여 작성된 포스트임을 먼저 밝힌다. 블록체인이란? 여러 개의 블록이 체인처럼 엮여있는 형상을 가지고 있으며, 분산 네트워크를 통해 이 연결된 블록들이 훼손되지 않는다는 것을 보장하는 개념이다. 여기서 블록은 우리가 원하는 데이터들을 포함할 수 있으며, 이전 블록의 해시도 함께 포함함으로써 이전 블록과의 관계를 가질 수 있다. 이런 관계를 보고 "블록끼리 서로 체인으로 연결된것 같다"라고 해서 블록체인이라고 명명한다. 블록에 저장되는 정보 블록의 번호(index) 현재 블록의 해시값 (해시함수에 블록번호+이전해시값+기타데이터 정보를 넣고..

이것은 클라우드플레어의 프록싱이 켜진 상태에서 네트워크 정보를 시각화한 것이다. 클라우드플레어의 프록싱 기능을 사용하면, 인증서 설치 없이 https를 사용하거나 캐싱 등의 기능을 사용할 수 있지만 위에서 본 것 처럼 TTFB가 심하게 치솟는다. 이참에 웹 페이지 제공 서버와 리소스 전용 서버를 제외하고(이 경우 cdn을 이용했을 때 얻어지는 캐싱 효과가 더 크다고 판단했다) 나머지(api 서버 등)는 전부 자체 ssl을 사용하고 프록싱 기능은 꺼버렸다. 왜 일부 서비스에서 cloudflare cdn을 사용하지 않기로 했는지 작성할 것이다. TTFB가 늘어지는 이유가 뭘까 많은 블로그에서 찾아볼 수 있듯이 한국 망 사용료 관련 문제로 인해 무료 계정을 사용하면 외국에 있는 cdn으로부터 컨텐츠를 받아온다..

집근처에 잔여백신이 생겼길래 신청하고 맞았다. 화이자 백신이고, 2021-08-30에 맞아서 현재 3일차이다. 부작용 일단 접종 후 7시간까지는 아무런 증상이 없었다. 다들 팔을 세게 맞은거마냥 아프다고 했는데, 나는 이상할정도로 아무렇지도 않아서 뭔가 잘못 접종된건가 싶었다. 그런데 7시간이 지나자 나도 접종부위(삼각근)에 통증이 생겼다. 비유하자면 운동을 안하다가 전날 어깨운동 조지고 다음날 일어났을 때 통증이다. (근육통과 비슷하기도 하고, 큰 멍이 들었을때랑 비슷하기도 하다) 추가로 자고일어났더니 얼굴에 여드름이 3개 올라왔다. 흔한 증상은 아닌 것 같다만, 검색해보니 갑자기 여드름이 올라오는 사람도 있는 것 같다. 이 외에 가슴통증이나 고열증세 등은 없었다. 정리 부작용: 팔통증+ 여드름 팔통증..

이더리움 테스트 네트워크의 이더를 얻기 위해 롭슽텐 패싯을 이용했지만, 정상적으로 이더를 받을 수 없었다. 처음엔 Too many request라길래 카페에서 누군가 많은 요청을 보냈나 싶었지만, 집에서도 동일한 문제가 발생했다. 이걸로 어떻게 하면 이더를 받을 수 있을까... 한참을 고민했지만 그럴 필요가 없었다. 그냥 다른 곳에서 받으면 되잖아...? faucet.ropsten.be https://faucet.ropsten.be/ Ropsten Ethereum Faucet faucet.ropsten.be 신청한 사람들에게 10초마다 0.3eth를 나눠준다. 적은 eth양은 괜찮지만, 사람들이 몰릴 경우 상당히 오랜 시간을 기다려야 한다. 큐에 사람이 별로 없을 경우엔 유용하다. faucet.dimen..

rust는 이곳에서 설치할 수 있다. 이미 설치되었다고 가정한다. https://github.com/openethereum/parity-ethereum GitHub - openethereum/parity-ethereum: The fast, light, and robust client for Ethereum-like networks. The fast, light, and robust client for Ethereum-like networks. - GitHub - openethereum/parity-ethereum: The fast, light, and robust client for Ethereum-like networks. github.com 플랫폼은 MacOS이다. cargo install 오류 일단..

한 컴포넌트에 16개의 Tooltip이 포함되어 있고, 그 컴포넌트(ItemCombination)가 10개 존재했을 때 렌더링을 프로파일링한 차트이다. ItemCombination은 장착중인 16개의 아이템을 아이콘으로 표시하고, 각각의 아이콘을 Tooltip으로 감싼 형태이다. 코드로 봤을 땐 딱히 성능 저하를 일으킬만한 것이 없어서 왜 느린가 싶었지만, 프로파일링한 결과 material-ui의 컴포넌트들은 withStyle로 감싸져 나가기 때문에 이런 식으로 컴포넌트 내에서 많은 반복을 할 경우 비교적 긴 withStyle의 실행 시간 때문에 성능 저하가 발생한다. 실제로 itemCombination에서 Tooltip을 제거하고 빌드했을 땐 렌더링 시간이 압도적으로 빨라졌다는 것을 알 수 있다. 필요..

크롬의 개발자 도구에는 Performance(성능) 탭이 존재한다. 이를 통해 웹 성능을 측정하고, 어떤 것이 시간을 오래 잡아먹는지 손쉽게 알아볼 수 있다. 캡쳐 시작은 왼쪽 위의 녹화 버튼으로, 중지는 붉게 변한 녹화 버튼을 통해 할 수 있다. 문제 내 프로젝트에서 렉이 심하게 걸리는 구간을 캡쳐해보니 특정 구간에서 프레임 드랍이 심하게 일어나는 것을 확인할 수 있었다. 이는 컴포넌트 렌더링 중 오래 걸리는 함수가 렌더링을 블러킹하여 해당 구간에서 웹이 멈추는 현상인 것임을 알 수 있다. (Frame이 급격히 줄어드는 구간=> Frames가 붉게 표시되는 구간) 컴포넌트를 진단해본 결과 어떤 함수가 오래 걸리는 함수인지를 알았다. 그런데 그 함수는 다시 계산될 필요가 없는데도 컴포넌트 리렌더링마다 무..

https://redux.js.org/tutorials/fundamentals/part-1-overview Redux Fundamentals, Part 1: Redux Overview | Redux The official Fundamentals tutorial for Redux: learn the fundamentals of using Redux redux.js.org 위 내용을 참조하여 설명할 것이다. Redux란 무엇인가? Redux is a pattern and library for managing and updating application state, using events called "actions". 리덕스는 "액션"이라고 하는 이벤트를 사용하여 애플리케이션의 상태를 관리하고 업데이트하는 ..

import React, { useState } from "react"; //foo는 매우 오래 걸리는 함수의 예이다. const foo = () => { console.log("foo is called"); console.time("foo"); //약 0.2~0.8초 소요 for (let i = 0; i { //value라는 state는 foo()의 값으로 초기값이 결정된다 const [value, setValue] = useState(foo()); const [cnt, setCnt] = useState(0); return ( value is {value} setC..

아직 애드센스에 합격하지 못한 사람들은 아래 링크를 참조하고 승인을 먼저 받아야 한다. https://satisfactoryplace.tistory.com/151 [React] 애드센스 합격 과정 6번의 떨어짐 끝에 드디어 애드센스 합격 통보를 받았다. (육전칠기....) 합격을 받기까지 거친 과정을 소개해 보려고 한다. 1. 사이트 성능 최적화 satisfactoryplace.tistory.com/122?category=829221 [React].. satisfactoryplace.tistory.com 이 포스트에서는 이미 애드센스 승인을 받고, 프로젝트에 광고를 추가하는 방법에 대해 알아볼 것이다. 광고 생성 디스플레이 광고 또는 인피드 광고를 사용할 것이다. 자동 삽입 광고는 내가 의도하지 않은 위..

기존의 expressjs프로젝트에 페이지 렌더링 기능이 필요해 Nextjs를 사용했다. 통신 구조 여기에서 Client가 3006포트로 요청을 하면, nextjs 프로젝트에서 리버스 프록싱을 통해 express 프로젝트에 관련 데이터를 요청하고 클라이언트에게 페이지를 반환한다. 클라이언트는 express(PORT 3002)와 직접 통신할 필요가 없다. 만약 클라이언트가 API 호출을 원한다면 아래와 같이 통신한다. 클라이언트가 api서버와 통신하길 원한다면, nextjs를 거치지 않고 express와 통신할 수 있다. express프로젝트에 nextjs추가 yarn add react react-dom next or npm install react react-dom next 필요한 세 개의 모듈을 추가한다..

지난 포스트(MobX 실제로 사용해보기)에서 상태를 클래스 형태로 사용했었다. class Timer { secondsPassed = 0 constructor() { makeAutoObservable(this) } increaseTimer() { this.secondsPassed += 1 } } const myTimer = new Timer() 함수형 컴포넌트만 사용하는 사람들 입장에서는 별로 보기 좋은 모양새가 아니다. const timer = observable({ secondsPassed: 0 }); const increaseTimer= ()=>{ timer.secondsPassed+= 1; } export default { secondsPassed: timer.secondsPassed, increa..