분류 전체보기 (21) 썸네일형 리스트형 Thread Multi Process다중 프로세스는 리눅스의 fork 방식을 사용합니다. 부모 프로세스가 사용자 요청을 수신하고, 자식 프로세스를 만들어서 이를 처리합니다.멀티 프로세스를 코드에 어떻게 적용할까요? 아래 코드와 같이 독립적인 함수들을 독립된 프로세스로 실행하고 마지막에 합치는 방식으로 적용할 수 있습니다. int main(){ int resA = funcA(); int resB = funcB(); print(resA + resB); return 0;}이건 다중 프로세스 프로그래밍과 프로세스 간 통신(IPC)으로 구현이 가능합니다. 다만, 각 프로세스의 주소 공간이 서로 격리되어 있기 때문에 프로세스 간 통신이 어렵습니다. 이로 인해 프로세스 자체 주소공간이 있어 복.. 힙 메모리 할당 (Heap Memory Allocation) 구현 본격적으로 힙 메모리 할당에 들어가기 전, 스택 메모리 할당과 힙 메모리 할당을 배열 선언으로 간단하게 비교해 보겠습니다. 배열 선언스택(stack)과 힙(heap)은 다른 메모리 세그먼트(memory segment)입니다. 스택은 할당과 해제의 순서가 정해져 있지만 힙은 할당과 해제의 순서가 없거나 무작위입니다. 배열을 정적으로 선언하면, 컴파일 시점에 스택에 메모리를 할당합니다.int arr[3];arr[0] = 1;arr[1] = 2;arr[2] = 3;함수가 끝나면 스택 프레임이 사라지고 arr 변수도 함께 소멸됩니다. 반면, 배열을 동적(malloc)으로 선언하면 런타임 시점에 힙영역에 메모리를 할당합니다.int *arr = malloc(sizeof(int) * 3);arr[0] = 1;arr[.. 그래프 알고리즘 (Graph Algorithm) 그래프와 관련된 용어와 자료구조, 알고리즘을 정리합니다. 목차용어 정리인접 행렬, 인접 리스트관련 알고리즘 용어 정리graph: 정점과 정점 사이를 연결하는 간선으로 이루어진 비선형 자료구조 vertex: 정점 adjacent vertex: 특정 정점에 직접 연결된 정점 edge: 방향이 없는 그래프에서 두 정점을 연결하는 간선 degree: 정점에 연결된 간선의 수 in-degree: 정점으로 들어오는 간선의 수 (방향이 있는 그래프)out-degree: 정점에서 나가는 간선의 수 (방향이 있는 그래프) cycle: 특정 정점에서 출발하여 원래 정점으로 돌아오는 경로 weighted graph: 간선에 가중치 값이 매겨진 그래프 네트워크 모델(network model): 현실 세계의 .. [정글 에세이] 나를 돌아보기 지난 날 돌아보기기초 없는 개발 CS 지식이 전무한 상태로 웹개발을 한 지 3년이 지났다. 경력이 쌓이면서 구현 능력이 늘어갔지만, 복잡한 프로그램을 개발하면 분명히 한계를 느낀다. 안정적이고 성능이 좋아질 방법이 있을텐데 모른다는 답답함이 찜찜하게 남는다. 그리고 이런저런 일과 핑계로 해소되지 않아왔다. 기본의 중요성앞으로 IT 사업 뿐만 아니라 모든 일에서 AI 활용은 필수재가 될거라 본다. 이미 잘 활용하는 사람과의 생산성 격차는 어마어마하게 벌어져있다. AI는 관련 지식과 숙련도가 좋은 사람에게 더 유용하고, 나머지 사람들의 파이를 모조리 먹어 치울 것이다. 그래서 어떤 분야든 오히려 기초와 기본 지식을 쌓는 걸 강조하는 시대가 되어가고 있다고 본다. 5개월 간 얻을 거CS 지식컴퓨터가 어떻게 동.. 스토리북 인터렉션 테스트는 왜 이렇게 잘 깨질까? 세줄 요약테스트를 한꺼번에 돌리면 깨진다.전체 테스트와 개별 테스트의 차이를 이해하고, 스토리 간 독립성을 보장했다.테스트결과가 파랗게 물들었다! 동기TDD를 도입했습니다. 그런데 전체 테스트를 돌리면 자꾸 깨져서 수시로 테스트를 돌릴 수가 없었습니다.그래서 문제가 발생시 빠르게 확인하는 이점을 얻을 수가 없었습니다. 저는 스토리북으로 UI를 만들고 컴포넌트 테스트를 작성합니다.그동안 개별 테스트를 통과시키고 컴포넌트 명세의 용도로 사용하고 있었는데, 사실 테스트 코드를 쓰는 본질은 그게 아니라고 생각합니다. 지금은 마치 맥북을 사놓고 인터넷과 유튜브만 하는 느낌이랄까요..?테스트 코드를 통해 기존 기능과 관련된 기능을 개발한다던지 수정한다던지 리팩토링을 진행할 때기존 테스트가 깨지지않는지 수시로 체크하.. React 개발자가 구글 oAuth를 이해하기 3년 전, NextAuth를 이용해서 구글 로그인을 처리한 적이 있습니다. 그 당시 oAuth를 이해했다고 생각했는데, 이번에 애플과 구글로그인을 클라이언트 사이드에서 구현하면서 어려움을 겪었습니다. 사실 NextAuth가 code 발급과 token, 그리고 JWT를 관리해 줘서 내부에서 어떤 일이 일어나는지 자세히 알지 못했습니다.서비스의 백엔드 서버에서 토큰을 발급받고, 모바일도 함께 처리하다보니 Access Token과 Refresh Token을 클라이언트에서 관리해야 했습니다. 이걸 어떻게 처리해야 할지 몰라 한동안 헤맸습니다. 이번 기회에 클라이언트에서 토큰을 활용한 로그인 관리와 구글 서버, 프론트엔드, 백엔드 각자의 역할과 토큰들을 정리해 보았습니다. oAuth 시스템이 잘 이해가지 않을 때.. React 렌더링 (feat. Reconciliation & Fiber 동작) 리액트 디자인 원칙에서 스케줄링의 내용은 다음과 같습니다.If something is offscreen, we can delay any logic related to it. If data is arriving faster than the frame rate, we can coalesce and batch updates. We can prioritize work coming from user interactions (such as an animation caused by a button click) over less important background work (such as rendering new content just loaded from the network) to avoid dropping fr.. RSC가 비동기 함수를 관리하는 방법 (feat. Observer Pattern) 옵저버 패턴 (Observer Pattern)비유하면, 구독하는 유튜버의 새 유튜브 콘텐츠 알림을 받는 것과 같습니다. 즉, 객체의 상태(유튜버 콘텐츠)를 지켜보고 싶은 관찰자(구독자)들에게 상태 변화(새 콘텐츠)를 알려주는 디자인 패턴이라고 할 수 있습니다. 이 패턴의 핵심은 관찰자들을 등록시키고, 이벤트가 발생하면 변화됨을 통지하는 거죠. 관찰자들은 변화가 일어났는지 직접 확인할 필요가 없고, 변화에 따른 적절한 행동만 수행하면 됩니다. 이는 update 메서드를 정의하여 이벤트 발생 시 동작되도록 합니다. 그럼 이 패턴을 어디에 적용하면 좋을까요?첫 번째로 (사용자에 이벤트 등) 외부에서 발생한 이벤트에 대해 대응하거나,두 번째로 객체의 속성 값이 변화할 때 사용할 수 있습니다. 자, 그럼 첫 번째.. [Next.js] 라우팅과 네비게이션의 동작 라우팅과 네비게이션 동작을 이해하는데 도움이 되고자 How Routing and Navigation Works 내용을 더 상세하게 정리했습니다. 1. 코드 분할 (code splitting) 유저가 페이지에 접속하면 최초 경로에 대한 분할된 코드만 응답합니다. 이게 가능한 이유는 Next.js 서버가 각 경로마다 코드를 별도의 청크로 코드 분할하기 때문입니다. 후속으로 경로를 탐색해도 새로 탐색한 경로에 대한 코드만 가져오게 됩니다. 따라서 요청에 따른 응답 데이터양과 전송 시간이 줄어듭니다. 2. 미리 가져오기 (prefetching) 유저가 링크로 된 경로로 이동하기 전에, Next.js는 코드를 미리 로드합니다. Link 컴포넌트의 prefetch를 설정하면, 위 이미지와 같이 사용자의 뷰포트.. React Server Components 딥 다이브 누군가 RSC가 무엇이냐?라 묻는 질문에 대한 답을 한 번 생각해 봤습니다.그에 대한 저의 대답은 "RSC는 서버에서 렌더링 되는 새로운 컴포넌트로, 빌드 시 JSX 트리를 구성하여 HTML을 산출한다."입니다. 어떻게 이렇게 대답할 수 있을까요? 자, 우선 RSC가 일반적인 리액트 컴포넌트와 어떻게 다른지 보겠습니다. 아래는 일반적인 컴포넌트와 서버 API입니다.클라이언트가 요청을 보내면, 서버는 db에서 데이터를 찾아서 응답합니다. 클라이언트는 이 데이터를 받아서 렌더링하죠.// bundle.jsfunction Note({id}) { const [note, setNote] = useState(''); // NOTE: loads *after* first render. useEffect(() =>.. 이전 1 2 3 다음
