온라인 강의(유데미, 인프런 등)/React 완벽 가이드(유데미) (25) 썸네일형 리스트형 [react] redux를 사용하기 싫을 때 전역 데이터 관리 방법 - react custom hook으로 바꾸기(feat. context API) Redux를 사용하고 싶지 않을 때?! 리액트만 존재하는 세상에서 살고 싶을 때 부가 라이브러리를 설치하기 싫을 때 리덕스를 사용하지 않고 전역 state를 관리하고 싶을 때 해결 방안 1 ) context API 장점: 사용하기 간단한 편. 리덕스를 몰라도 됨. 단점: 고빈도 업데이트에는 효율적이지 않음(테마나 인증에는 적합). context에 변경 사항이 있을 시 useContext를 사용하는 모든 컴포넌트가 다시 빌드되고 리렌더링 됨(직접적으로 영향받았는지 상관 안 하고) -> 자주 바뀌는 state의 관리에 최적화되어있지 않음. https://bbeeyaks-moment.tistory.com/entry/react-context-API-useContext [react] context API cont.. [test] react 테스트 간단 개념 정리 Manual Test 브라우저에서 코드 미리 보며 테스트하는 것으로 매우 중요하다. 하지만 가능한 모든 조합과 시나리오를 테스트하는 것은 어렵기 때문에 오류 발생 가능성이 있다. Automatical Test 코드를 테스트하는 코드로 앱의 개별 구성 요소를 테스트한다. 매우 기술적인 요소지만 모든 구성 요소를 한 번에 테스트할 수 있다. 1. Unit Tests 가장 작은 단위에 대한 테스트를 작성하는 것이다. 개별 구성 요소(함수, 컴포넌트)를 격리하여 테스트한다. 프로젝트에는 일반적으로 수십 또는 수 백 개의 단위 테스트가 포함된다. 가장 흔하고 가장 중요한 test이다. 모든 개별 단위를 각자 테스트하면 전체 애플리케이션도 동작한다는 아이디어로, 전체 애플리케이션이 실제로 작동하는지 확인하기 위해 .. [vercel] vercel로 client 배포하기 vercel nextjs를 만든 팀과 같은 팀이 개발하였고, nextjs에 최적화되어 있다. Git과 연동되어 따로 파일을 빌드할 필요없이 프로젝트 폴더를 Git에 push 해준뒤 vercel과 프로젝트 폴더를 연동 시켜주면 된다. 수정사항이 생길 경우 수정 뒤 다시 push해주면 자동으로 재배포가 된다. 1. 깃헙 레포지토리 vercel과 연결 2. 배포 완료 되면 'visit' 버튼 누른 후 배포 링크 방문 후 테스트 메인 프로젝트에서 배포할 때 vercel을 사용했어서 vercel 사용 방법이 궁금했는데, NextJS 강의를 들으며 해당 내용이 있어 정리해보았다. 정리라고 표현할 것도 없이 무지무지 간단했다! 나중에 토이 프로젝트 진행할 때 가볍게 배포해주면 너무 좋을 것 같다. 이제 코스에서 배웠.. [NextJS] NextJS 개념 정리 NextJs React를 기반으로 한 생산용 React 프레임워크이다. 대규모의 양산형 React 앱을 쉽게 개발할 수 있게 도와준다. 프레임워크?! 라이브러리보다 크고 다양한 기능을 가진다. 코드를 작성하는 방법, 파일을 구성하는 방법에 대한 명확한 규칙과 지침이 있다. 서버 사이드 렌더링(자동으로 사전 페이지 렌더링. SEO에 유리)을 내장하고 있는 React 풀스택 프레임워크이다. 백엔드 코드를 프로젝트에 쉽게 적용할 수 있어 프로젝트에 클라이언트와 백엔드 코드를 모두 내장시킬 수 있다. npx create-next-app npm run dev 를 이용해 개발 서버를 시작할 수 있다. React에서 react-router-dom의 라우팅은 CSR을 제공하고, Next에서 제공하는 File Syste.. [typescript] tsconfig.json tsconfig.json에서 중요한 설정들만 정리하고 넘어가자. { "compilerOptions": { // 작성된 코드를 어떤 자바스크립트 버전으로 변환할건지 결정 "target": "es5", // 타스 라이브러리들 -> 어떤 타입이 타스에서 기본적으로 지원되는지 결정 "lib": ["dom", "dom.iterable", "esnext"], // .js 파일 초함 여부 결정. 일반 자스 파일을 프로젝트에 둘건지, 에러 표시 안할건지 "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, // 프로젝트에 가장 엄격한 설정 적용됨 -> 묵시적 any 설정 불가. 명시적으로 타.. [typescript] typescript 개념 정리(2) React with TypeScript 설치 npx create-react-app 프로젝트 이름 --template typescript 리액트는 jsx문법을 사용하기 때문에 typescript를 사용할 때 확장자명을 ts가 아닌 tsx로 사용한다(컴포넌트를 생성하는 게 아니라면 ts로 작성해도 됨). props의 타입 지정 : React.FC props의 타입을 Generics로 지정한다. -> FC 자체가 Generics 타입이다. React.FC를 사용하면 props에 기본적으로 children 이 들어가 있고, 컴포넌트의 defaultProps, propTypes, contextTypes를 설정할 때 자동완성 기능을 이용할 수 있다. React.FC가 이미 제네릭 타입이기 때문에 타입은 이미 정의된.. [typescript] typescript 개념 정리(1) 메인 프로젝트를 마친 후 더 공부해보고 싶다고 생각한 대표적인 것들이 상태관리 라이브러리, 배포 관련 그리고 Typescript였다. Typescript를 공부하는 이 날을 얼마나 기다렸던가! 인강의 순서대로 공부하느라 조금 늦어졌는데, 얼른 타스 공부하고 싶어서 손이 근질근질 거려 혼났다(왠지 좀 또라이 같지만.. 타스 공부하고 싶어서 손이 근질거렸다니;;). 인강에는 Next.js와 배포, 단위 테스트 등의 내용이 먼저 있지만 타스 관련 부분을 얼른 듣고 싶어서!! 먼저 듣기로 했다^^ 듣는 내 마음이지^^ 타스를 쓰는 회사도 있고 아닌 회사도 있다고 하던데, 필드에서 타스를 쓰는 비율이 어떻게 되는지 많이 궁금하다. 요즘 많이 쓰인다고 하니 열심히 리액트 완벽 가이드 강의를 들으며 타스의 개념을 정.. [react] React Router v6.4 loader/action/fetchers React Router 부분 강의를 듣다가 이전에 배운 적 없었던 개념인 loader, action, fetchers에 대해 배우게 되었다. 구글링 해보니 작년 후반기쯤 업데이트가 되어 자료가 별로 없는 것 같지만 다행히 아주 잘 정리되어 있는 블로그가 있어 해당 블로그들과 인강을 통해 개념을 이해해 보자. 나중에 꼭 리액트 쿼리에 대해 배우고 싶었는데(멘토님이 실시간 데이터 업데이트 부분 말씀하시면서 한 번 언급하셨던 걸 기억하여), 리액트 라우터와 리액트 쿼리가 환상의 짝이라고 하니!! 더욱 정리해 놓아야겠다는 생각이 들었다. 리액트 라우터와 리액트 쿼리는 환상의 짝입니다. React Router 메인 프로젝트에서 데이터 실시간 업데이트 면에서 아주 애를 먹었기 때문에(useAxios 훅 만들어서~ .. 이전 1 2 3 4 다음
