📚 1. 사전 지식 참고 : pnpm vs npm vs yarn pnpm pnpm은 npm의 단점을 개선한 모듈 관리 프로그램이다. npm과 yarn의 가장 큰 문제인 프로젝트 간 사용되는 dependencies의 중복 저장을 보완하였다. npm과 yarn은 node_modules 내부에 flat 하게 패키지를 설치하여 관리한 반면, pnpm은 이러한 호이스팅 방식 대신 다른 devdependencies를 해결하는 전략인 content-addressable storage를 사용했다. server 컴포넌트 vs client 컴포넌트 참고 : 'use client' Server 컴포넌트 : 서버로부터 data받아오기 Client 컴포넌트 : 파일 첫 줄에 'use client' 붙이면 적용. event li..
📚 1. 사전 지식 dependencies vs devDependencies 참고 : stackoverflow dependencies(배포용) $ npm install 라이브러리로 설치한 항목들 애플리케이션 동작과 연관된 라이브러리 devDependencies(개발용) $ npm install 라이브러리 --save-dev 혹은 $ npm install 라이브러리 -D로 설치한 항목들 개발할 때 필요한 라이브러리 설치 🤩 2. 실제로 구현하기 1. 기존 package.json 2. 변경할 사항은? dependencies : tailwindcss, RTK, StompJS, react-query, axios, html-toimage, moment, react-query .. devDependencies : ..
📚 1. 사전 지식 React Native 공식문서 React vs React Native React : Facebook에서 만든 프론트엔드 Javscript 라이브러리 DOM이 생성이 되고 난 후에 Virtual DOM을 이용하여 변화된 곳을 캐치하여 변화된 DOM으로 변경 Virtual DOM 작동방식 화면 출력을 ReactDOM 사용 JSX문법을 사용 : HTML문법 React-Native : React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크 Bridge를 이용하여 ios, android 각각의 네이티브 언어에 접근 화면 출력을 AppRegistry 사용 JSX문법을 사용 but HTML 문법 X 기존으l CSS 지원 X, flexbox 이용한 레이아웃 제작 제공 ..
📚 1. 사전 지식 React Query와 Stale 출처 React Query는 기본적으로 캐싱된 data를 stale 한 상태로 여긴다 # stale : 신선하지 않은. 신선하다 함은, 서버에서 조회한 데이터는 그때 당시의 데이터 snapshot이고, 외부 요청으로 서버 데이터가 변경이 되었다면 내 브라우저가 가진 데이터는 오래된 낡은 데이터가 되었으므로 stale 하다고 말하는 것 stale 한 상태가 되면 다음의 경우 refetch 된다. 1. 새로운 query instance가 마운트 될 때 : 즉, page를 이동했다가 왔을 때 2. 브라우저 화면을 이탈했다가 다시 focus 할 때 3. 네트워크가 다시 연결될 때 4. 특별히 refetchInterval(시간 간격)을 설정한 경우 또한, qu..
📚 1. 사전 지식 React 렌더링 성능 최적화 방법 참고 : 렌더링 성능 최적화하는 7가지 방법, React.memo()로 최적화 1. useMemo : 함수에서 리턴되는 값을 메모이제이션 const average = useMemo(() => { console.log("calculate average. It takes long time !!"); return users.reduce((acc, cur) => { return acc + cur.score / users.length; }, 0); }, [users]); 2. React.memo : 컴포넌트 메모이제이션 순수 함수 컴포넌트와 렌더링 성능을 향상하는 기능. React.memo로 감싸진 함수의 결괏값은 메모리에 저장되는데, 같은 인풋값으로 해당 ..
📚 1. 사전 지식 참고 : 웹 접근성이란?, 웹 접근성 개선하는 법, Next.js의 _document와 _app에 대하여 웹 접근성 : 장애인이나 고령자분들이 웹 사이트에서 제공하는 정보를 비장애인과 동등하게 접근하고 이용 할 수 있도록 보장하는 것으로 웹 접근성 준수는 법적의무사항 웹 접근성 개선하는 법 1. 대체 텍스트 포함하기 이미지, 로고, 그림 등의 그래픽에 대체 텍스트를 사용하세요. 2. 높은 색상 대비 선택 3. 정보가 있는 링크 텍스트 사용 4. 텍스트 크기 및 정렬 확인 5. 서식 지원 텍스트 사용 6. 번호 매기기 및 글머리기호 목록 사용 _app : 서버로 요청이 들어왔을 때 가장 먼저 실행되는 컴포넌트로, 페이지에 적용할 공통 레이아웃 역할 Component 속성값은 서버에 요청..
📚 1. 사전 지식 참고 링크 : React Query, Custom Hook, React-query에 Typescript 적용하기 React Query란? React Query는 서버의 값을 클라이언트에 가져오거나, 캐싱, 값 업데이트, 에러핸들링 등 비동기 과정을 더욱 편하게 하는 데 사용된다. React Query의 장점으로는, 아래의 구현하기 귀찮은 일들을 대신 수행한다. 캐싱 get을 한 데이터에 대해 update를 하면 자동으로 get을 다시 수행한다. (예를 들면 게시판의 글을 가져왔을 때 게시판의 글을 생성하면 게시판 글을 get 하는 api를 자동으로 실행 ) 데이터가 오래 되었다고 판단되면 다시 get (invalidateQueries) 동일 데이터 여러번 요청하면 한 번만 요청한다. ..
📚 1. 사전 지식 JWT란? JWT(Json Web Token) : Json 포맷을 이용하여 사용자에 대한 속성을 저장하는 Claim 기반의 Web Token 토큰 자체를 정보로 사용하는 Self-Contained 방식으로 정보를 안전하게 전달 주로 회원 인증이나 정보 전달에 사용되는 JWT는 아래의 로직을 따라서 처리 애플리케이션이 실행될 때, JWT를 static변수와 localStorage에 저장한다. static변수에 저장하는 이유는 HTTP통신을 할 때마다 JWT를 HTTP헤더에 담아서 보내야 하는데, localStorage에서 계속 불러오면 overhead가 발생하기 때문이다. 클라이언트에서 JWT를 포함해 요청을 보내면 서버는 허가된 JWT를 검사한다. 또한, 로그아웃을 할 경우 local..
