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): 스택에 들어 있는 데이터가 하나도 없는..

배열 배열은 차원과 무관하게  컴퓨터 메모리 구조에 따라 1차원 공간에 연속 할당된다. 배열은 임의 접근이라는 방법으로 배열의 모든 위치에 있는 데이터에 단 한 번에 접근할 수 있다. 따라서 데이터에 접근하기 위한 시간 복잡도는 O(1)이다. 맨 뒤에 삽입할 경우: O(1)맨 앞/중간에 삽입할 경우: O(N)(N은 밀어야하는 데이터 개수) 배열 선택 시 주의사항: 시간 복잡도 뿐만이 아니라 메모리 크기도 확인하자.할당할 수 있는 메모리 크기를 확인해야 한다. 데이터가 너무 많으면 런타임에서 배열 할당에 실패할 수 있다. 보통 정수형 1차원 배열은 1000만 개, 2차원 배열은 3000 * 3000 크기를 최대로 생각.중간에 데이터 삽입이 많은지 확인해야 한다. 맨 앞/중간에 데이터를 빈번하게 삽입하면 시..

파이썬의 자료형은 크게 숫자(numbers), 시퀀스(sequence), 매핑(mapping) 등으로 나눌 수 있다.숫자(numbers): 숫자를 나타내는 자료형으로는 정수(int), 부동소수점수(float), 복소수(complex)가 있다.시퀀스(sequence): 문자열(str), 리스트(list), 튜플(tuple), 사용자 정의 클래스가 시퀀스에 속한다.매핑(mapping): 딕셔너리(dict)는 키(key)와 값(value)의 짝으로 이뤄집니다. 이런 것을 매핑이라고 한다.불(bool): 참, 거짓을 표현하는 불(bool)도 있다.세트(set): 집합을 표현하는 세트(set)도 있다.자료형의 큰 종류는 위와 같고 자세한 자료형별 문법 사항은 아래의 링크를 참고해서 온전히 체득할 때까지 수시로 열..