스펜서 개발블로그

리액트를 활용하여 개발을 하면서 화면이 복잡한 경우, 성능 최적화에 신경을 쓰게 될 경우가 있다. 최근 진행한 프로젝트에서는 종합적으로 관리하는 페이지를 만들다보니 특정 페이지에서 렌더링 하는데 시간이 조금 더 소요되는 경우가 있었다.그래서 특정 상황에서 useCallback()을 사용하는 경우가 생겼는데 useCallback()에 대해 알아보기 전에 동일하게 Memorization으로 최적화에 사용하는 useMemo()에 대해 먼저 정리해보려고 한다. useMemo란?리액트에서 컴포넌트의 성능을 최적화하는데 사용하는 hook으로 특정 함수의 결과 값을 임시 메모리에 담아두고(캐싱) 사용하여 렌더링을 줄이고 계산을 최적화 하는데 사용한다. (Memoization 개념)useCallBack과의 차이점은 u..

새로 프로젝트를 받아 설치를 마쳤는데 import문과 html 요소들, tsconfig.node.json 파일의 moduleResolution, allowImportingTsExtensions에서 빨간 줄이 나오고 있었다.하지만 서버는 정상적으로 빌드가 되고 실행이 되고 있었다. 이럴 때는 내 디바이스(vscode)에 설치된 타입스크립트 버전과 프로젝트의 타입스크립트 버전이 다른지 체크해주면 된다. vscode를 사용 중이라면 'cmd(alt) + shift + p'를 눌러서 'Typescript 버전 선택'을 눌러서 '작업 영역 버전 사용'을 눌러주면 된다.   만약 설정에서 보고 싶다면 설정에서 typescript를 찾아보면 아래와 같이 확인 할 수 있다.아래 변경된 항목(4번째)를 체크해주면 된다.

회사에 iOS 개발자가 퇴사하게 되며 iOS 개발 경험이 있는 내가 임시로 인수인계를 받게 되었다.작년까지 iOS도 개발했기 때문에 xcode에는 이미 애플 개발자 계정으로 signing이 생성되어 있는 상태이다.그런데 프로젝트를 받아서 빌드 할 때 제목처럼 Apple Development 키체인을 요구했다. 팝업 문구: 'codesign이(가) 'Apple Developement: 소유자 설정 이름, 사이닝 파일 이름(회사명)' 키체인을 사용하고자 합니다. 결론을 먼저 말하자면 혹시 Mac 이외에 별도의 키체인을 설정한적이 없다면 그냥 엔터치면 해결된다. (확인 버튼)저 상태 그대로 엔터만 치면 빌드가 될 것이다. 난 이걸로 2시간을 검색하고 계정 재설정에 난리를 쳤다.. 만약 Mac의 키체인이라면 설..

어쩌다보니 내가 2년차에 현재 회사에 입사 했을 때 모든 웹 개발자는 퇴사하고 없는 상황이었다.그래서 처음에는 다른 인원에 맞춰 모바일 네이티브 언어로 개발도 했었고 그 뒤로 웹앱과 웹을 하고 있는데 Vuejs와 React를 도입했으나 아무도 가르쳐주는 사람이 없었다. 외주 프로젝트가 많은 이상 개발 기간이 넉넉하지도 않고 위의 두 라이브러리, 프레임워크로 개발을 하다보니 최적화된 설계 없이 특정 기능들을 위주로 개발하게 되었다.특히 React에서는 특정 hooks, 예를 들면 useState와 useEffect의 숫자가 너무 많거나 이외의 hooks를 거의 사용하지 않고 개발하는 상황이 벌어졌다. 그나마 필요한 순간마다 공부하여 프로젝트에 적용하였고 프로젝트 사이마다 조금씩 시간이 나면 프로젝트 문서를..

react-helmet-async란'react-helmet-async' 라이브러리는 리액트 애플리케이션의 부분을 동적으로 관리할 수 있도록 도와주는 라이브러리이다.'react-helmet'의 문제점을 해결하기 위해 만들어진 포크(fork) 버전이며 'react-helmet'이 'react-side-effect'에 의존하고 있어 서버 사이드 렌더링 환경에서 비동기 작업을 처리할 때 문제가 발생할 수 있다. 사용하는 이유리액트는 SPA(Single Page Application)이다.그래서 각 페이지별로 title이나 meta 태그 등을 설정하기 어렵고, 크롤러가 모든 페이지의 정보를 가져갈 수 없어 검색엔진최적화(SEO)에 좋지 않다.이런 단점을 보완하기 위해 각 페이지별로 title과 meta 태그..

1. 프로젝트 생성하기 npm init react-app . 터미널에서 원하는 디렉토리에 들어가서 npm init react-app .를 입력하면 현재 디렉토리에 리액트 프로젝트를 생성합니다. 만약 위 방법을 사용할 때 에러가 난다면 아래 방법으로 빌드한다. npx create-react-app my-app 2. 개발 모드 실행하기 npm run start 터미널에서 npm run start를 입력하면 개발 모드 서버가 실행됩니다. 3. 실행 중인 서버 종료하기 ctrl + c (맥북은 cmd + c) 서버가 실행 중인 터미널에서 ctrl + c를 입력하면 서버가 종료됩니다. 4. 개발된 프로젝트 빌드하기 npm run build 터미널에서 npm run build를 입력하면 빌드를 시작합니다. 5. 빌..