시럽로그

이전에 작업하던 리액트를 타입스크립트로 전환해보자! 1. Typescript 관련 패키치를 설치한다. pnpm install --save-dev typescript @types/react @types/react-dom 2. 명령어로 tsconfig.json 생성 npx tsc --init 난 자동으로 생성된 tsconfig.json이 주석으로 도배되는 등 너무 난잡해서 React + ts 에 적합한 권장 설정을 찾아 넣었다. { "compilerOptions": { "target": "ES2016", "module": "commonjs", "lib": ["DOM", "ESNext"], "jsx": "react-jsx", // React 17 이상일 경우 "moduleReso..

우리 회사는 매우매우 레거시 코드를 사용하고 있고FTP 방식으로 실서버에 적용하고 있어, 마이그레이션은 내 마음 속 숙제였다.입사 이후부터 줄곧 마이그레이션을 주장하고 있지만최소 15년간 누적된 스파게티 코드로 인해 사이트의 복잡도가 높아 그 누구도 선뜻 내 제안을 받아들이지 못했다.입사한 지 2년이 지난 최근에야 부분적 마이그레이션을 적용해서 점차 확대해가는 방식을 승인해주셨는데,이전에 시도했을 땐 '이렇게 복잡하면 안하느니만 못한데...?' 수준이라 포기했었다.그리고 최근 다시 찾아봤는데, vite로 엄청 쉽고 간단하게 할 수 있는 것이었다.! 1. 먼저 로컬에서 vite로 React 프로젝트를 생성한다.pnpm create vite@latest php-to-react --template react..

리액트에서 컴포넌트를 선언하는 2가지 방식에는 다들 알다시피 함수 컴포넌트와 클래스 컴포넌트가 있다. 이에 대해 리액트 킹식문서에서 설명하고 있는데, 잘 정리해보자... 함수 컴포넌트와 클래스 컴포넌트의 차이점 1. 선언 방식 함수 컴포넌트 function Welcome(props) { return Hello, {props.name}; } 클래스 컴포넌트 class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } 클래스 키워드 필요 Component로 상속받아야 함 render() 메소드 필요 ⭐ React의 관점에서 볼 때 위 두 가지 유형의 컴포넌트는 동일하게 동작한다. 2. 일반적 차이 클래스 컴포넌트..

JavaScript 에서의 클린코드 1. 변수(Variables) 1-1. 의미있고 발음하기 쉬운 변수 이름을 사용 안좋은 예: const yyyymmdstr = moment().format('YYYY/MM/DD'); 좋은 예: const currentDate = moment().format('YYYY/MM/DD'); 1-2. 동일한 유형의 변수에 동일한 어휘를 사용 안좋은 예: getUserInfo(); getClientData(); getCustomerRecord(); 좋은 예: getUser(); 2. 함수(Functions) 2-1. 함수 인자는 2개 이하가 이상적 매개변수의 개수를 제한 하는 것은 함수 테스팅을 쉽게 만들어 주기 때문에 중요하다. 만약 매개변수가 3개 이상일 경우엔 테스트 해야하..

useMemo와 useCallback은 컴포넌트 성능을 최적화하기 위해 사용된다. useMemo의 'Memo'는 Memoization을 뜻하는데, 동일한 값을 리턴하는 함수를 반복적으로 호출해야 한다면 맨 처음 값을 계산할 때 해당 값을 메모리에 저장해서 필요할 때마다 또 다시 계산하지 않고 메모리에서 꺼내서 재사용하는 기법이다. 즉, 자주 필요한 값을 맨 처음 계산할 때 캐싱해둬서 그 값이 필요할 때마다 다시 계산하는 게 아니라 캐시에서 꺼내서 사용하는 것이다. ⭐ 그 전에 한 가지 짚고 넘어가야 할 부분! 함수형 컴포넌트는 말 그대로 함수이다. 함수형 컴포넌트가 렌더링이 된다 = 함수가 호출된다 함수는 호출될 때마다 함수 내부에 정의되어있는 모든 내부 변수가 초기화된다. 위 컴포넌트를 예시로 들어보자..

🚀 학습 목표 전역 상태 관리 라이브러리로서의 Redux의 필요성을 이해한다. Action, Dispatch, Reducer, Store 등 Redux의 핵심 개념을 이해한다. React-Redux 라이브러리에서 제공하는 useSelector, useDispatch Hook을 사용할 수 있다. Design Pattern 1. design pattern이란? 패턴 === 되풀이되는 사건이나 물체의 형태 디자인 패턴 === 설계 간 자주 발생하는 문제에 대한 모범 답안 프로그램을 개발하면서 생기는 문제점들에 대해서 해결할 수 있는 방법을 도출하고 그를 패턴화해둔 것 2. Design Pattern을 사용하는 이유 1) 검증된 해결책 바퀴를 재발명하지 마라(Don't reinvent the wheel) 필요한..