정보보안은 단순히 해킹 기술이나 공격 기법을 암기하는 과목이 아니다. 기술이 발전하면서 사람들이 정보를 저장하고, 연결하고, 거래하고, 자동화하는 방식이 달라지고 그 과정에서 새로운 위험이 생긴다. 정보보안은 이러한 변화 속에서 무엇을 보호해야 하는지 이해하고, 위험을 통제하는 방법을 만들어가는 과정이라고 볼 수 있다.1. 정보보안의 시작, 비밀을 안전하게 전달하는 방법정보보안의 역사는 컴퓨터가 등장하기 훨씬 전부터 시작됐다. 가장 기본적인 문제는 중요한 정보를 다른 사람이 알아보지 못하도록 안전하게 전달하는 것이었다.이를 해결하기 위해 등장한 대표적인 기술이 암호학이다. 암호학은 전쟁에서도 중요한 역할을 했다. 적의 통신 내용을 해독하면 상대방의 계획과 움직임을 파악할 수 있었기 때문에 정보를 먼저 얻..

1. 원자는 무엇으로 이루어져 있는가?원자는 크게원자├── 원자핵│ ├── 양성자 (+)│ └── 중성자 (0)│└── 전자 (-)로 이루어집니다.양성자+전하를 가짐원소의 종류를 결정함양성자 수 = 원자번호 Z예를 들어:H → 양성자 1개C → 양성자 6개Na → 양성자 11개Cl → 양성자 17개따라서 양성자 수를 바꾸면 다른 원소가 됩니다.중성자전하량이 0양성자와 비슷한 질량을 가짐원자핵의 안정성에 중요한 역할을 함같은 원소라도 중성자 수가 다를 수 있음 → 동위원소 2. 전하와 전기력전하는 물질이 가지고 있는 전기적인 성질입니다.양성자는 +, 전자는 -입니다.기본적으로+ + → 서로 밀어냄- - → 서로 밀어냄+ - → 서로 끌어당김전자와 양성자의 전하량의 절댓값은 정확히 같습니다..

1. 물질은 무엇으로 이루어져 있는가?내가 했던 질문원자는 무엇인가?원자핵은 무엇인가?전자는 무엇인가?양성자, 중성자는 무엇인가?원소는 어떻게 구분되는가?분자와 결정은 무엇인가?알게 된 것모든 물질은 원자로 이루어져 있다.원자는 원자핵과 전자로 구성된다.원자핵은 양성자와 중성자로 이루어진다.원소는 양성자의 개수(원자번호)로 결정된다.분자는 원자들이 결합한 독립적인 집합이고,결정은 원자들이 규칙적으로 반복 배열된 구조이다. 2. 원자는 왜 무너지지 않는가?내가 했던 질문전자는 왜 핵으로 떨어지지 않는가?원자핵과 전자 사이에는 무엇이 있는가?원자의 크기는 왜 존재하는가?알게 된 것고전역학으로는 설명할 수 없고,양자역학 때문에전자는 입자이면서 파동이다.전자는 핵에 최대한 가까이 가고 싶지만,너무 좁은 공간에 ..

1. 새 프로젝트 생성 - Database password를 생성한 뒤 복사하여 .env에 옮겨두기, Region은 서울로 하기(유저의 지역에 따라 달라질 수 있음.) 2. @supabase/supabase-js 패키지 설치하기npm install @supabase/supabase-js 3. Supabase의 프로젝트 홈의 하단에 있는 "Connecting to your new project"의 "Project API"에서 Project URL과 API Key를 복사하여 .env에 각각 SUPABASE_URL과 SUPABASE_ANON_KEY로 저장한다. (Vite를 사용하는 경우 변수명 앞에 VITE를 붙인다.) 4. app 폴더 안의 root.tsx와 동일한 위치(최상단)에 supa-client.ts..

React 프로젝트를 개발하다 보면, 상단 탭 인터페이스를 통해 다양한 정보를 전환하고자 하는 요구사항을 자주 마주칩니다. MUI(Material UI)를 활용하면 기본적인 Tabs 컴포넌트를 빠르게 구현할 수 있지만, 복잡한 비즈니스 로직과 사용자 경험을 녹여낸 맞춤형 Tabs 시스템은 꽤나 섬세한 구조를 필요로 합니다. 이번 글에서는 제가 직접 구현한 AppTabs 컴포넌트를 구성 요소별로 분석하며, 주요 기능들을 하나씩 소개해 보겠습니다. 이를 통해 여러분이 확장 가능한 탭 시스템을 구축할 때 어떤 방식으로 접근하면 좋을지 함께 고민해 볼 수 있기를 바랍니다. 문제 상황기존 방식이었던 MUI에서 제공하는 Tabs 컴포넌트를 사용하는 방법의 경우, 디자인 디테일(탭 꼬리 디자인)이 추가됨에 따라 전체..

해시는 해시 함수를 사용해서 변환한 값을 인덱스로 삼아 키와 값을 저장해서 빠른 데이터 탐색을 제공하는 자료구조이다.보통은 인덱스를 활용하지만 해시는 키와 데이터를 일대일 대응하여 저장하므로 키를 활용해 데이터에 바로 접근한다.해시의 특징단방향으로 동작: 키를 통해 값을 찾을 수 있지만 값을 통해 키를 찾을 수는 없다.찾고자 하는 값을 O(1)로 찾음: 키 자체가 해시 함수에 의해 값이 있는 인덱스가 되므로 값을 찾기 위한 탐색 과정이 불필요.값을 인덱스로 활용하려면 적절한 변환 과정을 거쳐야 한다.해시를 사용하는 경우와 사용하지 않는 경우는 이렇게 차이가 난다. 해시를 활용하면 순차 탐색할 필요 없이 해시 함수를 활용해 특정 값이 있는 위치를 바로 찾을 수 있어 효율이 좋다.해시 테이블: 키와 대응한 ..

최근에 정말 중요한 이슈를 하나 마주쳤다. 내가 구현한 컴포넌트 하나가 무한 렌더링에 빠져 성능을 매우 저해하고 있었다. 처음엔 왜 이 컴포넌트가 계속 렌더링되지...? 하고 의아했는데, 파고들수록 리액트의 내부 동작 원리에 대해 알게되어 정리하고자 한다.문제의 시작ProSeqViewer라는 시각화 라이브러리를 쓰고 있었는데, 이 라이브러리는 내부적으로 DOM을 직접 조작한다. React스럽지 않지만 Protein sequence를 렌더링하는 라이브러리로는 이것만한 것이 없어 어쩔 수 없이 사용해야만 했다. 이 컴포넌트는 sequences라는 배열 데이터를 받아서 시각화해주는데, 문제는 이 배열이 자꾸 컴포넌트를 리렌더링시키고 있다는 점이었다.const ProSeqViewer = ({ consensus,..

스택스택의 어원: ‘쌓는다’선입후출 or FILO(First In Last Out): 먼저 들어간 것이 마지막에 나오는 규칙스택에 삽입하는 연산은 푸시, 꺼내는 연산은 팝파이썬의 경우 직접적으로 스택을 제공하진 않지만 대안으로 리스트에 append()메서드와 push()메서드로 스택을 대체할 수 있다.덱(deque)은 양쪽에서 데이터를 삽입하거나 삭제할 수 있는 자료구조다. 이런 특징을 응용하면 한쪽으로만 동작하는 스택처럼 사용할 수 있다.스택의 ADT푸시(push): 데이터 푸시팝(pop): 최근에 푸시한 데이터 팝하고, 그 데이터 반환가득 찼는지 확인(isFull): 스택에 들어 있는 데이터 개수가 max size인지 boolean비었는지 확인(isEmpty): 스택에 들어 있는 데이터가 하나도 없는..