개발블로그

node와 npm..사용하긴 하는데 뭔지 정확히는 알지못하고 사용하는 것 중 하나이기에 자세히 파헤쳐 보고자 한다. Node.js자바스크립트는 웹브라우저에서 사용하는 언어이다. 이 자바스크립트를 브라우저가 아닌 다른 환경에서 사용하기위한 런타임 환경이다. 그런데 런타임 환경이 뭐지? 이건 엔진과 다른걸까?- 런타임 환경이란? 코드가 실행될 때 필요한 것들 예를 들어 엔진, api, 메모리 관리 등을 제공하는 환경이다. 엔진은 런타임 환경에 속하는 것 중 하나로 자바스크립트 코드를 읽고 기계어로 바꿔서 실행하는 일을 한다(브라우저와 노드는 둘다 Chrome의 V8 엔진을 사용). 네트워크 통신(네트워크 모듈)이나 DOM 조작(렌더링/DOM api), setTimeout(web api) 등은 런타임 환경에..

리액트 네이티브는 3개의 스레드로 작동한다. 1. javaScript thread2. shadow thread3. main thread 이렇게 세가지 스레드로 분리된 이유는 각각 다른 작업을 하면서 부드러운 화면처리가 가능하도록 만든다. 화면을 그리면서 js계산을 하고, 레이아웃도 가능하도록 할 수 있다. JavaScript thread- js thread에서는 우리가 작성한 리액트 코드가 실행된다. 리액트 코드가 실행된다는 것은 화면을 그리는게 아니라 컴포넌트 함수가 호출되고 JSX가 계산된다는 뜻이다. 컴포넌트 렌더링(JSX 계산), state/props 계산, 비즈니스 로직, api 응답처리, 애니메이션 계산 등이 수행된다.- 리액트 네이티브에서는 Hermes라는 자바스크립트 엔진을 사용한다. 일..

26년이 지난지 벌써 한달이 다되어간다. 교육 때 회고를 한번 하고 취업을 하고서는 한번도 회고를 하지 않았는데, 아마도 지금까지 해온게 없다고 생각하며 회피하면서 회고를 하지 않았던게 아닌가 싶다.변명아닌 변명을 하자면 그동안 건강이 좋지 않았고 작년 하반기부터 증상이 완화되면서 업무에 여유가 생겼다. 그래서 이번 회고를 작성할 용기(?)가 생겼던 것 같다. 앞으로 더 발전하기 위해 건강하게 나를 돌아보자 1. Keep1) ui/ux에 대한 관심ui/ux에 대한 관심으로 디테일한 부분을 캐치할 수 있는 것 같다. 내가 만드는 앱을 의식적으로 사용하면서 불편하다고 느꼈던 것을 개선했던 경험이 있다. 많은 양의 아이템을 렌더링 하면서 버벅거리는 부분이나 다양한 상황에서의 에러처리 등이 있었다. 또 추가적..

🔨 기초 세팅 : 타입스크립트와 타입 버전 eslint 설치1. 타입스크립트 설치npm install --save typescript @types/node @types/react @types/react-dom @types/jest # 패키지 설치npx tsc --init # tsconfig.json 파일 생성(jsconfig.json은 삭제한다) 2. tsconfig 설정 (애플코딩 참고)플젝의 tsconfig는 아래와 같이 설정했고, 그 외로 설정할 수 있는 속성들은 그 아래에 작성했다// tsconfig.json{ "compilerOptions": { "baseUrl": "src", "module": "esnext", // 리액트 프로젝트에서 추천(최신 ECMAScript 모듈) ..

React Navigation은 react native에서 화면이동(routing) 시 사용되는 라이브러리로, 페이지가 쌓이는 구조(stack 구조)를 제공한다. Stack 뿐만 아니라 Tab(하단탭), Drawer(옆에서 열리는 전체메뉴) 등의 화면 이동 방식(네비게이터)도 가지고 있다. 네비게이터들은 서로 중첩이 가능하다. 우리 프로젝트에서는 Stack과 Tab 네비게이터를 사용했고, Stack 내 하나의 화면에 Tab을 중첩하여 사용했다. 📘 기본사용방법Stack 네비게이터를 생성 - 리액트 네비게이션은 내에서 실행할 수 있다.Stack.Screen은 화면의 이름과 렌더링되는 컴포넌트를 지정한다.네비게이터 타입의 키는 Stack.Screen의 name이 될 수 있다. 키의 타입이 undefin..

이번에 새로 만들어야 하는 페이지의 조건은 당근어플처럼상단탭이 있어 이동이 가능하고아이템이 무한스크롤로 정렬되고스크롤 시 탭이 상단에 고정되고중간에 랜덤 아이템이 나오는페이지였다. 조건이 많아 어떻게 구조를 짜야할지에 대해 고민을 많이했다. 1. FlatList vs ScrollView1) 무한 스크롤을 쓰다보니까 처음에는 FlatList로 작업했다- renderItem에서 분기처리해서 각 탭에 맞는 아이템을 렌더링- 고정될 탭 아래에 스크롤은 되지만 공통적으로 들어가는 컴포넌트가 있어 리스트 가공- 고정될 탭은 stickyHeaderIndices로 설정- 랜덤 아이템은 리스트를 또 새롭게 가공이렇게 되다보니 가공에 가공에 가공을.. 데이터가 티기고 티겨지는.. 너무 복잡해졌다또한 리스트는 state로..

문제현상이미지 아이템이 많으면 스크롤 시 버벅거림이 심해져 사용자 경험에 좋지 않은 영향을 주고 있으므로 수정이 필요했다 컴포넌트 구조* 페이지 : MainShop, BrandShop, ProductSearchResult -> 여기서 각각 ScrollView를 사용하고 있다* 컴포넌트 ProductList (FlatList 사용) -> 각 페이지의 ScrollView 안에 ProcudtList를 사용하고 있다 수정방법 1. 무한스크롤너무 많은 이미지를 한번에 보여주고 있어서 30개씩 아이템을 보여주는 무한스크롤을 사용했다. ScrollView의 onScroll 함수를 사용하여 화면의 끝에 닿을 경우 보여주는 아이템 개수(renderCount, renderList)를 수정하는 방식이었다.// Scrol..

api요청을 한 후 새롭게 적용된 데이터를 보여줘야할 때, 우리가 생각하는 것보다 늦게 데이터가 반영된다.이를 해결하기 위해 api 요청을 하면서 ui를 미리 반영하는 낙관적 업데이트라는 것을 한다. 대표적인 예로 좋아요 클릭 시 하트 색 또는 좋아요 개수를 변경시키는 것이 있다. (gif가 좀 이상하게 잘려서 아다리가 안맞음 ㅠ;) 이렇게 좋아요를 클릭해도 숫자가 늦게 반영이 되는 상황에서 낙관적 업데이트를 사용하면 좋아요를 클릭 시 개수를 바로 반영시킬 수 있다. 낙관적 업데이트 방법(두둥) 일단 나는 react-query를 사용하고 있고, 좋아요 클릭 시 post 요청을 보내고 있다. 1. useMutate의 onMutate에서 변경하고자 하는 쿼리를 queryClient.cancelQueries..

🐞 문제상황푸시 알람으로 페이지 진입한 후 댓글 작성 시 작성한 댓글이 반영되지 않음댓글 작성후에는 리액트 쿼리의 쿼리 무효화로 댓글 정보가 리패치 된다 const { mutate: postComment } = useMutation({ // .. onSuccess() { queryClient.invalidateQueries({ queryKey: [type, 'detail', idx, isLogin], }); queryClient.invalidateQueries({ queryKey: ['comment'] }); }, }) 💡 해결과정이것저것 시도해보다가1. 푸시 알람으로 페이지 진입 시 queryClient.getQueryData가 unde..

이전부터 리액트 네이티브 프로젝트에서 ios 시뮬레이터를 실행시키면 절대 한번에 실행되는 법이 없었다. 그래서 그때도 어떻게 에러를 해결했는지 기록해놨었는데, 그걸 참고해도 실행이 안되더라는😂 그래서 또 다시 작성한다. npm run ios로 스트레스 받지 않는 그날을 위해1. pod install깃에서 프로젝트를 받고 npm run ios를 하기 전 pod install(프로젝트에 필요한 라이브러리 설치)을 했다. 하지만 언제나 여기부터 막혔었다. 항상 다른 이유로..😇 이번에는 아래와 같은 에러가 떴다rbenv: pod: command not foundThe `pod' command exists in these Ruby versions:2.7.53.2.2 pod 명령어를 사용할 수 없다는 것은1...