고은수

개요전부터 오픈소스에 기여해보고 싶다는 생각은 하고 있었는데, 어떻게 하는지 방법도 잘 모르고 바쁘다 보니까 막상 손이 잘 안 갔다. 그러다가 모 커뮤니티에서 `이런 거 하려면 얼마나 듬? 혼자 GPT로 해결할 수 있나?`라는 제목의 안 눌러보고는 못 배기는 글을 발견했다. 글의 작성자는 디자이너인 거 같은데, Allusion이라는 이미지 관리 도구를 잘 사용하고 있다고 한다. 그런데 이미지가 대용량으로 들어있는 폴더를 열면 썸네일을 만드는 과정에서 메모리 사용량이 너무 많이 올라가고, 떨어지지 않아서 프로그램이 터져버린다고 한다. 관련 이슈도 이미 올려져 있었다.(Issue) 대충 보니까 익숙한 React + Electron 앱이라서 해볼까 하다가도, 내가 해결할 수 있는 문제인가? 싶기도 하고 그때는..

개요리액트를 공부하다 보면 메모이제이션을 접하게 된다. `React.memo`는 컴포넌트, `useMemo`는 값, `useCallback`은 함수를 메모이제이션해서 최적화한다는 건 다들 알고 있지만 "섣부른 최적화는 독이다"라는 말도 있듯 정확히 어디에 해야 하는지는 좀 대답하기 애매한 것 같다. 당연히 비용이 비싼 연산은 메모이제이션 하면 좋겠지만 그 기준은? 리렌더링이 자주 일어나는 컴포넌트는 뭘까? 모든 부분에서 전부 확인해 보면서 메모이제이션을 해야 할지 확인해야 하나? 메모이제이션 하는 데에도 추가 비용이 든다는데 그건 어느 정도 일까? 흠,, 헷갈린다. 나름의 기준을 잡아보자.리액트 렌더링 과정먼저 리액트가 어떻게 화면을 그리고, 언제 리렌더링이 되는지 간단하게만 알아보자. JSX 코드를 B..

개요내가 학생때 했었던 프로젝트도 그랬었고 대부분 학생들의 사이드 프로젝트에서 보안을 딱히 고려하지 않는다. 따로 다루지 않아서 어떤 문제가 있는지 생각도 못하거나, 어차피 실제 서비스가 아니라는 생각에 나중에 생각할 문제로 미뤄두는 것 같다. 어떤 문제들이 발생할 수 있는지 간단히 알아보고 토큰을 어떻게 저장하는 게 좋을지 알아보자.웹 보안 취약점XSS(Cross-Site Scripting)XSS는 공격자가 웹사이트에 악성 스크립트를 삽입하여 다른 사용자의 브라우저에서 실행되도록 하는 보안 취약점이다. XSS는 크게 세 가지 유형이 있다. 저장형(Stored) XSS악성 스크립트가 데이터베이스나 파일 시스템과 같은 영구 저장소에 저장된다.이런 식으로 공격자가 댓글 등 입력 필드에 스크립트를 삽입하고, ..

5.1 개요데이터 평면이 실제 사용자의 데이터가 이동하는 경로라면, 제어 평면은 그 이동 경로를 결정하고 관리하는 부분이다. 라우팅 테이블을 만들고 업데이트하며 네트워크의 운영을 담당한다.5.2 라우팅 알고리즘라우팅 알고리즘은 송신자부터 수신자까지 라우터의 네트워크를 통과하는 좋은 경로(= 최소 비용 경로)를 결정한다.링크 상태(LS) 라우팅 알고리즘처음에 u 노드에서 시작할 때, 가장 비용이 적은 w로 가는 경로가 선택된다.2단계의 u→v 경로는 직접 가는 길과 u→w→v로 가는 길 중 비용이 적은 값을 기준으로 업데이트된다.이러한 과정으로 계속해서 진행하여 다음과 같은 그래프가 만들어진다.다익스트라 알고리즘의 복잡도는 O(n^2) or 개선 시 O(nlogn)어느 경로로 트래픽이 몰려서 다른 경로를 ..

4.1 네트워크 계층 개요네트워크 계층의 역할은 송신 호스트의 트랜스포트 계층으로부터 세그먼트를 받아 각 세그먼트를 데이터그램으로 캡슐화하고 수신 호스트로 패킷(데이터 그램)을 전달하는 것이다. 수신 호스트는 받아서 세그먼트를 추출하여 자신의 트랜스포트 계층으로 전달한다. 각 라우터의 데이터 평면 역할은 입력→출력 링크로 데이터그램을 실제로 전달하는 것이고, 제어 평면의 역할은 송신 호스트에서 목적지 호스트까지 잘 전달되게끔 로컬, 퍼 라우터 포워딩을 조정하는 것이다. (네비게이션)포워딩과 라우팅 : 데이터 평명과 제어 평면포워딩(전달)패킷이 라우터의 입력 링크에 도달했을 때 적절한 출력 링크로 이동시킨다.매우 짧은 시간(나노초 단위) 동안 하드웨어에서 실행된다.서울 → 부산으로 갈 때 중간에 한 교차로..

3.1 트랜스포트 계층 서비스 및 개요트랜스포트 계층 프로토콜은 각기 다른 애플리케이션 프로세스 간의 `논리적 통신`을 제공한다. 논리적 통신이란 프로세스들이 동작하는 호스트들이 직접 연결된 것처럼 보인다는 것을 의미한다.라우터가 아닌 `종단 시스템`에서 구현된다.애플리케이션 프로세스로부터 수신한 메시지를 작은 조각으로 분할하고, 각각의 조각에 트랜스포트 계층 헤더를 추가한`세그먼트`로 변환하여 네트워크 계층으로 전달한다.트랜스포트 계층 프로토콜은 각기 다른 호스트에서 동작하는 `프로세스들` 사이의 논리적 통신을 제공하지만, 네트워크 계층 프로토콜을 `호스트들` 사이의 논리적 통신을 제공한다.인터넷 트랜스포트 계층 프로토콜로, 비신뢰적이고 비연결형인 UDP와 신뢰적이고 연결지향적인 TCP가 있다. UDP..

개요지난 글에서 HTTP의 발전과정에 대해 알아보았는데, HTTPS가 보안을 위한 프로토콜이고 Nginx에서 Let's Encrypt를 통해 인증서를 발급받거나 aws를 통해 HTTPS를 사용해 봤지만 제대로 알고 쓰진 않았어서 이참에 공부해 봤다.HTTPSHTTPS는 Hyper Text Transfer Protocol Secure으로, 보안 기능이 추가된 HTTP이다. HTTPS를 사용하면 모든 HTTP 요청과 응답 데이터는 네트워크로 보내지기 전에 암호화된다. 사용자가 로그인 정보를 입력하고 로그인 요청을 보냈다고 생각해 보자. 만약 나쁜 사람이 기존 HTTP에서 중간에 이 요청을 가로챈다면 그 정보 그대로 손쉽게 로그인할 수 있을 것이다. HTTPS는 데이터를 암호화해서 중간에 패킷이 탈취되더라도 ..

개요예전에 http/3이 새로 나왔고 구글과 유튜브에서 그걸 사용한다는 걸 주워 들었었다. 라이브 스트리밍 프로젝트를 기획하다가 이게 떠올라서 치지직에서 사용 중인 프로토콜을 찾아보니http2를 사용중이었다! 그래서 팀원들이랑 "ㅎㅎ 저희는 http3로 한번 만들어볼까여?" 이런 얘기를 했었는데 http가 그냥 요청/응답, 헤더/바디, GET/POST/PUT/DELETE, 상태코드, ~ 뭐 이 정도로만 알았지 제대로 알지는 못하고 있었던 것 같다. 그래서 이번에 HTTP가 버전별로 어떻게, 왜 변화했는지 알아보았다.HTTP 0.91991년에 나온 최초 버전인 HTTP/0.9는 HTML 문서를 요청해서 가져오기만 하는 단순한 프로토콜이었다.GET /mypage.html HTTP/0.9에는 우리가 당연하게 ..

개요React Native로 뇌졸중을 자가진단 할 수 있는 `노졸중` 애플리케이션을 만들고 사이드 임팩트 공모전에 참여했었다. 처음엔 RN만으로 모든 기능을 구현할 수 있을 줄 알았는데 제약사항도 있었고 따로 고려해야 하는 부분들도 꽤나 있었다. 얼굴 비대칭도 검사, 동작 검사를 위해 Google MLKit의 Face detection, Face mesh, Pose detection 등의 기능들을 사용해야 했는데, 이들은 `Java/Kotlin`, `Swift`로 작성된 네이티브 모듈이다. 따라서 RN에서 사용하려면 추가적인 작업이 필요했다.React와 RN은 문법이 비슷하지만 기반이 되는 아키텍처는 상당히 달랐다. 나도 프론트엔드 개발자이기도 하고, 대부분의 사람들은 RN으로 처음 개발하기보다는 Rea..

브라우저자바스크립트는 싱글 스레드 언어이다. 만약 DOM에 여러 스레드가 접근할 수 있다면 어떻게 동작할지 예측하기가 매우 어려울 것이다. 예를 들어, 하나의 버튼을 여러 스레드가 동시에 삭제하고 생성하려 한다면 어떤 결과가 나올지 예측하기가 매우 어렵지 않을까? 그래서 자바스크립트는 하나의 실행 컨텍스트 스택을 가지고, 코드가 평가되는 단계에서는 실행 컨텍스트가 스택에 push 되고, 해당 코드의 실행이 완료되면 스택에서 pop 되면서 작동한다.그런데 이런 구조에서 오래 걸리는 작업(Network IO, setTimeout, ...)이 스택에 들어가면 어떻게 될까?그 작업이 끝날때까지 다른 코드들이 실행되지 않고 계속 대기하게 되고 다른 작업들이 지연되어 사용자 인터페이스가 응답하지 않게 될 것이다.그..