그래프 라이브러리 학습라이브러리 철학, 기본 동작 방식, 데이터 관리 방식 학습성능 파악 - 노드 및 엣지 개수에 따른 FPS 확인스타일 커스텀 가능 범위 파악그래프 라이브러리 기반 메인 화면 성능 최적화 아키텍처 설계그래프 라이브러리는 미리 최적화 안해두면 나중에 아예 코드를 새로 짜야된다고 해서 최적화 아키텍처 설계중입니다데이터 관리 방식 학습 및 설계원본(서버) 데이터 / 프로젝트 데이터 / 화면에 보여지는 데이터별도 관리하여 컴포넌트 내에서 필요한 부분만 최소한으로 구독하고 사용하도록현재 화면에 보여지는 데이터만 우선 렌더링하도록데이터 캐싱 방식 설계tanstack query 활용 방식 및 코드 구조도 설계브라우저에서 변경 사항이 없는데 다시 화면(픽셀) 그리는 작업하지 않도록 코드 구조 설계불필..

웹뷰 사용 이유1. 코드 푸시 서비스가 종료된 상태에서, 앱 업데이트를 수월하게 하기 위함 (가장 큰 이유임)- 별도로 코드 푸시 서버를 운용하는건 배보다 배꼽이 더 커지는 기분- 수익이 없는 상태라 유료 EAS 기능을 사용하는 것도 굳이..? 싶음2. 2d 그래픽 렌더링 엔진으로 pixi.js라는 라이브러리를 활용하는데(데모까지 구현해본 상황), rn 버전은 프로덕션용으로 안전한지 확신 X3. 추후에는 앱 서비스를 데탑에서 활용할 수 있게 웹으로 사용할 수 있게 지원하는 것을 염두하고 있음 RN vs WebView 구현 장단점 비교RN단점업데이트 할 때마다 앱스토어에 요청하거나 유료 EAS툴 사용해야함react보다 렌더링에 많이 신경써야함장점기능 주요한 부분에 웹뷰보다 적합함 (런타임에 compile하..

1. 렌더링과 성능렌더링이란?화면을 그리는 함수가 실행되어, 화면을 그리기 위한 계산이 수행되는 과정렌더링 성능 최적화란?함수 내부 로직 실행 시간 최소화함수 호출 횟수 최소화 (👈🏻 React.memo 의 역할) = 불필요한 리렌더링 최소화[ 리렌더링 발생 조건 ]부모 컴포넌트가 리렌더링 될 때부모 컴포넌트에서 전달받는 Props가 변경될 때 (부모 컴포넌트의 리렌더링을 전제로 함)자신의 State가 변경될 때Provider로 감싼 컴포넌트의 경우, Context 값이 변경될 때등등 2. React.memo란?: 리액트의 렌더링 성능 최적화 도구부모 컴포넌트가 리렌더링 되었지만 Prop에 변경이 없는 경우, 자식 컴포넌트는 리렌더링 되지 않도록 한다.= 변경 사항이 없는, 화면의 일부 또는 전체를 ..

js라는 것은 항상 엔진 위에서 동작하죠. 그리고 js는 싱글 스레드 방식으로 동작합니다.이 말은 js를 실행시키는 엔진의 메모리에 실행 컨텍스트 스택(콜스택)이 하나임을 의미합니다.이 실행 컨텍스트 스택 안에서 최상위에 존재하는 실행 컨텍스트만 실행 중인 상태이며, 나머지(태스크)는 대기 중인 상태인 것이죠. 즉, js(이하 js 엔진과 동일)는 한 번에 하나의 함수만 실행 가능합니다. 그런데 js에서도 비동기 처리가 가능합니다.비동기 처리를 하면 해당 작업의 완료를 기다리지 않고 다른 작업을 실행시킬 수 있습니다.(즉 블로킹이 발생하지는 않지만, 태스크의 작업 완료 순서가 보장되지는 않죠)분명 한 번에 하나의 함수만 실행 가능하다고 했는데, 이게 어떻게 가능한 것일까요? 그건 바로 브라우저나 nod..

스킨 사용중에 아래의 문제를 발견했다발견한 문제들코드블럭 내 복붙한 글에 다크모드 적용 안됨 (글자가 어두워 안보임)텍스트 에디터에 복붙한 글에 다크모드 적용 안됨 (배경 흰색, 글자 검정 유지됨)밝은 하이라이트+글자에 다크모드 적용 안됨 (밝은색 하이라이트가 어둡게 변하지 않아 흰색으로 변한 글자가 잘 안 보임) 원인 분석--대충 뻘짓한 과정--처음에는 hljs라는 스타일이 적용되고 있는 걸 보고 스킨 css 적용 순서 문제이거나 css 상속 문제인가 싶어 찾아봤는데 그건 아니었다. 그러면 다크모드 토글여부를 mutationObserver로 관찰해서 변하는 값에 따라 css를 적용해줘야 하나 고민했지만, 너무 복잡하게 푸는 느낌이 들어서 다른 기본 요소들을 다시 짚어보았다.복붙할 때 HTML이 어떻게 ..

영상을 보고 정리하는 데에 걸리는 시간을 줄이고 싶어서, Python으로 비디오 스크립트를 분석하고 내용을 요약해주는 프로그램을 만들다 문득 이런 궁금증이 들었습니다. "왜 다른 언어들은 굳이 가상환경을 사용하지 않아도 잘 동작하는데, Python은 가상환경을 사용하는 걸까?"그래서 제가 사용하는 주 언어인 Javascript와 비교하며 정리해보게 되었습니다!우선 가상환경의 역할을 한줄요약하자면 '전역 환경과 별도로 각 프로젝트만의 Python 인터프리터와 패키지 환경을 생성해준다.' 입니다.위 질문에 대해 결론부터 말하자면... python 은 기본적으로 전역환경에 패키지를 다운로드합니다.그런데 프로젝트별로 인터프리터 버전과 패키지를 따로 관리하고자 하는 필요성이 대두되며~ 전역과는 독립된, 서로 영향..

1. 도커란?서버를 가상화하는 방법에는 여러가지가 있는데, 그 중에서도 반가상화에 해당하는 것이 도커이다.반가상화란 컨테이너 가상화라고도 하며, 운영체제를 두고 그 위에서 여러 가상환경을 운용하는 방식이다. OS 커널을 여러 가상환경이 공유하기 때문에, 각각의 host OS와 커널을 사용하는 전가상화 등의 방식보다 서비스 실행 속도가 빠르다도커를 사용하는 이유하나의 물리적 서버를 나눠서 여러개의 서버처럼 작동하게 만드는 것을 도와준다.안전성 강화항상 같은 환경 구현 가능환경 구축의 편리성환경의 일관성여러 컨테이너 운영을 통해 하나의 서버로 여러개의 작업 가능 (여러 서버를 쓰는 효과)가볍고 빠름. 컨테이너 각각이 host OS를 사용하는 것이 아니고, 하나의 host OS 를 공유하기 때문에 실행 속도가..

0. 문제https://www.acmicpc.net/problem/2870 1. 문제풀이 핵심이 문제에서는 문자열에서 숫자를 추출하여 정렬된 순서로 출력하는 것이 목표입니다.중요한 점은 숫자를 추출할 때 불필요한 0을 제거하고, 긴 숫자이기 때문에 문자열로 다루어야 한다는 점입니다. 2. 문제풀이에 사용된 개념  2. 숫자 범위 제한으로 인한 문자열 처리최대 100자리의 숫자를 처리하기 위해 string을 사용하여 저장해야 합니다.3. 문자열 정렬문자열을 정렬할 때는 아스키코드 순서에 따릅니다. 숫자 문자열을 실제 숫자 순서로 정렬하려면 커스텀 비교 연산자를 사용해야 합니다.긴 숫자 문자열의 경우 자리수가 길수록 더 큰 수이며, 자리수가 같다면 단순히 문자열 대소 비교를 사용하면 됩니다.  string...

0. 문제https://www.acmicpc.net/problem/1992 1. 문제풀이 핵심 [핵심 아이디어] 작게 쪼개지며 반복되는 패턴을 찾아 재귀 함수로 구현하는 것이 핵심입니다. [반복되는 패턴]1. 현재 구역 전체를 훑는다.2. 서로 다른 숫자가 나오면 현재 구역을 4등분(재귀 호출)한다.3. 모두 같은 숫자이면, 해당 숫자로 압축하여 반환한다. [종료 조건]재귀의 종료 조건은 len == 1인 최소 단위가 됩니다. 2. 문제풀이에 사용된 개념[알고리즘 풀이 규칙]로직이 반복되는 경우(+ 매개변수가 바뀌는 경우)에는, 재귀함수를 짭니다. [재귀 구현 방법]재귀를 어떻게 구현할 것인지에 대해 2가지 방법이 있습니다.전체 코드 중 주요 로직을 sudo 코드 형식으로 작성하여 두 방식의 ..

0. 문제https://www.acmicpc.net/problem/1629 세 개의 정수 a, b, c가 주어졌을 때, a^b % c의 값을 0.5초 안에 구해내는 문제입니다. 1. 문제풀이 핵심간단히 핵심만 짚고 넘어가겠습니다.   1. 모듈러 연산의 규칙을 알고 활용해야 한다큰 수의 연산을 피해야하기 때문에 모듈러 연산 규칙이 필요합니다. 아래가 모듈러 연산 규칙입니다. 아래서 자세히 설명하겠습니다. //모듈러 연산의 규칙(a * b) % c = (a % c * b % c) % c큰 수의 연산이란- a와 b의 최대 범위가 모두 21억이므로 long long으로 선언해도 그 둘을 곱한 값은 long long의 범위를 벗어날 수 있습니다.그러므로 a와 b를 곱하기 전에, 모듈러 연산 규칙을 사용해서 "a..