replit expo app 개발기
·
개발
replit을 사용하여 하이브리드 앱 개발을 진행하고 있습니다.아직 매우 초반 단계에 머물고 있으며 간단하게 사용기를 작성해보려고 합니다.replit 이란?아시는 분들은 다 아시겠지만 replit은 최근 AI를 통해서 자연어로 코드를 생성하는데 특화된 서비스입니다. 최근 사용 후기들을 보면 복잡한 어플을 개발 및 유지보수 하기엔 부족하나 개발을 잘 모르시는 분들이 mvp 제작에 사용하는 것에는 매우 좋은 효용을 보여주고 있습니다.replit 사용기웹 프론트 개발자이지만 사이드프로젝트로 앱을 만들기로 결정하고 앱을 만드려고 하니 배워야 할 것이 많아 replit을 사용하기로 결정했습니다.템플릿을 선택할 수 있는데 여기서 expo를 선택하여 개발을 시작했습니다.Claude로 기능 명세 작성하기replit의 ..
TanStack Query 활용 팁
·
개발
비즈니스 로직이 복잡해질수록 API 호출·캐싱 관리도 한층 까다로워집니다. React(Next.js) 프로젝트에서 TanStack Query를 사용하며 얻은 세 가지 핵심 패턴을 공유합니다.1. Query Key 분리 관리 (productKeys)문제: 여러 컴포넌트에서 같은 리소스에 접근할 때 키 이름이 하드코딩되어 중복·오타 발생해결: 공통 키 집합을 한 곳에 모아두고 재사용export const productKeys = { all: ['product'] as const, lists: () => [...productKeys.all, 'lists'] as const, list: (businessId: number | null) => [...productKeys.lists(), businessId]..
디자인시스템 figma plugin으로 딸깍 개발하기
·
개발
요약컴포넌트를 제작할 때 매번 figma를 보면서 받아쓰기가 반복됨사내 디자인 시스템은 규칙이 명확, figma codegen을 사용하여 플로그인 개발복붙으로 컴포넌트 개발을 완료할 수 있음 플러그인 도입 배경간단한 예시를 통해 회사의 상황과 피그마 도입 배경에 대해서 설명하겠습니다.일단 회사에서는 디자인시스템을 적극적으로 도입하고 있었고 디자이너분들도 figma에서 디자인 시스템을 사용하여 디자인을 하는 상황이었습니다.기존에는 피그마의 dev 모드에서 본 코드를 직업 코드를 복불하는 작업으로 진행을 하였으나 디자인시스템으로 인해 규칙이 생기게 되었습니다.1. 디자인 시스템위 이미지는 피그마에서 디자인시스템을 적용하기 전(왼쪽), 후(오른쪽)입니다.보시는 것처럼 color에 회사에서 쓰는 컬러값(vars..
[sw 정글] pintos 3주차 - part 6: Copy on write(cow) ALL PASS
·
지난 글 모음
목표 이전의 pintos는 fork할 때 부모가 메모리가 할당된 page에 대해서 자식에게 복사할 때 같은 내용의 물리메모리를 자식에게도 할당 해주었다. 이처럼 같은 메모리가 두번 복사되는 것은 메모리 낭비이다. 그렇기 fork시에 자식과 부모가 같은 물리 메모리를 가리키게 하고 해당 페이지에 write 요청이 발생하면 새로운 물리메모리를 할당하여 주도록 수정한다. 💡 fork 시 물리메모리를 모두 복사하지 않고 부모와 같은 물리메모리를 공유하다가 write작업 시 해당 페이지의 물리메모리를 새로 맵핑한다. COPY시 코드 수정 fork시에 page와 frame은 복사본은 자식에게 주지만 frame에 있는 kva에는 부모와 자식이 같은 곳을 가리고 있다. bool supplemental_page_tabl..
[sw 정글] pintos 3주차 - part 4: Memory Mapped Files
·
지난 글 모음
테스트 케이스는 통과되나 다른 테스트 케이스에서 터질 가능성이 있는 코드입니다. 참고만 해주세요 목표 이번에는 Anonymous Memory가 아닌 File-Backed memory, 다시 말해 Memory Mapped Page에 대해 구현해보도록 한다. File-Backed page File-Backed page는 파일에 기반한 맵핑을 한다. 안에 내용은 디스크에서 존재하고 있는 파일을 복사한 것이다. page fault가 발생하면 바로 물리 프레임을 할당하고 파일의 데이터를 물리 메모리에 복사한다. 이때 I/O를 통해 데이터를 복사하는 것이 아닌 DMA 방식으로 디스크에서 파일을 복사한다. 이 때 유저 가상 페이지를 미리 가상주소 공간에 할당 해주는 것이 mmap이고 페이지와 물리 메모리가 연결된 경..
[sw 정글] pintos 3주차 - part 3: Stack Growth
·
지난 글 모음
목표 이제까지의 pintos의 stack 단일 페이지 stack으로 되어있었다. 이러한 스택을 적절한 page fault에서 stack을 추가로 할당하는 작업을 구현하는 것이 목표이다. vm_try_handle_fault 수정 if (page == NULL) { struct thread *current_thread = thread_current(); void *stack_bottom = pg_round_down(thread_current()->user_rsp); if (write && (addr >= pg_round_down(thread_current()->user_rsp - PGSIZE)) && (addr < USER_STACK)) { vm_stack_growth(addr); return true; }..
[sw 정글] pintos 3주차 - part 2: Anonymous page & Lazy Loading
·
지난 글 모음
Anonymous page 파일으로부터 매핑되지 않은, 커널로부터 할당된 페이지를 뜻한다. 익명 페이지는 힙을 거치지 않고 할당받은 메모리 공간 스택, 힙과 같은 실행 파일에서 사용됨 Lazy Loading(Demanding Paging) lazy loading은 메모리 로딩이 필요한 시점까지 지연되는 디자인 가상 page만 할당해두고 필요한 page를 요청하면 page fault가 발생하고 해당 page를 type에 맞게 초기화하고 frame과 연결하고 userprogram으로 제어권을 넘긴다. 지연로딩 순서 커널이 새 page를 요청하면 vm_alloc_page_with_initializer 호출 initializer는 페이지 구조를 할당하고 페이지 type에 따라 적절한 initalizer를 할당하..
[sw 정글] pintos 3주차 - part 1: Memory Management
·
지난 글 모음
1, 2 주차 pintos는 노션에만 대충 정리하여 블로그에 올릴 내용이 아닌듯하여 3주 차부터 올리려고 한다. 많은 정글 동료, 선배들이 좋은 내용을 많이 블로그에 작성해두었으니 부족한 내용은 좀 더 찾아보면 도움이 될 것이다. 기존 pintos 메모리 문제점 PML4를 가진 기존의 핀토스는 가상 메모리와 물리 메모리가 바로 맵핑되어 있다. 기존 핀토스 메모리 탑재 과정 각 세그멘트(stack, Data, BSS, Code)가 물리페이지에 탑재 heap 제외(pintos에는 heap이 없음) 이 페이지 테이블에 맵핑된 물리주소는 다른 프로세스와 같은 곳을 가리킬 수 있고 이럴 때 page fault가 된다. 그리고 한번 맵핑되면 물리메모리에서 항상 공간을 차지하기에 효율적인 메모리 관리가 되지 않는다...