해시는 해시 함수를 사용해서 변환한 값을 인덱스로 삼아 키와 값을 저장해서 빠른 데이터 탐색을 제공하는 자료구조이다.보통은 인덱스를 활용하지만 해시는 키와 데이터를 일대일 대응하여 저장하므로 키를 활용해 데이터에 바로 접근한다.해시의 특징단방향으로 동작: 키를 통해 값을 찾을 수 있지만 값을 통해 키를 찾을 수는 없다.찾고자 하는 값을 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)도 있다.자료형의 큰 종류는 위와 같고 자세한 자료형별 문법 사항은 아래의 링크를 참고해서 온전히 체득할 때까지 수시로 열..

앞으로 공부하게될 "코딩 테스트 합격자 되기" 서적의 내용을 정리해보면서 코딩 테스트를 본격적으로 준비해보려 한다. 문제풀이에 앞서 앞으로 다음과 같은 문제풀이 전략을 기반으로 체계적으로 문제풀이를 해나가면 좋을 것 같다. 전체 시간의 50 ~ 60%는 문제 분석에 할애하자문제를 동작 단위로 쪼개서 분석하자제약 사항을 파악하고 테스트 케이스를 추가하자입력값을 분석하여 주어진 제한시간을 고려한 시간복잡도에 맞는 알고리즘을 선택하자핵심 키워드를 파악하여 알고리즘을 선택하자데이터의 흐름이나 구성을 파악하여 적절한 자료구조를 선택하자의사코드로 사전에 설계하자의사코드는 프로그램 언어가 아닌 자연어세부 구현이 아닌 동작 중심으로 작성하자문제 해결 순서로 작성하자구현 단계로 갈수록 수정이 상당히 어려워지므로 의사코드..

Docker란? 애플리케이션 구축, 구현 및 테스트를 위해 격리된 가상화 환경을 생성하는 서비스형 플랫폼 Docker는 컨테이너 엔진으로 리눅스 커널 기능을 사용하여 운영 체제 위에 컨테이너를 만들고, Docker 자체는 서비스의 컨테이너를 관리하는 데몬으로 실행된다. Docker Image란? 파일로 어플리케이션 실행에 필요한 독립적인 환경을 포함하며, 런타임 환경을 위한 일종의 템플릿 소스 코드, 라이브러리, 종속성, 도구 및 응용 프로그램을 실행하는데 필요한 기타 파일을 포함하는 불변(변경 불가) 파일 이미지는 읽기 전용이므로 스냅샷이라고도 하며, 특정 시점의 애플리케이션과 가상 환경을 나타낸다. 이러한 일관성은 도커의 큰 특징 중 하나로 개발자가 안정적이고 균일한 조건에서 소프트웨어를 테스트하고 ..

1월에는 소스마켓 프로젝트의 완성도를 높이는 데 초점을 맞췄다. 새롭게 합류한 프론트엔드 개발자님과 eslint 통일 및 타입스크립트 도입 등의 사항들에 대해서도 논의를 했던 주였다. 또 저작권 침해 페이지를 대신 맡아주셔서 여유가 생겨 이력서도 쓰고 지원도 해보며 시간을 보냈다. 소스마켓에 대해서는 커스텀 훅을 사용하여 각종 목록들의 get 요청을 통한 렌더링이 효율적으로 작동하도록 수정하였다. 커스텀 훅에 대해서는 아직 많이 익숙하지는 않은데, 생존 코스를 통해 배운 것들을 참고해서 좀 더 효율적으로 바꾸고 싶은 생각이 있다. 아직은 다소 중복되는 부분들이 있는 것 같다. 또한 sass 기능들을 좀 더 탐구해보며 mixin 기능을 활용하여 각종 테이블들의 css를 간소화했다. 중복되는 부분들은 아주 ..