react7 tsconfig alias와 vite tsconfig 설정에는 baseUrl, paths를 설정하여 import 시 절대경로를 사용할 수 있는 기능이 있습니다.// tsconfig.app.json의 일부 "baseUrl": "./src","paths": { "@hooks/*": ["hooks/*"], "@components/*": ["components/*"] }, create-vite로 구성한 react 앱을 구성하는 과정에서 위와 같은 alias 설정을 하는 일이 있었습니다.tsconfig 설정 자체는 이상이 없었지만, vite를 통해 앱을 실행하는 과정에서 경로를 찾지 못하는 문제가 나타났습니다. 앱을 실행하는 것은 vite이기에 vite와 tsconfig 사이의 문제이지 않을까 싶어 검색을 진행했고, tsconfi.. 2024. 10. 25. Rollup Config 'external' https://rollupjs.org/configuration-options/#external Configuration Options | Rollup rollupjs.org문제상황사내에서 npm 모듈을 제작하는 과정에서 rollup build 명령 실행 시 peer-dependency인 react가 빌드에 포함되지 않아 발생했던 문제가 있었다. 원인분석- react가 peer-dependency이기에 실제로는 빌드에 포함되지 않아야 했다 (react를 사용하는 프로젝트에만 설치되는 것을 가정하기에, 원 프로젝트의 리액트를 사용하는 것을 가정했다.)- 모노레포 구조에서 루트에는 react가 설치되어 있어, 개발 과정에서 react를 import 할 때는 문제가 없었다.- rollup -c를 실행하면 패키지.. 2024. 8. 29. React Conf 2024를 다녀와서 뒤늦게 적어보는 React Conf 2024 방문기 지난 5월 14일, 5월 15일(미국 서부시간 기준) 네바다 주에서 열린 컨퍼런스에 다녀왔다.언제였는지 확실히 기억나지는 않지만 지난 겨울쯤, 5월에 컨퍼런스가 있다는 알림을 받고 뭐 되겠어 하는 심정으로 컨퍼런스 현장 참여 티켓 로터리에 참가 메일을 적어뒀다. 3월에는 그 로터리가 되었다는 메일을 받았고 이걸 가야하나 말아야하나 고민하고 상담하고 했던 기억이 난다. 가보는 게 좋다, 가야하나 고민을 많이 했던 것 같다. full attendance ticekt 비용이 999$였던게 첫 번째 걸림돌이었다. 기술적인 내용들은 어차피 공개영상으로 다 볼 수 있을 터였고, 키노트와 같이 중요한 내용들은 금방 번역과 정리들이 올라올 것이었다. 앞으로 일정이 어.. 2024. 6. 19. 리액트-쿼리 / TanStack Query(@tanstack/react-query) - 2 5. Mutations - Mutations는 무엇일까? Mutation은 개발자가 서버에서 데이터를 생성하거나 수정하거나 삭제하는 등의 데이터 변경/수정 작업을 처리할 수 있도록 해주는 React-Query의 핵심 개념이다. 리액트 애플리케이션에서 위의 작업들에 해당하는 Side-effect를 수행하고 로컬 캐시를 업데이트하여 클라이언트 측의 데이터가 서버와 동기화 상태를 유지하도록 하는 데 사용된다. Mutation을 이해하기에 앞서 Mutation은 Query와 어떻게 다른 지 알아보면 다음과 같다. - 데이터 연산: Query는 데이터를 가져오고 읽는 데 중점을 두고 있으나 Mutation은 생성, 업데이트, 삭제와 같은 작업을 통해 데이터를 수정하는 역할을 담당한다. - Idempotence(멱.. 2023. 3. 16. Elice 2차 프로젝트, Cocktailer 회고 2022년 12월 16일 ~ 2022년 12월 30일, 약 3주간 진행된 Cocktailer 프로젝트에 대한 회고 https://www.cocktailer.p-e.kr Cocktailer www.cocktailer.p-e.kr https://github.com/Cocktailer-Elice/cocktailer GitHub - Cocktailer-Elice/cocktailer: 🍹 칵테일에 대한 모든 것 🍹 칵테일에 대한 모든 것. Contribute to Cocktailer-Elice/cocktailer development by creating an account on GitHub. github.com 1. React-hook-form의 이용 처음 사용하게 된 계기는 전에 들었던 강의를 통해 react.. 2023. 1. 22. Recoil State Management Library Recoil [https://recoiljs.org/ko/] state management tool을 이용하는 이유 - props가 이용되지 않는 components에서 불필요하게 prop을 받아 전해줘야 한다. (Traveling prop problem) - 그에 따라 수정 소요 발생 시 오류가 발생할 가능성이 높은 등의 문제가 발생할 수 있다. 다른 State management tools? React 자체가 가지고 있는 Context, Redux 등이 존재함. Recoil의 state 저장은 atom이라 부름 - root를 RecoilRoot로 감싸주어야 한다 - atom을 생성하고 보관하는 파일을 만드는 편이 좋다. atom의 생성 // atom의 생성.. 2022. 8. 25. Typescript + styled-components styled-components는 JS 라이브러리로 typescript 환경에서 사용하기 위해서는 DefinitelyTyped를 이용해야 한다. npm install --save-dev @types/styled-components yarn add @types/styled-components -D styled components의 타입을 설명해주는 라이브러리를 불러오면 TS 환경에서 이용이 가능해진다. DefinitelyTyped는 인기있는 수많은 npm 라이브러리에 대한 타입 설명을 포함하고 있으니 이용할 일이 많을 것. -------------------------------------------------------------------------------------------------------.. 2022. 8. 12. 이전 1 다음
